@miphamai/cli 0.2.4 → 0.4.0

package/src/ui/commands.ts

@@ -7,14 +7,8 @@
 import type { QueryEngine } from '../core/engine'
 import type { MiphamConfig } from '../shared/index.ts'
 import type { SkillsLoader } from '../skills/loader'
-import {
-  PACKAGE_NAME,
-  NPM_INSTALL_COMMAND,
-  NPM_UPDATE_COMMAND,
-  NPM_URL,
-  PRODUCT_URL_INTERNATIONAL,
-  PRODUCT_URL_CHINA,
-} from '@mipham/shared'
+import { McpClient } from '../mcp/client'
+import { NPM_INSTALL_COMMAND, NPM_UPDATE_COMMAND } from '@mipham/shared'
 
 export interface CommandContext {
   engine: QueryEngine
@@ -420,7 +414,6 @@ const renameCmd: CommandHandler = (ctx, args) => {
 const goalCmd: CommandHandler = (ctx, args) => {
   const goal = args.join(' ')
   if (!goal.trim()) {
-    const c = ctx.engine.getContext()
     return {
       content: `Usage: /goal <statement>\n\nSet a session-level completion condition. Mipham Code will track progress toward this goal.\n\nExample: /goal Fix all TypeScript errors and make tests pass`,
     }
@@ -866,7 +859,7 @@ const doctorCmd: CommandHandler = async (ctx) => {
 // ═══════════════════════════════════════════════════════════════
 
 const exportCmd: CommandHandler = async (ctx) => {
-  const { writeFileSync, existsSync } = await import('node:fs')
+  const { writeFileSync } = await import('node:fs')
   const { join } = await import('node:path')
 
   const cwd = process.cwd()
@@ -1868,18 +1861,40 @@ Works with: Bash, Zsh, Fish, PowerShell, Windows Terminal`,
 // ═══════════════════════════════════════════════════════════════
 
 const mcpCmd: CommandHandler = (ctx) => {
-  const mcpServers = ctx.config.skills?.mcpServers ?? []
+  const configuredServers = ctx.config.skills?.mcpServers ?? []
+  const liveConnections = McpClient.getInstance().listConnections()
 
   const lines: string[] = ['── MCP Servers ──', '']
 
-  if (mcpServers.length > 0) {
-    lines.push(`Configured servers (${mcpServers.length}):`)
+  if (configuredServers.length > 0) {
+    lines.push(`Configured servers (${configuredServers.length}):`)
     lines.push('')
-    for (const s of mcpServers) {
+    for (const s of configuredServers) {
+      const live = liveConnections.find((c) => c.config.name === s.name)
+      const statusIcon = live
+        ? live.status === 'connected'
+          ? '🟢'
+          : live.status === 'connecting'
+            ? '🟡'
+            : live.status === 'error'
+              ? '🔴'
+              : '⚪'
+        : '⚪'
+      const statusLabel = live ? live.status : 'not started'
       const envKeys = s.env ? Object.keys(s.env).join(', ') : '(none)'
-      lines.push(`  📡 ${s.name}`)
+
+      lines.push(`  ${statusIcon} ${s.name}  [${statusLabel}]`)
       lines.push(`     Command: ${s.command} ${s.args.join(' ')}`)
       lines.push(`     Env vars: ${envKeys}`)
+      if (live?.tools && live.tools.length > 0) {
+        lines.push(`     Tools: ${live.tools.map((t) => t.name).join(', ')}`)
+      }
+      if (live?.error) {
+        lines.push(`     Error: ${live.error}`)
+      }
+      if (live?.serverInfo) {
+        lines.push(`     Server: ${live.serverInfo.name} v${live.serverInfo.version}`)
+      }
       lines.push('')
     }
   } else {
@@ -1908,11 +1923,10 @@ const mcpCmd: CommandHandler = (ctx) => {
   }
 
   lines.push('')
-  lines.push('── Status ──')
-  lines.push('MCP stdio protocol: full implementation in M3 milestone.')
-  lines.push('Current: config parsing + server registry ready.')
+  lines.push('── Protocol ──')
+  lines.push('MCP stdio transport (JSON-RPC 2.0) — fully implemented.')
+  lines.push('Servers auto-connect on startup when configured.')
   lines.push('')
-  lines.push('MCP enables AI to interact with external tools via standardized servers.')
   lines.push('Learn more: https://modelcontextprotocol.io')
 
   return { content: lines.join('\n') }
@@ -2106,6 +2120,87 @@ Mipham Code includes 4 agent-type tools for structured workflows:
   Use /tools to see all 16 tools, including the 4 agent tools.`,
 })
 
+// ═══════════════════════════════════════════════════════════════
+// Artifacts
+// ═══════════════════════════════════════════════════════════════
+
+async function openBrowser(url: string): Promise<void> {
+  const cmd =
+    process.platform === 'darwin'
+      ? `open "${url}"`
+      : process.platform === 'win32'
+        ? `start "" "${url}"`
+        : `xdg-open "${url}"`
+  const { exec } = await import('node:child_process')
+  exec(cmd, () => {
+    /* fire-and-forget */
+  })
+}
+
+const artifactOpenCmd: CommandHandler = async (ctx, args) => {
+  const name = args[0]
+  if (!name) {
+    return { content: 'Usage: /artifact open <name>\nExample: /artifact open dashboard' }
+  }
+
+  const sessionId = 'session-1' // default session
+  const port = 9876
+  const ext = name.endsWith('.svg') ? '' : '.html'
+  const url = `http://localhost:${port}/${sessionId}/${name}${ext}`
+
+  try {
+    await openBrowser(url)
+    return { content: `✓ Opening artifact "${name}" in browser...\n   ${url}` }
+  } catch (err) {
+    return { content: `✗ Failed to open browser: ${String(err)}\n   URL: ${url}` }
+  }
+}
+
+const artifactListCmd: CommandHandler = async (_ctx, _args) => {
+  const { getSessionArtifacts } = await import('../artifacts/manifest')
+  const { join } = await import('node:path')
+  const { ARTIFACTS_DIR } = await import('../shared/constants')
+
+  const dir = join(process.cwd(), ARTIFACTS_DIR)
+  const entries = getSessionArtifacts(dir, 'session-1')
+
+  if (entries.length === 0) {
+    return {
+      content: 'No artifacts created yet. Ask the AI to generate one with the Artifact tool.',
+    }
+  }
+
+  const lines = ['── Artifacts ──', '']
+  for (const e of entries) {
+    const ver = e.versions && e.versions.length > 1 ? ` v${e.versions.length}` : ''
+    lines.push(
+      `  ${e.name.padEnd(24)} ${(e.type + ver).padEnd(8)} ${(e.size / 1024).toFixed(1).padStart(8)}KB  ${e.createdAt.slice(0, 16).replace('T', ' ')}`,
+    )
+  }
+  lines.push('', `  ${entries.length} artifact(s) — /artifact open <name> to view`)
+  lines.push(`  Gallery: http://localhost:9876`)
+
+  return { content: lines.join('\n') }
+}
+
+const artifactServerCmd: CommandHandler = async (_ctx, _args) => {
+  const url = 'http://localhost:9876'
+  return {
+    content: `── Artifact Server ──\n\n  URL:  ${url}\n  Port: 9876\n\nArtifacts are served locally. No external network access.`,
+  }
+}
+
+const artifactBaseCmd: CommandHandler = (ctx, args) => {
+  const sub = args[0]
+  if (sub === 'open') return artifactOpenCmd(ctx, args.slice(1))
+  if (sub === 'list') return artifactListCmd(ctx, [])
+  if (sub === 'server') return artifactServerCmd(ctx, [])
+  return {
+    content:
+      'Usage: /artifact <open|list|server> [name]\n\n  /artifact open <name>  Open artifact in browser\n  /artifact list        List all artifacts\n  /artifact server      Show server status',
+  }
+}
+
 // ═══════════════════════════════════════════════════════════════
 // Remaining low-priority stubs (backend not yet available)
 // ═══════════════════════════════════════════════════════════════
@@ -2192,6 +2287,9 @@ registry.set('/logout', logoutCmd)
 registry.set('/feedback', feedbackCmd)
 registry.set('/agents', agentsCmd)
 
+// Artifacts
+registry.set('/artifact', artifactBaseCmd)
+
 // Lower-priority semi-stubs (WIP, backend pending)
 registry.set('/branch', branchCmd)
 registry.set('/schedule', scheduleCmd)

package/src/ui/input.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { Box, Text } from 'ink'
 import TextInput from 'ink-text-input'
 
@@ -7,32 +7,98 @@ interface InputBarProps {
   isLoading: boolean
 }
 
-// ── Creative status messages (inspired by Claude Code's whimsical verbs) ──
+// ── Status verbs — English (Claude Code-aligned) + Chinese (Mipham originals) ──
 
-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_EN = [
+  'Doodling',
+  'Forging',
+  'Germinating',
+  'Mosmosing',
+  'Cerebrating',
+  'Boogieing',
+  'Finagling',
+  'Misting',
+  'Recombobulating',
+  'Slithering',
+  'Effecting',
+  'Roosting',
+  'Crystallizing',
+  'Canoodling',
+  'Billowing',
+  'Warping',
+  'Improvising',
+  'Metamorphing',
+  'Gusting',
+  'Whiring',
+  'Topsy-turvying',
+  'Flibbertigibetting',
+  'Wibbling',
+  'Thundering',
+  'Moseying',
+  'Julienning',
+  'Evaporating',
+  'Ruminating',
+  'Whisking',
+  'Scampering',
+  'Meandering',
+  'Concoting',
+  'Gesticulating',
+  'Flamebeing',
+  'Quantumizing',
+  'Waddling',
+  'Fluttering',
+  'Sprouting',
+  'Elucidating',
+  'Embellishing',
+  'Razzmatizing',
+  'Pondering',
+  'Cogitating',
+  'Garnishing',
+  'Actualizing',
+  'Zigzagging',
+  'Mustering',
+  'Frolicking',
+  'Hullaballooing',
+  'Doing',
+  'Fermenting',
+  'Considering',
+  'Skedaddling',
+  'Actioning',
+  'Orbiting',
+  'Perambulating',
+  'Drizzling',
+  'Schlepping',
+  'Ionizing',
+  'Scurrying',
 ]
 
-const STATUS_EMOJI = ['🔮', '⚙️', '💎', '🔥', '🧪', '🌊', '⚡', '🌀', '🎯', '💡']
+const STATUS_CN = [
+  '思忖中',
+  '推演中',
+  '凝炼中',
+  '熬煮中',
+  '锻造中',
+  '研磨中',
+  '解构中',
+  '冥思中',
+  '编织中',
+  '萃取中',
+  '烹制中',
+  '淬火中',
+  '雕琢中',
+  '融汇中',
+  '觉照中',
+  '运转中',
+  '参详中',
+  '化合中',
+  '浸润中',
+  '焙烤中',
+]
+
+// Merge both — bilingual status verbs
+const STATUS_GERUNDS = [...STATUS_EN, ...STATUS_CN]
+
+const STATUS_PAST = ['Brewed', 'Churned', 'Cooked', 'Sautéed', 'Cogitated', 'Crunched']
 
 function pick<T>(arr: T[]): T {
   return arr[Math.floor(Math.random() * arr.length)]!
@@ -40,25 +106,35 @@ function pick<T>(arr: T[]): T {
 
 export function InputBar({ onSubmit, isLoading }: InputBarProps) {
   const [value, setValue] = useState('')
-  const [verb, setVerb] = useState(() => pick(STATUS_VERBS))
-  const [emoji, setEmoji] = useState(() => pick(STATUS_EMOJI))
+  const [verb, setVerb] = useState(() => pick(STATUS_GERUNDS))
+  const [completionVerb, setCompletionVerb] = useState<string | null>(null)
+  const prevLoading = useRef(isLoading)
 
-  // Rotate status messages while loading
+  // Rotate gerunds while loading
   useEffect(() => {
     if (!isLoading) return
     const interval = setInterval(() => {
-      setVerb(pick(STATUS_VERBS))
-      setEmoji(pick(STATUS_EMOJI))
-    }, 2000)
+      setVerb(pick(STATUS_GERUNDS))
+    }, 1200)
     return () => clearInterval(interval)
   }, [isLoading])
 
-  // Reset when loading starts
+  // Pick a fresh gerund when loading starts
   useEffect(() => {
     if (isLoading) {
-      setVerb(pick(STATUS_VERBS))
-      setEmoji(pick(STATUS_EMOJI))
+      setVerb(pick(STATUS_GERUNDS))
+      setCompletionVerb(null)
+    }
+  }, [isLoading])
+
+  // Flash a past participle when loading stops
+  useEffect(() => {
+    if (prevLoading.current === true && isLoading === false) {
+      setCompletionVerb(pick(STATUS_PAST))
+      const timer = setTimeout(() => setCompletionVerb(null), 1500)
+      return () => clearTimeout(timer)
     }
+    prevLoading.current = isLoading
   }, [isLoading])
 
   const handleSubmit = (val: string) => {
@@ -70,13 +146,19 @@ export function InputBar({ onSubmit, isLoading }: InputBarProps) {
   return (
     <Box marginTop={1}>
       <Box marginRight={1}>
-        <Text color={isLoading ? 'yellow' : 'cyan'}>{isLoading ? `${emoji}` : '▸'}</Text>
+        <Text color={isLoading ? 'yellow' : 'cyan'}>{'>'}</Text>
       </Box>
       <TextInput
         value={value}
         onChange={setValue}
         onSubmit={handleSubmit}
-        placeholder={isLoading ? `${verb}...` : 'Type a message (Esc to exit)...'}
+        placeholder={
+          isLoading
+            ? `${verb}...`
+            : completionVerb
+              ? completionVerb
+              : 'Type a message (Esc to cancel)...'
+        }
       />
     </Box>
   )

package/src/ui/picker.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useCallback, useEffect } from 'react'
+import React, { useState, useCallback } from 'react'
 import { Box, Text, useInput } from 'ink'
-import type { MiphamConfig, ProviderConfig, ModelInfo } from '../shared/index.ts'
+import type { MiphamConfig, ProviderConfig } from '../shared/index.ts'
 
 interface PickerProps {
   config: MiphamConfig
@@ -113,9 +113,6 @@ export function ModelPicker({
   // 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 */}