Bolt App 3 — Telemetry Explorer (Local-Only Micro-App)

Before you start: read and follow DESIGN_SYSTEM_BRIEF.md.

Mission

Build a UI/UX-rich Telemetry Explorer Next.js micro-app that loads a local JSON dataset and provides a premium observability-console-like exploration experience. This is meant to inspire improvements in Admin “Client Logs”.

Scope / Safety

Only change files in this repository.
No network calls
No console.log
No hardcoded colors (CSS vars + Tailwind)

Data source (required)

Include:

src/data/sample-events.json with ~200 mock events

Event fields (keep consistent):

id, timestamp, productId, platform, osFamily, appVersion, eventType, module, eventName, requestId?, userId?, installId?, severity?, errorMessage?, metadata (object)

Routes

/ overview + stats
/explore main explorer
/clusters client-side error grouping

Explorer UX (required)

Filters

Faceted filters: platform, eventType, module, eventName, severity
Date range (simple)
Free text search
Active filter chips + clear all
Save/load presets (localStorage)

Results

Table/list toggle
Row click opens detail drawer with tabs:
- Overview
- Raw JSON
- Related (same requestId/installId)
Copy actions: copy requestId, copy JSON

URL state

Filters reflected in query params (shareable links)

Clusters UX (required)

Group by simple fingerprint: eventName + errorMessage
Show: count, lastSeen, sample message
Click cluster → list example events

Deliverables

Full Next.js app with scripts: dev, check, build
build must run next build --webpack

Verification

From the repo root:

pnpm install
pnpm run check
pnpm run build

Output expectation

PR contains only this app.

1.8 KiB Raw Blame History