UI 与交互层概览
Claude Code 的 UI 基于 React 19 + Ink（自定义 fork） 构建，是一个完整的终端 UI 框架。
技术栈
| 技术 | 版本 | 用途 |
|---|---|---|
| React | 19 | 组件模型与状态管理 |
| Ink | 自定义 fork (~96 文件) | 终端渲染引擎 |
| Yoga Layout | 原生 N-API 绑定 | Flexbox 布局引擎 |
| React Compiler | 编译时优化 | 自动 memo 与缓存 |
UI 架构
┌───────────────────────────────────────────────────┐
│ App (根组件) │
├───────────────────────────────────────────────────┤
│ KeybindingProvider → ModalProvider → ...Providers │
│ ┌─────────────────────────────────────────────┐ │
│ │ REPL Screen │ │
│ │ ┌───────┬──────────────┬──────────────┐ │ │
│ │ │Status │ Messages │ CompSprite │ │ │
│ │ │Line │ ┌──────────┐│ │ │ │
│ │ │ │ │ UserMsg ││ │ │ │
│ │ │ │ │ AIMsg ││ │ │ │
│ │ │ │ │ ToolUse ││ │ │ │
│ │ │ │ │ ToolRes ││ │ │ │
│ │ │ │ └──────────┘│ │ │ │
│ │ │ │ │ │ │ │
│ │ ├───────┴──────────────┴──────────────┤ │ │
│ │ │ Prompt Input │ │ │
│ │ │ ┌──────────────────────────────┐ │ │ │
│ │ │ │ TextInput (多行编辑器) │ │ │ │
│ │ │ └──────────────────────────────┘ │ │ │
│ │ │ Footer Bar │ │ │
│ │ └────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────┘ │
└───────────────────────────────────────────────────┘组件数量统计
| 类别 | 文件数 | 说明 |
|---|---|---|
| components/ | 389 | UI 组件库 |
| hooks/ | 104 | React Hooks |
| screens/ | 3 | 主屏幕 (REPL, Doctor, ResumeConversation) |
| keybindings/ | 14 | 快捷键系统 |
| vim/ | 5 | Vim 模式引擎 |
| buddy/ | 6 | 虚拟伙伴系统 |
| ink/ | 96 | 自定义 Ink fork |
渲染管道
React render() → Virtual DOM diff → Yoga Layout (Flexbox 计算) → Terminal Output (ANSI 序列) → stdout为什么是终端
在终端里做 AI 编程 Agent 而不是 Web/Desktop，有几个原因：
- 开发者的自然栖息地 — 不用切窗口
- SSH 友好 — 远程服务器也能用
- 轻量 — 不需要 Electron 这种重量级容器
- 可组合 — 可以和其他 CLI 工具配合
文档导航
| 文档 | 涵盖内容 |
|---|---|
| Ink 渲染引擎 | 自定义 Ink fork、Yoga 布局、渲染管道 |
| 组件库 | 389 个组件详解 |
| Hooks 系统 | 104 Hooks 分类 |
| 快捷键系统 | 14 文件快捷键引擎 |
| Vim 模式 | 完整 Vim 状态机 |
| 设计系统 | 主题、颜色、输出样式 |
| 语音模式 | 语音输入系统 |
| Buddy 伙伴 | ASCII 虚拟宠物 |