终端 UI

Claude Code 使用 Ink — 一个在终端中渲染 React 组件的框架 — 构建了完整的交互式 UI。

Ink 框架

Ink 让你可以用 React 的方式构建终端应用：组件、hooks、状态管理、JSX — 一切都在终端里运行。

核心组件树

// 组件层级结构 (170+ 组件, 596 文件)
App.tsx                     ── 根 Provider (AppState, Stats, FpsMetrics)
├── REPL.tsx                ── 交互 REPL (5005行, 54 useState, 68 useEffect)
│   ├── Messages.tsx        ── 消息列表容器
│   │   └── MessageRow.tsx  ── 单条消息渲染
│   │       ├── UserMessage   ── 用户输入
│   │       ├── AssistantMsg  ── AI 回复 (text + thinking)
│   │       └── ToolResult    ── 工具结果 (每个工具有自己的 UI)
│   ├── PromptInput/        ── 用户输入区域
│   ├── permissions/        ── 权限对话框
│   ├── tasks/              ── 任务面板
│   └── teams/              ── 团队协作 UI
├── design-system/          ── 16 个主题 UI 原语 (见下方)
├── diff/ + StructuredDiff/ ── Diff 渲染组件
├── Settings/               ── 设置界面
├── wizard/                 ── 向导流程
├── buddy/                  ── Buddy 伴侣精灵 UI
└── ThemeProvider           ── 主题注入 (dark/light + auto)
    

Design System (16 组件)

src/components/design-system/ 提供可复用的主题化 UI 原语：

REPL 屏幕

src/screens/REPL.tsx 是用户看到的主界面，负责：

• 消息显示 — 渲染完整对话历史，包括用户输入、AI 回复、工具调用结果
• 用户输入 — 多行文本输入，支持键盘快捷键 (Ctrl+C 中断, Ctrl+L 清屏, / 命令)
• 工具权限提示 — 当工具需要权限时，显示交互式确认对话框
• 状态栏 — 显示当前模型、Token 使用量、权限模式、进度
• 流式渲染 — AI 回复逐字渲染，工具执行过程中显示进度

渲染机制

每个工具都可以提供自己的 React 组件来渲染结果：

// 工具的 React 渲染组件 (以 BashTool 为例)
// src/tools/BashTool/BashTool.tsx

function BashToolResult({ result }) {
  return (
    <Box flexDirection="column">
      <Text color="gray">$ {result.command}</Text>
      <Text>{result.stdout}</Text>
      {result.stderr && <Text color="red">{result.stderr}</Text>}
      <Text color="gray">exit: {result.exitCode} ({result.duration}ms)</Text>
    </Box>
  );
}
    

有 React UI 组件的工具包括：AgentTool（进度显示）、BashTool（命令输出）、FileReadTool（文件内容）、FileEditTool（diff 显示）、AskUserQuestionTool（交互式问题）、MCPTool（进度和结果）等。