REPL 界面：screens/REPL.tsx 核心组件剖析

REPL（Read-Eval-Print Loop）组件是 Claude Code CLI 的核心用户界面，承载了整个交互式对话流程。这个 5006 行的巨型组件将状态管理、消息渲染、用户输入、工具调用、权限验证、IDE 集成等多个子系统统一协调，构建了一个高度响应式的终端交互环境。作为 Ink 框架（React 终端渲染）的顶层应用，REPL 组件通过精细的状态订阅和按需更新策略，在保持丰富功能的同时实现了出色的性能表现。

架构定位与职责边界

REPL 组件在整个应用架构中扮演着界面编排器的角色——它不直接处理业务逻辑，而是将 QueryEngine 的查询能力、Tool 系统的工具执行、AppState 的状态管理、MCP 服务的协议集成等能力，通过组件化的方式组装成完整的用户体验。组件的 Props 接口清晰定义了其边界：接收初始配置（commands、tools、messages、mcpClients）和生命周期钩子（onBeforeQuery、onTurnComplete），但不暴露内部状态修改方法，所有状态变更通过 AppState 全局状态管理完成。

graph TB
    subgraph "REPL 组件架构层次"
        A[KeybindingSetup<br/>键盘绑定上下文] --> B[MCPConnectionManager<br/>MCP 连接生命周期]
        B --> C[FullscreenLayout<br/>响应式布局容器]
        C --> D[Messages<br/>虚拟消息列表]
        C --> E[PromptInput<br/>多模式输入组件]
        C --> F[Dialogs<br/>对话框系统]
        
        D --> G[VirtualMessageList<br/>虚拟滚动]
        D --> H[MessageRenderers<br/>消息类型渲染]
        
        E --> I[TextInput<br/>文本输入]
        E --> J[ModeIndicator<br/>模式指示]
        E --> K[Suggestions<br/>智能建议]
        
        F --> L[PermissionRequest<br/>权限请求]
        F --> M[SettingsDialog<br/>配置对话框]
        F --> N[FeedbackSurvey<br/>反馈调查]
    end
    
    subgraph "状态订阅"
        O[AppState Store] -.->|useAppState| D
        O -.->|useAppState| E
        O -.->|useSetAppState| P[状态更新函数]
    end
    
    subgraph "数据流"
        Q[QueryEngine] -->|query()| R[API 响应]
        R -->|handleMessageFromStream| S[消息追加]
        S --> D
    end

组件 Props 接口设计

Props 类型定义体现了 REPL 组件的可配置性与可扩展性设计哲学。核心配置项包括：

关键设计决策：pendingHookMessages 属性允许 REPL 组件在挂载时立即渲染，同时异步加载 Hook 消息，在首次 API 调用前注入这些消息。这种延迟注入模式避免了阻塞渲染，同时确保 Hook 消息在查询开始前就绪。initialContentReplacements 和 initialFileHistorySnapshots 用于会话恢复时重建工具结果替换状态和文件历史快照，保证恢复的会话与原始会话行为一致。

Sources: REPL.tsx

状态管理与订阅策略

REPL 组件采用了细粒度状态订阅策略以优化性能。通过 useAppState(selector) 钩子，组件仅订阅真正需要的状态片段，避免不必要的重渲染。例如，消息列表通过 messagesRef.current 引用而非订阅（配合手动 setMessages 更新），工具权限上下文通过 useAppState(s => s.toolPermissionContext) 独立订阅，MCP 客户端列表通过 useMergedClients 合并初始和动态客户端。

// 典型的细粒度订阅模式
const toolPermissionContext = useAppState(s => s.toolPermissionContext);
const verbose = useAppState(s => s.verbose);
const mcp = useAppState(s => s.mcp);
const plugins = useAppState(s => s.plugins);
const fileHistory = useAppState(s => s.fileHistory);

这种模式与传统的 Context.Consumer 或 Redux connect 相比，显著减少了重渲染范围——当 MCP 连接状态变化时，仅依赖 mcp 的组件更新，而依赖 verbose 的组件保持不变。React Compiler 的自动记忆化进一步优化了这一机制，通过静态分析识别组件的依赖图，生成最优的更新路径。

状态更新函数通过 useSetAppState() 获取，返回一个稳定引用的 setAppState 函数，接收一个 updater 函数作为参数。这种设计允许批量更新和函数式更新，避免在闭包中捕获过期的状态值。例如，在处理权限请求时：

setAppState(prev => ({
  ...prev,
  toolPermissionContext: applyPermissionUpdate(prev.toolPermissionContext, update)
}));

Sources: REPL.tsx

消息渲染与虚拟滚动

消息列表通过 Messages 组件渲染，该组件内部使用 VirtualMessageList 实现虚拟滚动——仅渲染可见区域的消息，大幅降低长对话场景的渲染开销。REPL 组件通过 displayedMessages 变量控制显示的消息源，支持三种模式：

1. 同步模式（usesSyncMessages = true）：直接使用 messages 状态，适用于流式文本显示或非加载状态
2. 延迟模式（usesSyncMessages = false）：使用 deferredMessages（通过 useDeferredValue 创建），保持输入响应性
3. 代理查看模式：使用 viewedAgentTask.messages，显示子代理的对话历史

虚拟滚动的核心挑战在于动态高度测量——不同消息类型（文本、代码块、工具调用、图片）的高度差异巨大，且内容可能异步加载（如代码高亮、图片解码）。VirtualMessageList 通过 useVirtualScroll 钩子实现增量测量和位置缓存，在滚动时动态计算可见项的偏移量，避免全量重计算。

flowchart TD
    A[用户输入提交] --> B{是否加载中?}
    B -->|是| C[显示 PlaceholderText]
    B -->|否| D[显示实际消息]
    
    C --> E[displayedMessages.length <= baseline?]
    E -->|是| F[显示 userInputOnProcessing]
    E -->|否| D
    
    D --> G{usesSyncMessages?}
    G -->|是| H[使用 messages 状态]
    G -->|否| I[使用 deferredMessages]
    
    H --> J[VirtualMessageList 渲染]
    I --> J
    
    J --> K[计算可见范围]
    K --> L[渲染可见消息]
    L --> M[更新滚动位置]
    
    M --> N{流式文本显示?}
    N -->|是| O[同步模式 - 立即更新]
    N -->|否| P[延迟模式 - 保持响应]

占位符文本机制解决了用户输入到消息显示之间的时间差问题。当用户提交输入后，userInputOnProcessing 保存输入文本，userInputBaselineRef.current 记录提交时的消息数量。在真实用户消息添加到 displayedMessages 之前（通过 processUserInput），占位符显示输入内容，避免界面空白。一旦 displayedMessages.length 超过基线值，占位符自动隐藏。

Sources: REPL.tsx

输入交互与 PromptInput 组件

PromptInput 组件是用户输入的核心入口，支持多种输入模式（普通文本、Bash 命令 /、代理模式 @、记忆模式 #）。REPL 组件通过 onSubmit 回调将输入提交逻辑委托给 handlePromptSubmit 工具函数，该函数负责解析输入模式、处理附件、构建消息对象、触发查询流程。

输入状态同步通过 inputValue 和 setInputValue 状态实现，REPL 组件维护输入值的单一真相来源。当用户切换模式或恢复历史输入时，REPL 通过 setInputValue 更新输入框内容。Vim 模式支持通过 vimMode 和 setVimMode 状态管理，允许用户在 Vim 风格的模态编辑和普通插入模式间切换。

智能建议系统通过 PromptInputFooterSuggestions 组件实现，基于当前输入上下文（文件路径、命令历史、工具建议）动态生成建议列表。REPL 组件通过 getToolUseContext 函数为建议系统提供必要的上下文信息（当前消息列表、工具权限、MCP 客户端等）。

附件粘贴支持通过 pastedContents 状态管理图片、文件等二进制内容。用户粘贴图片时，usePasteHandler 钩子捕获粘贴事件，将图片数据存储到 pastedContents，PromptInput 显示附件预览。提交时，handlePromptSubmit 将附件转换为 ContentBlockParam（ImageBlockParam），附加到用户消息中。

Sources: REPL.tsx

对话框系统与焦点管理

REPL 组件维护一个对话框焦点队列系统，通过 focusedInputDialog 状态控制当前显示的对话框。对话框类型包括权限请求、配置设置、反馈调查、错误提示、IDE 集成提示等。焦点管理确保同一时间只有一个对话框处于激活状态，避免界面混乱。

// 对话框焦点状态定义
type FocusedInputDialog = 
  | 'tool-permission' 
  | 'sandbox-permission' 
  | 'cost' 
  | 'ide-onboarding' 
  | 'message-selector'
  | 'prompt'
  | 'elicitation'
  // ... 更多对话框类型

权限请求对话框（focusedInputDialog === 'tool-permission'）是交互最频繁的对话框类型。当工具调用需要用户确认时（如文件写入、Bash 命令执行、网络访问），权限系统将请求推入 toolUseConfirmQueue，REPL 组件渲染 PermissionRequest 对话框。用户响应后，对话框从队列移除，下一个权限请求（如果存在）自动显示。

模态对话框与全屏布局的交互通过 FullscreenLayout 组件协调。在非全屏模式下，对话框作为覆盖层（overlay）渲染在消息列表上方；在全屏模式下，对话框通过 modal prop 传递给 FullscreenLayout，后者创建一个绝对定位的底部锚定面板，显示对话框内容。这种设计确保对话框在两种模式下都能正确显示，同时保持滚动行为的一致性。

对话框优先级通过多个布尔状态变量控制，如 showCostDialog、showIdeOnboarding、showModelSwitchCallout 等。REPL 组件在渲染时按优先级顺序检查这些状态，确定 focusedInputDialog 的值。例如，成本阈值对话框（showCostDialog）的优先级高于 IDE 入门对话框（showIdeOnboarding），确保关键提示不会被次要提示阻塞。

Sources: REPL.tsx

全屏模式与终端布局适配

REPL 组件通过 isFullscreenEnvEnabled() 检测全屏模式，动态调整布局策略。全屏模式使用 FullscreenLayout 组件，提供固定高度的输入区域和可滚动的消息区域，优化长对话的浏览体验。非全屏模式使用原生终端滚动缓冲区，消息直接输出到终端，允许用户使用终端的原生滚动和搜索功能。

AlternateScreen 组件在全屏模式下启用终端的备用屏幕缓冲区，将 Claude Code 的输出与终端的历史命令隔离。用户退出时，备用缓冲区内容消失，恢复到原始终端状态。这种模式类似于 Vim、less 等全屏终端应用的行为，避免 Claude Code 的输出污染终端历史。

graph TB
    A[终端模式检测] --> B{isFullscreenEnvEnabled?}
    
    B -->|全屏模式| C[AlternateScreen 包装]
    C --> D[FullscreenLayout]
    D --> E[固定高度布局]
    E --> F[ScrollBox 虚拟滚动]
    F --> G[输入区域固定底部]
    
    B -->|非全屏模式| H[直接渲染]
    H --> I[原生终端滚动]
    I --> J[消息追加到缓冲区]
    J --> K[用户可用终端搜索]
    
    G --> L[布局特性]
    L --> M[ctrl+o 切换 transcript]
    L --> N[模态对话框底部锚定]
    L --> O[Companion Sprite 浮动]
    
    K --> P[布局特性]
    P --> Q[命令历史可用]
    P --> R[原生滚动性能]
    P --> S[终端搜索支持]

Companion Sprite（助手精灵）是全屏模式的独占特性，在终端宽度足够时显示一个可爱的动画角色，提供视觉反馈和情感化交互。宽度不足时，精灵折叠为一行提示，避免占用过多空间。companionNarrow 变量通过比较终端宽度与 MIN_COLS_FOR_FULL_SPRITE 常量，动态决定精灵的显示模式。

鼠标跟踪支持通过 isMouseTrackingEnabled() 检测，在全屏模式下启用鼠标滚轮滚动。用户可以使用鼠标滚轮浏览消息历史，无需依赖键盘导航。tmux 鼠标模式提示通过 maybeGetTmuxMouseHint() 函数动态生成，指导用户在 tmux 环境中正确启用鼠标支持。

Sources: REPL.tsx

通知系统与状态提示

REPL 组件集成了丰富的通知系统，通过 useNotifications 钩子管理临时提示和状态消息。通知按优先级分类，支持超时自动消失。典型通知包括：

• 配置错误通知（useSettingsErrors）：检测无效的 settings.json 配置，显示错误详情
• MCP 连接状态通知（useMcpConnectivityStatus）：MCP 服务器断连或重连时提示用户
• 自动模式不可用通知（useAutoModeUnavailableNotification）：自动模式被禁用时解释原因
• 模型迁移通知（useModelMigrationNotifications）：模型版本升级或弃用提示
• 费率限制警告（useRateLimitWarningNotification）：接近 API 调用限制时提前警告

通知系统通过 addNotification 和 removeNotification 函数操作，支持编程式控制通知的生命周期。例如，会话压缩完成后显示带快捷键提示的通知：

const historyShortcut = getShortcutDisplay('app:toggleTranscript', 'Global', 'ctrl+o');
addNotification({
  key: 'summarize-ctrl-o-hint',
  text: `Conversation summarized (${historyShortcut} for history)`,
  priority: 'medium',
  timeoutMs: 8000
});

Spinner 状态指示器在查询执行期间显示，通过 showSpinner 状态控制。Spinner 组件显示当前操作动词（如 “Thinking”、“Reading files”、“Executing bash”），并显示已用时间和 token 统计。streamMode 变量根据查询状态动态切换 Spinner 模式（thinking、tool-use、streaming-text），提供精确的进度反馈。

Sources: REPL.tsx

MCP 集成与动态配置

MCP（Model Context Protocol）服务器的连接管理通过 MCPConnectionManager 组件实现，该组件作为 REPL 的直接子组件，负责 MCP 服务器的生命周期管理、连接状态维护、工具和资源注册。dynamicMcpConfig 属性允许运行时动态添加或移除 MCP 服务器配置，无需重启应用。

MCP 客户端合并通过 useMergedClients 钩子实现，将初始客户端（从 Props 传入）和动态客户端（从 AppState 获取）合并为一个统一的客户端列表。合并逻辑处理客户端去重、连接状态同步、工具列表更新等复杂场景。

const mcpClients = useMergedClients(initialMcpClients, mcp.clients);

Elicitation 对话框处理 MCP 服务器的主动交互请求。当 MCP 服务器需要用户提供额外信息时（如配置参数、确认操作），发送 elicitation 请求，REPL 组件将请求推入 elicitation 队列，显示 ElicitationDialog。用户响应后，响应通过 MCP 协议返回给服务器。

Prompt 对话框处理 MCP 服务器的提示请求，允许服务器向用户显示信息并等待确认。与 Elicitation 不同，Prompt 主要用于信息展示，不要求用户输入复杂内容。REPL 组件通过 promptQueue 状态管理多个待处理的 Prompt 请求。

Sources: REPL.tsx

代理系统与任务管理

REPL 组件支持主线程代理模式，通过 mainThreadAgentDefinition 属性配置代理定义。代理模式下，系统提示、工具集、权限上下文都根据代理定义动态调整，实现特定领域的专业化交互。setMainThreadAgentDefinition 函数允许运行时切换代理（如通过 /agent 命令）。

子代理查看通过 viewingAgentTaskId 状态实现。当用户查看子代理的任务详情时，REPL 组件切换消息显示源，从主对话历史切换到子代理的消息列表。needsBootstrap 逻辑处理本地代理的延迟加载——代理在后台运行时，消息实时追加到内存；用户查看时，从磁盘加载历史消息并合并。

const viewedLocalAgent = viewingAgentTaskId ? tasks[viewingAgentTaskId] : undefined;
const needsBootstrap = isLocalAgentTask(viewedLocalAgent) && 
                       viewedLocalAgent.retain && 
                       !viewedLocalAgent.diskLoaded;

任务列表展开通过 showExpandedTodos 状态控制，当用户切换到任务视图时，TaskListV2 组件显示所有后台任务的进度和状态。REPL 组件通过 useTasksV2WithCollapseEffect 钩子管理任务的折叠状态，优化任务列表的显示密度。

Teammate 协作视图通过 TeammateViewHeader 组件实现，显示当前协作会话的成员列表、连接状态、任务分配。viewingTeammateTask 状态标识当前查看的协作任务，hasRunningTeammates 变量判断是否有活跃的协作会话。

Sources: REPL.tsx

键盘绑定与快捷键系统

REPL 组件通过 KeybindingSetup 组件初始化键盘绑定上下文，为所有子组件提供快捷键查询和显示功能。GlobalKeybindingHandlers 组件注册全局快捷键（如 ctrl+c 取消、ctrl+d 退出、ctrl+o 切换 transcript），CommandKeybindingHandlers 组件注册命令相关快捷键（如提交输入、历史导航）。

快捷键显示通过 useShortcutDisplay 钩子实现，该钩子根据当前键盘绑定配置，返回快捷键的显示文本。例如，useShortcutDisplay("app:toggleTranscript", "Global", "ctrl+o") 返回 “ctrl+o” 或用户自定义的快捷键。这种设计允许快捷键在配置变更时自动更新显示，无需硬编码。

Vim 模式支持通过 VoiceKeybindingHandler 和相关的 Vim 钩子实现，为 Vim 用户提供模态编辑体验。Vim 模式下的快捷键（如 j/k 滚动、g/G 跳转、/ 搜索）与全局快捷键共存，通过上下文切换避免冲突。

消息操作快捷键（Message Actions）通过 MessageActionsKeybindings 组件注册，在消息选中时激活。用户可以使用快捷键复制消息、编辑消息、恢复消息到输入框等。messageActionHandlers 对象定义了所有可用的消息操作及其处理函数。

Sources: REPL.tsx

会话恢复与状态重建

REPL 组件支持完整的会话恢复功能，通过 initialMessages、initialFileHistorySnapshots、initialContentReplacements 等 Props 重建会话状态。恢复流程包括：

1. 消息反序列化：从 JSONL 日志加载消息列表，通过 deserializeMessages 函数重建消息对象
2. 文件历史重建：恢复文件编辑历史快照，支持 /rewind 回退操作
3. 工具结果替换：重建内容替换状态，确保工具结果的引用一致性
4. 代理上下文恢复：恢复代理名称、颜色等会话级配置

增量恢复优化通过 pendingHookMessages 属性实现，允许 REPL 组件在挂载后异步加载 Hook 消息，避免阻塞界面渲染。Hook 消息在首次查询前注入，确保 Hook 的副作用（如环境变量设置、配置更新）在对话开始前生效。

会话标题恢复通过 haikuTitleAttemptedRef 和 haikuTitle 状态管理，避免恢复的会话重复生成标题。如果原始会话已生成标题，恢复时直接使用；否则在首次查询后异步生成。

Sources: REPL.tsx

远程会话与直连模式

REPL 组件支持三种远程执行模式，通过 Props 配置切换：

远程会话模式下，isRemoteSession 标志为 true，REPL 组件禁用本地文件访问和命令执行，所有工具调用转发到远程服务器。REMOTE_SAFE_COMMANDS 列表定义了允许在远程模式下执行的本地命令（如 /help、/version）。

直连模式通过 useDirectConnect 钩子管理连接状态，处理认证、会话建立、消息同步。直连模式支持断线重连，在网络恢复后自动重新建立连接并同步状态。

SSH 模式通过 useSSHSession 钩子管理 SSH 连接，将 BashTool、FileEditTool 等工具的执行转发到远程服务器，消息渲染和用户交互保留在本地。这种模式结合了本地的响应性和远程的执行能力。

Sources: REPL.tsx

沙箱权限与网络安全

REPL 组件集成了细粒度的沙箱权限系统，通过 SandboxPermissionRequest 对话框处理网络访问请求。当工具尝试访问未授权的网络资源时（如 WebFetchTool 访问新域名），权限请求推入 sandboxPermissionRequestQueue，REPL 组件显示权限对话框。

权限持久化通过 persistPermissionUpdate 函数实现，用户选择”始终允许”时，权限规则写入 settings.json，后续请求自动批准。权限更新立即应用到内存中的沙箱配置（通过 SandboxManager.refreshConfig()），避免竞态条件。

Worker 沙箱权限处理多代理协作场景下的权限请求。当 Worker 代理尝试访问网络资源时，权限请求通过 Mailbox 发送给 Leader，Leader 显示 WorkerPendingPermission 指示器，等待 Leader 用户批准。批准后，响应通过 sendSandboxPermissionResponseViaMailbox 返回给 Worker。

// Worker 沙箱权限请求处理
void sendSandboxPermissionResponseViaMailbox(
  currentRequest.workerName,
  currentRequest.requestId,
  approvedHost,
  allow,
  teamContext?.teamName
);

沙箱违规视图通过 SandboxViolationExpandedView 组件显示详细的违规信息，包括尝试访问的资源、被拒绝的原因、沙箱配置详情。用户可以通过该视图快速理解权限限制并调整配置。

Sources: REPL.tsx

性能优化策略

REPL 组件实施了多层次的性能优化策略，确保在长对话和频繁更新场景下保持流畅的用户体验：

1. 虚拟滚动：VirtualMessageList 仅渲染可见消息，通过 useVirtualScroll 钩子计算可见范围，避免渲染数千条不可见消息。滚动位置通过 scrollRef 管理，支持程序化滚动到特定消息（如最新消息、搜索结果）。

2. 延迟值：通过 useDeferredValue 创建 deferredMessages，在输入期间保持输入响应性。流式文本显示时切换到同步模式（usesSyncMessages = true），确保最终消息立即显示，避免视觉抖动。

3. 记忆化选择器：所有传递给子组件的回调函数通过 useCallback 包装，避免不必要的重渲染。复杂计算通过 useMemo 缓存，如工具列表合并、命令过滤、权限上下文构建。

4. 批量更新：状态更新通过 setAppState 的函数式更新模式，支持批量更新多个状态片段，减少重渲染次数。React 18 的自动批处理进一步优化了事件处理器和异步操作中的更新。

5. 按需加载：条件导入通过 feature() 编译时常量控制，未启用的功能在编译时完全移除，减少包体积和运行时开销。例如，Voice 模式、Coordinator 模式、Web Browser 工具等通过条件导入实现。

Sources: REPL.tsx

错误处理与边界保护

REPL 组件通过多层错误处理机制确保稳定性：

1. 错误边界：顶层 SentryErrorBoundary 捕获渲染错误，记录到 Sentry 并显示友好的错误界面。错误边界防止整个应用崩溃，允许用户复制错误信息并报告。

2. 查询守卫：QueryGuard 类管理查询生命周期，防止并发查询和重复提交。查询取消时，守卫清理资源并更新状态，确保后续查询可以正常启动。

3. 优雅降级：组件加载失败时显示回退界面，如 HighlightedCode 的 Fallback 组件在代码高亮失败时显示纯文本。MCP 服务器连接失败时显示错误提示，但不阻塞主流程。

4. 状态一致性检查：关键操作前验证状态完整性，如消息选择器检查消息是否在活动上下文中（messageIndex === -1 时显示警告）。文件历史回退前验证快照存在性，避免空指针异常。

Sources: REPL.tsx

调试与诊断工具

REPL 组件集成了丰富的调试工具，帮助开发者诊断问题：

1. DevBar：在 ant 构建中显示开发工具栏，提供快速访问性能指标、状态检查、日志查看等功能。DevBar 通过环境变量控制显示，外部构建中完全移除。

2. 日志系统：logForDebugging 函数记录关键生命周期事件（如 REPL 挂载/卸载、查询开始/结束），通过 CLAUDE_CODE_DEBUG 环境变量启用。日志输出到 stderr，避免污染标准输出。

3. 性能分析：useFpsMetrics 钩子跟踪帧率，诊断渲染性能问题。queryProfiler 记录查询的各个阶段耗时，生成性能报告。

4. 诊断追踪：diagnosticTracker 服务收集运行时诊断信息（如内存使用、API 调用统计、错误频率），通过 /doctor 命令显示汇总报告。

Sources: REPL.tsx

总结与最佳实践

REPL 组件作为 Claude Code CLI 的核心界面，通过精细的架构设计和多层次优化，实现了功能丰富性与性能表现的平衡。关键设计原则包括：

• 状态最小化订阅：通过选择器模式仅订阅必要的状态片段，避免过度渲染
• 延迟加载与按需渲染：虚拟滚动、条件导入、延迟值等技术减少初始负载和运行时开销
• 组件化与关注点分离：将复杂功能（消息渲染、输入处理、对话框管理）委托给专门的子组件
• 渐进式增强：基础功能在所有环境下可用，高级特性（全屏模式、Companion Sprite）根据环境动态启用

开发者在扩展 REPL 组件时应遵循以下最佳实践：

1. 新增对话框时：定义唯一的 focusedInputDialog 类型，确保焦点管理逻辑正确处理
2. 添加新的状态订阅时：使用细粒度选择器，避免订阅整个 AppState
3. 集成新的子系统时：通过自定义 Hook 封装逻辑，保持 REPL 组件的可读性
4. 优化性能时：优先使用 React Compiler 的自动记忆化，手动优化仅用于关键路径

REPL 组件的设计展示了如何在终端环境中构建复杂的交互式应用，其架构模式和优化策略对类似的 CLI 工具开发具有参考价值。