Codex Exec

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * CodexExec — a Codex action/exec line: a command or edit with an optional
6 * result count, and expandable output as a real <details> disclosure.
7 */
8type Status = "ok" | "error" | "run";
9 
10const DOT: Record<Status, string> = {
11  ok: "#4ea96f",
12  error: "#f7768e",
13  run: "#e0af68",
14};
15 
16export function CodexExec({
17  command,
18  result,
19  status = "ok",
20  defaultOpen = false,
21  className,
22  children,
23}: {
24  command: string;
25  result?: string;
26  status?: Status;
27  defaultOpen?: boolean;
28  className?: string;
29  children?: React.ReactNode;
30}) {
31  const expandable = Boolean(children);
32  return (
33    <details
34      open={defaultOpen}
35      className={cn(
36        "group font-mono text-[13px] leading-[1.55] [&_summary::-webkit-details-marker]:hidden",
37        className,
38      )}
39    >
40      <summary
41        className={cn(
42          "flex min-w-0 list-none items-baseline gap-2 outline-none",
43          expandable ? "cursor-pointer" : "cursor-default",
44          "focus-visible:ring-1 focus-visible:ring-[#5cc2e0]/60",
45        )}
46      >
47        <span aria-hidden className="shrink-0" style={{ color: DOT[status] }}>
48          •
49        </span>
50        <span className="min-w-0 break-words text-[#5cc2e0]">{command}</span>
51        {result ? <span className="shrink-0 text-[#7a7a7a]">{result}</span> : null}
52        {expandable ? (
53          <span className="shrink-0 text-[#565656] group-open:hidden">▸</span>
54        ) : null}
55      </summary>
56      {expandable ? (
57        <pre className="mt-1 overflow-x-auto whitespace-pre-wrap pl-4 text-[#8a8a8a]">
58          {children}
59        </pre>
60      ) : null}
61    </details>
62  );
63}