@beignet/devtools 0.0.6 → 0.0.7

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @beignet/devtools
 
+## 0.0.7
+
+### Patch Changes
+
+- 3537da0: Rewrite the devtools dashboard as a shadcn-based UI with dark mode, sidebar navigation grouped by section, a request lifecycle waterfall, owner-grouped errors, focus-panel metrics, and a JSON viewer with syntax highlighting. The route contract is unchanged and the package adds zero new runtime dependencies — the dashboard compiles into a single self-contained HTML file at package build time.
+
 ## 0.0.6
 
 ## 0.0.5

package/README.md

@@ -64,27 +64,37 @@ export const { GET, POST } = createDevtoolsRoute(server.ports.devtools, {
 Open `/api/devtools`.
 
 The dashboard connects to the event stream with Server-Sent Events and falls
-back to polling when `EventSource` is unavailable. It includes tabs for the
-timeline, requests, use cases, errors, domain events, jobs, outbox delivery, schedules, providers, and
-provider-owned events such as database/cache/storage/uploads/mail/notifications/auth/audit/rate limit
-activity, and custom events.
-Request rows expand into an end-to-end lifecycle view. The detail view groups
-route match, contract name, request ID, trace ID, method, path, status,
-duration, response ownership, use case spans, correlated provider events, side
-effects, errors, and redaction status for events that share the same `traceId` or
-`requestId`.
-
-Use the toolbar to search across event summaries, paths, messages, names,
-watchers, IDs, and details. The dashboard also includes method, status, and
-watcher filters for narrowing noisy timelines.
-
-The Errors tab groups failures by owner: route, framework, provider, job,
+back to polling when `EventSource` is unavailable. A sidebar groups views by
+section — Overview, HTTP, Application, Infrastructure, and Operations — with
+live event-count badges per view, plus dynamic views for enabled custom
+watchers. The header shows clickable stats (events, requests, errors, use
+cases), live connection status, Pause/Resume, and Clear. Pausing buffers
+incoming events and reveals them on resume.
+
+The dashboard follows the system color scheme and includes a manual
+light/dark/system toggle persisted in `localStorage`. The theme matches the
+shadcn look of generated Beignet starter apps.
+
+Request rows expand into an end-to-end lifecycle view for events that share
+the same `traceId` or `requestId`. The detail renders a lifecycle waterfall:
+correlated spans drawn as relative timing bars (durations are measured at
+completion), alongside overview facts such as route match, contract name,
+request ID, trace ID, method, path, status, duration, and response ownership,
+a redaction note, correlated activity grouped by category, and the raw JSON.
+
+Press `/` to focus search, which matches event summaries, paths, messages,
+names, watchers, IDs, and details. Method, status, and watcher filters narrow
+noisy timelines. Timeline rows lead with the human-readable summary, and IDs
+truncate to copy-on-click chips. The JSON detail viewer renders syntax
+highlighting, collapsible nodes, and a copy button.
+
+The errors view groups failures by owner: route, framework, provider, job,
 schedule, outbox, client-side, devtools, or unknown. Each row shows the
 message, owner, related route/status, request ID, trace ID, and nearby
 correlated events so you can see whether a failure belongs to application code,
 the framework boundary, provider work, or background execution.
 
-Focused panels render subsystem metrics, row summaries, and drill-down fields
+Focus panels render subsystem metrics, row summaries, and drill-down fields
 for each Beignet workflow primitive. Database shows query counts, failures,
 inferred table names, redaction status, provider name, port, parameter count,
 and request/trace IDs when the runtime can preserve active request context.
@@ -200,8 +210,8 @@ Disabled watchers do not store matching events. The installed watcher metadata
 is available through `ctx.ports.devtools.getWatchers()` and the dashboard API.
 
 Custom integrations can also register watcher metadata for their own event
-types. Custom watcher tabs appear in the dashboard when they own `custom`
-events:
+types. Custom watcher views appear in the dashboard sidebar when they own
+`custom` events:
 
 ```typescript
 createDevtoolsProvider({
@@ -506,6 +516,15 @@ code does not need null checks.
 Devtools can contain sensitive request, error, and domain data. Keep it on local
 development routes unless you intentionally add authentication and redaction.
 
+## Development
+
+The dashboard UI is a React app in `ui/`. `bun run build:ui` compiles it into
+one self-contained HTML file and embeds it in the package as a generated module
+(`src/ui-html.generated.ts`, gitignored); `bun run build` runs `build:ui` and
+then the TypeScript build. From a fresh clone, run `bun run build` once before
+running this package's tests directly — the root `bun run test` handles that
+ordering through turbo.
+
 ## License
 
 MIT

package/dist/ui-html.generated.d.ts

@@ -0,0 +1,2 @@
+export declare const DEVTOOLS_DASHBOARD_HTML: string;
+//# sourceMappingURL=ui-html.generated.d.ts.map

package/dist/ui-html.generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-html.generated.d.ts","sourceRoot":"","sources":["../src/ui-html.generated.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,uBAAuB,EAAE,MACqprc,CAAC"}