Repository files navigation

Codex Decoded

The Codex Codex — an architectural field guide to openai/codex.

Codex Decoded — Inside the Architecture of the Codex Coding Agent

An interactive, book-style technical guide that reads the Codex source tree (openai/codex, ~90 Rust crates) and explains how a production coding agent is actually built — the turn loop, context engineering, the tool system, the safety model, extensibility, and the protocol that fronts it all. It is 36 chapters of prose backed by annotated real source, interactive diagrams (a D3 dependency graph of every crate, Chart.js breakdowns, Mermaid sequence/flow diagrams), an architecture map, and the verbatim Codex system prompts.

It ships as a small single-page app: a hash router renders one chapter module at a time into the page, with per-chapter interactive widgets wired up on navigation.

What it covers

The book is a top-to-bottom pass over the agent, following a single request from the interface it arrives on, through the engine that runs it, to the world it acts on:

  • The agent loop — how a thread holds sessions, how a turn is assembled, sent to the model, and folded back in; how work is made durable and replayable.
  • Context engineering — treating the prompt as a budget: layered per-model system prompts, diffed self-rendering context fragments, compaction when the window fills, and cross-session memory.
  • The tool system — the registry/router and spec-vs-handler split; running shell commands; editing files through a formal patch grammar; deferring rarely-used tools and discovering them on demand; and Code Mode, where the model writes a program instead of making tool calls.
  • The safety model — the mandatory gate every side-effect crosses: approval policy, a risk-scoring guardian model, execution policy, and kernel-level OS sandboxes.
  • The nervous system — MCP (Codex as both client and server), model providers and auth, and the typed duplex app-server protocol every client speaks.
  • Coordinated minds — planning discipline, sub-agent delegation, reusable Skills, and hooks/plugins that extend the loop without forking.
  • The edges — the 226k-line terminal UI, headless/cloud execution, and observability (traces, analytics, replay).
  • Patterns & retrospective — the recurring design grammar of the codebase and a distilled "what to steal" for building your own agent.

How this book was built

In a fitting twist, the book about Codex was researched and written by a fleet of Codex agents — with Claude Code as the orchestrator and every sub-agent a separate Codex instance. No chapter was written in one pass. Each one was mapped, verified, drafted, reviewed, illustrated, reviewed again, and only then put in front of a human — repeatedly.

The fleet ran continuously for ~9 hours (excluding the author's own reading and comments), then a further ~3 hours of autonomous polishing — roughly 12 hours of agent work in total, wrapped around several human review passes.

The pipeline

flowchart TD
O["Orchestrator · Claude Code"]
O ==> A1["Recon — Researcher + Scanner agents<br/>map ~90 crates into an architecture model"]
A1 --> A2["Deep-dive — one Codex agent per<br/>module &amp; client, running in parallel"]
A2 --> A3{"Reviewers confirm<br/>findings against source"}
A3 -->|gaps| A2
A3 -->|verified| O
O ==> B1["Draft — technical writer<br/>Codex sub-agents"]
B1 --> B2{"Reviewers check<br/>prose against source"}
B2 -->|rewrite| B1
B2 -->|approved| O
O ==> C1["Visualise — diagram &amp; visual<br/>Codex sub-agents"]
C1 --> C2{"Reviewers verify<br/>every diagram"}
C2 -->|fix| C1
C2 -->|approved| O
O ==> H["Author review — human<br/>multiple passes, re-reads, comments"]
H -->|change requests| O
O ==> D["Codex Decoded"]
classDef orch fill:#C8102E,stroke:#8E0A1F,color:#fff;
classDef out fill:#F6C851,stroke:#B57A16,color:#211A0E;
class O orch;
class D out;
Loading

Every stage ends at a gate: reviewers loop back to their producers until the work holds up against the actual source, and the orchestrator only advances once a stage is clean. The author sits at the end of the loop — reading the material multiple times and feeding comments back in, which re-opens whichever stages the feedback touches.

Lifecycle of a single chapter

sequenceDiagram
autonumber
participant O as Orchestrator (Claude Code)
participant S as Scanner (Codex)
participant R as Reviewer (Codex)
participant W as Writer (Codex)
participant V as Visualiser (Codex)
participant A as Author (human)
O->>S: assign a module / client
S-->>O: findings + source map
O->>R: verify findings vs source
R-->>O: confirmed (or gaps → re-scan)
O->>W: draft chapter from verified findings
W-->>O: chapter draft
O->>R: review prose vs source
R-->>O: approved (or rewrite)
O->>V: create diagrams & visuals
V-->>O: visuals
O->>R: review diagrams
R-->>O: approved (or fix)
O->>A: submit for human review
A-->>O: comments + re-reads (several passes)
O->>O: polish, consolidate, finalise
Loading

The roles

RoleModelWhat it did
OrchestratorClaude CodePlanned the work, dispatched sub-agents, held the quality gates, consolidated everything, and drove the polish pass.
Researcher + ScannerCodexRead the source tree, mapped ~90 crates and their dependencies, and produced the high-level architecture model.
Module deep-diveCodexOne agent per module/client, in parallel, extracting how each subsystem actually works.
Findings reviewersCodexConfirmed each agent's findings against the real source before anything was written.
Technical writersCodexTurned verified findings into chapter prose with annotated, real code.
Writing reviewersCodexChecked every draft back against the source for accuracy and clarity.
VisualisersCodexBuilt the diagrams, interactive graphs, and technical illustrations.
Visual reviewersCodexVerified each diagram matched the architecture it depicted.
AuthorHumanReviewed at multiple checkpoints, re-read the material several times, and sent comments that reopened the loop.

By the numbers — 1 orchestrator (Claude Code) · a fleet of Codex sub-agents · ~90 crates mapped · 36 chapters · every module and chapter double-reviewed against source · ~9h autonomous + ~3h polish + multiple human review passes.

Quick start

npm install # install dependencies
npm run dev # start the dev server (http://localhost:5173)
npm run build # produce a static site in dist/
npm run preview # serve the built dist/ locally

The built dist/ is fully static — deploy it to any static host (Netlify, Vercel, GitHub Pages, S3, nginx). base: './' in vite.config.js means it also works from a sub-path.

Contents

Start here

PageWhat's on it
CoverThe book cover and entry point.
Contents & roadmapThe full table of contents with a per-chapter brief.
The complete mapAn interactive architecture map linking every subsystem to its chapter.
PrefaceHow to read this field guide, and the conventions used.

Part I — The lay of the land

#ChapterWhat's covered
1Architecture at a glanceThe whole request path on one page: interfaces, engine, world.
2Repository topologyMonorepo layout and the three build systems.
3Build & distributionThe npm launcher, platform binaries, and the SDKs.
4The crate mapInteractive dependency graph of all ~90 crates.

Part II — The engine room

#ChapterWhat's covered
5Thread · Session · TurnThe core abstractions, walked through with an interactive turn loop.
6The ThreadManagerThe factory that vends threads and shares services.
7Sessions & turn contextSession state, owns-vs-borrows, and steering mid-turn.
8Rollout: state & replayAppend-only JSONL rollout: durability, resume, replay.

Part III — The mind

#ChapterWhat's covered
9System prompts & personalitiesSystem prompts as data — layered, per-model, with full verbatim prompts.
10Context assemblyContext assembled from diffed, self-rendering fragments.
11Compaction & token budgetCompaction and the token budget when the window fills.
12MemoriesCross-session memory via a background consolidation agent.

Part IV — The hands

#ChapterWhat's covered
13The tool systemThe registry, router, and the spec/handler split.
14Dispatch lifecycleDispatch, the RwLock parallel gate, and result mapping.
15Shell & unified execRunning commands: one-shot shell and long-lived exec.
16apply_patchEditing files through a formal patch grammar.
17Approvals, safety & sandboxingFour safety layers: approvals, guardian, execution policy, sandbox.
18Tool search & dynamic toolsDeferred tools discovered on demand via BM25 search.
19Code ModeA sandboxed V8 runtime where tools become callable functions.

Part V — The nervous system

#ChapterWhat's covered
20MCP: the protocolMultiplexed MCP clients, transports, and Codex as a server.
21MCP tools, resources, elicitationMCP tool exposure, resources, and elicitation.
22Providers & connectionsModel providers, transport, and authentication.
23The app-serverThe typed duplex protocol every client speaks.

Part VI — Coordinated minds

#ChapterWhat's covered
24The planning toolThe update_plan checklist and plan discipline.
25Sub-agents & delegationSpawning sub-agents: roles, names, and delegation.
26SkillsReusable SKILL.md capabilities with dependencies.
27Hooks & extensibilityHooks and plugins: extend the loop without forking.

Part VII — The edges

#ChapterWhat's covered
28The TUIThe 226k-line ratatui terminal interface.
29Headless: exec & cloudHeadless exec (JSONL) and cloud tasks.
30Observability & opsTelemetry, analytics, replayable traces, and prompt-debug.

Part VIII — Patterns & retrospective

#ChapterWhat's covered
31Cross-cutting patternsThe recurring design patterns across the codebase.
32What to stealA distilled checklist, a glossary, and the crate index.

Project layout

index.html # page shell + fonts; mounts /src/main.js
vite.config.js
src/
main.js # boot: builds the TOC, hash router, per-chapter initializers
data/
book.js # BOOK (table of contents) + FLAT (flattened chapter list)
chapters/
index.js # CONTENT registry: chapter id -> render function
cover.js … # one module per page (cover, contents, map, preface, ch1–ch32)
lib/
vendor.js # third-party libs (highlight.js, d3, chart.js, mermaid)
code.js # annotated code-block renderer
mermaid.js # mermaid theme + diagram helpers
graph.js # dependency-graph data + D3 force graph + Chart.js charts
map.js # architecture-map data + SVG builder
prompts.js # loads the verbatim prompts and hydrates them into the page
marks.js # decorative inline SVGs
prompts/ # the 8 verbatim Codex system prompts, as plain-text files
base.txt, codex52.txt, compact.txt, friendly.txt,
pragmatic.txt, consolidation.txt, apply-patch.txt, guardian.txt
styles/
base.css # design tokens, reset, layout, typography
components.css # code viewer, diagrams, tables, map, cover, etc.
assets/
cover.jpg # book cover

How it works

  • Routingsrc/main.js reads location.hash (#/ch5), looks the id up in the CONTENT registry, calls that chapter's render function to produce an HTML string, and injects it into #view. A stubPage fallback renders an outline for any chapter not yet in the registry.
  • Chapters as data — every page is a module that default-exports a () => htmlString function. Shared helpers (code, mmd, fullPrompt, …) are imported at the top of each chapter, so content stays declarative.
  • Interactive widgets — after a chapter renders, the router runs the relevant initializer: the D3 crate graph and Chart.js charts (crate map), the animated turn stepper (Thread · Session · Turn), the spec/handler toggle (tool system), Mermaid diagrams, and prompt hydration.
  • Prompts — the verbatim system prompts live as plain-text files under src/prompts/, imported with Vite's ?raw and injected into the collapsible "read the full prompt" panels.

Tech stack

Vanilla ES modules bundled by Vite — no UI framework. Runtime libraries: highlight.js (code), D3 (force graph), Chart.js (charts), and Mermaid (diagrams).

Adding or editing content

  • A chapter lives in src/chapters/<id>.js and default-exports a function that returns an HTML string. Register it in src/chapters/index.js. Chapters compose content with the helpers imported at the top of each file (code, mmd, fullPrompt, etc.).
  • A prompt is a plain .txt file in src/prompts/, imported in src/lib/prompts.js and keyed pr-<name> so fullPrompt('pr-<name>', …) can render it.
  • Table of contents / ordering is driven by src/data/book.js.

Contributing

Contributions are welcome — corrections, clearer explanations, better diagrams, and coverage of new subsystems. Because this is a source-level guide, technical changes should reflect the actual Codex source and cite the file(s) they come from.

main is protected, so all changes land through pull requests: branch off main, make sure npm run build passes, open a PR (CI runs a build check), and a maintainer reviews and merges. On merge the site auto-deploys to GitHub Pages.

See CONTRIBUTING.md for the full guide — setup, project layout, commit conventions (Conventional Commits), and how to add a chapter, prompt, or diagram.

License

This project is dual-licensed:

© 2026 Ahmed Alaa.

Attribution. This is an independent field guide to openai/codex and is not affiliated with or endorsed by OpenAI. The verbatim system prompts reproduced under src/prompts/ originate from openai/codex, which is licensed under Apache-2.0; all rights to that material remain with its authors.

Notes

  • Chapter 13 surfaces a benign unhandled-rejection from Mermaid's async renderer; the diagrams still render and it is harmless.

About

The Codex Codex — an interactive architectural field guide to openai/codex (Vite multi-module site).

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all \u003cpre\u003e\u003ccode\u003e blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks"); } } catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); } })(); (function(){ try { var __m = "github.com"; var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Repository files navigation

Codex Decoded

The Codex Codex — an architectural field guide to openai/codex.

Codex Decoded — Inside the Architecture of the Codex Coding Agent

An interactive, book-style technical guide that reads the Codex source tree (openai/codex, ~90 Rust crates) and explains how a production coding agent is actually built — the turn loop, context engineering, the tool system, the safety model, extensibility, and the protocol that fronts it all. It is 36 chapters of prose backed by annotated real source, interactive diagrams (a D3 dependency graph of every crate, Chart.js breakdowns, Mermaid sequence/flow diagrams), an architecture map, and the verbatim Codex system prompts.

It ships as a small single-page app: a hash router renders one chapter module at a time into the page, with per-chapter interactive widgets wired up on navigation.

What it covers

The book is a top-to-bottom pass over the agent, following a single request from the interface it arrives on, through the engine that runs it, to the world it acts on:

  • The agent loop — how a thread holds sessions, how a turn is assembled, sent to the model, and folded back in; how work is made durable and replayable.
  • Context engineering — treating the prompt as a budget: layered per-model system prompts, diffed self-rendering context fragments, compaction when the window fills, and cross-session memory.
  • The tool system — the registry/router and spec-vs-handler split; running shell commands; editing files through a formal patch grammar; deferring rarely-used tools and discovering them on demand; and Code Mode, where the model writes a program instead of making tool calls.
  • The safety model — the mandatory gate every side-effect crosses: approval policy, a risk-scoring guardian model, execution policy, and kernel-level OS sandboxes.
  • The nervous system — MCP (Codex as both client and server), model providers and auth, and the typed duplex app-server protocol every client speaks.
  • Coordinated minds — planning discipline, sub-agent delegation, reusable Skills, and hooks/plugins that extend the loop without forking.
  • The edges — the 226k-line terminal UI, headless/cloud execution, and observability (traces, analytics, replay).
  • Patterns & retrospective — the recurring design grammar of the codebase and a distilled "what to steal" for building your own agent.

How this book was built

In a fitting twist, the book about Codex was researched and written by a fleet of Codex agents — with Claude Code as the orchestrator and every sub-agent a separate Codex instance. No chapter was written in one pass. Each one was mapped, verified, drafted, reviewed, illustrated, reviewed again, and only then put in front of a human — repeatedly.

The fleet ran continuously for ~9 hours (excluding the author's own reading and comments), then a further ~3 hours of autonomous polishing — roughly 12 hours of agent work in total, wrapped around several human review passes.

The pipeline

flowchart TD
O["Orchestrator · Claude Code"]
O ==> A1["Recon — Researcher + Scanner agents<br/>map ~90 crates into an architecture model"]
A1 --> A2["Deep-dive — one Codex agent per<br/>module &amp; client, running in parallel"]
A2 --> A3{"Reviewers confirm<br/>findings against source"}
A3 -->|gaps| A2
A3 -->|verified| O
O ==> B1["Draft — technical writer<br/>Codex sub-agents"]
B1 --> B2{"Reviewers check<br/>prose against source"}
B2 -->|rewrite| B1
B2 -->|approved| O
O ==> C1["Visualise — diagram &amp; visual<br/>Codex sub-agents"]
C1 --> C2{"Reviewers verify<br/>every diagram"}
C2 -->|fix| C1
C2 -->|approved| O
O ==> H["Author review — human<br/>multiple passes, re-reads, comments"]
H -->|change requests| O
O ==> D["Codex Decoded"]
classDef orch fill:#C8102E,stroke:#8E0A1F,color:#fff;
classDef out fill:#F6C851,stroke:#B57A16,color:#211A0E;
class O orch;
class D out;
Loading

Every stage ends at a gate: reviewers loop back to their producers until the work holds up against the actual source, and the orchestrator only advances once a stage is clean. The author sits at the end of the loop — reading the material multiple times and feeding comments back in, which re-opens whichever stages the feedback touches.

Lifecycle of a single chapter

sequenceDiagram
autonumber
participant O as Orchestrator (Claude Code)
participant S as Scanner (Codex)
participant R as Reviewer (Codex)
participant W as Writer (Codex)
participant V as Visualiser (Codex)
participant A as Author (human)
O->>S: assign a module / client
S-->>O: findings + source map
O->>R: verify findings vs source
R-->>O: confirmed (or gaps → re-scan)
O->>W: draft chapter from verified findings
W-->>O: chapter draft
O->>R: review prose vs source
R-->>O: approved (or rewrite)
O->>V: create diagrams & visuals
V-->>O: visuals
O->>R: review diagrams
R-->>O: approved (or fix)
O->>A: submit for human review
A-->>O: comments + re-reads (several passes)
O->>O: polish, consolidate, finalise
Loading

The roles

RoleModelWhat it did
OrchestratorClaude CodePlanned the work, dispatched sub-agents, held the quality gates, consolidated everything, and drove the polish pass.
Researcher + ScannerCodexRead the source tree, mapped ~90 crates and their dependencies, and produced the high-level architecture model.
Module deep-diveCodexOne agent per module/client, in parallel, extracting how each subsystem actually works.
Findings reviewersCodexConfirmed each agent's findings against the real source before anything was written.
Technical writersCodexTurned verified findings into chapter prose with annotated, real code.
Writing reviewersCodexChecked every draft back against the source for accuracy and clarity.
VisualisersCodexBuilt the diagrams, interactive graphs, and technical illustrations.
Visual reviewersCodexVerified each diagram matched the architecture it depicted.
AuthorHumanReviewed at multiple checkpoints, re-read the material several times, and sent comments that reopened the loop.

By the numbers — 1 orchestrator (Claude Code) · a fleet of Codex sub-agents · ~90 crates mapped · 36 chapters · every module and chapter double-reviewed against source · ~9h autonomous + ~3h polish + multiple human review passes.

Quick start

npm install # install dependencies
npm run dev # start the dev server (http://localhost:5173)
npm run build # produce a static site in dist/
npm run preview # serve the built dist/ locally

The built dist/ is fully static — deploy it to any static host (Netlify, Vercel, GitHub Pages, S3, nginx). base: './' in vite.config.js means it also works from a sub-path.

Contents

Start here

PageWhat's on it
CoverThe book cover and entry point.
Contents & roadmapThe full table of contents with a per-chapter brief.
The complete mapAn interactive architecture map linking every subsystem to its chapter.
PrefaceHow to read this field guide, and the conventions used.

Part I — The lay of the land

#ChapterWhat's covered
1Architecture at a glanceThe whole request path on one page: interfaces, engine, world.
2Repository topologyMonorepo layout and the three build systems.
3Build & distributionThe npm launcher, platform binaries, and the SDKs.
4The crate mapInteractive dependency graph of all ~90 crates.

Part II — The engine room

#ChapterWhat's covered
5Thread · Session · TurnThe core abstractions, walked through with an interactive turn loop.
6The ThreadManagerThe factory that vends threads and shares services.
7Sessions & turn contextSession state, owns-vs-borrows, and steering mid-turn.
8Rollout: state & replayAppend-only JSONL rollout: durability, resume, replay.

Part III — The mind

#ChapterWhat's covered
9System prompts & personalitiesSystem prompts as data — layered, per-model, with full verbatim prompts.
10Context assemblyContext assembled from diffed, self-rendering fragments.
11Compaction & token budgetCompaction and the token budget when the window fills.
12MemoriesCross-session memory via a background consolidation agent.

Part IV — The hands

#ChapterWhat's covered
13The tool systemThe registry, router, and the spec/handler split.
14Dispatch lifecycleDispatch, the RwLock parallel gate, and result mapping.
15Shell & unified execRunning commands: one-shot shell and long-lived exec.
16apply_patchEditing files through a formal patch grammar.
17Approvals, safety & sandboxingFour safety layers: approvals, guardian, execution policy, sandbox.
18Tool search & dynamic toolsDeferred tools discovered on demand via BM25 search.
19Code ModeA sandboxed V8 runtime where tools become callable functions.

Part V — The nervous system

#ChapterWhat's covered
20MCP: the protocolMultiplexed MCP clients, transports, and Codex as a server.
21MCP tools, resources, elicitationMCP tool exposure, resources, and elicitation.
22Providers & connectionsModel providers, transport, and authentication.
23The app-serverThe typed duplex protocol every client speaks.

Part VI — Coordinated minds

#ChapterWhat's covered
24The planning toolThe update_plan checklist and plan discipline.
25Sub-agents & delegationSpawning sub-agents: roles, names, and delegation.
26SkillsReusable SKILL.md capabilities with dependencies.
27Hooks & extensibilityHooks and plugins: extend the loop without forking.

Part VII — The edges

#ChapterWhat's covered
28The TUIThe 226k-line ratatui terminal interface.
29Headless: exec & cloudHeadless exec (JSONL) and cloud tasks.
30Observability & opsTelemetry, analytics, replayable traces, and prompt-debug.

Part VIII — Patterns & retrospective

#ChapterWhat's covered
31Cross-cutting patternsThe recurring design patterns across the codebase.
32What to stealA distilled checklist, a glossary, and the crate index.

Project layout

index.html # page shell + fonts; mounts /src/main.js
vite.config.js
src/
main.js # boot: builds the TOC, hash router, per-chapter initializers
data/
book.js # BOOK (table of contents) + FLAT (flattened chapter list)
chapters/
index.js # CONTENT registry: chapter id -> render function
cover.js … # one module per page (cover, contents, map, preface, ch1–ch32)
lib/
vendor.js # third-party libs (highlight.js, d3, chart.js, mermaid)
code.js # annotated code-block renderer
mermaid.js # mermaid theme + diagram helpers
graph.js # dependency-graph data + D3 force graph + Chart.js charts
map.js # architecture-map data + SVG builder
prompts.js # loads the verbatim prompts and hydrates them into the page
marks.js # decorative inline SVGs
prompts/ # the 8 verbatim Codex system prompts, as plain-text files
base.txt, codex52.txt, compact.txt, friendly.txt,
pragmatic.txt, consolidation.txt, apply-patch.txt, guardian.txt
styles/
base.css # design tokens, reset, layout, typography
components.css # code viewer, diagrams, tables, map, cover, etc.
assets/
cover.jpg # book cover

How it works

  • Routingsrc/main.js reads location.hash (#/ch5), looks the id up in the CONTENT registry, calls that chapter's render function to produce an HTML string, and injects it into #view. A stubPage fallback renders an outline for any chapter not yet in the registry.
  • Chapters as data — every page is a module that default-exports a () => htmlString function. Shared helpers (code, mmd, fullPrompt, …) are imported at the top of each chapter, so content stays declarative.
  • Interactive widgets — after a chapter renders, the router runs the relevant initializer: the D3 crate graph and Chart.js charts (crate map), the animated turn stepper (Thread · Session · Turn), the spec/handler toggle (tool system), Mermaid diagrams, and prompt hydration.
  • Prompts — the verbatim system prompts live as plain-text files under src/prompts/, imported with Vite's ?raw and injected into the collapsible "read the full prompt" panels.

Tech stack

Vanilla ES modules bundled by Vite — no UI framework. Runtime libraries: highlight.js (code), D3 (force graph), Chart.js (charts), and Mermaid (diagrams).

Adding or editing content

  • A chapter lives in src/chapters/<id>.js and default-exports a function that returns an HTML string. Register it in src/chapters/index.js. Chapters compose content with the helpers imported at the top of each file (code, mmd, fullPrompt, etc.).
  • A prompt is a plain .txt file in src/prompts/, imported in src/lib/prompts.js and keyed pr-<name> so fullPrompt('pr-<name>', …) can render it.
  • Table of contents / ordering is driven by src/data/book.js.

Contributing

Contributions are welcome — corrections, clearer explanations, better diagrams, and coverage of new subsystems. Because this is a source-level guide, technical changes should reflect the actual Codex source and cite the file(s) they come from.

main is protected, so all changes land through pull requests: branch off main, make sure npm run build passes, open a PR (CI runs a build check), and a maintainer reviews and merges. On merge the site auto-deploys to GitHub Pages.

See CONTRIBUTING.md for the full guide — setup, project layout, commit conventions (Conventional Commits), and how to add a chapter, prompt, or diagram.

License

This project is dual-licensed:

© 2026 Ahmed Alaa.

Attribution. This is an independent field guide to openai/codex and is not affiliated with or endorsed by OpenAI. The verbatim system prompts reproduced under src/prompts/ originate from openai/codex, which is licensed under Apache-2.0; all rights to that material remain with its authors.

Notes

  • Chapter 13 surfaces a benign unhandled-rejection from Mermaid's async renderer; the diagrams still render and it is harmless.

About

The Codex Codex — an interactive architectural field guide to openai/codex (Vite multi-module site).

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Codex Decoded

The Codex Codex — an architectural field guide to openai/codex.

Codex Decoded — Inside the Architecture of the Codex Coding Agent

An interactive, book-style technical guide that reads the Codex source tree (openai/codex, ~90 Rust crates) and explains how a production coding agent is actually built — the turn loop, context engineering, the tool system, the safety model, extensibility, and the protocol that fronts it all. It is 36 chapters of prose backed by annotated real source, interactive diagrams (a D3 dependency graph of every crate, Chart.js breakdowns, Mermaid sequence/flow diagrams), an architecture map, and the verbatim Codex system prompts.

It ships as a small single-page app: a hash router renders one chapter module at a time into the page, with per-chapter interactive widgets wired up on navigation.

What it covers

The book is a top-to-bottom pass over the agent, following a single request from the interface it arrives on, through the engine that runs it, to the world it acts on:

  • The agent loop — how a thread holds sessions, how a turn is assembled, sent to the model, and folded back in; how work is made durable and replayable.
  • Context engineering — treating the prompt as a budget: layered per-model system prompts, diffed self-rendering context fragments, compaction when the window fills, and cross-session memory.
  • The tool system — the registry/router and spec-vs-handler split; running shell commands; editing files through a formal patch grammar; deferring rarely-used tools and discovering them on demand; and Code Mode, where the model writes a program instead of making tool calls.
  • The safety model — the mandatory gate every side-effect crosses: approval policy, a risk-scoring guardian model, execution policy, and kernel-level OS sandboxes.
  • The nervous system — MCP (Codex as both client and server), model providers and auth, and the typed duplex app-server protocol every client speaks.
  • Coordinated minds — planning discipline, sub-agent delegation, reusable Skills, and hooks/plugins that extend the loop without forking.
  • The edges — the 226k-line terminal UI, headless/cloud execution, and observability (traces, analytics, replay).
  • Patterns & retrospective — the recurring design grammar of the codebase and a distilled "what to steal" for building your own agent.

How this book was built

In a fitting twist, the book about Codex was researched and written by a fleet of Codex agents — with Claude Code as the orchestrator and every sub-agent a separate Codex instance. No chapter was written in one pass. Each one was mapped, verified, drafted, reviewed, illustrated, reviewed again, and only then put in front of a human — repeatedly.

The fleet ran continuously for ~9 hours (excluding the author's own reading and comments), then a further ~3 hours of autonomous polishing — roughly 12 hours of agent work in total, wrapped around several human review passes.

The pipeline

flowchart TD
O["Orchestrator · Claude Code"]
O ==> A1["Recon — Researcher + Scanner agents<br/>map ~90 crates into an architecture model"]
A1 --> A2["Deep-dive — one Codex agent per<br/>module &amp; client, running in parallel"]
A2 --> A3{"Reviewers confirm<br/>findings against source"}
A3 -->|gaps| A2
A3 -->|verified| O
O ==> B1["Draft — technical writer<br/>Codex sub-agents"]
B1 --> B2{"Reviewers check<br/>prose against source"}
B2 -->|rewrite| B1
B2 -->|approved| O
O ==> C1["Visualise — diagram &amp; visual<br/>Codex sub-agents"]
C1 --> C2{"Reviewers verify<br/>every diagram"}
C2 -->|fix| C1
C2 -->|approved| O
O ==> H["Author review — human<br/>multiple passes, re-reads, comments"]
H -->|change requests| O
O ==> D["Codex Decoded"]
classDef orch fill:#C8102E,stroke:#8E0A1F,color:#fff;
classDef out fill:#F6C851,stroke:#B57A16,color:#211A0E;
class O orch;
class D out;
Loading

Every stage ends at a gate: reviewers loop back to their producers until the work holds up against the actual source, and the orchestrator only advances once a stage is clean. The author sits at the end of the loop — reading the material multiple times and feeding comments back in, which re-opens whichever stages the feedback touches.

Lifecycle of a single chapter

sequenceDiagram
autonumber
participant O as Orchestrator (Claude Code)
participant S as Scanner (Codex)
participant R as Reviewer (Codex)
participant W as Writer (Codex)
participant V as Visualiser (Codex)
participant A as Author (human)
O->>S: assign a module / client
S-->>O: findings + source map
O->>R: verify findings vs source
R-->>O: confirmed (or gaps → re-scan)
O->>W: draft chapter from verified findings
W-->>O: chapter draft
O->>R: review prose vs source
R-->>O: approved (or rewrite)
O->>V: create diagrams & visuals
V-->>O: visuals
O->>R: review diagrams
R-->>O: approved (or fix)
O->>A: submit for human review
A-->>O: comments + re-reads (several passes)
O->>O: polish, consolidate, finalise
Loading

The roles

RoleModelWhat it did
OrchestratorClaude CodePlanned the work, dispatched sub-agents, held the quality gates, consolidated everything, and drove the polish pass.
Researcher + ScannerCodexRead the source tree, mapped ~90 crates and their dependencies, and produced the high-level architecture model.
Module deep-diveCodexOne agent per module/client, in parallel, extracting how each subsystem actually works.
Findings reviewersCodexConfirmed each agent's findings against the real source before anything was written.
Technical writersCodexTurned verified findings into chapter prose with annotated, real code.
Writing reviewersCodexChecked every draft back against the source for accuracy and clarity.
VisualisersCodexBuilt the diagrams, interactive graphs, and technical illustrations.
Visual reviewersCodexVerified each diagram matched the architecture it depicted.
AuthorHumanReviewed at multiple checkpoints, re-read the material several times, and sent comments that reopened the loop.

By the numbers — 1 orchestrator (Claude Code) · a fleet of Codex sub-agents · ~90 crates mapped · 36 chapters · every module and chapter double-reviewed against source · ~9h autonomous + ~3h polish + multiple human review passes.

Quick start

npm install # install dependencies
npm run dev # start the dev server (http://localhost:5173)
npm run build # produce a static site in dist/
npm run preview # serve the built dist/ locally

The built dist/ is fully static — deploy it to any static host (Netlify, Vercel, GitHub Pages, S3, nginx). base: './' in vite.config.js means it also works from a sub-path.

Contents

Start here

PageWhat's on it
CoverThe book cover and entry point.
Contents & roadmapThe full table of contents with a per-chapter brief.
The complete mapAn interactive architecture map linking every subsystem to its chapter.
PrefaceHow to read this field guide, and the conventions used.

Part I — The lay of the land

#ChapterWhat's covered
1Architecture at a glanceThe whole request path on one page: interfaces, engine, world.
2Repository topologyMonorepo layout and the three build systems.
3Build & distributionThe npm launcher, platform binaries, and the SDKs.
4The crate mapInteractive dependency graph of all ~90 crates.

Part II — The engine room

#ChapterWhat's covered
5Thread · Session · TurnThe core abstractions, walked through with an interactive turn loop.
6The ThreadManagerThe factory that vends threads and shares services.
7Sessions & turn contextSession state, owns-vs-borrows, and steering mid-turn.
8Rollout: state & replayAppend-only JSONL rollout: durability, resume, replay.

Part III — The mind

#ChapterWhat's covered
9System prompts & personalitiesSystem prompts as data — layered, per-model, with full verbatim prompts.
10Context assemblyContext assembled from diffed, self-rendering fragments.
11Compaction & token budgetCompaction and the token budget when the window fills.
12MemoriesCross-session memory via a background consolidation agent.

Part IV — The hands

#ChapterWhat's covered
13The tool systemThe registry, router, and the spec/handler split.
14Dispatch lifecycleDispatch, the RwLock parallel gate, and result mapping.
15Shell & unified execRunning commands: one-shot shell and long-lived exec.
16apply_patchEditing files through a formal patch grammar.
17Approvals, safety & sandboxingFour safety layers: approvals, guardian, execution policy, sandbox.
18Tool search & dynamic toolsDeferred tools discovered on demand via BM25 search.
19Code ModeA sandboxed V8 runtime where tools become callable functions.

Part V — The nervous system

#ChapterWhat's covered
20MCP: the protocolMultiplexed MCP clients, transports, and Codex as a server.
21MCP tools, resources, elicitationMCP tool exposure, resources, and elicitation.
22Providers & connectionsModel providers, transport, and authentication.
23The app-serverThe typed duplex protocol every client speaks.

Part VI — Coordinated minds

#ChapterWhat's covered
24The planning toolThe update_plan checklist and plan discipline.
25Sub-agents & delegationSpawning sub-agents: roles, names, and delegation.
26SkillsReusable SKILL.md capabilities with dependencies.
27Hooks & extensibilityHooks and plugins: extend the loop without forking.

Part VII — The edges

#ChapterWhat's covered
28The TUIThe 226k-line ratatui terminal interface.
29Headless: exec & cloudHeadless exec (JSONL) and cloud tasks.
30Observability & opsTelemetry, analytics, replayable traces, and prompt-debug.

Part VIII — Patterns & retrospective

#ChapterWhat's covered
31Cross-cutting patternsThe recurring design patterns across the codebase.
32What to stealA distilled checklist, a glossary, and the crate index.

Project layout

index.html # page shell + fonts; mounts /src/main.js
vite.config.js
src/
main.js # boot: builds the TOC, hash router, per-chapter initializers
data/
book.js # BOOK (table of contents) + FLAT (flattened chapter list)
chapters/
index.js # CONTENT registry: chapter id -> render function
cover.js … # one module per page (cover, contents, map, preface, ch1–ch32)
lib/
vendor.js # third-party libs (highlight.js, d3, chart.js, mermaid)
code.js # annotated code-block renderer
mermaid.js # mermaid theme + diagram helpers
graph.js # dependency-graph data + D3 force graph + Chart.js charts
map.js # architecture-map data + SVG builder
prompts.js # loads the verbatim prompts and hydrates them into the page
marks.js # decorative inline SVGs
prompts/ # the 8 verbatim Codex system prompts, as plain-text files
base.txt, codex52.txt, compact.txt, friendly.txt,
pragmatic.txt, consolidation.txt, apply-patch.txt, guardian.txt
styles/
base.css # design tokens, reset, layout, typography
components.css # code viewer, diagrams, tables, map, cover, etc.
assets/
cover.jpg # book cover

How it works

  • Routingsrc/main.js reads location.hash (#/ch5), looks the id up in the CONTENT registry, calls that chapter's render function to produce an HTML string, and injects it into #view. A stubPage fallback renders an outline for any chapter not yet in the registry.
  • Chapters as data — every page is a module that default-exports a () => htmlString function. Shared helpers (code, mmd, fullPrompt, …) are imported at the top of each chapter, so content stays declarative.
  • Interactive widgets — after a chapter renders, the router runs the relevant initializer: the D3 crate graph and Chart.js charts (crate map), the animated turn stepper (Thread · Session · Turn), the spec/handler toggle (tool system), Mermaid diagrams, and prompt hydration.
  • Prompts — the verbatim system prompts live as plain-text files under src/prompts/, imported with Vite's ?raw and injected into the collapsible "read the full prompt" panels.

Tech stack

Vanilla ES modules bundled by Vite — no UI framework. Runtime libraries: highlight.js (code), D3 (force graph), Chart.js (charts), and Mermaid (diagrams).

Adding or editing content

  • A chapter lives in src/chapters/<id>.js and default-exports a function that returns an HTML string. Register it in src/chapters/index.js. Chapters compose content with the helpers imported at the top of each file (code, mmd, fullPrompt, etc.).
  • A prompt is a plain .txt file in src/prompts/, imported in src/lib/prompts.js and keyed pr-<name> so fullPrompt('pr-<name>', …) can render it.
  • Table of contents / ordering is driven by src/data/book.js.

Contributing

Contributions are welcome — corrections, clearer explanations, better diagrams, and coverage of new subsystems. Because this is a source-level guide, technical changes should reflect the actual Codex source and cite the file(s) they come from.

main is protected, so all changes land through pull requests: branch off main, make sure npm run build passes, open a PR (CI runs a build check), and a maintainer reviews and merges. On merge the site auto-deploys to GitHub Pages.

See CONTRIBUTING.md for the full guide — setup, project layout, commit conventions (Conventional Commits), and how to add a chapter, prompt, or diagram.

License

This project is dual-licensed:

© 2026 Ahmed Alaa.

Attribution. This is an independent field guide to openai/codex and is not affiliated with or endorsed by OpenAI. The verbatim system prompts reproduced under src/prompts/ originate from openai/codex, which is licensed under Apache-2.0; all rights to that material remain with its authors.

Notes

  • Chapter 13 surfaces a benign unhandled-rejection from Mermaid's async renderer; the diagrams still render and it is harmless.

About

The Codex Codex — an interactive architectural field guide to openai/codex (Vite multi-module site).

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length \u003e 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Codex Decoded

The Codex Codex — an architectural field guide to openai/codex.

Codex Decoded — Inside the Architecture of the Codex Coding Agent

An interactive, book-style technical guide that reads the Codex source tree (openai/codex, ~90 Rust crates) and explains how a production coding agent is actually built — the turn loop, context engineering, the tool system, the safety model, extensibility, and the protocol that fronts it all. It is 36 chapters of prose backed by annotated real source, interactive diagrams (a D3 dependency graph of every crate, Chart.js breakdowns, Mermaid sequence/flow diagrams), an architecture map, and the verbatim Codex system prompts.

It ships as a small single-page app: a hash router renders one chapter module at a time into the page, with per-chapter interactive widgets wired up on navigation.

What it covers

The book is a top-to-bottom pass over the agent, following a single request from the interface it arrives on, through the engine that runs it, to the world it acts on:

  • The agent loop — how a thread holds sessions, how a turn is assembled, sent to the model, and folded back in; how work is made durable and replayable.
  • Context engineering — treating the prompt as a budget: layered per-model system prompts, diffed self-rendering context fragments, compaction when the window fills, and cross-session memory.
  • The tool system — the registry/router and spec-vs-handler split; running shell commands; editing files through a formal patch grammar; deferring rarely-used tools and discovering them on demand; and Code Mode, where the model writes a program instead of making tool calls.
  • The safety model — the mandatory gate every side-effect crosses: approval policy, a risk-scoring guardian model, execution policy, and kernel-level OS sandboxes.
  • The nervous system — MCP (Codex as both client and server), model providers and auth, and the typed duplex app-server protocol every client speaks.
  • Coordinated minds — planning discipline, sub-agent delegation, reusable Skills, and hooks/plugins that extend the loop without forking.
  • The edges — the 226k-line terminal UI, headless/cloud execution, and observability (traces, analytics, replay).
  • Patterns & retrospective — the recurring design grammar of the codebase and a distilled "what to steal" for building your own agent.

How this book was built

In a fitting twist, the book about Codex was researched and written by a fleet of Codex agents — with Claude Code as the orchestrator and every sub-agent a separate Codex instance. No chapter was written in one pass. Each one was mapped, verified, drafted, reviewed, illustrated, reviewed again, and only then put in front of a human — repeatedly.

The fleet ran continuously for ~9 hours (excluding the author's own reading and comments), then a further ~3 hours of autonomous polishing — roughly 12 hours of agent work in total, wrapped around several human review passes.

The pipeline

flowchart TD
O["Orchestrator · Claude Code"]
O ==> A1["Recon — Researcher + Scanner agents<br/>map ~90 crates into an architecture model"]
A1 --> A2["Deep-dive — one Codex agent per<br/>module &amp; client, running in parallel"]
A2 --> A3{"Reviewers confirm<br/>findings against source"}
A3 -->|gaps| A2
A3 -->|verified| O
O ==> B1["Draft — technical writer<br/>Codex sub-agents"]
B1 --> B2{"Reviewers check<br/>prose against source"}
B2 -->|rewrite| B1
B2 -->|approved| O
O ==> C1["Visualise — diagram &amp; visual<br/>Codex sub-agents"]
C1 --> C2{"Reviewers verify<br/>every diagram"}
C2 -->|fix| C1
C2 -->|approved| O
O ==> H["Author review — human<br/>multiple passes, re-reads, comments"]
H -->|change requests| O
O ==> D["Codex Decoded"]
classDef orch fill:#C8102E,stroke:#8E0A1F,color:#fff;
classDef out fill:#F6C851,stroke:#B57A16,color:#211A0E;
class O orch;
class D out;
Loading

Every stage ends at a gate: reviewers loop back to their producers until the work holds up against the actual source, and the orchestrator only advances once a stage is clean. The author sits at the end of the loop — reading the material multiple times and feeding comments back in, which re-opens whichever stages the feedback touches.

Lifecycle of a single chapter

sequenceDiagram
autonumber
participant O as Orchestrator (Claude Code)
participant S as Scanner (Codex)
participant R as Reviewer (Codex)
participant W as Writer (Codex)
participant V as Visualiser (Codex)
participant A as Author (human)
O->>S: assign a module / client
S-->>O: findings + source map
O->>R: verify findings vs source
R-->>O: confirmed (or gaps → re-scan)
O->>W: draft chapter from verified findings
W-->>O: chapter draft
O->>R: review prose vs source
R-->>O: approved (or rewrite)
O->>V: create diagrams & visuals
V-->>O: visuals
O->>R: review diagrams
R-->>O: approved (or fix)
O->>A: submit for human review
A-->>O: comments + re-reads (several passes)
O->>O: polish, consolidate, finalise
Loading

The roles

RoleModelWhat it did
OrchestratorClaude CodePlanned the work, dispatched sub-agents, held the quality gates, consolidated everything, and drove the polish pass.
Researcher + ScannerCodexRead the source tree, mapped ~90 crates and their dependencies, and produced the high-level architecture model.
Module deep-diveCodexOne agent per module/client, in parallel, extracting how each subsystem actually works.
Findings reviewersCodexConfirmed each agent's findings against the real source before anything was written.
Technical writersCodexTurned verified findings into chapter prose with annotated, real code.
Writing reviewersCodexChecked every draft back against the source for accuracy and clarity.
VisualisersCodexBuilt the diagrams, interactive graphs, and technical illustrations.
Visual reviewersCodexVerified each diagram matched the architecture it depicted.
AuthorHumanReviewed at multiple checkpoints, re-read the material several times, and sent comments that reopened the loop.

By the numbers — 1 orchestrator (Claude Code) · a fleet of Codex sub-agents · ~90 crates mapped · 36 chapters · every module and chapter double-reviewed against source · ~9h autonomous + ~3h polish + multiple human review passes.

Quick start

npm install # install dependencies
npm run dev # start the dev server (http://localhost:5173)
npm run build # produce a static site in dist/
npm run preview # serve the built dist/ locally

The built dist/ is fully static — deploy it to any static host (Netlify, Vercel, GitHub Pages, S3, nginx). base: './' in vite.config.js means it also works from a sub-path.

Contents

Start here

PageWhat's on it
CoverThe book cover and entry point.
Contents & roadmapThe full table of contents with a per-chapter brief.
The complete mapAn interactive architecture map linking every subsystem to its chapter.
PrefaceHow to read this field guide, and the conventions used.

Part I — The lay of the land

#ChapterWhat's covered
1Architecture at a glanceThe whole request path on one page: interfaces, engine, world.
2Repository topologyMonorepo layout and the three build systems.
3Build & distributionThe npm launcher, platform binaries, and the SDKs.
4The crate mapInteractive dependency graph of all ~90 crates.

Part II — The engine room

#ChapterWhat's covered
5Thread · Session · TurnThe core abstractions, walked through with an interactive turn loop.
6The ThreadManagerThe factory that vends threads and shares services.
7Sessions & turn contextSession state, owns-vs-borrows, and steering mid-turn.
8Rollout: state & replayAppend-only JSONL rollout: durability, resume, replay.

Part III — The mind

#ChapterWhat's covered
9System prompts & personalitiesSystem prompts as data — layered, per-model, with full verbatim prompts.
10Context assemblyContext assembled from diffed, self-rendering fragments.
11Compaction & token budgetCompaction and the token budget when the window fills.
12MemoriesCross-session memory via a background consolidation agent.

Part IV — The hands

#ChapterWhat's covered
13The tool systemThe registry, router, and the spec/handler split.
14Dispatch lifecycleDispatch, the RwLock parallel gate, and result mapping.
15Shell & unified execRunning commands: one-shot shell and long-lived exec.
16apply_patchEditing files through a formal patch grammar.
17Approvals, safety & sandboxingFour safety layers: approvals, guardian, execution policy, sandbox.
18Tool search & dynamic toolsDeferred tools discovered on demand via BM25 search.
19Code ModeA sandboxed V8 runtime where tools become callable functions.

Part V — The nervous system

#ChapterWhat's covered
20MCP: the protocolMultiplexed MCP clients, transports, and Codex as a server.
21MCP tools, resources, elicitationMCP tool exposure, resources, and elicitation.
22Providers & connectionsModel providers, transport, and authentication.
23The app-serverThe typed duplex protocol every client speaks.

Part VI — Coordinated minds

#ChapterWhat's covered
24The planning toolThe update_plan checklist and plan discipline.
25Sub-agents & delegationSpawning sub-agents: roles, names, and delegation.
26SkillsReusable SKILL.md capabilities with dependencies.
27Hooks & extensibilityHooks and plugins: extend the loop without forking.

Part VII — The edges

#ChapterWhat's covered
28The TUIThe 226k-line ratatui terminal interface.
29Headless: exec & cloudHeadless exec (JSONL) and cloud tasks.
30Observability & opsTelemetry, analytics, replayable traces, and prompt-debug.

Part VIII — Patterns & retrospective

#ChapterWhat's covered
31Cross-cutting patternsThe recurring design patterns across the codebase.
32What to stealA distilled checklist, a glossary, and the crate index.

Project layout

index.html # page shell + fonts; mounts /src/main.js
vite.config.js
src/
main.js # boot: builds the TOC, hash router, per-chapter initializers
data/
book.js # BOOK (table of contents) + FLAT (flattened chapter list)
chapters/
index.js # CONTENT registry: chapter id -> render function
cover.js … # one module per page (cover, contents, map, preface, ch1–ch32)
lib/
vendor.js # third-party libs (highlight.js, d3, chart.js, mermaid)
code.js # annotated code-block renderer
mermaid.js # mermaid theme + diagram helpers
graph.js # dependency-graph data + D3 force graph + Chart.js charts
map.js # architecture-map data + SVG builder
prompts.js # loads the verbatim prompts and hydrates them into the page
marks.js # decorative inline SVGs
prompts/ # the 8 verbatim Codex system prompts, as plain-text files
base.txt, codex52.txt, compact.txt, friendly.txt,
pragmatic.txt, consolidation.txt, apply-patch.txt, guardian.txt
styles/
base.css # design tokens, reset, layout, typography
components.css # code viewer, diagrams, tables, map, cover, etc.
assets/
cover.jpg # book cover

How it works

  • Routingsrc/main.js reads location.hash (#/ch5), looks the id up in the CONTENT registry, calls that chapter's render function to produce an HTML string, and injects it into #view. A stubPage fallback renders an outline for any chapter not yet in the registry.
  • Chapters as data — every page is a module that default-exports a () => htmlString function. Shared helpers (code, mmd, fullPrompt, …) are imported at the top of each chapter, so content stays declarative.
  • Interactive widgets — after a chapter renders, the router runs the relevant initializer: the D3 crate graph and Chart.js charts (crate map), the animated turn stepper (Thread · Session · Turn), the spec/handler toggle (tool system), Mermaid diagrams, and prompt hydration.
  • Prompts — the verbatim system prompts live as plain-text files under src/prompts/, imported with Vite's ?raw and injected into the collapsible "read the full prompt" panels.

Tech stack

Vanilla ES modules bundled by Vite — no UI framework. Runtime libraries: highlight.js (code), D3 (force graph), Chart.js (charts), and Mermaid (diagrams).

Adding or editing content

  • A chapter lives in src/chapters/<id>.js and default-exports a function that returns an HTML string. Register it in src/chapters/index.js. Chapters compose content with the helpers imported at the top of each file (code, mmd, fullPrompt, etc.).
  • A prompt is a plain .txt file in src/prompts/, imported in src/lib/prompts.js and keyed pr-<name> so fullPrompt('pr-<name>', …) can render it.
  • Table of contents / ordering is driven by src/data/book.js.

Contributing

Contributions are welcome — corrections, clearer explanations, better diagrams, and coverage of new subsystems. Because this is a source-level guide, technical changes should reflect the actual Codex source and cite the file(s) they come from.

main is protected, so all changes land through pull requests: branch off main, make sure npm run build passes, open a PR (CI runs a build check), and a maintainer reviews and merges. On merge the site auto-deploys to GitHub Pages.

See CONTRIBUTING.md for the full guide — setup, project layout, commit conventions (Conventional Commits), and how to add a chapter, prompt, or diagram.

License

This project is dual-licensed:

© 2026 Ahmed Alaa.

Attribution. This is an independent field guide to openai/codex and is not affiliated with or endorsed by OpenAI. The verbatim system prompts reproduced under src/prompts/ originate from openai/codex, which is licensed under Apache-2.0; all rights to that material remain with its authors.

Notes

  • Chapter 13 surfaces a benign unhandled-rejection from Mermaid's async renderer; the diagrams still render and it is harmless.

About

The Codex Codex — an interactive architectural field guide to openai/codex (Vite multi-module site).

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Repository files navigation

Codex Decoded

The Codex Codex — an architectural field guide to openai/codex.

Codex Decoded — Inside the Architecture of the Codex Coding Agent

An interactive, book-style technical guide that reads the Codex source tree (openai/codex, ~90 Rust crates) and explains how a production coding agent is actually built — the turn loop, context engineering, the tool system, the safety model, extensibility, and the protocol that fronts it all. It is 36 chapters of prose backed by annotated real source, interactive diagrams (a D3 dependency graph of every crate, Chart.js breakdowns, Mermaid sequence/flow diagrams), an architecture map, and the verbatim Codex system prompts.

It ships as a small single-page app: a hash router renders one chapter module at a time into the page, with per-chapter interactive widgets wired up on navigation.

What it covers

The book is a top-to-bottom pass over the agent, following a single request from the interface it arrives on, through the engine that runs it, to the world it acts on:

  • The agent loop — how a thread holds sessions, how a turn is assembled, sent to the model, and folded back in; how work is made durable and replayable.
  • Context engineering — treating the prompt as a budget: layered per-model system prompts, diffed self-rendering context fragments, compaction when the window fills, and cross-session memory.
  • The tool system — the registry/router and spec-vs-handler split; running shell commands; editing files through a formal patch grammar; deferring rarely-used tools and discovering them on demand; and Code Mode, where the model writes a program instead of making tool calls.
  • The safety model — the mandatory gate every side-effect crosses: approval policy, a risk-scoring guardian model, execution policy, and kernel-level OS sandboxes.
  • The nervous system — MCP (Codex as both client and server), model providers and auth, and the typed duplex app-server protocol every client speaks.
  • Coordinated minds — planning discipline, sub-agent delegation, reusable Skills, and hooks/plugins that extend the loop without forking.
  • The edges — the 226k-line terminal UI, headless/cloud execution, and observability (traces, analytics, replay).
  • Patterns & retrospective — the recurring design grammar of the codebase and a distilled "what to steal" for building your own agent.

How this book was built

In a fitting twist, the book about Codex was researched and written by a fleet of Codex agents — with Claude Code as the orchestrator and every sub-agent a separate Codex instance. No chapter was written in one pass. Each one was mapped, verified, drafted, reviewed, illustrated, reviewed again, and only then put in front of a human — repeatedly.

The fleet ran continuously for ~9 hours (excluding the author's own reading and comments), then a further ~3 hours of autonomous polishing — roughly 12 hours of agent work in total, wrapped around several human review passes.

The pipeline

flowchart TD
O["Orchestrator · Claude Code"]
O ==> A1["Recon — Researcher + Scanner agents<br/>map ~90 crates into an architecture model"]
A1 --> A2["Deep-dive — one Codex agent per<br/>module &amp; client, running in parallel"]
A2 --> A3{"Reviewers confirm<br/>findings against source"}
A3 -->|gaps| A2
A3 -->|verified| O
O ==> B1["Draft — technical writer<br/>Codex sub-agents"]
B1 --> B2{"Reviewers check<br/>prose against source"}
B2 -->|rewrite| B1
B2 -->|approved| O
O ==> C1["Visualise — diagram &amp; visual<br/>Codex sub-agents"]
C1 --> C2{"Reviewers verify<br/>every diagram"}
C2 -->|fix| C1
C2 -->|approved| O
O ==> H["Author review — human<br/>multiple passes, re-reads, comments"]
H -->|change requests| O
O ==> D["Codex Decoded"]
classDef orch fill:#C8102E,stroke:#8E0A1F,color:#fff;
classDef out fill:#F6C851,stroke:#B57A16,color:#211A0E;
class O orch;
class D out;
Loading

Every stage ends at a gate: reviewers loop back to their producers until the work holds up against the actual source, and the orchestrator only advances once a stage is clean. The author sits at the end of the loop — reading the material multiple times and feeding comments back in, which re-opens whichever stages the feedback touches.

Lifecycle of a single chapter

sequenceDiagram
autonumber
participant O as Orchestrator (Claude Code)
participant S as Scanner (Codex)
participant R as Reviewer (Codex)
participant W as Writer (Codex)
participant V as Visualiser (Codex)
participant A as Author (human)
O->>S: assign a module / client
S-->>O: findings + source map
O->>R: verify findings vs source
R-->>O: confirmed (or gaps → re-scan)
O->>W: draft chapter from verified findings
W-->>O: chapter draft
O->>R: review prose vs source
R-->>O: approved (or rewrite)
O->>V: create diagrams & visuals
V-->>O: visuals
O->>R: review diagrams
R-->>O: approved (or fix)
O->>A: submit for human review
A-->>O: comments + re-reads (several passes)
O->>O: polish, consolidate, finalise
Loading

The roles

RoleModelWhat it did
OrchestratorClaude CodePlanned the work, dispatched sub-agents, held the quality gates, consolidated everything, and drove the polish pass.
Researcher + ScannerCodexRead the source tree, mapped ~90 crates and their dependencies, and produced the high-level architecture model.
Module deep-diveCodexOne agent per module/client, in parallel, extracting how each subsystem actually works.
Findings reviewersCodexConfirmed each agent's findings against the real source before anything was written.
Technical writersCodexTurned verified findings into chapter prose with annotated, real code.
Writing reviewersCodexChecked every draft back against the source for accuracy and clarity.
VisualisersCodexBuilt the diagrams, interactive graphs, and technical illustrations.
Visual reviewersCodexVerified each diagram matched the architecture it depicted.
AuthorHumanReviewed at multiple checkpoints, re-read the material several times, and sent comments that reopened the loop.

By the numbers — 1 orchestrator (Claude Code) · a fleet of Codex sub-agents · ~90 crates mapped · 36 chapters · every module and chapter double-reviewed against source · ~9h autonomous + ~3h polish + multiple human review passes.

Quick start

npm install # install dependencies
npm run dev # start the dev server (http://localhost:5173)
npm run build # produce a static site in dist/
npm run preview # serve the built dist/ locally

The built dist/ is fully static — deploy it to any static host (Netlify, Vercel, GitHub Pages, S3, nginx). base: './' in vite.config.js means it also works from a sub-path.

Contents

Start here

PageWhat's on it
CoverThe book cover and entry point.
Contents & roadmapThe full table of contents with a per-chapter brief.
The complete mapAn interactive architecture map linking every subsystem to its chapter.
PrefaceHow to read this field guide, and the conventions used.

Part I — The lay of the land

#ChapterWhat's covered
1Architecture at a glanceThe whole request path on one page: interfaces, engine, world.
2Repository topologyMonorepo layout and the three build systems.
3Build & distributionThe npm launcher, platform binaries, and the SDKs.
4The crate mapInteractive dependency graph of all ~90 crates.

Part II — The engine room

#ChapterWhat's covered
5Thread · Session · TurnThe core abstractions, walked through with an interactive turn loop.
6The ThreadManagerThe factory that vends threads and shares services.
7Sessions & turn contextSession state, owns-vs-borrows, and steering mid-turn.
8Rollout: state & replayAppend-only JSONL rollout: durability, resume, replay.

Part III — The mind

#ChapterWhat's covered
9System prompts & personalitiesSystem prompts as data — layered, per-model, with full verbatim prompts.
10Context assemblyContext assembled from diffed, self-rendering fragments.
11Compaction & token budgetCompaction and the token budget when the window fills.
12MemoriesCross-session memory via a background consolidation agent.

Part IV — The hands

#ChapterWhat's covered
13The tool systemThe registry, router, and the spec/handler split.
14Dispatch lifecycleDispatch, the RwLock parallel gate, and result mapping.
15Shell & unified execRunning commands: one-shot shell and long-lived exec.
16apply_patchEditing files through a formal patch grammar.
17Approvals, safety & sandboxingFour safety layers: approvals, guardian, execution policy, sandbox.
18Tool search & dynamic toolsDeferred tools discovered on demand via BM25 search.
19Code ModeA sandboxed V8 runtime where tools become callable functions.

Part V — The nervous system

#ChapterWhat's covered
20MCP: the protocolMultiplexed MCP clients, transports, and Codex as a server.
21MCP tools, resources, elicitationMCP tool exposure, resources, and elicitation.
22Providers & connectionsModel providers, transport, and authentication.
23The app-serverThe typed duplex protocol every client speaks.

Part VI — Coordinated minds

#ChapterWhat's covered
24The planning toolThe update_plan checklist and plan discipline.
25Sub-agents & delegationSpawning sub-agents: roles, names, and delegation.
26SkillsReusable SKILL.md capabilities with dependencies.
27Hooks & extensibilityHooks and plugins: extend the loop without forking.

Part VII — The edges

#ChapterWhat's covered
28The TUIThe 226k-line ratatui terminal interface.
29Headless: exec & cloudHeadless exec (JSONL) and cloud tasks.
30Observability & opsTelemetry, analytics, replayable traces, and prompt-debug.

Part VIII — Patterns & retrospective

#ChapterWhat's covered
31Cross-cutting patternsThe recurring design patterns across the codebase.
32What to stealA distilled checklist, a glossary, and the crate index.

Project layout

index.html # page shell + fonts; mounts /src/main.js
vite.config.js
src/
main.js # boot: builds the TOC, hash router, per-chapter initializers
data/
book.js # BOOK (table of contents) + FLAT (flattened chapter list)
chapters/
index.js # CONTENT registry: chapter id -> render function
cover.js … # one module per page (cover, contents, map, preface, ch1–ch32)
lib/
vendor.js # third-party libs (highlight.js, d3, chart.js, mermaid)
code.js # annotated code-block renderer
mermaid.js # mermaid theme + diagram helpers
graph.js # dependency-graph data + D3 force graph + Chart.js charts
map.js # architecture-map data + SVG builder
prompts.js # loads the verbatim prompts and hydrates them into the page
marks.js # decorative inline SVGs
prompts/ # the 8 verbatim Codex system prompts, as plain-text files
base.txt, codex52.txt, compact.txt, friendly.txt,
pragmatic.txt, consolidation.txt, apply-patch.txt, guardian.txt
styles/
base.css # design tokens, reset, layout, typography
components.css # code viewer, diagrams, tables, map, cover, etc.
assets/
cover.jpg # book cover

How it works

  • Routingsrc/main.js reads location.hash (#/ch5), looks the id up in the CONTENT registry, calls that chapter's render function to produce an HTML string, and injects it into #view. A stubPage fallback renders an outline for any chapter not yet in the registry.
  • Chapters as data — every page is a module that default-exports a () => htmlString function. Shared helpers (code, mmd, fullPrompt, …) are imported at the top of each chapter, so content stays declarative.
  • Interactive widgets — after a chapter renders, the router runs the relevant initializer: the D3 crate graph and Chart.js charts (crate map), the animated turn stepper (Thread · Session · Turn), the spec/handler toggle (tool system), Mermaid diagrams, and prompt hydration.
  • Prompts — the verbatim system prompts live as plain-text files under src/prompts/, imported with Vite's ?raw and injected into the collapsible "read the full prompt" panels.

Tech stack

Vanilla ES modules bundled by Vite — no UI framework. Runtime libraries: highlight.js (code), D3 (force graph), Chart.js (charts), and Mermaid (diagrams).

Adding or editing content

  • A chapter lives in src/chapters/<id>.js and default-exports a function that returns an HTML string. Register it in src/chapters/index.js. Chapters compose content with the helpers imported at the top of each file (code, mmd, fullPrompt, etc.).
  • A prompt is a plain .txt file in src/prompts/, imported in src/lib/prompts.js and keyed pr-<name> so fullPrompt('pr-<name>', …) can render it.
  • Table of contents / ordering is driven by src/data/book.js.

Contributing

Contributions are welcome — corrections, clearer explanations, better diagrams, and coverage of new subsystems. Because this is a source-level guide, technical changes should reflect the actual Codex source and cite the file(s) they come from.

main is protected, so all changes land through pull requests: branch off main, make sure npm run build passes, open a PR (CI runs a build check), and a maintainer reviews and merges. On merge the site auto-deploys to GitHub Pages.

See CONTRIBUTING.md for the full guide — setup, project layout, commit conventions (Conventional Commits), and how to add a chapter, prompt, or diagram.

License

This project is dual-licensed:

© 2026 Ahmed Alaa.

Attribution. This is an independent field guide to openai/codex and is not affiliated with or endorsed by OpenAI. The verbatim system prompts reproduced under src/prompts/ originate from openai/codex, which is licensed under Apache-2.0; all rights to that material remain with its authors.

Notes

  • Chapter 13 surfaces a benign unhandled-rejection from Mermaid's async renderer; the diagrams still render and it is harmless.

About

The Codex Codex — an interactive architectural field guide to openai/codex (Vite multi-module site).

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Codex Decoded

The Codex Codex — an architectural field guide to openai/codex.

Codex Decoded — Inside the Architecture of the Codex Coding Agent

An interactive, book-style technical guide that reads the Codex source tree (openai/codex, ~90 Rust crates) and explains how a production coding agent is actually built — the turn loop, context engineering, the tool system, the safety model, extensibility, and the protocol that fronts it all. It is 36 chapters of prose backed by annotated real source, interactive diagrams (a D3 dependency graph of every crate, Chart.js breakdowns, Mermaid sequence/flow diagrams), an architecture map, and the verbatim Codex system prompts.

It ships as a small single-page app: a hash router renders one chapter module at a time into the page, with per-chapter interactive widgets wired up on navigation.

What it covers

The book is a top-to-bottom pass over the agent, following a single request from the interface it arrives on, through the engine that runs it, to the world it acts on:

  • The agent loop — how a thread holds sessions, how a turn is assembled, sent to the model, and folded back in; how work is made durable and replayable.
  • Context engineering — treating the prompt as a budget: layered per-model system prompts, diffed self-rendering context fragments, compaction when the window fills, and cross-session memory.
  • The tool system — the registry/router and spec-vs-handler split; running shell commands; editing files through a formal patch grammar; deferring rarely-used tools and discovering them on demand; and Code Mode, where the model writes a program instead of making tool calls.
  • The safety model — the mandatory gate every side-effect crosses: approval policy, a risk-scoring guardian model, execution policy, and kernel-level OS sandboxes.
  • The nervous system — MCP (Codex as both client and server), model providers and auth, and the typed duplex app-server protocol every client speaks.
  • Coordinated minds — planning discipline, sub-agent delegation, reusable Skills, and hooks/plugins that extend the loop without forking.
  • The edges — the 226k-line terminal UI, headless/cloud execution, and observability (traces, analytics, replay).
  • Patterns & retrospective — the recurring design grammar of the codebase and a distilled "what to steal" for building your own agent.

How this book was built

In a fitting twist, the book about Codex was researched and written by a fleet of Codex agents — with Claude Code as the orchestrator and every sub-agent a separate Codex instance. No chapter was written in one pass. Each one was mapped, verified, drafted, reviewed, illustrated, reviewed again, and only then put in front of a human — repeatedly.

The fleet ran continuously for ~9 hours (excluding the author's own reading and comments), then a further ~3 hours of autonomous polishing — roughly 12 hours of agent work in total, wrapped around several human review passes.

The pipeline

flowchart TD
O["Orchestrator · Claude Code"]
O ==> A1["Recon — Researcher + Scanner agents<br/>map ~90 crates into an architecture model"]
A1 --> A2["Deep-dive — one Codex agent per<br/>module &amp; client, running in parallel"]
A2 --> A3{"Reviewers confirm<br/>findings against source"}
A3 -->|gaps| A2
A3 -->|verified| O
O ==> B1["Draft — technical writer<br/>Codex sub-agents"]
B1 --> B2{"Reviewers check<br/>prose against source"}
B2 -->|rewrite| B1
B2 -->|approved| O
O ==> C1["Visualise — diagram &amp; visual<br/>Codex sub-agents"]
C1 --> C2{"Reviewers verify<br/>every diagram"}
C2 -->|fix| C1
C2 -->|approved| O
O ==> H["Author review — human<br/>multiple passes, re-reads, comments"]
H -->|change requests| O
O ==> D["Codex Decoded"]
classDef orch fill:#C8102E,stroke:#8E0A1F,color:#fff;
classDef out fill:#F6C851,stroke:#B57A16,color:#211A0E;
class O orch;
class D out;
Loading

Every stage ends at a gate: reviewers loop back to their producers until the work holds up against the actual source, and the orchestrator only advances once a stage is clean. The author sits at the end of the loop — reading the material multiple times and feeding comments back in, which re-opens whichever stages the feedback touches.

Lifecycle of a single chapter

sequenceDiagram
autonumber
participant O as Orchestrator (Claude Code)
participant S as Scanner (Codex)
participant R as Reviewer (Codex)
participant W as Writer (Codex)
participant V as Visualiser (Codex)
participant A as Author (human)
O->>S: assign a module / client
S-->>O: findings + source map
O->>R: verify findings vs source
R-->>O: confirmed (or gaps → re-scan)
O->>W: draft chapter from verified findings
W-->>O: chapter draft
O->>R: review prose vs source
R-->>O: approved (or rewrite)
O->>V: create diagrams & visuals
V-->>O: visuals
O->>R: review diagrams
R-->>O: approved (or fix)
O->>A: submit for human review
A-->>O: comments + re-reads (several passes)
O->>O: polish, consolidate, finalise
Loading

The roles

RoleModelWhat it did
OrchestratorClaude CodePlanned the work, dispatched sub-agents, held the quality gates, consolidated everything, and drove the polish pass.
Researcher + ScannerCodexRead the source tree, mapped ~90 crates and their dependencies, and produced the high-level architecture model.
Module deep-diveCodexOne agent per module/client, in parallel, extracting how each subsystem actually works.
Findings reviewersCodexConfirmed each agent's findings against the real source before anything was written.
Technical writersCodexTurned verified findings into chapter prose with annotated, real code.
Writing reviewersCodexChecked every draft back against the source for accuracy and clarity.
VisualisersCodexBuilt the diagrams, interactive graphs, and technical illustrations.
Visual reviewersCodexVerified each diagram matched the architecture it depicted.
AuthorHumanReviewed at multiple checkpoints, re-read the material several times, and sent comments that reopened the loop.

By the numbers — 1 orchestrator (Claude Code) · a fleet of Codex sub-agents · ~90 crates mapped · 36 chapters · every module and chapter double-reviewed against source · ~9h autonomous + ~3h polish + multiple human review passes.

Quick start

npm install # install dependencies
npm run dev # start the dev server (http://localhost:5173)
npm run build # produce a static site in dist/
npm run preview # serve the built dist/ locally

The built dist/ is fully static — deploy it to any static host (Netlify, Vercel, GitHub Pages, S3, nginx). base: './' in vite.config.js means it also works from a sub-path.

Contents

Start here

PageWhat's on it
CoverThe book cover and entry point.
Contents & roadmapThe full table of contents with a per-chapter brief.
The complete mapAn interactive architecture map linking every subsystem to its chapter.
PrefaceHow to read this field guide, and the conventions used.

Part I — The lay of the land

#ChapterWhat's covered
1Architecture at a glanceThe whole request path on one page: interfaces, engine, world.
2Repository topologyMonorepo layout and the three build systems.
3Build & distributionThe npm launcher, platform binaries, and the SDKs.
4The crate mapInteractive dependency graph of all ~90 crates.

Part II — The engine room

#ChapterWhat's covered
5Thread · Session · TurnThe core abstractions, walked through with an interactive turn loop.
6The ThreadManagerThe factory that vends threads and shares services.
7Sessions & turn contextSession state, owns-vs-borrows, and steering mid-turn.
8Rollout: state & replayAppend-only JSONL rollout: durability, resume, replay.

Part III — The mind

#ChapterWhat's covered
9System prompts & personalitiesSystem prompts as data — layered, per-model, with full verbatim prompts.
10Context assemblyContext assembled from diffed, self-rendering fragments.
11Compaction & token budgetCompaction and the token budget when the window fills.
12MemoriesCross-session memory via a background consolidation agent.

Part IV — The hands

#ChapterWhat's covered
13The tool systemThe registry, router, and the spec/handler split.
14Dispatch lifecycleDispatch, the RwLock parallel gate, and result mapping.
15Shell & unified execRunning commands: one-shot shell and long-lived exec.
16apply_patchEditing files through a formal patch grammar.
17Approvals, safety & sandboxingFour safety layers: approvals, guardian, execution policy, sandbox.
18Tool search & dynamic toolsDeferred tools discovered on demand via BM25 search.
19Code ModeA sandboxed V8 runtime where tools become callable functions.

Part V — The nervous system

#ChapterWhat's covered
20MCP: the protocolMultiplexed MCP clients, transports, and Codex as a server.
21MCP tools, resources, elicitationMCP tool exposure, resources, and elicitation.
22Providers & connectionsModel providers, transport, and authentication.
23The app-serverThe typed duplex protocol every client speaks.

Part VI — Coordinated minds

#ChapterWhat's covered
24The planning toolThe update_plan checklist and plan discipline.
25Sub-agents & delegationSpawning sub-agents: roles, names, and delegation.
26SkillsReusable SKILL.md capabilities with dependencies.
27Hooks & extensibilityHooks and plugins: extend the loop without forking.

Part VII — The edges

#ChapterWhat's covered
28The TUIThe 226k-line ratatui terminal interface.
29Headless: exec & cloudHeadless exec (JSONL) and cloud tasks.
30Observability & opsTelemetry, analytics, replayable traces, and prompt-debug.

Part VIII — Patterns & retrospective

#ChapterWhat's covered
31Cross-cutting patternsThe recurring design patterns across the codebase.
32What to stealA distilled checklist, a glossary, and the crate index.

Project layout

index.html # page shell + fonts; mounts /src/main.js
vite.config.js
src/
main.js # boot: builds the TOC, hash router, per-chapter initializers
data/
book.js # BOOK (table of contents) + FLAT (flattened chapter list)
chapters/
index.js # CONTENT registry: chapter id -> render function
cover.js … # one module per page (cover, contents, map, preface, ch1–ch32)
lib/
vendor.js # third-party libs (highlight.js, d3, chart.js, mermaid)
code.js # annotated code-block renderer
mermaid.js # mermaid theme + diagram helpers
graph.js # dependency-graph data + D3 force graph + Chart.js charts
map.js # architecture-map data + SVG builder
prompts.js # loads the verbatim prompts and hydrates them into the page
marks.js # decorative inline SVGs
prompts/ # the 8 verbatim Codex system prompts, as plain-text files
base.txt, codex52.txt, compact.txt, friendly.txt,
pragmatic.txt, consolidation.txt, apply-patch.txt, guardian.txt
styles/
base.css # design tokens, reset, layout, typography
components.css # code viewer, diagrams, tables, map, cover, etc.
assets/
cover.jpg # book cover

How it works

  • Routingsrc/main.js reads location.hash (#/ch5), looks the id up in the CONTENT registry, calls that chapter's render function to produce an HTML string, and injects it into #view. A stubPage fallback renders an outline for any chapter not yet in the registry.
  • Chapters as data — every page is a module that default-exports a () => htmlString function. Shared helpers (code, mmd, fullPrompt, …) are imported at the top of each chapter, so content stays declarative.
  • Interactive widgets — after a chapter renders, the router runs the relevant initializer: the D3 crate graph and Chart.js charts (crate map), the animated turn stepper (Thread · Session · Turn), the spec/handler toggle (tool system), Mermaid diagrams, and prompt hydration.
  • Prompts — the verbatim system prompts live as plain-text files under src/prompts/, imported with Vite's ?raw and injected into the collapsible "read the full prompt" panels.

Tech stack

Vanilla ES modules bundled by Vite — no UI framework. Runtime libraries: highlight.js (code), D3 (force graph), Chart.js (charts), and Mermaid (diagrams).

Adding or editing content

  • A chapter lives in src/chapters/<id>.js and default-exports a function that returns an HTML string. Register it in src/chapters/index.js. Chapters compose content with the helpers imported at the top of each file (code, mmd, fullPrompt, etc.).
  • A prompt is a plain .txt file in src/prompts/, imported in src/lib/prompts.js and keyed pr-<name> so fullPrompt('pr-<name>', …) can render it.
  • Table of contents / ordering is driven by src/data/book.js.

Contributing

Contributions are welcome — corrections, clearer explanations, better diagrams, and coverage of new subsystems. Because this is a source-level guide, technical changes should reflect the actual Codex source and cite the file(s) they come from.

main is protected, so all changes land through pull requests: branch off main, make sure npm run build passes, open a PR (CI runs a build check), and a maintainer reviews and merges. On merge the site auto-deploys to GitHub Pages.

See CONTRIBUTING.md for the full guide — setup, project layout, commit conventions (Conventional Commits), and how to add a chapter, prompt, or diagram.

License

This project is dual-licensed:

© 2026 Ahmed Alaa.

Attribution. This is an independent field guide to openai/codex and is not affiliated with or endorsed by OpenAI. The verbatim system prompts reproduced under src/prompts/ originate from openai/codex, which is licensed under Apache-2.0; all rights to that material remain with its authors.

Notes

  • Chapter 13 surfaces a benign unhandled-rejection from Mermaid's async renderer; the diagrams still render and it is harmless.

About

The Codex Codex — an interactive architectural field guide to openai/codex (Vite multi-module site).

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Codex Decoded

The Codex Codex — an architectural field guide to openai/codex.

Codex Decoded — Inside the Architecture of the Codex Coding Agent

An interactive, book-style technical guide that reads the Codex source tree (openai/codex, ~90 Rust crates) and explains how a production coding agent is actually built — the turn loop, context engineering, the tool system, the safety model, extensibility, and the protocol that fronts it all. It is 36 chapters of prose backed by annotated real source, interactive diagrams (a D3 dependency graph of every crate, Chart.js breakdowns, Mermaid sequence/flow diagrams), an architecture map, and the verbatim Codex system prompts.

It ships as a small single-page app: a hash router renders one chapter module at a time into the page, with per-chapter interactive widgets wired up on navigation.

What it covers

The book is a top-to-bottom pass over the agent, following a single request from the interface it arrives on, through the engine that runs it, to the world it acts on:

  • The agent loop — how a thread holds sessions, how a turn is assembled, sent to the model, and folded back in; how work is made durable and replayable.
  • Context engineering — treating the prompt as a budget: layered per-model system prompts, diffed self-rendering context fragments, compaction when the window fills, and cross-session memory.
  • The tool system — the registry/router and spec-vs-handler split; running shell commands; editing files through a formal patch grammar; deferring rarely-used tools and discovering them on demand; and Code Mode, where the model writes a program instead of making tool calls.
  • The safety model — the mandatory gate every side-effect crosses: approval policy, a risk-scoring guardian model, execution policy, and kernel-level OS sandboxes.
  • The nervous system — MCP (Codex as both client and server), model providers and auth, and the typed duplex app-server protocol every client speaks.
  • Coordinated minds — planning discipline, sub-agent delegation, reusable Skills, and hooks/plugins that extend the loop without forking.
  • The edges — the 226k-line terminal UI, headless/cloud execution, and observability (traces, analytics, replay).
  • Patterns & retrospective — the recurring design grammar of the codebase and a distilled "what to steal" for building your own agent.

How this book was built

In a fitting twist, the book about Codex was researched and written by a fleet of Codex agents — with Claude Code as the orchestrator and every sub-agent a separate Codex instance. No chapter was written in one pass. Each one was mapped, verified, drafted, reviewed, illustrated, reviewed again, and only then put in front of a human — repeatedly.

The fleet ran continuously for ~9 hours (excluding the author's own reading and comments), then a further ~3 hours of autonomous polishing — roughly 12 hours of agent work in total, wrapped around several human review passes.

The pipeline

flowchart TD
O["Orchestrator · Claude Code"]
O ==> A1["Recon — Researcher + Scanner agents<br/>map ~90 crates into an architecture model"]
A1 --> A2["Deep-dive — one Codex agent per<br/>module &amp; client, running in parallel"]
A2 --> A3{"Reviewers confirm<br/>findings against source"}
A3 -->|gaps| A2
A3 -->|verified| O
O ==> B1["Draft — technical writer<br/>Codex sub-agents"]
B1 --> B2{"Reviewers check<br/>prose against source"}
B2 -->|rewrite| B1
B2 -->|approved| O
O ==> C1["Visualise — diagram &amp; visual<br/>Codex sub-agents"]
C1 --> C2{"Reviewers verify<br/>every diagram"}
C2 -->|fix| C1
C2 -->|approved| O
O ==> H["Author review — human<br/>multiple passes, re-reads, comments"]
H -->|change requests| O
O ==> D["Codex Decoded"]
classDef orch fill:#C8102E,stroke:#8E0A1F,color:#fff;
classDef out fill:#F6C851,stroke:#B57A16,color:#211A0E;
class O orch;
class D out;
Loading

Every stage ends at a gate: reviewers loop back to their producers until the work holds up against the actual source, and the orchestrator only advances once a stage is clean. The author sits at the end of the loop — reading the material multiple times and feeding comments back in, which re-opens whichever stages the feedback touches.

Lifecycle of a single chapter

sequenceDiagram
autonumber
participant O as Orchestrator (Claude Code)
participant S as Scanner (Codex)
participant R as Reviewer (Codex)
participant W as Writer (Codex)
participant V as Visualiser (Codex)
participant A as Author (human)
O->>S: assign a module / client
S-->>O: findings + source map
O->>R: verify findings vs source
R-->>O: confirmed (or gaps → re-scan)
O->>W: draft chapter from verified findings
W-->>O: chapter draft
O->>R: review prose vs source
R-->>O: approved (or rewrite)
O->>V: create diagrams & visuals
V-->>O: visuals
O->>R: review diagrams
R-->>O: approved (or fix)
O->>A: submit for human review
A-->>O: comments + re-reads (several passes)
O->>O: polish, consolidate, finalise
Loading

The roles

RoleModelWhat it did
OrchestratorClaude CodePlanned the work, dispatched sub-agents, held the quality gates, consolidated everything, and drove the polish pass.
Researcher + ScannerCodexRead the source tree, mapped ~90 crates and their dependencies, and produced the high-level architecture model.
Module deep-diveCodexOne agent per module/client, in parallel, extracting how each subsystem actually works.
Findings reviewersCodexConfirmed each agent's findings against the real source before anything was written.
Technical writersCodexTurned verified findings into chapter prose with annotated, real code.
Writing reviewersCodexChecked every draft back against the source for accuracy and clarity.
VisualisersCodexBuilt the diagrams, interactive graphs, and technical illustrations.
Visual reviewersCodexVerified each diagram matched the architecture it depicted.
AuthorHumanReviewed at multiple checkpoints, re-read the material several times, and sent comments that reopened the loop.

By the numbers — 1 orchestrator (Claude Code) · a fleet of Codex sub-agents · ~90 crates mapped · 36 chapters · every module and chapter double-reviewed against source · ~9h autonomous + ~3h polish + multiple human review passes.

Quick start

npm install # install dependencies
npm run dev # start the dev server (http://localhost:5173)
npm run build # produce a static site in dist/
npm run preview # serve the built dist/ locally

The built dist/ is fully static — deploy it to any static host (Netlify, Vercel, GitHub Pages, S3, nginx). base: './' in vite.config.js means it also works from a sub-path.

Contents

Start here

PageWhat's on it
CoverThe book cover and entry point.
Contents & roadmapThe full table of contents with a per-chapter brief.
The complete mapAn interactive architecture map linking every subsystem to its chapter.
PrefaceHow to read this field guide, and the conventions used.

Part I — The lay of the land

#ChapterWhat's covered
1Architecture at a glanceThe whole request path on one page: interfaces, engine, world.
2Repository topologyMonorepo layout and the three build systems.
3Build & distributionThe npm launcher, platform binaries, and the SDKs.
4The crate mapInteractive dependency graph of all ~90 crates.

Part II — The engine room

#ChapterWhat's covered
5Thread · Session · TurnThe core abstractions, walked through with an interactive turn loop.
6The ThreadManagerThe factory that vends threads and shares services.
7Sessions & turn contextSession state, owns-vs-borrows, and steering mid-turn.
8Rollout: state & replayAppend-only JSONL rollout: durability, resume, replay.

Part III — The mind

#ChapterWhat's covered
9System prompts & personalitiesSystem prompts as data — layered, per-model, with full verbatim prompts.
10Context assemblyContext assembled from diffed, self-rendering fragments.
11Compaction & token budgetCompaction and the token budget when the window fills.
12MemoriesCross-session memory via a background consolidation agent.

Part IV — The hands

#ChapterWhat's covered
13The tool systemThe registry, router, and the spec/handler split.
14Dispatch lifecycleDispatch, the RwLock parallel gate, and result mapping.
15Shell & unified execRunning commands: one-shot shell and long-lived exec.
16apply_patchEditing files through a formal patch grammar.
17Approvals, safety & sandboxingFour safety layers: approvals, guardian, execution policy, sandbox.
18Tool search & dynamic toolsDeferred tools discovered on demand via BM25 search.
19Code ModeA sandboxed V8 runtime where tools become callable functions.

Part V — The nervous system

#ChapterWhat's covered
20MCP: the protocolMultiplexed MCP clients, transports, and Codex as a server.
21MCP tools, resources, elicitationMCP tool exposure, resources, and elicitation.
22Providers & connectionsModel providers, transport, and authentication.
23The app-serverThe typed duplex protocol every client speaks.

Part VI — Coordinated minds

#ChapterWhat's covered
24The planning toolThe update_plan checklist and plan discipline.
25Sub-agents & delegationSpawning sub-agents: roles, names, and delegation.
26SkillsReusable SKILL.md capabilities with dependencies.
27Hooks & extensibilityHooks and plugins: extend the loop without forking.

Part VII — The edges

#ChapterWhat's covered
28The TUIThe 226k-line ratatui terminal interface.
29Headless: exec & cloudHeadless exec (JSONL) and cloud tasks.
30Observability & opsTelemetry, analytics, replayable traces, and prompt-debug.

Part VIII — Patterns & retrospective

#ChapterWhat's covered
31Cross-cutting patternsThe recurring design patterns across the codebase.
32What to stealA distilled checklist, a glossary, and the crate index.

Project layout

index.html # page shell + fonts; mounts /src/main.js
vite.config.js
src/
main.js # boot: builds the TOC, hash router, per-chapter initializers
data/
book.js # BOOK (table of contents) + FLAT (flattened chapter list)
chapters/
index.js # CONTENT registry: chapter id -> render function
cover.js … # one module per page (cover, contents, map, preface, ch1–ch32)
lib/
vendor.js # third-party libs (highlight.js, d3, chart.js, mermaid)
code.js # annotated code-block renderer
mermaid.js # mermaid theme + diagram helpers
graph.js # dependency-graph data + D3 force graph + Chart.js charts
map.js # architecture-map data + SVG builder
prompts.js # loads the verbatim prompts and hydrates them into the page
marks.js # decorative inline SVGs
prompts/ # the 8 verbatim Codex system prompts, as plain-text files
base.txt, codex52.txt, compact.txt, friendly.txt,
pragmatic.txt, consolidation.txt, apply-patch.txt, guardian.txt
styles/
base.css # design tokens, reset, layout, typography
components.css # code viewer, diagrams, tables, map, cover, etc.
assets/
cover.jpg # book cover

How it works

  • Routingsrc/main.js reads location.hash (#/ch5), looks the id up in the CONTENT registry, calls that chapter's render function to produce an HTML string, and injects it into #view. A stubPage fallback renders an outline for any chapter not yet in the registry.
  • Chapters as data — every page is a module that default-exports a () => htmlString function. Shared helpers (code, mmd, fullPrompt, …) are imported at the top of each chapter, so content stays declarative.
  • Interactive widgets — after a chapter renders, the router runs the relevant initializer: the D3 crate graph and Chart.js charts (crate map), the animated turn stepper (Thread · Session · Turn), the spec/handler toggle (tool system), Mermaid diagrams, and prompt hydration.
  • Prompts — the verbatim system prompts live as plain-text files under src/prompts/, imported with Vite's ?raw and injected into the collapsible "read the full prompt" panels.

Tech stack

Vanilla ES modules bundled by Vite — no UI framework. Runtime libraries: highlight.js (code), D3 (force graph), Chart.js (charts), and Mermaid (diagrams).

Adding or editing content

  • A chapter lives in src/chapters/<id>.js and default-exports a function that returns an HTML string. Register it in src/chapters/index.js. Chapters compose content with the helpers imported at the top of each file (code, mmd, fullPrompt, etc.).
  • A prompt is a plain .txt file in src/prompts/, imported in src/lib/prompts.js and keyed pr-<name> so fullPrompt('pr-<name>', …) can render it.
  • Table of contents / ordering is driven by src/data/book.js.

Contributing

Contributions are welcome — corrections, clearer explanations, better diagrams, and coverage of new subsystems. Because this is a source-level guide, technical changes should reflect the actual Codex source and cite the file(s) they come from.

main is protected, so all changes land through pull requests: branch off main, make sure npm run build passes, open a PR (CI runs a build check), and a maintainer reviews and merges. On merge the site auto-deploys to GitHub Pages.

See CONTRIBUTING.md for the full guide — setup, project layout, commit conventions (Conventional Commits), and how to add a chapter, prompt, or diagram.

License

This project is dual-licensed:

© 2026 Ahmed Alaa.

Attribution. This is an independent field guide to openai/codex and is not affiliated with or endorsed by OpenAI. The verbatim system prompts reproduced under src/prompts/ originate from openai/codex, which is licensed under Apache-2.0; all rights to that material remain with its authors.

Notes

  • Chapter 13 surfaces a benign unhandled-rejection from Mermaid's async renderer; the diagrams still render and it is harmless.

About

The Codex Codex — an interactive architectural field guide to openai/codex (Vite multi-module site).

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Repository files navigation

Codex Decoded

The Codex Codex — an architectural field guide to openai/codex.

Codex Decoded — Inside the Architecture of the Codex Coding Agent

An interactive, book-style technical guide that reads the Codex source tree (openai/codex, ~90 Rust crates) and explains how a production coding agent is actually built — the turn loop, context engineering, the tool system, the safety model, extensibility, and the protocol that fronts it all. It is 36 chapters of prose backed by annotated real source, interactive diagrams (a D3 dependency graph of every crate, Chart.js breakdowns, Mermaid sequence/flow diagrams), an architecture map, and the verbatim Codex system prompts.

It ships as a small single-page app: a hash router renders one chapter module at a time into the page, with per-chapter interactive widgets wired up on navigation.

What it covers

The book is a top-to-bottom pass over the agent, following a single request from the interface it arrives on, through the engine that runs it, to the world it acts on:

  • The agent loop — how a thread holds sessions, how a turn is assembled, sent to the model, and folded back in; how work is made durable and replayable.
  • Context engineering — treating the prompt as a budget: layered per-model system prompts, diffed self-rendering context fragments, compaction when the window fills, and cross-session memory.
  • The tool system — the registry/router and spec-vs-handler split; running shell commands; editing files through a formal patch grammar; deferring rarely-used tools and discovering them on demand; and Code Mode, where the model writes a program instead of making tool calls.
  • The safety model — the mandatory gate every side-effect crosses: approval policy, a risk-scoring guardian model, execution policy, and kernel-level OS sandboxes.
  • The nervous system — MCP (Codex as both client and server), model providers and auth, and the typed duplex app-server protocol every client speaks.
  • Coordinated minds — planning discipline, sub-agent delegation, reusable Skills, and hooks/plugins that extend the loop without forking.
  • The edges — the 226k-line terminal UI, headless/cloud execution, and observability (traces, analytics, replay).
  • Patterns & retrospective — the recurring design grammar of the codebase and a distilled "what to steal" for building your own agent.

How this book was built

In a fitting twist, the book about Codex was researched and written by a fleet of Codex agents — with Claude Code as the orchestrator and every sub-agent a separate Codex instance. No chapter was written in one pass. Each one was mapped, verified, drafted, reviewed, illustrated, reviewed again, and only then put in front of a human — repeatedly.

The fleet ran continuously for ~9 hours (excluding the author's own reading and comments), then a further ~3 hours of autonomous polishing — roughly 12 hours of agent work in total, wrapped around several human review passes.

The pipeline

flowchart TD
O["Orchestrator · Claude Code"]
O ==> A1["Recon — Researcher + Scanner agents<br/>map ~90 crates into an architecture model"]
A1 --> A2["Deep-dive — one Codex agent per<br/>module &amp; client, running in parallel"]
A2 --> A3{"Reviewers confirm<br/>findings against source"}
A3 -->|gaps| A2
A3 -->|verified| O
O ==> B1["Draft — technical writer<br/>Codex sub-agents"]
B1 --> B2{"Reviewers check<br/>prose against source"}
B2 -->|rewrite| B1
B2 -->|approved| O
O ==> C1["Visualise — diagram &amp; visual<br/>Codex sub-agents"]
C1 --> C2{"Reviewers verify<br/>every diagram"}
C2 -->|fix| C1
C2 -->|approved| O
O ==> H["Author review — human<br/>multiple passes, re-reads, comments"]
H -->|change requests| O
O ==> D["Codex Decoded"]
classDef orch fill:#C8102E,stroke:#8E0A1F,color:#fff;
classDef out fill:#F6C851,stroke:#B57A16,color:#211A0E;
class O orch;
class D out;
Loading

Every stage ends at a gate: reviewers loop back to their producers until the work holds up against the actual source, and the orchestrator only advances once a stage is clean. The author sits at the end of the loop — reading the material multiple times and feeding comments back in, which re-opens whichever stages the feedback touches.

Lifecycle of a single chapter

sequenceDiagram
autonumber
participant O as Orchestrator (Claude Code)
participant S as Scanner (Codex)
participant R as Reviewer (Codex)
participant W as Writer (Codex)
participant V as Visualiser (Codex)
participant A as Author (human)
O->>S: assign a module / client
S-->>O: findings + source map
O->>R: verify findings vs source
R-->>O: confirmed (or gaps → re-scan)
O->>W: draft chapter from verified findings
W-->>O: chapter draft
O->>R: review prose vs source
R-->>O: approved (or rewrite)
O->>V: create diagrams & visuals
V-->>O: visuals
O->>R: review diagrams
R-->>O: approved (or fix)
O->>A: submit for human review
A-->>O: comments + re-reads (several passes)
O->>O: polish, consolidate, finalise
Loading

The roles

RoleModelWhat it did
OrchestratorClaude CodePlanned the work, dispatched sub-agents, held the quality gates, consolidated everything, and drove the polish pass.
Researcher + ScannerCodexRead the source tree, mapped ~90 crates and their dependencies, and produced the high-level architecture model.
Module deep-diveCodexOne agent per module/client, in parallel, extracting how each subsystem actually works.
Findings reviewersCodexConfirmed each agent's findings against the real source before anything was written.
Technical writersCodexTurned verified findings into chapter prose with annotated, real code.
Writing reviewersCodexChecked every draft back against the source for accuracy and clarity.
VisualisersCodexBuilt the diagrams, interactive graphs, and technical illustrations.
Visual reviewersCodexVerified each diagram matched the architecture it depicted.
AuthorHumanReviewed at multiple checkpoints, re-read the material several times, and sent comments that reopened the loop.

By the numbers — 1 orchestrator (Claude Code) · a fleet of Codex sub-agents · ~90 crates mapped · 36 chapters · every module and chapter double-reviewed against source · ~9h autonomous + ~3h polish + multiple human review passes.

Quick start

npm install # install dependencies
npm run dev # start the dev server (http://localhost:5173)
npm run build # produce a static site in dist/
npm run preview # serve the built dist/ locally

The built dist/ is fully static — deploy it to any static host (Netlify, Vercel, GitHub Pages, S3, nginx). base: './' in vite.config.js means it also works from a sub-path.

Contents

Start here

PageWhat's on it
CoverThe book cover and entry point.
Contents & roadmapThe full table of contents with a per-chapter brief.
The complete mapAn interactive architecture map linking every subsystem to its chapter.
PrefaceHow to read this field guide, and the conventions used.

Part I — The lay of the land

#ChapterWhat's covered
1Architecture at a glanceThe whole request path on one page: interfaces, engine, world.
2Repository topologyMonorepo layout and the three build systems.
3Build & distributionThe npm launcher, platform binaries, and the SDKs.
4The crate mapInteractive dependency graph of all ~90 crates.

Part II — The engine room

#ChapterWhat's covered
5Thread · Session · TurnThe core abstractions, walked through with an interactive turn loop.
6The ThreadManagerThe factory that vends threads and shares services.
7Sessions & turn contextSession state, owns-vs-borrows, and steering mid-turn.
8Rollout: state & replayAppend-only JSONL rollout: durability, resume, replay.

Part III — The mind

#ChapterWhat's covered
9System prompts & personalitiesSystem prompts as data — layered, per-model, with full verbatim prompts.
10Context assemblyContext assembled from diffed, self-rendering fragments.
11Compaction & token budgetCompaction and the token budget when the window fills.
12MemoriesCross-session memory via a background consolidation agent.

Part IV — The hands

#ChapterWhat's covered
13The tool systemThe registry, router, and the spec/handler split.
14Dispatch lifecycleDispatch, the RwLock parallel gate, and result mapping.
15Shell & unified execRunning commands: one-shot shell and long-lived exec.
16apply_patchEditing files through a formal patch grammar.
17Approvals, safety & sandboxingFour safety layers: approvals, guardian, execution policy, sandbox.
18Tool search & dynamic toolsDeferred tools discovered on demand via BM25 search.
19Code ModeA sandboxed V8 runtime where tools become callable functions.

Part V — The nervous system

#ChapterWhat's covered
20MCP: the protocolMultiplexed MCP clients, transports, and Codex as a server.
21MCP tools, resources, elicitationMCP tool exposure, resources, and elicitation.
22Providers & connectionsModel providers, transport, and authentication.
23The app-serverThe typed duplex protocol every client speaks.

Part VI — Coordinated minds

#ChapterWhat's covered
24The planning toolThe update_plan checklist and plan discipline.
25Sub-agents & delegationSpawning sub-agents: roles, names, and delegation.
26SkillsReusable SKILL.md capabilities with dependencies.
27Hooks & extensibilityHooks and plugins: extend the loop without forking.

Part VII — The edges

#ChapterWhat's covered
28The TUIThe 226k-line ratatui terminal interface.
29Headless: exec & cloudHeadless exec (JSONL) and cloud tasks.
30Observability & opsTelemetry, analytics, replayable traces, and prompt-debug.

Part VIII — Patterns & retrospective

#ChapterWhat's covered
31Cross-cutting patternsThe recurring design patterns across the codebase.
32What to stealA distilled checklist, a glossary, and the crate index.

Project layout

index.html # page shell + fonts; mounts /src/main.js
vite.config.js
src/
main.js # boot: builds the TOC, hash router, per-chapter initializers
data/
book.js # BOOK (table of contents) + FLAT (flattened chapter list)
chapters/
index.js # CONTENT registry: chapter id -> render function
cover.js … # one module per page (cover, contents, map, preface, ch1–ch32)
lib/
vendor.js # third-party libs (highlight.js, d3, chart.js, mermaid)
code.js # annotated code-block renderer
mermaid.js # mermaid theme + diagram helpers
graph.js # dependency-graph data + D3 force graph + Chart.js charts
map.js # architecture-map data + SVG builder
prompts.js # loads the verbatim prompts and hydrates them into the page
marks.js # decorative inline SVGs
prompts/ # the 8 verbatim Codex system prompts, as plain-text files
base.txt, codex52.txt, compact.txt, friendly.txt,
pragmatic.txt, consolidation.txt, apply-patch.txt, guardian.txt
styles/
base.css # design tokens, reset, layout, typography
components.css # code viewer, diagrams, tables, map, cover, etc.
assets/
cover.jpg # book cover

How it works

  • Routingsrc/main.js reads location.hash (#/ch5), looks the id up in the CONTENT registry, calls that chapter's render function to produce an HTML string, and injects it into #view. A stubPage fallback renders an outline for any chapter not yet in the registry.
  • Chapters as data — every page is a module that default-exports a () => htmlString function. Shared helpers (code, mmd, fullPrompt, …) are imported at the top of each chapter, so content stays declarative.
  • Interactive widgets — after a chapter renders, the router runs the relevant initializer: the D3 crate graph and Chart.js charts (crate map), the animated turn stepper (Thread · Session · Turn), the spec/handler toggle (tool system), Mermaid diagrams, and prompt hydration.
  • Prompts — the verbatim system prompts live as plain-text files under src/prompts/, imported with Vite's ?raw and injected into the collapsible "read the full prompt" panels.

Tech stack

Vanilla ES modules bundled by Vite — no UI framework. Runtime libraries: highlight.js (code), D3 (force graph), Chart.js (charts), and Mermaid (diagrams).

Adding or editing content

  • A chapter lives in src/chapters/<id>.js and default-exports a function that returns an HTML string. Register it in src/chapters/index.js. Chapters compose content with the helpers imported at the top of each file (code, mmd, fullPrompt, etc.).
  • A prompt is a plain .txt file in src/prompts/, imported in src/lib/prompts.js and keyed pr-<name> so fullPrompt('pr-<name>', …) can render it.
  • Table of contents / ordering is driven by src/data/book.js.

Contributing

Contributions are welcome — corrections, clearer explanations, better diagrams, and coverage of new subsystems. Because this is a source-level guide, technical changes should reflect the actual Codex source and cite the file(s) they come from.

main is protected, so all changes land through pull requests: branch off main, make sure npm run build passes, open a PR (CI runs a build check), and a maintainer reviews and merges. On merge the site auto-deploys to GitHub Pages.

See CONTRIBUTING.md for the full guide — setup, project layout, commit conventions (Conventional Commits), and how to add a chapter, prompt, or diagram.

License

This project is dual-licensed:

© 2026 Ahmed Alaa.

Attribution. This is an independent field guide to openai/codex and is not affiliated with or endorsed by OpenAI. The verbatim system prompts reproduced under src/prompts/ originate from openai/codex, which is licensed under Apache-2.0; all rights to that material remain with its authors.

Notes

  • Chapter 13 surfaces a benign unhandled-rejection from Mermaid's async renderer; the diagrams still render and it is harmless.

About

The Codex Codex — an interactive architectural field guide to openai/codex (Vite multi-module site).

Resources

Contributing

Stars

2 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages