@miphamai/cli 0.32.2 → 0.32.4

package/package.json

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

package/src/ui/agent-footer.tsx

@@ -48,11 +48,25 @@ function formatTokens(n: number): string {
 /** 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'
+    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'
   }
 }
 
@@ -64,10 +78,22 @@ function animatedDots(tick: number): string {
 
 /** 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',
+  '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). */
@@ -89,7 +115,8 @@ export function AgentFooter({ agents, tick, activeTool, agentProgress }: AgentFo
       {hasTool && (
         <Box>
           <Text color={toolIndicatorColor(activeTool!.name)}>
-            {'  '}[{activeTool!.name} {activeTool!.detail.slice(0, 60)}{animatedDots(tick)}]
+            {'  '}[{activeTool!.name} {activeTool!.detail.slice(0, 60)}
+            {animatedDots(tick)}]
           </Text>
         </Box>
       )}

package/src/ui/app.tsx

@@ -185,11 +185,17 @@ export function App({
   const [agentTick, setAgentTick] = useState(0)
   /** 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)
+  // 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 || activeTool !== 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)
@@ -436,6 +442,18 @@ 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
 
@@ -509,18 +527,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
-            setActiveTool({ name: toolDisplayName(toolName), detail })
+            // 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
@@ -544,8 +568,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() : ''
@@ -582,12 +608,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 })
             }
           }
 
@@ -631,6 +659,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')
@@ -671,14 +705,6 @@ export function App({
   if (apiKeyPrompt) {
     return (
       <Box flexDirection="column" padding={1} height="100%">
-        {/* Header */}
-        <Box flexDirection="column" marginBottom={1}>
-          <Text color="#FFD700" bold>
-            Mipham Code
-          </Text>
-          <Text dimColor>v{version || '0.0.0'}</Text>
-        </Box>
-
         {/* Chat panel — show existing messages */}
         <ChatPanel messages={messages} focusMode={false} />
 
@@ -718,15 +744,6 @@ export function App({
 
   return (
     <Box flexDirection="column" padding={1} height="100%">
-      {/* Header — left-aligned */}
-      <Box flexDirection="column" marginBottom={1}>
-        <Text color="#FFD700" bold>
-          Mipham Code
-        </Text>
-        <Text dimColor>v{version || '0.0.0'}</Text>
-        <Text dimColor>{modelId}</Text>
-      </Box>
-
       {/* Workflow progress — auto-detects active workflows, renders nothing when idle */}
       <WorkflowProgress />
 

package/src/ui/chat.tsx

@@ -79,17 +79,15 @@ const MessageRow = React.memo(
           </Box>
         ) : (
           <>
-            <Text
-              bold
-              color={msg.role === 'user' ? 'green' : msg.role === 'system' ? 'yellow' : 'blue'}
-            >
-              {msg.role === 'user'
-                ? `▸ ${displayCwd()}`
-                : msg.role === 'assistant'
-                  ? t('ui.assistant.role_label')
-                  : `⚠ ${t('ui.system.role_label')}`}
-              :
-            </Text>
+            {msg.role === 'user' ? (
+              <Text bold color="green">
+                ▸ {displayCwd()}:
+              </Text>
+            ) : msg.role === 'system' ? (
+              <Text bold color="yellow">
+                ⚠ {t('ui.system.role_label')}:
+              </Text>
+            ) : null}
             <Text>{msg.content}</Text>
           </>
         )}