#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.

Resolved immutable source revision.

Building linux/amd64 artifact.

Retrying registry connection.

npm install @a3s-lab/ui@0.4.1

<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>

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

#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

#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.