@miphamai/cli 0.19.4 → 0.20.0

package/src/ui/agent-footer.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Box, Text } from 'ink'
+import { useI18n } from '../i18n-context'
 
 export interface AgentEntry {
   id: string
@@ -33,6 +34,7 @@ function formatTokens(n: number): string {
 }
 
 export function AgentFooter({ agents, gitBranch, tick: _tick }: AgentFooterProps) {
+  const { t } = useI18n()
   const hasAgents = agents.length > 0
   const hasBranch = gitBranch.length > 0
 
@@ -73,7 +75,7 @@ export function AgentFooter({ agents, gitBranch, tick: _tick }: AgentFooterProps
             {/* Spacer pushes stats to the right — Ink handles this naturally */}
             <Text dimColor>
               {'  '}
-              {isRunning ? formatElapsed(elapsed) : 'finished'}
+              {isRunning ? formatElapsed(elapsed) : t('ui.agent.finished')}
             </Text>
             {isRunning && agent.tokensUsed > 0 && (
               <Text dimColor>

package/src/ui/app.tsx

@@ -5,7 +5,7 @@ import type { QueryEngine } from '../core/engine'
 import type { MiphamConfig } from '../shared/index.ts'
 import type { SkillsLoader } from '../skills/loader'
 import type { PluginManager } from '../plugin/plugin-manager'
-import { getPreference, setPreference } from '../config/preferences'
+import { setPreference } from '../config/preferences'
 import { AgentRegistry } from '../agent/agent-registry'
 import { getBackgroundAgentRegistry } from '../agent/background-registry'
 import { ChatPanel } from './chat'
@@ -19,6 +19,7 @@ import {
   handleSwitch,
   type CommandContext,
 } from './commands'
+import { useI18n } from '../i18n-context'
 import type { PermissionMode } from '../shared/index.ts'
 
 interface AppProps {
@@ -72,14 +73,6 @@ const PERMISSION_MODES: PermissionMode[] = [
 // Labels aligned with Claude Code terminology: describe behavior, not capability.
 // Claude Code modes: manual mode → accept edits on → bypass
 // Mipham extends with 3 extra modes (plan, auto, dontAsk) for finer control.
-const PERMISSION_LABELS: Record<PermissionMode, string> = {
-  default: 'manual mode',
-  acceptEdits: 'accept edits on',
-  plan: 'plan mode · read-only',
-  auto: 'auto mode',
-  dontAsk: "don't ask",
-  bypassPermissions: 'bypass',
-}
 const PERMISSION_COLORS: Record<PermissionMode, string> = {
   default: 'white',
   acceptEdits: 'blue',
@@ -128,14 +121,26 @@ export function App({
   version,
   sessionId,
 }: AppProps) {
+  const { t } = useI18n()
+  const PERMISSION_LABELS = useMemo<Record<PermissionMode, string>>(
+    () => ({
+      default: t('ui.permission.manual'),
+      acceptEdits: t('ui.permission.accept_edits'),
+      plan: t('ui.permission.plan_mode'),
+      auto: t('ui.permission.auto'),
+      dontAsk: t('ui.permission.dont_ask'),
+      bypassPermissions: t('ui.permission.bypass'),
+    }),
+    [t],
+  )
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [isLoading, setIsLoading] = useState(false)
   const [providerId, setProviderId] = useState(initialProvider || config.defaultProvider)
   const [modelId, setModelId] = useState(initialModel || config.defaultModel)
   const [pickerOpen, setPickerOpen] = useState(false)
-  const [sessionTitle, setSessionTitle] = useState('')
-  const [fastMode, setFastMode] = useState(false)
-  const [effort, setEffort] = useState('high')
+  const [_sessionTitle, setSessionTitle] = useState('')
+  const [_fastMode, setFastMode] = useState(false)
+  const [_effort, setEffort] = useState('high')
   const [focusMode, setFocusMode] = useState(false)
   const [_ultracodeMode, setUltracodeMode] = useState(false)
   const [goalText, setGoalText] = useState('')
@@ -244,8 +249,9 @@ export function App({
       setUltracodeMode: (on: boolean) => setUltracodeMode(on),
       skillsLoader,
       pluginManager,
+      t,
     }),
-    [engine, config, providerId, modelId, skillsLoader, pluginManager, sessionId],
+    [engine, config, providerId, modelId, skillsLoader, pluginManager, sessionId, t],
   )
 
   const handleSubmit = useCallback(
@@ -612,10 +618,10 @@ export function App({
         )}
         <Box flexDirection="row">
           <Text color={PERMISSION_COLORS[permissionMode]}>
-            ⏵⏵ {PERMISSION_LABELS[permissionMode]} (shift+tab to cycle)
+            ⏵⏵ {PERMISSION_LABELS[permissionMode]} ({t('ui.status.shift_tab_cycle')})
           </Text>
-          <Text dimColor> · esc to interrupt</Text>
-          <Text dimColor> · ← for agents</Text>
+          <Text dimColor> · {t('ui.status.esc_to_interrupt')}</Text>
+          <Text dimColor> · {t('ui.status.left_for_agents')}</Text>
         </Box>
       </Box>
     </Box>

package/src/ui/chat.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Box, Text } from 'ink'
+import { useI18n } from '../i18n-context'
 import type { ChatMessage } from './app'
 
 interface ChatPanelProps {
@@ -49,6 +50,7 @@ function toolColor(name: string): string {
  */
 const MessageRow = React.memo(
   function MessageRow({ msg }: { msg: ChatMessage; isLast: boolean }) {
+    const { t } = useI18n()
     return (
       <Box
         flexDirection="column"
@@ -76,8 +78,8 @@ const MessageRow = React.memo(
               {msg.role === 'user'
                 ? `▸ ${displayCwd()}`
                 : msg.role === 'assistant'
-                  ? 'Mipham Code'
-                  : '⚠ System'}
+                  ? t('ui.assistant.role_label')
+                  : `⚠ ${t('ui.system.role_label')}`}
               :
             </Text>
             <Text>{msg.content}</Text>
@@ -93,6 +95,7 @@ const MessageRow = React.memo(
 )
 
 export function ChatPanel({ messages, focusMode }: ChatPanelProps) {
+  const { t } = useI18n()
   // Group consecutive tool calls into compact summaries to reduce visual noise.
   // In focus mode, use the more aggressive compactForFocus.
   const displayMessages = focusMode ? compactForFocus(messages) : compactToolGroups(messages)
@@ -102,8 +105,7 @@ export function ChatPanel({ messages, focusMode }: ChatPanelProps) {
       {focusMode && messages.length > 0 && (
         <Box marginBottom={1}>
           <Text dimColor>
-            🔍 Focus — {countHidden(messages, displayMessages)} hidden · /focus to toggle · Ctrl+O
-            to expand
+            🔍 {t('ui.chat.focus_hint')} — {countHidden(messages, displayMessages, t)} · {t('ui.chat.toggle_focus_hint')} · {t('ui.chat.expand_hint')}
           </Text>
         </Box>
       )}
@@ -111,22 +113,24 @@ export function ChatPanel({ messages, focusMode }: ChatPanelProps) {
         <Box flexDirection="column">
           <Box marginBottom={1}>
             <Text color="cyan" bold>
-              Mipham Code
+              {t('ui.banner.title')}
             </Text>
-            <Text dimColor> — AI-Powered Programming Assistant</Text>
+            <Text dimColor> — {t('ui.banner.subtitle')}</Text>
           </Box>
-          <Text dimColor>Multi-model · Multi-provider · Skills & Tools · Open-core</Text>
+          <Text dimColor>{t('ui.banner.tagline')}</Text>
           <Box marginTop={1}>
             <Text dimColor>
-              Type a message to start. <Text color="yellow">/help</Text> for commands ·{' '}
-              <Text color="yellow">Ctrl+P</Text> pick model · <Text color="yellow">Esc</Text> to
-              exit
+              {t('ui.banner.start_message')} <Text color="yellow">/help</Text>
             </Text>
           </Box>
           <Box marginTop={1}>
             <Text dimColor>
-              Tip: Use <Text color="yellow">/clear</Text> to start fresh when switching topics and
-              free up context
+              {t('ui.banner.controls_hint')}
+            </Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>
+              {t('ui.banner.tip_clear')}
             </Text>
           </Box>
         </Box>
@@ -239,9 +243,9 @@ function summarizeToolGroup(tools: ChatMessage[]): ChatMessage {
 }
 
 /** Count how many messages are hidden in focus mode. */
-function countHidden(all: ChatMessage[], compacted: ChatMessage[]): string {
+function countHidden(all: ChatMessage[], compacted: ChatMessage[], t: (key: string, params?: Record<string, string>) => string): string {
   const toolCount = all.filter((m) => m.toolMeta).length
   const hidden = all.length - compacted.length
-  if (hidden <= 0) return `showing all ${all.length} messages`
-  return `${hidden} tool outputs folded (${toolCount} total tool calls)`
+  if (hidden <= 0) return t('ui.chat.showing_all', { count: String(all.length) })
+  return t('ui.chat.tool_outputs_folded', { hidden: String(hidden), toolCount: String(toolCount) })
 }

package/src/ui/command-picker.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useMemo, useEffect } from 'react'
 import { Box, Text, useInput } from 'ink'
 import TextInput from 'ink-text-input'
-import { getCommandList, type CommandEntry } from './commands.js'
+import { useI18n } from '../i18n-context'
+import { getCommandList } from './commands.js'
 
 interface CommandPickerProps {
   /** Text already typed (e.g. "/", "/age") — used as initial filter */
@@ -29,6 +30,7 @@ export function CommandPicker({
   onClose,
   maxVisible = PAGE_SIZE,
 }: CommandPickerProps) {
+  const { t } = useI18n()
   const allCommands = useMemo(() => getCommandList(), [])
   const [filter, setFilter] = useState(initialFilter)
   const [cursorIdx, setCursorIdx] = useState(0)
@@ -53,7 +55,7 @@ export function CommandPicker({
     Math.min(cursorIdx - Math.floor(maxVisible / 2), filtered.length - maxVisible),
   )
   const visible = filtered.slice(scrollStart, scrollStart + maxVisible)
-  const adjustedCursor = cursorIdx - scrollStart
+  const _adjustedCursor = cursorIdx - scrollStart
 
   // Wrap cursor safely
   const safeCursor = (i: number) =>
@@ -92,14 +94,14 @@ export function CommandPicker({
       {/* Title */}
       <Box marginBottom={1}>
         <Text bold color="cyan">
-          Commands
+          {t('ui.command_picker.title')}
         </Text>
-        <Text dimColor> ↑↓ navigate · Enter select · Esc close</Text>
+        <Text dimColor> {t('ui.command_picker.nav_help')}</Text>
       </Box>
 
       {/* Command list */}
       <Box flexDirection="column" marginBottom={1}>
-        {visible.length === 0 && <Text dimColor> No commands match "{filter}"</Text>}
+        {visible.length === 0 && <Text dimColor> {t('ui.command_picker.no_matches', { filter })}</Text>}
         {visible.map((cmd, i) => {
           const globalIdx = i + scrollStart
           const isCursor = globalIdx === cursorIdx
@@ -119,8 +121,11 @@ export function CommandPicker({
       {filtered.length > maxVisible && (
         <Box marginBottom={1}>
           <Text dimColor>
-            {scrollStart + 1}–{Math.min(scrollStart + maxVisible, filtered.length)} of{' '}
-            {filtered.length} commands
+            {t('ui.command_picker.scroll_indicator', {
+              start: String(scrollStart + 1),
+              end: String(Math.min(scrollStart + maxVisible, filtered.length)),
+              total: String(filtered.length),
+            })}
           </Text>
         </Box>
       )}
@@ -137,7 +142,7 @@ export function CommandPicker({
               onSelect(selected.name)
             }
           }}
-          placeholder="Type to filter commands..."
+          placeholder={t('ui.command_picker.placeholder')}
         />
       </Box>
     </Box>