No Logs Empty State Block for React

Nothing is logged or sent. The twelve lines are typed in the page, each with its fixed time, and each press prints the next in order; a Clear button, quiet until there is a line, starts again. To wire it for real, stream the lines your API returns into the console where the code says so and compute the chips' counts from them.

Yes. They are a group of toggle buttons: pressing one hides or shows the lines of that level, every chip keeps its count of what has come in, and the foot says how many lines are shown. With every level off the console says "No lines match" in place instead of going blank. The window keeps its height throughout.

While it is on, each new line scrolls the console to the newest one, inside the console only, never the page. Turn it off to read earlier lines while more arrive; turning it on again jumps back to the end. The scrolling console is a labelled region that takes focus, so arrow keys scroll it.

Terminals and logs are dark by nature, so the console carries its own dark scope while the window around it follows the theme (a code comment says so). Levels are told apart by their word, weight and a bar at the start of the line, never by color alone.

The window keeps its height, the chips scroll sideways inside their own row so the page never does, and the product name and the pipe's captions drop out. The button stays in the top bar and the console scrolls inside itself.

The log is a named region of real text with its times in <code>time</code> elements, and it does not announce each line (a busy log would drown everything else); the foot's polite line says what a press printed. The chips and the switch are named, and the pipe is hidden from assistive technology.