Skip to content

feat: Phase 6 — observability dashboard (React + Vite)#8

Merged
MANVENDRA-github merged 1 commit into
mainfrom
feat/phase-6-dashboard
Jun 27, 2026
Merged

feat: Phase 6 — observability dashboard (React + Vite)#8
MANVENDRA-github merged 1 commit into
mainfrom
feat/phase-6-dashboard

Conversation

@MANVENDRA-github

Copy link
Copy Markdown
Owner

What

ROADMAP Phase 6 — the dashboard. A read-only React + Vite UI (packages/dashboard) over the gateway's admin trace API.

Visualizes, all from GET /traces + GET /regression (admin-key gated, aggregated client-side):

  • request volume over time, error / cache-hit / fallback rates, latency p95, total tokens, avg judge score
  • distributions by provider, model, status class, and guardrail outcome; a 1–5 judge-score histogram
  • a recent-requests table and the quality-regression groups (judge score by prompt × model)

How it's built

  • New @sentinel/dashboard workspace: React 19 + Vite + strict TS, minimal deps (hand-rolled SVG/CSS charts — no chart library).
  • Pure aggregation (aggregate.ts) + typed API client (api.ts) are unit-tested in Node (9 tests, run under the existing Vitest suite).
  • The React UI is proven by a hermetic Playwright E2E — it builds the app, serves the static preview, stubs the gateway API with seeded traces, and asserts the views render. No live gateway needed.
  • Tooling: scoped the gateway's strict 90% coverage + typecheck gate to packages/gateway (so the frontend coexists), added a .tsx ESLint block, a dashboard tsconfig (DOM/JSX, Bundler resolution), and a separate CI e2e job (installs Chromium, runs pnpm test:e2e).

Verify

pnpm verify        # typecheck (gateway + dashboard) + lint + 199 tests + coverage gate
pnpm test:e2e      # builds + serves the dashboard, runs Playwright (Chromium)
pnpm dev:dashboard # http://localhost:5173 against a local gateway

Verified locally: verify green (199 tests), test:e2e green (Chromium).

Notes

  • The dashboard mirrors the gateway's TraceRecord type locally (small, deliberate) so the UI never depends on the gateway's build.
  • Dashboard logic is unit-tested; its coverage isn't part of the gateway's 90% gate — the UI is covered by the E2E instead. A pragmatic split that keeps React/JSX out of the Node coverage gate.

A read-only dashboard over the gateway's admin trace API: request volume
over time, error/cache/fallback rates, latency p95, token usage,
provider/model/status distributions, a judge-score histogram, guardrail
breakdown, a recent-requests table, and quality regressions — aggregated
client-side from GET /traces + GET /regression.

- New @sentinel/dashboard workspace (React 19 + Vite + strict TS).
- Pure aggregation + API client unit-tested in Node (9 tests); the React
  UI is proven by a hermetic Playwright E2E (route-stubbed, no live gateway).
- Tooling: scoped the gateway's strict coverage/typecheck gate, added a
  .tsx ESLint block, a dashboard tsconfig (DOM/JSX), and a CI e2e job.

pnpm verify green (199 tests); pnpm test:e2e green (Chromium).
@MANVENDRA-github
MANVENDRA-github merged commit d52852a into main Jun 27, 2026
2 checks passed
@MANVENDRA-github
MANVENDRA-github deleted the feat/phase-6-dashboard branch June 27, 2026 17:10
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant