Components

Components 模块是 Claude Code 最庞大的模块，包含 100+ 个 React/Ink 组件和 30+ 个子目录。组件覆盖核心对话（Messages、MessageRow、MessageResponse）、代码编辑（diff/、StructuredDiff、FileEditToolDiff）、Agent 管理（agents/、CoordinatorAgentStatus）、权限控制（permissions/、TrustDialog）、设置面板（Settings/）、MCP 集成（mcp/）、任务管理（tasks/）、团队协作（teams/）等全场景。模块还包含设计系统基础（design-system/、ui/）和专用 Hooks（hooks/）。

职责与设计理念

职责说明

100+ 终端 UI 组件库，覆盖对话、编辑、导航、设置等全场景

设计理念

组件即契约——每个组件的 Props 是其与外界的唯一接口。100+ 组件不是膨胀，而是终端 UI 复杂度的真实映射。子目录按功能域划分，而非按技术类型。

架构决策

为什么 100+ 组件不按技术类型（如 atoms/molecules/organisms）分类？

按功能域（对话、编辑、权限、设置等）分目录

终端 UI 的组件复用率远低于 Web UI。一个 diff 组件不会在设置面板中复用，按功能域分类让开发者能快速定位"我要改对话相关的 UI"。原子设计适合高复用的 Web 组件库，不适合功能高度专化的终端 UI。

文件清单

文件名 用途
App.tsx 应用根组件，编排全局 Provider 和路由
Messages.tsx 消息列表组件，渲染对话历史的核心容器
MessageRow.tsx 单条消息行，处理用户/AI 消息的差异化渲染
PromptInput/ 输入框组件目录，处理多行编辑、自动补全、附件
diff/ 差异对比组件目录，渲染代码变更的 unified/split 视图
permissions/ 权限对话框目录，处理工具执行的用户授权流程
Settings/ 设置面板目录，提供可搜索的配置管理界面
agents/ Agent 管理组件，展示多 Agent 状态和任务分配

使用场景

AI 生成代码变更

diff/ 组件渲染 unified diff 视图，高亮增删行，支持行内注释

工具需要文件写入权限

TrustDialog 弹出授权对话框，用户选择授权粒度

工具请求 → permissions/TrustDialog → 用户选择 → 权限记录

多 Agent 并行工作

agents/ 组件展示每个 Agent 的状态、当前任务和进度

依赖关系

  • Ink — 深度定制的终端渲染引擎，基于 Yoga 布局 + React Reconciler 实现终端 UI
  • Hooks — 80+ 个 React Hooks 库，覆盖 AI 交互、IDE 集成、语音、任务等全场景
  • Context — 9 个 React Context Provider，管理 UI 层的全局状态分发
  • Keybindings — 可定制快捷键系统，支持多上下文、和弦组合与平台适配

关键代码片段

应用根组件结构

function App() {
  return (
    <StatsProvider>
      <NotificationProvider>
        <ModalProvider>
          <KeybindingProvider>
            <FullscreenLayout
              transcript={<Messages />}
              input={<PromptInput />}
              modal={<ActiveDialog />}
              statusLine={<StatusLine />}
            />
          </KeybindingProvider>
        </ModalProvider>
      </NotificationProvider>
    </StatsProvider>
  )
}

多层 Provider 嵌套 + FullscreenLayout 四槽位布局，构成终端 UI 的骨架

权限授权对话框

function TrustDialog({ tool, onAllow, onDeny }: Props) {
  // 展示工具名称、参数、风险等级
  // 用户可选择：允许一次 / 允许本会话 / 始终允许 / 拒绝
  const options = [
    { label: 'Allow once', action: () => onAllow('once') },
    { label: 'Allow for session', action: () => onAllow('session') },
    { label: 'Always allow', action: () => onAllow('always') },
    { label: 'Deny', action: () => onDeny() },
  ]
  return <SelectList items={options} />
}

四级授权粒度：单次/会话/永久/拒绝，平衡安全性与使用便利

技术笔记

performance

消息列表虚拟滚动

Messages 组件使用 useVirtualScroll Hook 实现虚拟滚动，只渲染可视区域内的消息行，支持数千条消息的流畅滚动。

edge-case

终端宽度自适应

所有组件通过 useTerminalSize Hook 响应终端窗口大小变化，diff 视图在窄终端下自动切换为 unified 模式。