Update UI with new design system, fonts, and interactive platform pills

[pstaylor-patrick]

related to #1

👋 TL;DR

Added a latency analytics dashboard with historical tracking, a metadata database using Drizzle ORM, and improved the UI with better visual design and platform comparison tools.

🔎 Details

This PR introduces a comprehensive latency monitoring system that tracks database platform health over time. Key changes include:

1. Metadata Database: Added Drizzle ORM with a latency_snapshots table to store historical health check data
2. Cron Endpoint: Created /api/cron/latency for scheduled health checks (QStash compatible)
3. Analytics Dashboard: New /api/analytics/latency endpoint and UI component with interactive charts and statistics
4. UI Refresh: Updated design system with new color palette, typography (Inter/JetBrains Mono), and improved component styling
5. Platform Comparison: Enhanced platform selection with pill-based UI, relative performance indicators, and "fastest" badges
6. Database Management: Refactored scripts with db:reset:<target>, db:migrate:<target>, and db:seed:<target> commands
7. SQL Syntax Highlighting: Added keyword highlighting in the query runner for better readability

New environment variables:

• DATABASE_URL_METADATA: Connection string for analytics database
• APP_ENVIRONMENT: Runtime environment (local/firebase)
• CRON_SECRET: Authentication for cron endpoints

✅ How to Test

1. Setup Metadata DB:

   • Add DATABASE_URL_METADATA to .env.local
   • Run npm run db:migrate:metadata to create tables
   • Run npm run db:studio to verify schema

2. Test Health Checks:

   • Start all platforms: npm run db:up
   • Verify health: npm run db:verify:local etc.
   • Manually trigger cron: curl -X POST http://localhost:3002/api/cron/latency

3. UI Testing:

   • Load dashboard and verify new pill-based platform selector
   • Check that "fastest" platform is correctly identified
   • Navigate to Analytics tab and filter by time range/environment
   • Verify SQL syntax highlighting in query runner
   • Test schema comparison between platforms

4. Database Reset:

   • Test reset workflow: npm run db:reset:local
   • Verify confirmation prompt and proper cleanup/recreation

5. Visual Regression:

   • Check new color scheme and typography
   • Verify responsive design on different screen sizes
   • Test all interactive states (hover, active, disabled)

🥜 GIF