explanatory-playground

用途：构建仅开发环境使用的可视化调试界面，把系统内部不可见的行为显示出来，便于理解系统如何运作。适合在用户提出“帮我理解这是怎么工作的”“给我看发生了什么”等需求时使用。\n\n主要能力：先通过 AskUserQuestion 澄清要可视化的系统类型（状态机、数据流、事件系统、算法）以及具体难以理解之处（当前状态、转换原因、数据形态、时序），再识别需要暴露的隐藏信息：随时间变化的值、触发变化的事件、部件间的通信关系、条件与阈值等规则。随后按系统类型选择可视化方式与库，例如状态机用节点-边图（react-flow）、数据流用有向图或 Sankey（react-flow）、事件用时间轴（自定义或 recharts）、算法用分步动画（自定义）等，详见 references/patterns.md。\n\n交互层级：分为观察（实时状态展示）、检查（点击悬停查看详情）、操作（触发事件、修改状态、注入数据）、时间旅行（记录历史、回放）。建议从 1-2 级起步，必要时再加 3-4 级。\n\n使用方式：以最小侵入方式埋点，优先使用事件发射器，对第三方代码可用 Proxy 监听。创建仅开发环境路由 app/__dev/[system-name]/page.tsx，并用 process.env.NODE_ENV !== 'development' 时返回 notFound() 防止进入生产环境。每个新建文件需加注释头，说明用途与移除步骤。\n\n限制与清理：收到移除请求时，删除 __dev/ 路由、移除埋点（发射器、代理）、卸载不再使用的依赖、搜索 EXPLANATORY-PLAYGROUND 标记并报告移除内容。资料未提供具体依赖版本、兼容范围、性能影响及价格信息。