#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.3.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. Regions wrap from three columns, to a context/canvas pair, to one column according to the workbench's own available inline width rather than the browser viewport.

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.