#Agent 工作台

Agent Workbench 提供编写、配置、运行和检查 Agent 所需的响应式区域。它与 Provider 无关：A3S Code 可以是原生 Provider，但执行状态和 Provider API 仍属于宿主应用。

npm install @a3s-lab/ui

<section class="agent-workbench" aria-label="Agent 工作台">
  <aside data-agent-context>…</aside>
  <article data-agent-canvas>…</article>
  <aside data-agent-inspector>…</aside>
  <section data-agent-activity>…</section>
</section>

import "@a3s-lab/ui/a3s.css";

#用法

导入完整 A3S 样式包，再使用产品实际需要的组件组合各个区域。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

<section class="agent-workbench" aria-label="Agent 工作台">
  <aside data-agent-context>…</aside>
  <article data-agent-canvas>…</article>
  <aside data-agent-inspector>…</aside>
  <section data-agent-activity>…</section>
</section>

#HTML 结构

#状态与变体

工作流没有次要配置时可以省略检查器；宿主控制的检查器关闭时，也可以设置 data-inspector="hidden"。各区域会根据工作台自身的可用行内宽度，从三列折行为成对行，再折为单列，因此组件在文档预览、分栏、对话框和完整应用画布中都能保持可用。应用外壳需要抽屉时，可由宿主把上下文或检查器内容提升为符合可访问性要求的抽屉。

区域内部组合 Card、Tree、Code Editor、Field、Property List、状态徽章、Timeline 与 Log Viewer。加载、空、不可用、错误和只读状态应由这些子组件明确呈现。

#可访问性

为工作台以及其中每个导航、检查器和活动区域提供可区分的名称。页面级标题放在主画布内部或工作台之前，不能让四个区域各自争夺页面主标题。DOM 顺序固定为上下文、主要工作、检查器、活动；响应式折行或抽屉提升不得改变阅读与键盘顺序。只有真正持续更新的简短执行状态进入礼貌型实时区域，日志和时间线本身不设为实时区域。宿主负责抽屉焦点、验证、保存、权限、破坏性确认和执行结果，工作台不持有这些业务状态。