@qduc/term2 0.9.0 → 0.9.2

package/dist/components/message/CommandMessage.js

@@ -1,10 +1,16 @@
-import React, { useState, useEffect, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, Text } from 'ink';
 import { generateDiff } from '../../utils/output/diff.js';
 import { TOOL_NAME_APPLY_PATCH, TOOL_NAME_CREATE_FILE, TOOL_NAME_SEARCH_REPLACE } from '../../tools/tool-names.js';
-import { countDiffStats, formatToolArgs, getFirstParagraph, getMatchCount, isSearchLikeTool, parseCodeContextSearchOutput, parseCodeOutlineOutput, parseFindFilesOutput, parseGrepOutput, parseReadFileOutput, parseSubagentOutput, parseWebFetchOutput, parseWebSearchOutput, stripRgErrorLines, } from './command-message-helpers.js';
+import { countDiffStats, formatToolArgs, getFirstParagraph, getMatchCount, isSearchLikeTool, parseCodeOutlineOutput, parseFindFilesOutput, parseSubagentOutput, stripRgErrorLines, } from './command-message-helpers.js';
 import { COLOR_TOOL_OUTPUT, COLOR_MUTED as THEME_COLOR_MUTED } from '../theme.js';
 import DiffView from '../layout/DiffView.js';
+import { useCommandVisibility } from './useCommandVisibility.js';
+import ReadFileRenderer from './ReadFileRenderer.js';
+import GrepRenderer from './GrepRenderer.js';
+import WebSearchRenderer from './WebSearchRenderer.js';
+import WebFetchRenderer from './WebFetchRenderer.js';
+import CodeContextSearchRenderer from './CodeContextSearchRenderer.js';
 // --- Command Message Theme Colors ---
 // Customize these values to change the color scheme per theme.
 const COLOR_ERROR = 'red';
@@ -32,8 +38,7 @@ const getConciseAskUserResponse = (output) => {
     return output;
 };
 const CommandMessage = ({ command, output: rawOutput, status, success, failureReason, toolName, toolArgs, isApprovalRejection, hadApproval, displayMode = 'standard', textColor, isSubagent = false, }) => {
-    const isRunning = status === 'pending' || status === 'running';
-    const [isVisible, setIsVisible] = useState(!isRunning);
+    const { isVisible, isRunning } = useCommandVisibility(status);
     const { output, runtime } = useMemo(() => {
         const isShell = !toolName || toolName === 'shell';
         if (isShell && rawOutput) {
@@ -57,13 +62,13 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
                 .join('\n');
         }
         return generateDiff(toolArgs.search_content, toolArgs.replace_content);
-    }, [toolName, toolArgs?.search_content, toolArgs?.replace_content, toolArgs?.replacements, toolArgs]);
+    }, [toolName, toolArgs]);
     const createFileDiffLines = useMemo(() => toolName === TOOL_NAME_CREATE_FILE && toolArgs
         ? (toolArgs.content ?? '')
             .split('\n')
             .map((line) => `+${line}`)
             .join('\n')
-        : '', [toolName, toolArgs?.content, toolArgs]);
+        : '', [toolName, toolArgs]);
     // Parse the denial reason from the JSON wrapper that the tool rejection interceptor
     // produces (e.g. {"output":[{"success":false,"error":"..."}]}).
     const denialReason = useMemo(() => {
@@ -82,8 +87,74 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
         return output;
     }, [output]);
     const formattedArgs = useMemo(() => {
-        return toolArgs ? formatToolArgs(toolName, toolArgs, displayMode) : '';
-    }, [toolName, toolArgs, displayMode]);
+        return toolArgs ? formatToolArgs(toolName, toolArgs, 'concise') : '';
+    }, [toolName, toolArgs]);
+    const displayAction = useMemo(() => {
+        const isShell = !toolName || toolName === 'shell';
+        if (isShell) {
+            return (React.createElement(React.Fragment, null,
+                React.createElement(Text, { color: COLOR_MUTED }, "$"),
+                " ",
+                React.createElement(Text, { bold: true }, command),
+                runtime && React.createElement(Text, { color: COLOR_MUTED },
+                    " (",
+                    runtime,
+                    ")")));
+        }
+        const argsText = formattedArgs ? ` ${formattedArgs}` : '';
+        const renderAction = (verb) => (React.createElement(React.Fragment, null,
+            React.createElement(Text, { dimColor: true }, verb),
+            React.createElement(Text, null, argsText)));
+        switch (toolName) {
+            case 'grep':
+                return renderAction('Searched');
+            case 'glob':
+                return renderAction('Searched files');
+            case 'read_file':
+            case 'view_file':
+                return renderAction('Read');
+            case TOOL_NAME_APPLY_PATCH:
+                return renderAction('Patched');
+            case TOOL_NAME_SEARCH_REPLACE:
+                return renderAction('Edited');
+            case TOOL_NAME_CREATE_FILE:
+                return renderAction('Created');
+            case 'ask_mentor':
+                return renderAction('Asked mentor');
+            case 'ask_user':
+                return renderAction('Asked user');
+            case 'web_search':
+                return renderAction('Web searched');
+            case 'web_fetch':
+                return renderAction('Web fetched');
+            case 'read_code_outline':
+                return renderAction('Read outline');
+            case 'code_context_search':
+                return renderAction('Searched context');
+            case 'run_subagent':
+                return renderAction('Delegated');
+            default:
+                return (React.createElement(React.Fragment, null,
+                    React.createElement(Text, { dimColor: true },
+                        "[",
+                        toolName,
+                        "]"),
+                    React.createElement(Text, null, argsText)));
+        }
+    }, [toolName, command, runtime, formattedArgs]);
+    const renderStandardHeader = () => {
+        const headerColor = success === false ? COLOR_ERROR : isRunning ? COLOR_WARNING : COLOR_INFO;
+        const isShell = !toolName || toolName === 'shell';
+        if (isShell) {
+            return (React.createElement(Box, null,
+                React.createElement(Text, { color: headerColor }, displayAction)));
+        }
+        return (React.createElement(Box, null,
+            React.createElement(Text, { color: headerColor },
+                React.createElement(Text, { color: COLOR_MUTED }, "$"),
+                " ",
+                displayAction)));
+    };
     const changeStats = useMemo(() => {
         const diffText = toolName === TOOL_NAME_APPLY_PATCH
             ? toolArgs?.diff
@@ -125,79 +196,16 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
             " match",
             matchCount !== 1 ? 'es' : '',
             ")"))) : null;
-    useEffect(() => {
-        if (!isRunning) {
-            if (!isVisible) {
-                // eslint-disable-next-line react-hooks/set-state-in-effect -- show-after-delay is an inherent side effect
-                setIsVisible(true);
-            }
-            return;
-        }
-        const timer = setTimeout(() => {
-            setIsVisible(true);
-        }, 1000);
-        return () => clearTimeout(timer);
-        // eslint-disable-next-line react-hooks/exhaustive-deps -- isVisible drives show-after-delay which is inherently side-effect; adding isVisible would cause a re-render loop
-    }, [isRunning]);
     if (!isVisible && !isSubagent) {
         return null;
     }
     if (displayMode === 'concise') {
-        const displayAction = (() => {
-            const isShell = !toolName || toolName === 'shell';
-            if (isShell) {
-                return (React.createElement(React.Fragment, null,
-                    React.createElement(Text, { color: COLOR_MUTED }, "$"),
-                    " ",
-                    React.createElement(Text, null, command),
-                    runtime && React.createElement(Text, { color: COLOR_MUTED },
-                        " (",
-                        runtime,
-                        ")")));
-            }
-            const argsText = formattedArgs ? ` ${formattedArgs}` : '';
-            const renderAction = (verb) => (React.createElement(React.Fragment, null,
-                React.createElement(Text, { dimColor: true }, verb),
-                React.createElement(Text, null, argsText)));
-            switch (toolName) {
-                case 'grep':
-                    return renderAction('Searched');
-                case 'glob':
-                    return renderAction('Searched files');
-                case 'read_file':
-                case 'view_file':
-                    return renderAction('Read');
-                case TOOL_NAME_APPLY_PATCH:
-                    return renderAction('Patched');
-                case TOOL_NAME_SEARCH_REPLACE:
-                    return renderAction('Edited');
-                case TOOL_NAME_CREATE_FILE:
-                    return renderAction('Created');
-                case 'ask_mentor':
-                    return renderAction('Asked mentor');
-                case 'ask_user':
-                    return renderAction('Asked user');
-                case 'web_search':
-                    return renderAction('Web searched');
-                case 'web_fetch':
-                    return renderAction('Web fetched');
-                case 'read_code_outline':
-                    return renderAction('Read outline');
-                case 'code_context_search':
-                    return renderAction('Searched context');
-                case 'run_subagent':
-                    return renderAction('Delegated');
-                default:
-                    return (React.createElement(React.Fragment, null,
-                        React.createElement(Text, { dimColor: true },
-                            "[",
-                            toolName,
-                            "]"),
-                        React.createElement(Text, null, argsText)));
-            }
-        })();
         if (isSubagent) {
-            const isFailed = status === 'failed' || isApprovalRejection || success === false || Boolean(failureReason);
+            const isFailed = status === 'failed' ||
+                status === 'aborted' ||
+                isApprovalRejection ||
+                success === false ||
+                Boolean(failureReason);
             const statusChar = isFailed ? '✖' : isRunning ? '▶' : '✔';
             const actionText = isFailed ? command : displayAction;
             return (React.createElement(Box, null,
@@ -301,13 +309,8 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
             return (React.createElement(Box, { flexDirection: "column" },
                 React.createElement(Text, { color: success === false ? COLOR_ERROR : COLOR_TOOL_OUTPUT }, displayed)));
         }
-        const isCreate = toolArgs.type === 'create_file';
         return (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, { color: isCreate ? COLOR_SUCCESS : COLOR_WARNING, bold: true }, isCreate ? '[CREATE FILE]' : '[PATCH]'),
-                React.createElement(Text, null,
-                    " ",
-                    toolArgs.path)),
+            renderStandardHeader(),
             toolArgs.diff && success !== false && React.createElement(DiffView, { diff: toolArgs.diff }),
             failureReason && React.createElement(Text, { color: COLOR_ERROR },
                 "Error: ",
@@ -323,11 +326,7 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
         }
         // For auto-approved search_replace (no approval prompt), show diff + output
         return (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, { color: COLOR_WARNING, bold: true }, "[SEARCH & REPLACE]"),
-                React.createElement(Text, null,
-                    " ",
-                    toolArgs.path)),
+            renderStandardHeader(),
             React.createElement(DiffView, { diff: diff }),
             failureReason && React.createElement(Text, { color: COLOR_ERROR },
                 "Error: ",
@@ -337,11 +336,7 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
     // Special handling for create_file
     if (toolName === TOOL_NAME_CREATE_FILE && toolArgs) {
         return (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Box, null,
-                React.createElement(Text, { color: success === false ? COLOR_ERROR : COLOR_SUCCESS, bold: true }, "[CREATE]"),
-                React.createElement(Text, null,
-                    " ",
-                    toolArgs.path)),
+            renderStandardHeader(),
             success !== false && React.createElement(DiffView, { diff: createFileDiffLines }),
             failureReason && React.createElement(Text, { color: COLOR_ERROR },
                 "Error: ",
@@ -351,111 +346,22 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
     // Standard mode custom tool renderers
     if (displayMode === 'standard' && success !== false && !failureReason && !isRunning) {
         if (toolName === 'read_file' || toolName === 'view_file') {
-            const parsed = parseReadFileOutput(output);
-            if (parsed) {
-                const { filePath, totalLines, startLine, endLine, contentLines } = parsed;
-                const maxContentLines = 10;
-                const displayLines = [];
-                let truncatedCount = 0;
-                if (contentLines.length > maxContentLines + 1) {
-                    const topCount = maxContentLines - 1;
-                    for (let i = 0; i < topCount; i++) {
-                        displayLines.push({ lineNum: startLine + i, content: contentLines[i] ?? '' });
-                    }
-                    truncatedCount = contentLines.length - topCount - 1;
-                    displayLines.push({ lineNum: -1, content: `... (${truncatedCount} lines truncated) ...` });
-                    displayLines.push({
-                        lineNum: startLine + contentLines.length - 1,
-                        content: contentLines[contentLines.length - 1] ?? '',
-                    });
-                }
-                else {
-                    contentLines.forEach((content, i) => {
-                        displayLines.push({ lineNum: startLine + i, content });
-                    });
-                }
-                return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                    React.createElement(Box, null,
-                        React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83D\uDCD6 [READ FILE]"),
-                        React.createElement(Text, null,
-                            ' ',
-                            filePath,
-                            " (Lines ",
-                            startLine,
-                            "-",
-                            endLine,
-                            " of ",
-                            totalLines,
-                            ")")),
-                    React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderColor: COLOR_MUTED, paddingX: 1, marginTop: 1 }, displayLines.map((line, idx) => {
-                        if (line.lineNum === -1) {
-                            return (React.createElement(Text, { key: idx, color: COLOR_MUTED, dimColor: true }, line.content));
-                        }
-                        const lineNumStr = String(line.lineNum).padStart(5, ' ');
-                        return (React.createElement(Text, { key: idx },
-                            React.createElement(Text, { color: COLOR_MUTED, dimColor: true },
-                                lineNumStr,
-                                " \u2502",
-                                ' '),
-                            React.createElement(Text, { color: COLOR_TOOL_OUTPUT }, line.content)));
-                    }))));
-            }
+            const result = React.createElement(ReadFileRenderer, { output: output, renderStandardHeader: renderStandardHeader });
+            if (result)
+                return result;
         }
         if (toolName === 'grep') {
-            const parsed = parseGrepOutput(output);
-            if (parsed) {
-                const { matchesByFile, note } = parsed;
-                const filePaths = Object.keys(matchesByFile);
-                return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                    React.createElement(Box, { marginBottom: 1 },
-                        React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83D\uDD0D [GREP RESULTS]"),
-                        React.createElement(Text, null,
-                            " for ",
-                            toolArgs?.pattern || '')),
-                    filePaths.map((filePath, fileIdx) => {
-                        const matches = matchesByFile[filePath] ?? [];
-                        return (React.createElement(Box, { key: fileIdx, flexDirection: "column", marginBottom: 1 },
-                            React.createElement(Box, null,
-                                React.createElement(Text, { color: COLOR_INFO, bold: true },
-                                    "\uD83D\uDCC4 ",
-                                    filePath),
-                                React.createElement(Text, { color: COLOR_MUTED },
-                                    ' ',
-                                    "(",
-                                    matches.length,
-                                    " match",
-                                    matches.length !== 1 ? 'es' : '',
-                                    ")")),
-                            React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, matches.map((match, matchIdx) => {
-                                const lineNumStr = String(match.lineNum).padStart(4, ' ');
-                                return (React.createElement(Text, { key: matchIdx },
-                                    React.createElement(Text, { color: COLOR_MUTED, dimColor: true },
-                                        lineNumStr,
-                                        ":",
-                                        ' '),
-                                    React.createElement(Text, { color: COLOR_TOOL_OUTPUT }, match.content)));
-                            }))));
-                    }),
-                    note && (React.createElement(Box, { marginTop: 1 },
-                        React.createElement(Text, { color: COLOR_WARNING }, note)))));
-            }
+            const result = React.createElement(GrepRenderer, { output: output, renderStandardHeader: renderStandardHeader });
+            if (result)
+                return result;
         }
         if (toolName === 'glob') {
             const parsed = parseFindFilesOutput(output);
             if (parsed) {
                 const { files, note } = parsed;
-                return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                    React.createElement(Box, { marginBottom: 1 },
-                        React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83D\uDCC2 [FILE SEARCH]"),
-                        React.createElement(Text, null,
-                            ' ',
-                            "found ",
-                            files.length,
-                            " file",
-                            files.length !== 1 ? 's' : '')),
-                    React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, files.map((file, idx) => (React.createElement(Text, { key: idx, color: COLOR_TOOL_OUTPUT },
-                        "\uD83D\uDCC4 ",
-                        file)))),
+                return (React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(Box, { marginBottom: 1 }, renderStandardHeader()),
+                    React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, files.map((file, idx) => (React.createElement(Text, { key: idx, color: COLOR_TOOL_OUTPUT }, file)))),
                     note && (React.createElement(Box, { marginTop: 1 },
                         React.createElement(Text, { color: COLOR_WARNING }, note)))));
             }
@@ -463,122 +369,42 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
         if (toolName === 'run_subagent') {
             const parsed = parseSubagentOutput(output, toolArgs);
             if (parsed) {
-                const { role, status, toolsUsed, filesChanged, mainText } = parsed;
-                const statusColor = status === 'completed' ? COLOR_SUCCESS : status === 'failed' ? COLOR_ERROR : COLOR_WARNING;
-                return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                    React.createElement(Box, null,
-                        React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83E\uDD16 [SUBAGENT]"),
-                        React.createElement(Text, null,
-                            " ",
-                            role,
-                            " "),
-                        React.createElement(Text, { color: statusColor, bold: true },
-                            "(",
-                            status.toUpperCase(),
-                            ")")),
+                const { role: _role, status, toolsUsed, filesChanged, mainText } = parsed;
+                const _statusColor = status === 'completed' ? COLOR_SUCCESS : status === 'failed' ? COLOR_ERROR : COLOR_WARNING;
+                return (React.createElement(Box, { flexDirection: "column" },
+                    renderStandardHeader(),
                     (toolsUsed || filesChanged) && (React.createElement(Box, { flexDirection: "column", paddingLeft: 2, marginY: 0.5 },
                         toolsUsed && (React.createElement(Text, { color: COLOR_MUTED },
-                            "\uD83D\uDEE0\uFE0F Tools: ",
+                            "Tools: ",
                             React.createElement(Text, { color: COLOR_CONTENT }, toolsUsed))),
                         filesChanged && (React.createElement(Text, { color: COLOR_MUTED },
-                            "\uD83D\uDCDD Changed: ",
+                            "Changed: ",
                             React.createElement(Text, { color: COLOR_CONTENT }, filesChanged))))),
                     mainText && (React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderColor: COLOR_INFO, paddingX: 1, marginTop: 1 },
                         React.createElement(Text, { color: COLOR_TOOL_OUTPUT }, mainText)))));
             }
         }
         if (toolName === 'web_search') {
-            const parsed = parseWebSearchOutput(output);
-            if (parsed) {
-                const { answer, results } = parsed;
-                return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                    React.createElement(Box, { marginBottom: 1 },
-                        React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83C\uDF10 [WEB SEARCH]"),
-                        React.createElement(Text, null,
-                            " \"",
-                            toolArgs?.query || '',
-                            "\"")),
-                    answer && (React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: COLOR_WARNING, paddingX: 1, marginBottom: 1 },
-                        React.createElement(Text, { color: COLOR_WARNING, bold: true }, "\uD83D\uDCA1 Answer Summary"),
-                        React.createElement(Text, { color: COLOR_TOOL_OUTPUT }, answer))),
-                    results && results.length > 0 && (React.createElement(Box, { flexDirection: "column" },
-                        React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83D\uDCCB Search Results:"),
-                        results.map((res, idx) => (React.createElement(Box, { key: idx, flexDirection: "column", marginTop: 1, paddingLeft: 2 },
-                            React.createElement(Text, { bold: true, color: COLOR_CONTENT },
-                                idx + 1,
-                                ". ",
-                                res.title),
-                            React.createElement(Text, { color: COLOR_LINK, underline: true },
-                                "\uD83D\uDD17 ",
-                                res.url),
-                            res.published && (React.createElement(Text, { color: COLOR_MUTED, dimColor: true },
-                                "\uD83D\uDCC5 Published: ",
-                                res.published)),
-                            React.createElement(Box, { marginTop: 1 },
-                                React.createElement(Text, { color: COLOR_TOOL_OUTPUT }, res.content)))))))));
-            }
+            const result = React.createElement(WebSearchRenderer, { output: output, renderStandardHeader: renderStandardHeader });
+            if (result)
+                return result;
         }
         if (toolName === 'web_fetch') {
-            const parsed = parseWebFetchOutput(output);
-            if (parsed) {
-                const { title, url, toc, tempFile, notes, content } = parsed;
-                const maxLines = 15;
-                const contentLines = content.split('\n');
-                let displayContent = content;
-                let truncatedCount = 0;
-                if (contentLines.length > maxLines + 1) {
-                    const firstPart = contentLines.slice(0, maxLines).join('\n');
-                    const lastLine = contentLines[contentLines.length - 1];
-                    truncatedCount = contentLines.length - maxLines - 1;
-                    displayContent = `${firstPart}\n\n... (${truncatedCount} lines of content truncated for preview) ...\n\n${lastLine}`;
-                }
-                return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                    React.createElement(Box, null,
-                        React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83D\uDCE5 [WEB FETCH]"),
-                        React.createElement(Text, null,
-                            " ",
-                            title)),
-                    React.createElement(Box, { paddingLeft: 2 },
-                        React.createElement(Text, { color: COLOR_LINK, underline: true },
-                            "\uD83D\uDD17 ",
-                            url)),
-                    toc && (React.createElement(Box, { flexDirection: "column", borderStyle: "classic", borderColor: COLOR_MUTED, paddingX: 1, marginY: 1, width: 50 },
-                        React.createElement(Text, { color: COLOR_WARNING, bold: true }, "\uD83D\uDCCB Table of Contents"),
-                        React.createElement(Text, { color: COLOR_MUTED }, toc))),
-                    content && (React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderColor: COLOR_MUTED, paddingX: 1, marginTop: 1 },
-                        React.createElement(Text, { color: COLOR_TOOL_OUTPUT }, displayContent))),
-                    tempFile && (React.createElement(Box, { marginTop: 1 },
-                        React.createElement(Text, { color: COLOR_WARNING },
-                            "\uD83D\uDCBE Full content saved to:",
-                            ' ',
-                            React.createElement(Text, { bold: true, color: COLOR_CONTENT }, tempFile)))),
-                    notes && (React.createElement(Box, { marginTop: 0.5 },
-                        React.createElement(Text, { color: COLOR_WARNING },
-                            "\u26A0\uFE0F ",
-                            notes)))));
-            }
+            const result = React.createElement(WebFetchRenderer, { output: output, renderStandardHeader: renderStandardHeader });
+            if (result)
+                return result;
         }
         if (toolName === 'ask_mentor') {
-            return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                React.createElement(Box, null,
-                    React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83E\uDDE0 [MENTOR QUESTION]"),
-                    React.createElement(Text, { color: COLOR_CONTENT, italic: true },
-                        ' ',
-                        "\"",
-                        toolArgs?.question || '',
-                        "\"")),
+            return (React.createElement(Box, { flexDirection: "column" },
+                renderStandardHeader(),
                 React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: COLOR_SPECIAL, paddingX: 1, marginTop: 1 },
-                    React.createElement(Text, { color: COLOR_SPECIAL, bold: true }, "\uD83D\uDCAC Mentor Response"),
+                    React.createElement(Text, { color: COLOR_SPECIAL, bold: true }, "Mentor Response"),
                     React.createElement(Text, { color: COLOR_TOOL_OUTPUT }, output))));
         }
         if (toolName === 'ask_user') {
             const options = toolArgs?.options;
-            return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                React.createElement(Box, null,
-                    React.createElement(Text, { color: COLOR_INFO, bold: true }, "\u2753 [ASK USER]"),
-                    React.createElement(Text, { color: COLOR_CONTENT },
-                        " ",
-                        toolArgs?.question || 'Unknown question')),
+            return (React.createElement(Box, { flexDirection: "column" },
+                renderStandardHeader(),
                 options && Array.isArray(options) && options.length > 0 && (React.createElement(Box, { paddingLeft: 2, marginY: 0.5 },
                     React.createElement(Text, { color: COLOR_MUTED }, "Options: "),
                     options.map((opt, idx) => (React.createElement(Text, { key: idx, color: idx === 0 ? COLOR_SUCCESS : COLOR_CONTENT },
@@ -588,36 +414,29 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
                         "]",
                         idx === 0 ? ' (Recommended)' : ''))))),
                 React.createElement(Box, { paddingLeft: 2, marginTop: 0.5 },
-                    React.createElement(Text, { color: COLOR_MUTED }, "\uD83D\uDDE3\uFE0F Response: "),
+                    React.createElement(Text, { color: COLOR_MUTED }, "Response: "),
                     React.createElement(Text, { color: COLOR_SUCCESS, bold: true }, output || 'No response yet'))));
         }
         if (toolName === 'read_code_outline') {
             const parsed = parseCodeOutlineOutput(output);
             if (parsed) {
-                const { filePath, lang, imports, exports, decls } = parsed;
-                return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                    React.createElement(Box, { marginBottom: 1 },
-                        React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83D\uDCD1 [CODE OUTLINE]"),
-                        React.createElement(Text, null,
-                            ' ',
-                            filePath,
-                            " (",
-                            lang,
-                            ")")),
+                const { filePath: _filePath, lang: _lang, imports, exports, decls } = parsed;
+                return (React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(Box, { marginBottom: 1 }, renderStandardHeader()),
                     imports && imports.length > 0 && (React.createElement(Box, { flexDirection: "column", marginBottom: 1, paddingLeft: 2 },
-                        React.createElement(Text, { color: COLOR_WARNING, bold: true }, "\uD83D\uDCE6 Imports:"),
+                        React.createElement(Text, { color: COLOR_WARNING, bold: true }, "Imports:"),
                         imports.map((imp, idx) => (React.createElement(Text, { key: idx, color: COLOR_TOOL_OUTPUT },
                             ' ',
                             "\u2022 ",
                             imp))))),
                     exports && exports.length > 0 && (React.createElement(Box, { flexDirection: "column", marginBottom: 1, paddingLeft: 2 },
-                        React.createElement(Text, { color: COLOR_SUCCESS, bold: true }, "\uD83D\uDCE4 Exports:"),
+                        React.createElement(Text, { color: COLOR_SUCCESS, bold: true }, "Exports:"),
                         exports.map((exp, idx) => (React.createElement(Text, { key: idx, color: COLOR_TOOL_OUTPUT },
                             ' ',
                             "\u2022 ",
                             exp))))),
                     decls && decls.length > 0 && (React.createElement(Box, { flexDirection: "column", paddingLeft: 2 },
-                        React.createElement(Text, { color: COLOR_LINK, bold: true }, "\uD83D\uDEE0\uFE0F Declarations:"),
+                        React.createElement(Text, { color: COLOR_LINK, bold: true }, "Declarations:"),
                         decls.map((decl, idx) => (React.createElement(Text, { key: idx, color: COLOR_TOOL_OUTPUT },
                             ' ',
                             "\u2022 ",
@@ -625,82 +444,22 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
             }
         }
         if (toolName === 'code_context_search') {
-            const parsed = parseCodeContextSearchOutput(output);
-            if (parsed) {
-                const { queryType } = parsed;
-                if (queryType === 'related') {
-                    const { target, relatedFiles } = parsed;
-                    return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                        React.createElement(Box, { marginBottom: 1 },
-                            React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83D\uDD17 [RELATED FILES]"),
-                            React.createElement(Text, null,
-                                " for ",
-                                target)),
-                        !relatedFiles || relatedFiles.length === 0 ? (React.createElement(Box, { paddingLeft: 2 },
-                            React.createElement(Text, { color: COLOR_MUTED }, "No related files found."))) : (React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, relatedFiles.map((f, idx) => (React.createElement(Box, { key: idx, flexDirection: "column", marginBottom: 0.5 },
-                            React.createElement(Text, { color: COLOR_CONTENT },
-                                "\uD83D\uDCC4 ",
-                                f.filePath),
-                            React.createElement(Text, { color: COLOR_MUTED, dimColor: true },
-                                ' ',
-                                "Relations: ",
-                                f.relations))))))));
-                }
-                else {
-                    const { symbol, results } = parsed;
-                    return (React.createElement(Box, { flexDirection: "column", marginY: 1 },
-                        React.createElement(Box, { marginBottom: 1 },
-                            React.createElement(Text, { color: COLOR_INFO, bold: true }, "\uD83D\uDD0D [SYMBOL SEARCH]"),
-                            React.createElement(Text, null,
-                                " \"",
-                                symbol,
-                                "\"")),
-                        !results || results.length === 0 ? (React.createElement(Box, { paddingLeft: 2 },
-                            React.createElement(Text, { color: COLOR_MUTED }, "No symbol declarations found."))) : (React.createElement(Box, { flexDirection: "column", paddingLeft: 2 }, results.map((res, idx) => (React.createElement(Text, { key: idx },
-                            React.createElement(Text, { color: COLOR_CONTENT },
-                                "\uD83D\uDCC4 ",
-                                res.filePath,
-                                ":",
-                                res.lineNum),
-                            React.createElement(Text, { color: COLOR_MUTED, dimColor: true },
-                                ' ',
-                                "\u2502",
-                                ' '),
-                            React.createElement(Text, { color: COLOR_WARNING },
-                                res.kind,
-                                " ",
-                                res.name),
-                            res.exported && (React.createElement(Text, { color: COLOR_SUCCESS, dimColor: true },
-                                ' ',
-                                "(exported)")))))))));
-                }
-            }
+            const result = React.createElement(CodeContextSearchRenderer, { output: output, renderStandardHeader: renderStandardHeader });
+            if (result)
+                return result;
         }
     }
     // Special handling for approval-rejected shell commands: show the denial message
     // with a clear [DENIED] label so the user knows what was attempted and why.
     if (isApprovalRejection) {
-        // Extract just the command part for display (e.g. "rm -rf /dangerous").
-        const displayCommand = formattedArgs || command;
         return (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Text, { color: COLOR_ERROR, bold: true },
-                "$ ",
-                React.createElement(Text, { bold: true }, displayCommand)),
+            renderStandardHeader(),
             React.createElement(Text, { color: COLOR_ERROR },
                 "\u2192 DENIED: ",
                 denialReason)));
     }
     return (React.createElement(Box, { flexDirection: "column" },
-        React.createElement(Text, { color: success === false ? COLOR_ERROR : isRunning ? COLOR_WARNING : COLOR_INFO },
-            "$ ",
-            React.createElement(Text, { bold: true }, command),
-            isRunning && formattedArgs && command === toolName && React.createElement(Text, { color: COLOR_WARNING },
-                " ",
-                formattedArgs),
-            runtime && React.createElement(Text, { color: COLOR_MUTED },
-                " (",
-                runtime,
-                ")")),
+        renderStandardHeader(),
         failureReason && React.createElement(Text, { color: COLOR_ERROR },
             "Error: ",
             failureReason),