@miphamai/cli 0.30.0 → 0.31.0

package/src/ui/config-wizard.tsx

@@ -2,97 +2,123 @@
  * Interactive first-run Config Wizard
  *
  * Replaces manual config.yml editing for non-technical users.
- * Flow: Welcome → Local/Cloud → Provider → Model → API Key → Done
+ * Flow: Welcome → Mode → Provider → Model → API Key → Confirm → Done
  *
- * Local path: Ollama setup (endpoint + model pull)
+ * Local path: Ollama setup
  * Cloud path: pick provider → pick model → paste API key → auto-configure
  */
 
-import React, { useState, useCallback } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Box, Text, useInput } from 'ink'
 import TextInput from 'ink-text-input'
-import { DEFAULT_PROVIDERS } from '../shared/constants'
+import { DEFAULT_PROVIDERS, OLLAMA_PRESET_MODELS } from '../shared/constants'
 import type { ProviderConfig, ModelInfo } from '../shared/types'
-import { mkdirSync, writeFileSync, existsSync } from 'node:fs'
+import { mkdirSync, writeFileSync } from 'node:fs'
 import { join } from 'node:path'
 import { homedir } from 'node:os'
 import { execSync } from 'node:child_process'
 
 // ── Types ──
 
-interface WizardState {
-  step:
-    | 'welcome'
-    | 'mode'
-    | 'cloud-provider'
-    | 'cloud-model'
-    | 'cloud-key'
-    | 'local-ollama'
-    | 'confirm'
-    | 'done'
-  mode: 'local' | 'cloud' | null
-  providerId: string | null
-  modelId: string | null
-  apiKey: string
-  ollamaEndpoint: string
-  ollamaModel: string
-  error: string | null
-}
+type Step = 'welcome' | 'mode' | 'provider' | 'model' | 'apikey' | 'ollama' | 'confirm' | 'done'
 
 interface Props {
   onComplete: (config: { providerId: string; modelId: string; apiKey: string }) => void
   onSkip: () => void
 }
 
-// ── Helpers ──
+// ── Constants ──
 
-/** Filter to cloud-only providers (exclude ollama/mipham local-only). */
 const CLOUD_PROVIDERS = DEFAULT_PROVIDERS.filter((p) => p.id !== 'ollama' && p.id !== 'mipham')
 
-/** Get active models for a provider. */
-function getModels(providerId: string): ModelInfo[] {
+const SELECTED_COLOR = 'cyan'
+
+// ── Helpers ──
+
+function getActiveModels(providerId: string): ModelInfo[] {
   const provider = DEFAULT_PROVIDERS.find((p) => p.id === providerId)
   return provider?.models.filter((m) => m.status === 'active') || []
 }
 
-/** Write config.yml to ~/.mipham/ */
-function writeConfig(providerId: string, modelId: string, apiKey: string): void {
+function writeConfigFile(providerId: string, modelId: string, apiKey: string): void {
   const configDir = join(homedir(), '.mipham')
   mkdirSync(configDir, { recursive: true })
 
   const provider = DEFAULT_PROVIDERS.find((p) => p.id === providerId)
-  const configLines = [
-    `# Mipham Code Configuration`,
-    `# Generated by Config Wizard`,
-    `# ${new Date().toISOString()}`,
-    ``,
-    `version: 1`,
+  const models =
+    providerId === 'ollama' ? getOllamaModelListForConfig() : getActiveModels(providerId)
+
+  function getOllamaModelListForConfig(): ModelInfo[] {
+    // 与 getOllamaModelList 逻辑一致，但用于配置写入
+    const seen = new Set<string>()
+    const result: ModelInfo[] = []
+
+    // ollama list
+    try {
+      const out = execSync('ollama list', { timeout: 5000, encoding: 'utf-8' })
+      const lines = out.split('\n').slice(1).filter(Boolean)
+      for (const line of lines) {
+        const name = line.split(/\s+/)[0]!
+        if (!seen.has(name)) {
+          seen.add(name)
+          result.push({
+            id: name,
+            name,
+            providerId: 'ollama',
+            contextWindow: 128_000,
+            maxOutput: 32_000,
+            vision: false,
+            status: 'active',
+          })
+        }
+      }
+    } catch {
+      /* ollama not available */
+    }
+
+    for (const p of OLLAMA_PRESET_MODELS) {
+      if (!seen.has(p.id)) {
+        seen.add(p.id)
+        result.push({
+          id: p.id,
+          name: p.id,
+          providerId: 'ollama',
+          contextWindow: 128_000,
+          maxOutput: 32_000,
+          vision: false,
+          status: 'active',
+        })
+      }
+    }
+    return result
+  }
+  const lines = [
+    '# Mipham Code Configuration',
+    `# Generated by Config Wizard — ${new Date().toISOString()}`,
+    '',
+    'version: 1',
     `defaultProvider: ${providerId}`,
     `defaultModel: ${modelId}`,
-    `permission: default`,
-    ``,
-    `providers:`,
+    'permission: default',
+    '',
+    'providers:',
     `  - id: ${providerId}`,
     `    name: ${provider?.name || providerId}`,
     `    protocol: ${provider?.protocol || 'openai-compatible'}`,
     ...(provider?.baseUrl ? [`    baseUrl: ${provider.baseUrl}`] : []),
     `    apiKey: ${apiKey}`,
     `    models:`,
+    ...models.map((m) => `      - id: ${m.id}`),
   ]
 
-  const models = getModels(providerId)
-  for (const m of models) {
-    configLines.push(`      - id: ${m.id}`)
-  }
-
-  writeFileSync(join(configDir, 'config.yml'), configLines.join('\n'), 'utf-8')
+  writeFileSync(join(configDir, 'config.yml'), lines.join('\n'), 'utf-8')
 }
 
-/** Check if Ollama is installed and running. */
 function checkOllama(): { installed: boolean; running: boolean; models: string[] } {
   try {
     execSync('ollama --version', { timeout: 5000, stdio: 'ignore' })
-    const models = execSync('ollama list', { timeout: 5000, encoding: 'utf-8' })
+    const out = execSync('ollama list', { timeout: 5000, encoding: 'utf-8' })
+    const models = out
       .split('\n')
       .slice(1)
       .filter(Boolean)
@@ -108,169 +134,224 @@ function checkOllama(): { installed: boolean; running: boolean; models: string[]
   }
 }
 
+// ── Ollama model list helpers ──
+
+interface OllamaModelItem {
+  id: string
+  source: 'local' | 'MiphamAI' | '热门'
+}
+
+function getOllamaModelList(installedModels: string[]): OllamaModelItem[] {
+  const seen = new Set<string>()
+  const result: OllamaModelItem[] = []
+
+  // ollama list 返回的本地模型
+  for (const name of installedModels) {
+    if (!seen.has(name)) {
+      seen.add(name)
+      result.push({ id: name, source: 'local' })
+    }
+  }
+
+  // 预置模型（去重）
+  for (const preset of OLLAMA_PRESET_MODELS) {
+    if (!seen.has(preset.id)) {
+      seen.add(preset.id)
+      result.push({ id: preset.id, source: preset.source as 'MiphamAI' | '热门' })
+    }
+  }
+
+  return result
+}
+
 // ── Component ──
 
 export function ConfigWizard({ onComplete, onSkip }: Props) {
-  const [state, setState] = useState<WizardState>({
-    step: 'welcome',
-    mode: null,
-    providerId: null,
-    modelId: null,
-    apiKey: '',
-    ollamaEndpoint: 'http://localhost:11434',
-    ollamaModel: '',
-    error: null,
-  })
+  const [step, setStep] = useState<Step>('welcome')
 
-  const [selectedIdx, setSelectedIdx] = useState(0)
-  const [inputValue, setInputValue] = useState('')
+  // Selections
+  const [mode, setMode] = useState<'cloud' | 'local' | null>(null)
+  const [providerId, setProviderId] = useState<string | null>(null)
+  const [modelId, setModelId] = useState<string | null>(null)
+  const [apiKey, setApiKey] = useState('')
+  const [error, setError] = useState<string | null>(null)
+
+  // List navigation cursor
+  const [cursor, setCursor] = useState(0)
+
+  // Ollama
+  const [ollamaModel, _setOllamaModel] = useState('')
   const [ollamaStatus, setOllamaStatus] = useState<ReturnType<typeof checkOllama> | null>(null)
+  const [ollamaCursor, setOllamaCursor] = useState(0)
+  const ollamaModelList = ollamaStatus ? getOllamaModelList(ollamaStatus.models) : []
 
-  // ── Navigation helpers ──
-
-  const goTo = useCallback((step: WizardState['step']) => {
-    setSelectedIdx(0)
-    setInputValue('')
-    setState((s) => ({ ...s, step, error: null }))
-  }, [])
-
-  const setMode = useCallback(
-    (mode: 'local' | 'cloud') => {
-      setState((s) => ({ ...s, mode }))
-      if (mode === 'cloud') {
-        goTo('cloud-provider')
-      } else {
-        const status = checkOllama()
-        setOllamaStatus(status)
-        goTo('local-ollama')
-      }
-    },
-    [goTo],
-  )
+  // ── Derived data ──
 
-  const selectProvider = useCallback(
-    (providerId: string) => {
-      setState((s) => ({ ...s, providerId }))
-      goTo('cloud-model')
-    },
-    [goTo],
-  )
+  const providerList = CLOUD_PROVIDERS
+  const modelList = providerId ? getActiveModels(providerId) : []
 
-  const selectModel = useCallback(
-    (modelId: string) => {
-      setState((s) => ({ ...s, modelId }))
-      goTo('cloud-key')
-    },
-    [goTo],
-  )
+  // Reset cursor when step changes
+  const goStep = (s: Step) => {
+    setCursor(0)
+    setOllamaCursor(0)
+    setError(null)
+    setStep(s)
+  }
+
+  // ── Completion handlers ──
 
-  const confirmApiKey = useCallback(() => {
-    const key = inputValue.trim()
-    if (!key) {
-      setState((s) => ({ ...s, error: '请输入 API Key' }))
+  const finishCloud = () => {
+    if (!providerId || !modelId || !apiKey.trim()) {
+      setError('请填写 API Key')
       return
     }
-    setState((s) => ({ ...s, apiKey: key, error: null }))
-    goTo('confirm')
-  }, [inputValue, goTo])
-
-  const finishLocal = useCallback(() => {
-    const endpoint = inputValue.trim() || 'http://localhost:11434'
-    const model = state.ollamaModel || 'llama3.2'
     try {
-      writeConfig('ollama', model, 'ollama-local')
-      onComplete({ providerId: 'ollama', modelId: model, apiKey: 'ollama-local' })
+      writeConfigFile(providerId, modelId, apiKey.trim())
+      onComplete({ providerId, modelId, apiKey: apiKey.trim() })
     } catch (err) {
-      setState((s) => ({ ...s, error: `配置写入失败: ${String(err)}` }))
+      setError(`写入配置失败: ${String(err)}`)
     }
-  }, [inputValue, state.ollamaModel, onComplete])
+  }
 
-  const finishCloud = useCallback(() => {
-    if (!state.providerId || !state.modelId || !state.apiKey) return
+  const finishLocal = () => {
+    const selectedModel = ollamaModelList[ollamaCursor]
+    const model = selectedModel?.id || ollamaModel.trim() || 'llama3.2'
     try {
-      writeConfig(state.providerId, state.modelId, state.apiKey)
-      onComplete({ providerId: state.providerId, modelId: state.modelId, apiKey: state.apiKey })
+      writeConfigFile('ollama', model, 'ollama-local')
+      onComplete({ providerId: 'ollama', modelId: model, apiKey: 'ollama-local' })
     } catch (err) {
-      setState((s) => ({ ...s, error: `配置写入失败: ${String(err)}` }))
+      setError(`写入配置失败: ${String(err)}`)
+    }
+  }
+
+  // ── Ollama initialization ──
+
+  useEffect(() => {
+    if (step === 'ollama' && !ollamaStatus) {
+      setOllamaStatus(checkOllama())
     }
-  }, [state, onComplete])
+  }, [step, ollamaStatus])
 
-  // ── Keyboard ──
+  // ── Keyboard: list navigation steps (no TextInput) ──
 
   useInput((_input, key) => {
+    // Esc always skips
     if (key.escape) {
-      onSkip()
+      if (step === 'welcome') {
+        onSkip()
+        return
+      }
+      // Go back one step
+      if (step === 'mode') {
+        goStep('welcome')
+        return
+      }
+      if (step === 'provider') {
+        goStep('mode')
+        return
+      }
+      if (step === 'model') {
+        goStep('provider')
+        return
+      }
+      if (step === 'apikey') {
+        goStep('model')
+        return
+      }
+      if (step === 'ollama') {
+        goStep('mode')
+        return
+      }
+      if (step === 'confirm') {
+        if (mode === 'cloud') {
+          goStep('apikey')
+          return
+        }
+        if (mode === 'local') {
+          goStep('ollama')
+          return
+        }
+      }
       return
     }
 
-    if (state.step === 'welcome') {
-      if (key.return) goTo('mode')
+    // ── Welcome ──
+    if (step === 'welcome') {
+      if (key.return) goStep('mode')
       return
     }
 
-    if (state.step === 'mode') {
-      if (key.upArrow || key.downArrow) {
-        setSelectedIdx((i) => (i === 0 ? 1 : 0))
-      }
+    // ── Mode selection ──
+    if (step === 'mode') {
+      if (key.upArrow) setCursor((c) => (c === 0 ? 1 : 0))
+      if (key.downArrow) setCursor((c) => (c === 0 ? 1 : 0))
       if (key.return) {
-        setMode(selectedIdx === 0 ? 'cloud' : 'local')
+        if (cursor === 0) {
+          // Cloud
+          setMode('cloud')
+          goStep('provider')
+        } else {
+          // Local
+          setMode('local')
+          setOllamaStatus(checkOllama())
+          goStep('ollama')
+        }
       }
       return
     }
 
-    // Cloud provider / model selection (list navigation)
-    if (state.step === 'cloud-provider' || state.step === 'cloud-model') {
-      const items =
-        state.step === 'cloud-provider'
-          ? CLOUD_PROVIDERS
-          : state.providerId
-            ? getModels(state.providerId)
-            : []
-
-      if (items.length === 0) return
-
-      if (key.upArrow) {
-        setSelectedIdx((i) => (i > 0 ? i - 1 : items.length - 1))
-      }
-      if (key.downArrow) {
-        setSelectedIdx((i) => (i < items.length - 1 ? i + 1 : 0))
-      }
+    // ── Cloud provider selection ──
+    if (step === 'provider') {
+      if (key.upArrow) setCursor((c) => (c > 0 ? c - 1 : providerList.length - 1))
+      if (key.downArrow) setCursor((c) => (c < providerList.length - 1 ? c + 1 : 0))
       if (key.return) {
-        const item = items[selectedIdx]
-        if (item) {
-          if (state.step === 'cloud-provider') {
-            selectProvider((item as ProviderConfig).id)
-          } else {
-            selectModel((item as ModelInfo).id)
-          }
+        const p = providerList[cursor]
+        if (p) {
+          setProviderId(p.id)
+          goStep('model')
         }
       }
       return
     }
 
-    // API key input: Enter submits
-    if (state.step === 'cloud-key') {
+    // ── Cloud model selection ──
+    if (step === 'model') {
+      if (modelList.length === 0) return
+      if (key.upArrow) setCursor((c) => (c > 0 ? c - 1 : modelList.length - 1))
+      if (key.downArrow) setCursor((c) => (c < modelList.length - 1 ? c + 1 : 0))
       if (key.return) {
-        confirmApiKey()
+        const m = modelList[cursor]
+        if (m) {
+          setModelId(m.id)
+          goStep('apikey')
+        }
       }
       return
     }
 
-    // Local Ollama input
-    if (state.step === 'local-ollama') {
+    // ── Ollama model selection ──
+    if (step === 'ollama') {
+      if (ollamaModelList.length === 0) return
+      if (key.upArrow) {
+        setOllamaCursor((c) => (c > 0 ? c - 1 : ollamaModelList.length - 1))
+        return
+      }
+      if (key.downArrow) {
+        setOllamaCursor((c) => (c < ollamaModelList.length - 1 ? c + 1 : 0))
+        return
+      }
       if (key.return) {
-        finishLocal()
+        goStep('confirm')
+        return
       }
       return
     }
 
-    // Confirm
-    if (state.step === 'confirm') {
+    // ── Confirm ──
+    if (step === 'confirm') {
       if (key.return) {
-        finishCloud()
-      }
-      if (key.backspace) {
-        goTo('cloud-key')
+        if (mode === 'cloud') finishCloud()
+        else finishLocal()
       }
       return
     }
@@ -278,9 +359,6 @@ export function ConfigWizard({ onComplete, onSkip }: Props) {
 
   // ── Render ──
 
-  const selectedColor = 'cyan'
-  const dimColor = 'gray'
-
   return (
     <Box flexDirection="column" padding={1}>
       {/* Header */}
@@ -290,69 +368,66 @@ export function ConfigWizard({ onComplete, onSkip }: Props) {
         </Text>
         <Text dimColor> — 配置向导</Text>
       </Box>
-
       <Box marginBottom={1}>
-        <Text dimColor>━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━</Text>
+        <Text dimColor>━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━</Text>
       </Box>
 
       {/* ── Welcome ── */}
-      {state.step === 'welcome' && (
+      {step === 'welcome' && (
         <Box flexDirection="column">
           <Box marginBottom={1}>
             <Text bold color="cyan">
               欢迎使用 Mipham Code！
             </Text>
           </Box>
-          <Box marginBottom={1}>
-            <Text>在开始之前，需要先配置 AI 模型连接。</Text>
-          </Box>
-          <Box marginBottom={1}>
-            <Text>此向导只需 1-2 分钟，需要您准备好 API Key。</Text>
+          <Text>在开始之前，需要先配置 AI 模型连接。</Text>
+          <Text>此向导只需 1 分钟，需要您准备好 API Key。</Text>
+          <Box marginTop={1}>
+            <Text color="yellow">按 Enter 开始 →</Text>
           </Box>
           <Box marginTop={1}>
-            <Text color="yellow">按 Enter 开始配置 →</Text>
+            <Text dimColor>Esc 跳过配置</Text>
           </Box>
         </Box>
       )}
 
-      {/* ── Mode Selection ── */}
-      {state.step === 'mode' && (
+      {/* ── Mode ── */}
+      {step === 'mode' && (
         <Box flexDirection="column">
           <Box marginBottom={1}>
             <Text bold>选择模型连接方式：</Text>
           </Box>
+
           <Box marginBottom={1}>
-            <Text color={selectedIdx === 0 ? selectedColor : dimColor}>
-              {selectedIdx === 0 ? '▶' : ' '} 🌐 云端 AI 模型（推荐）
+            <Text color={cursor === 0 ? SELECTED_COLOR : undefined}>
+              {cursor === 0 ? '▶' : ' '} 🌐 云端 AI 模型（推荐）
             </Text>
           </Box>
-          <Box marginBottom={1}>
-            <Text dimColor> Claude · DeepSeek · Gemini · 豆包 · Qwen · 混元 · OpenAI</Text>
-          </Box>
-          <Box marginBottom={1}>
-            <Text color={selectedIdx === 1 ? selectedColor : dimColor}>
-              {selectedIdx === 1 ? '▶' : ' '} 🖥️ 本地模型（Ollama）
+          <Text dimColor> Claude · DeepSeek · Gemini · 豆包 · Qwen · 混元 · OpenAI</Text>
+
+          <Box marginTop={2} marginBottom={1}>
+            <Text color={cursor === 1 ? SELECTED_COLOR : undefined}>
+              {cursor === 1 ? '▶' : ' '} 🖥️ 本地模型（Ollama）
             </Text>
           </Box>
-          <Box marginBottom={1}>
-            <Text dimColor> 需要提前安装 Ollama 并下载模型</Text>
-          </Box>
-          <Box marginTop={1}>
-            <Text dimColor>↑↓ 选择 · Enter 确认 · Esc 跳过</Text>
+          <Text dimColor> 需要提前安装 Ollama 并下载模型</Text>
+
+          <Box marginTop={2}>
+            <Text dimColor>↑↓ 选择 · Enter 确认 · Esc 返回</Text>
           </Box>
         </Box>
       )}
 
-      {/* ── Cloud: Provider Selection ── */}
-      {state.step === 'cloud-provider' && (
+      {/* ── Cloud Provider ── */}
+      {step === 'provider' && (
         <Box flexDirection="column">
           <Box marginBottom={1}>
             <Text bold>选择 AI 模型提供商：</Text>
           </Box>
-          {CLOUD_PROVIDERS.map((p, i) => (
+          {providerList.map((p, i) => (
             <Box key={p.id} marginBottom={1}>
-              <Text color={i === selectedIdx ? selectedColor : undefined}>
-                {i === selectedIdx ? '▶' : ' '} {p.name}
+              <Text color={i === cursor ? SELECTED_COLOR : undefined}>
+                {i === cursor ? '▶' : '  '} {p.name}
               </Text>
               <Text dimColor> ({p.models.filter((m) => m.status === 'active').length} 个模型)</Text>
             </Box>
@@ -363,18 +438,18 @@ export function ConfigWizard({ onComplete, onSkip }: Props) {
         </Box>
       )}
 
-      {/* ── Cloud: Model Selection ── */}
-      {state.step === 'cloud-model' && state.providerId && (
+      {/* ── Cloud Model ── */}
+      {step === 'model' && (
         <Box flexDirection="column">
           <Box marginBottom={1}>
             <Text bold>
-              选择模型（{DEFAULT_PROVIDERS.find((p) => p.id === state.providerId)?.name}）：
+              选择模型（{DEFAULT_PROVIDERS.find((p) => p.id === providerId)?.name || providerId}）：
             </Text>
           </Box>
-          {getModels(state.providerId).map((m, i) => (
+          {modelList.map((m, i) => (
             <Box key={m.id} marginBottom={1}>
-              <Text color={i === selectedIdx ? selectedColor : undefined}>
-                {i === selectedIdx ? '▶' : ' '} {m.name}
+              <Text color={i === cursor ? SELECTED_COLOR : undefined}>
+                {i === cursor ? '▶' : '  '} {m.name}
               </Text>
               <Text dimColor> ({m.id})</Text>
             </Box>
@@ -385,44 +460,38 @@ export function ConfigWizard({ onComplete, onSkip }: Props) {
         </Box>
       )}
 
-      {/* ── Cloud: API Key ── */}
-      {state.step === 'cloud-key' && state.providerId && state.modelId && (
+      {/* ── API Key input ── */}
+      {step === 'apikey' && (
         <Box flexDirection="column">
           <Box marginBottom={1}>
             <Text bold>粘贴 API Key：</Text>
           </Box>
-          <Box marginBottom={1}>
-            <Text dimColor>
-              提供商：{DEFAULT_PROVIDERS.find((p) => p.id === state.providerId)?.name}
-            </Text>
-          </Box>
-          <Box marginBottom={1}>
-            <Text dimColor>
-              模型：{getModels(state.providerId).find((m) => m.id === state.modelId)?.name}
-            </Text>
-          </Box>
-          {state.error && (
+          <Text dimColor>提供商：{DEFAULT_PROVIDERS.find((p) => p.id === providerId)?.name}</Text>
+          <Text dimColor>
+            模型：{getActiveModels(providerId!).find((m) => m.id === modelId)?.name}
+          </Text>
+          {error && (
             <Box marginBottom={1}>
-              <Text color="red">⚠ {state.error}</Text>
+              <Text color="red">⚠ {error}</Text>
             </Box>
           )}
-          <Box>
+          <Box marginTop={1}>
             <Text color="yellow">🔑 </Text>
             <TextInput
-              value={inputValue}
-              onChange={setInputValue}
-              onSubmit={confirmApiKey}
+              value={apiKey}
+              onChange={setApiKey}
+              onSubmit={() => goStep('confirm')}
               placeholder="粘贴 API Key 后按 Enter..."
             />
           </Box>
           <Box marginTop={1}>
-            <Text dimColor>Enter 确认 · Esc 返回</Text>
+            <Text dimColor>Enter 继续 · Esc 返回选模型</Text>
           </Box>
         </Box>
       )}
 
-      {/* ── Local: Ollama ── */}
-      {state.step === 'local-ollama' && (
+      {/* ── Ollama ── */}
+      {step === 'ollama' && (
         <Box flexDirection="column">
           <Box marginBottom={1}>
             <Text bold>Ollama 本地模型配置：</Text>
@@ -431,87 +500,96 @@ export function ConfigWizard({ onComplete, onSkip }: Props) {
             <Box flexDirection="column" marginBottom={1}>
               <Text>
                 状态：{ollamaStatus.installed ? '✅ 已安装' : '❌ 未安装'}
-                {ollamaStatus.running ? ' · 运行中' : ''}
+                {ollamaStatus.running
+                  ? ' · 运行中'
+                  : ollamaStatus.installed
+                    ? ' · 未运行（请执行 ollama serve）'
+                    : ''}
               </Text>
-              {ollamaStatus.models.length > 0 && (
-                <Box marginTop={1}>
-                  <Text dimColor>已下载模型：{ollamaStatus.models.join(', ')}</Text>
-                </Box>
-              )}
             </Box>
           ) : (
+            <Text dimColor>正在检测 Ollama...</Text>
+          )}
+          {ollamaModelList.length > 0 && (
+            <Box flexDirection="column" marginBottom={1}>
+              <Box marginBottom={1}>
+                <Text dimColor>已下载模型（↑↓ 选择 · Enter 确认）：</Text>
+              </Box>
+              {ollamaModelList.map((m, i) => (
+                <Box key={m.id}>
+                  <Text color={i === ollamaCursor ? 'cyan' : undefined}>
+                    {i === ollamaCursor ? '▶' : '  '} {m.id}
+                  </Text>
+                  {m.source !== 'local' && (
+                    <Text dimColor> [{m.source === 'MiphamAI' ? 'MiphamAI' : '热门'}]</Text>
+                  )}
+                </Box>
+              ))}
+            </Box>
+          )}
+          {ollamaStatus && ollamaModelList.length === 0 && (
             <Box marginBottom={1}>
-              <Text dimColor>正在检测 Ollama...</Text>
+              <Text dimColor>
+                未检测到已下载模型。请先运行 ollama pull &lt;model&gt; 下载模型。
+              </Text>
+              <Text dimColor>以下为预置模型列表，选择后可在对话中通过 /models 切换。</Text>
             </Box>
           )}
-          <Box marginBottom={1}>
-            <Text dimColor>请输入 Ollama 模型名称（如 llama3.2, qwen2.5, deepseek-r1）：</Text>
-          </Box>
-          <Box>
-            <Text color="yellow">🖥️ </Text>
-            <TextInput
-              value={inputValue}
-              onChange={setInputValue}
-              onSubmit={finishLocal}
-              placeholder="ollama 模型名，默认 llama3.2"
-            />
-          </Box>
           <Box marginTop={1}>
-            <Text dimColor>Enter 确认 · Esc 返回</Text>
+            <Text dimColor>↑↓ 选择 · Enter 确认 · Esc 返回</Text>
           </Box>
         </Box>
       )}
 
       {/* ── Confirm ── */}
-      {state.step === 'confirm' && (
+      {step === 'confirm' && (
         <Box flexDirection="column">
           <Box marginBottom={1}>
             <Text bold color="cyan">
               配置确认：
             </Text>
           </Box>
-          <Box marginBottom={1}>
-            <Text>连接方式：{state.mode === 'cloud' ? '🌐 云端' : '🖥️ 本地'}</Text>
-          </Box>
-          <Box marginBottom={1}>
-            <Text>提供商：{DEFAULT_PROVIDERS.find((p) => p.id === state.providerId)?.name}</Text>
-          </Box>
-          <Box marginBottom={1}>
-            <Text>模型：{state.modelId}</Text>
-          </Box>
-          <Box marginBottom={1}>
+          <Text>连接方式：{mode === 'cloud' ? '🌐 云端' : '🖥️ 本地'}</Text>
+          {mode === 'cloud' && (
+            <>
+              <Text>提供商：{DEFAULT_PROVIDERS.find((p) => p.id === providerId)?.name}</Text>
+              <Text>模型：{modelId}</Text>
+              <Text>
+                API Key：{apiKey.slice(0, 8)}...{apiKey.slice(-4)}
+              </Text>
+            </>
+          )}
+          {mode === 'local' && (
             <Text>
-              API Key：{state.apiKey.slice(0, 8)}...{state.apiKey.slice(-4)}
+              Ollama 模型：{ollamaModelList[ollamaCursor]?.id || ollamaModel.trim() || 'llama3.2'}
             </Text>
-          </Box>
-          <Box marginBottom={1}>
+          )}
+          <Box marginTop={1}>
             <Text dimColor>配置文件将保存到 ~/.mipham/config.yml</Text>
           </Box>
-          {state.error && (
+          {error && (
             <Box marginBottom={1}>
-              <Text color="red">⚠ {state.error}</Text>
+              <Text color="red">⚠ {error}</Text>
             </Box>
           )}
           <Box marginTop={1}>
-            <Text color="yellow">按 Enter 保存并开始 →</Text>
+            <Text color="yellow">按 Enter 保存并启动 →</Text>
           </Box>
           <Box marginTop={1}>
-            <Text dimColor>Backspace 返回修改 · Esc 跳过配置</Text>
+            <Text dimColor>Esc 返回修改</Text>
           </Box>
         </Box>
       )}
 
       {/* ── Done ── */}
-      {state.step === 'done' && (
+      {step === 'done' && (
         <Box flexDirection="column">
           <Box marginBottom={1}>
             <Text color="green" bold>
               ✅ 配置完成！
             </Text>
           </Box>
-          <Box marginBottom={1}>
-            <Text>Mipham Code 正在启动...</Text>
-          </Box>
+          <Text>Mipham Code 正在启动...</Text>
         </Box>
       )}
     </Box>