For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/v0.4.0/en/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/v0.4.0/en/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/v0.4.0/en/components/log-viewer.md.
A3S UI
  • English
  • v0.4.0

      • Log Viewer

      Log Viewer is a bounded, framework-agnostic surface for build output, workload logs, and Agent execution streams. The host application owns transport, filtering, retention, and reconnection.

      Live preview

      Build output

      BuildRun build_01JY7K · ordered records

      Stream filter
      ConnectedLatest 500 ordered records
      #104stdout
      Resolved immutable source revision.
      #105stdout
      Building linux/amd64 artifact.
      #106–108Compacted records · 3 entries
      #109stderr
      Retrying registry connection.

      Usage

      @import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";
      <section class="log-viewer" aria-label="Execution log">
  <header>
    <div>
      <h2>Execution log</h2>
      <p>Ordered semantic output</p>
    </div>
  </header>
  <div data-log-meta><span>Connected</span><span>Latest 500 records</span></div>
  <div role="log" aria-live="polite" aria-label="Ordered execution output" tabindex="0">
    <div data-log-record data-stream="stdout">
      <span data-log-sequence>#42</span
      ><time datetime="2026-08-12T09:41:02Z">09:41:02</time
      ><span data-log-stream>stdout</span>
      <pre>Provider started.</pre>
    </div>
  </div>
</section>

      Parameters

      APIValuesPurpose
      class="log-viewer"RequiredRoot surface
      data-log-actionsMarkerFilter and stream actions in the header
      data-log-metaMarkerConnection and retention metadata
      role="log" or data-log-viewportNative role or markerBounded scrolling output region
      tabindex="0"Native attributeMakes an overflowing viewport keyboard-scrollable
      data-log-recordMarkerOne ordered record
      data-streamstdout, stderr, unknownStream treatment
      data-log-sequence, data-log-streamMarkersRecord metadata
      data-log-gapMarkerExplicit compaction or missing-record notice
      --log-viewer-min-height, --log-viewer-max-heightCSS lengthsViewport bounds

      States and variants

      Render unavailable, connecting, empty, live, retrying, and failed states with explicit text. Use data-log-gap when the server reports compacted or missing records. A direct child <output role="alert"> may report a recoverable stream error without replacing already received output.

      Accessibility

      Give the root and focusable log viewport accessible names. Use role="log" and aria-live="polite" only for appended records; do not re-render the entire log on every message. Keep filters in a labeled <fieldset>, expose the selected filter with aria-pressed, preserve chronological DOM order, and avoid moving keyboard focus when new records arrive.