{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "codex-markdown",
  "title": "Codex Markdown",
  "description": "Bullet lists, tables with yellow headers and green inline code, styled like Codex answers.",
  "dependencies": [
    "cn"
  ],
  "registryDependencies": [
    "card",
    "collapsible"
  ],
  "files": [
    {
      "path": "registry/notra/codex/components/codex-markdown.tsx",
      "content": "import { cn } from \"cn\";\nimport type { ComponentProps, ReactNode } from \"react\";\n\nimport type { CodexListProps, CodexTableProps } from \"../types/codex\";\n\nconst withTextKeys = <T,>(items: readonly T[], toText: (item: T) => string) => {\n  const seen = new Map<string, number>();\n  return items.map((item) => {\n    const text = toText(item);\n    const count = (seen.get(text) ?? 0) + 1;\n    seen.set(text, count);\n    return { item, key: `${text}#${count}` };\n  });\n};\n\nconst nodeText = (node: ReactNode): string =>\n  typeof node === \"string\" || typeof node === \"number\" ? String(node) : \"\";\n\nexport const CodexCode = ({ className, ...props }: ComponentProps<\"code\">) => (\n  <code\n    className={cn(\"text-codex-green font-[inherit]\", className)}\n    data-slot=\"codex-code\"\n    {...props}\n  />\n);\n\nexport const CodexList = ({ className, items, ...props }: CodexListProps) => (\n  <ul\n    className={cn(\"grid grid-cols-[2ch_minmax(0,1fr)]\", className)}\n    data-slot=\"codex-list\"\n    {...props}\n  >\n    {withTextKeys(items, nodeText).map(({ item, key }) => (\n      <li className=\"contents\" key={key}>\n        <span aria-hidden=\"true\">•</span>\n        <span className=\"min-w-0\">{item}</span>\n      </li>\n    ))}\n  </ul>\n);\n\nexport const CodexTable = ({\n  className,\n  codeColumns = [],\n  headers,\n  rows,\n  ...props\n}: CodexTableProps) => {\n  const codeColumnSet = new Set(codeColumns);\n\n  return (\n    <div className=\"-ms-[2ch] max-w-[calc(100%+2ch)] overflow-x-auto\">\n      <table\n        className={cn(\n          \"w-auto caption-bottom border-separate border-spacing-x-[2ch] border-spacing-y-0 text-start text-[length:inherit]\",\n          className\n        )}\n        data-slot=\"codex-table\"\n        {...props}\n      >\n        <thead>\n          <tr>\n            {headers.map((header) => (\n              <th\n                className=\"border-codex-rule text-codex-yellow border-b-2 px-[1ch] pb-[0.65em] text-start align-middle font-bold\"\n                key={header}\n                scope=\"col\"\n              >\n                {header}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {withTextKeys(rows, (row) => row.map(nodeText).join(\"|\")).map(\n            ({ item: row, key }) => (\n              <tr className=\"group/codex-row\" key={key}>\n                {row.map((cell, columnIndex) => (\n                  <td\n                    className={cn(\n                      \"border-codex-rule border-b px-[1ch] py-[0.65em] align-top group-last/codex-row:border-b-0\",\n                      codeColumnSet.has(columnIndex) && \"text-codex-green\"\n                    )}\n                    key={headers[columnIndex] ?? `extra-${columnIndex}`}\n                  >\n                    {cell}\n                  </td>\n                ))}\n              </tr>\n            )\n          )}\n        </tbody>\n      </table>\n    </div>\n  );\n};\n",
      "type": "registry:component",
      "target": "components/codex/components/codex-markdown.tsx"
    },
    {
      "path": "registry/notra/codex/types/codex.ts",
      "content": "import type { ComponentProps, ReactNode } from \"react\";\n\nimport type { Card } from \"@/components/ui/card\";\nimport type { Collapsible } from \"@/components/ui/collapsible\";\n\nexport type CodexExecStatus = \"ran\" | \"running\" | \"failed\";\n\nexport type CodexMessageAuthor = \"user\" | \"assistant\";\n\nexport type CodexShellTokenKind =\n  | \"command\"\n  | \"flag\"\n  | \"string\"\n  | \"operator\"\n  | \"argument\"\n  | \"space\";\n\nexport interface CodexShellToken {\n  kind: CodexShellTokenKind;\n  text: string;\n}\n\nexport type CodexExploredVerb = \"Read\" | \"Search\" | \"List\";\n\nexport interface CodexExploredItem {\n  id: string;\n  scope?: string;\n  target: string;\n  verb: CodexExploredVerb;\n}\n\nexport interface CodexTerminalProps extends Omit<\n  ComponentProps<typeof Card>,\n  \"title\"\n> {\n  footer?: ReactNode;\n  title?: ReactNode;\n}\n\nexport interface CodexHeaderProps extends ComponentProps<\"div\"> {\n  cwd?: string;\n  greeting?: ReactNode;\n  version?: string;\n}\n\nexport interface CodexMessageProps extends ComponentProps<\"div\"> {\n  from?: CodexMessageAuthor;\n}\n\nexport interface CodexReasoningProps extends ComponentProps<\"div\"> {\n  children?: ReactNode;\n}\n\nexport interface CodexExecProps extends Omit<\n  ComponentProps<typeof Collapsible>,\n  \"children\"\n> {\n  command: string;\n  output?: string;\n  previewLines?: number;\n  status?: CodexExecStatus;\n}\n\nexport interface CodexExploredProps extends Omit<\n  ComponentProps<typeof Collapsible>,\n  \"children\"\n> {\n  active?: boolean;\n  details?: CodexExploredItem[];\n  items: CodexExploredItem[];\n}\n\nexport interface CodexWorkingProps extends ComponentProps<\"div\"> {\n  elapsed?: string;\n  label?: string;\n}\n\nexport interface CodexInterruptedProps extends ComponentProps<\"div\"> {\n  children?: ReactNode;\n}\n\nexport interface CodexTableProps extends ComponentProps<\"table\"> {\n  codeColumns?: number[];\n  headers: string[];\n  rows: ReactNode[][];\n}\n\nexport interface CodexListProps extends ComponentProps<\"ul\"> {\n  items: ReactNode[];\n}\n\nexport interface CodexComposerProps extends Omit<\n  ComponentProps<\"input\">,\n  \"className\" | \"type\"\n> {\n  /** A turn is running: Enter does not send and Escape calls `onStop`. */\n  busy?: boolean;\n  className?: string;\n  context?: string;\n  cwd?: string;\n  effort?: string;\n  inputClassName?: string;\n  model?: string;\n  /**\n   * Called with the trimmed text on Enter. An uncontrolled composer clears\n   * afterwards; with `value`, clear it yourself here.\n   */\n  onSend?: (text: string) => void;\n  /** Called on Escape while `busy`, to interrupt the running turn. */\n  onStop?: () => void;\n  task?: string;\n  warnings?: number;\n}\n\nexport interface CodexDemoExec {\n  command: string;\n  id: string;\n  output?: string;\n  status: CodexExecStatus;\n}\n\nexport interface CodexDemoHighlight {\n  id: string;\n  label: string;\n  text: string;\n}\n\nexport interface CodexDemoSession {\n  composer: {\n    effort: string;\n    model: string;\n    placeholder: string;\n    task: string;\n    warnings: number;\n  };\n  exec: {\n    command: string;\n    output: string;\n  };\n  explored: CodexExploredItem[];\n  exploredDetails: CodexExploredItem[];\n  followUp: string;\n  header: {\n    cwd: string;\n    version: string;\n  };\n  highlights: CodexDemoHighlight[];\n  intro: string;\n  reasoning: string;\n  summary: string;\n  table: {\n    headers: string[];\n    rows: string[][];\n  };\n  tableIntro: string;\n  title: string;\n  userMessage: string;\n}\n\nexport type CodexTurnStatus = \"working\" | \"streaming\" | \"done\" | \"interrupted\";\n\n/** A scripted answer the demo plays back when you send a prompt. */\nexport interface CodexReply {\n  /** Commands Codex runs before it answers, with their final status. */\n  execs: CodexDemoExec[];\n  /** The answer. Blank lines split paragraphs, backticks mark code. */\n  text: string;\n}\n\nexport interface CodexChatTurn {\n  execs: CodexDemoExec[];\n  id: string;\n  prompt: string;\n  reply: string;\n  status: CodexTurnStatus;\n}\n\nexport interface CodexChat {\n  busy: boolean;\n  /** Whole seconds since the running turn started. */\n  elapsed: number;\n  send: (text: string) => Promise<void>;\n  stop: () => void;\n  turns: CodexChatTurn[];\n}\n",
      "type": "registry:lib",
      "target": "components/codex/types/codex.ts"
    }
  ],
  "cssVars": {
    "theme": {
      "color-codex-bg": "var(--codex-bg)",
      "color-codex-titlebar": "var(--codex-titlebar)",
      "color-codex-dot": "var(--codex-dot)",
      "color-codex-title": "var(--codex-title)",
      "color-codex-shadow": "var(--codex-shadow)",
      "color-codex-ring": "var(--codex-ring)",
      "color-codex-fg": "var(--codex-fg)",
      "color-codex-dim": "var(--codex-dim)",
      "color-codex-muted": "var(--codex-muted)",
      "color-codex-rule": "var(--codex-rule)",
      "color-codex-band": "var(--codex-band)",
      "color-codex-composer": "var(--codex-composer)",
      "color-codex-placeholder": "var(--codex-placeholder)",
      "color-codex-cursor": "var(--codex-cursor)",
      "color-codex-blue": "var(--codex-blue)",
      "color-codex-command": "var(--codex-command)",
      "color-codex-arg": "var(--codex-arg)",
      "color-codex-operator": "var(--codex-operator)",
      "color-codex-flag": "var(--codex-flag)",
      "color-codex-green": "var(--codex-green)",
      "color-codex-success": "var(--codex-success)",
      "color-codex-yellow": "var(--codex-yellow)",
      "color-codex-amber": "var(--codex-amber)",
      "color-codex-red": "var(--codex-red)",
      "font-codex": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace"
    },
    "light": {
      "codex-bg": "#ffffff",
      "codex-titlebar": "#ececec",
      "codex-dot": "#d4d4d4",
      "codex-title": "#00000073",
      "codex-shadow": "#00000026",
      "codex-ring": "#0000001a",
      "codex-fg": "#1a1a1a",
      "codex-dim": "#5c5c5c",
      "codex-muted": "#767676",
      "codex-rule": "#e0e0e0",
      "codex-band": "#f0f0f0",
      "codex-composer": "#f3f3f3",
      "codex-placeholder": "#8a8a8a",
      "codex-cursor": "#d6006a",
      "codex-blue": "#0a6fd6",
      "codex-command": "#1f5fbf",
      "codex-arg": "#3d4f8f",
      "codex-operator": "#0f7f70",
      "codex-flag": "#c0364d",
      "codex-green": "#1f8a3a",
      "codex-success": "#00852a",
      "codex-yellow": "#8f6200",
      "codex-amber": "#8a6420",
      "codex-red": "#d12f2f"
    },
    "dark": {
      "codex-bg": "#0f0f0f",
      "codex-titlebar": "#1c1c1c",
      "codex-dot": "#3a3a3a",
      "codex-title": "#ffffff66",
      "codex-shadow": "#00000033",
      "codex-ring": "#ffffff00",
      "codex-fg": "#f7f7f7",
      "codex-dim": "#909090",
      "codex-muted": "#777777",
      "codex-rule": "#343434",
      "codex-band": "#2d2d2d",
      "codex-composer": "#252525",
      "codex-placeholder": "#868686",
      "codex-cursor": "#fc0076",
      "codex-blue": "#3c9ffc",
      "codex-command": "#70abfa",
      "codex-arg": "#c3cff4",
      "codex-operator": "#6cdfcd",
      "codex-flag": "#f3909f",
      "codex-green": "#85df8d",
      "codex-success": "#00a12e",
      "codex-yellow": "#fcdb9b",
      "codex-amber": "#be9952",
      "codex-red": "#ff6b6b"
    }
  },
  "type": "registry:component"
}