几天前 Claude Code 意外泄露了完整源码。我分析了它的架构，参考设计思路，5 天从零做出了 30+ 个终端 UI 组件 + headless agent 框架。

项目地址：github.com/Minnzen/claude-code-kit

---

一、起因：终端 UI 没有好选择

我一直想做高质量的 CLI 工具，但终端 UI 的体验普遍很差——大多数命令行工具还停留在 console.log 往下刷的阶段。

现有的选择：

方案	问题
Ink	实质上已停更，组件太少（~10 个）
blessed / terminal-kit	年久失修，API 过时
手写 ANSI escape	能用，维护成本极高

然后 Claude Code 出现了。用过的人都知道，它的终端体验是目前最好的：

• 流式输出一个字一个字蹦出来
• 代码 diff 高亮展示
• 权限弹窗让你确认是否执行命令
• Markdown 直接在终端里渲染

这不是 readline 能做出来的。但它是闭源产品——我只能用，不能复用。

然后泄露事件发生了。

---

二、泄露代码里看到了什么

3 月 31 号，安全研究员 Chaofan Shou（@shoucccc）发现 Claude Code v2.1.88 的 npm 包里带了完整的 source map——打包时的一个失误导致 .map 文件没有被排除。

消息出来当天我就拿到了还原后的代码。512k 行，1900 个文件。

分析下来，架构分三层：

渲染层 — 没有用 Ink，自己实现了一套 React reconciler 做终端渲染。布局引擎是 Yoga（Meta 的 Flexbox 实现），而且是纯 TypeScript 移植版，不依赖 C++ native binding。渲染做了差量更新，只重绘变化的部分，不闪屏。

Agent 层 — 不是简单的"调 API 打印结果"。代码里有：

• KAIROS — feature flag 控制的 proactive 上下文管理系统
• 多 agent 编排 — 子 agent 派生和任务协调
• 自修复记忆 — 上下文压缩和持久化
• 工具并行执行 — 只读工具自动并发

代码规模 — 512k 行，远比一个"终端聊天工具"该有的体量大得多。

---

三、为什么重写，不直接提取

源码都有了，直接用不行吗？不行。

1）组件和 Claude Code 内部系统深度耦合

每个组件都依赖 CC 特有的上下文——动画组件依赖内部 ClockContext，权限组件依赖它的 permission 管理，消息列表和 session 层绑死。单独拎一个组件出来，依赖链会拖出整个 Claude Code。

2）React Compiler 编译产物和业务逻辑混在一起

很多组件经过 React Compiler 编译：

const $ = _c(81);
if ($[0] !== props.value) {
  t0 = renderSomething(props.value);
  $[0] = props.value;
  $[1] = t0;
} else {
  t0 = $[1];
}

_c(81) 是编译器生成的 81 槽缓存数组，$[0] 是记忆化槽位。这些优化产物和组件逻辑交织在一起，没法简单剥离。

结论：架构设计参考，组件从零重写，渲染引擎提取适配。

判断做完就开始干活——用 Claude Code（Opus 4.6）自己来写 Claude Code 的替代品。Vibe coding 确实高效，从分析到 v0.2.0 发布，三天。

---

四、怎么做的

分包设计

拆成 5 个独立 npm 包，核心原则是解耦：

claude-code-kit/
├── packages/
│   ├── shared/              — Yoga 布局引擎（纯 TS）、ANSI 工具
│   ├── ink-renderer/        — React reconciler + TTY 渲染
│   ├── ui/                  — 30+ UI 组件
│   ├── agent/               — headless agent 框架
│   └── tools/               — 17 个内置工具
├── examples/
│   ├── hello-world/         — 组件交互 demo
│   ├── agent-cli/           — AI 编程助手
│   └── alt-screen-dashboard/— 系统监控面板
└── tests/                   — 498 个测试

Agent 和 UI 完全独立：

• Agent 可以 headless 运行 → agent.chat("分析这个文件") 直接拿结果
• UI 可以不接 Agent → 只用组件做交互式终端界面

渲染引擎

React reconciler 和 Yoga 布局引擎逻辑相对独立，不依赖业务组件。提取出来做了适配，成为 ink-renderer 包。这是整个项目里唯一直接源自 Claude Code 源码的部分。

组件库

30+ 个组件，每个都不依赖任何 Provider 就能独立工作：

组件	功能
REPL	完整对话界面（流式输出 + slash 命令 + 状态栏）
PromptInput	多行输入 + 历史记录 + 命令补全 + Vim 模式
Select / MultiSelect	键盘导航选择（支持 j/k）
Spinner	Claude Code 同款 Unicode 动画
StreamingText	逐字流式输出
Markdown	终端 Markdown 渲染（带缓存，支持流式）
DiffView	代码差异展示
PermissionRequest	权限确认弹窗（Allow / Always Allow / Deny）
ThemeProvider	4 套主题、33 个 color token
ProgressBar / StatusLine / Dialog / Tabs	设计系统组件

Provider 设计

Agent 不绑定任何一家，改个 baseURL 就能接本地模型：

const agent = new Agent({
  provider: new OpenAIProvider({
    apiKey: 'your-key',
    baseURL: 'http://localhost:11434/v1'  // Ollama
  }),
  model: 'llama3.1',
  tools: [bashTool, readTool]
})

支持 Anthropic、OpenAI、Ollama、DeepSeek、Groq、SiliconFlow 等任意 OpenAI 兼容服务。

安全设计

从 v0.1.0 就有，不是出了问题才补的：

机制	说明
默认只读权限	Read / Glob / Grep 自动放行，Bash / Write / Edit 需确认
路径遍历防护	阻止 ../../../etc/passwd 类攻击
SSRF 防护	web-fetch 阻断内网 IP 请求
isDestructive 标记	Bash、ExitWorktree 等标记为破坏性操作

---

五、对齐 Claude Code

泄露让架构思路成为公开知识。参考概念，不参考代码。

v0.3.0 做了一次大规模对齐，重点在工具系统：

改动	说明
7 → 17 个工具	新增 WebSearch、Agent、NotebookEdit、LSP、Worktree、Task x4
命名对齐	工具名 PascalCase、参数名 snake_case，兼容 CC prompt 格式
Description 10-50 行	每个工具写了完整的 LLM 行为指南
MCP 客户端	从任意 MCP server 动态发现工具（stdio + HTTP）
并行执行	readOnly 工具自动并发，不排队

17 个工具一览

工具	类型	说明
Bash	write	Shell 执行，支持后台运行、超时、sandbox
Read	read	文件读取，支持 PDF pages、图片 base64
Edit	write	字符串替换，支持 replace_all 全局替换
Write	write	创建/覆盖文件
Glob	read	文件匹配，按修改时间排序
Grep	read	正则搜索，支持上下文行、分页、多行匹配
WebFetch	read	HTTP 抓取，HTML→Markdown、HTTPS 升级、缓存
WebSearch	read	DuckDuckGo 搜索，域名白/黑名单
Agent	write	子 agent 派生，超时和 abort 传播
NotebookEdit	write	Jupyter cell 编辑
TaskCreate	write	创建任务，支持 owner 和依赖追踪
TaskUpdate	write	更新任务状态、blocks/blockedBy
TaskGet	read	查询单个任务
TaskList	read	列出/过滤任务
EnterWorktree	write	创建 git worktree
ExitWorktree	write	清理 git worktree
LSP	read	语言服务器查询（工厂模式）

所有工具都用 Opus 4.6 的真实 API 做过端到端验证。

---

六、和其他项目的对比

	claude-code-kit	Ink	Aider	Goose
终端 UI 组件	30+（React）	~10（停更）	—	—
Flexbox 布局	纯 TS Yoga	Native binding	—	—
Agent 框架	有（provider 无关）	—	有（Python）	有（Python）
内置工具	17 个	—	~10	~10
MCP 客户端	有	—	—	有
并行工具执行	有	—	—	—
UI + Agent 一体	有	—	—	—
语言	TypeScript	TypeScript	Python	Python

---

七、成果

十行代码跑一个完整的终端 AI 助手：

import { Agent, AnthropicProvider } from '@claude-code-kit/agent'
import { bashTool, readTool, editTool } from '@claude-code-kit/tools'
import { render } from '@claude-code-kit/ink-renderer'
import { AgentREPL } from '@claude-code-kit/ui'

const agent = new Agent({
  provider: new AnthropicProvider({ apiKey: process.env.ANTHROPIC_API_KEY }),
  tools: [bashTool, readTool, editTool],
  model: 'claude-opus-4-6',
})
await render(<AgentREPL agent={agent} />)

举两个例子

代码附带在仓库 examples 中

• Hello world !
  
• 系统监控面板
  

---

最后

项目地址：github.com/Minnzen/claude-code-kit

pnpm add @claude-code-kit/ui @claude-code-kit/agent @claude-code-kit/tools react

接下来会做多 agent 编排，让多个 agent 能协作完成复杂任务。

欢迎交流。