`@idebug/ui`

Static SPA served by @idebug/node / @idebug/nest (and by core’s handler).

Stack

AlignUI components (Button, Input, Badge, Switch) + Tailwind tokens
Baselayer-inspired brand: primary #384ce3, Uncut Sans, JetBrains Mono
Light and dark themes with a top-bar toggle (persisted in localStorage)

Features

Feature	Description
Sessions list	Method, URL, status, duration, event count, live updates
Request path graph	Double-point path: enter → deepest → exit
Event timeline	`FN↓` / `FN↑`, expandable JSON payloads
App changes only	Hides framework `RESΔ` / `REQΔ` (e.g. Content-Type)
Live	SSE (`/api/stream`) with poll fallback
Clear	`DELETE /api/sessions`

Build output (required)

packages/ui/dist/index.html
packages/ui/dist/assets/**

pnpm --filter @idebug/ui build

Resolution from Node:

import { createRequire } from 'node:module';
import path from 'node:path';
 
const require = createRequire(import.meta.url);
const staticDir = path.join(
  path.dirname(require.resolve('@idebug/ui/package.json')),
  'dist',
);

Local development without a real app

pnpm --filter @idebug/ui dev:all
# Vite :5174 + mock API :4010 → http://localhost:5174/__idebug/

Themes

Default follows system preference, then localStorage key idebug-ui-theme
Toggle Light / Dark in the top bar

@idebug/db @idebug/react