{"title":"Deep Dissection of Claude Code (Part 1): Product Form and Technical Architecture Evolution","url":"/en/posts/claude-code-source-study-1/","date":"2026-04-01","type":"posts","content":"\u003ch1 id=\"a-deep-dive-into-claude-code-part-1-the-evolution-of-its-product-form-and-technical-architecture\"\u003e\n  A Deep Dive into Claude Code (Part 1): The Evolution of its Product Form and Technical Architecture\n  \u003ca class=\"heading-link\" href=\"#a-deep-dive-into-claude-code-part-1-the-evolution-of-its-product-form-and-technical-architecture\"\u003e\n    \u003ci class=\"fa-solid fa-link\" aria-hidden=\"true\" title=\"Link to heading\"\u003e\u003c/i\u003e\n    \u003cspan class=\"sr-only\"\u003eLink to heading\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/h1\u003e\n\u003cblockquote\u003e\n\u003cp\u003e\u003cstrong\u003eIntroduction\u003c/strong\u003e: As the most powerful native terminal agent available today, Anthropic\u0026rsquo;s Claude Code is far more than just a \u0026ldquo;large model in a wrapper.\u0026rdquo; Through a deep reverse-engineering analysis of its underlying ~330 tool files, 100+ slash commands, and 146 UI components (written purely in TypeScript + React, running on Bun), we can get a glimpse into how a \u003cstrong\u003eproduction-grade terminal agent\u003c/strong\u003e is built from the ground up.\u003c/p\u003e\n\u003cp\u003eThis article goes beyond a superficial feature review. We will conduct a deep-dive analysis of Claude Code\u0026rsquo;s industrial-grade design from the perspectives of its product architecture and core technical foundation.\u003c/p\u003e\n\u003c/blockquote\u003e\n\u003chr\u003e\n\u003ch2 id=\"1-product-architecture-a-terminal-operating-system-beyond-repl\"\u003e\n  1. Product Architecture: A Terminal Operating System Beyond REPL\n  \u003ca class=\"heading-link\" href=\"#1-product-architecture-a-terminal-operating-system-beyond-repl\"\u003e\n    \u003ci class=\"fa-solid fa-link\" aria-hidden=\"true\" title=\"Link to heading\"\u003e\u003c/i\u003e\n    \u003cspan class=\"sr-only\"\u003eLink to heading\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/h2\u003e\n\u003cp\u003eIn its product definition, Claude Code completely breaks away from the monotonous \u0026ldquo;request-response (blocking REPL)\u0026rdquo; model of traditional CLI tools. Its core product architecture can be divided into the following key areas:\u003c/p\u003e\n\u003ch3 id=\"11-a-rich-application-disguised-as-a-terminal-terminal-as-a-react-app\"\u003e\n  1.1 A Rich Application Disguised as a Terminal (Terminal as a React App)\n  \u003ca class=\"heading-link\" href=\"#11-a-rich-application-disguised-as-a-terminal-terminal-as-a-react-app\"\u003e\n    \u003ci class=\"fa-solid fa-link\" aria-hidden=\"true\" title=\"Link to heading\"\u003e\u003c/i\u003e\n    \u003cspan class=\"sr-only\"\u003eLink to heading\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/h3\u003e\n\u003cp\u003eThis is Claude Code\u0026rsquo;s most game-changing feature at the interaction level. Instead of using a conventional \u003ccode\u003econsole.log\u003c/code\u003e to print text, it \u003cstrong\u003eimplements a complete React renderer and Yoga layout engine\u003c/strong\u003e (Facebook\u0026rsquo;s implementation of Flexbox) directly within the terminal environment.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eThe streaming JSON returned by the large model is no longer a jumble of characters but is mapped to a virtual DOM in the terminal (e.g., \u003ccode\u003eink-box\u003c/code\u003e, \u003ccode\u003eink-text\u003c/code\u003e, \u003ccode\u003eink-link\u003c/code\u003e).\u003c/li\u003e\n\u003cli\u003eIt supports \u003cstrong\u003eDouble Buffering and Dirty Flag Cascade\u003c/strong\u003e. This means it can render scrollable highlighted code blocks, smoothly updating progress bars, and even rich interactions like selecting text with a mouse drag, all within a standard terminal.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"12-a-blazing-fast-cold-start-architecture-the-race-against-time\"\u003e\n  1.2 A Blazing-Fast Cold Start Architecture (The Race Against Time)\n  \u003ca class=\"heading-link\" href=\"#12-a-blazing-fast-cold-start-architecture-the-race-against-time\"\u003e\n    \u003ci class=\"fa-solid fa-link\" aria-hidden=\"true\" title=\"Link to heading\"\u003e\u003c/i\u003e\n    \u003cspan class=\"sr-only\"\u003eLink to heading\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/h3\u003e\n\u003cp\u003eAs a terminal command that developers run countless times a day, Claude Code\u0026rsquo;s startup optimization is nothing short of extraordinary:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eWhen you type \u003ccode\u003eclaude\u003c/code\u003e in the terminal, even before the TypeScript module \u003ccode\u003eimport\u003c/code\u003e has finished parsing (which takes about 135ms), its main entry point \u003ccode\u003emain.tsx\u003c/code\u003e immediately spawns a child process to \u003cstrong\u003econcurrently read the OAuth Token from the macOS Keychain\u003c/strong\u003e.\u003c/li\u003e\n\u003cli\u003eThis means the time-consuming I/O operation and the code parsing time are perfectly overlapped, achieving a visually instantaneous startup.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"13-kairos--ultraplan-the-persistent-background-brain\"\u003e\n  1.3 KAIROS \u0026amp; ULTRAPLAN: The Persistent Background Brain\n  \u003ca class=\"heading-link\" href=\"#13-kairos--ultraplan-the-persistent-background-brain\"\u003e\n    \u003ci class=\"fa-solid fa-link\" aria-hidden=\"true\" title=\"Link to heading\"\u003e\u003c/i\u003e\n    \u003cspan class=\"sr-only\"\u003eLink to heading\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/h3\u003e\n\u003cp\u003eClaude Code is not merely a passive, reactive tool. In the reverse-engineered code, we discovered two highly ambitious project codenames:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eKAIROS\u003c/strong\u003e: A persistent assistant mode. It allows Claude to \u0026ldquo;Auto-Dream\u0026rdquo; in the background. When idle, it periodically launches background sub-agents to automatically scan and consolidate conversation history (Memory Consolidation), creating a permanent indexed log.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eULTRAPLAN\u003c/strong\u003e: A cloud-based planning mode. When faced with a refactoring task involving tens of thousands of lines of code, the CLI offloads the task to a cloud cluster (CCR) for up to 30 minutes of silent exploration, without tying up your local terminal. Once the exploration is complete, the plan is \u0026ldquo;teleported\u0026rdquo; back to the local client for execution.\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003ch2 id=\"2-technical-architecture-a-state-machine-to-counter-uncertainty\"\u003e\n  2. Technical Architecture: A State Machine to Counter Uncertainty\n  \u003ca class=\"heading-link\" href=\"#2-technical-architecture-a-state-machine-to-counter-uncertainty\"\u003e\n    \u003ci class=\"fa-solid fa-link\" aria-hidden=\"true\" title=\"Link to heading\"\u003e\u003c/i\u003e\n    \u003cspan class=\"sr-only\"\u003eLink to heading\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/h2\u003e\n\u003cp\u003eLarge models are uncontrollable and divergent. Claude Code\u0026rsquo;s technical architecture is essentially a series of deterministic interceptors and compressors designed to \u0026ldquo;tame\u0026rdquo; this force.\u003c/p\u003e\n\u003ch3 id=\"21-the-core-engine-query-engine-and-query-loop\"\u003e\n  2.1 The Core Engine: Query Engine and Query Loop\n  \u003ca class=\"heading-link\" href=\"#21-the-core-engine-query-engine-and-query-loop\"\u003e\n    \u003ci class=\"fa-solid fa-link\" aria-hidden=\"true\" title=\"Link to heading\"\u003e\u003c/i\u003e\n    \u003cspan class=\"sr-only\"\u003eLink to heading\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/h3\u003e\n\u003cp\u003eThe soul of the entire conversation resides in \u003ccode\u003eQueryEngine.ts\u003c/code\u003e and \u003ccode\u003equery.ts\u003c/code\u003e. It\u0026rsquo;s a persistent State Machine responsible for handling edge cases:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e\u003cstrong\u003eSeamless Resumption\u003c/strong\u003e: Before making an API request, the engine forces the current context (Transcript) to be written to disk. Even if you kill the process with \u003ccode\u003eCtrl+C\u003c/code\u003e midway, the conversation can be perfectly restored on the next launch.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eBudget Control and Retries (\u003ccode\u003eToken Budget Continuation\u003c/code\u003e)\u003c/strong\u003e: When the model generates a long code output and is about to exhaust the token limit, the engine doesn\u0026rsquo;t interrupt the user. Instead, it silently injects a system-invisible instruction: \u0026ldquo;Continue directly, do not apologize, do not summarize,\u0026rdquo; thus smoothly bypassing the maximum token limit.\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch3 id=\"22-context-compaction-mechanisms\"\u003e\n  2.2 Context Compaction Mechanisms\n  \u003ca class=\"heading-link\" href=\"#22-context-compaction-mechanisms\"\u003e\n    \u003ci class=\"fa-solid fa-link\" aria-hidden=\"true\" title=\"Link to heading\"\u003e\u003c/i\u003e\n    \u003cspan class=\"sr-only\"\u003eLink to heading\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/h3\u003e\n\u003cp\u003eTo combat context window limitations and memory loss, Claude Code has built an extremely complex, three-layered defense of compression:\u003c/p\u003e\n\u003col\u003e\n\u003cli\u003e\u003cstrong\u003eMicro-compaction\u003c/strong\u003e: Sets a Time-To-Live (TTL) or character threshold for large file readouts and command-line \u003ccode\u003egrep\u003c/code\u003e results, truncating them immediately once the limit is exceeded.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eSnip Compaction\u003c/strong\u003e: Crudely erases distant historical dialogue but always preserves a \u0026ldquo;Protected Tail\u0026rdquo; of the model\u0026rsquo;s most recent interactions.\u003c/li\u003e\n\u003cli\u003e\u003cstrong\u003eProactive Summarization (Auto-Compaction)\u003c/strong\u003e: When the total token count approaches the final 13k of the context limit, the system automatically triggers a silent background request, prompting the model to summarize previous lengthy discussions into a concise summary (\u003ccode\u003eCompactBoundaryMessage\u003c/code\u003e).\u003c/li\u003e\n\u003c/ol\u003e\n\u003ch3 id=\"24-extensibility-skills-plugins-and-the-mcp-protocol\"\u003e\n  2.4 Extensibility: Skills, Plugins, and the MCP Protocol\n  \u003ca class=\"heading-link\" href=\"#24-extensibility-skills-plugins-and-the-mcp-protocol\"\u003e\n    \u003ci class=\"fa-solid fa-link\" aria-hidden=\"true\" title=\"Link to heading\"\u003e\u003c/i\u003e\n    \u003cspan class=\"sr-only\"\u003eLink to heading\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/h3\u003e\n\u003cp\u003eAs a next-generation entry point, Claude Code possesses powerful extension capabilities:\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003eIts \u003cstrong\u003eTool Registry\u003c/strong\u003e performs deferred loading (Deferred Tool Discovery) based on the model\u0026rsquo;s current needs. Heavy tools like LSP (for syntax tree completion) are kept on standby, and their schemas are only injected when the model explicitly states, \u0026ldquo;I need to analyze syntax.\u0026rdquo;\u003c/li\u003e\n\u003cli\u003eIt deeply integrates the \u003cstrong\u003eMCP (Model Context Protocol)\u003c/strong\u003e, enabling it to seamlessly convert the capabilities of any external system (like local database queries and cloud APIs) into tools the model can call via \u003ccode\u003estdio\u003c/code\u003e or network protocols.\u003c/li\u003e\n\u003c/ul\u003e\n\u003chr\u003e\n\u003cp\u003eIn the next installment, \u0026ldquo;Deep Dive into Claude Code (Part 2): Code Skeleton and Core Logic,\u0026rdquo; we will take a more micro-level look at its source code, examining how it uses \u003ccode\u003eBashTool\u003c/code\u003e and a permission system to prevent the model from catastrophic actions like deleting databases, as well as its futuristic Multi-Agent (nested multi-agent) derivation mechanism.\u003c/p\u003e\n","description":" A Deep Dive into Claude Code (Part 1): The Evolution of its Product Form and Technical Architecture Link to heading Introduction: As the most powerful native terminal agent available today, Anthropic\u0026rsquo;s Claude Code is far more than just a \u0026ldquo;large model in a wrapper.\u0026rdquo; Through a deep reverse-engineering analysis of its underlying ~330 tool files, 100+ slash commands, and 146 UI components (written purely in TypeScript + React, running on Bun), we can get a glimpse into how a production-grade terminal agent is built from the ground up.\n"}