📦 FanBox
"AI 帮你一个下午起十个项目,然后它们就再也找不到了。FanBox 帮你把它们找回来。"
"AI spins up ten projects in an afternoon. FanBox helps you find them again."
FanBox:Coding Agent 的驾驶舱。指挥 Claude Code、Codex 在本地干活,看清它碰过的每个文件、改过的每一行,随时接手。
FanBox — the cockpit for coding agents: command Claude Code or Codex, see every file and line they change, and take over anytime.
一边浏览、预览、编辑本地文件;一边在内嵌真实终端里跑 Claude Code 或任何 coding agent。
agent 每写一个文件,对应卡片就会亮起来——找回文件 → 运行 agent → 看清改了什么,全部在一个窗口完成。
Browse, preview and edit local files on one side; run Claude Code or any coding agent in a real embedded terminal on the other.
Every time the agent writes a file, its card lights up — find files → run agents → see what changed, all in one window.
⬇ 下载 dmg / Download dmg · Screenshots / 截图 · Features / 功能 · Install / 安装 · Credits / 致谢
▲ 真机截图:浏览 fanbox 仓库本身,README 原地预览,内嵌终端正在跑 git。本页所有截图均由 Playwright 从实时 App 中直接拍摄,未修图。
Real capture: browsing the fanbox repo itself, README previewed in place, git running in the embedded terminal. All screenshots in this README are taken from the live app via Playwright, unedited.
Why FanBox · 为什么要做 FanBox
AI 帮你一个下午起十个项目,但它们散在各处、名字认不出、改了啥看不见。每天的真实流程是:Finder 里翻半天 → 切到 iTerm 启 agent → 再切浏览器看效果,三个窗口来回跳。
AI helps you start ten projects in an afternoon — then they scatter everywhere, the names stop making sense, and you can't see what got changed. The daily reality: dig through Finder → switch to iTerm to launch an agent → switch to the browser to check results. Three windows, endless hopping.
FanBox 把这条链路收进一个窗口:左边文件 × 右边/下边终端 × 原地预览,一个有机整体。它不跟 Finder 拼文件操作,不跟 VS Code 拼编辑,专注「找回 + 预览 + 轻改 + 指挥 agent」这一条链路做到顺手。
FanBox folds that loop into one window: files on the left × terminal on the right/bottom × preview in place. It doesn't compete with Finder on file ops or VS Code on editing. It does one chain well: find → preview → light edits → command the agent.
不做云、不做远程、不做账号。本地、零配置、运行时零依赖。
No cloud, no remote, no accounts. Local-first, zero config, zero runtime dependencies.
Three skins · 三套皮肤
界面在 huashu-design 辅助下完成设计,三套皮肤不是换个主题色——配色、字体、图标、代码高亮、终端 ANSI 主题整体随之变化。
The UI was designed with huashu-design. The three skins are not theme-color swaps — palette, typography, icons, code highlighting and terminal ANSI themes all change together:
| | |
|---|---|
|
| 终端 · Volt · 荧光绿 × 炭黑 × 等宽字,工业仪器面板感(默认)
Volt · neon green × charcoal × monospace, industrial instrument panel (default) |
|
| 档案 · Archive · 奶油纸 × 赤陶橙 × 衬线,温暖纸感档案馆
Archive · cream paper × terracotta × serif, a warm paper archive |
|
| 索引 · Index · 黑白 × 信号红/绿 × 巨号字,编辑式索引日报
Index · black & white × signal red/green × oversized type, editorial index daily |
What it does · 能做什么
Files · find & preview / 文件 · 找回与预览
- ⌘K 全局模糊搜索 / Global fuzzy search — 记得名字片段就行;
⌘↵用编辑器整包打开项目;内容:关键词切全文搜索。
⌘↵ opens the project in your editor; content:keyword switches to full-text search.
- 强色实体图标 / Bold solid icons — 每种文件「长得像它自己」:PDF 红、JS 黄、Markdown 蓝;照片视频按真实比例呈现。
- 原地预览 / Preview in place — Markdown 渲染、HTML 实时成品、代码语法高亮、图片/视频/PDF 内嵌(HEIC 直接显示)、压缩包内容清单、透明图棋盘格垫底。
- 缩略图加速 / Thumbnail speed — 大文件夹滚动和点击都在 0.1 秒内。
- 项目徽章 / Project badges — 文件夹卡片标 node / web / py / rs / go 徽章,一下午起的十个项目一眼认出类型。
Watch what the agent changed · 看 agent 改了什么
- 活的仪表盘 / A live dashboard — agent 每写一个文件,那张卡片当场荡开涟漪、按改动频率发光呼吸,agent 写到哪光走到哪。
- 跟随模式 / Follow mode — 一键让文件视图 + 预览跟踪 agent 正在编辑的文件:代码随新写行高亮闪烁,HTML 边写边实时渲染(双缓冲、零白闪),Markdown 实时渲染。任何手动浏览立即把控制权交还给你。
- 本回合 / This round — 一个面板看清这一回合 agent 改了哪些文件、是哪个终端里的哪个 agent 改的(按归属分组)、每个文件 +/- 多少行;点一行看 diff(Monaco 并排),每行可单独还原,顶部整回合回滚,底部保留可拖动的回放时间轴。Markdown 默认按「读者视图」左右对比渲染后的样子,图片给前后滑杆对比——验收的是产出物,不只是代码。
- diff 上写批注、直接回喂 / Comment on the diff, feed it back — 在 diff 里选几行、写一句批注,一键以「文件:行 + 围栏 + 批注」的格式粘进那个 agent 的终端(bracketed paste,不回车,最后一下由你按)。
file:lines + fenced code + your note. Pasted, not submitted.
Agent cockpit · Agent 驾驶舱
- 项目记忆 / Project memory — 点开任何项目文件夹,看 AI 在这里干过什么:历史会话(你的第一句话当标题)、每次会话改过的文件、触发过的 skill;「▶ 续上」一键在内嵌终端
claude --resume/codex resume接上当时的上下文。
claude --resume / codex resume in the embedded terminal.
- 截图直通车 / Screenshot express — 系统截屏落盘即浮出直通卡:喂给终端里的 agent、收进项目
素材/、或先标注再发。
素材/ (assets) folder, or annotate before sending.
- AI 整理 / AI organize — AI 只看元数据出整理提案(不读内容、不碰文件系统),每条建议带理由、逐条勾选过人,FanBox 执行并写回滚日志、一键整体撤销。引擎可选(Claude Code / Codex),策略提示词随便改(侧栏「更多…」/ sidebar More…)。
- 发版向导 / Release wizard — node 项目一键串起版本号、CHANGELOG、打包、推送、GitHub Release,整条命令序列在内嵌终端可见地跑(侧栏「更多…」/ sidebar More…)。
- Skills 透视 / Skills X-ray — 本机全部 agent skills 一个视图:触发统计、健康检查、context 预算、不删文件的启停开关。
- Agent 用量 / Agent usage — Claude Code 官方 5h 窗口/周配额(和
/usage同源)+ 本地 token 统计;Codex 限额快照 + 窗口重置识别。
/usage) plus local token statistics; Codex window snapshots with reset detection.
- 磁盘占用透视 / Disk usage lens —
du口径的真实占用条形榜,可下钻,专治「电脑空间又满了」(侧栏「更多…」/ sidebar More…)。
du-accurate bars per folder, drill-down, for the "my disk is full again" moments.
Terminal · command the agent / 终端 · 指挥 agent
- 真实内嵌终端 / A real embedded terminal — node-pty + xterm.js(WebGL 渲染),跑 Claude Code / vim / htop 不花屏,中文宽字符正确。
- 拖文件进终端 / Drag files in — 从文件列表拖文件/文件夹进终端,自动插入路径喂给 agent 当上下文。
- 路径可点击 / Clickable paths — 终端里出现的文件路径直接点击在 FanBox 打开;带空格的 macOS 截屏名、中文文件名、折行的长路径都能识别(空格边界由文件系统 stat 验证,不靠猜)。
- 选中即甩给终端 / Send selection — 预览里选一段文字,一键以「文件出处 + 围栏」格式发进终端(bracketed paste 包裹,不会被逐行误执行)。
- 精确的态势感知 / Exact situational awareness — FanBox 启动 Claude Code / Codex 时会挂上它们的官方 hooks(只叠加一份自己的 settings,不碰你的配置),agent 在干活、等你确认、等你输入、已完成都是精确事件,不再靠猜终端文字。没挂上 hooks 的 agent 退回原来的判定。
- 指挥台 / Command roster — 两个以上终端、且有会话在等你时,标签栏下出现一行一个「在等你的」会话(等你确认 / 等你输入 / 刚完成没看):状态(形状 + 颜色)、项目、agent、最后一句回复、本回合改动数;没人等你整条消失,干活中的已跑时长在标签圆点的悬停提示里。
⌘⌥L跳到下一个需要你的会话,Dock 角标显示「需要你」的数量,系统通知点击直达那个标签。退出确认只拦真正在干活的 agent。
⌘⌥L jumps to the next session that needs you, the Dock badge counts them, notifications click through to the tab. Quit only asks when an agent is actually mid-task.
- 11 个 agent 一键启动 / 11 built-in agent launchers — Claude Code、Codex、Hermes Agent、OpenClaw、Kimi Code、ZCode、opencode、pi、CodeBuddy、WorkBuddy、Qoder CLI,官方图标 + 核实过的启动命令。滑杆按钮打开设置面板勾选启用哪些(默认 Claude Code + Codex),未装的一键复制安装命令;
~/.fanbox/config.json的agents数组可自定义命令或追加新 agent。
agents array in ~/.fanbox/config.json overrides commands or adds new agents.
Editing · WYSIWYG / 编辑 · 所见即所得
- Markdown — Milkdown Crepe 提供 Notion 式所见即所得,打开就是编辑态,停笔 0.8 秒自动保存。顶部
富文本 / 阅读 / 源码 / 排版四档随时切;少数文件富文本往返会丢内容(校验不过),只灰掉富文本、默认落在只读阅读模式,文章照看,要改点源码。
Rich / Read / Source / Typeset switch sits on top; when a file can't survive a WYSIWYG round-trip, only Rich is disabled — it falls back to the rendered read-only view, not raw source.
- 排版档 · 一键进公众号 / Typeset — one click into WeChat — 20 套排版主题(来自 editor.huasheng.ai),选好样式点「复制到公众号」,粘进公众号后台即成稿:样式全内联、图片自动转 base64(本地图和图床外链都行)、连续多图排成表格网格、带底色主题自动补背景层。排版档里看到的就是粘出去的,不存在预览与成稿不一致。工具栏顺带给出「x 字 · 约 y 分钟」。
- 送去… / Send to… — 其余去向收在一个菜单里:「复制到 X」按 X Articles 的标签白名单清洗;飞书文档、X Articles·渡口、B站专栏·渡口则把一条明文指令递给终端里的 agent 去跑(需装
lark-doc/dukouskill)。FanBox 自己不存任何平台凭证、不内建任何第三方 SDK,指令只粘不回车——你看得见、能改、能拒,最后那一下永远由人来点。
- 代码/JSON / Code/JSON — Monaco 编辑器(VS Code 同款内核),随皮肤切换主题。
- 图片标注 / Image annotation — 画笔/箭头/文字/打码、格式转换、压缩、调分辨率,覆盖原图前有确认。
- 未保存守卫 / Unsaved guard — 三种编辑器统一拦截未保存退出,Esc 旁路也堵死。
Install · 安装
桌面版(推荐)/ Desktop (recommended)
从 Releases 下载最新 .dmg,拖进「应用程序」即可。Apple Silicon (arm64) 原生。
Download the latest .dmg from Releases and drag it into Applications. Native Apple Silicon (arm64).
已用 Developer ID 证书签名 + hardened runtime,并通过 Apple 公证(notarization),双击直接打开,不用右键。
Signed with a Developer ID certificate + hardened runtime and notarized by Apple — just double-click to open, no right-click workaround needed.
> 应用内置更新提醒:检测到 GitHub 上有新 Release 时,右下角会弹一条提示引导下载,不强更、可对单个版本「不再提醒」。
Built-in update notifications: when a new release lands on GitHub, a capsule appears at the bottom right. Never forced; individual versions can be muted.
Windows(社区移植,非官方)/ Windows (community ports, unofficial)
我自己没有 Windows 电脑,没法稳定验证 Windows 版的体验,也不了解 Windows 用户的操作习惯,所以官方不出 Windows 版。但社区里有同学基于 FanBox 拓展了 Windows 版本,想在 Windows 上体验的朋友可以试试,谢谢他们的工作 🙏。
⚠️ 这些都不是我的改造,我没有参与开发、也没法对它们的体验和安全负责。请自行评估后使用。
I don't own a Windows machine and can't reliably verify a Windows build or judge what Windows users need, so there is no official Windows version. The community has built Windows ports of FanBox — if you're on Windows, give one a try, and thanks to the maintainers 🙏.
⚠️ These are not my builds. I'm not involved in their development and can't vouch for their experience or security. Use at your own discretion.
| 移植 / Port | 链接 / Link | |---|---| | daodao166888/fanbox-windows | Releases | | cookiesheep/fanbox(v2.3.0 Windows) | Release |
网页版(不打包,直接跑)/ Web (no packaging)
node server.js
浏览器打开 http://localhost:4567。零依赖、零 build,clone 下来就能跑。网页版只有文件浏览/搜索/预览(内嵌终端和编辑器靠 Electron 提供)。
Open http://localhost:4567. Zero dependencies, zero build — clone and run. The web version covers browsing/search/preview (the embedded terminal and editors need Electron).
开发模式 / Development
npm install
npm run app # electron . 启动完整桌面版 / full desktop app
npm run dist # 打包签名 .dmg(产物在 dist/,不入 git)/ build & sign the .dmg (output in dist/)
打包遇到 Electron 下载被墙:ELECTRON_MIRROR="https://registry.npmmirror.com/-/binary/electron/" npm run dist
Shortcuts · 快捷键
| 操作 / Action | 键 / Key | 操作 / Action | 键 / Key |
|---|---|---|---|
| 全局搜索 / Global search | ⌘K | 用编辑器打开 / Open in editor | ⌘↵ |
| 折叠侧栏 / Toggle sidebar | ⌘B | 后退 / Back | ⌘ |
| 跳到下一个需要你的会话 / Next session that needs you | ⌘⌥L | | |
| 当前目录筛选 / Filter current folder | / | 打开/预览 / Open/preview | ↵ |
| 结果上下选择 / Navigate results | ↑ ↓ | 关闭 / Close | Esc |
Privacy & security · 隐私与安全
- 后端只在本机回环地址监听 + 校验 Host 头(挡 DNS rebinding),数据不出本机。
- 全部前端资源(含渲染器、字体)本地内置,离线完全可用。用量面板会读取Claude和Codex的官方额度接口,更新检查会访问GitHub;本地token日志在本机统计。
- Markdown 渲染先过 DOMPurify,页面带 CSP(脚本只认本地文件、不放行内联与 eval);所有写类接口要带每次启动随机生成、不落盘的 token,本机其他进程直接 curl 也进不来。
- HTML 预览在隔离 origin 的沙箱 iframe 里渲染,预览不可信网页也碰不到终端能力。
- 配置写入走串行化读-改-写 + 原子写(temp + fsync + rename),不丢数据、不留半截 JSON。
- 删除走系统废纸篓(可恢复);缩略图缓存按最旧优先自动裁剪,上限 400MB。
Design & acceptance · 设计与验收
界面设计在 [huashu-design 辅助下完成——三套皮肤的方向探索、组件质感、反 AI slop 审查都出自它的工作流。图标是档案暖色陶土箱体 + 米纸 squircle,从 SVG 一路生成到 icns。
The UI was designed with huashu-design — skin direction exploration, component polish and anti-AI-slop review all come from its workflow. The icon is a terracotta archive box on a rice-paper squircle, generated from SVG all the way to icns.
每个开发阶段由 5 个独立 subagent 扮演不同角色(重度 vibe coder / 原生审美设计师 / 零文档新用户 / 终端十年老兵 / 破坏性质量官),审「成品 + 真机截图 + 代码」打分,全部 ≥90 分且无红线才算达标。评分标准见 docs/05-验收角色与评分标准.md。
Each development phase is reviewed by 5 independent subagents playing different roles (heavy vibe coder / native-taste designer / zero-docs newcomer / ten-year terminal veteran / destructive QA), scoring the product + live screenshots + code. Everything ships at ≥90 with zero red lines. See docs/05-验收角色与评分标准.md.
Standing on the shoulders of giants · 建在巨人肩膀上
FanBox 的核心能力来自这些出色的开源项目:
FanBox's core capabilities come from these excellent open-source projects:
| 项目 / Project | 用在哪 / Used for | License |
|---|---|---|
| Electron | 桌面壳,让零依赖 Node 后端长出真实终端和原生能力
The desktop shell that gives a zero-dependency Node backend a real terminal and native powers | MIT |
| node-pty | 伪终端,内嵌终端的「真 shell」来源
The pseudo-terminal behind the embedded "real shell" | MIT |
| xterm.js | 终端渲染(含 addon-webgl GPU 加速、addon-fit 自适应、addon-unicode11 CJK 宽字符)
Terminal rendering (addon-webgl GPU acceleration, addon-fit, addon-unicode11 for CJK) | MIT |
| Monaco Editor | 代码/JSON 编辑与 Git diff 视图,VS Code 同款内核
Code/JSON editing and Git diff view, the VS Code core | MIT |
| Milkdown(Crepe) | Markdown 所见即所得编辑
Markdown WYSIWYG editing | MIT |
| marked | Markdown 预览渲染
Markdown preview rendering | MIT |
| highlight.js | 代码语法高亮
Syntax highlighting | BSD-3-Clause |
| esbuild | 把 Milkdown 打成单文件本地 vendor,运行时保持 no-build
Bundling Milkdown into a single local vendor file, keeping runtime no-build | MIT |
| electron-builder | 打包签名 dmg
Packaging and signing the dmg | MIT |
| Playwright | 驱动 Electron 实拍本 README 截图 + UI 验证
Driving Electron for README screenshots + UI verification | Apache-2.0 |
所有前端依赖都 vendor 到本地(public/vendor/),这是「离线完全可用」的底气,也意味着上面每个项目的代码真实地跑在你机器上。谢谢它们。
Every frontend dependency is vendored locally (public/vendor/) — that's what makes "fully usable offline" true, and it means each project above actually runs on your machine. Thank you.
Architecture · 技术架构
| 层 / Layer | 用什么 / Stack |
|---|---|
| 后端 / Backend | 零依赖 Node.js server.js(文件 API + 静态服务 + 缩略图)
Zero-dependency Node.js server.js (file APIs + static serving + thumbnails) |
| 桌面壳 / Desktop shell | Electron 33 + node-pty(asarUnpack 原生模块)
Electron 33 + node-pty (asarUnpack native module) |
| 终端 / Terminal | xterm.js + WebGL + unicode11 |
| 编辑器 / Editors | Monaco(代码)+ Milkdown Crepe(Markdown)
Monaco (code) + Milkdown Crepe (Markdown) |
| 打包 / Packaging | electron-builder → 签名 arm64 .dmg
electron-builder → signed arm64 .dmg |
项目结构 / Project layout
fanbox/
├── server.js # 零依赖 Node 后端(文件 API + 缩略图 + 静态服务)
│ # Zero-dependency Node backend (file APIs + thumbnails + static)
├── electron/
│ ├── main.js # 主进程(窗口/pty/剪贴板/fs.watch/菜单)
│ │ # Main process (window/pty/clipboard/fs.watch/menu)
│ └── preload.js # 暴露 fanboxPty / fanboxFs / fanboxClipboard
│ # Exposes fanboxPty / fanboxFs / fanboxClipboard
├── public/
│ ├── index.html
│ ├── style.css
│ ├── app.js # 前端单页应用 / Frontend single-page app
│ └── vendor/ # xterm / monaco / milkdown 本地资源
│ # xterm / monaco / milkdown local assets
├── src-vendor/ # esbuild 入口,产出 public/vendor/milkdown
│ # esbuild entries producing public/vendor/milkdown
├── build/ # 图标 + entitlements / Icons + entitlements
├── docs/ # 概念/PRD/路线图/验收标准
│ # Concepts/PRD/roadmap/acceptance criteria
└── experiments/ # 实验脚本(含 README 截图脚本)
# Experiment scripts (incl. README screenshot script)
Author · 关于作者
花叔 Huashu——AI Native Coder,独立开发者。代表作:小猫补光灯(App Store 付费榜 Top1)。
Huashu (花叔) — AI Native Coder, indie developer. Known for Cat Light (App Store paid chart Top 1).
| 平台 / Platform | 链接 / Link | |------|------| | 🌐 官网 / Web | bookai.top · huasheng.ai | | 𝕏 Twitter | @AlchainHust | | 📺 B站 / Bilibili | 花叔 | | 📕 小红书 / Xiaohongshu | 花叔 | | 💬 公众号 / WeChat | 微信搜「花叔」 / Search "花叔" |
更多 AI 造物:
More AI creations:
- 女娲.skill(蒸馏任何人的思维方式 / distill anyone's way of thinking)
- huashu-design(一句话拿回一份能交付的设计 / a deliverable design from one sentence)
Finder 帮你管理文件。IDE 帮你写代码。FanBox 帮你看清 AI 在你机器上干了什么。
Finder manages your files. IDEs write your code. FanBox shows you what AI did on your machine.
MIT License © 花叔 Huashu