@miphamai/cli 0.2.4 → 0.4.0

package/src/providers/openai-compat.ts

@@ -1,11 +1,6 @@
-import type {
-  ProviderConfig,
-  ModelInfo,
-  Message,
-  StreamChunk,
-  ContentBlock,
-} from '../shared/index.ts'
+import type { ProviderConfig, ModelInfo, Message, StreamChunk } from '../shared/index.ts'
 import type { ProviderInstance, ChatRequest } from './registry'
+import { fetchWithRetry } from './fetch-utils'
 
 export class OpenAICompatProvider implements ProviderInstance {
   constructor(public config: ProviderConfig) {}
@@ -23,7 +18,7 @@ export class OpenAICompatProvider implements ProviderInstance {
       tools: req.tools?.map((t) => ({ type: 'function', function: t })),
     }
 
-    const response = await fetch(`${baseUrl}/chat/completions`, {
+    const response = await fetchWithRetry(`${baseUrl}/chat/completions`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
@@ -47,6 +42,9 @@ export class OpenAICompatProvider implements ProviderInstance {
     const decoder = new TextDecoder()
     let buffer = ''
 
+    // Track incremental tool calls across streaming deltas
+    const pendingToolCalls = new Map<number, { id: string; name: string; arguments: string }>()
+
     while (true) {
       const { done, value } = await reader.read()
       if (done) break
@@ -60,6 +58,18 @@ export class OpenAICompatProvider implements ProviderInstance {
         if (!trimmed || !trimmed.startsWith('data: ')) continue
         const data = trimmed.slice(6)
         if (data === '[DONE]') {
+          // Emit any pending tool calls before stopping
+          for (const [, tc] of pendingToolCalls) {
+            yield {
+              type: 'tool_use',
+              toolUse: {
+                type: 'tool_use',
+                id: tc.id,
+                name: tc.name,
+                input: this.safeParseJson(tc.arguments),
+              },
+            }
+          }
           yield { type: 'stop' }
           return
         }
@@ -73,21 +83,39 @@ export class OpenAICompatProvider implements ProviderInstance {
 
           if (delta?.tool_calls) {
             for (const tc of delta.tool_calls) {
+              const idx = tc.index ?? 0
+              const pending = pendingToolCalls.get(idx) || {
+                id: '',
+                name: '',
+                arguments: '',
+              }
+
+              if (tc.id) pending.id = tc.id
+              if (tc.function?.name) pending.name = tc.function.name
+              if (tc.function?.arguments) pending.arguments += tc.function.arguments
+
+              pendingToolCalls.set(idx, pending)
+            }
+          }
+
+          if (delta?.content) {
+            yield { type: 'text', content: delta.content }
+          }
+
+          if (choice.finish_reason === 'tool_calls') {
+            // Emit fully accumulated tool calls
+            for (const [, tc] of pendingToolCalls) {
               yield {
                 type: 'tool_use',
                 toolUse: {
                   type: 'tool_use',
                   id: tc.id || `call_${Date.now()}`,
-                  name: tc.function?.name || '',
-                  input: tc.function?.arguments ? JSON.parse(tc.function.arguments) : {},
+                  name: tc.name,
+                  input: this.safeParseJson(tc.arguments),
                 },
               }
             }
-            continue
-          }
-
-          if (delta?.content) {
-            yield { type: 'text', content: delta.content }
+            pendingToolCalls.clear()
           }
 
           if (choice.finish_reason === 'stop') {
@@ -148,6 +176,16 @@ export class OpenAICompatProvider implements ProviderInstance {
     return result
   }
 
+  /** Safely parse JSON, returning an empty object on failure. */
+  private safeParseJson(raw: string): Record<string, unknown> {
+    if (!raw) return {}
+    try {
+      return JSON.parse(raw)
+    } catch {
+      return { _raw: raw }
+    }
+  }
+
   private resolveApiKey(keyTemplate: string): string {
     const match = keyTemplate.match(/^\$\{(.+)\}$/)
     if (match?.[1]) {

package/src/providers/registry.ts

@@ -14,6 +14,7 @@ export interface ChatRequest {
   tools?: Record<string, unknown>[]
   maxTokens?: number
   temperature?: number
+  signal?: AbortSignal
 }
 
 export class ProviderRegistry {

package/src/shared/constants.ts

@@ -361,8 +361,15 @@ export const PROTOCOL_LABELS: Record<string, string> = {
   custom: 'Custom Protocol',
 }
 
-export const TOOL_CATEGORIES = ['file', 'exec', 'agent', 'network', 'system'] as const
+export const TOOL_CATEGORIES = ['file', 'exec', 'agent', 'network', 'system', 'artifact'] as const
 export const CONFIG_FILE_NAME = 'config.yml'
 export const MIPHAM_DIR = '.mipham'
 export const USER_CONFIG_DIR = '.mipham'
 export const MEMORY_DIR = 'memory'
+
+// ── Artifact Constants ──
+export const ARTIFACTS_DIR = 'artifacts'
+export const ARTIFACT_PORT = 9876
+export const ARTIFACT_MAX_PORT_TRIES = 10
+export const ARTIFACT_MAX_SIZE = 5 * 1024 * 1024 // 5MB
+export const ARTIFACT_ALLOWED_EXTENSIONS = ['.html', '.svg']

package/src/shared/types.ts

@@ -50,7 +50,7 @@ export interface Message {
 
 // ── Tool Types ──
 export type ToolPermission = 'auto' | 'ask' | 'bypass'
-export type ToolCategory = 'file' | 'exec' | 'agent' | 'network' | 'system'
+export type ToolCategory = 'file' | 'exec' | 'agent' | 'network' | 'system' | 'artifact'
 
 export interface ToolContext {
   cwd: string
@@ -59,6 +59,26 @@ export interface ToolContext {
   model: string
   skillsLoader?: import('../skills/loader').SkillsLoader
   registry?: import('../providers/registry').ProviderRegistry
+  artifactServer?: import('../artifacts/server').ArtifactServer
+}
+
+// ── Artifact Types ──
+export interface ArtifactEntry {
+  name: string
+  path: string
+  url: string
+  size: number
+  type: 'html' | 'svg'
+  createdAt: string
+  sessionId: string
+  versions?: string[] // version tags e.g. ['v1', 'v2']
+  versionCount?: number
+}
+
+export interface ArtifactManifest {
+  version: 1
+  artifacts: ArtifactEntry[]
+  port?: number
 }
 
 export interface ToolResult {

package/src/skills/loader.ts

@@ -1,5 +1,5 @@
 import { readFileSync, existsSync, readdirSync, statSync } from 'node:fs'
-import { join, extname } from 'node:path'
+import { join } from 'node:path'
 import { parse as parseYaml } from 'yaml'
 import type { SkillDefinition } from '../shared/index.ts'
 
@@ -84,7 +84,7 @@ export class SkillsLoader {
   private tryLoad(path: string, type: 'standard' | 'mipham'): void {
     try {
       const raw = readFileSync(path, 'utf-8')
-      const { data, content } = parseFrontmatter(raw)
+      const { data } = parseFrontmatter(raw)
 
       const skill: SkillDefinition = {
         name: (data.name as string) || this.nameFromPath(path),

package/src/tools/artifact/artifact.ts

@@ -0,0 +1,144 @@
+import { writeFileSync, mkdirSync, existsSync } from 'node:fs'
+import { join } from 'node:path'
+import type { ToolDefinition } from '../../shared/index.ts'
+import { ARTIFACTS_DIR, ARTIFACT_MAX_SIZE } from '../../shared/constants'
+import { addToManifest, readManifest, archiveVersion } from '../../artifacts/manifest'
+
+const NAME_PATTERN = /^[a-z0-9][a-z0-9-]*[a-z0-9]$/
+
+export const artifactTool: ToolDefinition = {
+  name: 'Artifact',
+  description:
+    'Create an interactive HTML or SVG artifact that opens in the browser. Use for dashboards, visualizations, reports, and interactive demos. Content must be self-contained — no external CDN references.',
+  category: 'artifact',
+  permission: 'ask',
+  parameters: {
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+        description: 'Short kebab-case name (e.g. "user-dashboard", "pipeline-diagram")',
+      },
+      type: {
+        type: 'string',
+        enum: ['html', 'svg'],
+        description: 'Artifact type',
+      },
+      content: {
+        type: 'string',
+        description: 'Full HTML or SVG content (self-contained, inline CSS/JS only)',
+      },
+    },
+    required: ['name', 'type', 'content'],
+  },
+  async execute(params, ctx) {
+    const name = params.name as string
+    const type = params.type as string
+    const content = params.content as string
+
+    // Validate name
+    if (!NAME_PATTERN.test(name) || name.length < 3) {
+      return {
+        success: false,
+        content: '',
+        error:
+          `Invalid artifact name "${name}". Use kebab-case (letters, numbers, hyphens), ` +
+          `at least 3 characters, e.g. "my-dashboard".`,
+      }
+    }
+
+    // Validate size
+    const size = Buffer.byteLength(content, 'utf-8')
+    if (size > ARTIFACT_MAX_SIZE) {
+      return {
+        success: false,
+        content: '',
+        error: `Content size ${(size / 1_048_576).toFixed(1)}MB exceeds ${ARTIFACT_MAX_SIZE / 1_048_576}MB limit.`,
+      }
+    }
+
+    // Determine output paths
+    const baseDir = join(ctx.cwd, ARTIFACTS_DIR)
+    const sessionDir = join(baseDir, ctx.sessionId)
+    mkdirSync(sessionDir, { recursive: true })
+
+    const ext = type === 'svg' ? '.svg' : '.html'
+    const filename = `${name}${ext}`
+    const filepath = join(sessionDir, filename)
+
+    // Start server if not running
+    let port: number | undefined
+    if (ctx.artifactServer && !ctx.artifactServer.isRunning()) {
+      port = await ctx.artifactServer.start()
+    } else if (ctx.artifactServer) {
+      port = ctx.artifactServer.getPort()
+    }
+
+    // Archive previous version if this artifact already exists
+    let archivedVersion: string | undefined
+    const isUpdate = existsSync(filepath)
+    if (isUpdate) {
+      const manifest = readManifest(baseDir)
+      const existing = manifest.artifacts.find(
+        (a) => a.name === name && a.sessionId === ctx.sessionId,
+      )
+      if (existing) {
+        archivedVersion = archiveVersion(baseDir, existing)
+      }
+    }
+
+    // Write artifact
+    writeFileSync(filepath, content, 'utf-8')
+
+    // Build URL and manifest entry
+    const url = port
+      ? `http://localhost:${port}/${ctx.sessionId}/${filename}`
+      : `file://${filepath}`
+
+    // Preserve existing version count
+    const manifestPre = readManifest(baseDir)
+    const prev = manifestPre.artifacts.find((a) => a.name === name && a.sessionId === ctx.sessionId)
+    const versionCount = prev?.versionCount || (isUpdate ? 1 : undefined)
+
+    addToManifest(
+      baseDir,
+      {
+        name,
+        path: filepath,
+        url,
+        size,
+        type: type as 'html' | 'svg',
+        createdAt: new Date().toISOString(),
+        sessionId: ctx.sessionId,
+        versions: prev?.versions,
+        versionCount,
+      },
+      port,
+    )
+
+    // Notify SSE clients to refresh Gallery
+    if (ctx.artifactServer) {
+      ctx.artifactServer.notifyReload()
+    }
+
+    const galleryUrl = port ? `http://localhost:${port}` : undefined
+    const versionLine = archivedVersion ? `   Prev archived as: ${archivedVersion}` : ''
+    const galleryLine = galleryUrl ? `Gallery: ${galleryUrl}` : ''
+
+    return {
+      success: true,
+      content: [
+        `✓ Artifact "${name}" saved${isUpdate ? ' (updated)' : ''}.`,
+        `   URL:  ${url}`,
+        `   Size: ${size.toLocaleString()} bytes`,
+        versionLine,
+        galleryLine,
+        '',
+        `Open in browser: /artifact open ${name}`,
+        `List all:         /artifact list`,
+      ]
+        .filter(Boolean)
+        .join('\n'),
+    }
+  },
+}

package/src/tools/index.ts

@@ -15,6 +15,7 @@ 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'
 
 /**
  * Validate tool parameters against the tool's JSON Schema definition.
@@ -116,6 +117,8 @@ export function createToolRegistry(): Map<string, ToolDefinition> {
     // System tools
     withValidation(configTool),
     withValidation(mcpTool),
+    // Artifact tools
+    withValidation(artifactTool),
   ]
 
   const map = new Map<string, ToolDefinition>()

package/src/ui/app.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useRef } from 'react'
 import { Box, Text, useInput } from 'ink'
 import type { QueryEngine } from '../core/engine'
 import type { MiphamConfig } from '../shared/index.ts'
@@ -23,12 +23,26 @@ interface AppProps {
   skillsLoader?: SkillsLoader
 }
 
+export interface ToolMeta {
+  name: string
+  input: string
+  output?: string
+  collapsed: boolean
+}
+
 export interface ChatMessage {
   role: 'user' | 'assistant' | 'system'
   content: string
+  toolMeta?: ToolMeta
 }
 
-const VERSION = '0.2.0'
+interface AgentProgress {
+  name: string
+  description: string
+  startTime: number
+}
+
+const VERSION = '0.3.0'
 
 type PermissionMode = 'auto' | 'ask' | 'bypass'
 
@@ -44,7 +58,7 @@ export function App({
   config,
   initialProvider,
   initialModel,
-  lang,
+  lang: _lang,
   skillsLoader,
 }: AppProps) {
   const [messages, setMessages] = useState<ChatMessage[]>([])
@@ -58,6 +72,21 @@ export function App({
   const [focusMode, setFocusMode] = useState(false)
   const [goalText, setGoalText] = useState('')
   const [permissionMode, setPermissionMode] = useState<PermissionMode>('auto')
+  const abortRef = useRef<AbortController | null>(null)
+  const [agentProgress, setAgentProgress] = useState<AgentProgress | null>(null)
+  const [agentElapsed, setAgentElapsed] = useState(0)
+
+  // Agent elapsed timer
+  React.useEffect(() => {
+    if (!agentProgress) {
+      setAgentElapsed(0)
+      return
+    }
+    const interval = setInterval(() => {
+      setAgentElapsed(Math.floor((Date.now() - agentProgress.startTime) / 1000))
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [agentProgress])
 
   const mkCtx = useCallback(
     (): CommandContext => ({
@@ -161,10 +190,13 @@ export function App({
       setMessages((prev) => [...prev, { role: 'user', content: input }])
       setIsLoading(true)
 
+      const controller = new AbortController()
+      abortRef.current = controller
+
       let assistantContent = ''
 
       try {
-        for await (const chunk of engine.process(input)) {
+        for await (const chunk of engine.process(input, controller.signal)) {
           if (chunk.type === 'text' && chunk.content) {
             assistantContent += chunk.content
             setMessages((prev) => {
@@ -180,24 +212,52 @@ export function App({
           }
 
           if (chunk.type === 'tool_use' && chunk.toolUse) {
+            const toolName = chunk.toolUse.name
+            const inputStr = JSON.stringify(chunk.toolUse.input)
+            const isAgent = toolName === 'Agent' || toolName === 'Task'
+
+            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) ||
+                  '',
+                startTime: Date.now(),
+              })
+            }
+
+            const collapsed = toolName !== 'Agent' // agents always expanded
             setMessages((prev) => [
               ...prev,
               {
                 role: 'system',
-                content: `🔧 Using tool: ${chunk.toolUse!.name}(${JSON.stringify(chunk.toolUse!.input)})`,
+                content: collapsed
+                  ? `⏺ ${toolName} · ${inputStr.slice(0, 50)}${inputStr.length > 50 ? '...' : ''} (Ctrl+O to expand)`
+                  : `🔧 ${toolName}: ${inputStr.slice(0, 200)}`,
+                toolMeta: { name: toolName, input: inputStr, collapsed },
               },
             ])
           }
 
           if (chunk.type === 'tool_result') {
-            const resultPreview =
-              chunk.content && chunk.content.length > 200
-                ? chunk.content.slice(0, 200) + '...'
-                : chunk.content || '(empty)'
-            setMessages((prev) => [
-              ...prev,
-              { role: 'system', content: `📋 Tool result: ${resultPreview}` },
-            ])
+            setAgentProgress(null)
+            setMessages((prev) => {
+              const updated = [...prev]
+              for (let i = updated.length - 1; i >= 0; i--) {
+                if (updated[i]?.toolMeta && !updated[i]!.toolMeta!.output) {
+                  updated[i] = {
+                    ...updated[i]!,
+                    content: updated[i]!.toolMeta!.collapsed
+                      ? updated[i]!.content
+                      : `📋 ${updated[i]!.toolMeta!.name} result: ${(chunk.content || '(empty)').slice(0, 200)}`,
+                    toolMeta: { ...updated[i]!.toolMeta!, output: chunk.content || '' },
+                  }
+                  break
+                }
+              }
+              return updated
+            })
           }
 
           if (chunk.type === 'error') {
@@ -211,6 +271,7 @@ export function App({
         setMessages((prev) => [...prev, { role: 'system', content: `Error: ${String(err)}` }])
       } finally {
         setIsLoading(false)
+        abortRef.current = null
         // Auto-save checkpoint after each AI response
         if (assistantContent) {
           engine.getContext().saveCheckpoint('post-turn')
@@ -227,6 +288,10 @@ export function App({
         setPickerOpen(false)
         return
       }
+      if (isLoading && abortRef.current) {
+        abortRef.current.abort()
+        return
+      }
       process.exit(0)
     }
     // Ctrl+P → open model picker
@@ -234,6 +299,34 @@ export function App({
       setPickerOpen((prev) => !prev)
       return
     }
+    // Ctrl+O → toggle last tool call expand/collapse
+    if (_input === '\x0f') {
+      setMessages((prev) => {
+        const msgs = [...prev]
+        for (let i = msgs.length - 1; i >= 0; i--) {
+          if (msgs[i]?.toolMeta) {
+            const meta = msgs[i]!.toolMeta!
+            if (meta.collapsed) {
+              msgs[i] = {
+                ...msgs[i]!,
+                content: `🔧 ${meta.name}: ${meta.input}\n📋 Result: ${meta.output || '(pending)'}`,
+                toolMeta: { ...meta, collapsed: false },
+              }
+            } else {
+              const short = meta.input.length > 50 ? meta.input.slice(0, 50) + '...' : meta.input
+              msgs[i] = {
+                ...msgs[i]!,
+                content: `⏺ ${meta.name} · ${short} (Ctrl+O to expand)`,
+                toolMeta: { ...meta, collapsed: true },
+              }
+            }
+            break
+          }
+        }
+        return msgs
+      })
+      return
+    }
     // Shift+Tab → cycle permission mode (auto → ask → bypass → auto)
     if (key.shift && key.tab) {
       setPermissionMode((prev) => {
@@ -255,7 +348,7 @@ export function App({
           <Text bold color="cyan">
             Mipham Code
           </Text>
-          <Text dimColor> v0.2.0</Text>
+          <Text dimColor> v0.3.0</Text>
           {sessionTitle ? (
             <Text color="yellow"> — {sessionTitle}</Text>
           ) : (
@@ -278,7 +371,7 @@ export function App({
             ● {PERMISSION_LABELS[permissionMode]}
           </Text>
           <Text dimColor> (Shift+Tab to cycle)</Text>
-          <Text dimColor> · Ctrl+P pick · /help · Esc exit</Text>
+          <Text dimColor> · Ctrl+P pick · /help · Esc cancel</Text>
         </Box>
         {goalText && (
           <Box>
@@ -287,6 +380,20 @@ export function App({
         )}
       </Box>
 
+      {/* Agent progress banner */}
+      {agentProgress && (
+        <Box flexDirection="column" marginY={1}>
+          <Text color="cyan" bold>
+            ⏺ {agentProgress.name} <Text color="yellow">{agentElapsed}s</Text>
+          </Text>
+          <Text dimColor>
+            {agentProgress.description.length > 100
+              ? `"${agentProgress.description.slice(0, 100)}..."`
+              : `"${agentProgress.description}"`}
+          </Text>
+        </Box>
+      )}
+
       {/* Chat panel */}
       <ChatPanel messages={messages} focusMode={focusMode} />
 

package/src/ui/chat.tsx

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