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

文档导航

文档	涵盖内容
Ink 渲染引擎	自定义 Ink fork、Yoga 布局、渲染管道
组件库	389 个组件详解
Hooks 系统	104 Hooks 分类
快捷键系统	14 文件快捷键引擎
Vim 模式	完整 Vim 状态机
设计系统	主题、颜色、输出样式
语音模式	语音输入系统
Buddy 伙伴	ASCII 虚拟宠物