一块屏看穿AI构建全过程：Codex on Crack可视化面板的4个核心视图详解

Codex on Crack 是一个在 Codex 中协调多个 AI 模型的编排工具，而它的可视化面板（build panel）让你在一块屏上看穿 AI 构建的全过程：阶段推进、模型交接、用量统计与视觉审查，全部集中在一个本地面板里。下面用新手视角详解 Overview、Review、Usage & routes、Launch 四个核心视图。

官方 15 秒演示动画（重建的 Codex 界面 + 合成项目数据）

为什么需要 AI 构建可视化面板？

多模型协作时，常见的问题是"黑箱感"：Opus 负责规划、Flash 负责实现、Codex 宿主负责调度——到底谁在干活、花了多少 token、卡在哪个环节？面板正是为解决这个问题而生的：

• 以工作区为单位隔离展示，只看你关注的项目；
• 面板只展示已注册的运行与证据，不会自动读取电脑上的每个会话；
• 反馈在自然检查点被 Agent 读取，提交反馈不会中断正在进行的对话，也不等于批准。

面板是独立插件，默认关闭、按需安装，源码在 plugins/codex-on-crack-panel/，文档见 plugins/codex-on-crack-panel/README.md。

快速上手：两种打开方式

打开方式	适用场景
内置 MCP App（推荐）	已安装 codex-on-crack-panel 插件的 Codex 宿主，直接在对话里说 "Open the build panel."
本地 localhost 回退	任何浏览器，运行 node server/panel.mjs serve --demo 即可体验演示数据

本地方式打印出 http://127.0.0.1:4327/#token=… 形式的完整 URL，token 走 URL 片段，仅绑定 127.0.0.1 回环地址。完整安装步骤见 INSTALL-IN-CODEX.md。

视图一：Overview 总览 —— 阶段、运行与模型交接

Overview 是面板的主视图，信息结构是"阶段 → 主导运行 → 已记录的工作者与宿主请求"：

• 阶段轨道：按 Plan → Build → Review 的阶段步骤展示，可点击跳转到具体运行，状态一目了然；
• 选中运行详情：状态、耗时（Elapsed）、API 实际活跃时间（API-active time）、输入/输出/缓存 token 计数器；
• 模型交接（Model handoffs）：记录宿主请求次数——注意实际执行由 Codex 完成，面板只展示不执行；
• 活动列表：工具调用与生命周期事件，支持过滤。

面板对缺失计数器一律显示"未知"，绝不瞎估算——这是理解 AI 用量的好习惯。

这张演示图中可以跟随 01 Plan → 02 Follow the handoffs → 03 Review 三步工作流，正是面板引导新手理解 AI 构建过程的方式。

视图二：Review 审查收件箱 —— 把视觉问题变成可追溯的决策

Review 是项目的"视觉审查收件箱"，也是四个视图里对新手最友好的一个：

• 问题收件箱：Agent 提出的视觉问题（如"Logo 轮廓选哪个方向"）集中展示，区分"等待回答"和"已保存反馈"；
• 证据对比：当前素材以合适尺寸展示，参考图折叠收起；
• 反馈绑定版本：你看到的每张截图都有哈希指纹，决策必须回显证据哈希，文件一变就会标记 stale_evidence——保证"你批准的正是你看到的"；
• 反馈 ≠ 批准：Send feedback 只保存与证据版本绑定的回复，显式批准（Approval）是独立动作。

Agent 会在自然检查点通过 crack_panel_status 读取你的回复，是协作式投递，不是即时推送。相关实现见 panel/src/ui/panel.mjs。

视图三：Usage & routes 用量与路由 —— token 账单看门人

很多 AI 工具把用量算得"很满"，这个视图则坚持诚实：

• 每次运行的 token/缓存计数器：来自会话累计值，恢复会话时替换而非累加；
• Elapsed vs API-active：墙上时钟时长与 CLI 报告的 API 活跃时间分开呈现；
• 列表价等值：明确标注"不是账单"，也绝不从 token 反推套餐配额；
• 路由状态：每条模型路由区分"已配置"和"已验证"状态。

它的核心原则：未知就显示未知。移工作到其他服务商可能保住 Codex 配额却在别处产生费用，面板把判断材料摆给你，而不是替你下结论。

视图四：Launch 启动 —— 有门禁的启动配置

Launch 视图默认关闭，只有显式启用才出现，展示已注册的启动配置（profile）及其门禁条件：

• 每个 profile 指定工作区、请求文件、提示词，启动时走 skills/crack/scripts/lead.mjs 的控制通道；
• 确认对话框：确认的字节被哈希固定，事后修改注册文件不生效；
• 审批门禁：requiresApproval 让启动/恢复都等待指定审查对当前证据的批准，没有旁路开关；
• 租约锁：同一 profile 最多一个活跃运行，防止并发启动冲突。

这个视图体现面板的安全哲学：浏览器和 MCP App 只能"点名"已注册的 profile 或运行 id，不能执行任意命令。

新手建议：从 Demo 开始体验

如果你刚接触 Codex on Crack，推荐路径是：

1. 运行 node server/panel.mjs serve --demo，用永久标注的演示数据熟悉四个视图；
2. 按 INSTALL-IN-CODEX.md 安装主插件与面板插件；
3. 开新对话，让 crack-plan 技能与你确认计划，并"把本工作区和运行连接到面板"；
4. 按 docs/WORKFLOW.md 的"薄工作流"推进：定范围 → 一个 worker 负责实现 → Lead 审查 → 你对照验收标准把关。

相关资料

• 面板文档：plugins/codex-on-crack-panel/README.md
• 面板构建源码（含测试）：panel/src/、panel/test/
• 记录与离线回放：docs/RECORDING.md
• 模型选择指南：docs/MODEL-SELECTION.md
• 演示动画源文件：docs/media/panel-demo.gif