feat: drift detection monitoring + animated hero dashboard#17
Merged
Conversation
…OC, a11y, and print CSS - benchmarkResults.json: rewrite to honest n=5,000 results (Gemini Flash 82% wins, 3 domains) - BenchmarksPage: replace hardcoded hex with CSS vars, reframe narrative to error-asymmetry choice, add /paper nav link, back-to-top button, a11y (role/tabIndex/aria on table rows and modal, focus trap on DomainModal) - PaperPage: add sticky sidebar TOC with IntersectionObserver, mobile drawer, print CSS, skip-to-content link, cross-page /benchmarks nav link, back-to-top button - index.css: add .sr-only utility class - TODOS.md: remove completed items (data fix, sticky TOC, print CSS, a11y, design system/nav)
- Demo mode: users without API keys see a DemoWelcome onboarding screen
("Run the council.") that runs 10 pre-loaded test cases through mock judges
(faithfulness/groundedness/context relevancy) without requiring real API keys
- Demo flag flows from validation → evaluate route → orchestrator → mock judge
selection, bypassing real judges and the 409 active-evaluation conflict check
- Demo banner shown during streaming; post-completion CTA prompts key setup
- History rows show a "Demo" pill badge for demo evaluations
- Fixed non-deterministic mock scores: moved startTime before randomDelay in all
4 mock functions; simplified mockAggregate token computation to testCase.input only
- Pre-submission key validation: TestCaseUpload shows an inline notice and disables
"Run Evaluation" when hasKeys === false, with "Configure Keys" and "Run Demo" actions;
fails open when key state is unknown (null/undefined)
- DriftAlert model (MongoDB) with 6-hour deduplication cooldown - Statistical drift detector: rolling mean vs baseline window (latest 10 vs evals 11-30), fires warning at 10pt drop, critical at 20pt - /api/monitoring/scores and /api/alerts routes (requireAnyAuth + service scope) - /api/sample route for seeding live evaluations in dev/demo - MonitoringDashboard.jsx: live score trend chart, KPI cards, alert history - SettingsPage.jsx + ServiceKeysManager.jsx: unified settings view with API key management - ApiKeysManager: improved UX with copy-to-clipboard and visibility toggle - README: add Production Monitoring section with B+C product framing - TODOS: updated with remaining monitoring tasks
Replaces static hero with a self-contained drift detection story: - SVG clipPath scan beams reveal healthy (green) then drop (red) lines as a traveling glow sweeps left-to-right - rAF-driven smooth number counter (81→62, easeInOutQuart) replaces discrete setTimeout steps - Dot ripple animations stagger as beam passes each data point - Amber inflection beacon pulses at the healthy/drop split after drop line completes - Staged alert reveal: banner slides in → badge glows red → detail text fades (3 beats) - KPI card borders transition green→amber→red reactively; Avg Score shakes on alert fire - Area fills fade in after their respective beam completes (not during) - Tagline words stagger in with motion/react (5 spans, 60ms stagger) - heroFloat keyframe updated with 3-stop rotateY oscillation for living 3D feel - Full loop: 9s with seamless crossfade reset
The stats endpoint used source: 'batch' which excluded all pre-existing evaluations (MongoDB doesn't match missing fields). Changed to $ne 'live' so legacy documents without a source field are included in stats.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
DriftAlertmodel with 6-hour dedup cooldown,/api/monitoringand/api/sampleroutes,MonitoringDashboard.jsxwith live score trend and alert history, unifiedSettingsPagewithServiceKeysManagerHeroDashboard.jsxwith SVG scan beam that reveals chart lines viaclipPath, rAF-driven smooth counters, staggered dot ripples, amber inflection beacon, staged alert reveal, reactive KPI card borders, tagline word stagger via motion/react — full 9s loop with seamless resetTest plan
npm run devfromfrontend/— landing page hero should show the 9s animation loop (beam draws green line → red drop → alert fires → counter drops 81→62 → tagline staggered in → reset)/settings— SettingsPage with API key management should load/api/monitoring/scoresand/api/monitoring/alertswith a valid token — should return data/api/sampleto seed a live evaluation and verify drift detector fires an alert after threshold is exceeded