#Agent Transcript

Agent Transcript presents user, agent, and system Turns in chronological DOM order. It accepts streamed content without owning transport, Markdown rendering, history retention, or virtualization.

npm install @a3s-lab/ui

<section class="agent-transcript" aria-label="Conversation">
  <ol data-transcript-viewport tabindex="0">
    <li data-role="user"><article>...</article></li>
    <li data-role="agent"><article>...</article></li>
    <li data-role="system"><article>...</article></li>
  </ol>
</section>

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

#Usage

<section class="agent-transcript" aria-label="Conversation">
  <ol data-transcript-viewport tabindex="0">
    <li data-role="user"><article>...</article></li>
    <li data-role="agent"><article>...</article></li>
    <li data-role="system"><article>...</article></li>
  </ol>
</section>

#Parameters

#States and variants

Assistant output remains open document content on the canvas; user Turns use the restrained blue authored surface, and system notices use a bounded notice. Execution, approval, citation, and artifact blocks stay inside the owning Turn without adding a border around the whole assistant response. Loading, empty, interrupted, and failed histories should remain explicit content, using Empty or Alert when appropriate. During streaming, append or update the active Agent Turn without rebuilding earlier Turns. Window long histories in the host application while preserving the logical ordered-list position with aria-posinset and aria-setsize when known.

#Accessibility

Give the region an accessible name and preserve chronological DOM order. Make only an actually overflowing viewport focusable. Announce coarse state such as “Agent finished” or “Approval required”; do not place the token stream itself in a live region. New content must not steal focus or force the page to scroll when the reader has moved away from the latest Turn.