@miphamai/cli 0.32.1 → 0.32.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miphamai/cli",
-  "version": "0.32.1",
+  "version": "0.32.3",
   "description": "Mipham Code — Multi-model open-core intelligent coding terminal by MiphamAI",
   "keywords": [
     "ai",

package/src/ui/agent-footer.tsx

@@ -11,11 +11,23 @@ export interface AgentEntry {
   status: 'running' | 'completed'
 }
 
+export interface AgentProgress {
+  name: string
+  description: string
+  startTime: number
+  tokensUsed?: number
+  isTask?: boolean
+  id?: string
+}
+
 interface AgentFooterProps {
   agents: AgentEntry[]
-  gitBranch: string
   /** Tick counter for live elapsed-time re-renders. */
   tick: number
+  /** Active foreground tool: shown as [ToolName detail...] before agent lines. */
+  activeTool?: { name: string; detail: string } | null
+  /** Inline agent progress from tool_use streaming: ✻ Gerund… (elapsed · tokens). */
+  agentProgress?: AgentProgress | null
 }
 
 /** Format elapsed seconds into human-readable string (e.g. "2m 51s", "38s"). */
@@ -33,20 +45,95 @@ function formatTokens(n: number): string {
   return String(n)
 }
 
-export function AgentFooter({ agents, gitBranch, tick: _tick }: AgentFooterProps) {
+/** Map tool name to Ink color for the [Tool ...] indicator. */
+function toolIndicatorColor(name: string): string {
+  switch (name) {
+    case 'Bash':
+    case 'Read':
+    case 'Glob':
+    case 'Grep':
+      return 'white'
+    case 'Write':
+    case 'Edit':
+    case 'Update':
+      return 'red'
+    case 'Agent':
+    case 'Task':
+    case 'Skill':
+    case 'Workflow':
+      return 'magenta'
+    case 'WebSearch':
+    case 'WebFetch':
+      return 'blue'
+    default:
+      return 'white'
+  }
+}
+
+/** Animate dots for the active tool indicator: cycles 1→2→3→1 dots. */
+function animatedDots(tick: number): string {
+  const n = (tick % 3) + 1
+  return '.'.repeat(n)
+}
+
+/** Gerund verbs for agent progress — rotated every 2 seconds for visual liveliness. */
+const GERUNDS = [
+  'Pondering',
+  'Contemplating',
+  'Cerebrating',
+  'Ruminating',
+  'Deliberating',
+  'Cogitating',
+  'Perambulating',
+  'Computing',
+  'Processing',
+  'Analyzing',
+  'Synthesizing',
+  'Orchestrating',
+  'Forging',
+  'Illuminating',
+  'Manifesting',
+  'Transmogrifying',
+]
+
+/** Pick a gerund that changes every 2 seconds (driven by tick). */
+function rotatingGerund(tick: number): string {
+  return GERUNDS[Math.floor(tick / 2) % GERUNDS.length]!
+}
+
+export function AgentFooter({ agents, tick, activeTool, agentProgress }: AgentFooterProps) {
   const { t } = useI18n()
   const hasAgents = agents.length > 0
-  const hasBranch = gitBranch.length > 0
+  const hasTool = !!activeTool
+  const hasProgress = !!agentProgress
 
-  if (!hasAgents && !hasBranch) return null
+  if (!hasAgents && !hasTool && !hasProgress) return null
 
   return (
     <Box flexDirection="column" marginTop={1}>
-      {/* Git branch indicator */}
-      {hasBranch && (
+      {/* Active foreground tool indicator — Claude Code style [Bash command...] */}
+      {hasTool && (
         <Box>
+          <Text color={toolIndicatorColor(activeTool!.name)}>
+            {'  '}[{activeTool!.name} {activeTool!.detail.slice(0, 60)}
+            {animatedDots(tick)}]
+          </Text>
+        </Box>
+      )}
+
+      {/* Inline agent progress — ✻ Gerund… (elapsed · ↓ tokens) in orange */}
+      {hasProgress && (
+        <Box>
+          <Text color="#FFA500">
+            {'  '}✻ {rotatingGerund(tick)}…
+          </Text>
           <Text dimColor>
-            {'  '}⏺ {gitBranch}
+            {' ('}
+            {formatElapsed(Math.floor((Date.now() - agentProgress!.startTime) / 1000))}
+            {agentProgress!.tokensUsed && agentProgress!.tokensUsed > 0
+              ? ` · ↓ ${formatTokens(agentProgress!.tokensUsed)} tokens`
+              : ''}
+            {')'}
           </Text>
         </Box>
       )}

package/src/ui/app.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react'
 import { Box, Text, useInput } from 'ink'
 import TextInput from 'ink-text-input'
-import { readFileSync } from 'node:fs'
 import type { QueryEngine } from '../core/engine'
 import type { RemoteEngine } from '../daemon/remote-engine'
 import type { MiphamConfig } from '../shared/index.ts'
@@ -183,28 +182,24 @@ export function App({
   const [agentProgress, setAgentProgress] = useState<AgentProgress | null>(null)
   // 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
-    }
-  }, [])
-
-  // Tick timer for agent elapsed displays (re-renders every second while agents are running)
+  /** Active foreground tool indicator: [Bash command...], [Update file.ts...], etc. */
+  const [activeTool, setActiveTool] = useState<{ name: string; detail: string } | null>(null)
+  // Refs for immediate state (bypasses React batching so footer renders between rapid chunks)
+  const activeToolRef = useRef<{ name: string; detail: string } | null>(null)
+  const agentProgressRef = useRef<AgentProgress | null>(null)
+
+  // Tick timer for agent elapsed displays (re-renders every second while agents are running).
+  // Uses refs so the timer doesn't stop between state batches.
   useEffect(() => {
     const hasRunning =
-      Object.values(runningAgents).some((a) => a.status === 'running') || agentProgress !== null
+      Object.values(runningAgents).some((a) => a.status === 'running') ||
+      agentProgressRef.current !== null ||
+      activeToolRef.current !== null
     if (!hasRunning) return
     const i = setInterval(() => setAgentTick((t) => t + 1), 1000)
     return () => clearInterval(i)
-  }, [runningAgents, agentProgress])
+  }, [runningAgents, agentProgress, activeTool])
 
   // Sync running agents from BackgroundAgentRegistry into React state.
   // Called after Agent tool results and task notifications to keep the footer current.
@@ -447,6 +442,13 @@ export function App({
       setMessages((prev) => [...prev, { role: 'user', content: input }])
       setIsLoading(true)
 
+      // Start agent progress indicator immediately for ALL processing
+      const progressStart = Date.now()
+      const progress: AgentProgress = { name: '', description: '', startTime: progressStart, tokensUsed: 0 }
+      agentProgressRef.current = progress
+      setAgentProgress(progress)
+      setAgentTick((t) => t + 1)
+
       const controller = new AbortController()
       abortRef.current = controller
 
@@ -520,15 +522,24 @@ export function App({
             const isAgent = toolName === 'Agent' || toolName === 'Task'
             const detail = formatToolDetail(toolName, chunk.toolUse.input)
 
+            // Show [ToolName detail...] activity indicator for ALL tools (via ref for immediate render)
+            const toolEntry = { name: toolDisplayName(toolName), detail }
+            activeToolRef.current = toolEntry
+            setActiveTool(toolEntry)
+            setAgentTick((t) => t + 1)
+
             if (isAgent) {
-              setAgentProgress({
+              const ap: AgentProgress = {
                 name: detail || (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(),
-              })
+              }
+              agentProgressRef.current = ap
+              setAgentProgress(ap)
+              setAgentTick((t) => t + 1)
             }
 
             // Show tool call as a visible, collapsed message
@@ -552,7 +563,10 @@ export function App({
           }
 
           if (chunk.type === 'tool_result') {
-            setAgentProgress(null)
+            // Clear tool indicator but keep agent progress (AI is still processing)
+            activeToolRef.current = null
+            setActiveTool(null)
+            setAgentTick((t) => t + 1)
             // Sync background agents (e.g. Agent tool may have spawned them)
             syncBgAgents()
             const output = chunk.content ? String(chunk.content).trim() : ''
@@ -589,12 +603,14 @@ export function App({
             }
           }
 
-          if (chunk.type === 'usage' && agentProgress) {
+          if (chunk.type === 'usage') {
             const totalTokens = (chunk.inputTokens || 0) + (chunk.outputTokens || 0)
-            if (totalTokens > 0) {
-              setAgentProgress((prev) =>
-                prev ? { ...prev, tokensUsed: (prev.tokensUsed || 0) + totalTokens } : null,
-              )
+            if (totalTokens > 0 && agentProgressRef.current) {
+              agentProgressRef.current = {
+                ...agentProgressRef.current,
+                tokensUsed: (agentProgressRef.current.tokensUsed || 0) + totalTokens,
+              }
+              setAgentProgress({ ...agentProgressRef.current })
             }
           }
 
@@ -638,6 +654,12 @@ export function App({
         flushStreamBuffer()
         setIsLoading(false)
         abortRef.current = null
+        // Clear all progress/tool indicators
+        agentProgressRef.current = null
+        setAgentProgress(null)
+        activeToolRef.current = null
+        setActiveTool(null)
+        setAgentTick((t) => t + 1)
         // Auto-save checkpoint after each AI response
         if (assistantContent) {
           engine.getContext().saveCheckpoint('post-turn')
@@ -834,11 +856,12 @@ export function App({
             </Box>
           )}
 
-          {/* Agent status footer — shows running background agents */}
+          {/* Agent status footer — shows active tool indicator + inline agent progress + running background agents */}
           <AgentFooter
             agents={Object.values(runningAgents)}
-            gitBranch={gitBranch}
             tick={agentTick}
+            activeTool={activeTool}
+            agentProgress={agentProgress}
           />
 
           {/* Status line — Claude Code style */}