@miphamai/cli 0.29.0 → 0.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miphamai/cli",
-  "version": "0.29.0",
+  "version": "0.30.0",
   "description": "Mipham Code — Multi-model open-core intelligent coding terminal by MiphamAI",
   "keywords": [
     "ai",

package/src/index.tsx

@@ -24,7 +24,7 @@ import { ContextManager } from './core/context'
 import { QueryEngine } from './core/engine'
 import { ExperienceRuleEngine } from './core/rule-engine.js'
 import { SessionStore } from './core/session-store'
-import type { PermissionLevel } from './shared/types'
+import type { PermissionLevel, MiphamConfig } from './shared/types'
 import { SkillsLoader } from './skills/loader'
 import { PluginManager } from './plugin/plugin-manager'
 import { loadPlugins } from './plugin/plugin-loader'
@@ -42,6 +42,7 @@ import { AgentViewDashboard } from './agent-view/dashboard'
 import { createT } from './i18n-core/t'
 import { detectLocale } from './i18n-core/detect'
 import { I18nProvider } from './i18n-context'
+import { ConfigWizard } from './ui/config-wizard'
 import enUS from './i18n-core/locales/en-US.json' with { type: 'json' }
 import zhCN from './i18n-core/locales/zh-CN.json' with { type: 'json' }
 import type { TranslationMap } from './i18n-core/types'
@@ -111,6 +112,70 @@ async function checkWorkspaceTrust(): Promise<void> {
   }
 }
 
+// ── SetupGate: first-run wizard → App bridge ──
+
+interface SetupGateProps {
+  needsSetup: boolean
+  engine: QueryEngine
+  config: MiphamConfig
+  defaultProvider: string
+  defaultModel: string
+  lang?: string
+  skillsLoader?: SkillsLoader
+  pluginManager?: PluginManager
+  version?: string
+  sessionId: string
+  agentViewManager?: AgentViewManager
+  locale: string
+  t: (key: string) => string
+}
+
+function SetupGate(props: SetupGateProps) {
+  const [showWizard, setShowWizard] = React.useState(props.needsSetup)
+  const [wizardProvider, setWizardProvider] = React.useState<string | null>(null)
+  const [wizardModel, setWizardModel] = React.useState<string | null>(null)
+
+  // When wizard completes: write config, switch provider, proceed to App
+  const handleWizardComplete = React.useCallback(
+    (wizardConfig: { providerId: string; modelId: string; apiKey: string }) => {
+      // Switch the engine to the newly configured provider
+      try {
+        props.engine.switchProvider(wizardConfig.providerId, wizardConfig.modelId)
+      } catch {
+        // If switch fails (e.g. provider not yet in registry), just use as-is
+      }
+      setWizardProvider(wizardConfig.providerId)
+      setWizardModel(wizardConfig.modelId)
+      setShowWizard(false)
+    },
+    [props.engine],
+  )
+
+  const handleWizardSkip = React.useCallback(() => {
+    setShowWizard(false)
+  }, [])
+
+  if (showWizard) {
+    return React.createElement(ConfigWizard, {
+      onComplete: handleWizardComplete,
+      onSkip: handleWizardSkip,
+    })
+  }
+
+  return React.createElement(App, {
+    engine: props.engine,
+    config: props.config,
+    initialProvider: wizardProvider || props.defaultProvider,
+    initialModel: wizardModel || props.defaultModel,
+    lang: props.lang,
+    skillsLoader: props.skillsLoader,
+    pluginManager: props.pluginManager,
+    version: props.version,
+    sessionId: props.sessionId,
+    agentViewManager: props.agentViewManager,
+  })
+}
+
 export async function runApp(options: RunOptions): Promise<void> {
   // Metrics: count CLI invocation
   getMetrics().cliInvocations.inc()
@@ -481,21 +546,29 @@ export async function runApp(options: RunOptions): Promise<void> {
     }
   })
 
+  // ── First-run detection: show interactive ConfigWizard if no config exists ──
+  const hasUserConfig = existsSync(join(homedir(), '.mipham', 'config.yml'))
+  const hasProjectConfig = existsSync(join(process.cwd(), '.mipham', 'config.yml'))
+  const needsSetup = !hasUserConfig && !hasProjectConfig
+
   const { waitUntilExit } = render(
     React.createElement(I18nProvider, {
       locale,
       t,
-      children: React.createElement(App, {
+      children: React.createElement(SetupGate, {
+        needsSetup,
         engine,
         config,
-        initialProvider: defaultProvider,
-        initialModel: defaultModel,
+        defaultProvider,
+        defaultModel,
         lang: options.lang,
         skillsLoader,
         pluginManager,
         version: options.version,
         sessionId: sessionName,
         agentViewManager,
+        locale,
+        t,
       }),
     }),
   )

package/src/shared/constants.ts

@@ -35,6 +35,33 @@ export const DEFAULT_PROVIDERS: ProviderConfig[] = [
         vision: true,
         status: 'active',
       },
+      {
+        id: 'claude-fable-5',
+        name: 'Claude Fable 5',
+        providerId: 'anthropic',
+        contextWindow: 1_000_000,
+        maxOutput: 128_000,
+        vision: true,
+        status: 'active',
+      },
+      {
+        id: 'claude-sonnet-5',
+        name: 'Claude Sonnet 5',
+        providerId: 'anthropic',
+        contextWindow: 1_000_000,
+        maxOutput: 128_000,
+        vision: true,
+        status: 'active',
+      },
+      {
+        id: 'claude-opus-5',
+        name: 'Claude Opus 5',
+        providerId: 'anthropic',
+        contextWindow: 1_000_000,
+        maxOutput: 128_000,
+        vision: true,
+        status: 'active',
+      },
     ],
   },
   {

package/src/ui/config-wizard.tsx

@@ -0,0 +1,519 @@
+/**
+ * Interactive first-run Config Wizard
+ *
+ * Replaces manual config.yml editing for non-technical users.
+ * Flow: Welcome → Local/Cloud → Provider → Model → API Key → Done
+ *
+ * Local path: Ollama setup (endpoint + model pull)
+ * Cloud path: pick provider → pick model → paste API key → auto-configure
+ */
+
+import React, { useState, useCallback } from 'react'
+import { Box, Text, useInput } from 'ink'
+import TextInput from 'ink-text-input'
+import { DEFAULT_PROVIDERS } from '../shared/constants'
+import type { ProviderConfig, ModelInfo } from '../shared/types'
+import { mkdirSync, writeFileSync, existsSync } 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
+}
+
+interface Props {
+  onComplete: (config: { providerId: string; modelId: string; apiKey: string }) => void
+  onSkip: () => void
+}
+
+// ── Helpers ──
+
+/** 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 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 {
+  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`,
+    `defaultProvider: ${providerId}`,
+    `defaultModel: ${modelId}`,
+    `permission: default`,
+    ``,
+    `providers:`,
+    `  - id: ${providerId}`,
+    `    name: ${provider?.name || providerId}`,
+    `    protocol: ${provider?.protocol || 'openai-compatible'}`,
+    ...(provider?.baseUrl ? [`    baseUrl: ${provider.baseUrl}`] : []),
+    `    apiKey: ${apiKey}`,
+    `    models:`,
+  ]
+
+  const models = getModels(providerId)
+  for (const m of models) {
+    configLines.push(`      - id: ${m.id}`)
+  }
+
+  writeFileSync(join(configDir, 'config.yml'), configLines.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' })
+      .split('\n')
+      .slice(1)
+      .filter(Boolean)
+      .map((l) => l.split(/\s+/)[0]!)
+    return { installed: true, running: true, models }
+  } catch {
+    try {
+      execSync('ollama --version', { timeout: 5000, stdio: 'ignore' })
+      return { installed: true, running: false, models: [] }
+    } catch {
+      return { installed: false, running: false, models: [] }
+    }
+  }
+}
+
+// ── 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 [selectedIdx, setSelectedIdx] = useState(0)
+  const [inputValue, setInputValue] = useState('')
+  const [ollamaStatus, setOllamaStatus] = useState<ReturnType<typeof checkOllama> | null>(null)
+
+  // ── 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],
+  )
+
+  const selectProvider = useCallback(
+    (providerId: string) => {
+      setState((s) => ({ ...s, providerId }))
+      goTo('cloud-model')
+    },
+    [goTo],
+  )
+
+  const selectModel = useCallback(
+    (modelId: string) => {
+      setState((s) => ({ ...s, modelId }))
+      goTo('cloud-key')
+    },
+    [goTo],
+  )
+
+  const confirmApiKey = useCallback(() => {
+    const key = inputValue.trim()
+    if (!key) {
+      setState((s) => ({ ...s, error: '请输入 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' })
+    } catch (err) {
+      setState((s) => ({ ...s, error: `配置写入失败: ${String(err)}` }))
+    }
+  }, [inputValue, state.ollamaModel, onComplete])
+
+  const finishCloud = useCallback(() => {
+    if (!state.providerId || !state.modelId || !state.apiKey) return
+    try {
+      writeConfig(state.providerId, state.modelId, state.apiKey)
+      onComplete({ providerId: state.providerId, modelId: state.modelId, apiKey: state.apiKey })
+    } catch (err) {
+      setState((s) => ({ ...s, error: `配置写入失败: ${String(err)}` }))
+    }
+  }, [state, onComplete])
+
+  // ── Keyboard ──
+
+  useInput((_input, key) => {
+    if (key.escape) {
+      onSkip()
+      return
+    }
+
+    if (state.step === 'welcome') {
+      if (key.return) goTo('mode')
+      return
+    }
+
+    if (state.step === 'mode') {
+      if (key.upArrow || key.downArrow) {
+        setSelectedIdx((i) => (i === 0 ? 1 : 0))
+      }
+      if (key.return) {
+        setMode(selectedIdx === 0 ? 'cloud' : 'local')
+      }
+      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))
+      }
+      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)
+          }
+        }
+      }
+      return
+    }
+
+    // API key input: Enter submits
+    if (state.step === 'cloud-key') {
+      if (key.return) {
+        confirmApiKey()
+      }
+      return
+    }
+
+    // Local Ollama input
+    if (state.step === 'local-ollama') {
+      if (key.return) {
+        finishLocal()
+      }
+      return
+    }
+
+    // Confirm
+    if (state.step === 'confirm') {
+      if (key.return) {
+        finishCloud()
+      }
+      if (key.backspace) {
+        goTo('cloud-key')
+      }
+      return
+    }
+  })
+
+  // ── Render ──
+
+  const selectedColor = 'cyan'
+  const dimColor = 'gray'
+
+  return (
+    <Box flexDirection="column" padding={1}>
+      {/* Header */}
+      <Box marginBottom={1}>
+        <Text color="#FFD700" bold>
+          Mipham Code
+        </Text>
+        <Text dimColor> — 配置向导</Text>
+      </Box>
+
+      <Box marginBottom={1}>
+        <Text dimColor>━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━</Text>
+      </Box>
+
+      {/* ── Welcome ── */}
+      {state.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>
+          </Box>
+          <Box marginTop={1}>
+            <Text color="yellow">按 Enter 开始配置 →</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* ── Mode Selection ── */}
+      {state.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>
+          </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>
+          </Box>
+          <Box marginBottom={1}>
+            <Text dimColor> 需要提前安装 Ollama 并下载模型</Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>↑↓ 选择 · Enter 确认 · Esc 跳过</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* ── Cloud: Provider Selection ── */}
+      {state.step === 'cloud-provider' && (
+        <Box flexDirection="column">
+          <Box marginBottom={1}>
+            <Text bold>选择 AI 模型提供商：</Text>
+          </Box>
+          {CLOUD_PROVIDERS.map((p, i) => (
+            <Box key={p.id} marginBottom={1}>
+              <Text color={i === selectedIdx ? selectedColor : undefined}>
+                {i === selectedIdx ? '▶' : ' '} {p.name}
+              </Text>
+              <Text dimColor> ({p.models.filter((m) => m.status === 'active').length} 个模型)</Text>
+            </Box>
+          ))}
+          <Box marginTop={1}>
+            <Text dimColor>↑↓ 选择 · Enter 确认 · Esc 返回</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* ── Cloud: Model Selection ── */}
+      {state.step === 'cloud-model' && state.providerId && (
+        <Box flexDirection="column">
+          <Box marginBottom={1}>
+            <Text bold>
+              选择模型（{DEFAULT_PROVIDERS.find((p) => p.id === state.providerId)?.name}）：
+            </Text>
+          </Box>
+          {getModels(state.providerId).map((m, i) => (
+            <Box key={m.id} marginBottom={1}>
+              <Text color={i === selectedIdx ? selectedColor : undefined}>
+                {i === selectedIdx ? '▶' : ' '} {m.name}
+              </Text>
+              <Text dimColor> ({m.id})</Text>
+            </Box>
+          ))}
+          <Box marginTop={1}>
+            <Text dimColor>↑↓ 选择 · Enter 确认 · Esc 返回</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* ── Cloud: API Key ── */}
+      {state.step === 'cloud-key' && state.providerId && state.modelId && (
+        <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 && (
+            <Box marginBottom={1}>
+              <Text color="red">⚠ {state.error}</Text>
+            </Box>
+          )}
+          <Box>
+            <Text color="yellow">🔑 </Text>
+            <TextInput
+              value={inputValue}
+              onChange={setInputValue}
+              onSubmit={confirmApiKey}
+              placeholder="粘贴 API Key 后按 Enter..."
+            />
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>Enter 确认 · Esc 返回</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* ── Local: Ollama ── */}
+      {state.step === 'local-ollama' && (
+        <Box flexDirection="column">
+          <Box marginBottom={1}>
+            <Text bold>Ollama 本地模型配置：</Text>
+          </Box>
+          {ollamaStatus ? (
+            <Box flexDirection="column" marginBottom={1}>
+              <Text>
+                状态：{ollamaStatus.installed ? '✅ 已安装' : '❌ 未安装'}
+                {ollamaStatus.running ? ' · 运行中' : ''}
+              </Text>
+              {ollamaStatus.models.length > 0 && (
+                <Box marginTop={1}>
+                  <Text dimColor>已下载模型：{ollamaStatus.models.join(', ')}</Text>
+                </Box>
+              )}
+            </Box>
+          ) : (
+            <Box marginBottom={1}>
+              <Text dimColor>正在检测 Ollama...</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>
+          </Box>
+        </Box>
+      )}
+
+      {/* ── Confirm ── */}
+      {state.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>
+              API Key：{state.apiKey.slice(0, 8)}...{state.apiKey.slice(-4)}
+            </Text>
+          </Box>
+          <Box marginBottom={1}>
+            <Text dimColor>配置文件将保存到 ~/.mipham/config.yml</Text>
+          </Box>
+          {state.error && (
+            <Box marginBottom={1}>
+              <Text color="red">⚠ {state.error}</Text>
+            </Box>
+          )}
+          <Box marginTop={1}>
+            <Text color="yellow">按 Enter 保存并开始 →</Text>
+          </Box>
+          <Box marginTop={1}>
+            <Text dimColor>Backspace 返回修改 · Esc 跳过配置</Text>
+          </Box>
+        </Box>
+      )}
+
+      {/* ── Done ── */}
+      {state.step === 'done' && (
+        <Box flexDirection="column">
+          <Box marginBottom={1}>
+            <Text color="green" bold>
+              ✅ 配置完成！
+            </Text>
+          </Box>
+          <Box marginBottom={1}>
+            <Text>Mipham Code 正在启动...</Text>
+          </Box>
+        </Box>
+      )}
+    </Box>
+  )
+}