@miphamai/cli 0.32.0 → 0.32.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@miphamai/cli",
-  "version": "0.32.0",
+  "version": "0.32.2",
   "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,68 @@ 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,18 @@ 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
-    }
-  }, [])
+  /** Active foreground tool indicator: [Bash command...], [Update file.ts...], etc. */
+  const [activeTool, setActiveTool] = useState<{ name: string; detail: string } | null>(null)
 
   // 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
+      Object.values(runningAgents).some((a) => a.status === 'running') || agentProgress !== null || activeTool !== 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.
@@ -520,6 +509,9 @@ export function App({
             const isAgent = toolName === 'Agent' || toolName === 'Task'
             const detail = formatToolDetail(toolName, chunk.toolUse.input)
 
+            // Show [ToolName detail...] activity indicator for ALL tools
+            setActiveTool({ name: toolDisplayName(toolName), detail })
+
             if (isAgent) {
               setAgentProgress({
                 name: detail || (chunk.toolUse.input.subagent_type as string) || 'General-purpose',
@@ -553,6 +545,7 @@ export function App({
 
           if (chunk.type === 'tool_result') {
             setAgentProgress(null)
+            setActiveTool(null)
             // Sync background agents (e.g. Agent tool may have spawned them)
             syncBgAgents()
             const output = chunk.content ? String(chunk.content).trim() : ''
@@ -834,11 +827,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 */}

package/src/ui/chat.tsx

@@ -157,52 +157,58 @@ export function ChatPanel({ messages, focusMode }: ChatPanelProps) {
 }
 
 /**
- * Group consecutive tool calls into compact one-liners for the normal view.
- * Single tools show normally; 2+ consecutive tools get folded:
- *   ⏺ Read · Glob · Bash (3 tools)
+ * Pair each tool_use message with its following tool_result message(s),
+ * showing every tool individually with its name, detail, and output.
+ *
+ * Claude Code parity: each tool renders as:
+ *   ⏺ ToolName (detail)        ← colored per tool type
+ *     ⎿  output summary          ← dimmed below
+ *
+ * Only true duplicates (same tool name + same detail) are collapsed
+ * into a single entry with a count.
  */
 function compactToolGroups(messages: ChatMessage[]): ChatMessage[] {
   const result: ChatMessage[] = []
-  let toolGroup: ChatMessage[] = []
+  let current: ChatMessage | null = null
 
-  const flush = () => {
-    if (toolGroup.length === 0) return
-    if (toolGroup.length === 1) {
-      result.push(toolGroup[0]!)
-    } else {
-      const names = toolGroup
-        .filter((t) => t.toolMeta?.name && !t.toolMeta.name.startsWith('tools ('))
-        .map((t) => t.toolMeta!.name)
-      const uniqueNames = [...new Set(names)]
-      result.push({
-        role: 'system',
-        content: `⏺ ${uniqueNames.join(' · ')} (${names.length} tools)`,
-        toolMeta: {
-          name: `tools (${names.length})`,
-          input: uniqueNames.join(', '),
-          collapsed: true,
-        },
-      })
+  for (const msg of messages) {
+    // Tool call with a name → flush previous, start a new one
+    if (msg.toolMeta?.name && !msg.toolMeta.name.startsWith('tools (')) {
+      if (current) result.push(current)
+      current = { ...msg }
+      continue
     }
-    toolGroup = []
-  }
 
-  for (const msg of messages) {
-    // Tool results (no name, has output) get folded into the preceding tool group
+    // Tool result (no name, has output) → merge output into current tool
     if (msg.toolMeta && !msg.toolMeta.name && msg.toolMeta.output) {
-      toolGroup.push(msg)
+      if (current) {
+        current = {
+          ...current,
+          content: msg.content,
+          toolMeta: {
+            ...current.toolMeta!,
+            output: msg.toolMeta.output,
+          },
+        }
+      }
+      // Orphan tool result (no preceding tool_use) → skip
       continue
     }
-    // Tool calls with a name
-    if (msg.toolMeta?.name && !msg.toolMeta.name.startsWith('tools (')) {
-      toolGroup.push(msg)
+
+    // Already-grouped message (from a previous compact cycle) or non-tool
+    if (current) {
+      result.push(current)
+      current = null
+    }
+    // Skip orphan tool-result messages without a preceding tool_use
+    if (msg.toolMeta && !msg.toolMeta.name && msg.toolMeta.output) {
       continue
     }
-    // Already-grouped or non-tool message
-    flush()
     result.push(msg)
   }
-  flush()
+
+  // Flush any remaining tool
+  if (current) result.push(current)
   return result
 }