docs: 更新文档, 加上配图

README.md

@@ -2,7 +2,7 @@
 
 Anthropic 官方 [Claude Code](https://docs.anthropic.com/en/docs/claude-code) CLI 工具的源码反编译/逆向还原项目。目标是将 Claude Code 大部分功能及工程化能力复现。虽然很难绷, 但是它叫做 CCB(踩踩背)...
 
-[项目解析文档在这里, 还非常初期想要](https://ccb.agent-aura.top/)
+[项目解析文档在这里, 还非常初期, 可以提想要解析的方向 issues](https://ccb.agent-aura.top/)
 
 赞助商占位符
 

docs/context/compaction.mdx

@@ -15,6 +15,10 @@ description: "对话太长怎么办——优雅地'遗忘'不重要的信息"
 
 不压缩的话，很快就会撞到 token 上限，对话被迫终止。
 
+<Frame caption="上下文压缩前后对比">
+  <img src="/docs/images/compaction.png" alt="上下文压缩示意图" />
+</Frame>
+
 ## 压缩的策略
 
 Claude Code 提供了多层压缩机制：

docs/context/system-prompt.mdx

@@ -18,6 +18,10 @@ description: "AI 的'工作记忆'是如何在每次对话前被精心拼装的"
 
 Claude Code 的 System Prompt 不是一段写死的文本，而是根据当前环境**实时组装**的：
 
+<Frame caption="System Prompt 的 6 大组成部分">
+  <img src="/docs/images/system-prompt-assembly.png" alt="System Prompt 动态组装图" />
+</Frame>
+
 | 组成部分 | 内容 | 来源 |
 |----------|------|------|
 | 基础人设 | 角色定义、行为准则 | 内置模板 |

docs/conversation/streaming.mdx

@@ -18,16 +18,9 @@ description: "为什么 Claude Code 的回答是'打字机效果'而不是一整
 
 一次 AI 响应中可能同时包含文字和工具调用。流式系统需要处理这种交织：
 
-```
+<Frame caption="流式输出与工具调用的交织时间线">
-AI 开始输出文字 → "我来看看这个文件的内容..."
+  <img src="/docs/images/streaming-timeline.png" alt="流式响应时间线" />
-AI 发出工具调用 → [FileRead: src/main.ts]
+</Frame>
-           ↓ 暂停流式输出
-     工具执行中... 
-     结果返回给 AI
-           ↓ 恢复流式输出
-AI 继续输出 → "这个文件里有一个 bug，第 42 行..."
-AI 发出下一个工具调用 → [FileEdit: src/main.ts]
-```
 
 ## 流式工具执行
 

docs/conversation/the-loop.mdx

@@ -12,7 +12,9 @@ Claude Code 不一样：你说一个需求，它可能连续执行十几步操
 
 这背后的机制叫做 **Agentic Loop**（智能体循环）：
 
-{/* TODO: 插入 Loop 示意图 */}
+<Frame caption="Agentic Loop 循环示意">
+  <img src="/docs/images/agentic-loop.png" alt="Agentic Loop 循环图" />
+</Frame>
 
 <Steps>
   <Step title="思考">

docs/extensibility/mcp-protocol.mdx

@@ -20,6 +20,10 @@ Claude Code 内置了 50+ 工具，覆盖了通用的软件开发需求。但每
 
 **Model Context Protocol**（模型上下文协议）是 Anthropic 提出的开放标准，定义了 AI 与外部工具之间的通信方式。
 
+<Frame caption="MCP 连接架构——AI 的 USB 接口">
+  <img src="/docs/images/mcp-architecture.png" alt="MCP 连接架构图" />
+</Frame>
+
 类比：USB 是电脑连接外设的标准接口。MCP 是 AI 连接外部能力的标准接口。
 
 ## 工作原理

docs/introduction/architecture-overview.mdx

@@ -9,6 +9,10 @@ description: "五层架构，一条数据流"
 
 Claude Code 从上到下分为五个层次，每一层职责清晰、边界分明：
 
+<Frame caption="Claude Code 五层架构">
+  <img src="/docs/images/architecture-layers.png" alt="Claude Code 五层架构图" />
+</Frame>
+
 | 层次 | 职责 | 关键词 |
 |------|------|--------|
 | **交互层** | 终端 UI、用户输入、消息展示 | React/Ink、REPL |
@@ -19,7 +23,9 @@ Claude Code 从上到下分为五个层次，每一层职责清晰、边界分
 
 ## 一条主数据流
 
-{/* TODO: 插入数据流序列图 */}
+<Frame caption="核心数据流">
+  <img src="/docs/images/data-flow.png" alt="Claude Code 核心数据流" />
+</Frame>
 
 整个系统的运转可以浓缩为一条核心数据流：
 

docs/introduction/what-is-claude-code.mdx

@@ -27,7 +27,9 @@ Claude Code 是一个运行在命令行终端里的 AI 编程助手。你用自
 
 ## 一次典型的交互流程
 
-{/* TODO: 插入一张交互流程示意图 */}
+<Frame>
+  <img src="/docs/images/interaction-flow.png" alt="Claude Code 典型交互流程" />
+</Frame>
 
 1. 你在终端输入自然语言需求
 2. Claude Code 分析你的项目上下文

docs/safety/permission-model.mdx

@@ -19,6 +19,10 @@ description: "三种行为 x 多级来源 = 灵活而严谨的权限体系"
 
 规则可以来自多个来源，优先级从高到低：
 
+<Frame caption="权限规则层级（优先级从上到下递减）">
+  <img src="/docs/images/permission-layers.png" alt="权限层级图" />
+</Frame>
+
 <Steps>
   <Step title="用户会话内设置">
     用户在当前对话中手动授权的（"对这个工具始终允许"）