@miphamai/cli 0.15.0 → 0.16.1

package/src/ui/app.tsx

@@ -1,13 +1,17 @@
-import React, { useState, useCallback, useRef, useMemo } from 'react'
+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,
@@ -26,6 +30,7 @@ interface AppProps {
   skillsLoader?: SkillsLoader
   pluginManager?: PluginManager
   version?: string
+  sessionId?: string
 }
 
 export interface ToolMeta {
@@ -45,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
@@ -75,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,
@@ -84,6 +121,7 @@ export function App({
   skillsLoader,
   pluginManager,
   version,
+  sessionId,
 }: AppProps) {
   const [messages, setMessages] = useState<ChatMessage[]>([])
   const [isLoading, setIsLoading] = useState(false)
@@ -94,23 +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)
+
+  // Detect git branch on mount
+  useEffect(() => {
+    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(() => {
@@ -131,15 +227,20 @@ export function App({
       providerId,
       modelId,
       version: version || '0.0.0',
+      sessionId: sessionId || '',
       setSessionTitle: (title: string) => setSessionTitle(title),
       setFastMode: (on: boolean) => setFastMode(on),
-      setEffort: (level: string) => setEffort(level),
+      setEffort: (level: string) => {
+        setEffort(level)
+        setPreference('lastCodeReviewEffort', level)
+      },
       setFocusMode: (on: boolean) => setFocusMode(on),
       setGoal: (text: string) => setGoalText(text),
+      setUltracodeMode: (on: boolean) => setUltracodeMode(on),
       skillsLoader,
       pluginManager,
     }),
-    [engine, config, providerId, modelId, skillsLoader, pluginManager],
+    [engine, config, providerId, modelId, skillsLoader, pluginManager, sessionId],
   )
 
   const handleSubmit = useCallback(
@@ -294,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) ||
@@ -305,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') {
@@ -324,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
@@ -335,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) {
@@ -349,9 +492,11 @@ 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) => {
@@ -420,20 +565,6 @@ export function App({
 
   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>
@@ -473,6 +604,9 @@ export function App({
         </Box>
       )}
 
+      {/* Agent status footer — shows running background agents */}
+      <AgentFooter agents={Object.values(runningAgents)} gitBranch={gitBranch} tick={agentTick} />
+
       {/* Status line */}
       <Box marginTop={1} flexDirection="column">
         {goalText && (

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>
   )