Initial commit

Signed-off-by: Ilan Bigio <ilan@openai.com>

codex-cli/src/components/chat/terminal-chat-tool-call-item.tsx

@@ -0,0 +1,106 @@
+import { shortenPath } from "../../utils/short-path";
+import { parseApplyPatch } from "@lib/parse-apply-patch";
+import chalk from "chalk";
+import { Text } from "ink";
+import React from "react";
+
+export function TerminalChatToolCallCommand({
+  commandForDisplay,
+}: {
+  commandForDisplay: 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>Shell Command</Text>
+      <Text>
+        <Text dimColor>$</Text> {colorizedCommand}
+      </Text>
+    </>
+  );
+}
+
+export function TerminalChatToolCallApplyPatch({
+  commandForDisplay,
+  patch,
+}: {
+  commandForDisplay: string;
+  patch: string;
+}): React.ReactElement {
+  const ops = React.useMemo(() => parseApplyPatch(patch), [patch]);
+  const firstOp = ops?.[0];
+
+  const title = React.useMemo(() => {
+    if (!firstOp) {
+      return "";
+    }
+    return capitalize(firstOp.type);
+  }, [firstOp]);
+
+  const filePath = React.useMemo(() => {
+    if (!firstOp) {
+      return "";
+    }
+    return shortenPath(firstOp.path || ".");
+  }, [firstOp]);
+
+  if (ops == null) {
+    return (
+      <>
+        <Text bold color="red">
+          Invalid Patch
+        </Text>
+        <Text color="red" dimColor>
+          The provided patch command is invalid.
+        </Text>
+        <Text dimColor>{commandForDisplay}</Text>
+      </>
+    );
+  }
+
+  if (!firstOp) {
+    return (
+      <>
+        <Text bold color="yellow">
+          Empty Patch
+        </Text>
+        <Text color="yellow" dimColor>
+          No operations found in the patch command.
+        </Text>
+        <Text dimColor>{commandForDisplay}</Text>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Text>
+        <Text bold>{title}</Text> <Text dimColor>{filePath}</Text>
+      </Text>
+      <Text>
+        <Text dimColor>$</Text> {commandForDisplay}
+      </Text>
+    </>
+  );
+}
+
+const capitalize = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);