#Agent 工作台

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

npm install @a3s-lab/ui@0.3.0

<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";
import "@a3s-lab/ui/all";

#使用

导入完整 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>

#参数

#状态与变体

工作流没有次要配置时可以省略 Inspector。区域会依据工作台自身可用的行内宽度，从三列换行成“上下文 + Canvas”双列，再变成单列，而不是依赖浏览器视口宽度。

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

#可访问性

为工作台以及每个导航或实时区域提供名称。在主 Canvas 内部或外部保留一个页面级标题，使用与内容匹配的 Landmark，并保持合理 DOM 顺序：上下文、主要工作、Inspector、活动。响应式重排不得改变键盘顺序。导航后的焦点、流式播报、验证与破坏性操作确认由宿主应用负责。