@miphamai/cli 0.3.0 → 0.5.0

package/src/tools/computer/screenshot.ts

@@ -0,0 +1,57 @@
+import { execSync } from 'node:child_process'
+import { readFileSync, unlinkSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+
+export async function takeScreenshot(): Promise<{
+  success: boolean
+  data?: string
+  error?: string
+}> {
+  const tmpPath = join(tmpdir(), `mipham-screenshot-${Date.now()}.png`)
+
+  try {
+    const platform = process.platform
+    if (platform === 'darwin') {
+      execSync(`screencapture -x ${tmpPath}`, { timeout: 10000 })
+    } else if (platform === 'linux') {
+      execSync(`import -window root ${tmpPath}`, { timeout: 10000 })
+    } else if (platform === 'win32') {
+      // PowerShell script to capture primary screen and save as PNG
+      const psScript = `
+Add-Type -AssemblyName System.Windows.Forms
+Add-Type -AssemblyName System.Drawing
+$screen = [System.Windows.Forms.Screen]::PrimaryScreen
+$bitmap = New-Object System.Drawing.Bitmap($screen.Bounds.Width, $screen.Bounds.Height)
+$graphics = [System.Drawing.Graphics]::FromImage($bitmap)
+$graphics.CopyFromScreen($screen.Bounds.X, $screen.Bounds.Y, 0, 0, $bitmap.Size)
+$bitmap.Save('${tmpPath.replace(/\\/g, '\\\\')}', [System.Drawing.Imaging.ImageFormat]::Png)
+$graphics.Dispose()
+$bitmap.Dispose()
+      `.trim()
+      const psPath = join(tmpdir(), `mipham-sc-${Date.now()}.ps1`)
+      writeFileSync(psPath, psScript, 'utf-8')
+      execSync(`powershell -ExecutionPolicy Bypass -File "${psPath}"`, { timeout: 15000 })
+      try {
+        unlinkSync(psPath)
+      } catch {
+        // ignore cleanup failures
+      }
+    }
+
+    const data = readFileSync(tmpPath, 'base64')
+    try {
+      unlinkSync(tmpPath)
+    } catch {
+      // ignore cleanup failures
+    }
+    return { success: true, data: `data:image/png;base64,${data}` }
+  } catch (err) {
+    try {
+      unlinkSync(tmpPath)
+    } catch {
+      // ignore cleanup failures
+    }
+    return { success: false, error: `Screenshot failed: ${String(err)}` }
+  }
+}

package/src/tools/index.ts

@@ -15,6 +15,8 @@ import { webFetchTool } from './network/web-fetch'
 import { webSearchTool } from './network/web-search'
 import { configTool } from './system/config'
 import { mcpTool } from './system/mcp'
+import { artifactTool } from './artifact/artifact'
+import { computerUseTool } from './computer/computer-use'
 
 /**
  * Validate tool parameters against the tool's JSON Schema definition.
@@ -116,6 +118,10 @@ export function createToolRegistry(): Map<string, ToolDefinition> {
     // System tools
     withValidation(configTool),
     withValidation(mcpTool),
+    // Artifact tools
+    withValidation(artifactTool),
+    // Computer Use tools
+    withValidation(computerUseTool),
   ]
 
   const map = new Map<string, ToolDefinition>()

package/src/ui/app.tsx

@@ -1,8 +1,9 @@
-import React, { useState, useCallback, useRef } from 'react'
+import React, { useState, useCallback, useRef, useMemo } from 'react'
 import { Box, Text, useInput } from 'ink'
 import type { QueryEngine } from '../core/engine'
 import type { MiphamConfig } from '../shared/index.ts'
 import type { SkillsLoader } from '../skills/loader'
+import { AgentRegistry } from '../agent/agent-registry'
 import { ChatPanel } from './chat'
 import { InputBar } from './input'
 import { ModelPicker } from './picker'
@@ -58,7 +59,7 @@ export function App({
   config,
   initialProvider,
   initialModel,
-  lang,
+  lang: _lang,
   skillsLoader,
 }: AppProps) {
   const [messages, setMessages] = useState<ChatMessage[]>([])
@@ -78,13 +79,24 @@ export function App({
 
   // Agent elapsed timer
   React.useEffect(() => {
-    if (!agentProgress) { setAgentElapsed(0); return }
+    if (!agentProgress) {
+      setAgentElapsed(0)
+      return
+    }
     const interval = setInterval(() => {
       setAgentElapsed(Math.floor((Date.now() - agentProgress.startTime) / 1000))
     }, 1000)
     return () => clearInterval(interval)
   }, [agentProgress])
 
+  // Initialize agent registry (one-time, on mount)
+  useMemo(() => {
+    const agentRegistry = new AgentRegistry()
+    agentRegistry.loadUserAgents()
+    agentRegistry.loadProjectAgents(process.cwd())
+    engine.setAgentRegistry(agentRegistry)
+  }, [])
+
   const mkCtx = useCallback(
     (): CommandContext => ({
       engine,
@@ -216,8 +228,10 @@ export function App({
             if (isAgent) {
               setAgentProgress({
                 name: (chunk.toolUse.input.subagent_type as string) || 'General-purpose',
-                description: (chunk.toolUse.input.description as string) ||
-                  (chunk.toolUse.input.prompt as string) || '',
+                description:
+                  (chunk.toolUse.input.description as string) ||
+                  (chunk.toolUse.input.prompt as string) ||
+                  '',
                 startTime: Date.now(),
               })
             }
@@ -379,8 +393,7 @@ export function App({
       {agentProgress && (
         <Box flexDirection="column" marginY={1}>
           <Text color="cyan" bold>
-            ⏺ {agentProgress.name}{' '}
-            <Text color="yellow">{agentElapsed}s</Text>
+            ⏺ {agentProgress.name} <Text color="yellow">{agentElapsed}s</Text>
           </Text>
           <Text dimColor>
             {agentProgress.description.length > 100

package/src/ui/chat.tsx

@@ -39,8 +39,8 @@ export function ChatPanel({ messages, focusMode }: ChatPanelProps) {
           </Box>
           <Box marginTop={1}>
             <Text dimColor>
-              Tip: Use <Text color="yellow">/clear</Text> to start fresh when switching topics
-              and free up context
+              Tip: Use <Text color="yellow">/clear</Text> to start fresh when switching topics and
+              free up context
             </Text>
           </Box>
         </Box>
@@ -50,8 +50,7 @@ export function ChatPanel({ messages, focusMode }: ChatPanelProps) {
           {msg.toolMeta ? (
             <Box flexDirection="column">
               <Text color="yellow">
-                {msg.toolMeta.collapsed ? '⏺' : '⏺ ▼'}{' '}
-                {msg.toolMeta.name}
+                {msg.toolMeta.collapsed ? '⏺' : '⏺ ▼'} {msg.toolMeta.name}
               </Text>
               <Text dimColor>{msg.content}</Text>
             </Box>
@@ -61,7 +60,12 @@ export function ChatPanel({ messages, focusMode }: ChatPanelProps) {
                 bold
                 color={msg.role === 'user' ? 'green' : msg.role === 'system' ? 'yellow' : 'blue'}
               >
-                {msg.role === 'user' ? '▸ You' : msg.role === 'assistant' ? 'Mipham Code' : '⚠ System'}:
+                {msg.role === 'user'
+                  ? '▸ You'
+                  : msg.role === 'assistant'
+                    ? 'Mipham Code'
+                    : '⚠ System'}
+                :
               </Text>
               <Text>{msg.content}</Text>
             </>

package/src/ui/commands.ts

@@ -8,14 +8,7 @@ import type { QueryEngine } from '../core/engine'
 import type { MiphamConfig } from '../shared/index.ts'
 import type { SkillsLoader } from '../skills/loader'
 import { McpClient } from '../mcp/client'
-import {
-  PACKAGE_NAME,
-  NPM_INSTALL_COMMAND,
-  NPM_UPDATE_COMMAND,
-  NPM_URL,
-  PRODUCT_URL_INTERNATIONAL,
-  PRODUCT_URL_CHINA,
-} from '@mipham/shared'
+import { NPM_INSTALL_COMMAND, NPM_UPDATE_COMMAND } from '@mipham/shared'
 
 export interface CommandContext {
   engine: QueryEngine
@@ -133,7 +126,10 @@ const helpCmd: CommandHandler = (_ctx) => ({
     /login         Show API key status
     /logout        Clear credentials guide
     /feedback      Send feedback
-    /agents        Agent management
+
+    ── Agents ──────────────────────────
+    /agents        Agent view dashboard
+    /bg <prompt>   Run a background agent task
 
     Type /exit or Esc to quit.
   `,
@@ -421,12 +417,12 @@ 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`,
     }
   }
   ctx.setGoal(goal.trim())
+  ctx.engine.setGoal(goal.trim())
   return {
     content: `✓ Goal set: "${goal.trim()}"\n\nUse /status to view progress. Type /goal without arguments to clear.`,
   }
@@ -867,7 +863,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()
@@ -2086,47 +2082,192 @@ const feedbackCmd: CommandHandler = (ctx, args) => {
 // Phase 4 — Agent Management
 // ═══════════════════════════════════════════════════════════════
 
-const agentsCmd: CommandHandler = () => ({
-  content: `── Agent System ──
+const agentsCmd: CommandHandler = (ctx) => {
+  const agentViewManager = ctx.engine.getAgentViewManager?.()
+  if (!agentViewManager) {
+    return { content: 'Agent View dashboard is initializing...' }
+  }
+  const counts = agentViewManager.countByStatus()
+  const total = counts['needs-input'] + counts.working + counts.completed + counts.failed
 
-Mipham Code includes 4 agent-type tools for structured workflows:
+  if (total === 0) {
+    return {
+      content: `── Agent View ──
 
-  ┌──────────┬──────────────────────────────────────┬──────────┬──────────────────────────┐
-  │ Agent    │ Category │ Permission │ Parameters                     │
-  ├──────────┼──────────┼────────────┼────────────────────────────────┤
-  │ Agent    │ agent    │ ask        │ description*, prompt*,          │
-  │          │          │            │ subagent_type (optional)        │
-  │ Skill    │ agent    │ auto       │ skill*, args (optional)         │
-  │ Plan     │ agent    │ auto       │ (no required params)            │
-  │ Memory   │ agent    │ auto       │ action* (read|write|list),      │
-  │          │          │            │ name, content                   │
-  └──────────┴──────────┴────────────┴────────────────────────────────┘
+No background agents running.
 
-── Agent Descriptions ──
+Use /bg <prompt> to spawn a background agent session.
 
-  Agent    Launch a sub-agent for complex, multi-step tasks.
-           Types: general-purpose, Explore, Plan, code-reviewer, etc.
+Example:
+  /bg Fix all TypeScript errors in the project
+  /bg Review the auth module for security issues
 
-  Skill    Invoke a named skill (11 built-in, custom via .SKILL.md).
-           Skills extend AI capabilities with specialized instructions.
+Or use the Agent tool in a conversation to launch a sub-agent.`,
+    }
+  }
 
-  Plan     Enter plan mode — read-only analysis and design.
-           Use before complex changes. Exit with /no-plan.
+  const lines: string[] = [
+    '── Agent View ──',
+    '',
+    `  ${total} session(s):`,
+    `  🟡 Needs input: ${counts['needs-input']}`,
+    `  🔵 Working:     ${counts.working}`,
+    `  🟢 Completed:   ${counts.completed}`,
+    `  🔴 Failed:      ${counts.failed}`,
+    '',
+    'Sessions:',
+  ]
 
-  Memory   Persistent memory read/write across sessions.
-           Stored in ~/.mipham/memory/ as markdown files.
+  const all = agentViewManager.list()
+  for (const s of all.slice(0, 10)) {
+    const statusIcon: Record<string, string> = {
+      'needs-input': '🟡',
+      working: '🔵',
+      completed: '🟢',
+      failed: '🔴',
+    }
+    const elapsed =
+      s.elapsedMs < 1000
+        ? '<1s'
+        : s.elapsedMs < 60000
+          ? `${Math.floor(s.elapsedMs / 1000)}s`
+          : `${Math.floor(s.elapsedMs / 60000)}m`
+    lines.push(
+      `  ${statusIcon[s.status] || '⚪'} ${s.id} · ${s.provider}/${s.model} · ${elapsed} · ${s.task.slice(0, 50)}`,
+    )
+  }
 
-── Architecture ──
+  if (total > 10) {
+    lines.push(`  ... and ${total - 10} more`)
+  }
 
-  User → QueryEngine → Agent Tool → Sub-agent → Tool Results → User
+  lines.push('', 'Run `mipham agents` for the full interactive dashboard with j/k navigation.')
 
-  Agent tools are dispatched by the AI during conversations.
-  The AI decides when to use them — you can also request them directly.
+  return { content: lines.join('\n') }
+}
 
-  Full multi-agent orchestration (Workflow tool) is in the M3 milestone.
+const bgCmd: CommandHandler = (ctx, args) => {
+  const prompt = args.join(' ')
+  if (!prompt.trim()) {
+    return {
+      content: `Usage: /bg <prompt>
 
-  Use /tools to see all 16 tools, including the 4 agent tools.`,
-})
+Spawn a background agent to work on a task while you continue chatting.
+
+Examples:
+  /bg Run the full test suite and report failures
+  /bg Audit the src/ directory for security issues
+  /bg Generate API documentation from JSDoc comments
+
+Background agents appear in the Agent View dashboard (/agents).`,
+    }
+  }
+
+  const agentViewManager = ctx.engine.getAgentViewManager?.()
+  if (!agentViewManager) {
+    return { content: 'Agent View manager is initializing...' }
+  }
+
+  const session = agentViewManager.create(prompt, prompt, {
+    provider: ctx.providerId,
+    model: ctx.modelId,
+  })
+
+  agentViewManager.addMessage(session.id, { role: 'user', content: prompt })
+  agentViewManager.updateStatus(session.id, 'working')
+
+  return {
+    content: `✓ Background agent spawned: ${session.id}
+
+  Task:     ${session.task.slice(0, 80)}
+  Provider: ${session.provider} / ${session.model}
+  Status:   working
+
+Use /agents to view all background sessions.
+Run \`mipham agents\` for the interactive dashboard.`,
+  }
+}
+
+// ═══════════════════════════════════════════════════════════════
+// 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)
@@ -2213,6 +2354,10 @@ registry.set('/login', loginCmd)
 registry.set('/logout', logoutCmd)
 registry.set('/feedback', feedbackCmd)
 registry.set('/agents', agentsCmd)
+registry.set('/bg', bgCmd)
+
+// Artifacts
+registry.set('/artifact', artifactBaseCmd)
 
 // Lower-priority semi-stubs (WIP, backend pending)
 registry.set('/branch', branchCmd)