miii-cli 0.1.7 → 0.2.0

package/src/tui/App.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react'
-import { Box, useStdout, useInput } from 'ink'
+import { Box, Text, useStdout, useInput } from 'ink'
 import { StatusBar, Divider } from './components/StatusBar.js'
 import { MessageList } from './components/MessageList.js'
 import { InputArea } from './components/InputArea.js'
 import { ModelPicker } from './components/ModelPicker.js'
-import { stream } from '../llm/stream.js'
+import { chat } from '../llm/stream.js'
 import { listModels, pullModel } from '../llm/ollama.js'
 import type { OllamaModel } from '../llm/ollama.js'
-import { StreamParser } from '../parser/stream-parser.js'
+import { StreamParser, extractBareToolCall } from '../parser/stream-parser.js'
 import { tools, getSystemPrompt } from '../tools/index.js'
 import { readFile, guardPath } from '../files/ops.js'
 import type { SkillLoader } from '../skills/loader.js'
@@ -21,7 +21,6 @@ interface Props {
 }
 
 const MAX_TOOL_DEPTH = 6
-const RENDER_THROTTLE_MS = 40
 
 function expandAtRefs(text: string, cwd: string): { displayText: string; contextPrefix: string } {
   const refs = [...text.matchAll(/@([\w./\-]+)/g)]
@@ -63,13 +62,19 @@ export function App({ config, skills, cwd }: Props) {
   const currentModelRef = useRef(currentModel)
   const abortRef = useRef<AbortController | null>(null)
   const pullAbortRef = useRef<AbortController | null>(null)
-  const tokenBufRef = useRef('')
-  const lastRenderRef = useRef(0)
   const messagesRef = useRef(messages)
+  const approvalResolveRef = useRef<((ok: boolean) => void) | null>(null)
+  const [pendingApproval, setPendingApproval] = useState<{
+    toolName: string
+    path: string
+    content?: string
+  } | null>(null)
+  const pendingApprovalRef = useRef(pendingApproval)
 
   useEffect(() => { systemPromptRef.current = systemPrompt }, [systemPrompt])
   useEffect(() => { currentModelRef.current = currentModel }, [currentModel])
   useEffect(() => { messagesRef.current = messages }, [messages])
+  useEffect(() => { pendingApprovalRef.current = pendingApproval }, [pendingApproval])
 
   useEffect(() => {
     if (status === 'idle') return
@@ -80,6 +85,20 @@ export function App({ config, skills, cwd }: Props) {
   // Scroll keybindings — PageUp/PageDn scroll message history
   const SCROLL_STEP = 5
   useInput((_input, key) => {
+    // approvalResolveRef is set synchronously in requestApproval — no useEffect needed
+    if (approvalResolveRef.current) {
+      const resolve = approvalResolveRef.current
+      if (_input === 'y' || _input === 'Y') {
+        approvalResolveRef.current = null
+        setPendingApproval(null)
+        resolve(true)
+      } else if (_input === 'n' || _input === 'N' || key.escape) {
+        approvalResolveRef.current = null
+        setPendingApproval(null)
+        resolve(false)
+      }
+      return
+    }
     if (pickerOpen) return
     if (key.pageUp) {
       setScrollOffset(n => Math.min(n + SCROLL_STEP, Math.max(0, messages.length - 1)))
@@ -92,6 +111,19 @@ export function App({ config, skills, cwd }: Props) {
   const cols = stdout.columns ?? 80
   const rows = stdout.rows ?? 24
 
+  const APPROVAL_TOOLS = new Set(['delete_file'])
+
+  const requestApproval = useCallback((toolName: string, args: Record<string, unknown>): Promise<boolean> => {
+    return new Promise((resolve) => {
+      approvalResolveRef.current = resolve
+      setPendingApproval({
+        toolName,
+        path: ((args.path ?? args.from) as string) ?? '',
+        content: args.content as string | undefined,
+      })
+    })
+  }, [])
+
   function addMsg(role: Message['role'], content: string, id?: string): string {
     const mid = id ?? generateId()
     setMessages(prev => [...prev, { id: mid, role, content, timestamp: Date.now() }])
@@ -110,18 +142,14 @@ export function App({ config, skills, cwd }: Props) {
 
   const runLoop = useCallback(async (contextMsgs: ChatMessage[], depth = 0) => {
     if (depth >= MAX_TOOL_DEPTH) { setStatus('idle'); return }
-    setStatus('streaming')
+    setStatus('thinking')
 
     const assistantId = generateId()
     setMessages(prev => [...prev, { id: assistantId, role: 'assistant', content: '', timestamp: Date.now() }])
 
-    const parser = new StreamParser()
-    const pendingTools: Array<{ name: string; args: Record<string, unknown> }> = []
-    let fullText = ''
-
     abortRef.current = new AbortController()
 
-    await stream({
+    await chat({
       provider: config.provider,
       model: currentModelRef.current,
       baseUrl: config.baseUrl,
@@ -129,32 +157,27 @@ export function App({ config, skills, cwd }: Props) {
       messages: contextMsgs,
       signal: abortRef.current.signal,
 
-      onToken(token) {
-        fullText += token
-        tokenBufRef.current += token
-        const now = Date.now()
-        if (now - lastRenderRef.current >= RENDER_THROTTLE_MS) {
-          const flush = tokenBufRef.current
-          tokenBufRef.current = ''
-          lastRenderRef.current = now
-          setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, content: m.content + flush } : m))
-        }
-        for (const item of parser.feed(token)) {
-          if (item.type === 'tool_call') pendingTools.push({ name: item.toolName, args: item.toolArgs })
-        }
-      },
+      async onDone(fullText) {
+        setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, content: fullText } : m))
 
-      async onDone() {
-        if (tokenBufRef.current) {
-          const flush = tokenBufRef.current
-          tokenBufRef.current = ''
-          setMessages(prev => prev.map(m => m.id === assistantId ? { ...m, content: m.content + flush } : m))
-        }
-        for (const item of parser.flush()) {
+        const pendingTools: Array<{ name: string; args: Record<string, unknown> }> = []
+        const parser = new StreamParser()
+        for (const item of [...parser.feed(fullText), ...parser.flush()]) {
           if (item.type === 'tool_call') pendingTools.push({ name: item.toolName, args: item.toolArgs })
         }
 
-        if (!pendingTools.length) { setStatus('idle'); return }
+        if (!pendingTools.length) {
+          const bare = extractBareToolCall(fullText)
+          if (bare) {
+            pendingTools.push(bare)
+          } else {
+            if (fullText.includes('{"name"')) {
+              addMsg('tool', 'tool_call parse failed — could not extract tool call from model output')
+            }
+            setStatus('idle')
+            return
+          }
+        }
 
         setStatus('tool')
         const next: ChatMessage[] = [...contextMsgs, { role: 'assistant', content: fullText }]
@@ -163,6 +186,15 @@ export function App({ config, skills, cwd }: Props) {
           const tool = tools.find(t => t.name === tc.name)
           const toolId = generateId()
           if (tool) {
+            if (APPROVAL_TOOLS.has(tc.name)) {
+              const approved = await requestApproval(tc.name, tc.args)
+              if (!approved) {
+                const cancelled = `[${tc.name}] cancelled by user`
+                setMessages(prev => [...prev, { id: toolId, role: 'tool', content: cancelled, timestamp: Date.now() }])
+                next.push({ role: 'user', content: `Tool ${tc.name} was cancelled by user.` })
+                continue
+              }
+            }
             try {
               const result = await tool.execute(tc.args)
               setMessages(prev => [...prev, { id: toolId, role: 'tool', content: `[${tc.name}]\n${result}`, timestamp: Date.now() }])
@@ -183,6 +215,7 @@ export function App({ config, skills, cwd }: Props) {
       },
 
       onError(err) {
+        setMessages(prev => prev.filter(m => m.id !== assistantId))
         addMsg('system', `error: ${err.message}`)
         setStatus('idle')
       },
@@ -268,7 +301,6 @@ export function App({ config, skills, cwd }: Props) {
   const handleAbort = useCallback(() => {
     abortRef.current?.abort()
     setStatus('idle')
-    tokenBufRef.current = ''
   }, [])
 
   const skillList = skills.list()
@@ -294,10 +326,23 @@ export function App({ config, skills, cwd }: Props) {
           rows={rows - 8}
           cols={cols}
           scrollOffset={scrollOffset}
-          streaming={status === 'streaming'}
+          streaming={false}
+          thinkingTick={status === 'thinking' ? tick : undefined}
         />
       )}
       <Divider cols={cols} />
+      {pendingApproval && (
+        <Box flexDirection="column" borderStyle="round" borderColor="yellow" paddingX={1} marginBottom={1}>
+          <Text color="yellow" bold>Allow {pendingApproval.toolName}?</Text>
+          <Text>  path: <Text color="cyan">{pendingApproval.path}</Text></Text>
+          {pendingApproval.content && (
+            <Text color="gray" dimColor>
+              {pendingApproval.content.split('\n').slice(0, 12).join('\n')}
+            </Text>
+          )}
+          <Text color="green">[y] approve  <Text color="red">[n] cancel</Text></Text>
+        </Box>
+      )}
       <InputArea
         status={status}
         skills={skillList}

package/src/tui/InputBar.tsx

@@ -3,7 +3,7 @@ import { Box, Text, useStdout } from 'ink'
 import { InputArea } from './components/InputArea.js'
 import { ModelPicker } from './components/ModelPicker.js'
 import { Divider } from './components/StatusBar.js'
-import { stream } from '../llm/stream.js'
+import { chat } from '../llm/stream.js'
 import { listModels, pullModel } from '../llm/ollama.js'
 import type { OllamaModel } from '../llm/ollama.js'
 import { StreamParser } from '../parser/stream-parser.js'
@@ -22,12 +22,20 @@ interface Props {
 }
 
 const MAX_TOOL_DEPTH = 6
-const THROTTLE_MS = 40
-const PREVIEW_LINES = 8
 
-function lastLines(text: string, n: number): string[] {
-  return text.split('\n').slice(-n)
-}
+const THINKING_PHRASES = [
+  'oh wow, a question. let me pretend to care…',
+  'consulting the void…',
+  'making something up, just a sec…',
+  'definitely not hallucinating right now…',
+  'running 47 mental tabs…',
+  'staring into the abyss (it blinked)…',
+  'calculating your fate, no pressure…',
+  'doing the thinking you pay me for…',
+  'processing your questionable life choices…',
+  'summoning coherent thoughts, rarely works…',
+]
+const SPARKLE = ['✦', '✧', '✶', '✷', '✸', '✹']
 
 function buildAtContext(text: string): string {
   const refs = [...text.matchAll(/@([\w./\-]+)/g)]
@@ -49,7 +57,6 @@ export function InputBar({ config, skills, cwd, session }: Props) {
   const [status, setStatus] = useState<Status>('idle')
   const [tick, setTick] = useState(0)
   const [currentModel, setCurrentModel] = useState(config.model)
-  const [streamPreview, setStreamPreview] = useState('')
   const [sessionName, setSessionName] = useState(session)
   const [planningMode, setPlanningMode] = useState(false)
 
@@ -62,8 +69,6 @@ export function InputBar({ config, skills, cwd, session }: Props) {
 
   const abortRef = useRef<AbortController | null>(null)
   const pullAbortRef = useRef<AbortController | null>(null)
-  const tokenBufRef = useRef('')
-  const lastRenderRef = useRef(0)
   const systemPromptRef = useRef(getSystemPrompt(`\n- CWD: ${cwd}`))
   const currentModelRef = useRef(currentModel)
   const sessionNameRef = useRef(sessionName)
@@ -100,45 +105,25 @@ export function InputBar({ config, skills, cwd, session }: Props) {
 
   const runLoop = useCallback(async (contextMsgs: ChatMessage[], depth = 0) => {
     if (depth >= MAX_TOOL_DEPTH) { setStatus('idle'); return }
-    setStatus('streaming')
-    setStreamPreview('')
-
-    const parser = new StreamParser()
-    const pendingTools: Array<{ name: string; args: Record<string, unknown> }> = []
-    let fullText = ''
+    setStatus('thinking')
 
     abortRef.current = new AbortController()
 
-    await stream({
+    await chat({
       provider: config.provider,
       model: currentModelRef.current,
       baseUrl: config.baseUrl,
       messages: contextMsgs,
       signal: abortRef.current.signal,
 
-      onToken(token) {
-        fullText += token
-        tokenBufRef.current += token
-        const now = Date.now()
-        if (now - lastRenderRef.current >= THROTTLE_MS) {
-          setStreamPreview(fullText)
-          tokenBufRef.current = ''
-          lastRenderRef.current = now
-        }
-        for (const item of parser.feed(token)) {
-          if (item.type === 'tool_call') pendingTools.push({ name: item.toolName, args: item.toolArgs })
-        }
-      },
-
-      async onDone() {
-        setStreamPreview(fullText)
-        for (const item of parser.flush()) {
+      async onDone(fullText) {
+        const pendingTools: Array<{ name: string; args: Record<string, unknown> }> = []
+        const parser = new StreamParser()
+        for (const item of [...parser.feed(fullText), ...parser.flush()]) {
           if (item.type === 'tool_call') pendingTools.push({ name: item.toolName, args: item.toolArgs })
         }
 
         printer.assistantMsg(fullText)
-        setStreamPreview('')
-
         historyRef.current.push({ role: 'assistant', content: fullText })
         saveSession(sessionNameRef.current, historyRef.current)
 
@@ -171,7 +156,6 @@ export function InputBar({ config, skills, cwd, session }: Props) {
       onError(err) {
         if (err.name !== 'AbortError') printer.errorMsg(err.message)
         setStatus('idle')
-        setStreamPreview('')
       },
     })
   }, [config])
@@ -344,8 +328,6 @@ export function InputBar({ config, skills, cwd, session }: Props) {
   const handleAbort = useCallback(() => {
     abortRef.current?.abort()
     setStatus('idle')
-    setStreamPreview('')
-    tokenBufRef.current = ''
   }, [])
 
   const skillList = skills.list()
@@ -368,13 +350,16 @@ export function InputBar({ config, skills, cwd, session }: Props) {
           />
           <Divider cols={cols} />
         </>
-      ) : streamPreview ? (
+      ) : (status === 'thinking' || status === 'tool') ? (
         <>
           <Box flexDirection="column" paddingX={1}>
             <Text bold color="green">miii</Text>
-            {lastLines(streamPreview, PREVIEW_LINES).map((line, i) => (
-              <Text key={i} color="gray" wrap="wrap">{line || ' '}</Text>
-            ))}
+            <Box paddingLeft={2}>
+              {status === 'thinking'
+                ? <><Text color="yellow">{SPARKLE[tick % SPARKLE.length]} </Text><Text color="gray" dimColor italic>{THINKING_PHRASES[Math.floor(tick / 62) % THINKING_PHRASES.length]}</Text></>
+                : <Text color="yellow" dimColor>running tool…</Text>
+              }
+            </Box>
           </Box>
           <Divider cols={cols} />
         </>

package/src/tui/components/MessageList.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Box, Text } from 'ink'
 import type { Message } from '../../types.js'
 
@@ -8,6 +8,7 @@ interface Props {
   cols: number
   scrollOffset: number  // 0 = pinned at bottom; N = N msgs hidden from bottom
   streaming?: boolean
+  thinkingTick?: number
 }
 
 // ─── height estimation ───────────────────────────────────────────────────────
@@ -104,7 +105,33 @@ function UserMsg({ msg }: { msg: Message }) {
   )
 }
 
-function AssistantMsg({ msg }: { msg: Message }) {
+const THINKING_PHRASES = [
+  'oh wow, a question. let me pretend to care…',
+  'consulting the void…',
+  'making something up, just a sec…',
+  'definitely not hallucinating right now…',
+  'running 47 mental tabs…',
+  'staring into the abyss (it blinked)…',
+  'calculating your fate, no pressure…',
+  'doing the thinking you pay me for…',
+  'processing your questionable life choices…',
+  'summoning coherent thoughts, rarely works…',
+]
+const SPARKLE = ['✦', '✧', '✶', '✷', '✸', '✹']
+
+function AssistantMsg({ msg, thinkingTick }: { msg: Message; thinkingTick?: number }) {
+  if (!msg.content && thinkingTick !== undefined) {
+    const phrase = THINKING_PHRASES[Math.floor(thinkingTick / 62) % THINKING_PHRASES.length]
+    const icon = SPARKLE[thinkingTick % SPARKLE.length]
+    return (
+      <Box flexDirection="column" marginBottom={1}>
+        <Text bold color="green">miii</Text>
+        <Box paddingLeft={2}>
+          <Text color="yellow">{icon} </Text><Text color="gray" dimColor italic>{phrase}</Text>
+        </Box>
+      </Box>
+    )
+  }
   return (
     <Box flexDirection="column" marginBottom={1}>
       <Text bold color="green">miii</Text>
@@ -139,10 +166,10 @@ function SystemMsg({ msg }: { msg: Message }) {
   )
 }
 
-function MsgItem({ msg }: { msg: Message }) {
+function MsgItem({ msg, thinkingTick }: { msg: Message; thinkingTick?: number }) {
   switch (msg.role) {
     case 'user':      return <UserMsg msg={msg} />
-    case 'assistant': return <AssistantMsg msg={msg} />
+    case 'assistant': return <AssistantMsg msg={msg} thinkingTick={thinkingTick} />
     case 'tool':      return <ToolMsg msg={msg} />
     case 'system':    return <SystemMsg msg={msg} />
     default:          return null
@@ -165,7 +192,7 @@ function ScrollHint({ hiddenAbove, hiddenBelow }: { hiddenAbove: number; hiddenB
 
 // ─── main export ─────────────────────────────────────────────────────────────
 
-export function MessageList({ messages, rows, cols, scrollOffset, streaming }: Props) {
+export function MessageList({ messages, rows, cols, scrollOffset, streaming, thinkingTick }: Props) {
   const availRows = Math.max(rows - 2, 4)
   const { visible, hiddenAbove, hiddenBelow } = useMemo(
     () => computeSlice(messages, availRows, scrollOffset, cols),
@@ -182,7 +209,7 @@ export function MessageList({ messages, rows, cols, scrollOffset, streaming }: P
         </Box>
       )}
 
-      {visible.map(msg => <MsgItem key={msg.id} msg={msg} />)}
+      {visible.map(msg => <MsgItem key={msg.id} msg={msg} thinkingTick={thinkingTick} />)}
 
       {streaming && scrollOffset === 0 && (
         <Box paddingLeft={2}><Text color="gray" dimColor>▋</Text></Box>

package/src/tui/components/StatusBar.tsx

@@ -17,7 +17,7 @@ export function StatusBar({ model, provider, status, tick }: Props) {
 
   const statusNode =
     status === 'idle' ? <Text color="green">● <Text color="gray">ready</Text></Text>
-    : status === 'streaming' ? <Text color="yellow">{spinner} <Text color="gray">streaming</Text></Text>
+    : status === 'thinking' ? <Text color="yellow">{spinner} <Text color="gray">thinking</Text></Text>
     : <Text color="yellow">{spinner} <Text color="gray">tool</Text></Text>
 
   return (

package/src/tui/printer.ts

@@ -18,6 +18,15 @@ function indent(text: string, pad = '  '): string {
   return text.split('\n').map(l => pad + l).join('\n')
 }
 
+function stripMarkdown(s: string): string {
+  return s
+    .replace(/\*\*\*(.+?)\*\*\*/g, '$1')
+    .replace(/\*\*(.+?)\*\*/g, '$1')
+    .replace(/\*(.+?)\*/g, '$1')
+    .replace(/`([^`]+)`/g, '$1')
+    .replace(/^#{1,6} /gm, '')
+}
+
 function formatContent(text: string): string {
   const lines = text.split('\n')
   let inCode = false
@@ -30,7 +39,7 @@ function formatContent(text: string): string {
     } else if (inCode) {
       out.push('  ' + yellow(line || ' '))
     } else {
-      out.push('  ' + (line || ''))
+      out.push('  ' + stripMarkdown(line || ''))
     }
   }
   return out.join('\n')
@@ -81,7 +90,7 @@ export function welcome(provider: string, model: string, cwd: string): void {
     row('',                                            rcmd('/session',  'manage sessions')),
     blank(),
     row(`  ${gray(provider + '/' + model)}`,          `  ${bold(yellow('Tips'))}`),
-    row(`  ${gray(shortCwd)}`,                         rcmd('ctrl+c',   'stop streaming')),
+    row(`  ${gray(shortCwd)}`,                         rcmd('ctrl+c',   'stop thinking')),
     row('',                                            rcmd('ctrl+c x2','exit')),
     blank(),
     bottom,

package/src/types.ts

@@ -1,5 +1,5 @@
 export type Role = 'user' | 'assistant' | 'system' | 'tool'
-export type Status = 'idle' | 'streaming' | 'tool'
+export type Status = 'idle' | 'thinking' | 'tool'
 
 export interface Message {
   id: string