in codex-cli/src/components/chat/terminal-chat-tool-call-command.tsx [7:77]
export function TerminalChatToolCallCommand({
commandForDisplay,
explanation,
}: {
commandForDisplay: string;
explanation?: string;
}): React.ReactElement {
// -------------------------------------------------------------------------
// Colorize diff output inside the command preview: we detect individual
// lines that begin with '+' or '-' (excluding the typical diff headers like
// '+++', '---', '++', '--') and apply green/red coloring. This mirrors
// how Git shows diffs and makes the patch easier to review.
// -------------------------------------------------------------------------
const colorizedCommand = commandForDisplay
.split("\n")
.map((line) => {
if (line.startsWith("+") && !line.startsWith("++")) {
return chalk.green(line);
}
if (line.startsWith("-") && !line.startsWith("--")) {
return chalk.red(line);
}
return line;
})
.join("\n");
return (
<>
<Text bold color="green">
Shell Command
</Text>
<Text>
<Text dimColor>$</Text> {colorizedCommand}
</Text>
{explanation && (
<>
<Text bold color="yellow">
Explanation
</Text>
{explanation.split("\n").map((line, i) => {
// Apply different styling to headings (numbered items)
if (line.match(/^\d+\.\s+/)) {
return (
<Text key={i} bold color="cyan">
{line}
</Text>
);
} else if (line.match(/^\s*\*\s+/)) {
// Style bullet points
return (
<Text key={i} color="magenta">
{line}
</Text>
);
} else if (line.match(/^(WARNING|CAUTION|NOTE):/i)) {
// Style warnings
return (
<Text key={i} bold color="red">
{line}
</Text>
);
} else {
return <Text key={i}>{line}</Text>;
}
})}
</>
)}
</>
);
}