我们给 TRAE 加了个画中画小窗

_{画中画会在模型调用到浏览器或者电脑控制时自动唤起}

之所以想到要提供画中画，全因我们自己在实践中遇到的一些略感烦人的“小石子”：

• 做事节奏的打断：让 AI 测一下刚改好的页面，本想趁这会儿做些其他任务、理一理下一个需求。结果内置浏览器一展开，占了大半个窗口，手头的事也不好继续了。“算了，等它跑完再说吧。” 明明还有其他的事可以继续，却先停下来陪 AI 等完了整个流程。

  
  

• 操作空间的取舍：只是想看 AI 操作一下浏览器，却得给它腾出半个窗口，其他区域先被挤小了一半。它点击、输入、跳转，你可能只需要偶尔瞥一眼，却始终占着一大片空间。收起来是能宽敞一点，可想看进展时，还得重新展开。

  
  

• 状态获取不及时：以前，代码编辑器和内置浏览器共用侧边栏，靠切换 Tab 查看内容。你在看代码时，浏览器操作到哪一步、是不是卡住了，都得切过去才知道。有时以为两边都在推进，切过去才发现浏览器那边早停住了，多少会耽误些时间。

  
  

• 对照验证挺费劲：AI 改好了代码，你想一边看改动，一边确认页面效果。可切到浏览器，代码就看不见了；切回代码，又得记着刚才的页面长什么样。改动在一个 Tab，效果在另一个 Tab。本来想对照着确认，结果变成了反复切换。

我们希望 AI 能处理更复杂的任务，也能持续更长时间地工作。在这个过程中，你不必一直围着它转，依然可以继续做自己的事。

AI 应该配合你的工作节奏。界面的主次，应该由你当前的任务决定。

现在，给 Agent 配上画中画，让操作过程留在眼前，想看时瞥一眼，其他时间继续忙自己的，给手头的工作多留一些空间。

功能介绍

当 AI 判断任务需要用到浏览器或电脑控制时，它会自行调用，并唤起画中画小窗。你不用提前打开面板，也不用安排操作步骤，就能看到它开始工作。

除了浏览器控制外，电脑控制也是如此，Agent 可以打开电脑上的 App，用户也可以随时定位。

_{浏览器控制和电脑控制均能唤起画中画}

画中画小窗里显示的是操作的实时画面，AI 打开了哪个页面、正在进行哪一步操作，随时可以看一眼。

画中画是只读的。如在浏览器操作时你需要接管去点击、输入或处理某个步骤，可以一键切回侧边栏的内置浏览器；操作完，只想继续留意进展，也可以一键再切回画中画的小窗态。

_{可以随时在画中画和完整浏览器中切换}

AI 在浏览器里点击、填写表单时，你仍然可以在 TRAE 的主界面继续其他的操作。小窗的操作不会抢走你正在进行的其他操作焦点，小窗也不会把主编辑区挤窄。

你可以接着和 AI 对话、看代码、读改动，Agent 在小窗中的进展同时也在眼前。你在不想看的时候也可以将小窗最小化，它会在侧边工具栏安安静静的等待回复。原本需要来回切换 Tab 才能兼顾的两件事，现在可以一起进行。

画中画小窗挡住了正在看的内容，就把它拖到另一边。想把整个应用窗口留给对话或者其他面板，也可以直接拖出 TRAE 的应用窗口，放到屏幕的其他位置，甚至另一块显示器上。

画中画窗口的宽度和高度都支持拖拽调整。想看清楚些，就放大一点；只需要留意进展，就缩小一些。需要持续关注时，还可以置顶显示。

当前 AI 任务执行结束后，画中画会伴随退出动画自然收起，你不用再额外手动操作关闭。

因此我们设计了一个短暂的退出过程，先保留最后的画面，显示“预览已结束”，再用一个电视关闭效果收起窗口。这样，画面退出前既有个提醒，也不用一直留着等用户清理。

一些背后的技术优化

交互调整之后，我们还要确认一件事，画中画长时间开着，会不会给电脑增加明显的负担？

毕竟，小窗里的网页会持续滚动、跳转，画面也需要不断更新。如果只是为了看一眼进展，却让正在使用的编辑器变卡，就违背了这次改动的初衷。

因此，设计之初我们就持续关注：

• 显示的开销。 小窗可能一直开着，需要关注画面更新时的 CPU 占用。

  
  

• 对主界面的影响。 同时打开多个浏览器页面时，需要检查写代码、滚动文档和切换窗口是否仍然顺畅。

具体实现上，我们通过原生代码来处理窗口和画面呈现。经过性能压测，macOS 和 Windows 的画中画对电脑的影响几乎可以忽略（高帧率下 CPU 占用通常低于 5%，非常稳定）。

内置浏览器和画中画一键切换，背后需要保留的是同一个浏览器页面，大家会好奇这是怎么做的。这里面涉及到相对复杂的画面同步逻辑，包括页面的挂载，重建，帧转发，流控等等。

这里篇幅有限不展开细讲，但是我们主要处理了三件事。

• 维持后台画面。 隐藏侧栏后，页面仍需持续渲染。我们单独管理预览所需的后台渲染，将原页面的画面送到画中画窗口，同时避免隐藏页面接收用户输入。

  
  

• 记录对应任务和页面 Tab 的关联数据。 我们会记录页面所属任务、选中的 Tab 和展示状态，分组等信息。返回内置浏览器时，激活原来的任务页面；用户已经收起小窗，后续页面操作也符合这个逻辑。

  
  

• 按需同步画面。 画中画收起、不需要展示时，暂停对应预览的画面传输，任务继续执行；恢复展示后，通过消息通道及时同步最新画面。显示过程中配合限速和背压控制，只保留最新的画面，避免旧画面积压，减少不必要的传输与渲染开销。

写在最后

我们关心 AI 能完成多复杂的任务，也关心在它工作的过程中，我们需要花多少时间配合它。切换面板、调整窗口、停下手头的事等它跑完，这些使用工具时付出的时间也应被看到、被考虑到。

画中画想解决的，就是其中的一些小事。让你看进展时少切一次 Tab，让正在写的代码不被打断，让一段原本只能等待的时间，可以用来推进另一件事。开头那些不起眼的“小石子”，值得我们认真地一颗颗移开。

随着 AI 能独立承担的工作越来越多，我们也希望，大家能更从容地安排自己的工作。需要时看得见，想接手时接得上，其他时候，继续做手头的事。画中画，就是为这样的工作状态做的一点小改进。