Codex Prompt

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/**
7 * CodexPrompt — Codex CLI's input composer.
8 *
9 * The input sits on a full-width gray surface (Codex `user_message_bg`: white
10 * blended at 12% over the terminal background — `#353535` on `--term-bg`
11 * `#1a1a1a`). No top/bottom rules. One blank row of that surface pads above
12 * and below the `›` line; the status row sits outside it.
13 */
14export type CodexMode = "default" | "plan";
15 
16const MODEL = "#f6e2b7"; // 38;2;246;226;183
17const CWD = "#abdfa7"; // 38;2;171;223;167
18const PLAN = "#bb9af7"; // 38;5;5 → tokyo magenta (not hot pink)
19const DIM = "#7a7a7a";
20const FG = "#ededed";
21/** Codex `user_message_bg` for `--term-bg` #1a1a1a (white @ 12%). */
22const INPUT_BG = "#353535";
23 
24export function CodexPrompt({
25  value,
26  defaultValue = "",
27  onChange,
28  onKeyDown,
29  placeholder = "Use /skills to list available skills",
30  mode = "default",
31  model = "gpt-5.6-sol low",
32  directory = "~/dev/brainless",
33  className,
34  inputClassName,
35}: {
36  value?: string;
37  defaultValue?: string;
38  onChange?: React.ChangeEventHandler<HTMLInputElement>;
39  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
40  placeholder?: string;
41  mode?: CodexMode;
42  model?: string;
43  directory?: string;
44  className?: string;
45  inputClassName?: string;
46}) {
47  const controlled = value !== undefined;
48  const displayModel =
49    mode === "plan" && model.includes(" low")
50      ? model.replace(" low", " medium")
51      : model;
52 
53  return (
54    <div className={cn("min-w-0 font-mono text-[13px] leading-[1.6]", className)}>
55      <div
56        className="min-w-0 py-[1lh] pr-[1ch]"
57        style={{ background: INPUT_BG, color: FG }}
58      >
59        <div className="flex min-w-0 items-center">
60          <span aria-hidden className="inline-block w-[2ch] shrink-0 font-bold">
61            ›
62          </span>
63          <input
64            type="text"
65            aria-label="Prompt"
66            placeholder={placeholder}
67            onKeyDown={onKeyDown}
68            {...(controlled
69              ? { value, onChange }
70              : { defaultValue, onChange })}
71            className={cn(
72              "term-input min-w-0 flex-1 bg-transparent outline-none placeholder:text-[#7a7a7a]",
73              inputClassName,
74            )}
75            style={
76              {
77                color: FG,
78                caretColor: FG,
79                caretShape: "block",
80              } as React.CSSProperties
81            }
82// … truncated