shadcn.io is not affiliated with official shadcn/ui
Log Viewer Command Menu Block for React
A log viewer's command menu shown rising from the bottom of an app window as a console drawer: 24 typed lines filtered by level and source and searched with matches marked, and a key to open the two lines around any line.
Installation
Overview
Search logs and read the lines around a hit with this log viewer command menu for React with Base UI. It opens from an app window in Tailbarn, a log viewer, whose header holds an outline field with its ⌘ K cap, and the window and its request graph are drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The menu is the catalog Command rising from the bottom as a console drawer: 24 typed lines, each with its time, a level word and glyph, its source and a message in mono, with a level switch (All, Info, Warn, Error) and source chips above the field and the typed text marking its matches. ArrowRight with the caret at the end of the field, or a row's Show context button, opens the two lines before and after the highlighted one inline, and ArrowLeft at the start of the field closes them. On a phone the source column and the chips are hidden and the level stays. For the preview the menu is drawn open in place when the page loads; the field, or Ctrl or ⌘ K while focus is in the block, opens the real command dialog with the same filters. For log viewers, audit trails and any list you read in context.
FAQ
Why is the menu already open, and what do I keep?
So you can see it without a click. On load the menu is the Command drawn inline over a picture of an app window with a request graph, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so an open context in the copy is still there in the dialog. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.
Where does the context come from?
From the whole log, not from the filtered list. The two lines before and the two after are cut from the full 24 by position, so a hit on a Warn line still shows the Info lines that surround it even when the level is set to Warn. The context lines are dimmer and have no button, and several rows can be open at once. ArrowRight only acts when the caret is at the end of what you typed, so it never gets in the way of editing the query.
How do the level switch and the source chips combine?
The level switch always has one chosen. The source chips are a multiple switch where none chosen means every source, and the typed words search the message and the source. All three narrow the same list, and the foot counts how many of the 24 lines remain. Both sit above the field, outside the command, so their keys stay their own, and the empty state says which filters to relax.
What stays local, and how do I wire it?
All of it. The 24 lines are typed data in LOG and nothing is fetched. In your app load the lines from your logging API, keep around for the context (or ask the API for neighbours by id), and for a long log page the list instead of rendering every line.
What does a phone show?
The menu docks to the top of the stage, the source column and the source chips are hidden and the level switch stays. Each row keeps its time, level, message and Show context button.
Is it accessible from the keyboard?
Type to search, the arrow keys move through the rows, ArrowRight at the end of the field opens the context of the highlighted line, ArrowLeft at the start closes it, Enter reads the line out and Escape closes the menu with focus back on the header's field; Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself.