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.
Truncated
When the backend caps output, a warning banner communicates that entries may be missing.
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)