@qduc/term2 0.29.1 → 0.31.0

package/dist/components/message/CommandMessage.js

@@ -4,7 +4,8 @@ import { generateDiff } from '../../utils/output/diff.js';
 import { asDisplayArray, asDisplayString } from '../../utils/tool-args-display.js';
 import { TOOL_NAME_APPLY_PATCH, TOOL_NAME_CREATE_FILE, TOOL_NAME_SEARCH_REPLACE } from '../../tools/tool-names.js';
 import { countDiffStats, extractErrorMessage, formatToolArgs, getFirstParagraph, getMatchCount, isStructuredToolError, isSearchLikeTool, parseCodeOutlineOutput, parseRunCodeTrace, truncateOutputLines, parseFindFilesOutput, parseSubagentOutput, stripRgErrorLines, } from './command-message-helpers.js';
-import { COLOR_ACCENT, COLOR_ACCENT_ALT, COLOR_DANGER, COLOR_TEXT, COLOR_TEXT_MUTED, COLOR_TEXT_SUBTLE, COLOR_TOOL_OUTPUT, COLOR_WARNING, TOOL_STATUS_COLOR, TOOL_STATUS_GLYPH, } from '../theme.js';
+import { useTheme } from '../theme.js';
+import { useSkin } from '../../skins/SkinContext.js';
 import DiffView from '../layout/DiffView.js';
 import { useCommandVisibility } from './useCommandVisibility.js';
 import ReadFileRenderer from './ReadFileRenderer.js';
@@ -49,12 +50,14 @@ const getConciseAskUserResponse = (output) => {
     return output;
 };
 const CommandMessage = ({ command, output: rawOutput, status, success, failureReason, toolName, toolArgs, isApprovalRejection, autoApprovedByLlm, hadApproval, displayMode = 'standard', textColor, isSubagent = false, awaitingDecision = false, }) => {
+    const theme = useTheme();
+    const { ToolFrame, ToolHeader, ToolSection } = useSkin();
     const { isVisible, isRunning } = useCommandVisibility(status);
     const isWaiting = awaitingDecision;
     const isQueued = status === 'pending' && !awaitingDecision;
     const isExecuting = isRunning && !awaitingDecision;
     const runningElapsedSeconds = useRunningElapsedSeconds(isExecuting);
-    const runningElapsedLabel = isWaiting ? (React.createElement(Text, { color: COLOR_TEXT_SUBTLE }, " (waiting)")) : isQueued ? (React.createElement(Text, { color: COLOR_TEXT_SUBTLE }, " (queued)")) : isExecuting ? (React.createElement(Text, { color: COLOR_WARNING },
+    const runningElapsedLabel = isWaiting ? (React.createElement(Text, { color: theme.textSubtle }, " (waiting)")) : isQueued ? (React.createElement(Text, { color: theme.textSubtle }, " (queued)")) : isExecuting ? (React.createElement(Text, { color: theme.warning },
         " (",
         runningElapsedSeconds,
         "s)")) : null;
@@ -105,7 +108,7 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
         if (isShell) {
             return (React.createElement(React.Fragment, null,
                 React.createElement(Text, { bold: true }, command),
-                runtime && React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
+                runtime && React.createElement(Text, { color: theme.textSubtle },
                     " (",
                     runtime,
                     ")")));
@@ -308,26 +311,18 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
         }
         // Depend on the whole `toolArgs`, not `toolArgs?.runs`: the React Compiler infers the
         // former and refuses to preserve the memo when the declared deps are narrower.
-    }, [toolName, command, runtime, formattedArgs, toolArgs, isBackgroundSubagentLaunch, success]);
-    const renderStandardHeader = () => {
-        // isApprovalRejection carries no `success` value of its own — it is a distinct
-        // outcome from a normal failed run — so it is checked first and maps to the
-        // same 'failed' glyph/color as success === false.
-        const statusKind = isApprovalRejection || success === false || status === 'unknown'
-            ? 'failed'
-            : isWaiting || isQueued
-                ? 'pending'
-                : isRunning
-                    ? 'running'
-                    : 'completed';
-        const headerColor = TOOL_STATUS_COLOR[statusKind];
-        return (React.createElement(Box, null,
-            React.createElement(Text, { color: headerColor },
-                TOOL_STATUS_GLYPH[statusKind],
-                " ",
-                displayAction,
-                runningElapsedLabel)));
-    };
+    }, [toolName, command, runtime, formattedArgs, toolArgs, isBackgroundSubagentLaunch, success, theme.textSubtle]);
+    // isApprovalRejection carries no `success` value of its own — it is a distinct
+    // outcome from a normal failed run — so it is checked first and maps to the
+    // same 'failed' glyph/color as success === false.
+    const statusKind = isApprovalRejection || success === false || status === 'unknown'
+        ? 'failed'
+        : isWaiting || isQueued
+            ? 'pending'
+            : isRunning
+                ? 'running'
+                : 'completed';
+    const renderStandardHeader = () => (React.createElement(ToolHeader, { toolName: toolName, status: statusKind, display: "standard", action: displayAction, meta: runningElapsedLabel }));
     const changeStats = useMemo(() => {
         const diffText = toolName === TOOL_NAME_APPLY_PATCH
             ? toolArgs?.diff
@@ -345,11 +340,11 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
     const changeStatsElement = changeStats ? (React.createElement(React.Fragment, null,
         ' ',
         "(",
-        React.createElement(Text, { color: COLOR_TEXT_MUTED },
+        React.createElement(Text, { color: theme.textMuted },
             "+",
             changeStats.added),
         ' ',
-        React.createElement(Text, { color: COLOR_DANGER },
+        React.createElement(Text, { color: theme.danger },
             "-",
             changeStats.removed),
         ")")) : null;
@@ -362,8 +357,8 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
             return 0;
         return getMatchCount(toolName, command, output);
     }, [displayMode, toolName, command, isRunning, isQueued, isApprovalRejection, output]);
-    const matchCountElement = matchCount > 0 ? (React.createElement(Box, { paddingLeft: 2 },
-        React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
+    const matchCountElement = matchCount > 0 ? (React.createElement(ToolSection, { variant: "indent" },
+        React.createElement(Text, { color: theme.textSubtle },
             "(",
             matchCount,
             " match",
@@ -371,340 +366,329 @@ const CommandMessage = ({ command, output: rawOutput, status, success, failureRe
             ")"))) : null;
     // Concise mode draws the header alone, so a refused nested call would otherwise
     // vanish. Counts on a clean run would be noise, so only trouble is announced.
-    const runCodeTroubleElement = displayMode === 'concise' && runCodeTrace && runCodeTrace.troubledCount > 0 ? (React.createElement(Text, { color: COLOR_DANGER },
+    const runCodeTroubleElement = displayMode === 'concise' && runCodeTrace && runCodeTrace.troubledCount > 0 ? (React.createElement(Text, { color: theme.danger },
         " (",
         runCodeTrace.troubledCount,
         " refused)")) : null;
-    const autoApprovalLabel = autoApprovedByLlm ? React.createElement(Text, { color: COLOR_TEXT_SUBTLE }, "(Auto approved by LLM)") : null;
+    const autoApprovalLabel = autoApprovedByLlm ? React.createElement(Text, { color: theme.textSubtle }, "(Auto approved by LLM)") : null;
     if (!isVisible && !isSubagent) {
         return null;
     }
-    if (displayMode === 'concise') {
-        if (isSubagent) {
-            const isFailed = status === 'failed' ||
-                status === 'aborted' ||
-                status === 'unknown' ||
-                isApprovalRejection ||
-                success === false ||
-                Boolean(failureReason);
-            const subagentStatusKind = isFailed
-                ? 'failed'
-                : isWaiting || isQueued
-                    ? 'pending'
-                    : isRunning
-                        ? 'running'
-                        : 'completed';
-            const actionText = isFailed ? command : displayAction;
-            return (React.createElement(Box, null,
-                React.createElement(Text, { wrap: "truncate", color: COLOR_TEXT_SUBTLE },
-                    React.createElement(Text, { color: TOOL_STATUS_COLOR[subagentStatusKind] }, TOOL_STATUS_GLYPH[subagentStatusKind]),
-                    ' ',
-                    actionText,
-                    runningElapsedLabel)));
-        }
-        if (isApprovalRejection) {
-            return (React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED },
-                    React.createElement(Text, { color: TOOL_STATUS_COLOR.rejected, bold: true }, TOOL_STATUS_GLYPH.rejected),
-                    ' ',
-                    displayAction,
-                    changeStatsElement),
-                React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED },
-                    " \u2192 DENIED: ",
-                    denialReason)));
-        }
-        if (isRunning || isQueued || isWaiting) {
-            const inFlightStatusKind = isWaiting || isQueued ? 'pending' : 'running';
-            return (React.createElement(Box, null,
-                React.createElement(Text, { color: TOOL_STATUS_COLOR[inFlightStatusKind] },
-                    React.createElement(Text, { bold: true }, TOOL_STATUS_GLYPH[inFlightStatusKind]),
-                    " ",
-                    displayAction,
-                    runningElapsedLabel,
-                    changeStatsElement)));
-        }
-        if (success === false || failureReason) {
-            const parsedOutputError = extractErrorMessage(output);
-            const errorMsg = failureReason || parsedOutputError || 'failed';
-            const summarizeRawError = !failureReason && !isApprovalRejection && isStructuredToolError(output);
-            const displayErrorMsg = isSearchLikeTool(toolName, command)
-                ? stripRgErrorLines(errorMsg).trim() || 'failed'
-                : errorMsg;
-            // Truncate error message like standard mode truncates output
-            const truncatedError = (() => {
-                const lines = displayErrorMsg.trimEnd().split('\n');
-                const maxLines = 3;
-                if (lines.length > maxLines + 1) {
-                    const firstPart = lines.slice(0, maxLines).join('\n');
-                    const lastLine = lines[lines.length - 1];
-                    return `${firstPart}\n... (${lines.length - maxLines - 1} more lines)\n${lastLine}`;
-                }
-                return displayErrorMsg;
-            })();
+    // The special renderers are FCs invoked as plain functions, so this can type as ReactNode | Promise<ReactNode>.
+    const renderContent = () => {
+        if (displayMode === 'concise') {
+            if (isSubagent) {
+                const isFailed = status === 'failed' ||
+                    status === 'aborted' ||
+                    status === 'unknown' ||
+                    isApprovalRejection ||
+                    success === false ||
+                    Boolean(failureReason);
+                const subagentStatusKind = isFailed
+                    ? 'failed'
+                    : isWaiting || isQueued
+                        ? 'pending'
+                        : isRunning
+                            ? 'running'
+                            : 'completed';
+                const actionText = isFailed ? command : displayAction;
+                return (React.createElement(ToolHeader, { toolName: toolName, status: subagentStatusKind, display: "concise", nested: true, action: actionText, meta: runningElapsedLabel }));
+            }
+            if (isApprovalRejection) {
+                return (React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(ToolHeader, { toolName: toolName, status: "rejected", display: "concise", action: displayAction, trailing: changeStatsElement, textColor: textColor }),
+                    React.createElement(Text, { color: textColor || theme.textMuted },
+                        " \u2192 DENIED: ",
+                        denialReason)));
+            }
+            if (isRunning || isQueued || isWaiting) {
+                const inFlightStatusKind = isWaiting || isQueued ? 'pending' : 'running';
+                return (React.createElement(ToolHeader, { toolName: toolName, status: inFlightStatusKind, display: "concise", action: displayAction, meta: runningElapsedLabel, trailing: changeStatsElement }));
+            }
+            if (success === false || failureReason) {
+                const parsedOutputError = extractErrorMessage(output);
+                const errorMsg = failureReason || parsedOutputError || 'failed';
+                const summarizeRawError = !failureReason && !isApprovalRejection && isStructuredToolError(output);
+                const displayErrorMsg = isSearchLikeTool(toolName, command)
+                    ? stripRgErrorLines(errorMsg).trim() || 'failed'
+                    : errorMsg;
+                // Truncate error message like standard mode truncates output
+                const truncatedError = (() => {
+                    const lines = displayErrorMsg.trimEnd().split('\n');
+                    const maxLines = 3;
+                    if (lines.length > maxLines + 1) {
+                        const firstPart = lines.slice(0, maxLines).join('\n');
+                        const lastLine = lines[lines.length - 1];
+                        return `${firstPart}\n... (${lines.length - maxLines - 1} more lines)\n${lastLine}`;
+                    }
+                    return displayErrorMsg;
+                })();
+                return (React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(ToolHeader, { toolName: toolName, status: "failed", display: "concise", action: displayAction, trailing: changeStatsElement, textColor: textColor }),
+                    matchCountElement,
+                    summarizeRawError && (React.createElement(React.Fragment, null,
+                        React.createElement(Text, { color: textColor || theme.textMuted }, "Tool failed."),
+                        React.createElement(Text, { color: textColor || theme.textMuted }, "Review the error details and retry after correcting the issue."))),
+                    matchCount === 0 && React.createElement(Text, { color: textColor || theme.textMuted }, truncatedError)));
+            }
+            // Success (one line)
+            if (toolName === 'automatic_memory') {
+                return (React.createElement(Box, { flexDirection: "column" },
+                    renderStandardHeader(),
+                    React.createElement(Text, { color: textColor || theme.textMuted }, output)));
+            }
+            if (toolName === 'ask_user') {
+                const responseText = getConciseAskUserResponse(output);
+                return (React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(ToolHeader, { toolName: toolName, status: "completed", display: "concise", action: displayAction, textColor: textColor }),
+                    React.createElement(Text, { color: textColor || theme.textMuted },
+                        " Response: ",
+                        responseText)));
+            }
+            if (toolName === 'ask_mentor') {
+                const firstParagraph = getFirstParagraph(output, 200);
+                return (React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(ToolHeader, { toolName: toolName, status: "completed", display: "concise", action: displayAction, textColor: textColor }),
+                    React.createElement(Text, { color: textColor || theme.textMuted },
+                        " Response: ",
+                        firstParagraph)));
+            }
             return (React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED },
-                    React.createElement(Text, { color: TOOL_STATUS_COLOR.failed, bold: true }, TOOL_STATUS_GLYPH.failed),
-                    ' ',
-                    displayAction,
-                    changeStatsElement),
+                React.createElement(ToolHeader, { toolName: toolName, status: "completed", display: "concise", action: displayAction, trailing: React.createElement(React.Fragment, null,
+                        runCodeTroubleElement,
+                        changeStatsElement), textColor: textColor }),
                 matchCountElement,
-                summarizeRawError && (React.createElement(React.Fragment, null,
-                    React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED }, "Tool failed."),
-                    React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED }, "Review the error details and retry after correcting the issue."))),
-                matchCount === 0 && React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED }, truncatedError)));
+                autoApprovalLabel));
         }
-        // Success (one line)
-        if (toolName === 'automatic_memory') {
+        const outputText = output?.trim() ? output : isRunning ? '(running...)' : isQueued ? '(queued)' : '(no output)';
+        const displayed = outputText && outputText !== '(no output)' ? truncateOutputLines(output || '') : outputText;
+        const actionableErrorSummary = success === false && !failureReason && !isApprovalRejection && isStructuredToolError(output) ? (React.createElement(React.Fragment, null,
+            React.createElement(Text, { color: textColor || theme.textMuted }, "Tool failed."),
+            React.createElement(Text, { color: textColor || theme.textMuted }, "Review the error details and retry after correcting the issue."))) : null;
+        // Special handling for apply_patch
+        if (toolName === TOOL_NAME_APPLY_PATCH && toolArgs) {
+            if (hadApproval) {
+                return (React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(Text, { color: success === false ? theme.danger : theme.toolOutput }, displayed)));
+            }
             return (React.createElement(Box, { flexDirection: "column" },
                 renderStandardHeader(),
-                React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED }, output)));
+                actionableErrorSummary,
+                toolArgs.diff && success !== false && React.createElement(DiffView, { diff: toolArgs.diff }),
+                failureReason && React.createElement(Text, { color: theme.danger },
+                    "Error: ",
+                    failureReason),
+                React.createElement(Text, { color: success === false ? theme.danger : theme.toolOutput }, displayed)));
         }
-        if (toolName === 'ask_user') {
-            const responseText = getConciseAskUserResponse(output);
-            return (React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED },
-                    React.createElement(Text, { color: TOOL_STATUS_COLOR.completed, bold: true }, TOOL_STATUS_GLYPH.completed),
-                    ' ',
-                    displayAction),
-                React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED },
-                    " Response: ",
-                    responseText)));
-        }
-        if (toolName === 'ask_mentor') {
-            const firstParagraph = getFirstParagraph(output, 200);
+        // Special handling for search_replace
+        if (toolName === TOOL_NAME_SEARCH_REPLACE && toolArgs) {
+            // For search_replace that had an approval prompt (user said 'y'), only show output
+            if (hadApproval) {
+                return (React.createElement(Box, { flexDirection: "column" },
+                    React.createElement(Text, { color: success === false ? theme.danger : theme.toolOutput }, displayed)));
+            }
+            // For auto-approved search_replace (no approval prompt), show diff + output
             return (React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED },
-                    React.createElement(Text, { color: TOOL_STATUS_COLOR.completed, bold: true }, TOOL_STATUS_GLYPH.completed),
-                    ' ',
-                    displayAction),
-                React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED },
-                    " Response: ",
-                    firstParagraph)));
+                renderStandardHeader(),
+                actionableErrorSummary,
+                React.createElement(DiffView, { diff: diff }),
+                failureReason && React.createElement(Text, { color: theme.danger },
+                    "Error: ",
+                    failureReason),
+                React.createElement(Text, { color: success === false ? theme.danger : theme.toolOutput }, displayed)));
         }
-        return (React.createElement(Box, { flexDirection: "column" },
-            React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED },
-                React.createElement(Text, { color: TOOL_STATUS_COLOR.completed, bold: true }, TOOL_STATUS_GLYPH.completed),
-                ' ',
-                displayAction,
-                runCodeTroubleElement,
-                changeStatsElement),
-            matchCountElement,
-            autoApprovalLabel));
-    }
-    const outputText = output?.trim() ? output : isRunning ? '(running...)' : isQueued ? '(queued)' : '(no output)';
-    const displayed = outputText && outputText !== '(no output)' ? truncateOutputLines(output || '') : outputText;
-    const actionableErrorSummary = success === false && !failureReason && !isApprovalRejection && isStructuredToolError(output) ? (React.createElement(React.Fragment, null,
-        React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED }, "Tool failed."),
-        React.createElement(Text, { color: textColor || COLOR_TEXT_MUTED }, "Review the error details and retry after correcting the issue."))) : null;
-    // Special handling for apply_patch
-    if (toolName === TOOL_NAME_APPLY_PATCH && toolArgs) {
-        if (hadApproval) {
+        // Special handling for create_file
+        if (toolName === TOOL_NAME_CREATE_FILE && toolArgs) {
             return (React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: success === false ? COLOR_DANGER : COLOR_TOOL_OUTPUT }, displayed)));
+                renderStandardHeader(),
+                actionableErrorSummary,
+                success !== false && React.createElement(DiffView, { diff: createFileDiffLines }),
+                failureReason && React.createElement(Text, { color: theme.danger },
+                    "Error: ",
+                    failureReason),
+                React.createElement(Text, { color: success === false ? theme.danger : theme.toolOutput }, displayed)));
         }
-        return (React.createElement(Box, { flexDirection: "column" },
-            renderStandardHeader(),
-            actionableErrorSummary,
-            toolArgs.diff && success !== false && React.createElement(DiffView, { diff: toolArgs.diff }),
-            failureReason && React.createElement(Text, { color: COLOR_DANGER },
-                "Error: ",
-                failureReason),
-            React.createElement(Text, { color: success === false ? COLOR_DANGER : COLOR_TOOL_OUTPUT }, displayed)));
-    }
-    // Special handling for search_replace
-    if (toolName === TOOL_NAME_SEARCH_REPLACE && toolArgs) {
-        // For search_replace that had an approval prompt (user said 'y'), only show output
-        if (hadApproval) {
+        if ((toolName === 'run_subagent_async' || isBackgroundSubagentLaunch) && success === false) {
+            let launchError = output;
+            try {
+                const parsed = JSON.parse(output);
+                launchError = parsed?.error?.message ?? parsed?.error ?? output;
+            }
+            catch {
+                // The formatter may already have reduced the structured failure to text.
+            }
             return (React.createElement(Box, { flexDirection: "column" },
-                React.createElement(Text, { color: success === false ? COLOR_DANGER : COLOR_TOOL_OUTPUT }, displayed)));
-        }
-        // For auto-approved search_replace (no approval prompt), show diff + output
-        return (React.createElement(Box, { flexDirection: "column" },
-            renderStandardHeader(),
-            actionableErrorSummary,
-            React.createElement(DiffView, { diff: diff }),
-            failureReason && React.createElement(Text, { color: COLOR_DANGER },
-                "Error: ",
-                failureReason),
-            React.createElement(Text, { color: success === false ? COLOR_DANGER : COLOR_TOOL_OUTPUT }, displayed)));
-    }
-    // Special handling for create_file
-    if (toolName === TOOL_NAME_CREATE_FILE && toolArgs) {
-        return (React.createElement(Box, { flexDirection: "column" },
-            renderStandardHeader(),
-            actionableErrorSummary,
-            success !== false && React.createElement(DiffView, { diff: createFileDiffLines }),
-            failureReason && React.createElement(Text, { color: COLOR_DANGER },
-                "Error: ",
-                failureReason),
-            React.createElement(Text, { color: success === false ? COLOR_DANGER : COLOR_TOOL_OUTPUT }, displayed)));
-    }
-    if ((toolName === 'run_subagent_async' || isBackgroundSubagentLaunch) && success === false) {
-        let launchError = output;
-        try {
-            const parsed = JSON.parse(output);
-            launchError = parsed?.error?.message ?? parsed?.error ?? output;
-        }
-        catch {
-            // The formatter may already have reduced the structured failure to text.
-        }
-        return (React.createElement(Box, { flexDirection: "column" },
-            renderStandardHeader(),
-            React.createElement(Box, { paddingLeft: 2, marginTop: 0.5 },
-                React.createElement(Text, { color: COLOR_DANGER }, launchError))));
-    }
-    if (displayMode === 'standard' && toolName === 'run_code' && runCodeTrace && !isApprovalRejection) {
-        return React.createElement(RunCodeRenderer, { trace: runCodeTrace, success: success, renderStandardHeader: renderStandardHeader });
-    }
-    // Standard mode custom tool renderers
-    if (displayMode === 'standard' && success !== false && !failureReason && !isRunning && !isQueued && !isWaiting) {
-        if (toolName === 'read_file' || toolName === 'view_file') {
-            const result = ReadFileRenderer({ output, renderStandardHeader });
-            if (result)
-                return result;
+                renderStandardHeader(),
+                React.createElement(Box, { flexDirection: "column", marginTop: 0.5 },
+                    React.createElement(ToolSection, { variant: "indent" },
+                        React.createElement(Text, { color: theme.danger }, launchError)))));
         }
-        if (toolName === 'grep') {
-            const result = GrepRenderer({ output, renderStandardHeader });
-            if (result)
-                return result;
+        if (displayMode === 'standard' && toolName === 'run_code' && runCodeTrace && !isApprovalRejection) {
+            return React.createElement(RunCodeRenderer, { trace: runCodeTrace, success: success, renderStandardHeader: renderStandardHeader });
         }
-        if (toolName === 'glob') {
-            const parsed = parseFindFilesOutput(output);
-            if (parsed) {
-                const { files, note } = parsed;
+        // Standard mode custom tool renderers
+        if (displayMode === 'standard' && success !== false && !failureReason && !isRunning && !isQueued && !isWaiting) {
+            if (toolName === 'read_file' || toolName === 'view_file') {
+                const result = ReadFileRenderer({ output, renderStandardHeader });
+                if (result)
+                    return result;
+            }
+            if (toolName === 'grep') {
+                const result = GrepRenderer({ output, renderStandardHeader });
+                if (result)
+                    return result;
+            }
+            if (toolName === 'glob') {
+                const parsed = parseFindFilesOutput(output);
+                if (parsed) {
+                    const { files, note } = parsed;
+                    return (React.createElement(Box, { flexDirection: "column" },
+                        React.createElement(Box, { marginBottom: 1 }, renderStandardHeader()),
+                        React.createElement(ToolSection, { variant: "indent" }, files.map((file, idx) => (React.createElement(Text, { key: idx, color: theme.toolOutput }, file)))),
+                        note && (React.createElement(Box, { marginTop: 1 },
+                            React.createElement(Text, { color: theme.warning }, note)))));
+                }
+            }
+            if ((toolName === 'run_subagent' && !isBackgroundSubagentLaunch) || toolName === 'get_subagent_result') {
+                const parsed = parseSubagentOutput(output, toolArgs);
+                if (parsed) {
+                    const { role: _role, status, toolsUsed, filesChanged, mainText } = parsed;
+                    const _statusColor = status === 'completed' ? theme.textMuted : status === 'failed' ? theme.danger : theme.warning;
+                    return (React.createElement(Box, { flexDirection: "column" },
+                        renderStandardHeader(),
+                        (toolsUsed || filesChanged) && (React.createElement(Box, { flexDirection: "column", marginY: 0.5 },
+                            React.createElement(ToolSection, { variant: "indent" },
+                                toolsUsed && (React.createElement(Text, { color: theme.textSubtle },
+                                    "Tools: ",
+                                    React.createElement(Text, { color: theme.text }, toolsUsed))),
+                                filesChanged && (React.createElement(Text, { color: theme.textSubtle },
+                                    "Changed: ",
+                                    React.createElement(Text, { color: theme.text }, filesChanged)))))),
+                        mainText && (React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+                            React.createElement(ToolSection, { variant: "panel" },
+                                React.createElement(Text, { color: theme.toolOutput }, mainText))))));
+                }
+            }
+            if (toolName === 'run_subagent_async' || isBackgroundSubagentLaunch) {
+                let runId;
+                try {
+                    const parsed = JSON.parse(output);
+                    runId = parsed?.runId;
+                }
+                catch {
+                    // Fall back to treating the whole output as the runId.
+                    runId = output;
+                }
                 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)))));
+                    renderStandardHeader(),
+                    React.createElement(Box, { flexDirection: "column", marginTop: 0.5 },
+                        React.createElement(ToolSection, { variant: "indent" },
+                            React.createElement(Box, null,
+                                React.createElement(Text, { color: theme.textSubtle }, "Run ID: "),
+                                React.createElement(Text, { color: theme.textMuted }, runId || output))))));
             }
-        }
-        if ((toolName === 'run_subagent' && !isBackgroundSubagentLaunch) || toolName === 'get_subagent_result') {
-            const parsed = parseSubagentOutput(output, toolArgs);
-            if (parsed) {
-                const { role: _role, status, toolsUsed, filesChanged, mainText } = parsed;
-                const _statusColor = status === 'completed' ? COLOR_TEXT_MUTED : status === 'failed' ? COLOR_DANGER : COLOR_WARNING;
+            if (toolName === 'web_search') {
+                const result = WebSearchRenderer({ output, renderStandardHeader });
+                if (result)
+                    return result;
+            }
+            if (toolName === 'web_fetch') {
+                const result = WebFetchRenderer({ output, renderStandardHeader });
+                if (result)
+                    return result;
+            }
+            if (toolName === 'ask_mentor') {
                 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_TEXT_SUBTLE },
-                            "Tools: ",
-                            React.createElement(Text, { color: COLOR_TEXT }, toolsUsed))),
-                        filesChanged && (React.createElement(Text, { color: COLOR_TEXT_SUBTLE },
-                            "Changed: ",
-                            React.createElement(Text, { color: COLOR_TEXT }, filesChanged))))),
-                    mainText && (React.createElement(Box, { flexDirection: "column", borderStyle: "single", borderColor: COLOR_ACCENT, paddingX: 1, marginTop: 1 },
-                        React.createElement(Text, { color: COLOR_TOOL_OUTPUT }, mainText)))));
+                    React.createElement(Box, { flexDirection: "column", marginTop: 1 },
+                        React.createElement(ToolSection, { variant: "callout", title: "Mentor Response", tone: "accentAlt" },
+                            React.createElement(Text, { color: theme.toolOutput }, output)))));
             }
-        }
-        if (toolName === 'run_subagent_async' || isBackgroundSubagentLaunch) {
-            let runId;
-            try {
-                const parsed = JSON.parse(output);
-                runId = parsed?.runId;
+            if (toolName === 'ask_user') {
+                const options = toolArgs?.options;
+                return (React.createElement(Box, { flexDirection: "column" },
+                    renderStandardHeader(),
+                    options && Array.isArray(options) && options.length > 0 && (React.createElement(Box, { flexDirection: "column", marginY: 0.5 },
+                        React.createElement(ToolSection, { variant: "indent" },
+                            React.createElement(Box, null,
+                                React.createElement(Text, { color: theme.textSubtle }, "Options: "),
+                                options.map((opt, idx) => (React.createElement(Text, { key: idx, color: idx === 0 ? theme.textMuted : theme.text },
+                                    idx > 0 ? ', ' : '',
+                                    "[",
+                                    opt,
+                                    "]",
+                                    idx === 0 ? ' (Recommended)' : ''))))))),
+                    React.createElement(Box, { flexDirection: "column", marginTop: 0.5 },
+                        React.createElement(ToolSection, { variant: "indent" },
+                            React.createElement(Box, null,
+                                React.createElement(Text, { color: theme.textSubtle }, "Response: "),
+                                React.createElement(Text, { color: theme.textMuted, bold: true }, output || 'No response yet'))))));
             }
-            catch {
-                // Fall back to treating the whole output as the runId.
-                runId = output;
+            if (toolName === 'read_code_outline') {
+                const parsed = parseCodeOutlineOutput(output);
+                if (parsed) {
+                    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 },
+                            React.createElement(ToolSection, { variant: "indent" },
+                                React.createElement(Text, { color: theme.warning, bold: true }, "Imports:"),
+                                imports.map((imp, idx) => (React.createElement(Text, { key: idx, color: theme.toolOutput },
+                                    ' ',
+                                    "\u2022 ",
+                                    imp)))))),
+                        exports && exports.length > 0 && (React.createElement(Box, { flexDirection: "column", marginBottom: 1 },
+                            React.createElement(ToolSection, { variant: "indent" },
+                                React.createElement(Text, { color: theme.textMuted, bold: true }, "Exports:"),
+                                exports.map((exp, idx) => (React.createElement(Text, { key: idx, color: theme.toolOutput },
+                                    ' ',
+                                    "\u2022 ",
+                                    exp)))))),
+                        decls && decls.length > 0 && (React.createElement(ToolSection, { variant: "indent" },
+                            React.createElement(Text, { color: theme.accent, bold: true }, "Declarations:"),
+                            decls.map((decl, idx) => (React.createElement(Text, { key: idx, color: theme.toolOutput },
+                                ' ',
+                                "\u2022 ",
+                                decl)))))));
+                }
+            }
+            if (toolName === 'code_context_search') {
+                const result = CodeContextSearchRenderer({ output, renderStandardHeader });
+                if (result)
+                    return result;
+            }
+            if (toolName && toolName.startsWith('memory_')) {
+                const result = MemoryRenderer({
+                    output,
+                    toolName,
+                    query: typeof toolArgs?.query === 'string' ? toolArgs.query : undefined,
+                    renderStandardHeader,
+                });
+                if (result)
+                    return result;
             }
-            return (React.createElement(Box, { flexDirection: "column" },
-                renderStandardHeader(),
-                React.createElement(Box, { paddingLeft: 2, marginTop: 0.5 },
-                    React.createElement(Text, { color: COLOR_TEXT_SUBTLE }, "Run ID: "),
-                    React.createElement(Text, { color: COLOR_TEXT_MUTED }, runId || output))));
-        }
-        if (toolName === 'web_search') {
-            const result = WebSearchRenderer({ output, renderStandardHeader });
-            if (result)
-                return result;
-        }
-        if (toolName === 'web_fetch') {
-            const result = WebFetchRenderer({ output, renderStandardHeader });
-            if (result)
-                return result;
-        }
-        if (toolName === 'ask_mentor') {
-            return (React.createElement(Box, { flexDirection: "column" },
-                renderStandardHeader(),
-                React.createElement(Box, { flexDirection: "column", borderStyle: "round", borderColor: COLOR_ACCENT_ALT, paddingX: 1, marginTop: 1 },
-                    React.createElement(Text, { color: COLOR_ACCENT_ALT, bold: true }, "Mentor Response"),
-                    React.createElement(Text, { color: COLOR_TOOL_OUTPUT }, output))));
         }
-        if (toolName === 'ask_user') {
-            const options = toolArgs?.options;
+        // 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) {
             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_TEXT_SUBTLE }, "Options: "),
-                    options.map((opt, idx) => (React.createElement(Text, { key: idx, color: idx === 0 ? COLOR_TEXT_MUTED : COLOR_TEXT },
-                        idx > 0 ? ', ' : '',
-                        "[",
-                        opt,
-                        "]",
-                        idx === 0 ? ' (Recommended)' : ''))))),
-                React.createElement(Box, { paddingLeft: 2, marginTop: 0.5 },
-                    React.createElement(Text, { color: COLOR_TEXT_SUBTLE }, "Response: "),
-                    React.createElement(Text, { color: COLOR_TEXT_MUTED, bold: true }, output || 'No response yet'))));
-        }
-        if (toolName === 'read_code_outline') {
-            const parsed = parseCodeOutlineOutput(output);
-            if (parsed) {
-                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 }, "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_TEXT_MUTED, 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_ACCENT, bold: true }, "Declarations:"),
-                        decls.map((decl, idx) => (React.createElement(Text, { key: idx, color: COLOR_TOOL_OUTPUT },
-                            ' ',
-                            "\u2022 ",
-                            decl)))))));
-            }
-        }
-        if (toolName === 'code_context_search') {
-            const result = CodeContextSearchRenderer({ output, renderStandardHeader });
-            if (result)
-                return result;
-        }
-        if (toolName && toolName.startsWith('memory_')) {
-            const result = MemoryRenderer({
-                output,
-                toolName,
-                query: typeof toolArgs?.query === 'string' ? toolArgs.query : undefined,
-                renderStandardHeader,
-            });
-            if (result)
-                return result;
+                React.createElement(Text, { color: theme.danger },
+                    "\u2192 DENIED: ",
+                    denialReason)));
         }
-    }
-    // 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) {
         return (React.createElement(Box, { flexDirection: "column" },
             renderStandardHeader(),
-            React.createElement(Text, { color: COLOR_DANGER },
-                "\u2192 DENIED: ",
-                denialReason)));
-    }
-    return (React.createElement(Box, { flexDirection: "column" },
-        renderStandardHeader(),
-        actionableErrorSummary,
-        failureReason && React.createElement(Text, { color: COLOR_DANGER },
-            "Error: ",
-            failureReason),
-        React.createElement(Text, { color: success === false ? COLOR_DANGER : COLOR_TOOL_OUTPUT }, displayed),
-        autoApprovalLabel));
+            actionableErrorSummary,
+            failureReason && React.createElement(Text, { color: theme.danger },
+                "Error: ",
+                failureReason),
+            React.createElement(Text, { color: success === false ? theme.danger : theme.toolOutput }, displayed),
+            autoApprovalLabel));
+    };
+    const content = renderContent();
+    // A call inside a subagent's own feed is dense by design and is never framed.
+    return isSubagent ? (content) : (React.createElement(ToolFrame, { status: statusKind, display: displayMode, toolName: toolName }, content));
 };
 export default React.memo(CommandMessage);
 //# sourceMappingURL=CommandMessage.js.map