Initial implementation of Website Change Detection Monitor MVP

Features implemented:
- Backend API with Express + TypeScript
- User authentication (register/login with JWT)
- Monitor CRUD operations with plan-based limits
- Automated change detection engine
- Email alert system
- Frontend with Next.js + TypeScript
- Dashboard with monitor management
- Login/register pages
- Monitor history viewer
- PostgreSQL database schema
- Docker setup for local development

Technical stack:
- Backend: Express, TypeScript, PostgreSQL, Redis (ready)
- Frontend: Next.js 14, React Query, Tailwind CSS
- Database: PostgreSQL with migrations
- Services: Page fetching, diff detection, email alerts

Documentation:
- README with full setup instructions
- SETUP guide for quick start
- PROJECT_STATUS with current capabilities
- Complete technical specifications

Ready for local testing and feature expansion.

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

frontend/app/monitors/[id]/page.tsx

@@ -0,0 +1,146 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useRouter, useParams } from 'next/navigation'
+import { useQuery } from '@tanstack/react-query'
+import { monitorAPI } from '@/lib/api'
+import { isAuthenticated } from '@/lib/auth'
+
+export default function MonitorHistoryPage() {
+  const router = useRouter()
+  const params = useParams()
+  const id = params?.id as string
+
+  useEffect(() => {
+    if (!isAuthenticated()) {
+      router.push('/login')
+    }
+  }, [router])
+
+  const { data: monitorData } = useQuery({
+    queryKey: ['monitor', id],
+    queryFn: async () => {
+      const response = await monitorAPI.get(id)
+      return response.monitor
+    },
+  })
+
+  const { data: historyData, isLoading } = useQuery({
+    queryKey: ['history', id],
+    queryFn: async () => {
+      const response = await monitorAPI.history(id)
+      return response.snapshots
+    },
+  })
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p>Loading...</p>
+      </div>
+    )
+  }
+
+  const snapshots = historyData || []
+  const monitor = monitorData
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      {/* Header */}
+      <header className="border-b bg-white">
+        <div className="mx-auto max-w-7xl px-4 py-4 sm:px-6 lg:px-8">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={() => router.push('/dashboard')}
+              className="text-gray-600 hover:text-gray-900"
+            >
+              ← Back
+            </button>
+            <div>
+              <h1 className="text-2xl font-bold">
+                {monitor?.name || 'Monitor History'}
+              </h1>
+              {monitor && (
+                <p className="text-sm text-gray-600 break-all">{monitor.url}</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </header>
+
+      {/* Main Content */}
+      <main className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+        <h2 className="mb-4 text-xl font-semibold">Check History</h2>
+
+        {snapshots.length === 0 ? (
+          <div className="rounded-lg bg-white p-12 text-center shadow">
+            <p className="text-gray-600">No history yet</p>
+            <p className="mt-2 text-sm text-gray-500">
+              The first check will happen soon
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-3">
+            {snapshots.map((snapshot: any) => (
+              <div
+                key={snapshot.id}
+                className={`rounded-lg bg-white p-4 shadow ${
+                  snapshot.changed ? 'border-l-4 border-l-blue-500' : ''
+                }`}
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-3">
+                      <span
+                        className={`rounded px-2 py-1 text-xs font-medium ${
+                          snapshot.changed
+                            ? 'bg-blue-100 text-blue-800'
+                            : 'bg-gray-100 text-gray-800'
+                        }`}
+                      >
+                        {snapshot.changed ? 'Changed' : 'No Change'}
+                      </span>
+                      {snapshot.error_message && (
+                        <span className="rounded bg-red-100 px-2 py-1 text-xs font-medium text-red-800">
+                          Error
+                        </span>
+                      )}
+                      <span className="text-sm text-gray-600">
+                        {new Date(snapshot.created_at).toLocaleString()}
+                      </span>
+                    </div>
+
+                    <div className="mt-2 flex gap-4 text-sm text-gray-600">
+                      <span>HTTP {snapshot.http_status}</span>
+                      <span>{snapshot.response_time}ms</span>
+                      {snapshot.change_percentage && (
+                        <span>{snapshot.change_percentage.toFixed(2)}% changed</span>
+                      )}
+                    </div>
+
+                    {snapshot.error_message && (
+                      <p className="mt-2 text-sm text-red-600">
+                        {snapshot.error_message}
+                      </p>
+                    )}
+                  </div>
+
+                  {snapshot.html_content && (
+                    <button
+                      onClick={() =>
+                        router.push(`/monitors/${id}/snapshot/${snapshot.id}`)
+                      }
+                      className="rounded-md border px-3 py-1 text-sm hover:bg-gray-50"
+                    >
+                      View Details
+                    </button>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  )
+}