Interactive Playbook

Understand Claude Code from real code paths

Language
Theme

Execution Plan

Analyze first, then teach, then ship

This site is built around real Claude Code source analysis, not generic product copy. The current study uses a local app-source snapshot for internals and the public GitHub repository for plugin and ecosystem context.

Step 1

Source analysis

Map entrypoints, runtime boundaries, tools, permissions, MCP, remote capabilities, and standout implementations.

Step 2

Learning structure

Translate the analysis into architecture maps, module explainers, execution flows, reading tracks, and concept pages.

Step 3

Automated delivery

Export a static Next.js site and deploy it automatically to GitHub Pages from the repository workflow.

Why this project matters

Not just chat plus tools

Claude Code behaves like a platformized terminal product with a query runtime, concurrency-aware tool execution, policy layers, plugins, skills, MCP, and remote modes.

Source basis

Local Claude Code app-source snapshot

Snapshot date: 2026-03-31. Public ecosystem repo commit: 4411cba.

Recommended entry

Architecture → Modules → Runtime Track

That route gives the fastest path from product shape to concrete execution logic.

Draw.io-style overview

Claude Code System Overview

Client & entry layerBootstrap layerExecution centerControl planesPlatform capabilities and durable stateEntry SurfacesCLI, SDK, remote control, MCP server modeBootstrap & Runtime RoutingFast paths, init, trust-safe setup, startup prewarmCore Execution Engineinput normalization -> query loop -> model stream -> tool requestsTool Runtimetool pool, orchestration, streaming executor, result shapingPolicy & Authsettings, permissions, auth, config persistenceRemote & Team Layerbridge, direct connect, remote sessions, team memoryInteractive WorkbenchREPL, app state, prompts, tasks, notificationsExtensibilitycommands, skills, plugins, MCP, LSPPersistence & Recoverysession storage, transcripts, resume safetyKey source landmarkscli.tsx, main.tsx, query.ts, tools.ts, permissions.ts, mcp/client.ts

Analysis Focus

What to pay attention to while reading Claude Code

The main learning payoff is not one file. It is the relationship between runtime routing, the query loop, the tool runtime, the permission system, and the extensibility model.

Runtime shape

Start with how many personalities the product has: interactive CLI, headless engine, bridge process, remote path, and MCP server.

Execution chain

Follow one turn from prompt input to tool execution and transcript persistence.

Policy boundaries

Pay attention to permission modes, settings layers, and auth paths. They explain how autonomy stays governable.

Architecture at a glance

System map

This map mirrors the actual code structure and becomes the backbone of the rest of the learning site.

01

Bootstrap & Runtime Modes

Fast-path entrypoints decide whether Claude Code behaves like a full interactive CLI, a headless engine, a bridge process, or an MCP server.

src/entrypoints/cli.tsxsrc/main.tsxsrc/entrypoints/init.ts
02

Interactive Surface

The REPL and supporting UI state render conversation history, task status, tool output, permissions, and remote controls.

src/replLauncher.tsxsrc/screens/REPL.tsxsrc/state/AppStateStore.ts
03

Query & Tool Runtime

User input is normalized, streamed through query orchestration, and converted into ordered, concurrency-aware tool execution.

src/query.tssrc/QueryEngine.tssrc/services/tools/toolOrchestration.ts
04

Extensibility Layer

Commands, skills, plugins, MCP servers, and LSP integrations are all loaded into the same runtime surface and filtered by policy.

src/commands.tssrc/tools.tssrc/utils/plugins/pluginLoader.tssrc/services/mcp/client.ts
05

Policy, Auth & Persistence

A deep settings and permission system governs what the runtime is allowed to do, how it authenticates, and how sessions resume safely.

src/utils/permissions/permissions.tssrc/utils/auth.tssrc/utils/config.tssrc/utils/sessionStorage.ts
06

Remote & Team Capabilities

Claude Code can act as a remote-control target, manage remote sessions, sync team memory, and expose itself over MCP.

src/bridge/bridgeMain.tssrc/remote/RemoteSessionManager.tssrc/services/teamMemorySync/index.tssrc/entrypoints/mcp.ts

Read this next

Project architecture

Get the boundaries right before diving into subsystems.

Then explore

Core modules

Study role, key files, inputs, outputs, and learning value.

Then simulate

Execution flows

Trace runtime chains step by step and connect them to source files.

Finish with

Reading paths

Choose a route by experience level or technical interest.

30-minute route

Build the mental model fast

Read `cli.tsx` → `main.tsx` → `commands.ts` → `tools.ts` → Architecture page diagrams.

2-hour route

Understand execution deeply

Follow `processUserInput.ts` → `query.ts` → `QueryEngine.ts` → tool orchestration files → session storage.

Platform route

Study extensibility and governance

Focus on permissions, auth, config, plugin loading, and MCP client logic.