@pheem49/mint 1.5.0 → 1.5.2

package/src/CLI/chat_ui.js

@@ -12,9 +12,15 @@ const h = React.createElement;
 
 const SLASH_COMMANDS = [
     { cmd: '/help', desc: 'Show available commands' },
+    { cmd: '/image', desc: 'Attach an image from a file path' },
+    { cmd: '/paste', desc: 'Attach an image from the clipboard' },
+    { cmd: '/fast', desc: 'Toggle fast mode (hide thinking)' },
+    { cmd: '/learn', desc: 'Remember a markdown skill file' },
     { cmd: '/code', desc: 'Force workspace Code Mode' },
     { cmd: '/cd', desc: 'Change current working directory' },
     { cmd: '/models', desc: 'List or switch Gemini models' },
+    { cmd: '/memory', desc: 'List, search, clear, or export long-term memory' },
+    { cmd: '/memory skills', desc: 'Show learned skill files' },
     { cmd: '/config', desc: 'Show current configuration' },
     { cmd: '/copy', desc: 'Copy last response to clipboard' },
     { cmd: '/clear', desc: 'Clear conversation history' },
@@ -26,6 +32,127 @@ const SLASH_COMMANDS = [
     { cmd: '/exit', desc: 'Exit Mint' }
 ];
 
+const MAX_BLANK_LINES = 1;
+
+function compactPathLabel(value) {
+    const text = String(value || '').trim();
+    if (!text) return '';
+    return path.basename(text) || text;
+}
+
+function formatActivityStep(info = {}) {
+    if (!info || typeof info !== 'object') return null;
+
+    const { action, phase, target, message } = info;
+    const rawText = String(target || message || '').trim();
+    const kind = action || phase || 'activity';
+    if (!rawText) return null;
+
+    switch (kind) {
+        case 'list_files':
+            return { title: 'Explored', detail: `List ${rawText}` };
+        case 'find_path':
+            return { title: 'Explored', detail: `Find ${rawText}` };
+        case 'read_file':
+            return { title: 'Explored', detail: `Read ${compactPathLabel(rawText)}` };
+        case 'search_code':
+            return { title: 'Explored', detail: `Search ${rawText}` };
+        case 'web_search':
+            return { title: 'Searched', detail: rawText };
+        case 'warn':
+            return { title: '⚠ Notice', detail: rawText };
+        case 'run_shell':
+            return { title: 'Ran', detail: rawText };
+        case 'apply_patch':
+        case 'write_file':
+            return { title: 'Edited', detail: rawText };
+        case 'evaluator':
+            return { title: 'Checked', detail: rawText };
+        case 'reviewer_start':
+            return { title: 'Reviewing', detail: rawText };
+        case 'ask_user':
+            return { title: 'Ask User', detail: rawText };
+        default:
+            return { title: kind, detail: rawText };
+    }
+}
+
+function stripInlineMarkdown(value) {
+    return String(value || '')
+        .replace(/\*\*([^*]+)\*\*/g, '$1')
+        .replace(/\*([^*\n]+)\*/g, '$1')
+        .replace(/__([^_]+)__/g, '$1')
+        .replace(/`([^`\n]+)`/g, '$1');
+}
+
+function cleanDisplayText(text, role = 'assistant') {
+    const raw = String(text || '').replace(/\r\n/g, '\n').trim();
+    if (!raw) return '';
+
+    const shouldPolishMarkdown = role === 'assistant' || role === 'system';
+    const lines = raw.split('\n');
+    const cleaned = [];
+    let inCodeBlock = false;
+    let blankCount = 0;
+
+    for (const sourceLine of lines) {
+        let line = sourceLine.replace(/\s+$/g, '');
+        const fence = line.match(/^\s*```(.*)$/);
+
+        if (fence) {
+            inCodeBlock = !inCodeBlock;
+            const label = fence[1] ? `code: ${fence[1].trim()}` : 'code';
+            line = inCodeBlock ? label : '';
+        } else if (inCodeBlock) {
+            line = line ? `  ${line}` : '';
+        } else if (shouldPolishMarkdown) {
+            const heading = line.match(/^\s{0,3}#{1,6}\s+(.+)$/);
+            const bullet = line.match(/^(\s*)[-*]\s+(.+)$/);
+            const numbered = line.match(/^(\s*)\d+[.)]\s+(.+)$/);
+
+            if (heading) {
+                if (cleaned.length > 0 && cleaned[cleaned.length - 1] !== '') cleaned.push('');
+                line = stripInlineMarkdown(heading[1]).trim();
+            } else if (bullet) {
+                line = `${bullet[1]}• ${stripInlineMarkdown(bullet[2]).trim()}`;
+            } else if (numbered) {
+                line = `${numbered[1]}${stripInlineMarkdown(line).trim()}`;
+            } else {
+                line = stripInlineMarkdown(line);
+            }
+        }
+
+        if (!line.trim()) {
+            blankCount++;
+            if (blankCount <= MAX_BLANK_LINES && cleaned.length > 0) cleaned.push('');
+            continue;
+        }
+
+        blankCount = 0;
+        cleaned.push(line);
+    }
+
+    while (cleaned[0] === '') cleaned.shift();
+    while (cleaned[cleaned.length - 1] === '') cleaned.pop();
+    return cleaned.join('\n');
+}
+
+function formatDuration(totalSeconds) {
+    const seconds = Math.max(0, Math.floor(Number(totalSeconds) || 0));
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+
+    if (minutes <= 0) return `${remainingSeconds}s`;
+    return `${minutes}m ${remainingSeconds}s`;
+}
+
+function shouldAppendMessage(role, text) {
+    if (role === 'assistant' || role === 'system') {
+        return String(text || '').trim().length > 0;
+    }
+    return true;
+}
+
 /**
  * We wrap everything in an async function to load ESM modules
  */
@@ -35,29 +162,109 @@ async function createChatUI(options) {
     const TextInput = (await import('ink-text-input')).default;
     const { useState, useImperativeHandle, forwardRef, createRef, useEffect, useMemo } = React;
 
-    const App = forwardRef(({ onSubmit, onExit, initialHistory = [] }, ref) => {
+    const App = forwardRef(({ onSubmit, onExit, onPasteImage, initialHistory = [] }, ref) => {
         const config = readConfig();
         const { exit } = useApp();
         const [input, setInput] = useState('');
         const [history, setHistory] = useState(initialHistory);
+        const [liveAssistant, setLiveAssistant] = useState(null);
         const [thinking, setThinking] = useState(false);
-        const [mode, setMode] = useState('Chat');
+        const [workingSeconds, setWorkingSeconds] = useState(0);
+        const [fastMode, setFastMode] = useState(false);
+        const [mode, setMode] = useState('Agent');
         const [model, setModel] = useState('');
         const [workspace, setWorkspace] = useState(process.cwd());
+        const [pendingImages, setPendingImages] = useState([]);
+        const [pendingImagePrefix, setPendingImagePrefix] = useState('');
+        const [pendingPaste, setPendingPaste] = useState(null);
+        const [pendingPastePrefix, setPendingPastePrefix] = useState('');
+        const [pendingApproval, setPendingApproval] = useState(null);
+        const [approvalChoice, setApprovalChoice] = useState('approve');
 
         // Suggestions State
         const [selectedIndex, setSelectedIndex] = useState(0);
         const inputRef = React.useRef(input);
+        const pendingImagesRef = React.useRef(pendingImages);
+        const pendingImagePrefixRef = React.useRef(pendingImagePrefix);
+        const pendingPasteRef = React.useRef(pendingPaste);
+        const pendingPastePrefixRef = React.useRef(pendingPastePrefix);
+        const liveAssistantRef = React.useRef(liveAssistant);
+        const thinkingStartedAtRef = React.useRef(null);
+        const fastModeRef = React.useRef(fastMode);
+        const suppressPasteCharRef = React.useRef(false);
         const selectedIndexRef = React.useRef(selectedIndex);
+        const pendingApprovalRef = React.useRef(null);
+        const approvalChoiceRef = React.useRef('approve');
+
+        const removePasteArtifact = (value) => {
+            const text = String(value || '');
+            return text.replace(/[vV]$/, '');
+        };
+
+        const normalizeInputText = (value) => {
+            return String(value || '').replace(/\s*[\r\n]+\s*/g, ' ');
+        };
+
+        const shouldStoreAsPastedContent = (value) => {
+            const text = String(value || '');
+            return text.length > 500 || /[\r\n]/.test(text);
+        };
         
         useEffect(() => {
             inputRef.current = input;
         }, [input]);
 
+        useEffect(() => {
+            pendingImagesRef.current = pendingImages;
+        }, [pendingImages]);
+
+        useEffect(() => {
+            pendingImagePrefixRef.current = pendingImagePrefix;
+        }, [pendingImagePrefix]);
+
+        useEffect(() => {
+            pendingPasteRef.current = pendingPaste;
+        }, [pendingPaste]);
+
+        useEffect(() => {
+            pendingPastePrefixRef.current = pendingPastePrefix;
+        }, [pendingPastePrefix]);
+
+        useEffect(() => {
+            liveAssistantRef.current = liveAssistant;
+        }, [liveAssistant]);
+
+        useEffect(() => {
+            if (!thinking) return undefined;
+
+            const timer = setInterval(() => {
+                if (!thinkingStartedAtRef.current) return;
+                setWorkingSeconds(Math.floor((Date.now() - thinkingStartedAtRef.current) / 1000));
+            }, 1000);
+
+            return () => clearInterval(timer);
+        }, [thinking]);
+
+        useEffect(() => {
+            fastModeRef.current = fastMode;
+        }, [fastMode]);
+
         useEffect(() => {
             selectedIndexRef.current = selectedIndex;
         }, [selectedIndex]);
 
+        useEffect(() => {
+            pendingApprovalRef.current = pendingApproval;
+            if (pendingApproval) {
+                approvalChoiceRef.current = 'approve';
+                setApprovalChoice('approve');
+            }
+        }, [pendingApproval]);
+
+        useEffect(() => {
+            approvalChoiceRef.current = approvalChoice;
+        }, [approvalChoice]);
+
         const showSuggestions = input.startsWith('/') && !input.includes(' ');
         const suggestions = useMemo(() => {
             if (!showSuggestions) return [];
@@ -75,17 +282,91 @@ async function createChatUI(options) {
         // Export methods to the outside world via ref
         useImperativeHandle(ref, () => ({
             appendMessage: (role, text, metadata = {}) => {
+                if (!shouldAppendMessage(role, text)) return;
                 setHistory(prev => [...prev, { role, text, time: new Date(), ...metadata }]);
                 if (metadata.providerInfo) {
                     const { provider, model } = metadata.providerInfo;
                     setModel(model ? `${provider} • ${model}` : provider);
                 }
             },
-            setThinking: (val) => setThinking(val),
+            beginAssistantStream: (metadata = {}) => {
+                const msg = { role: 'assistant', text: '', time: new Date(), ...metadata };
+                liveAssistantRef.current = msg;
+                setLiveAssistant(msg);
+                if (metadata.providerInfo) {
+                    const { provider, model } = metadata.providerInfo;
+                    setModel(model ? `${provider} • ${model}` : provider);
+                }
+            },
+            appendAssistantStreamChunk: (chunk) => {
+                if (!String(chunk || '').trim()) return;
+                const current = liveAssistantRef.current || { role: 'assistant', text: '', time: new Date() };
+                const next = { ...current, text: `${current.text || ''}${chunk}` };
+                liveAssistantRef.current = next;
+                setLiveAssistant(next);
+            },
+            finalizeAssistantStream: () => {
+                const current = liveAssistantRef.current;
+                liveAssistantRef.current = null;
+                setLiveAssistant(null);
+                if (current && String(current.text || '').trim()) {
+                    setHistory(prev => [...prev, current]);
+                }
+            },
+            setThinking: (val, seconds = 0) => {
+                if (val) {
+                    const elapsed = Number.isFinite(seconds) ? Math.max(0, seconds) : 0;
+                    if (!thinkingStartedAtRef.current) {
+                        thinkingStartedAtRef.current = Date.now() - (elapsed * 1000);
+                    }
+                    setWorkingSeconds(Math.floor((Date.now() - thinkingStartedAtRef.current) / 1000));
+                    setThinking(true);
+                    return;
+                }
+
+                thinkingStartedAtRef.current = null;
+                setWorkingSeconds(0);
+                setThinking(false);
+            },
             setMode: (val) => setMode(val),
+            setFastMode: (val) => {
+                const next = Boolean(val);
+                fastModeRef.current = next;
+                setFastMode(next);
+                return next;
+            },
+            toggleFastMode: () => {
+                const next = !fastModeRef.current;
+                fastModeRef.current = next;
+                setFastMode(next);
+                return next;
+            },
+            getFastMode: () => fastModeRef.current,
+            setInputText: (val) => setInput(val || ''),
+            setPendingPasteText: (text) => {
+                const normalized = normalizeInputText(text);
+                setPendingPaste({ text: normalized, label: `[Pasted Content ${normalized.length} chars]` });
+                setPendingPastePrefix('');
+                setInput('');
+            },
             updateStatusModel: (val) => setModel(val),
             updateWorkspace: (val) => setWorkspace(val),
+            attachImage: (image) => {
+                setPendingImages(prev => {
+                    if (prev.length === 0) {
+                        const prefix = normalizeInputText(inputRef.current).trim();
+                        setPendingImagePrefix(prefix);
+                        pendingImagePrefixRef.current = prefix;
+                        setInput('');
+                    }
+                    return [...prev, image];
+                });
+            },
             appendCodeStep: (info) => {
+                if (fastModeRef.current) {
+                    return;
+                }
+
                 let text = '';
                 let label = 'System';
                 let labelColor = 'blueBright';
@@ -95,7 +376,13 @@ async function createChatUI(options) {
                     text = info;
                 } else {
                     const { action, phase, target, message, thought } = info;
+                    if (action === 'memory_context' && process.env.MINT_SHOW_MEMORY_TRACE !== '1') {
+                        return;
+                    }
                     if (thought) {
+                        if (process.env.MINT_SHOW_THINKING_TRACE !== '1') {
+                            return;
+                        }
                         text = thought;
                         label = 'Thinking';
                         labelColor = 'gray';
@@ -103,6 +390,25 @@ async function createChatUI(options) {
                     } else if (action === 'thinking' || phase === 'thinking') {
                         return;
                     } else {
+                        const activity = formatActivityStep(info);
+                        if (activity) {
+                            const fullText = `[${activity.title}] ${activity.detail}`;
+                            if (fullText === lastSystemMessage.current) return;
+                            lastSystemMessage.current = fullText;
+
+                            setHistory(prev => [...prev, {
+                                role: 'system',
+                                label: activity.title,
+                                labelColor: 'blueBright',
+                                text: activity.detail,
+                                isActivity: true,
+                                activityTitle: activity.title,
+                                activityDetail: activity.detail,
+                                time: new Date()
+                            }]);
+                            return;
+                        }
+
                         label = action || phase || 'Action';
                         text = target || message || '';
                         if (!text) return;
@@ -127,17 +433,131 @@ async function createChatUI(options) {
                     isThought,
                     time: new Date() 
                 }]);
+            },
+            requestApproval: (request = {}) => {
+                return new Promise((resolve) => {
+                    const approval = {
+                        type: request.type || 'action',
+                        label: request.label || 'Requested action',
+                        preview: request.preview || '',
+                        resolve
+                    };
+                    pendingApprovalRef.current = approval;
+                    setPendingApproval(approval);
+                });
             }
         }));
 
         // Handle exiting and keyboard navigation
         useInput((inputStr, key) => {
+            const approval = pendingApprovalRef.current;
+            if (approval) {
+                const resolveApproval = (approved) => {
+                    pendingApprovalRef.current = null;
+                    setPendingApproval(null);
+                    setHistory(prev => [...prev, {
+                        role: 'system',
+                        label: 'Approval',
+                        labelColor: approved ? 'greenBright' : 'redBright',
+                        text: `${approved ? 'Approved' : 'Denied'}: ${approval.label}`,
+                        time: new Date()
+                    }]);
+                    approval.resolve(approved);
+                };
+
+                if (key.leftArrow || key.rightArrow || key.tab) {
+                    const next = approvalChoiceRef.current === 'approve' ? 'deny' : 'approve';
+                    approvalChoiceRef.current = next;
+                    setApprovalChoice(next);
+                    return;
+                }
+
+                const answer = String(inputStr || '').toLowerCase();
+                if (key.return) {
+                    resolveApproval(approvalChoiceRef.current === 'approve');
+                    return;
+                }
+                if (answer === 'y') {
+                    resolveApproval(true);
+                    return;
+                }
+                if (answer === 'n' || key.escape || (key.ctrl && inputStr === 'c')) {
+                    resolveApproval(false);
+                    return;
+                }
+                return;
+            }
+
+            if (key.escape && pendingImagesRef.current.length > 0) {
+                setPendingImages([]);
+                pendingImagesRef.current = [];
+                setPendingImagePrefix('');
+                pendingImagePrefixRef.current = '';
+                return;
+            }
+
+            if (key.escape && pendingPasteRef.current) {
+                setPendingPaste(null);
+                pendingPasteRef.current = null;
+                setPendingPastePrefix('');
+                pendingPastePrefixRef.current = '';
+                return;
+            }
+
+            if (key.ctrl && key.backspace && pendingImagesRef.current.length > 0) {
+                setPendingImages(prev => prev.slice(0, -1));
+                pendingImagesRef.current = pendingImagesRef.current.slice(0, -1);
+                if (pendingImagesRef.current.length === 0) {
+                    setPendingImagePrefix('');
+                    pendingImagePrefixRef.current = '';
+                }
+                return;
+            }
+
             if (key.escape || (key.ctrl && inputStr === 'c')) {
-                onExit();
                 exit();
+                onExit();
+                return;
             }
 
             const currentInput = inputRef.current;
+            if (key.ctrl && inputStr === 'v') {
+                suppressPasteCharRef.current = true;
+                const inputBeforePaste = currentInput;
+                setInput(prev => removePasteArtifact(prev));
+                if (typeof onPasteImage === 'function') {
+                    Promise.resolve(onPasteImage())
+                        .then((image) => {
+                            if (image) {
+                                setPendingImages(prev => {
+                                    if (prev.length === 0) {
+                                        const prefix = normalizeInputText(inputBeforePaste).trim();
+                                        setPendingImagePrefix(prefix);
+                                        pendingImagePrefixRef.current = prefix;
+                                    }
+                                    return [...prev, image];
+                                });
+                            }
+                        })
+                        .catch((err) => {
+                            setHistory(prev => [...prev, {
+                                role: 'error',
+                                text: err && err.message ? err.message : String(err || 'Unknown error'),
+                                time: new Date()
+                            }]);
+                        })
+                        .finally(() => {
+                            setInput(prev => {
+                                if (prev === `${inputBeforePaste}v` || prev === `${inputBeforePaste}V`) {
+                                    return inputBeforePaste;
+                                }
+                                return removePasteArtifact(prev);
+                            });
+                        });
+                }
+                return;
+            }
+
             const currentShowSuggestions = currentInput.startsWith('/') && !currentInput.includes(' ');
 
             if (currentShowSuggestions) {
@@ -160,10 +580,20 @@ async function createChatUI(options) {
         });
 
         const handleSubmit = (value) => {
-            const text = value.trim();
-            if (!text) return;
-
-            if (showSuggestions && suggestions.length > 0) {
+            const text = normalizeInputText(value).trim();
+            const images = pendingImagesRef.current;
+            const imagePrefix = normalizeInputText(pendingImagePrefixRef.current).trim();
+            const imageLabels = images.map((_, index) => `[Image #${index + 1}]`).join(' ');
+            const pasted = pendingPasteRef.current;
+            const pastePrefix = normalizeInputText(pendingPastePrefixRef.current).trim();
+            const submittedText = pasted
+                ? [pastePrefix, pasted.text, text].filter(Boolean).join('\n\n')
+                : images.length > 0
+                    ? [imagePrefix, imageLabels, text].filter(Boolean).join('\n\n')
+                    : text;
+            if (!submittedText && images.length === 0) return;
+
+            if (!pasted && images.length === 0 && showSuggestions && suggestions.length > 0) {
                 const picked = suggestions[selectedIndex];
                 if (picked && text !== picked.cmd) {
                     setInput(picked.cmd + ' ');
@@ -172,46 +602,97 @@ async function createChatUI(options) {
             }
 
             setInput('');
-            onSubmit(text);
+            setPendingImages([]);
+            setPendingImagePrefix('');
+            setPendingPaste(null);
+            setPendingPastePrefix('');
+            pendingImagesRef.current = [];
+            pendingImagePrefixRef.current = '';
+            pendingPasteRef.current = null;
+            pendingPastePrefixRef.current = '';
+            onSubmit(submittedText, { images, pasted });
         };
 
-        return h(Box, { flexDirection: 'column', paddingX: 1, width: '100%' },
-            // Static History: Messages
-            h(Static, { items: history }, (msg, index) => {
-                if (msg.isThought) {
-                    return h(Box, { key: index, flexDirection: 'row', marginBottom: 0, paddingLeft: 2 },
-                        h(Text, { color: 'gray', dimColor: true }, `Thinking: ${msg.text}`)
-                    );
-                }
+        const handleInputChange = (value) => {
+            if (shouldStoreAsPastedContent(value)) {
+                const normalized = normalizeInputText(value);
+                const previous = normalizeInputText(inputRef.current).trim();
+                setPendingPaste({ text: normalized, label: `[Pasted Content ${normalized.length} chars]` });
+                setPendingPastePrefix(previous);
+                setInput('');
+                return;
+            }
 
-                let name = 'Mint';
-                let nameColor = 'greenBright';
-                
-                if (msg.role === 'user') {
-                    name = 'You';
-                    nameColor = 'cyanBright';
-                } else if (msg.role === 'error') {
-                    name = 'Error';
-                    nameColor = 'redBright';
-                } else if (msg.role === 'system') {
-                    name = msg.label || 'System';
-                    nameColor = msg.labelColor || 'blueBright';
+            const normalizedValue = normalizeInputText(value);
+            if (suppressPasteCharRef.current) {
+                suppressPasteCharRef.current = false;
+                const previous = inputRef.current;
+                if (normalizedValue === `${previous}v` || normalizedValue === `${previous}V`) {
+                    setInput(previous);
+                    return;
+                }
+                if (normalizedValue.length > previous.length && /^[vV]$/.test(normalizedValue.slice(previous.length))) {
+                    setInput(previous);
+                    return;
                 }
+            }
+            setInput(normalizedValue);
+        };
+
+        const renderMessage = (msg, index, keyPrefix = 'msg') => {
+            if (msg.isThought) {
+                return h(Box, { key: `${keyPrefix}-${index}`, flexDirection: 'row', marginBottom: 0, paddingLeft: 2 },
+                    h(Text, { color: 'gray', dimColor: true }, `Thinking: ${msg.text}`)
+                );
+            }
 
-                return h(Box, { key: index, flexDirection: 'column', marginBottom: 0 },
+            if (msg.isActivity) {
+                return h(Box, { key: `${keyPrefix}-${index}`, flexDirection: 'column', marginBottom: 0 },
                     h(Box, null,
-                        h(Text, { bold: true, color: nameColor }, name),
-                        h(Text, { color: 'gray' }, ` ${msg.time instanceof Date ? msg.time.toLocaleTimeString() : ''}`)
+                        h(Text, { color: 'greenBright' }, '• '),
+                        h(Text, { bold: true, color: msg.labelColor || 'blueBright' }, msg.activityTitle || msg.label || 'Activity')
                     ),
                     h(Box, { paddingLeft: 2, marginBottom: 1 },
-                        h(Text, null, msg.text)
+                        h(Text, { color: 'gray' }, '└ '),
+                        h(Text, { color: 'cyanBright', wrap: 'wrap' }, msg.activityDetail || msg.text)
                     )
                 );
-            }),
+            }
+
+            let name = 'Mint';
+            let nameColor = 'greenBright';
+
+            if (msg.role === 'user') {
+                name = 'You';
+                nameColor = 'cyanBright';
+            } else if (msg.role === 'error') {
+                name = 'Error';
+                nameColor = 'redBright';
+            } else if (msg.role === 'system') {
+                name = msg.label || 'System';
+                nameColor = msg.labelColor || 'blueBright';
+            }
+
+            return h(Box, { key: `${keyPrefix}-${index}`, flexDirection: 'column', marginBottom: 0 },
+                h(Box, null,
+                    h(Text, { bold: true, color: nameColor }, name),
+                    h(Text, { color: 'gray' }, ` ${msg.time instanceof Date ? msg.time.toLocaleTimeString() : ''}`)
+                ),
+                h(Box, { paddingLeft: 2, marginBottom: 1 },
+                    h(Text, { wrap: 'wrap' }, cleanDisplayText(msg.text, msg.role))
+                )
+            );
+        };
+
+        return h(Box, { flexDirection: 'column', paddingX: 1, width: '100%' },
+            // Static History: Messages
+            h(Static, { items: history }, (msg, index) => renderMessage(msg, index, 'history')),
+            liveAssistant && renderMessage(liveAssistant, 'live', 'live'),
 
             // Floating (Persistent) UI part
             h(Box, { flexDirection: 'column' },
-                thinking && h(Box, { marginBottom: 1 },
+                thinking && h(Box, { flexDirection: 'column', marginBottom: 1 },
+                    h(Text, { color: 'gray', dimColor: true }, `─ Working for ${formatDuration(workingSeconds)} ─────────────────────────────────────────────────────────`),
                     h(Text, { color: 'yellow' }, '● Mint is thinking...')
                 ),
 
@@ -232,21 +713,64 @@ async function createChatUI(options) {
                     ))
                 ),
 
+                pendingApproval && h(Box, {
+                    flexDirection: 'column',
+                    borderStyle: 'single',
+                    borderColor: 'yellow',
+                    paddingX: 1,
+                    marginBottom: 1
+                },
+                    h(Box, null,
+                        h(Text, { bold: true, color: 'yellow' }, 'Approval '),
+                        h(Text, { color: 'gray' }, `[${pendingApproval.type}] `),
+                        h(Text, { color: 'white' }, pendingApproval.label)
+                    ),
+                    pendingApproval.preview && pendingApproval.preview !== pendingApproval.label && h(Box, null,
+                        h(Text, { color: 'gray' }, pendingApproval.preview)
+                    ),
+                    h(Box, null,
+                        h(Text, {
+                            color: approvalChoice === 'approve' ? 'black' : 'greenBright',
+                            backgroundColor: approvalChoice === 'approve' ? 'greenBright' : undefined,
+                            bold: true
+                        }, ' Approve '),
+                        h(Text, { color: 'gray' }, ' '),
+                        h(Text, {
+                            color: approvalChoice === 'deny' ? 'white' : 'redBright',
+                            backgroundColor: approvalChoice === 'deny' ? 'redBright' : undefined,
+                            bold: true
+                        }, ' Deny '),
+                        h(Text, { color: 'gray' }, '  Tab/←/→ Enter')
+                    )
+                ),
+
                 // Compact Input Area
-                h(Box, { borderStyle: 'round', borderColor: 'greenBright', paddingX: 1, flexDirection: 'row' },
-                    h(Text, { bold: true, color: 'greenBright' }, '› '),
-                    h(TextInput, { 
-                        value: input, 
-                        onChange: setInput, 
-                        onSubmit: handleSubmit,
-                        placeholder: 'Ask anything...'
-                    })
+                h(Box, { borderStyle: 'round', borderColor: pendingApproval ? 'gray' : 'greenBright', paddingX: 1, flexDirection: 'column' },
+                    pendingImages.length > 0 && h(Box, null,
+                        pendingImagePrefix && h(Text, { color: 'cyanBright' }, '[Text before] '),
+                        h(Text, { color: 'greenBright' }, pendingImages.map((_, index) => `[Image #${index + 1}]`).join(' ') + ' '),
+                        h(Text, { color: 'gray' }, 'Enter to send, Ctrl+Backspace remove, Esc clear')
+                    ),
+                    pendingPaste && h(Box, null,
+                        pendingPastePrefix && h(Text, { color: 'cyanBright' }, '[Text before] '),
+                        h(Text, { color: 'yellowBright' }, pendingPaste.label),
+                        h(Text, { color: 'gray' }, ' Enter to send, Esc clear')
+                    ),
+                    h(Box, { flexDirection: 'row' },
+                        h(Text, { bold: true, color: 'greenBright' }, '› '),
+                        h(TextInput, {
+                            value: input,
+                            onChange: pendingApproval ? () => {} : handleInputChange,
+                            onSubmit: pendingApproval ? () => {} : handleSubmit,
+                            placeholder: pendingApproval ? 'Approval pending...' : 'Ask anything...'
+                        })
+                    )
                 ),
 
                 // Status Bar
                 h(Box, { justifyContent: 'space-between' },
                     h(Box, null,
-                        h(Text, { color: 'cyan' }, `[${mode}] `),
+                        h(Text, { color: 'cyan' }, `[${fastMode ? 'Fast' : mode}] `),
                         h(Text, { color: 'magentaBright' }, (model || config.geminiModel || 'gemini').slice(0, 46))
                     ),
                     h(Box, null,
@@ -265,30 +789,37 @@ async function createChatUI(options) {
     console.log(`\x1b[90mType naturally to chat. Esc to exit.\x1b[0m\n`);
 
     const ref = createRef();
-    render(h(App, { ref, ...options }));
+    render(h(App, { ref, ...options }), { exitOnCtrlC: false });
 
     return {
         appendMessage: (role, text, metadata) => ref.current?.appendMessage(role, text, metadata),
-        setThinking: (val) => ref.current?.setThinking(val),
+        setThinking: (val, seconds) => ref.current?.setThinking(val, seconds),
         setMode: (val) => ref.current?.setMode(val),
+        setFastMode: (val) => ref.current?.setFastMode(val),
+        toggleFastMode: () => ref.current?.toggleFastMode(),
+        getFastMode: () => ref.current?.getFastMode(),
+        setInputText: (val) => ref.current?.setInputText(val),
+        setPendingPasteText: (text) => ref.current?.setPendingPasteText(text),
         updateStatusModel: (val) => ref.current?.updateStatusModel(val),
         updateWorkspace: (val) => ref.current?.updateWorkspace(val),
+        attachImage: (image) => ref.current?.attachImage(image),
         appendCodeStep: (info) => ref.current?.appendCodeStep(info),
-        streamMessage: () => {
-            let fullText = '';
+        streamMessage: (metadata = {}) => {
+            ref.current?.beginAssistantStream(metadata);
             return {
                 appendChunk: (chunk) => {
-                    fullText += chunk;
+                    if (!String(chunk || '').trim()) return;
+                    ref.current?.appendAssistantStreamChunk(chunk);
                 },
                 finalize: () => {
-                    ref.current?.appendMessage('assistant', fullText);
+                    ref.current?.finalizeAssistantStream();
                 }
             };
         },
         copyLastResponse: () => false,
-        requestApproval: () => Promise.resolve(true),
+        requestApproval: (request) => ref.current?.requestApproval(request) || Promise.resolve(false),
         askUser: () => Promise.resolve('')
     };
 }
 
-module.exports = { createChatUI };
+module.exports = { createChatUI, _helpers: { cleanDisplayText, stripInlineMarkdown, compactPathLabel, formatActivityStep, formatDuration, shouldAppendMessage } };