components 模块 — 31 个组件子目录分类

路径: src/components/ 子目录数: 31 个总文件数: 150+

设计系统（design-system/）

基础 UI 原语，被其他所有组件使用：

ThemedText — 主题感知文本（从主题键或原始颜色解析）
Dialog — 基础对话框（取消/确认，可配置快捷键）
Pane — 带边框的面板容器
FuzzyPicker — 模糊搜索选择界面
Tabs — 标签页导航
ProgressBar — 进度条
Tooltip — 悬停信息
Badge — 状态标记
Divider — 分隔线
ErrorBoundary — 错误边界

核心交互组件

PromptInput/（20+ 文件）

用户输入的主入口，最复杂的组件目录：

PromptInput — 主输入组件
ShimmeredInput — 带闪烁效果的输入
InputFooter — 底部快捷键和状态
InputHeader — 顶部上下文信息
AttachmentList — 附件管理
InputHistory — 命令历史导航
InputSuggestions — 自动补全建议
MultilineInput — 多行输入
CodeInput — 代码输入（语法高亮）

CustomSelect/

自定义选择列表（键盘导航、搜索过滤、多选、分组）

Spinner/

加载动画指示器

权限组件（permissions/，30+ 文件）

组件	说明
`PermissionDialog`	基础权限对话框包装器（圆角边框、标题）
`BashPermissionRequest`	Shell 命令审批
`FileEditPermissionRequest`	文件修改审批
`FileReadPermissionRequest`	文件读取审批
`FileWritePermissionRequest`	文件写入审批
`WebFetchPermissionRequest`	HTTP 请求审批
`MCPToolPermissionRequest`	MCP 工具执行审批
`AgentPermissionRequest`	Agent 操作审批
`NetworkPermissionRequest`	网络访问审批
`WorkerBadge`	显示请求权限的 worker/agent

消息组件（messages/，30+ 文件）

组件	说明
`UserPromptMessage`	用户输入显示（10k 字符截断：头 2.5k + 尾 2.5k）
`AssistantTextMessage`	助手文本回复
`AssistantToolUseMessage`	工具调用显示
`ThinkingMessage`	思考过程显示
`ToolResultMessage`	工具执行结果
`ErrorMessage`	错误显示
`SystemMessage`	系统通知
`CodeBlockMessage`	代码块（语法高亮）
`DiffMessage`	代码变更可视化
`ImageMessage`	图片内容

任务组件（tasks/，12 文件）

后台任务的 UI 展示：

BackgroundTasksDialog — 后台任务管理对话框
RemoteSessionProgress — 远程会话进度
ShellProgress — Shell 命令执行进度
TaskList / TaskItem / TaskStatus / TaskProgress

MCP 组件（mcp/，13 文件）

MCP 服务器管理界面：

MCPSettings — 配置界面
MCPReconnect — 重连处理
MCPToolListView — 可用工具列表
MCPServerStatus — 连接状态
MCPServerList — 服务器列表

Agent 组件（agents/，20+ 文件）

Agent 管理和创建向导：

AgentsMenu — Agent 选择和管理
CreateAgentWizard — 多步骤创建向导
- AgentNameStep → AgentDescriptionStep → AgentInstructionsStep → AgentToolsStep → AgentReviewStep
AgentList / AgentCard / AgentStatus

Diff 组件（diff/，3 文件）

代码差异显示：

DiffFileList — 变更文件列表
DiffDialog — 代码比较界面
DiffDetailView — 详细 diff（语法高亮）

其他组件目录

目录	说明
`hooks/`	组件级自定义 Hooks
`ui/`	通用 UI 工具组件
`shell/`	Shell 相关组件
`sandbox/`	沙箱管理组件
`memory/`	记忆管理组件
`skills/`	技能相关组件
`teams/`	团队协作组件
`wizard/`	向导流程组件
`grove/`	Grove 相关组件
`TrustDialog/`	项目信任对话框
`Settings/`	设置面板
`HelpV2/`	帮助界面 v2
`LogoV2/`	Logo 显示 v2
`HighlightedCode/`	代码高亮显示
`StructuredDiff/`	结构化 diff
`FeedbackSurvey/`	反馈调查
`Passes/`	通行证/推荐
`DesktopUpsell/`	桌面版推广
`ClaudeCodeHint/`	使用提示
`LspRecommendation/`	LSP 推荐
`ManagedSettingsSecurityDialog/`	托管设置安全对话框

关键设计模式

主题系统: resolveColor() 处理主题键和原始颜色（rgb/hex/ansi256）
React Compiler: 所有组件使用 _c 函数优化
截断策略: 大内容 >10k 字符截断，防止按键延迟
Feature Flags: KAIROS/KAIROS_BRIEF 控制布局模式