DesignSwaggerOpenAPI

Design system · @bebshai/ui

Patterns

How the pieces compose into a Monitoring list page, inside the real AppShell. Resize the window: the sidebar becomes an icon rail below 1024px (hover it to peek, pin it with “Keep sidebar open”), a drawer below 768px, and the table turns into stacked rows.

Monitoring list page

Page header (primary action, Export ▾) → filter bar → optional chart strip → dense table with keyset paging → detail sheet. Open a row, then Request timeline.

Monitoring / Jobs
Live

Jobs

Warnings and errors from the API, workers and jobs.

Log volume by severity

13:0001:0012:00 UTC
Peak 104 · gridline 100
InfoWarnErrorFatal
LevelErrorTime12:03:07SourceapiCodeinternalMessageinternal errorRoute/v1/admin/tenants
LevelWarnTime12:01:07SourceapiCodeslow queryMessageslow queryRoute/v1/admin/logs/http/stats
LevelFatalTime11:56:07SourceapiCodepanicMessagepanicRoute/v1/uploads
LevelWarnTime11:50:07SourcebusCodebus.disconnectedMessagerealtime listener disconnectedRoute—
LevelErrorTime11:42:07SourcejobCodejob.realtime.sweepMessagejob failedRoute—
LevelInfoTime11:33:07SourceapiCodemail.sendMessagemail queuedRoute/v1/auth/signup
LevelErrorTime11:17:07SourceapiCodedb.deniedMessagedb access deniedRoute/v1/workspaces/{slug}/members
LevelDebugTime11:01:07SourceworkerCodecache.warmMessagecache warmedRoute—
LevelTimeSourceCodeMessageRoute
Error12:03:07apiinternalinternal error/v1/admin/tenants
Warn12:01:07apislow queryslow query/v1/admin/logs/http/stats
Fatal11:56:07apipanicpanic/v1/uploads
Warn11:50:07busbus.disconnectedrealtime listener disconnected—
Error11:42:07jobjob.realtime.sweepjob failed—
Info11:33:07apimail.sendmail queued/v1/auth/signup
Error11:17:07apidb.denieddb access denied/v1/workspaces/{slug}/members
Debug11:01:07workercache.warmcache warmed—

Search

Search pages and commands…

DoGive every grid track minmax(0, …) so wide tables scroll inside their card, not the page.
DoStack two-column panel rows below 1280px.
DoKeep filters, time range and the cursor in search params: the URL is the state.
Don'tPut more than one facet inline; the rest belong behind Filters.