@pheem49/mint 1.5.1 → 1.5.3

package/src/CLI/chat_ui.js

@@ -32,6 +32,245 @@ 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 'plan':
+            return { title: 'Plan', 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 splitDiffStatSegments(value) {
+    const text = String(value || '');
+    const match = text.match(/\(\+(\d+)\s+-(\d+)\)/);
+    if (!match) return [{ text, color: 'cyanBright' }];
+
+    return [
+        { text: text.slice(0, match.index), color: 'cyanBright' },
+        { text: '(', color: 'gray' },
+        { text: `+${match[1]}`, color: 'greenBright' },
+        { text: ' ', color: 'gray' },
+        { text: `-${match[2]}`, color: 'redBright' },
+        { text: ')', color: 'gray' },
+        { text: text.slice(match.index + match[0].length), color: 'cyanBright' }
+    ].filter(part => part.text);
+}
+
+const APPROVAL_CHOICES = ['approve', 'approve_session', 'deny'];
+const SUGGESTION_WINDOW_SIZE = 5;
+
+function getNextApprovalChoice(current, direction = 1) {
+    const choices = APPROVAL_CHOICES;
+    const index = choices.indexOf(current);
+    const start = index === -1 ? 0 : index;
+    return choices[(start + direction + choices.length) % choices.length];
+}
+
+function getVisibleSuggestions(suggestions, selectedIndex, limit = SUGGESTION_WINDOW_SIZE) {
+    const items = Array.isArray(suggestions) ? suggestions : [];
+    const safeLimit = Math.max(1, Number(limit) || SUGGESTION_WINDOW_SIZE);
+    const safeSelected = Math.min(Math.max(0, Number(selectedIndex) || 0), Math.max(0, items.length - 1));
+    const start = Math.min(
+        Math.max(0, safeSelected - safeLimit + 1),
+        Math.max(0, items.length - safeLimit)
+    );
+    const visible = items.slice(start, start + safeLimit);
+
+    return {
+        start,
+        visible,
+        current: items.length > 0 ? safeSelected + 1 : 0,
+        total: items.length
+    };
+}
+
+function parseUnifiedDiffPreview(preview) {
+    const lines = String(preview || '').replace(/\r\n/g, '\n').split('\n');
+    const files = [];
+    let current = null;
+
+    for (const line of lines) {
+        if (line.startsWith('--- a/')) {
+            current = {
+                path: line.slice('--- a/'.length),
+                additions: 0,
+                deletions: 0,
+                lines: []
+            };
+            files.push(current);
+            continue;
+        }
+
+        if (!current) continue;
+        if (line.startsWith('+++ b/')) {
+            current.path = line.slice('+++ b/'.length) || current.path;
+            continue;
+        }
+
+        if (line.startsWith('@@')) {
+            current.lines.push({ type: 'hunk', text: line });
+            continue;
+        }
+
+        if (line.startsWith('+')) {
+            current.additions += 1;
+            current.lines.push({ type: 'add', text: line });
+            continue;
+        }
+
+        if (line.startsWith('-')) {
+            current.deletions += 1;
+            current.lines.push({ type: 'delete', text: line });
+            continue;
+        }
+
+        current.lines.push({ type: 'context', text: line });
+    }
+
+    return files.filter(file => file.lines.length > 0 || file.additions > 0 || file.deletions > 0);
+}
+
+function isUnifiedDiffPreview(preview) {
+    return parseUnifiedDiffPreview(preview).length > 0;
+}
+
+function getDiffLineStyle(line = {}) {
+    if (line.type === 'add') return { color: 'greenBright' };
+    if (line.type === 'delete') return { color: 'redBright' };
+    if (line.type === 'hunk') return { color: 'cyanBright' };
+    return { color: 'gray', dimColor: true };
+}
+
+function shouldAppendMessage(role, text) {
+    if (role === 'assistant' || role === 'system') {
+        return String(text || '').trim().length > 0;
+    }
+    return true;
+}
+
+function appendInlineImageToken(value, imageIndex) {
+    const token = `[Image #${imageIndex}]`;
+    const text = String(value || '').replace(/\s*[\r\n]+\s*/g, ' ').trimEnd();
+    return text ? `${text} ${token}` : token;
+}
+
+function removeImageToken(value, imageIndex) {
+    const tokenPattern = new RegExp(`\\s*\\[Image #${imageIndex}\\]`, 'g');
+    return String(value || '').replace(tokenPattern, '').replace(/\s{2,}/g, ' ').trim();
+}
+
+function removeAllImageTokens(value) {
+    return String(value || '').replace(/\s*\[Image #\d+\]/g, '').replace(/\s{2,}/g, ' ').trim();
+}
+
 /**
  * We wrap everything in an async function to load ESM modules
  */
@@ -48,30 +287,34 @@ async function createChatUI(options) {
         const [history, setHistory] = useState(initialHistory);
         const [liveAssistant, setLiveAssistant] = useState(null);
         const [thinking, setThinking] = useState(false);
+        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');
+        const [approvalSessionAutoApprove, setApprovalSessionAutoApprove] = useState(false);
+        const [inputResetKey, setInputResetKey] = useState(0);
 
         // 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 suppressPasteBurstRef = React.useRef(false);
         const selectedIndexRef = React.useRef(selectedIndex);
         const pendingApprovalRef = React.useRef(null);
         const approvalChoiceRef = React.useRef('approve');
+        const approvalSessionAutoApproveRef = React.useRef(false);
 
         const removePasteArtifact = (value) => {
             const text = String(value || '');
@@ -86,6 +329,10 @@ async function createChatUI(options) {
             const text = String(value || '');
             return text.length > 500 || /[\r\n]/.test(text);
         };
+
+        const resetInputCursorToEnd = () => {
+            setInputResetKey(key => key + 1);
+        };
         
         useEffect(() => {
             inputRef.current = input;
@@ -95,10 +342,6 @@ async function createChatUI(options) {
             pendingImagesRef.current = pendingImages;
         }, [pendingImages]);
 
-        useEffect(() => {
-            pendingImagePrefixRef.current = pendingImagePrefix;
-        }, [pendingImagePrefix]);
-
         useEffect(() => {
             pendingPasteRef.current = pendingPaste;
         }, [pendingPaste]);
@@ -111,6 +354,17 @@ async function createChatUI(options) {
             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]);
@@ -131,12 +385,20 @@ async function createChatUI(options) {
             approvalChoiceRef.current = approvalChoice;
         }, [approvalChoice]);
 
+        useEffect(() => {
+            approvalSessionAutoApproveRef.current = approvalSessionAutoApprove;
+        }, [approvalSessionAutoApprove]);
+
         const showSuggestions = input.startsWith('/') && !input.includes(' ');
         const suggestions = useMemo(() => {
             if (!showSuggestions) return [];
             const query = input.toLowerCase();
             return SLASH_COMMANDS.filter(s => s.cmd.startsWith(query));
         }, [input, showSuggestions]);
+        const visibleSuggestions = useMemo(
+            () => getVisibleSuggestions(suggestions, selectedIndex),
+            [suggestions, selectedIndex]
+        );
 
         // Reset index when suggestions change
         useEffect(() => {
@@ -148,6 +410,7 @@ 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;
@@ -164,6 +427,7 @@ async function createChatUI(options) {
                 }
             },
             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;
@@ -177,7 +441,21 @@ async function createChatUI(options) {
                     setHistory(prev => [...prev, current]);
                 }
             },
-            setThinking: (val) => setThinking(val),
+            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);
@@ -192,7 +470,12 @@ async function createChatUI(options) {
                 return next;
             },
             getFastMode: () => fastModeRef.current,
-            setInputText: (val) => setInput(val || ''),
+            setInputText: (val) => {
+                const next = val || '';
+                inputRef.current = next;
+                setInput(next);
+                resetInputCursorToEnd();
+            },
             setPendingPasteText: (text) => {
                 const normalized = normalizeInputText(text);
                 setPendingPaste({ text: normalized, label: `[Pasted Content ${normalized.length} chars]` });
@@ -203,12 +486,13 @@ async function createChatUI(options) {
             updateWorkspace: (val) => setWorkspace(val),
             attachImage: (image) => {
                 setPendingImages(prev => {
-                    if (prev.length === 0) {
-                        const prefix = normalizeInputText(inputRef.current).trim();
-                        setPendingImagePrefix(prefix);
-                        pendingImagePrefixRef.current = prefix;
-                        setInput('');
-                    }
+                    const imageIndex = prev.length + 1;
+                    setInput(current => {
+                        const next = appendInlineImageToken(current, imageIndex);
+                        inputRef.current = next;
+                        resetInputCursorToEnd();
+                        return next;
+                    });
                     return [...prev, image];
                 });
             },
@@ -229,14 +513,39 @@ async function createChatUI(options) {
                     if (action === 'memory_context' && process.env.MINT_SHOW_MEMORY_TRACE !== '1') {
                         return;
                     }
+                    if (phase === 'tool_call') {
+                        return;
+                    }
                     if (thought) {
+                        if (process.env.MINT_HIDE_AGENT_NOTES === '1') {
+                            return;
+                        }
                         text = thought;
-                        label = 'Thinking';
+                        label = 'Working';
                         labelColor = 'gray';
                         isThought = true;
                     } 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;
@@ -263,11 +572,18 @@ async function createChatUI(options) {
                 }]);
             },
             requestApproval: (request = {}) => {
+                if (approvalSessionAutoApproveRef.current) {
+                    return Promise.resolve(true);
+                }
+
                 return new Promise((resolve) => {
                     const approval = {
                         type: request.type || 'action',
                         label: request.label || 'Requested action',
                         preview: request.preview || '',
+                        summary: request.summary || '',
+                        openPath: request.openPath || '',
+                        warnings: Array.isArray(request.warnings) ? request.warnings.filter(Boolean) : [],
                         resolve
                     };
                     pendingApprovalRef.current = approval;
@@ -280,21 +596,41 @@ async function createChatUI(options) {
         useInput((inputStr, key) => {
             const approval = pendingApprovalRef.current;
             if (approval) {
-                const resolveApproval = (approved) => {
+                const resolveApproval = (approved, approveForSession = false) => {
+                    if (approveForSession) {
+                        approvalSessionAutoApproveRef.current = true;
+                        setApprovalSessionAutoApprove(true);
+                    }
                     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()
-                    }]);
+                    setHistory(prev => {
+                        if (approved && isUnifiedDiffPreview(approval.preview)) {
+                            return [...prev, {
+                                role: 'system',
+                                label: 'Edited',
+                                labelColor: 'greenBright',
+                                preview: approval.preview,
+                                isDiffPreview: true,
+                                time: new Date()
+                            }];
+                        }
+
+                        return [...prev, {
+                            role: 'system',
+                            label: 'Approval',
+                            labelColor: approved ? 'greenBright' : 'redBright',
+                            text: `${approveForSession ? 'Approved this session' : (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';
+                if (key.upArrow || key.downArrow || key.leftArrow || key.rightArrow || key.tab) {
+                    const next = getNextApprovalChoice(
+                        approvalChoiceRef.current,
+                        (key.upArrow || key.leftArrow) ? -1 : 1
+                    );
                     approvalChoiceRef.current = next;
                     setApprovalChoice(next);
                     return;
@@ -302,13 +638,17 @@ async function createChatUI(options) {
 
                 const answer = String(inputStr || '').toLowerCase();
                 if (key.return) {
-                    resolveApproval(approvalChoiceRef.current === 'approve');
+                    resolveApproval(approvalChoiceRef.current !== 'deny', approvalChoiceRef.current === 'approve_session');
                     return;
                 }
                 if (answer === 'y') {
                     resolveApproval(true);
                     return;
                 }
+                if (answer === 'a') {
+                    resolveApproval(true, true);
+                    return;
+                }
                 if (answer === 'n' || key.escape || (key.ctrl && inputStr === 'c')) {
                     resolveApproval(false);
                     return;
@@ -319,8 +659,12 @@ async function createChatUI(options) {
             if (key.escape && pendingImagesRef.current.length > 0) {
                 setPendingImages([]);
                 pendingImagesRef.current = [];
-                setPendingImagePrefix('');
-                pendingImagePrefixRef.current = '';
+                setInput(current => {
+                    const next = removeAllImageTokens(current);
+                    inputRef.current = next;
+                    resetInputCursorToEnd();
+                    return next;
+                });
                 return;
             }
 
@@ -329,16 +673,24 @@ async function createChatUI(options) {
                 pendingPasteRef.current = null;
                 setPendingPastePrefix('');
                 pendingPastePrefixRef.current = '';
+                suppressPasteBurstRef.current = false;
+                inputRef.current = '';
+                setInput('');
+                resetInputCursorToEnd();
                 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 = '';
-                }
+                const imageIndex = pendingImagesRef.current.length;
+                const nextImages = pendingImagesRef.current.slice(0, -1);
+                pendingImagesRef.current = nextImages;
+                setPendingImages(nextImages);
+                setInput(current => {
+                    const next = removeImageToken(current, imageIndex);
+                    inputRef.current = next;
+                    resetInputCursorToEnd();
+                    return next;
+                });
                 return;
             }
 
@@ -358,11 +710,14 @@ async function createChatUI(options) {
                         .then((image) => {
                             if (image) {
                                 setPendingImages(prev => {
-                                    if (prev.length === 0) {
-                                        const prefix = normalizeInputText(inputBeforePaste).trim();
-                                        setPendingImagePrefix(prefix);
-                                        pendingImagePrefixRef.current = prefix;
-                                    }
+                                    const imageIndex = prev.length + 1;
+                                    setInput(current => {
+                                        const cleaned = removePasteArtifact(current);
+                                        const next = appendInlineImageToken(cleaned || inputBeforePaste, imageIndex);
+                                        inputRef.current = next;
+                                        resetInputCursorToEnd();
+                                        return next;
+                                    });
                                     return [...prev, image];
                                 });
                             }
@@ -410,14 +765,13 @@ async function createChatUI(options) {
         const handleSubmit = (value) => {
             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 || imageLabels)
                     : text;
             if (!submittedText && images.length === 0) return;
 
@@ -431,23 +785,35 @@ async function createChatUI(options) {
 
             setInput('');
             setPendingImages([]);
-            setPendingImagePrefix('');
             setPendingPaste(null);
             setPendingPastePrefix('');
             pendingImagesRef.current = [];
-            pendingImagePrefixRef.current = '';
             pendingPasteRef.current = null;
             pendingPastePrefixRef.current = '';
+            suppressPasteBurstRef.current = false;
             onSubmit(submittedText, { images, pasted });
         };
 
         const handleInputChange = (value) => {
+            if (suppressPasteBurstRef.current && pendingPasteRef.current) {
+                inputRef.current = '';
+                setInput('');
+                resetInputCursorToEnd();
+                return;
+            }
+
             if (shouldStoreAsPastedContent(value)) {
                 const normalized = normalizeInputText(value);
                 const previous = normalizeInputText(inputRef.current).trim();
-                setPendingPaste({ text: normalized, label: `[Pasted Content ${normalized.length} chars]` });
+                const pasted = { text: normalized, label: `[Pasted Content ${normalized.length} chars]` };
+                pendingPasteRef.current = pasted;
+                pendingPastePrefixRef.current = previous;
+                suppressPasteBurstRef.current = true;
+                setPendingPaste(pasted);
                 setPendingPastePrefix(previous);
+                inputRef.current = '';
                 setInput('');
+                resetInputCursorToEnd();
                 return;
             }
 
@@ -464,9 +830,73 @@ async function createChatUI(options) {
                     return;
                 }
             }
+            inputRef.current = normalizedValue;
             setInput(normalizedValue);
         };
 
+        const renderActivityDetail = (value) => {
+            const segments = splitDiffStatSegments(value);
+            return segments.map((segment, segmentIndex) =>
+                h(Text, {
+                    key: `activity-detail-${segmentIndex}`,
+                    color: segment.color,
+                    wrap: 'wrap'
+                }, segment.text)
+            );
+        };
+
+        const renderDiffLine = (line, index) => {
+            const style = getDiffLineStyle(line);
+            return h(Text, {
+                key: `diff-line-${index}`,
+                ...style
+            }, line.text || ' ');
+        };
+
+        const renderDiffPreview = (preview) => {
+            const files = parseUnifiedDiffPreview(preview);
+            if (files.length === 0) return null;
+
+            return h(Box, { flexDirection: 'column', marginTop: 1 },
+                ...files.map((file, fileIndex) =>
+                    h(Box, { key: `approval-diff-${fileIndex}`, flexDirection: 'column', marginBottom: 1 },
+                        h(Box, null,
+                            h(Text, { color: 'gray' }, '• '),
+                            h(Text, { bold: true, color: 'white' }, `Edited ${file.path} `),
+                            h(Text, { color: 'gray' }, '('),
+                            h(Text, { color: 'greenBright' }, `+${file.additions}`),
+                            h(Text, { color: 'gray' }, ' '),
+                            h(Text, { color: 'redBright' }, `-${file.deletions}`),
+                            h(Text, { color: 'gray' }, ')')
+                        ),
+                        h(Box, { flexDirection: 'column', paddingLeft: 2 },
+                            ...file.lines.slice(0, 120).map(renderDiffLine),
+                            file.lines.length > 120 && h(Text, { color: 'gray', dimColor: true }, `... ${file.lines.length - 120} more diff lines`)
+                        )
+                    )
+                )
+            );
+        };
+
+        const renderApprovalPreview = (approval) => {
+            const preview = approval && approval.preview ? approval.preview : '';
+            if (approval && approval.type === 'plan') {
+                return h(Box, { flexDirection: 'column', marginTop: 1 },
+                    h(Text, { color: 'gray' }, approval.summary || 'Mint prepared a plan for this task.'),
+                    approval.openPath && h(Text, { color: 'gray', dimColor: true }, `Details: ${approval.label}`)
+                );
+            }
+
+            const diffPreview = renderDiffPreview(preview);
+            if (!diffPreview) {
+                return preview && preview !== approval.label
+                    ? h(Box, null, h(Text, { color: 'gray', dimColor: true }, preview))
+                    : null;
+            }
+
+            return diffPreview;
+        };
+
         const renderMessage = (msg, index, keyPrefix = 'msg') => {
             if (msg.isThought) {
                 return h(Box, { key: `${keyPrefix}-${index}`, flexDirection: 'row', marginBottom: 0, paddingLeft: 2 },
@@ -474,6 +904,25 @@ async function createChatUI(options) {
                 );
             }
 
+            if (msg.isActivity) {
+                return h(Box, { key: `${keyPrefix}-${index}`, flexDirection: 'column', marginBottom: 0 },
+                    h(Box, null,
+                        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, { color: 'gray' }, '└ '),
+                        ...renderActivityDetail(msg.activityDetail || msg.text)
+                    )
+                );
+            }
+
+            if (msg.isDiffPreview) {
+                return h(Box, { key: `${keyPrefix}-${index}`, flexDirection: 'column', marginBottom: 0 },
+                    renderDiffPreview(msg.preview || '')
+                );
+            }
+
             let name = 'Mint';
             let nameColor = 'greenBright';
 
@@ -494,7 +943,7 @@ async function createChatUI(options) {
                     h(Text, { color: 'gray' }, ` ${msg.time instanceof Date ? msg.time.toLocaleTimeString() : ''}`)
                 ),
                 h(Box, { paddingLeft: 2, marginBottom: 1 },
-                    h(Text, null, msg.text)
+                    h(Text, { wrap: 'wrap' }, cleanDisplayText(msg.text, msg.role))
                 )
             );
         };
@@ -506,63 +955,75 @@ async function createChatUI(options) {
 
             // 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...')
                 ),
 
-                // Suggestions Menu
-                showSuggestions && suggestions.length > 0 && h(Box, { 
-                    flexDirection: 'column', 
-                    borderStyle: 'single', 
-                    borderColor: 'gray',
+                pendingApproval && h(Box, {
+                    flexDirection: 'column',
+                    borderStyle: 'single',
+                    borderColor: 'cyanBright',
                     paddingX: 1,
                     marginBottom: 0
                 },
-                    suggestions.map((s, i) => h(Box, { key: s.cmd, flexDirection: 'row' },
-                        h(Text, { 
-                            backgroundColor: i === selectedIndex ? 'green' : undefined,
-                            color: i === selectedIndex ? 'white' : 'greenBright' 
-                        }, s.cmd.padEnd(12)),
-                        h(Text, { color: 'gray' }, ` ${s.desc}`)
-                    ))
+                    h(Box, null,
+                        pendingApproval.type === 'plan'
+                            ? h(Text, { bold: true, color: 'greenBright' }, 'Plan')
+                            : [
+                                h(Text, { key: 'approval-title', bold: true, color: 'greenBright' }, 'Approval '),
+                                h(Text, { key: 'approval-type', color: 'cyanBright' }, `[${pendingApproval.type}] `),
+                                h(Text, { key: 'approval-label', color: 'white' }, pendingApproval.label)
+                            ]
+                    ),
+                    pendingApproval.warnings && pendingApproval.warnings.length > 0 && h(Box, { flexDirection: 'column', marginTop: 1, marginBottom: 1 },
+                        ...pendingApproval.warnings.map((warning, index) =>
+                            h(Box, { key: `approval-warning-${index}` },
+                                h(Text, { color: 'yellowBright' }, 'Warning: '),
+                                h(Text, { color: 'yellowBright' }, warning)
+                            )
+                        )
+                    ),
+                    renderApprovalPreview(pendingApproval)
                 ),
 
                 pendingApproval && h(Box, {
                     flexDirection: 'column',
                     borderStyle: 'single',
-                    borderColor: 'yellow',
+                    borderColor: approvalChoice === 'deny' ? 'redBright' : 'greenBright',
                     paddingX: 1,
-                    marginBottom: 1
+                    marginBottom: 0
                 },
-                    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' }, ' '),
+                        }, approvalChoice === 'approve' ? '▸ Approve' : '  Approve')
+                    ),
+                    h(Box, null,
+                        h(Text, {
+                            color: approvalChoice === 'approve_session' ? 'black' : 'cyanBright',
+                            backgroundColor: approvalChoice === 'approve_session' ? 'cyanBright' : undefined,
+                            bold: true
+                        }, approvalChoice === 'approve_session' ? '▸ Approve Session' : '  Approve Session')
+                    ),
+                    h(Box, null,
                         h(Text, {
                             color: approvalChoice === 'deny' ? 'white' : 'redBright',
                             backgroundColor: approvalChoice === 'deny' ? 'redBright' : undefined,
                             bold: true
-                        }, ' Deny '),
-                        h(Text, { color: 'gray' }, '  Tab/←/→ Enter')
+                        }, approvalChoice === 'deny' ? '▸ Deny' : '  Deny')
+                    ),
+                    h(Box, null,
+                        h(Text, { color: 'gray', dimColor: true }, '  ↑/↓ Enter  y/a/n')
                     )
                 ),
 
                 // Compact Input Area
                 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: 'greenBright' }, `${pendingImages.length} image${pendingImages.length === 1 ? '' : 's'} attached `),
                         h(Text, { color: 'gray' }, 'Enter to send, Ctrl+Backspace remove, Esc clear')
                     ),
                     pendingPaste && h(Box, null,
@@ -573,6 +1034,7 @@ async function createChatUI(options) {
                     h(Box, { flexDirection: 'row' },
                         h(Text, { bold: true, color: 'greenBright' }, '› '),
                         h(TextInput, {
+                            key: `input-${inputResetKey}`,
                             value: input,
                             onChange: pendingApproval ? () => {} : handleInputChange,
                             onSubmit: pendingApproval ? () => {} : handleSubmit,
@@ -581,11 +1043,36 @@ async function createChatUI(options) {
                     )
                 ),
 
+                // Suggestions Menu
+                showSuggestions && suggestions.length > 0 && h(Box, {
+                    flexDirection: 'column',
+                    borderStyle: 'single',
+                    borderColor: 'gray',
+                    paddingX: 1,
+                    marginBottom: 0
+                },
+                    h(Box, { justifyContent: 'space-between' },
+                        h(Text, { color: 'gray', dimColor: true }, 'Commands'),
+                        h(Text, { color: 'gray', dimColor: true }, `${visibleSuggestions.current}/${visibleSuggestions.total}`)
+                    ),
+                    visibleSuggestions.visible.map((s, i) => {
+                        const actualIndex = visibleSuggestions.start + i;
+                        return h(Box, { key: s.cmd, flexDirection: 'row' },
+                            h(Text, {
+                                backgroundColor: actualIndex === selectedIndex ? 'green' : undefined,
+                                color: actualIndex === selectedIndex ? 'white' : 'greenBright'
+                            }, s.cmd.padEnd(12)),
+                            h(Text, { color: 'gray' }, ` ${s.desc}`)
+                        );
+                    })
+                ),
+
                 // Status Bar
                 h(Box, { justifyContent: 'space-between' },
                     h(Box, null,
                         h(Text, { color: 'cyan' }, `[${fastMode ? 'Fast' : mode}] `),
-                        h(Text, { color: 'magentaBright' }, (model || config.geminiModel || 'gemini').slice(0, 46))
+                        h(Text, { color: 'magentaBright' }, (model || config.geminiModel || 'gemini').slice(0, 46)),
+                        approvalSessionAutoApprove && h(Text, { color: 'greenBright' }, ' approvals:session')
                     ),
                     h(Box, null,
                         h(Text, { color: 'gray' }, `path: ...${workspace.slice(-20)}`)
@@ -603,11 +1090,12 @@ 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 }), { exitOnCtrlC: false });
+    const instance = render(h(App, { ref, ...options }), { exitOnCtrlC: false });
 
     return {
+        unmount: () => instance.unmount(),
         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(),
@@ -619,11 +1107,10 @@ async function createChatUI(options) {
         attachImage: (image) => ref.current?.attachImage(image),
         appendCodeStep: (info) => ref.current?.appendCodeStep(info),
         streamMessage: (metadata = {}) => {
-            let fullText = '';
             ref.current?.beginAssistantStream(metadata);
             return {
                 appendChunk: (chunk) => {
-                    fullText += chunk;
+                    if (!String(chunk || '').trim()) return;
                     ref.current?.appendAssistantStreamChunk(chunk);
                 },
                 finalize: () => {
@@ -637,4 +1124,23 @@ async function createChatUI(options) {
     };
 }
 
-module.exports = { createChatUI };
+module.exports = {
+    createChatUI,
+    _helpers: {
+        cleanDisplayText,
+        stripInlineMarkdown,
+        compactPathLabel,
+        formatActivityStep,
+        formatDuration,
+        splitDiffStatSegments,
+        getNextApprovalChoice,
+        getVisibleSuggestions,
+        parseUnifiedDiffPreview,
+        isUnifiedDiffPreview,
+        getDiffLineStyle,
+        shouldAppendMessage,
+        appendInlineImageToken,
+        removeImageToken,
+        removeAllImageTokens
+    }
+};