Debug UI

The server inspector is the @idebug/ui SPA mounted at /__idebug (default).

Layout

1. Top bar — live indicator (SSE / polling), app name, version, session count, filter, refresh, clear, theme toggle
2. Sessions — newest first; method chips, status, duration, event counts
3. Detail — stats (including db Nq / time), App changes only switch, request path (teal DB chips), call tree (Tree or Bars), event timeline

Live updates

• Primary: GET /__idebug/api/stream (Server-Sent Events)
• Fallback: poll GET /__idebug/api/events?sinceSequence=

Theme

• Light (Baselayer-inspired sky/white surfaces, primary #384ce3)
• Dark (#121012 / #1c1b1c shells)
• Toggle persists under idebug-ui-theme

Call tree

When a session includes wrapped functions and @idebug/db queries, the detail pane shows a hierarchical tree:

GET /users/1
└─ getUser
   ├─ findUserById → drizzle.SELECT
   └─ findOrdersByUser → knex.SELECT

Queries are leaves of the issuing function — not a separate “DB” list. Expand a DB node for formatted SQL, params, duration, and row count.

Toggle Bars for a horizontal waterfall: each span is a row, bar length ∝ duration, left edge is start time on the request axis. Slow queries stand out immediately next to the wrapping service.

Try samples/db-api on port 3003 or the UI mock server (pnpm --filter @idebug/ui dev:all).

App changes only

When enabled (default), the timeline hides framework mutations:

• Explicit source: 'framework' from the SDK
• Heuristic headers if untagged: Content-Type, Content-Length, ETag, Date, …

Turn off to see Express/Nest-generated header noise.

Empty / error states

Keyboard / UX tips

• Expand any event card for full JSON
• Use the filter box for method/URL text match
• Clear wipes all process memory for IDebug (confirm dialog)