modem-dev/sideshow

解决的问题

基于终端的编程代理通常通过“大段文本”进行交流，这使得可视化复杂的架构、UI 草图或代码差异变得困难。Sideshow 提供了一个实时可视化界面（基于浏览器的查看器），允许代理在基于文本的对话旁边发布可视化内容，从而减轻用户的认知负担，并通过发送数据而非完整的 HTML 文档来节省输出 token。

工作原理

Sideshow 作为 Node.js 服务器（或在 Cloudflare Workers 上）运行以托管查看器。编程代理——如 Claude Code、Codex 或 Pi——会获得一个设置块，允许它们通过 API 发布“界面”。这些界面由各种“部分”组成（例如 Mermaid 图表、Markdown、HTML 片段、JSON 树和语法高亮的差异），查看器随后使用预定义的主题在浏览器中实时渲染它们。

适用人群

使用基于终端的 AI 编程代理的开发者，他们希望以一种多模态的方式来审查代理建议的更改、架构图和执行轨迹，而无需离开他们的工作流。

核心亮点

• 多模态渲染：支持多种可视化部分，包括 Mermaid 流程图、语法高亮差异、带有 ANSI 颜色的终端输出以及可折叠的 JSON 树。
• Token 效率：通过发送结构化数据（如 Mermaid 源码）而不是完整的 HTML/CSS 来减少 LLM 输出 token，从而实现更快的绘制速度和更低的成本。
• 代理无关：适用于任何具有 shell 访问权限的代理框架，包括 Claude Code、Codex 和 Opencode。
• 灵活部署：可以通过 Node.js 在本地运行，或部署到 Cloudflare Workers 进行远程访问。
• 交互式元素：HTML 界面可以包含按钮，这些按钮调用 sendPrompt() 将反馈直接发布回代理的线程。