chore: add runtime frontend and backend files

backend/utils/file_storage.py

@@ -0,0 +1,111 @@
+import hashlib
+import mimetypes
+import shutil
+from dataclasses import dataclass
+from datetime import datetime, timezone
+from pathlib import Path
+
+from backend.core.config import settings
+
+
+@dataclass(frozen=True)
+class StoredFile:
+    key: str
+    url: str | None
+    backend: str
+    sha256: str
+    size_bytes: int
+
+
+class FileStorage:
+    """Stores original uploads locally or in Cloudflare R2.
+
+    The analysis queue still works from a temporary local processing file.
+    This class keeps a durable copy for audit/history/download flows.
+    """
+
+    @staticmethod
+    def save_upload(content: bytes, filename: str, user_id: str | None = None) -> StoredFile:
+        digest = hashlib.sha256(content).hexdigest()
+        safe_name = Path(filename or "upload.bin").name.replace(" ", "_")
+        date_prefix = datetime.now(timezone.utc).strftime("%Y/%m/%d")
+        owner = user_id or "anonymous"
+        key = f"uploads/{owner}/{date_prefix}/{digest[:16]}_{safe_name}"
+
+        if settings.STORAGE_BACKEND == "r2":
+            return FileStorage._save_r2(content, key, digest)
+        return FileStorage._save_local(content, key, digest)
+
+    @staticmethod
+    def _save_local(content: bytes, key: str, digest: str) -> StoredFile:
+        target = settings.LOCAL_STORAGE_DIR / key
+        target.parent.mkdir(parents=True, exist_ok=True)
+        target.write_bytes(content)
+        return StoredFile(
+            key=key,
+            url=str(target),
+            backend="local",
+            sha256=digest,
+            size_bytes=len(content),
+        )
+
+    @staticmethod
+    def _save_r2(content: bytes, key: str, digest: str) -> StoredFile:
+        try:
+            import boto3
+        except ImportError as exc:
+            raise RuntimeError("boto3 is required when STORAGE_BACKEND=r2") from exc
+
+        content_type = mimetypes.guess_type(key)[0] or "application/octet-stream"
+        client = boto3.client(
+            "s3",
+            endpoint_url=settings.R2_ENDPOINT_URL,
+            aws_access_key_id=settings.R2_ACCESS_KEY_ID,
+            aws_secret_access_key=settings.R2_SECRET_ACCESS_KEY,
+            region_name="auto",
+        )
+        client.put_object(
+            Bucket=settings.R2_BUCKET_NAME,
+            Key=key,
+            Body=content,
+            ContentType=content_type,
+            Metadata={"sha256": digest},
+        )
+        public_base = settings.R2_PUBLIC_BASE_URL.rstrip("/")
+        return StoredFile(
+            key=key,
+            url=f"{public_base}/{key}" if public_base else None,
+            backend="r2",
+            sha256=digest,
+            size_bytes=len(content),
+        )
+
+    @staticmethod
+    def copy_to_temp(stored: StoredFile, temp_path: Path) -> Path:
+        temp_path.parent.mkdir(parents=True, exist_ok=True)
+        
+        if stored.backend == "local":
+            source = Path(stored.url or "")
+            if not source.exists():
+                raise FileNotFoundError(f"Local file not found: {source}")
+            shutil.copyfile(source, temp_path)
+        
+        elif stored.backend == "r2":
+            try:
+                import boto3
+            except ImportError as exc:
+                raise RuntimeError("boto3 is required when STORAGE_BACKEND=r2") from exc
+
+            client = boto3.client(
+                "s3",
+                endpoint_url=settings.R2_ENDPOINT_URL,
+                aws_access_key_id=settings.R2_ACCESS_KEY_ID,
+                aws_secret_access_key=settings.R2_SECRET_ACCESS_KEY,
+                region_name="auto",
+            )
+            client.download_file(settings.R2_BUCKET_NAME, stored.key, str(temp_path))
+        
+        else:
+            raise ValueError(f"Unsupported storage backend: {stored.backend}")
+
+        return temp_path

data/uploads/.gitkeep

@@ -0,0 +1 @@
+

frontend/app/(auth)/login/page.jsx

@@ -0,0 +1,139 @@
+'use client'
+import { useState } from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import { Brain, Mail, Lock, ArrowRight, AlertCircle } from 'lucide-react'
+import { useAuth } from '@/lib/auth/AuthContext'
+
+export default function LoginPage() {
+    const { login } = useAuth()
+    const router = useRouter()
+    const [email, setEmail] = useState('')
+    const [password, setPassword] = useState('')
+    const [error, setError] = useState(null)
+    const [loading, setLoading] = useState(false)
+
+    const handleSubmit = async (e) => {
+        e.preventDefault()
+        setError(null)
+        setLoading(true)
+        try {
+            await login(email, password)
+            const intended = sessionStorage.getItem('intendedPath') || '/upload'
+            sessionStorage.removeItem('intendedPath')
+            router.push(intended)
+        } catch (err) {
+            setError(err.message || 'Login failed')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <div className="min-h-[85vh] flex items-center justify-center px-4 relative">
+            <div className="absolute inset-0 grid-bg opacity-30" />
+            <div className="relative z-10 w-full max-w-md">
+                <div className="text-center mb-8">
+                    <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-teal-400 to-teal-500 flex items-center justify-center mx-auto mb-4 shadow-lg">
+                        <Brain className="w-7 h-7 text-navy-900" />
+                    </div>
+                    <h1 className="text-2xl font-bold text-white">Welcome back</h1>
+                    <p className="text-gray-400 text-sm mt-1">Sign in to your MedSight AI account</p>
+                </div>
+
+                <div className="glass-card p-8">
+                    {error && (
+                        <div className="flex items-center gap-2 px-4 py-3 mb-6 bg-red-500/10 border border-red-500/20 rounded-xl">
+                            <AlertCircle className="w-4 h-4 text-red-400 shrink-0" />
+                            <p className="text-sm text-red-400">{error}</p>
+                        </div>
+                    )}
+
+                    <form onSubmit={handleSubmit} className="space-y-5">
+                        <div>
+                            <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
+                            <div className="relative">
+                                <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                                <input
+                                    type="email" value={email} onChange={(e) => setEmail(e.target.value)}
+                                    placeholder="you@example.com"
+                                    className="input-field pl-10"
+                                    required
+                                />
+                            </div>
+                        </div>
+
+                        <div>
+                            <div className="flex justify-between items-center mb-2">
+                                <label className="text-sm font-medium text-gray-300">Password</label>
+                                <Link href="/forgot-password" className="text-xs text-teal-400 hover:text-teal-300">Forgot password?</Link>
+                            </div>
+                            <div className="relative">
+                                <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                                <input
+                                    type="password" value={password} onChange={(e) => setPassword(e.target.value)}
+                                    placeholder="••••••••"
+                                    className="input-field pl-10"
+                                    required
+                                />
+                            </div>
+                        </div>
+
+                        <button
+                            type="submit"
+                            disabled={loading}
+                            className="btn-primary w-full flex items-center justify-center gap-2 disabled:opacity-50"
+                        >
+                            {loading ? 'Signing in...' : <>Sign In <ArrowRight className="w-4 h-4" /></>}
+                        </button>
+                    </form>
+
+                    <div className="mt-6 text-center">
+                        <p className="text-sm text-gray-500">
+                            Don&apos;t have an account? <Link href="/register" className="text-teal-400 hover:text-teal-300 font-medium">Sign up</Link>
+                        </p>
+                    </div>
+
+                    {process.env.NEXT_PUBLIC_GOOGLE_ENABLED === 'true' && (
+                        <>
+                            <div className="relative my-6">
+                                <div className="absolute inset-0 flex items-center">
+                                    <div className="w-full border-t border-navy-700/50" />
+                                </div>
+                                <div className="relative flex justify-center text-sm">
+                                    <span className="px-3 bg-navy-800 text-gray-500">or continue with</span>
+                                </div>
+                            </div>
+                            <button
+                                type="button"
+                                onClick={() => {
+                                    const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
+                                    window.location.href = `${API_URL}/api/v1/auth/google/login`
+                                }}
+                                className="w-full flex items-center justify-center gap-3 px-4 py-2.5 bg-white text-gray-800 rounded-xl font-medium hover:bg-gray-100 transition shadow-sm border border-gray-200"
+                            >
+                                <svg className="w-5 h-5" viewBox="0 0 24 24">
+                                    <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/>
+                                    <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                                    <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18A10.97 10.97 0 0 0 1 12c0 1.77.42 3.44 1.18 4.93l3.66-2.84z"/>
+                                    <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+                                </svg>
+                                Sign in with Google
+                            </button>
+                        </>
+                    )}
+
+                    <div className="mt-6 pt-6 border-t border-navy-700/50 text-center">
+                        <p className="text-xs text-gray-600 mb-3">Need access first?</p>
+                        <button
+                            onClick={() => router.push('/register')}
+                            className="btn-ghost text-sm w-full"
+                        >
+                            Create an account
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

frontend/app/(auth)/register/page.jsx

@@ -0,0 +1,112 @@
+'use client'
+import { useState } from 'react'
+import Link from 'next/link'
+import { Brain, Mail, Lock, User, ArrowRight, AlertCircle } from 'lucide-react'
+
+export default function RegisterPage() {
+    const [form, setForm] = useState({ full_name: '', email: '', password: '', confirm: '' })
+    const [error, setError] = useState(null)
+    const [success, setSuccess] = useState(false)
+    const [loading, setLoading] = useState(false)
+
+    const update = (field) => (e) => setForm(prev => ({ ...prev, [field]: e.target.value }))
+
+    const handleSubmit = async (e) => {
+        e.preventDefault()
+        setError(null)
+        if (form.password !== form.confirm) {
+            setError("Passwords do not match")
+            return
+        }
+        setLoading(true)
+        try {
+            const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000'
+            const res = await fetch(`${API_URL}/api/v1/auth/register`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ full_name: form.full_name, email: form.email, password: form.password })
+            })
+            if (!res.ok) {
+                const data = await res.json()
+                throw new Error(data.message || 'Registration failed')
+            }
+            setSuccess(true)
+        } catch (err) {
+            setError(err.message)
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <div className="min-h-[85vh] flex items-center justify-center px-4 relative">
+            <div className="absolute inset-0 grid-bg opacity-30" />
+            <div className="relative z-10 w-full max-w-md">
+                <div className="text-center mb-8">
+                    <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-teal-400 to-teal-500 flex items-center justify-center mx-auto mb-4 shadow-lg">
+                        <Brain className="w-7 h-7 text-navy-900" />
+                    </div>
+                    <h1 className="text-2xl font-bold text-white">Create Account</h1>
+                    <p className="text-gray-400 text-sm mt-1">Get started with MedSight AI</p>
+                </div>
+
+                <div className="glass-card p-8">
+                    {success ? (
+                        <div className="text-center py-4">
+                            <p className="text-emerald-400 font-semibold mb-2">Account created!</p>
+                            <p className="text-gray-400 text-sm mb-4">In local development, you can sign in immediately.</p>
+                            <Link href="/login" className="btn-primary inline-flex items-center gap-2 text-sm">Go to Login</Link>
+                        </div>
+                    ) : (
+                        <>
+                            {error && (
+                                <div className="flex items-center gap-2 px-4 py-3 mb-6 bg-red-500/10 border border-red-500/20 rounded-xl">
+                                    <AlertCircle className="w-4 h-4 text-red-400 shrink-0" />
+                                    <p className="text-sm text-red-400">{error}</p>
+                                </div>
+                            )}
+
+                            <form onSubmit={handleSubmit} className="space-y-4">
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-300 mb-2">Full Name</label>
+                                    <div className="relative">
+                                        <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                                        <input type="text" value={form.full_name} onChange={update('full_name')} placeholder="John Doe" className="input-field pl-10" required />
+                                    </div>
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
+                                    <div className="relative">
+                                        <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                                        <input type="email" value={form.email} onChange={update('email')} placeholder="you@example.com" className="input-field pl-10" required />
+                                    </div>
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-300 mb-2">Password</label>
+                                    <div className="relative">
+                                        <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                                        <input type="password" value={form.password} onChange={update('password')} placeholder="••••••••" className="input-field pl-10" required minLength={8} />
+                                    </div>
+                                </div>
+                                <div>
+                                    <label className="block text-sm font-medium text-gray-300 mb-2">Confirm Password</label>
+                                    <div className="relative">
+                                        <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                                        <input type="password" value={form.confirm} onChange={update('confirm')} placeholder="••••••••" className="input-field pl-10" required />
+                                    </div>
+                                </div>
+                                <button type="submit" disabled={loading} className="btn-primary w-full flex items-center justify-center gap-2 disabled:opacity-50">
+                                    {loading ? 'Creating...' : <>Create Account <ArrowRight className="w-4 h-4" /></>}
+                                </button>
+                            </form>
+
+                            <div className="mt-6 text-center">
+                                <p className="text-sm text-gray-500">Already have an account? <Link href="/login" className="text-teal-400 hover:text-teal-300 font-medium">Sign in</Link></p>
+                            </div>
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    )
+}

frontend/app/globals.css

@@ -0,0 +1,195 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --border: 222.2 47.4% 11.2%;
+    --input: 222.2 47.4% 11.2%;
+    --ring: 174 100% 41%;
+    --glow-teal: 0 0 40px rgba(0, 212, 180, 0.15);
+    --glow-teal-strong: 0 0 60px rgba(0, 212, 180, 0.25);
+  }
+
+  * {
+    @apply border-border;
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    @apply bg-navy-900 text-white;
+    font-feature-settings: "rlig" 1, "calt" 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    overflow-x: hidden;
+  }
+
+  /* Premium Scrollbar */
+  ::-webkit-scrollbar {
+    width: 5px;
+    height: 5px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: #1E3A6E;
+    border-radius: 10px;
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    background: #00D4B4;
+  }
+
+  /* Selection */
+  ::selection {
+    background: rgba(0, 212, 180, 0.3);
+    color: white;
+  }
+}
+
+@layer components {
+  /* Glass Cards */
+  .glass-card {
+    @apply bg-navy-800/60 backdrop-blur-xl border border-navy-600/50 rounded-2xl;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+  }
+
+  .glass-card-hover {
+    @apply glass-card transition-all duration-300;
+  }
+  .glass-card-hover:hover {
+    @apply border-teal-500/40;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 30px rgba(0, 212, 180, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+    transform: translateY(-2px);
+  }
+
+  /* Buttons */
+  .btn-primary {
+    @apply px-6 py-3 bg-gradient-to-r from-teal-500 to-teal-400 text-navy-900 font-semibold rounded-xl 
+           hover:from-teal-400 hover:to-teal-300 transition-all duration-300 shadow-lg;
+    box-shadow: 0 4px 20px rgba(0, 212, 180, 0.3);
+  }
+  .btn-primary:hover {
+    box-shadow: 0 6px 30px rgba(0, 212, 180, 0.45);
+    transform: translateY(-1px);
+  }
+
+  .btn-secondary {
+    @apply px-6 py-3 bg-navy-800 text-white font-medium rounded-xl border border-navy-600
+           hover:bg-navy-700 hover:border-navy-500 transition-all duration-300;
+  }
+
+  .btn-ghost {
+    @apply px-6 py-3 text-gray-400 font-medium rounded-xl
+           hover:text-white hover:bg-white/5 transition-all duration-300;
+  }
+
+  /* Section Headers */
+  .section-title {
+    @apply text-3xl md:text-4xl font-bold text-white tracking-tight;
+  }
+  .section-subtitle {
+    @apply text-lg text-gray-400 max-w-2xl mx-auto leading-relaxed;
+  }
+
+  /* Animated Grid Background */
+  .grid-bg {
+    background-image:
+      linear-gradient(rgba(30, 58, 110, 0.15) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(30, 58, 110, 0.15) 1px, transparent 1px);
+    background-size: 60px 60px;
+  }
+
+  /* Glow Effects */
+  .glow-teal {
+    box-shadow: var(--glow-teal);
+  }
+  .glow-teal-strong {
+    box-shadow: var(--glow-teal-strong);
+  }
+
+  /* Status Badges */
+  .badge {
+    @apply px-3 py-1 text-xs font-bold rounded-full uppercase tracking-wider;
+  }
+  .badge-high { @apply bg-red-500/15 text-red-400 border border-red-500/30; }
+  .badge-medium { @apply bg-amber-500/15 text-amber-400 border border-amber-500/30; }
+  .badge-low { @apply bg-emerald-500/15 text-emerald-400 border border-emerald-500/30; }
+
+  /* Input Styles */
+  .input-field {
+    @apply w-full p-3 bg-navy-900/80 border border-navy-600/60 rounded-xl text-white
+           placeholder:text-gray-500 focus:ring-2 focus:ring-teal-500/40 focus:border-teal-500/50
+           transition-all duration-200 outline-none;
+  }
+}
+
+@layer utilities {
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  /* Gradient Text */
+  .gradient-text {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-white via-white to-teal-400;
+  }
+  .gradient-text-teal {
+    @apply bg-clip-text text-transparent bg-gradient-to-r from-teal-400 to-teal-300;
+  }
+
+  /* Animated Gradient Border */
+  .animated-border {
+    position: relative;
+    overflow: hidden;
+  }
+  .animated-border::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    padding: 1px;
+    background: linear-gradient(135deg, #00D4B4, transparent, #1E3A6E, transparent, #00D4B4);
+    background-size: 300% 300%;
+    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+    -webkit-mask-composite: xor;
+    mask-composite: exclude;
+    animation: gradient-shift 6s linear infinite;
+  }
+
+  @keyframes gradient-shift {
+    0% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+    100% { background-position: 0% 50%; }
+  }
+
+  /* Floating animation */
+  .float {
+    animation: float 6s ease-in-out infinite;
+  }
+  @keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-10px); }
+  }
+
+  /* Fade in up */
+  .animate-fade-in-up {
+    animation: fadeInUp 0.6s ease-out forwards;
+    opacity: 0;
+  }
+  @keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+
+  /* Stagger delays */
+  .delay-100 { animation-delay: 100ms; }
+  .delay-200 { animation-delay: 200ms; }
+  .delay-300 { animation-delay: 300ms; }
+  .delay-400 { animation-delay: 400ms; }
+  .delay-500 { animation-delay: 500ms; }
+  .delay-600 { animation-delay: 600ms; }
+}

frontend/app/profile/api-keys/page.jsx

@@ -0,0 +1,112 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { Copy, Key, Plus, Trash2, AlertCircle } from 'lucide-react'
+import ProtectedRoute from '@/components/auth/ProtectedRoute'
+import { apiClient } from '@/lib/api/client'
+
+export default function APIKeysPage() {
+    const [keys, setKeys] = useState([])
+    const [name, setName] = useState('Default key')
+    const [plainKey, setPlainKey] = useState(null)
+    const [error, setError] = useState(null)
+    const [loading, setLoading] = useState(false)
+
+    const loadKeys = async () => {
+        const res = await apiClient.get('/api/v1/users/api-keys')
+        setKeys(res.data)
+    }
+
+    useEffect(() => {
+        loadKeys().catch(() => setError('Could not load API keys.'))
+    }, [])
+
+    const createKey = async (e) => {
+        e.preventDefault()
+        setLoading(true)
+        setError(null)
+        try {
+            const res = await apiClient.post('/api/v1/users/api-keys', {
+                name,
+                permissions: ['analyze', 'chat', 'report'],
+                rate_limit_per_hour: 100,
+            })
+            setPlainKey(res.data.plain_key)
+            setName('Default key')
+            await loadKeys()
+        } catch (err) {
+            setError(err.response?.data?.message || 'Could not create API key.')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    const revokeKey = async (id) => {
+        await apiClient.delete(`/api/v1/users/api-keys/${id}`)
+        await loadKeys()
+    }
+
+    return (
+        <ProtectedRoute>
+            <div className="max-w-5xl mx-auto px-4 py-10">
+                <div className="mb-8">
+                    <h1 className="text-3xl font-bold text-white">API Keys</h1>
+                    <p className="text-gray-400 mt-2">Create and revoke keys for scripted access to MedSight endpoints.</p>
+                </div>
+
+                <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+                    <form onSubmit={createKey} className="glass-card p-6 space-y-4 lg:col-span-1">
+                        <div className="flex items-center gap-2 text-teal-400 font-semibold">
+                            <Key className="w-5 h-5" /> New Key
+                        </div>
+                        {error && (
+                            <div className="flex items-center gap-2 text-sm text-red-300 bg-red-500/10 border border-red-500/20 rounded-xl px-3 py-2">
+                                <AlertCircle className="w-4 h-4" /> {error}
+                            </div>
+                        )}
+                        <input value={name} onChange={(e) => setName(e.target.value)} className="input-field" minLength={1} maxLength={50} />
+                        <button disabled={loading} className="btn-primary w-full flex items-center justify-center gap-2 disabled:opacity-60">
+                            <Plus className="w-4 h-4" /> {loading ? 'Creating...' : 'Create Key'}
+                        </button>
+                    </form>
+
+                    <div className="lg:col-span-2 space-y-4">
+                        {plainKey && (
+                            <div className="glass-card p-5 border-teal-500/30">
+                                <p className="text-sm text-teal-300 font-semibold mb-2">Copy this key now. It will not be shown again.</p>
+                                <div className="flex gap-2">
+                                    <code className="flex-1 bg-navy-950 border border-navy-700 rounded-lg px-3 py-2 text-xs text-gray-200 break-all">{plainKey}</code>
+                                    <button onClick={() => navigator.clipboard.writeText(plainKey)} className="btn-secondary !px-3" title="Copy key">
+                                        <Copy className="w-4 h-4" />
+                                    </button>
+                                </div>
+                            </div>
+                        )}
+
+                        <div className="glass-card overflow-hidden">
+                            <div className="p-4 border-b border-navy-700/50 text-sm font-semibold text-gray-300">Existing Keys</div>
+                            {keys.length === 0 ? (
+                                <p className="p-6 text-sm text-gray-500">No API keys created yet.</p>
+                            ) : (
+                                <div className="divide-y divide-navy-700/40">
+                                    {keys.map((key) => (
+                                        <div key={key.id} className="p-4 flex items-center justify-between gap-4">
+                                            <div>
+                                                <p className="text-white font-medium">{key.name}</p>
+                                                <p className="text-xs text-gray-500">{key.key_prefix}... · {key.is_active ? 'Active' : 'Revoked'} · {key.usage_count} uses</p>
+                                            </div>
+                                            {key.is_active && (
+                                                <button onClick={() => revokeKey(key.id)} className="p-2 text-gray-400 hover:text-red-400 hover:bg-red-500/10 rounded-lg" title="Revoke key">
+                                                    <Trash2 className="w-4 h-4" />
+                                                </button>
+                                            )}
+                                        </div>
+                                    ))}
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </ProtectedRoute>
+    )
+}

frontend/app/profile/page.jsx

@@ -0,0 +1,84 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { Save, User, Mail, AlertCircle, CheckCircle2 } from 'lucide-react'
+import ProtectedRoute from '@/components/auth/ProtectedRoute'
+import { apiClient } from '@/lib/api/client'
+import { useAuth } from '@/lib/auth/AuthContext'
+
+export default function ProfilePage() {
+    const { user, refreshAccessToken } = useAuth()
+    const [fullName, setFullName] = useState('')
+    const [profilePictureUrl, setProfilePictureUrl] = useState('')
+    const [status, setStatus] = useState(null)
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        if (user) {
+            setFullName(user.full_name || '')
+            setProfilePictureUrl(user.profile_picture_url || '')
+        }
+    }, [user])
+
+    const saveProfile = async (e) => {
+        e.preventDefault()
+        setLoading(true)
+        setStatus(null)
+        try {
+            await apiClient.patch('/api/v1/users/me', {
+                full_name: fullName,
+                profile_picture_url: profilePictureUrl || null,
+            })
+            await refreshAccessToken()
+            setStatus({ type: 'success', message: 'Profile updated.' })
+        } catch (err) {
+            setStatus({ type: 'error', message: err.response?.data?.message || 'Could not update profile.' })
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <ProtectedRoute>
+            <div className="max-w-3xl mx-auto px-4 py-10">
+                <div className="mb-8">
+                    <h1 className="text-3xl font-bold text-white">Profile Settings</h1>
+                    <p className="text-gray-400 mt-2">Manage the account used for analyses, reports, and API keys.</p>
+                </div>
+
+                <form onSubmit={saveProfile} className="glass-card p-6 space-y-5">
+                    {status && (
+                        <div className={`flex items-center gap-2 px-4 py-3 rounded-xl border ${status.type === 'success' ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-300' : 'bg-red-500/10 border-red-500/20 text-red-300'}`}>
+                            {status.type === 'success' ? <CheckCircle2 className="w-4 h-4" /> : <AlertCircle className="w-4 h-4" />}
+                            <p className="text-sm">{status.message}</p>
+                        </div>
+                    )}
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-300 mb-2">Email</label>
+                        <div className="relative">
+                            <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                            <input value={user?.email || ''} disabled className="input-field pl-10 opacity-70" />
+                        </div>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-300 mb-2">Full Name</label>
+                        <div className="relative">
+                            <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-500" />
+                            <input value={fullName} onChange={(e) => setFullName(e.target.value)} className="input-field pl-10" minLength={2} required />
+                        </div>
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-300 mb-2">Profile Image URL</label>
+                        <input value={profilePictureUrl} onChange={(e) => setProfilePictureUrl(e.target.value)} className="input-field" placeholder="https://example.com/avatar.png" />
+                    </div>
+
+                    <button disabled={loading} className="btn-primary flex items-center gap-2 disabled:opacity-60">
+                        <Save className="w-4 h-4" /> {loading ? 'Saving...' : 'Save Changes'}
+                    </button>
+                </form>
+            </div>
+        </ProtectedRoute>
+    )
+}

frontend/components/ui/dialog.jsx

@@ -0,0 +1,57 @@
+'use client'
+import * as React from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { X } from 'lucide-react'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}
+
+const Dialog = ({ children, open, onOpenChange }) => {
+  return (
+    <AnimatePresence>
+      {open && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center overflow-hidden">
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            onClick={() => onOpenChange(false)}
+            className="fixed inset-0 bg-black/60 backdrop-blur-sm"
+          />
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: 20 }}
+            className="relative z-50 w-full max-w-lg overflow-hidden border border-navy-600 bg-navy-800 p-6 shadow-2xl rounded-xl"
+          >
+            {children}
+            <button
+              onClick={() => onOpenChange(false)}
+              className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 outline-none"
+            >
+              <X className="h-4 w-4 text-white" />
+              <span className="sr-only">Close</span>
+            </button>
+          </motion.div>
+        </div>
+      )}
+    </AnimatePresence>
+  )
+}
+
+const DialogContent = ({ children, className }) => {
+  return <div className={cn("mt-2", className)}>{children}</div>
+}
+
+const DialogHeader = ({ children, className }) => {
+  return <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}>{children}</div>
+}
+
+const DialogTitle = ({ children, className }) => {
+  return <h2 className={cn("text-lg font-semibold leading-none tracking-tight text-white", className)}>{children}</h2>
+}
+
+export { Dialog, DialogContent, DialogHeader, DialogTitle }

frontend/components/ui/dropdown-menu.jsx

@@ -0,0 +1,117 @@
+'use client'
+import * as React from 'react'
+import { motion, AnimatePresence } from 'framer-motion'
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs))
+}
+
+const DropdownMenu = ({ children }) => {
+  const [open, setOpen] = React.useState(false)
+  const containerRef = React.useRef(null)
+
+  React.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setOpen(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [])
+
+  return (
+    <div className="relative inline-block text-left" ref={containerRef}>
+      {React.Children.map(children, (child) => {
+        if (child.type === DropdownMenuTrigger) {
+          return React.cloneElement(child, { open, setOpen })
+        }
+        if (child.type === DropdownMenuContent) {
+          return (
+            <AnimatePresence>
+              {open && React.cloneElement(child, { setOpen })}
+            </AnimatePresence>
+          )
+        }
+        return child
+      })}
+    </div>
+  )
+}
+
+const DropdownMenuTrigger = ({ children, open, setOpen, className, ...props }) => {
+  return (
+    <button
+      onClick={() => setOpen(!open)}
+      className={cn("flex items-center outline-none", className)}
+      {...props}
+    >
+      {children}
+    </button>
+  )
+}
+
+const DropdownMenuContent = ({ children, setOpen, className, align = "end", ...props }) => {
+  return (
+    <motion.div
+      initial={{ opacity: 0, scale: 0.95, y: -10 }}
+      animate={{ opacity: 1, scale: 1, y: 0 }}
+      exit={{ opacity: 0, scale: 0.95, y: -10 }}
+      transition={{ duration: 0.1 }}
+      className={cn(
+        "absolute z-50 mt-2 min-w-[8rem] overflow-hidden rounded-md border border-navy-600 bg-navy-800 p-1 text-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none",
+        align === "end" ? "right-0" : "left-0",
+        className
+      )}
+      {...props}
+    >
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement(child)) {
+          return React.cloneElement(child, { onClick: () => { 
+            if (child.props.onClick) child.props.onClick()
+            setOpen(false) 
+          }})
+        }
+        return child
+      })}
+    </motion.div>
+  )
+}
+
+const DropdownMenuItem = ({ children, className, onClick, ...props }) => {
+  return (
+    <div
+      onClick={onClick}
+      className={cn(
+        "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-navy-700 hover:text-teal-400 focus:bg-navy-700 focus:text-teal-400",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}
+
+const DropdownMenuLabel = ({ children, className, ...props }) => {
+  return (
+    <div className={cn("px-2 py-1.5 text-sm font-semibold", className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+const DropdownMenuSeparator = ({ className, ...props }) => {
+  return <div className={cn("-mx-1 my-1 h-px bg-navy-600", className)} {...props} />
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+}

frontend/components/ui/toaster.jsx

@@ -0,0 +1,36 @@
+'use client'
+import React from 'react'
+
+export function Toaster() {
+  return <div id="toaster-container" className="fixed bottom-4 right-4 z-50 flex flex-col gap-2" />
+}
+
+export function toast(message, type = 'info') {
+  const container = document.getElementById('toaster-container')
+  if (!container) return
+
+  const toastElement = document.createElement('div')
+  const colors = {
+    error: 'bg-red-500 border-red-600',
+    success: 'bg-teal-500 border-teal-600',
+    info: 'bg-navy-700 border-navy-600'
+  }
+  
+  toastElement.className = `${colors[type] || colors.info} text-white px-4 py-3 rounded-lg shadow-xl border animate-in slide-in-from-right-full transition-all duration-300 opacity-0`
+  toastElement.innerText = message
+  
+  container.appendChild(toastElement)
+  
+  // Trigger animation
+  setTimeout(() => {
+    toastElement.classList.remove('opacity-0')
+  }, 10)
+
+  // Remove after 3 seconds
+  setTimeout(() => {
+    toastElement.classList.add('opacity-0')
+    setTimeout(() => {
+      container.removeChild(toastElement)
+    }, 300)
+  }, 3000)
+}

frontend/jsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

frontend/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "medsight-frontend",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "axios": "^1.6.7",
+    "clsx": "^2.1.0",
+    "date-fns": "^3.3.1",
+    "framer-motion": "^11.0.3",
+    "lucide-react": "^0.330.0",
+    "next": "14.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "recharts": "^2.12.0",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "autoprefixer": "^10.4.17",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.1.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.3.3"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}