上一篇文章聊了技能程序。今天咱们换个画风，看看 mini-cc 的“脸面”——终端 UI。其实，

说句掏心窝子的话。最开始我根本没打算在终端 UI 上花什么心思。传统 CLI 嘛，不就是 print 几行字、读个输入，完事了。说起来，

后来用着用着发现不对劲：对话一长。满屏滚动的文本看得眼晕，按理说，想找个历史消息得全靠翻；工具调用进度完全靠猜，…这体验，怎么看都不像一个“AI Agent”该有的样子。不过，

看 Claude Code 的终端 UI。我决定也用 React 写一个终端 UI。

Ink——一个让你用 React 组件写命令行界面的框架。当时看到这个项目第一反应是：“啊？还能这样，”试了一下就真香了。

今天这篇文章，我就想聊聊 mini-cc 的终端 UI 是怎么用 Ink + React 搭起来的。

为什么用 React 写 CLI

先说说传统 CLI 工具有多“反人类”。

• 手动处理光标移动和 ANSI 转义序列——年前的打印纸条技术
• 手写布局逻辑——窗口尺寸变了就崩
• 状态管理靠自己——没有响应式。一切都是面条式代码

这感觉就像你在用汇编语言写一个电商网站——能跑，但谁写谁崩溃。

User pain point：当终端窗口缩小时原来自适应布局的内容会被截断或重排错乱；怎么说呢，手工插入 ANSI 转义码容易导致光标失位。让使用者难以定位输入位置。

而 Ink 明显改变了这个局面。它将 React 的组件化架构引入终端。开发者可以用熟悉的 JSX 语法、Hooks 模式，在命令行里建立交互式应用。

更绝的是Ink 底层用了 Facebook 开源的 Yoga 布局引擎。在终端里实现了 Flexbox 布局——你没看错，终端里写 Flex！

Mini-cc 的 UI 架构

Mini-cc 的终端 UI 分成几个主要组件，各司其职。整个 UI 基于 Ink 框架，用 React 的方式来组织。说起来，

┌─────────────────────────────────────────────────────────────┐
│ App.tsx │
├─────────────────────────────────────────────────────────────┤
│ ┌──────────────────────────────────────────────────────┐ │
│ │ WelcomeBanner │ │
│ │ 使用 Static 组件固定在顶部 │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ VirtualMessageList │ │
│ │ 只渲染最新的 条消息 │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ CommandSuggestions │ │
│ │ 输入 / 时自动显示可用命令 │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ TextInput │ |
│ └─────…╰─|
└─────────…

. App — 老大哥

// src/components/App.tsx
import React。{ useState,useRef,useEffect } from 'react';import { useInput,Static } from 'ink';import { Box } from '../ink/components/Box';import { Text } from '../ink/components/Text';其实，import TextInput from 'ink-text-input';import { VirtualMessageList } from './VirtualMessageList';import { WelcomeBanner } from './WelcomeBanner';怎么说呢，import { CommandSuggestions。CommandSuggestion } from './CommandSuggestions';import { CommandCompletionManager } from '../commands/CommandCompletionManager';interface AppProps {
从agent来看，any;onExit: => void;不过，onClear: => void;onSwitchProvider: => void;initialInput?: string，}
export function App({
agent,onExit,onClear,onSwitchProvider。initialInput = ''
}: AppProps) {
const = useState>;const = useState;const = useState;const = useState;怎么说呢，// 命令补全状态
const = useState;const = useState;说起来，const =
useState;// 文本记录中断控制
const abortRef = useRef;其实，...
//
return (


{ => }





...

);}

• useInput: Ink 提供的 Hook 专门处理键盘输入，比直接监听 process.stdin 更方便。我们利用它来实现命令补全上下箭头导航和 Tab 补全。怎么说呢，
• Static: 用于渲染一次性内容。如欢迎横幅，让它自然滚出屏幕而不随消息列表更新而重复渲染。
• 流式输出: AI 回答是流式更新的，每收到一个 token 就追加到消息内容里实现打字机效果。User pain point：传统 CLI 必须一次性输出整段文本。无法实现实时打字效果，只能等完成后才显示完整答案。 怎么说呢，
• AbortController: 使用者按 Esc 可以中断正在进行的 AI 请求。避免卡住进程，老实说，User pain point：在旧方案中无法取消正在进行的数据流请求。只能等待超时或强制退出程序。
• User pain point：当聊天窗口很长时需要翻阅历史。但传统 CLI 没有虚拟滚动机制，只能让页面无限滚动导致性能下降；Mini‑cc 使用虚拟列表。仅渲染最近几条消息，大大提高性能并减少内存使用。

. WelcomeBanner — 给个面子

// src/components/WelcomeBanner.tsx
import React from 'react';import * as os from 'os';其实，import { Box } from '../ink/components/Box';import { Text } from '../ink/components/Text';import * as configManager from '../utils/configManager';export function WelcomeBanner {
const userName =
os.userInfo.username || process.env.USER || 'developer';const modelName =
process.env.MODEL_NAME ||
configManager.getConfigValue ||
'qwen3.-plus';const cwd = process.cwd;const homedir = os.homedir;说起来，const displayCwd =
cwd.startsWith
`~${cwd.slice}`
: cwd;// Provider display logic omitted for brevity
return (

{/* 左侧区域 */}

...
User pain point：传统 CLI 常常只打印单行信息。例如当前方法、使用者名等，这会导致信息过多且无结构化显示。Mini‑cc 用双栏布局和 ASCII art logo。把关键信息集中展示，同时保持美观。

. VirtualMessageList — 会滚的消息列表
// src/components/VirtualMessageList.tsx
function useVirtualScroll{
const count=key.length;// limit is number of messages to render at once
const limit=20;const start=Math.max;return{
再看range，topSpacer:"".padEnd。bottomSpacer:"".padEnd*10," ")
};老实说，}
function VirtualItem{
...
}
export function VirtualMessageList {
const scrollRef=useRef;const keys=messages.map;const{range}=useVirtualScroll;const=range，return (

{messages.slice.map(msg=>}
)
}

User pain point：长对话会导致整个页面重新渲染每次输入，使得界面卡顿甚至崩溃。使用虚拟滚动只渲染最新几条，让性能稳定。怎么说呢，

. CommandSuggestions — 命令补全 

// src/components/CommandSuggestions.tsx
export interface CommandSuggestion{
command:string;description:string;category:'skill'|'system'|'custom';fullCommand，:string;}
interface Props{
suggestions:CommandSuggestion;selectedIndex:number|undefined;visible:boolean;}
export function CommandSuggestions({
suggestions。selectedIndex,visible}:Props){
ifreturn null;return (

/* …*/
)，}

User pain point：记忆所有可用命令难度大。其实，Mini‑cc 在输入 “/” 时弹出可选命令列表。并支持上下键选择与 Tab 补全，让使用者专注于业务而非记忆。

进度条组件 

// src/components/ProgressBar.tsx
export function ProgressBar {
const =useState;useEffect=>{
ifreturn;const timer=setTimeout=>setCurrent,200);// ，},);// ，return (

/* …*/
)，}

User pain point：扫描或下载任务时没有直观反馈会让使用者感到无聊或担心是否正常进行。
Mini‑cc 用字符进度条即时展示完成比例。


交互模式 

. 命令程序 — / 开头，你懂的 

// src/commands/CommandInterceptor.ts
export async function interceptCommand:Promise<InterceptResult>{
if.startsWith) return{intercepted:false};switch.split.toLowerCase){
case '/help':
return{intercepted:true,output:`❌ 未知命令 ...`};/* ，*/
}
}

User pain point：在传统 CLI 中。如果错误地触发 LLM，会浪费时间生成不需要的信息。Mini‑cc 把以 “/” 开头的指令直接拦截到本地处理。无需经过 LLM，提高效率。

. 键盘快捷键 — 手不离键盘 

// 在 App.tsx 中处理全局快捷键
useInput=>{
// Esc 中断当前请求
if{
abortRef.current?.abort，setIsLoading;// ，}
// Ctrl+C 退出程序
if{
onExit;}
})，


User pain point：传统 CLI 没有快速中断机制。只能强制关闭程序或等待超时而 Mini‑cc 提供 Esc 中断，使使用者可以即时停止耗时操作。





A. No more manual ANSI dance. — User Pain Point: Scrolling long logs becomes a headache.

B. A responsive layout that adapts to terminal size. — User Pain Point: Resizing window breaks layout or truncates content.

C. User-friendly interaction—command completion + shortcuts + streaming output + interrupt. — User Pain Point: No quick way to cancel a running AI query or find commands.
Key takeaways：


React + Ink: • •

Flexbox in terminal: •

Declarative UI eliminates ANSI bugs: •
text
If you’re still writing vanilla JS for your terminal app,you’re basically reinventing wheel.

P.S. 
"