@miphamai/cli 0.2.3

package/src/ui/input.tsx

@@ -0,0 +1,83 @@
+import React, { useState, useEffect } from 'react'
+import { Box, Text } from 'ink'
+import TextInput from 'ink-text-input'
+
+interface InputBarProps {
+  onSubmit: (input: string) => void
+  isLoading: boolean
+}
+
+// ── Creative status messages (inspired by Claude Code's whimsical verbs) ──
+
+const STATUS_VERBS = [
+  '思忖中', // Pondering
+  '推演中', // Deducting
+  '凝炼中', // Condensing
+  '熬煮中', // Simmering
+  '锻造中', // Forging
+  '研磨中', // Grinding
+  '解构中', // Deconstructing
+  '冥思中', // Contemplating
+  '编织中', // Weaving
+  '萃取中', // Extracting
+  '烹制中', // Cooking
+  '淬火中', // Quenching
+  '雕琢中', // Chiseling
+  '融汇中', // Fusing
+  '觉照中', // Illuminating
+  '运转中', // Operating
+  '参详中', // Studying
+  '化合中', // Synthesizing
+  '浸润中', // Infusing
+  '焙烤中', // Baking
+]
+
+const STATUS_EMOJI = ['🔮', '⚙️', '💎', '🔥', '🧪', '🌊', '⚡', '🌀', '🎯', '💡']
+
+function pick<T>(arr: T[]): T {
+  return arr[Math.floor(Math.random() * arr.length)]!
+}
+
+export function InputBar({ onSubmit, isLoading }: InputBarProps) {
+  const [value, setValue] = useState('')
+  const [verb, setVerb] = useState(() => pick(STATUS_VERBS))
+  const [emoji, setEmoji] = useState(() => pick(STATUS_EMOJI))
+
+  // Rotate status messages while loading
+  useEffect(() => {
+    if (!isLoading) return
+    const interval = setInterval(() => {
+      setVerb(pick(STATUS_VERBS))
+      setEmoji(pick(STATUS_EMOJI))
+    }, 2000)
+    return () => clearInterval(interval)
+  }, [isLoading])
+
+  // Reset when loading starts
+  useEffect(() => {
+    if (isLoading) {
+      setVerb(pick(STATUS_VERBS))
+      setEmoji(pick(STATUS_EMOJI))
+    }
+  }, [isLoading])
+
+  const handleSubmit = (val: string) => {
+    if (!val.trim() || isLoading) return
+    onSubmit(val)
+    setValue('')
+  }
+
+  return (
+    <Box marginTop={1}>
+      <Box marginRight={1}>
+        <Text color={isLoading ? 'yellow' : 'cyan'}>{isLoading ? `${emoji}` : '▸'}</Text>
+      </Box>
+      <TextInput
+        value={value}
+        onChange={setValue}
+        onSubmit={handleSubmit}
+        placeholder={isLoading ? `${verb}...` : 'Type a message (Esc to exit)...'}
+      />
+    </Box>
+  )
+}

package/src/ui/picker.tsx

@@ -0,0 +1,209 @@
+import React, { useState, useCallback, useEffect } from 'react'
+import { Box, Text, useInput } from 'ink'
+import type { MiphamConfig, ProviderConfig, ModelInfo } from '../shared/index.ts'
+
+interface PickerProps {
+  config: MiphamConfig
+  currentProvider: string
+  currentModel: string
+  onSelect: (providerId: string, modelId: string) => void
+  onClose: () => void
+}
+
+type Panel = 'provider' | 'model'
+
+export function ModelPicker({
+  config,
+  currentProvider,
+  currentModel,
+  onSelect,
+  onClose,
+}: PickerProps) {
+  // Get active providers only
+  const providers = config.providers.filter((p) => p.status !== 'upcoming')
+  const activeModels = (p: ProviderConfig) => p.models.filter((m) => m.status === 'active')
+
+  // State
+  const [activePanel, setActivePanel] = useState<Panel>('provider')
+  const [providerIdx, setProviderIdx] = useState(() => {
+    const idx = providers.findIndex((p) => p.id === currentProvider)
+    return idx >= 0 ? idx : 0
+  })
+  const [modelIdx, setModelIdx] = useState(0)
+
+  const selectedProvider = providers[providerIdx]
+  const models = selectedProvider ? activeModels(selectedProvider) : []
+
+  // Reset model index when provider changes
+  const goToProvider = useCallback(
+    (idx: number) => {
+      const wrapped = ((idx % providers.length) + providers.length) % providers.length
+      setProviderIdx(wrapped)
+      setModelIdx(0)
+      setActivePanel('model') // auto-switch to model panel
+    },
+    [providers.length],
+  )
+
+  const selectModel = useCallback(
+    (idx: number) => {
+      if (!selectedProvider) return
+      const wrapped = ((idx % models.length) + models.length) % models.length
+      setModelIdx(wrapped)
+    },
+    [selectedProvider, models.length],
+  )
+
+  const confirmSelection = useCallback(() => {
+    if (!selectedProvider) return
+    const model = models[modelIdx]
+    if (model) {
+      onSelect(selectedProvider.id, model.id)
+    }
+  }, [selectedProvider, models, modelIdx, onSelect])
+
+  useInput((input, key) => {
+    // Global keys
+    if (key.escape) {
+      onClose()
+      return
+    }
+
+    if (key.return) {
+      if (activePanel === 'provider') {
+        goToProvider(providerIdx) // switches to model panel
+      } else {
+        confirmSelection()
+      }
+      return
+    }
+
+    // Tab or right arrow → switch to model panel
+    if (key.tab || (activePanel === 'provider' && input === 'l')) {
+      setActivePanel('model')
+      return
+    }
+
+    // Left arrow → switch to provider panel
+    if (key.leftArrow || (activePanel === 'model' && input === 'h')) {
+      setActivePanel('provider')
+      return
+    }
+
+    // Up/Down navigation
+    if (key.upArrow) {
+      if (activePanel === 'provider') {
+        setProviderIdx((providerIdx - 1 + providers.length) % providers.length)
+      } else {
+        selectModel(modelIdx - 1)
+      }
+      return
+    }
+
+    if (key.downArrow) {
+      if (activePanel === 'provider') {
+        setProviderIdx((providerIdx + 1) % providers.length)
+      } else {
+        selectModel(modelIdx + 1)
+      }
+      return
+    }
+  })
+
+  // Provider labels
+  const providerColor = (p: ProviderConfig) => (p.id === currentProvider ? 'green' : 'white')
+
+  const modelColor = (m: ModelInfo) =>
+    selectedProvider?.id === currentProvider && m.id === currentModel ? 'green' : 'white'
+
+  return (
+    <Box flexDirection="column" borderStyle="round" borderColor="cyan" padding={1}>
+      {/* Title */}
+      <Box marginBottom={1}>
+        <Text bold color="cyan">
+          Select Model
+        </Text>
+        <Text dimColor> ←→ navigate · ↑↓ move · Enter select · Esc close</Text>
+      </Box>
+
+      {/* Two-column layout */}
+      <Box flexDirection="row" gap={4}>
+        {/* ── Provider Panel (一级) ── */}
+        <Box
+          flexDirection="column"
+          width={28}
+          borderStyle="single"
+          borderColor={activePanel === 'provider' ? 'cyan' : 'gray'}
+          padding={1}
+        >
+          <Text bold underline dimColor>
+            PROVIDER {activePanel === 'provider' ? '◀' : ''}
+          </Text>
+          {providers.map((p, i) => {
+            const isCurrent = p.id === currentProvider
+            const isSelected = i === providerIdx
+            const isUpcoming = p.status === 'upcoming'
+            return (
+              <Box key={p.id}>
+                <Text
+                  color={isUpcoming ? 'gray' : isSelected ? 'cyan' : providerColor(p)}
+                  bold={isSelected}
+                >
+                  {isSelected ? '▶ ' : '  '}
+                  {isCurrent ? '✓' : ' '}
+                  {p.name.padEnd(16)}
+                </Text>
+                <Text dimColor>{isUpcoming ? '[coming]' : `${activeModels(p).length}m`}</Text>
+              </Box>
+            )
+          })}
+        </Box>
+
+        {/* ── Model Panel (二级) ── */}
+        <Box
+          flexDirection="column"
+          width={42}
+          borderStyle="single"
+          borderColor={activePanel === 'model' ? 'cyan' : 'gray'}
+          padding={1}
+        >
+          <Text bold underline dimColor>
+            MODELS {activePanel === 'model' ? '◀' : ''}
+            {selectedProvider ? ` — ${selectedProvider.name}` : ''}
+          </Text>
+          {models.length === 0 && <Text dimColor> (no active models)</Text>}
+          {models.map((m, i) => {
+            const isCurrentModel = selectedProvider?.id === currentProvider && m.id === currentModel
+            const isSelected = i === modelIdx
+            return (
+              <Box key={m.id} flexDirection="column">
+                <Text
+                  color={isCurrentModel ? 'green' : isSelected ? 'cyan' : 'white'}
+                  bold={isSelected}
+                >
+                  {isSelected ? '▶ ' : '  '}
+                  {isCurrentModel ? '✓' : ' '}
+                  {m.name}
+                </Text>
+                <Text dimColor>
+                  {'   '}
+                  {m.id} · {m.contextWindow.toLocaleString()} ctx
+                  {m.vision ? ' · 🖼 vision' : ''}
+                </Text>
+              </Box>
+            )
+          })}
+        </Box>
+      </Box>
+
+      {/* Footer hint */}
+      <Box marginTop={1}>
+        <Text dimColor>
+          {activePanel === 'provider'
+            ? 'Select a provider → Enter to see models'
+            : 'Select a model → Enter to switch'}
+        </Text>
+      </Box>
+    </Box>
+  )
+}