#Agent Workbench

Agent Workbench provides the responsive regions needed to author, configure, run, and inspect an Agent. It is provider-neutral: A3S Code may be the native provider, but execution state and provider APIs remain in the host application.

npm install @a3s-lab/ui@0.4.0

<section class="agent-workbench" aria-label="Agent workbench">
  <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";

#Usage

Import the complete A3S bundle, then compose the regions from the components your product needs.

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

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

#Parameters

#States and variants

Omit the inspector when the workflow has no secondary configuration, or set data-inspector="hidden" while a host-controlled inspector is closed. Regions wrap from three columns to paired rows and then one column according to the workbench's own available inline width, so the component remains usable inside documentation previews, split panes, dialogs, and full application canvases. A host application may promote context or inspector content into an accessible drawer when its own shell requires one.

Use Card, Tree, Code Editor, Field, Property List, Status Badge, Timeline, and Log Viewer inside the regions. Keep loading, empty, unavailable, error, and read-only states explicit in those child components.

#Accessibility

Name the workbench and every navigation or live region. Keep one page-level heading outside or inside the primary canvas, use landmarks that match the content, and preserve a logical DOM order: context, primary work, inspector, then activity. Responsive reflow must not change keyboard order. The host application owns focus after navigation, streaming announcements, validation, and destructive-action confirmation.