AIAIAI Design System

Log Viewer

Structured log display for viewing timestamped, level-coded entries. Composes Badge, Input, Checkbox, Toggle, Alert, EmptyState, and Skeleton into a single component optimized for scanning many entries.

Default

Toolbar with search, level filters (with counts), and relative/absolute timestamp toggle. Each entry shows timestamp, level badge, and message. Error and warning rows get a left accent stripe.

Relative
3m ago WARNING Rate limit approaching: 85% of quota consumed for API key ending in ...x4f2
3m ago WARNING Slow query detected: extraction took 8.2s (threshold: 5s)
3m ago ERROR Failed to write batch to orders table: connection reset by peer
18 entries

Truncated

When the backend caps output, a warning banner communicates that entries may be missing.

Relative
Log output was truncated. Some entries may be missing.
3m ago WARNING Rate limit approaching: 85% of quota consumed for API key ending in ...x4f2
6 entries

Empty

Shown when the run has no log output yet.

No log entries

Logs will appear here once the run produces output.

Unavailable

When the orchestrator is unreachable, shows a fallback with an optional link to the external UI.

Logs unavailable

The orchestrator is unreachable. View logs in the external UI.

Loading

Skeleton shimmer while log data is being fetched.

TOKEN REFERENCE

LogViewer use component tokens from components.css:

--log-viewer-bg: var(--color-surface-secondary)--log-viewer-border: var(--elevation-border)--log-viewer-radius: var(--radius-md)--log-viewer-max-height: 480px--log-viewer-toolbar-padding: var(--space-md)--log-viewer-toolbar-gap: var(--space-lg)--log-viewer-entry-padding-x: var(--space-md)--log-viewer-entry-padding-y: var(--space-xs)--log-viewer-entry-font: var(--type-data-font)--log-viewer-entry-size: var(--type-data-size)--log-viewer-timestamp-color: var(--color-text-muted)--log-viewer-timestamp-width: 140px--log-viewer-level-error-color: var(--color-destructive)--log-viewer-level-warning-color: var(--color-warning)