Codex Diff

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * CodexDiff — Codex CLI's full-screen `/diff` pager.
6 *
7 * Captured grammar (v0.132): a spaced `D I F F` title bar padded with `/`,
8 * unified git diff body, vim-style `~` fillers, a percentage footer, and
9 * scroll / quit hints.
10 */
11export type CodexDiffLine = {
12  type: "meta" | "hunk" | "add" | "del" | "ctx" | "fill";
13  text: string;
14};
15 
16const FG = "#ededed";
17const DIM = "#7a7a7a";
18const GREEN = "#abdfa7";
19const RED = "#f2a0a0";
20const META = "#f6e2b7";
21 
22const DEFAULT_LINES: CodexDiffLine[] = [
23  { type: "meta", text: "diff --git a/scratch.txt b/scratch.txt" },
24  { type: "meta", text: "index e382994..401fe17 100644" },
25  { type: "meta", text: "--- a/scratch.txt" },
26  { type: "meta", text: "+++ b/scratch.txt" },
27  { type: "hunk", text: "@@ -1 +1 @@" },
28  { type: "del", text: "-hello scratch" },
29  { type: "add", text: "+hello scratch edited" },
30  { type: "meta", text: "diff --git a/other.txt b/other.txt" },
31  { type: "meta", text: "new file mode 100644" },
32  { type: "meta", text: "index 0000000..fa49b07" },
33  { type: "meta", text: "--- /dev/null" },
34  { type: "meta", text: "+++ b/other.txt" },
35  { type: "hunk", text: "@@ -0,0 +1 @@" },
36  { type: "add", text: "+new file" },
37];
38 
39function titleBar(cols = 80) {
40  const label = "D I F F";
41  const inner = `/ ${label} ${"/ ".repeat(40)}`.trimEnd();
42  return (inner + " /".repeat(cols)).slice(0, cols);
43}
44 
45function lineColor(type: CodexDiffLine["type"]) {
46  switch (type) {
47    case "add":
48      return GREEN;
49    case "del":
50      return RED;
51    case "hunk":
52      return META;
53    case "fill":
54      return DIM;
55    default:
56      return FG;
57  }
58}
59 
60export function CodexDiff({
61  lines = DEFAULT_LINES,
62  percent = 100,
63  fillRows = 8,
64  className,
65}: {
66  lines?: CodexDiffLine[];
67  percent?: number;
68  fillRows?: number;
69  className?: string;
70}) {
71  const body = [
72    ...lines,
73    ...Array.from({ length: fillRows }, () => ({
74      type: "fill" as const,
75      text: "~",
76    })),
77  ];
78 
79  return (
80    <div
81      className={cn(
82        "overflow-hidden rounded-none border border-[#2a2a2a] bg-[#1a1a1a] font-mono text-[13px] leading-[1.45]",
83        className,
84      )}
85      role="region"
86      aria-label="Diff pager"
87    >
88      <div
89        className="truncate px-2 py-1 text-[12px] tracking-wide"
90        style={{ color: DIM, background: "#121212" }}
91      >
92        {titleBar(88)}
93      </div>
94 
95      <pre className="overflow-x-auto px-2 py-1.5">
96// … truncated