@pheem49/mint 1.5.2 → 1.5.4

package/src/CLI/chat_ui.js

@@ -63,6 +63,8 @@ function formatActivityStep(info = {}) {
             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 };
@@ -146,6 +148,107 @@ function formatDuration(totalSeconds) {
     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;
@@ -153,6 +256,21 @@ function shouldAppendMessage(role, text) {
     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
  */
@@ -175,26 +293,28 @@ async function createChatUI(options) {
         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 || '');
@@ -209,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;
@@ -218,10 +342,6 @@ async function createChatUI(options) {
             pendingImagesRef.current = pendingImages;
         }, [pendingImages]);
 
-        useEffect(() => {
-            pendingImagePrefixRef.current = pendingImagePrefix;
-        }, [pendingImagePrefix]);
-
         useEffect(() => {
             pendingPasteRef.current = pendingPaste;
         }, [pendingPaste]);
@@ -265,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(() => {
@@ -342,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]` });
@@ -353,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];
                 });
             },
@@ -379,12 +513,15 @@ 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_SHOW_THINKING_TRACE !== '1') {
+                        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') {
@@ -435,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;
@@ -452,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;
@@ -474,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;
@@ -491,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;
             }
 
@@ -501,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;
             }
 
@@ -530,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];
                                 });
                             }
@@ -582,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;
 
@@ -603,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;
             }
 
@@ -636,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 },
@@ -654,11 +912,17 @@ async function createChatUI(options) {
                     ),
                     h(Box, { paddingLeft: 2, marginBottom: 1 },
                         h(Text, { color: 'gray' }, '└ '),
-                        h(Text, { color: 'cyanBright', wrap: 'wrap' }, msg.activityDetail || msg.text)
+                        ...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';
 
@@ -696,59 +960,70 @@ async function createChatUI(options) {
                     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,
@@ -759,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,
@@ -767,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)}`)
@@ -789,9 +1090,10 @@ 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, seconds) => ref.current?.setThinking(val, seconds),
         setMode: (val) => ref.current?.setMode(val),
@@ -822,4 +1124,23 @@ async function createChatUI(options) {
     };
 }
 
-module.exports = { createChatUI, _helpers: { cleanDisplayText, stripInlineMarkdown, compactPathLabel, formatActivityStep, formatDuration, shouldAppendMessage } };
+module.exports = {
+    createChatUI,
+    _helpers: {
+        cleanDisplayText,
+        stripInlineMarkdown,
+        compactPathLabel,
+        formatActivityStep,
+        formatDuration,
+        splitDiffStatSegments,
+        getNextApprovalChoice,
+        getVisibleSuggestions,
+        parseUnifiedDiffPreview,
+        isUnifiedDiffPreview,
+        getDiffLineStyle,
+        shouldAppendMessage,
+        appendInlineImageToken,
+        removeImageToken,
+        removeAllImageTokens
+    }
+};