# 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.