@miphamai/cli 0.16.0 → 0.16.2

package/src/ui/app.tsx

@@ -1,14 +1,17 @@
 import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react'
 import { Box, Text, useInput } from 'ink'
+import { readFileSync } from 'node:fs'
 import type { QueryEngine } from '../core/engine'
 import type { MiphamConfig } from '../shared/index.ts'
 import type { SkillsLoader } from '../skills/loader'
 import type { PluginManager } from '../plugin/plugin-manager'
 import { getPreference, setPreference } from '../config/preferences'
 import { AgentRegistry } from '../agent/agent-registry'
+import { getBackgroundAgentRegistry } from '../agent/background-registry'
 import { ChatPanel } from './chat'
 import { InputBar } from './input'
 import { ModelPicker } from './picker'
+import { AgentFooter, type AgentEntry } from './agent-footer'
 import {
   getCommand,
   looksLikeSlashCommand,
@@ -47,6 +50,10 @@ interface AgentProgress {
   name: string
   description: string
   startTime: number
+  tokensUsed?: number
+  isTask?: boolean
+  /** Unique identifier for multi-agent tracking. */
+  id?: string
 }
 
 // Version is read fresh from package.json at startup via runApp prop
@@ -61,12 +68,12 @@ const PERMISSION_MODES: PermissionMode[] = [
   'bypassPermissions',
 ]
 const PERMISSION_LABELS: Record<PermissionMode, string> = {
-  default: 'default · reads free',
-  acceptEdits: 'accept edits · reads + edits free',
+  default: 'reads free',
+  acceptEdits: 'accept edits on',
   plan: 'plan mode · read-only',
-  auto: 'auto mode · hooks gate',
-  dontAsk: "don't ask · pre-approved only",
-  bypassPermissions: 'bypass · skip all checks',
+  auto: 'auto mode',
+  dontAsk: "don't ask",
+  bypassPermissions: 'bypass',
 }
 const PERMISSION_COLORS: Record<PermissionMode, string> = {
   default: 'white',
@@ -77,6 +84,34 @@ const PERMISSION_COLORS: Record<PermissionMode, string> = {
   bypassPermissions: 'red',
 }
 
+/** Format a tool's input parameters into a compact one-line detail string. */
+function formatToolDetail(name: string, input: Record<string, unknown>): string {
+  switch (name) {
+    case 'Bash':
+      return (input.command as string) || ''
+    case 'Read':
+      return (input.file_path as string) || ''
+    case 'Write':
+      return (input.file_path as string) || ''
+    case 'Edit':
+      return (input.file_path as string) || ''
+    case 'Grep':
+      return (input.pattern as string) || ''
+    case 'Glob':
+      return (input.pattern as string) || ''
+    case 'Agent':
+      return `${(input.subagent_type as string) || 'general'}, "${((input.description as string) || (input.prompt as string) || '').slice(0, 80)}"`
+    case 'WebSearch':
+      return (input.query as string) || ''
+    case 'WebFetch':
+      return (input.url as string) || ''
+    case 'Task':
+      return `"${(input.subject as string) || ''}"`
+    default:
+      return JSON.stringify(input).slice(0, 80)
+  }
+}
+
 export function App({
   engine,
   config,
@@ -97,29 +132,81 @@ export function App({
   const [fastMode, setFastMode] = useState(false)
   const [effort, setEffort] = useState('high')
   const [focusMode, setFocusMode] = useState(false)
+  const [_ultracodeMode, setUltracodeMode] = useState(false)
   const [goalText, setGoalText] = useState('')
   const [permissionMode, setPermissionMode] = useState<PermissionMode>('default')
   const abortRef = useRef<AbortController | null>(null)
   const [agentProgress, setAgentProgress] = useState<AgentProgress | null>(null)
-  const [agentElapsed, setAgentElapsed] = useState(0)
+  // Multi-agent tracking: keyed by agent/task ID, shows all running + recently completed agents
+  const [runningAgents, setRunningAgents] = useState<Record<string, AgentEntry>>({})
+  const [gitBranch, setGitBranch] = useState('')
+  const [agentTick, setAgentTick] = useState(0)
 
-  // Load persisted effort on mount
+  // Detect git branch on mount
   useEffect(() => {
-    const saved = getPreference('lastCodeReviewEffort', 'high')
-    setEffort(saved)
+    try {
+      const head = readFileSync('.git/HEAD', 'utf8').trim()
+      const m = head.match(/^ref: refs\/heads\/(.+)$/)
+      setGitBranch(m ? m[1]! : head.slice(0, 7))
+    } catch {
+      // Not a git repo — leave empty
+    }
   }, [])
 
-  // Agent elapsed timer
-  React.useEffect(() => {
-    if (!agentProgress) {
-      setAgentElapsed(0)
-      return
+  // Tick timer for agent elapsed displays (re-renders every second while agents are running)
+  useEffect(() => {
+    const hasRunning =
+      Object.values(runningAgents).some((a) => a.status === 'running') || agentProgress !== null
+    if (!hasRunning) return
+    const i = setInterval(() => setAgentTick((t) => t + 1), 1000)
+    return () => clearInterval(i)
+  }, [runningAgents, agentProgress])
+
+  // Sync running agents from BackgroundAgentRegistry into React state.
+  // Called after Agent tool results and task notifications to keep the footer current.
+  const syncBgAgents = useCallback(() => {
+    const bgRegistry = getBackgroundAgentRegistry()
+    const all = bgRegistry.list()
+    setRunningAgents((prev) => {
+      const next: Record<string, AgentEntry> = {}
+      for (const task of all) {
+        // Preserve existing entry if it has more data (e.g. tokens accumulated during streaming)
+        const existing = prev[task.id]
+        next[task.id] = {
+          id: task.id,
+          name: existing?.name || task.agentType.charAt(0).toUpperCase() + task.agentType.slice(1),
+          description: existing?.description || task.description,
+          startTime: existing?.startTime || task.startedAt.getTime(),
+          tokensUsed: existing?.tokensUsed || 0,
+          status: task.status === 'running' ? 'running' : 'completed',
+        }
+      }
+      return next
+    })
+
+    // Register onComplete for running tasks to auto-dismiss them
+    for (const task of all) {
+      if (task.status === 'running') {
+        bgRegistry.onComplete(task.id, () => {
+          setRunningAgents((prev) => {
+            const next = { ...prev }
+            if (next[task.id]) {
+              next[task.id] = { ...next[task.id], status: 'completed' } as AgentEntry
+            }
+            return next
+          })
+          // Auto-dismiss after 5 seconds
+          setTimeout(() => {
+            setRunningAgents((prev) => {
+              const next = { ...prev }
+              delete next[task.id]
+              return next
+            })
+          }, 5000)
+        })
+      }
     }
-    const interval = setInterval(() => {
-      setAgentElapsed(Math.floor((Date.now() - agentProgress.startTime) / 1000))
-    }, 1000)
-    return () => clearInterval(interval)
-  }, [agentProgress])
+  }, [])
 
   // Initialize agent registry (one-time, on mount)
   useMemo(() => {
@@ -149,6 +236,7 @@ export function App({
       },
       setFocusMode: (on: boolean) => setFocusMode(on),
       setGoal: (text: string) => setGoalText(text),
+      setUltracodeMode: (on: boolean) => setUltracodeMode(on),
       skillsLoader,
       pluginManager,
     }),
@@ -307,10 +395,11 @@ export function App({
           if (chunk.type === 'tool_use' && chunk.toolUse) {
             const toolName = chunk.toolUse.name
             const isAgent = toolName === 'Agent' || toolName === 'Task'
+            const detail = formatToolDetail(toolName, chunk.toolUse.input)
 
             if (isAgent) {
               setAgentProgress({
-                name: (chunk.toolUse.input.subagent_type as string) || 'General-purpose',
+                name: detail || (chunk.toolUse.input.subagent_type as string) || 'General-purpose',
                 description:
                   (chunk.toolUse.input.description as string) ||
                   (chunk.toolUse.input.prompt as string) ||
@@ -318,14 +407,47 @@ export function App({
                 startTime: Date.now(),
               })
             }
-            // Silent tools: don't show Bash/Glob/Read/etc lines — just the spinner
+
+            // Show tool call as a visible, collapsed message
+            setMessages((prev) => [
+              ...prev,
+              {
+                role: 'system' as const,
+                content: detail,
+                toolMeta: { name: toolName, input: detail, collapsed: true },
+              },
+            ])
             // Mark that next text chunk starts a new turn
             isNewTurn = true
           }
 
           if (chunk.type === 'tool_result') {
             setAgentProgress(null)
-            // Silent: tool results don't need visible lines
+            // Sync background agents (e.g. Agent tool may have spawned them)
+            syncBgAgents()
+            // Show tool result as a compact indented line
+            const output = chunk.content ? String(chunk.content).trim() : ''
+            if (output) {
+              const firstLine = output.split('\n')[0]!.slice(0, 200)
+              const preview = firstLine.length < output.length ? `${firstLine}...` : firstLine
+              setMessages((prev) => [
+                ...prev,
+                {
+                  role: 'system' as const,
+                  content: `  ⎿  ${preview}`,
+                  toolMeta: { name: '', input: '', output: preview, collapsed: true },
+                },
+              ])
+            }
+          }
+
+          if (chunk.type === 'usage' && agentProgress) {
+            const totalTokens = (chunk.inputTokens || 0) + (chunk.outputTokens || 0)
+            if (totalTokens > 0) {
+              setAgentProgress((prev) =>
+                prev ? { ...prev, tokensUsed: (prev.tokensUsed || 0) + totalTokens } : null,
+              )
+            }
           }
 
           if (chunk.type === 'error') {
@@ -337,8 +459,8 @@ export function App({
 
           if (chunk.type === 'task_notification' && chunk.taskNotification) {
             const tn = chunk.taskNotification
-            const emoji = tn.status === 'completed' ? '✅' : '❌'
-            const label = tn.status === 'completed' ? 'completed' : 'failed'
+            const isDone = tn.status === 'completed'
+            const symbol = isDone ? '◼' : '✳'
             const preview = tn.content
               ? tn.content.slice(0, 120) + (tn.content.length > 120 ? '...' : '')
               : tn.error
@@ -348,9 +470,17 @@ export function App({
               ...prev,
               {
                 role: 'system',
-                content: `${emoji} Background Agent ${label}: ${tn.description}\n   ID: ${tn.taskId}\n   ${preview}`,
+                content: `${symbol} ${tn.description}${isDone ? ` · finished` : ''}`,
+                toolMeta: {
+                  name: isDone ? '' : 'task',
+                  input: tn.description || '',
+                  output: preview,
+                  collapsed: isDone,
+                },
               },
             ])
+            // Sync agent footer — mark completed background agents
+            syncBgAgents()
           }
         }
       } catch (err) {
@@ -362,13 +492,16 @@ export function App({
         if (assistantContent) {
           engine.getContext().saveCheckpoint('post-turn')
         }
+        // Final sync of background agents after the turn completes
+        syncBgAgents()
       }
     },
-    [engine, mkCtx],
+    [engine, mkCtx, syncBgAgents],
   )
 
   useInput((_input, key) => {
-    // Global hotkeys
+    // Escape: close picker → abort loading (does NOT exit app)
+    // Vim mode toggle is handled by InputBar
     if (key.escape) {
       if (pickerOpen) {
         setPickerOpen(false)
@@ -378,75 +511,16 @@ export function App({
         abortRef.current.abort()
         return
       }
-      process.exit(0)
-    }
-    // Ctrl+P → open model picker
-    if (_input === '\x10') {
-      setPickerOpen((prev) => !prev)
-      return
-    }
-    // Ctrl+F → toggle focus mode
-    if (_input === '\x06') {
-      setFocusMode((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 through all 6 permission modes
-    if (key.shift && key.tab) {
-      setPermissionMode((prev) => {
-        const idx = PERMISSION_MODES.indexOf(prev)
-        const next = PERMISSION_MODES[(idx + 1) % PERMISSION_MODES.length]!
-        // Sync to engine — use setMode for proper mode semantics
-        engine.getPermission().setMode(next)
-        return next
-      })
+      // When input is empty and not loading, let InputBar handle Escape
+      // (it toggles vim mode or clears pending sequences)
       return
     }
+    // All other global hotkeys (Shift+Tab, Ctrl+P, Ctrl+F, Ctrl+O)
+    // are handled in InputBar to avoid ink-text-input conflicts
   })
 
   return (
     <Box flexDirection="column" padding={1} height="100%">
-      {/* 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>
-      )}
-
       {/* Header — left-aligned */}
       <Box flexDirection="column" marginBottom={1}>
         <Text color="#FFD700" bold>
@@ -481,12 +555,60 @@ export function App({
         /* Input bar (hidden when picker is open) */
         <Box flexDirection="column">
           <Text dimColor>──────────────────────────────</Text>
-          <InputBar onSubmit={handleSubmit} isLoading={isLoading} />
+          <InputBar
+            onSubmit={handleSubmit}
+            isLoading={isLoading}
+            onTogglePicker={() => setPickerOpen((prev) => !prev)}
+            onToggleFocus={() => setFocusMode((prev) => !prev)}
+            onToggleExpand={() => {
+              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
+              })
+            }}
+            onCyclePermission={() => {
+              setPermissionMode((prev) => {
+                const idx = PERMISSION_MODES.indexOf(prev)
+                const next = PERMISSION_MODES[(idx + 1) % PERMISSION_MODES.length]!
+                engine.getPermission().setMode(next)
+                return next
+              })
+            }}
+            onCancel={() => {
+              if (abortRef.current) {
+                abortRef.current.abort()
+              }
+            }}
+          />
           <Text dimColor>──────────────────────────────</Text>
         </Box>
       )}
 
-      {/* Status line */}
+      {/* Agent status footer — shows running background agents */}
+      <AgentFooter agents={Object.values(runningAgents)} gitBranch={gitBranch} tick={agentTick} />
+
+      {/* Status line — Claude Code style: compact, action-oriented */}
       <Box marginTop={1} flexDirection="column">
         {goalText && (
           <Box>
@@ -495,11 +617,10 @@ export function App({
         )}
         <Box flexDirection="row">
           <Text color={PERMISSION_COLORS[permissionMode]}>
-            ● {PERMISSION_LABELS[permissionMode]}
+            ⏵⏵ {PERMISSION_LABELS[permissionMode]} (shift+tab to cycle)
           </Text>
-          <Text dimColor> · Shift+Tab mode</Text>
-          <Text dimColor> · Ctrl+P model · Ctrl+F focus · Ctrl+O expand</Text>
-          <Text dimColor> · Esc cancel · /help · ← agents</Text>
+          <Text dimColor> · Esc to interrupt</Text>
+          <Text dimColor> · ← agents</Text>
         </Box>
       </Box>
     </Box>

package/src/ui/chat.tsx

@@ -17,6 +17,81 @@ function displayCwd(): string {
   return cwd
 }
 
+/** Map tool names to dot colors — Claude Code parity */
+function toolColor(name: string): string {
+  switch (name) {
+    case 'Bash':
+    case 'Read':
+    case 'Glob':
+    case 'Grep':
+      return 'white'
+    case 'Write':
+    case 'Edit':
+      return 'red'
+    case 'Agent':
+    case 'Task':
+    case 'Skill':
+    case 'Workflow':
+      return 'magenta'
+    case 'WebSearch':
+    case 'WebFetch':
+      return 'blue'
+    default:
+      return 'white'
+  }
+}
+
+/**
+ * Memoized single message row — skips re-render when content hasn't changed.
+ * This prevents O(n) re-renders of the entire chat history on every streaming chunk.
+ * The custom comparator returns true (skip render) when content, role, and collapse
+ * state are identical to the previous render.
+ */
+const MessageRow = React.memo(
+  function MessageRow({ msg }: { msg: ChatMessage; isLast: boolean }) {
+    return (
+      <Box
+        flexDirection="column"
+        marginTop={msg.toolMeta ? 0 : 1}
+        marginBottom={msg.toolMeta ? 0 : 1}
+      >
+        {msg.toolMeta ? (
+          <Box flexDirection="column">
+            <Text color={toolColor(msg.toolMeta.name)}>
+              {msg.toolMeta.collapsed ? '⏺' : '⏺ ▼'} {msg.toolMeta.name}
+              {msg.toolMeta.input ? `(${msg.toolMeta.input.slice(0, 120)})` : ''}
+            </Text>
+            {msg.toolMeta.output ? (
+              <Text dimColor> ⎿ {msg.toolMeta.output.slice(0, 300)}</Text>
+            ) : msg.content && !msg.toolMeta.collapsed ? (
+              <Text dimColor>{msg.content}</Text>
+            ) : null}
+          </Box>
+        ) : (
+          <>
+            <Text
+              bold
+              color={msg.role === 'user' ? 'green' : msg.role === 'system' ? 'yellow' : 'blue'}
+            >
+              {msg.role === 'user'
+                ? `▸ ${displayCwd()}`
+                : msg.role === 'assistant'
+                  ? 'Mipham Code'
+                  : '⚠ System'}
+              :
+            </Text>
+            <Text>{msg.content}</Text>
+          </>
+        )}
+      </Box>
+    )
+  },
+  (prev, next) =>
+    prev.msg.content === next.msg.content &&
+    prev.msg.role === next.msg.role &&
+    prev.msg.toolMeta?.collapsed === next.msg.toolMeta?.collapsed,
+)
+
 export function ChatPanel({ messages, focusMode }: ChatPanelProps) {
   // In focus mode, compact tool activity into summary lines
   const displayMessages = focusMode ? compactForFocus(messages) : messages
@@ -56,36 +131,11 @@ export function ChatPanel({ messages, focusMode }: ChatPanelProps) {
         </Box>
       )}
       {displayMessages.map((msg, i) => (
-        <Box
-          key={i}
-          flexDirection="column"
-          marginTop={msg.toolMeta ? 0 : 1}
-          marginBottom={msg.toolMeta ? 0 : 1}
-        >
-          {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'
-                  ? `▸ ${displayCwd()}`
-                  : msg.role === 'assistant'
-                    ? 'Mipham Code'
-                    : '⚠ System'}
-                :
-              </Text>
-              <Text>{msg.content}</Text>
-            </>
-          )}
-        </Box>
+        <MessageRow
+          key={`${i}-${msg.role}-${typeof msg.content === 'string' ? msg.content.length : 0}`}
+          msg={msg}
+          isLast={i === displayMessages.length - 1}
+        />
       ))}
     </Box>
   )