Codex Header

1import * as React from "react";
2import { cn } from "@/lib/utils";
3 
4/**
5 * CodexHeader — Codex CLI's launch card. Monochrome and terse, matching the
6 * real `>_ OpenAI Codex` box with its model / directory rows.
7 */
8export function CodexHeader({
9  version = "v0.132.0",
10  model = "gpt-5.6-sol low",
11  directory = "~/dev/brainless",
12  className,
13}: {
14  version?: string;
15  model?: string;
16  directory?: string;
17  className?: string;
18}) {
19  return (
20    <div
21      className={cn(
22        "min-w-0 rounded-[6px] border border-[#3a3a3a] px-3 py-3 font-mono text-[13px] leading-[1.7] text-[#ededed] sm:px-4",
23        className,
24      )}
25    >
26      <div className="flex min-w-0 flex-wrap items-baseline gap-x-2">
27        <span aria-hidden className="shrink-0 text-[#7a7a7a]">
28          {">_"}
29        </span>
30        <span className="font-medium">OpenAI Codex</span>
31        <span className="text-[#7a7a7a]">({version})</span>
32      </div>
33      <div className="mt-2 grid min-w-0 grid-cols-[max-content_minmax(0,1fr)] gap-x-3">
34        <span className="text-[#7a7a7a]">model:</span>
35        <span className="min-w-0 break-words">
36          {model}
37          <span className="ml-3 text-[#5cc2e0]">/model</span>
38          <span className="ml-1 text-[#7a7a7a]">to change</span>
39        </span>
40        <span className="text-[#7a7a7a]">directory:</span>
41        <span className="truncate">{directory}</span>
42      </div>
43    </div>
44  );
45}