Log viewer | Glaze design system

States

When to use it

Use: A run's, a deploy's or an eval's output, line by line, often while it still runs.
Use: Finding the failure in a long log: Next failure, and the toolbar's search and levels.
Not for: A file or a command to read and copy. Use Code block.
Not for: Structured data to fold. Use JSON view.
Not for: When each step started and how long it took. Use Timeline.

6 rules

Must: Give every line a level ('debug', 'info', 'warn' or 'fail') and a stable id. Because the level sets the line's colour word, the counts and Next failure, and the id keeps the windowed rows and their measured heights in place as lines arrive.
Must: Set streaming while lines arrive and append to lines; never replace the array with only the new ones. Because follow keeps the bottom in view and counts what arrived while the reader scrolled up, which needs every line.
Should: Turn toolbar on for a log longer than a screen or two; leave it off for a short one. Because a search and four level filters over eight lines is more chrome than log.
Never: Colour a line or its message by level; the level word carries it. Because colour means status in Glaze and always comes with a word, and a red block of text is hard to read.
Must: Give label a noun phrase that names whose log it is: "Deploy log for api@v314". Because it is the head row's title and the log region's name, so a page with two logs can be told apart.
Never: Wrap a LogViewer in a Card or a CodeBlock; it is the card, or takes frame="none" inside one. Because a card around a card is two edges where one closes the group.

4 states, highest first

5 checks

: The lines are a role="log" region named by label, one tab stop, scrolled by the arrow keys; it does not announce every line.
: A status line says how many lines failed; Next failure is named "Next failure, 2 in this log".
: Level words are text-2, --warn-text or --fail-text, all 5.2:1 or more on --code-surface.
: Copy lines and a hand selection both copy "time LEVEL source message", one line each.
: The level filters are toggles with their counts read as descriptions; the search is a search field.

3 keys

6 edge cases

100,000 lines: Only the lines in view render; Copy lines joins them only on press.
Reader scrolled up while streaming: Following stops and a flat pill counts the new lines and failures; it jumps back.
No lines yet: Shows a small centred empty state, "Waiting for the first line" while streaming and "No output" after, in a body that tall; it takes height when the first line arrives.
Filter matches nothing: Says which query or levels emptied it.
Long line: Wraps anywhere; with wrap off, the log scrolls sideways.
Right-to-left page: The log stays left to right, like code.

10 props

13 tokens