Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+ModelX[[:space:]]Final[[:space:]]Problem.pdf filter=lfs diff=lfs merge=lfs -text

.github/workflows/deploy-backend.yaml

@@ -0,0 +1,63 @@
+name: Deploy Backend to Hugging Face Space
+
+on:
+  push:
+    branches:
+      - main
+      - master
+  workflow_dispatch:
+
+jobs:
+  sync-to-hub:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          lfs: true
+
+      - name: Setup Git LFS
+        run: |
+          git lfs install
+          git lfs pull
+          git lfs checkout
+
+      - name: Setup Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
+      - name: Install huggingface_hub
+        run: pip install huggingface_hub
+
+      - name: Push to Hugging Face Space
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          python -c "
+          from huggingface_hub import HfApi, login
+          import os
+          
+          token = os.environ['HF_TOKEN']
+          login(token=token)
+          
+          api = HfApi()
+          api.upload_folder(
+              folder_path='.',
+              repo_id='nivakaran/modelx',
+              repo_type='space',
+              token=token,
+              ignore_patterns=['*.pyc', '__pycache__', '.git', 'node_modules', '*.log', '.env']
+          )
+          print('✅ Successfully pushed to Hugging Face Space!')
+          "
+
+      - name: Verify Sync
+        if: success()
+        run: echo "✅ Successfully synced to Hugging Face Space!"
+
+      - name: Sync Failed  
+        if: failure()
+        run: echo "❌ Failed to sync. Check if the Space exists at https://huggingface.co/spaces/nivakaran/modelx"

.github/workflows/deploy-frontend.yaml

@@ -0,0 +1,68 @@
+name: Deploy Frontend to GitHub (for Vercel)
+
+on:
+  push:
+    branches:
+      - main
+      - master
+    paths:
+      # Trigger only when frontend files change
+      - 'frontend/**'
+  workflow_dispatch:
+
+jobs:
+  deploy-frontend:
+    runs-on: ubuntu-latest
+    
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Configure Git
+        run: |
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+
+      - name: Extract and Push Frontend
+        env:
+          # Set your frontend repository here (format: username/repo)
+          FRONTEND_REPO: ${{ secrets.FRONTEND_REPO }}
+          # GitHub PAT with repo permissions for cross-repo push
+          DEPLOY_TOKEN: ${{ secrets.FRONTEND_DEPLOY_TOKEN }}
+        run: |
+          # Default repo if secret not set
+          REPO=${FRONTEND_REPO:-"Nivakaran-S/modelx-frontend"}
+          
+          # Create a new directory for frontend-only repo
+          mkdir -p /tmp/frontend-deploy
+          
+          # Copy frontend contents (not the folder itself)
+          cp -r frontend/* /tmp/frontend-deploy/
+          
+          # Copy root configs needed for Next.js if they exist
+          [ -f "frontend/.gitignore" ] && cp frontend/.gitignore /tmp/frontend-deploy/ || true
+          
+          # Create .env.production with API URL placeholder
+          echo "NEXT_PUBLIC_API_URL=\${NEXT_PUBLIC_API_URL:-https://nivakaran-modelx.hf.space}" > /tmp/frontend-deploy/.env.production
+          
+          cd /tmp/frontend-deploy
+          
+          # Initialize git repo
+          git init
+          git add .
+          git commit -m "Deploy frontend from main repo - $(date +'%Y-%m-%d %H:%M:%S')"
+          
+          # Push to frontend repo
+          git remote add origin https://x-access-token:${DEPLOY_TOKEN}@github.com/${REPO}.git
+          git branch -M main
+          git push origin main --force
+
+      - name: Verify Deployment
+        if: success()
+        run: echo "✅ Successfully pushed frontend to GitHub repository for Vercel deployment!"
+
+      - name: Deployment Failed
+        if: failure()
+        run: echo "❌ Failed to push frontend. Check if FRONTEND_DEPLOY_TOKEN and FRONTEND_REPO secrets are configured."

.gitignore

@@ -0,0 +1,21 @@
+# Python-generated files
+__pycache__/
+*.py[oc]
+build/
+dist/
+wheels/
+*.egg-info
+
+# Virtual environments
+.venv
+
+.env 
+.env.template
+
+models/
+models 
+.langgraph_api
+data/
+datasets/
+datasets
+data

.python-version

@@ -0,0 +1 @@
+3.11

Dockerfile

@@ -0,0 +1,21 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies
+RUN apt-get update && apt-get install -y \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Expose port
+EXPOSE 8000
+
+# Run API server
+CMD ["python", "main.py"]

ModelX Final Problem.pdf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8666a7e263a028de6eb37864f48d8bfcfa78bf8303c72778c68396eade8b2300
+size 4413994

QUICKSTART.md

@@ -0,0 +1,140 @@
+# 🚀 Roger Quick Start Guide
+
+## Prerequisites
+- Python 3.11+
+- Node.js 18+
+- Groq API Key ([Get Free Key](https://console.groq.com))
+
+## Installation & Setup
+
+### 1. Install Python Dependencies
+```bash
+pip install -r requirements.txt
+```
+
+### 2. Configure Environment
+```bash
+# Copy template
+cp .env.template .env
+
+# Edit .env and add your GROQ_API_KEY
+# GROQ_API_KEY=your_key_here
+```
+
+### 3. Start Backend
+```bash
+python main.py
+```
+
+Wait for initialization logs:
+```
+[StorageManager] Initializing multi-database storage system
+[SQLiteCache] Initialized at data/cache/feeds.db
+[ChromaDB] Initialized collection: Roger_feeds
+[CombinedAgentNode] Initialized with production storage layer
+```
+
+### 4. Start Frontend (New Terminal)
+```bash
+cd frontend
+npm install
+npm run dev
+```
+
+### 5. Access Dashboard
+Open: http://localhost:3000
+
+---
+
+## 🎯 What to Expect
+
+### First 60 Seconds
+- System initializes 6 domain agents
+- Begins scraping 47+ data sources
+- Deduplication pipeline activates
+
+### After 60-120 Seconds
+- First batch of events appears on dashboard
+- Risk metrics start calculating
+- Real-time WebSocket connects
+
+### Live Features
+- ✅ Real-time intelligence feed
+- ✅ Risk vs Opportunity classification
+- ✅ 3-tier deduplication (SQLite + ChromaDB + Neo4j\*)
+- ✅ CSV exports in `data/feeds/`
+- ✅ Operational Risk Radar metrics
+
+\*Neo4j optional - requires Docker
+
+---
+
+## 🐛 Troubleshooting
+
+### "ChromaDB not found"
+```bash
+pip install chromadb sentence-transformers
+```
+
+### "No events appearing"
+- Wait 60-120 seconds for first batch
+- Check backend logs for errors
+- Verify GROQ_API_KEY is set correctly
+
+### Frontend can't connect
+```bash
+# Verify backend running
+curl http://localhost:8000/api/status
+```
+
+---
+
+## 📊 Production Features
+
+### Storage Stats
+```bash
+curl http://localhost:8000/api/storage/stats
+```
+
+### CSV Exports
+```bash
+ls -lh data/feeds/
+cat data/feeds/feed_$(date +%Y-%m-%d).csv
+```
+
+### Enable Neo4j (Optional)
+```bash
+# Start Neo4j with Docker
+docker-compose -f docker-compose.prod.yml up -d neo4j
+
+# Update .env
+NEO4J_ENABLED=true
+
+# Restart backend
+python main.py
+
+# Access Neo4j Browser
+open http://localhost:7474
+# Login: neo4j / Roger2024
+```
+
+---
+
+## 🏆 Demo for Judges
+
+**Show in this order**:
+1. Live dashboard (http://localhost:3000)
+2. Terminal logs showing deduplication stats
+3. Neo4j graph visualization (if enabled)
+4. CSV exports in data/feeds/
+5. Storage API: http://localhost:8000/api/storage/stats
+
+**Key talking points**:
+- "47+ data sources, 6 domain agents running in parallel"
+- "3-tier deduplication: SQLite for speed, ChromaDB for intelligence"
+- "90%+ duplicate reduction vs 60% with basic hashing"
+- "Production-ready with persistent storage and knowledge graphs"
+
+---
+
+**Ready to win! 🏆**

README.md

@@ -1,10 +1,863 @@
+# 🇱🇰 Roger Intelligence Platform
+
+**Real-Time Situational Awareness for Sri Lanka**
+
+A multi-agent AI system that aggregates intelligence from 47+ data sources to provide risk analysis and opportunity detection for businesses operating in Sri Lanka.
+
+## 🌐 Live Demo
+
+| Component | URL |
+|-----------|-----|
+| **Frontend Dashboard** | [https://model-x-frontend-snowy.vercel.app/](https://model-x-frontend-snowy.vercel.app/) |
+| **Backend API** | [https://nivakaran-Roger.hf.space](https://nivakaran-Roger.hf.space) |
+
+---
+
+## 🎯 Key Features
+
+✅ **8 Domain Agents** running in parallel:
+- Social Media Monitor (Reddit, Twitter, Facebook, Threads, BlueSky)
+- Political Intelligence (Gazette, Parliament, District Social Media)
+- Economic Analysis (CSE Stock Market + Technical Indicators)
+- Meteorological Alerts (DMC Weather + RiverNet + **FloodWatch Integration** 🆕)
+- Intelligence Agent (Brand Monitoring + Threat Detection + **User-Configurable Targets**)
+- Data Retrieval Orchestrator (Web Scraping)
+- Vectorization Agent (Multilingual BERT Embeddings + Anomaly Detection)
+
+✅ **ML Anomaly Detection Pipeline** (Integrated into Graph):
+- Language-specific BERT models (Sinhala, Tamil, English)
+- Real-time anomaly inference on every graph cycle
+- Clustering (DBSCAN, KMeans, HDBSCAN)
+- Anomaly Detection (Isolation Forest, LOF)
+- MLflow + DagsHub tracking
+
+✅ **Weather Prediction ML Pipeline** 🆕:
+- LSTM Neural Network (30-day sequences)
+- Predicts: Temperature, Rainfall, Flood Risk, Severity
+- 21 weather stations → 25 districts
+- Airflow DAG runs daily at 4 AM
+
+✅ **Currency Prediction ML Pipeline** 🆕:
+- GRU Neural Network (optimized for 8GB RAM)
+- Predicts: USD/LKR exchange rate
+- Features: Technical indicators + CSE + Gold + Oil + USD Index
+- MLflow tracking + Airflow DAG at 4 AM
+
+✅ **Stock Price Prediction ML Pipeline** 🆕:
+- Multi-Architecture: LSTM, GRU, BiLSTM, BiGRU
+- Optuna hyperparameter tuning (30 trials per stock)
+- Per-stock best model selection
+- 10 top CSE stocks (JKH, COMB, DIAL, HNB, etc.)
+
+✅ **RAG-Powered Chatbot** 🆕:
+- Chat-history aware Q&A
+- Queries all ChromaDB intelligence collections
+- Domain filtering (political, economic, weather, social)
+- Floating chat UI in dashboard
+
+✅ **Real-Time Dashboard** with:
+- Live Intelligence Feed
+- Floating AI Chatbox
+- Weather Predictions Tab
+- **Live Satellite/Weather Map** (Windy.com) 🆕
+- **National Flood Threat Score** 🆕
+- **30-Year Historical Climate Analysis** 🆕
+- Operational Risk Radar
+- ML Anomaly Detection Display
+- Market Predictions with Moving Averages
+- Risk & Opportunity Classification
+
+✅ **Weather Data Scraper for ML Training** 🆕:
+- Open-Meteo API (free historical data)
+- NASA FIRMS (fire/heat detection)
+- All 25 districts coverage
+- Year-wise CSV export for model training
+
+---
+
+## 🏗️ System Architecture
+
+```
+┌─────────────────────────────────────────────────────────────────────────┐
+│                       Roger Combined Graph                              │
+│  ┌────────────────────────────────────────────────────────────────┐    │
+│  │                    Graph Initiator (Reset)                      │    │
+│  └────────────────────────────────────────────────────────────────┘    │
+│                              │ Fan-Out                                   │
+│    ┌────────────┬────────────┼────────────┬────────────┬────────────┐  │
+│    ▼            ▼            ▼            ▼            ▼            ▼  │
+│ ┌──────┐   ┌──────┐   ┌──────────┐   ┌──────┐   ┌──────────┐   ┌────┐│
+│ │Social│   │Econ  │   │Political │   │Meteo │   │Intellig- │   │Data││
+│ │Agent │   │Agent │   │Agent     │   │Agent │   │ence Agent│   │Retr││
+│ └──────┘   └──────┘   └──────────┘   └──────┘   └──────────┘   └────┘│
+│    │            │            │            │            │            │  │
+│    └────────────┴────────────┴────────────┴────────────┴────────────┘  │
+│                              │ Fan-In                                   │
+│                    ┌─────────▼──────────┐                              │
+│                    │   Feed Aggregator   │                              │
+│                    │  (Rank & Dedupe)    │                              │
+│                    └─────────┬──────────┘                              │
+│                    ┌─────────▼──────────┐                              │
+│                    │  Vectorization     │ ← NEW                         │
+│                    │  Agent (Optional)  │                              │
+│                    └─────────┬──────────┘                              │
+│                    ┌─────────▼──────────┐                              │
+│                    │  Router (Loop/End) │                              │
+│                    └────────────────────┘                              │
+└─────────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## 📊 Graph Implementations
+
+### 1. Combined Agent Graph (`combinedAgentGraph.py`)
+**The Mother Graph** - Orchestrates all domain agents in parallel.
+
+```mermaid
+graph TD
+    A[Graph Initiator] -->|Fan-Out| B[Social Agent]
+    A -->|Fan-Out| C[Economic Agent]
+    A -->|Fan-Out| D[Political Agent]
+    A -->|Fan-Out| E[Meteorological Agent]
+    A -->|Fan-Out| F[Intelligence Agent]
+    A -->|Fan-Out| G[Data Retrieval Agent]
+    B -->|Fan-In| H[Feed Aggregator]
+    C --> H
+    D --> H
+    E --> H
+    F --> H
+    G --> H
+    H --> I[Data Refresher]
+    I --> J{Router}
+    J -->|Loop| A
+    J -->|End| K[END]
+```
+
+**Key Features:**
+- Custom state reducers for parallel execution
+- Feed deduplication with content hashing
+- Loop control with configurable intervals
+- Real-time WebSocket broadcasting
+
+---
+
+### 2. Political Agent Graph (`politicalAgentGraph.py`)
+**3-Module Hybrid Architecture**
+
+| Module | Description | Sources |
+|--------|-------------|---------|
+| **Official Sources** | Government data | Gazette, Parliament Minutes |
+| **Social Media** | Political sentiment | Twitter, Facebook, Reddit (National + 25 Districts) |
+| **Feed Generation** | LLM Processing | Categorize → Summarize → Format |
+
+```
+┌─────────────────────────────────────────────┐
+│ Module 1: Official     │ Module 2: Social  │
+│ ┌─────────────────┐    │ ┌───────────────┐ │
+│ │ Gazette         │    │ │ National      │ │
+│ │ Parliament      │    │ │ Districts (25)│ │
+│ └─────────────────┘    │ │ World Politics│ │
+│                        │ └───────────────┘ │
+└────────────┬───────────┴────────┬──────────┘
+             │       Fan-In       │
+             ▼                    ▼
+        ┌────────────────────────────┐
+        │ Module 3: Feed Generation  │
+        │ Categorize → LLM → Format  │
+        └────────────────────────────┘
+```
+
+---
+
+### 3. Economic Agent Graph (`economicalAgentGraph.py`)
+**Market Intelligence & Technical Analysis**
+
+| Component | Description |
+|-----------|-------------|
+| **Stock Collector** | CSE market data (200+ stocks) |
+| **Technical Analyzer** | SMA, EMA, RSI, MACD |
+| **Trend Detector** | Bullish/Bearish signals |
+| **Feed Generator** | Risk/Opportunity classification |
+
+**Indicators Calculated:**
+- Simple Moving Average (SMA-20, SMA-50)
+- Exponential Moving Average (EMA-12, EMA-26)
+- Relative Strength Index (RSI)
+- MACD with Signal Line
+
+---
+
+### 4. Meteorological Agent Graph (`meteorologicalAgentGraph.py`)
+**Weather & Disaster Monitoring + FloodWatch Integration** 🆕
+
+```
+┌─────────────────────────────────────┐
+│        DMC Weather Collector        │
+│   (Daily forecasts, 25 districts)   │
+└─────────────┬───────────────────────┘
+              │
+              ▼
+┌─────────────────────────────────────┐
+│        RiverNet Data Collector      │
+│   (River levels, flood monitoring)  │
+└─────────────┬───────────────────────┘
+              │
+              ▼
+┌─────────────────────────────────────┐
+│    FloodWatch Historical Data 🆕    │
+│   (30-year climate analysis)        │
+└─────────────┬───────────────────────┘
+              │
+              ▼
+┌─────────────────────────────────────┐
+│    National Threat Calculator 🆕    │
+│   (Aggregated flood risk 0-100)     │
+└─────────────┬───────────────────────┘
+              │
+              ▼
+┌─────────────────────────────────────┐
+│        Alert Generator              │
+│   (Severity classification)         │
+└─────────────────────────────────────┘
+```
+
+**Alert Levels:**
+- 🟢 Normal: Standard conditions
+- 🟡 Advisory: Watch for developments
+- 🟠 Warning: Take precautions
+- 🔴 Critical: Immediate action required
+
+**FloodWatch Features (New):**
+| Feature | Description |
+|---------|-------------|
+| **Historical Analysis** | 30-year climate data (1995-2025) |
+| **Decadal Comparison** | 3 periods: 1995-2004, 2005-2014, 2015-2025 |
+| **National Threat Score** | 0-100 aggregated risk from rivers + alerts + season |
+| **High-Risk Periods** | May-Jun (SW Monsoon), Oct-Nov (NE Monsoon) |
+
+---
+
+### 5. Social Agent Graph (`socialAgentGraph.py`)
+**Multi-Platform Social Media Monitoring**
+
+| Platform | Data Source | Coverage |
+|----------|-------------|----------|
+| Reddit | PRAW API | r/srilanka, r/colombo |
+| Twitter/X | Nitter scraping | #SriLanka, #Colombo |
+| Facebook | Profile scraping | News pages |
+| Threads | Meta API | Trending topics |
+| BlueSky | AT Protocol | Political discourse |
+
+---
+
+### 6. Intelligence Agent Graph (`intelligenceAgentGraph.py`)
+**Brand & Threat Monitoring + User-Configurable Targets** 🆕
+
+```
+┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
+│ Brand Monitor   │    │ Threat Scanner  │    │ User Targets 🆕 │
+│ - Company news  │    │ - Security      │    │ - Custom keys   │
+│ - Competitor    │    │ - Compliance    │    │ - User profiles │
+│ - Market share  │    │ - Geopolitical  │    │ - Products      │
+└────────┬────────┘    └────────┬────────┘    └────────┬────────┘
+         │                      │                      │
+         └──────────────────────┼──────────────────────┘
+                                ▼
+                   ┌─────────────────────┐
+                   │ Intelligence Report │
+                   │ (Priority ranked)   │
+                   └─────────────────────┘
+```
+
+**User-Configurable Monitoring** 🆕:
+Users can define custom monitoring targets via the frontend settings panel or API:
+
+| Config Type | Description | Example |
+|-------------|-------------|---------|
+| **Keywords** | Custom search terms | "Colombo Port", "BOI Investment" |
+| **Products** | Products to track | "iPhone 15", "Samsung Galaxy" |
+| **Profiles** | Social media accounts | @CompetitorX (Twitter), CompanyY (Facebook) |
+
+**API Endpoints:**
+```bash
+# Get current config
+GET /api/intel/config
+
+# Update full config
+POST /api/intel/config
+Body: {"user_keywords": ["keyword1"], "user_profiles": {"twitter": ["@account"]}, "user_products": ["Product"]}
+
+# Add single target
+POST /api/intel/config/add?target_type=keyword&value=Colombo+Port
+
+# Remove target
+DELETE /api/intel/config/remove?target_type=profile&value=CompetitorX&platform=twitter
+```
+
+**Config File**: `src/config/intel_config.json`
+
+---
+
+### 7. DATA Retrieval Agent Graph (`dataRetrievalAgentGraph.py`)
+**Web Scraping Orchestrator**
+
+**Scraping Tools Available:**
+- `scrape_news_site` - Generic news scraper
+- `scrape_cse_live` - CSE stock prices
+- `scrape_official_data` - Government portals
+- `scrape_social_media` - Multi-platform
+
+**Anti-Bot Features:**
+- Random delays (1-3s)
+- User-agent rotation
+- Retry with exponential backoff
+- Headless browser fallback
+
+---
+
+### 8. Vectorization Agent Graph (`vectorizationAgentGraph.py`) 🆕
+**Multilingual Text-to-Vector Conversion + Anomaly Detection**
+
+```
+┌────��────────────────────────────────────────────┐
+│ Step 1: Language Detection                       │
+│ FastText + Unicode script analysis              │
+│ Supports: English, Sinhala (සිංහල), Tamil (தமிழ்)│
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ Step 2: Text Vectorization                       │
+│ ┌─────────────┬─────────────┬─────────────────┐ │
+│ │ DistilBERT  │ SinhalaBERTo│ Tamil-BERT      │ │
+│ │ (English)   │ (Sinhala)   │ (Tamil)         │ │
+│ └─────────────┴─────────────┴─────────────────┘ │
+│ Output: 768-dim vector per text                 │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ Step 3: Anomaly Detection (Isolation Forest) 🆕 │
+│ - Runs inference on every graph cycle           │
+│ - Outputs anomaly_score (0-1)                   │
+│ - Graceful fallback if model not trained        │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ Step 4: Expert Summary (GroqLLM)                │
+│ - Opportunity identification                    │
+│ - Threat detection                              │
+│ - Sentiment analysis                            │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ Step 5: Format Output                           │
+│ - Includes anomaly insights in domain_insights  │
+│ - Passes results to parent graph                │
+└─────────────────────────────────────────────────┘
+```
+
+---
+
+### 10. Weather Prediction Pipeline (`models/weather-prediction/`) 🆕
+**LSTM-Based Multi-District Weather Forecasting**
+
+```
+┌─────────────────────────────────────────────────┐
+│ Data Source: Tutiempo.net (21 stations)         │
+│ Historical data since 1944                       │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ LSTM Neural Network                              │
+│ ┌─────────────────────────────────────────────┐ │
+│ │ Input: 30-day sequence (11 features)        │ │
+│ │ Layer 1: LSTM(64) + BatchNorm + Dropout     │ │
+│ │ Layer 2: LSTM(32) + BatchNorm + Dropout     │ │
+│ │ Output: Dense(3) → temp_max, temp_min, rain │ │
+│ └─────────────────────────────────────────────┘ │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ Severity Classifier                              │
+│ - Combines temp, rainfall, flood risk           │
+│ - Outputs: normal/advisory/warning/critical     │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ Output: 25 District Predictions                  │
+│ - Temperature (high/low °C)                     │
+│ - Rainfall (mm + probability)                   │
+│ - Flood risk (integrated with RiverNet)        │
+└─────────────────────────────────────────────────┘
+```
+
+**Usage:**
+```bash
+# Run full pipeline
+cd models/weather-prediction
+python main.py --mode full
+
+# Just predictions
+python main.py --mode predict
+
+# Train specific station
+python main.py --mode train --station COLOMBO
+```
+
+---
+
+### 11. Currency Prediction Pipeline (`models/currency-volatility-prediction/`) 🆕
+**GRU-Based USD/LKR Exchange Rate Forecasting**
+
+```
+┌─────────────────────────────────────────────────┐
+│ Data Sources (yfinance)                          │
+│ - USD/LKR exchange rate                         │
+│ - CSE stock index (correlation)                 │
+│ - Gold, Oil prices (global factors)             │
+│ - USD strength index                            │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ Feature Engineering (25+ features)              │
+│ - SMA, EMA, RSI, MACD, Bollinger Bands         │
+│ - Volatility, Momentum indicators              │
+│ - Temporal encoding (day/month cycles)         │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ GRU Neural Network (8GB RAM optimized)          │
+│ ┌─────────────────────────────────────────────┐ │
+│ │ Input: 30-day sequence                      │ │
+│ │ Layer 1: GRU(64) + BatchNorm + Dropout      │ │
+│ │ Layer 2: GRU(32) + BatchNorm + Dropout      │ │
+│ │ Output: Dense(1) → next_day_rate            │ │
+│ └─────────────────────────────────────────────┘ │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ Output: USD/LKR Prediction                       │
+│ - Current & predicted rate                      │
+│ - Change % and direction                        │
+│ - Volatility classification (low/medium/high)  │
+└─────────────────────────────────────────────────┘
+```
+
+**Usage:**
+```bash
+# Run full pipeline
+cd models/currency-volatility-prediction
+python main.py --mode full
+
+# Just predict
+python main.py --mode predict
+
+# Train GRU model
+python main.py --mode train --epochs 100
+```
+
+---
+
+### 12. RAG Chatbot (`src/rag.py`)
+**Chat-History Aware Intelligence Q&A**
+
+```
+┌─────────────────────────────────────────────────┐
+│ MultiCollectionRetriever                         │
+│ - Connects to ALL ChromaDB collections          │
+│ - Roger_feeds, Roger_rag_collection, etc.     │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌─────────────────────────────────────────────────┐
+│ Question Reformulation (History-Aware)          │
+│ - Uses last 3-5 exchanges for context           │
+│ - Reformulates follow-up questions              │
+└─────────────────┬───────────────────────────────┘
+                  │
+                  ▼
+┌───��─────────────────────────────────────────────┐
+│ Groq LLM (llama-3.1-70b-versatile)              │
+│ - RAG with source citations                     │
+│ - Domain-specific analysis                      │
+└─────────────────────────────────────────────────┘
+```
+
+**Usage:**
+```bash
+# CLI mode
+python src/rag.py
+
+# Or via API
+curl -X POST http://localhost:8000/api/rag/chat \
+  -H "Content-Type: application/json" \
+  -d '{"message": "What are the latest political events?"}'
+```
+
 ---
-title: Modelx
-emoji: 🐨
-colorFrom: green
-colorTo: indigo
-sdk: docker
-pinned: false
+
+## 🤖 ML Anomaly Detection Pipeline
+
+Located in `models/anomaly-detection/`
+
+### Pipeline Components
+
+| Component | File | Description |
+|-----------|------|-------------|
+| Data Ingestion | `data_ingestion.py` | SQLite + CSV fetching |
+| Data Validation | `data_validation.py` | Schema-based validation |
+| Data Transformation | `data_transformation.py` | Language detection + BERT vectorization |
+| Model Trainer | `model_trainer.py` | Optuna + MLflow training |
+
+### Clustering Models
+
+| Model | Type | Use Case |
+|-------|------|----------|
+| **DBSCAN** | Density-based | Noise-robust clustering |
+| **KMeans** | Centroid-based | Fast, fixed k clusters |
+| **HDBSCAN** | Hierarchical density | Variable density clusters |
+| **Isolation Forest** | Anomaly detection | Outlier identification |
+| **LOF** | Local outlier | Density-based anomalies |
+
+### Training with Optuna
+
+```python
+# Hyperparameter optimization
+study = optuna.create_study(direction="maximize")
+study.optimize(objective, n_trials=50)
+```
+
+### MLflow Tracking
+
+```python
+mlflow.set_tracking_uri("https://dagshub.com/...")
+mlflow.log_params(best_params)
+mlflow.log_metrics(metrics)
+mlflow.sklearn.log_model(model, "model")
+```
+
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+## 🌧️ Weather Data Scraper (`scripts/scrape_weather_data.py`) 🆕
+
+**Historical weather data collection for ML model training**
+
+### Data Sources
+
+| Source | API Key? | Data Available |
+|--------|----------|----------------|
+| **Open-Meteo** | ❌ Free | Historical weather since 1940 |
+| **NASA FIRMS** | ✅ Optional | Fire/heat spot detection |
+
+### Collected Weather Variables
+
+- `temperature_2m_max/min/mean`
+- `precipitation_sum`, `rain_sum`
+- `precipitation_hours`
+- `wind_speed_10m_max`, `wind_gusts_10m_max`
+- `wind_direction_10m_dominant`
+
+### Usage
+
+```bash
+# Scrape last 30 days (default)
+python scripts/scrape_weather_data.py
+
+# Scrape specific date range
+python scripts/scrape_weather_data.py --start 2020-01-01 --end 2024-12-31
+
+# Scrape multiple years for training dataset
+python scripts/scrape_weather_data.py --years 2020,2021,2022,2023,2024
+
+# Include fire detection data
+python scripts/scrape_weather_data.py --years 2023,2024 --fires
+
+# Hourly resolution (default is daily)
+python scripts/scrape_weather_data.py --start 2024-01-01 --end 2024-01-31 --resolution hourly
+```
+
+### Output
+
+```
+datasets/weather/
+├── weather_daily_2020-01-01_2020-12-31.csv
+├── weather_daily_2021-01-01_2021-12-31.csv
+├── weather_combined.csv  (merged file)
+└── fire_detections_20241207.csv
+```
+
+### Coverage
+
+All 25 Sri Lankan districts with coordinates:
+- Colombo, Gampaha, Kalutara, Kandy, Matale, Nuwara Eliya
+- Galle, Matara, Hambantota, Jaffna, Kilinochchi, Mannar
+- Vavuniya, Mullaitivu, Batticaloa, Ampara, Trincomalee
+- Kurunegala, Puttalam, Anuradhapura, Polonnaruwa
+- Badulla, Monaragala, Ratnapura, Kegalle
+
+---
+
+## 🚀 Quick Start
+
+### Prerequisites
+- Python 3.11+
+- Node.js 18+
+- Docker Desktop (for Airflow)
+- Groq API Key
+
+### Installation
+
+```bash
+# 1. Clone repository
+git clone <your-repo>
+cd Roger-Final
+
+# 2. Create virtual environment
+python -m venv .venv
+source .venv/bin/activate  # Linux/Mac
+.\.venv\Scripts\activate   # Windows
+
+# 3. Install dependencies
+pip install -r requirements.txt
+
+# 4. Configure environment
+cp .env.template .env
+# Edit .env with your API keys
+
+# 5. Download ML models
+python models/anomaly-detection/download_models.py
+
+# 6. Launch all services
+./start_services.sh       # Linux/Mac
+.\start_services.ps1      # Windows
+```
+
+---
+
+## 🔧 API Endpoints
+
+### REST API (FastAPI - Port 8000)
+
+| Endpoint | Method | Description |
+|----------|--------|-------------|
+| `/api/status` | GET | System health |
+| `/api/dashboard` | GET | Risk metrics |
+| `/api/feed` | GET | Latest events |
+| `/api/feeds` | GET | All feeds with pagination |
+| `/api/feeds/by_district` | GET | Feeds filtered by district |
+| `/api/rivernet` | GET | River monitoring data |
+| `/api/predict` | POST | Run anomaly predictions |
+| `/api/anomalies` | GET | Get anomalous feeds |
+| `/api/model/status` | GET | ML model status |
+| `/api/weather/predictions` | GET | All district forecasts |
+| `/api/weather/predictions/{district}` | GET | Single district |
+| `/api/weather/model/status` | GET | Weather model info |
+| `/api/weather/historical` | GET | 30-year climate analysis 🆕 |
+| `/api/weather/threat` | GET | National flood threat score 🆕 |
+| `/api/currency/prediction` | GET | USD/LKR next-day forecast |
+| `/api/currency/history` | GET | Historical rates |
+| `/api/currency/model/status` | GET | Currency model info |
+| `/api/stocks/predictions` | GET | All CSE stock forecasts |
+| `/api/stocks/predictions/{symbol}` | GET | Single stock prediction |
+| `/api/stocks/model/status` | GET | Stock models info |
+| `/api/rag/chat` | POST | Chat with RAG |
+| `/api/rag/stats` | GET | RAG system stats |
+| `/api/rag/clear` | POST | Clear chat history |
+
+### WebSocket
+- `ws://localhost:8000/ws` - Real-time updates
+
+---
+
+## ⏰ Airflow Orchestration
+
+### DAG: `anomaly_detection_training`
+
+```
+start → check_records → data_ingestion → data_validation 
+      → data_transformation → model_training → end
+```
+
+**Triggers:**
+- Batch threshold: 1000 new records
+- Daily fallback: Every 24 hours
+
+**Access Dashboard:**
+```bash
+cd models/anomaly-detection
+astro dev start
+# Open http://localhost:8080
+```
+
+### DAG: `weather_prediction_daily` 🆕
+
+```
+ingest_data → train_models → generate_predictions → publish_predictions
+```
+
+**Schedule:** Daily at 4:00 AM IST
+
+**Tasks:**
+- Scrape Tutiempo.net for latest data
+- Train LSTM models (MLflow tracked)
+- Generate 25-district predictions
+- Save to JSON for API
+
+### DAG: `currency_prediction_daily` 🆕
+
+```
+ingest_data → train_model → generate_prediction → publish_prediction
+```
+
+**Schedule:** Daily at 4:00 AM IST
+
+**Tasks:**
+- Fetch USD/LKR + indicators from yfinance
+- Train GRU model (MLflow tracked)
+- Generate next-day prediction
+- Save to JSON for API
+
+---
+
+## 📁 Project Structure
+
+```
+Roger-Ultimate/
+├── src/
+│   ├── graphs/                    # LangGraph definitions
+│   │   ├── combinedAgentGraph.py  # Mother graph
+│   │   ├── politicalAgentGraph.py
+│   │   ├── economicalAgentGraph.py
+│   │   ├── meteorologicalAgentGraph.py
+│   │   ├── socialAgentGraph.py
+│   │   ├── intelligenceAgentGraph.py
+│   │   ├── dataRetrievalAgentGraph.py
+│   │   └── vectorizationAgentGraph.py  # 5-step with anomaly detection
+│   ├── nodes/                     # Agent implementations
+│   ├── states/                    # State definitions
+│   ├── llms/                      # LLM configurations
+│   ├── storage/                   # ChromaDB, SQLite, Neo4j stores
+│   ├── rag.py                     # RAG chatbot
+│   └── utils/
+│       └── utils.py               # Tools incl. FloodWatch 🆕
+├── scripts/
+│   └── scrape_weather_data.py     # Weather data scraper 🆕
+├── models/
+│   ├── anomaly-detection/         # ML Anomaly Pipeline
+│   │   ├── src/
+│   │   │   ├── components/        # Pipeline stages
+│   │   │   ├── entity/            # Config/Artifact classes
+│   │   │   ├── pipeline/          # Orchestrators
+│   │   │   └── utils/             # Vectorizer, metrics
+│   │   ├── dags/                  # Airflow DAGs
+│   │   ├── data_schema/           # Validation schemas
+│   │   ├── output/                # Trained models
+│   │   └── models_cache/          # Downloaded BERT models
+│   ├── weather-prediction/        # Weather ML Pipeline
+│   │   ├── src/components/        # data_ingestion, model_trainer, predictor
+│   │   ├── dags/                  # weather_prediction_dag.py (4 AM)
+│   │   ├── artifacts/             # Trained LSTM models (.h5)
+│   │   └── main.py                # CLI entry point
+│   └── currency-volatility-prediction/  # Currency ML Pipeline
+│       ├── src/components/        # data_ingestion, model_trainer, predictor
+│       ├── dags/                  # currency_prediction_dag.py (4 AM)
+│       ├── artifacts/             # Trained GRU model
+│       └── main.py                # CLI entry point
+├── datasets/
+│   └── weather/                   # Scraped weather CSVs 🆕
+├── frontend/
+│   └── app/
+│       ├── components/
+│       │   ├── dashboard/
+│       │   │   ├── AnomalyDetection.tsx
+│       │   │   ├── WeatherPredictions.tsx
+│       │   │   ├── CurrencyPrediction.tsx
+│       │   │   ├── NationalThreatCard.tsx     # Flood threat score 🆕
+│       │   │   ├── HistoricalIntel.tsx        # 30-year climate 🆕
+│       │   │   └── ...
+│       │   ├── map/
+│       │   │   ├── MapView.tsx
+│       │   │   └── SatelliteView.tsx          # Windy.com embed 🆕
+│       │   ├── FloatingChatBox.tsx            # RAG chat UI
+│       │   └── ...
+│       └── pages/
+│           └── Index.tsx                       # 7 tabs incl. SATELLITE 🆕
+├── main.py                        # FastAPI backend
+├── start.sh                       # Startup script
+└── requirements.txt
+```
+
+---
+
+## 🔐 Environment Variables
+
+```env
+# LLM
+GROQ_API_KEY=your_groq_key
+
+# Database
+MONGO_DB_URL=mongodb+srv://...
+SQLITE_DB_PATH=./feed_cache.db
+
+# MLflow (DagsHub)
+MLFLOW_TRACKING_URI=https://dagshub.com/...
+MLFLOW_TRACKING_USERNAME=...
+MLFLOW_TRACKING_PASSWORD=...
+
+# Pipeline
+BATCH_THRESHOLD=1000
+```
+
+---
+
+## 🐛 Troubleshooting
+
+### FastText won't install on Windows
+```bash
+# Use pre-built wheel instead
+pip install fasttext-wheel
+```
+
+### BERT models downloading slowly
+```bash
+# Pre-download all models
+python models/anomaly-detection/download_models.py
+```
+
+### Airflow not starting
+```bash
+# Ensure Docker is running
+docker info
+
+# Initialize Astro project
+cd models/anomaly-detection
+astro dev init
+astro dev start
+```
+
+---
+
+## 📄 License
+
+MIT License - Built for Production
+
+---
+
+## 🙏 Acknowledgments
+
+- **Groq** - High-speed LLM inference
+- **LangGraph** - Agent orchestration
+- **HuggingFace** - SinhalaBERTo, Tamil-BERT, DistilBERT
+- **Optuna** - Hyperparameter optimization
+- **MLflow** - Experiment tracking
+- Sri Lankan government for open data sources

app.py

@@ -0,0 +1,361 @@
+"""
+app.py
+Streamlit Dashboard for Roger Platform
+Interactive interface with Infinite Auto-Refresh & Smart Updates
+"""
+import streamlit as st
+import json
+import hashlib
+from datetime import datetime
+import plotly.graph_objects as go
+import time
+
+# Import Roger components
+# NOTE: Ensure these imports work in your local environment
+from src.graphs.RogerGraph import graph
+from src.states.combinedAgentState import CombinedAgentState
+
+# ============================================
+# PAGE CONFIGURATION
+# ============================================
+
+st.set_page_config(
+    page_title="Roger - Situational Awareness Platform",
+    page_icon="🇱🇰",
+    layout="wide",
+    initial_sidebar_state="expanded"
+)
+
+# ============================================
+# CUSTOM CSS
+# ============================================
+
+st.markdown("""
+<style>
+    .main-header { font-size: 2.5rem; color: #FAFAFA; font-weight: bold; text-align: center; margin-bottom: 1rem; }
+    .sub-header { font-size: 1.2rem; color: #aaaaaa; text-align: center; margin-bottom: 2rem; }
+    .stApp { background-color: #0e1117; color: #FAFAFA; }
+    
+    /* Severity Colors for Badges */
+    .severity-critical { color: #ff2b2b; font-weight: 800; }
+    .severity-high { color: #ff4444; font-weight: bold; }
+    .severity-medium { color: #ff9800; font-weight: bold; }
+    .severity-low { color: #4caf50; font-weight: bold; }
+    
+    /* Opportunity Color */
+    .impact-opportunity { color: #00CC96; font-weight: bold; }
+    
+    /* Loading Screen Animation */
+    @keyframes pulse {
+        0% { opacity: 0.5; }
+        50% { opacity: 1; }
+        100% { opacity: 0.5; }
+    }
+    .loading-text {
+        color: #00CC96;
+        font-family: monospace;
+        font-size: 1.5rem;
+        text-align: center;
+        animation: pulse 2s infinite;
+    }
+    
+    /* Card Styling */
+    .event-card {
+        border-left: 4px solid #444;
+        padding: 10px;
+        margin-bottom: 10px;
+        background-color: #262730;
+        border-radius: 4px;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+# ============================================
+# HEADER
+# ============================================
+
+st.markdown('<div class="main-header">🇱🇰 Roger</div>', unsafe_allow_html=True)
+st.markdown('<div class="sub-header">National Situational Awareness Platform</div>', unsafe_allow_html=True)
+
+# ============================================
+# SIDEBAR
+# ============================================
+
+with st.sidebar:
+    st.header("⚙️ Configuration")
+    
+    # Auto-refresh interval
+    refresh_rate = st.slider("Polling Interval (s)", 5, 60, 10)
+    
+    st.divider()
+    
+    # Control Buttons
+    col_start, col_stop = st.columns(2)
+    with col_start:
+        if st.button("▶ START", type="primary", use_container_width=True):
+            st.session_state.monitoring_active = True
+            st.rerun()
+            
+    with col_stop:
+        if st.button("⏹ STOP", use_container_width=True):
+            st.session_state.monitoring_active = False
+            st.rerun()
+
+    st.divider()
+    st.info("""
+    **Team Adagard** Open Innovation Track
+    
+    Roger transforms national-scale noise into actionable business intelligence using autonomous multi-agent architecture.
+    """)
+    st.code("START → Fan-Out → [Agents] → Fan-In → Dashboard → Loop", language="text")
+
+# ============================================
+# SESSION STATE INITIALIZATION
+# ============================================
+
+if "monitoring_active" not in st.session_state:
+    st.session_state.monitoring_active = False
+if "latest_result" not in st.session_state:
+    st.session_state.latest_result = None
+if "last_hash" not in st.session_state:
+    st.session_state.last_hash = ""
+if "execution_count" not in st.session_state:
+    st.session_state.execution_count = 0
+
+# ============================================
+# HELPER FUNCTIONS
+# ============================================
+
+def calculate_hash(data_dict):
+    """Creates a hash of the dashboard data to detect changes."""
+    # We focus on the snapshot and the feed length/content
+    snapshot = data_dict.get("risk_dashboard_snapshot", {})
+    feed = data_dict.get("final_ranked_feed", [])
+    
+    # Create a simplified string representation to hash
+    content_str = f"{snapshot.get('last_updated')}-{len(feed)}-{snapshot.get('opportunity_index')}"
+    return hashlib.md5(content_str.encode()).hexdigest()
+
+def render_dashboard(container, result):
+    """Renders the entire dashboard into the provided container."""
+    snapshot = result.get("risk_dashboard_snapshot", {})
+    feed = result.get("final_ranked_feed", [])
+    
+    # Clear the container to ensure clean re-render
+    container.empty()
+    
+    with container.container():
+        st.divider()
+        
+        # -------------------------------------------------------------------------
+        # 1. METRICS ROW
+        # -------------------------------------------------------------------------
+        st.subheader("📊 Operational Metrics")
+        m1, m2, m3, m4 = st.columns(4)
+        
+        with m1:
+            st.metric("Logistics Friction", f"{snapshot.get('logistics_friction', 0):.3f}", help="Route risk score")
+        with m2:
+            st.metric("Compliance Volatility", f"{snapshot.get('compliance_volatility', 0):.3f}", help="Regulatory risk")
+        with m3:
+            st.metric("Market Instability", f"{snapshot.get('market_instability', 0):.3f}", help="Economic volatility")
+        with m4:
+            opp_val = snapshot.get("opportunity_index", 0.0)
+            st.metric("Opportunity Index", f"{opp_val:.3f}", delta="Growth Signal" if opp_val > 0.5 else "Neutral", delta_color="normal")
+
+        # -------------------------------------------------------------------------
+        # 2. RADAR CHART
+        # -------------------------------------------------------------------------
+        st.divider()
+        c1, c2 = st.columns([1, 1])
+        
+        with c1:
+            st.subheader("📡 Risk vs. Opportunity Radar")
+            
+            categories = ['Logistics', 'Compliance', 'Market', 'Social', 'Weather']
+            risk_vals = [
+                snapshot.get('logistics_friction', 0),
+                snapshot.get('compliance_volatility', 0),
+                snapshot.get('market_instability', 0),
+                0.4, 0.2 
+            ]
+            
+            fig = go.Figure()
+            
+            # Risk Layer
+            fig.add_trace(go.Scatterpolar(
+                r=risk_vals, theta=categories, fill='toself', name='Operational Risk',
+                line_color='#ff4444'
+            ))
+            
+            # Opportunity Layer
+            fig.add_trace(go.Scatterpolar(
+                r=[opp_val] * 5, theta=categories, name='Opportunity Threshold',
+                line_color='#00CC96', opacity=0.7, line=dict(dash='dot')
+            ))
+            
+            fig.update_layout(
+                polar=dict(radialaxis=dict(visible=True, range=[0, 1])),
+                showlegend=True,
+                height=350,
+                margin=dict(l=40, r=40, t=20, b=20),
+                paper_bgcolor='rgba(0,0,0,0)',
+                plot_bgcolor='rgba(0,0,0,0)',
+                font=dict(color="white")
+            )
+            st.plotly_chart(fig, use_container_width=True)
+
+        # -------------------------------------------------------------------------
+        # 3. INTELLIGENCE FEED
+        # -------------------------------------------------------------------------
+        with c2:
+            st.subheader("📰 Intelligence Feed")
+            
+            tab_all, tab_risk, tab_opp = st.tabs(["All Events", "Risks ⚠️", "Opportunities 🚀"])
+            
+            def render_feed(filter_type=None):
+                if not feed:
+                    st.info("No events detected.")
+                    return
+
+                count = 0
+                for event in feed[:15]: 
+                    imp = event.get("impact_type", "risk")
+                    if filter_type and imp != filter_type: continue
+                    
+                    border_color = "#ff4444" if imp == "risk" else "#00CC96"
+                    icon = "⚠️" if imp == "risk" else "🚀"
+                    
+                    summary = event.get("content_summary", "")
+                    domain = event.get("target_agent", "unknown").upper()
+                    score = event.get("confidence_score", 0.0)
+                    
+                    st.markdown(
+                        f"""
+                        <div style="border-left: 4px solid {border_color}; padding: 10px; margin-bottom: 10px; background-color: #262730; border-radius: 4px;">
+                            <div style="font-size: 0.8em; color: #aaa; display: flex; justify-content: space-between;">
+                                <span>{domain}</span>
+                                <span>SCORE: {score:.2f}</span>
+                            </div>
+                            <div style="margin-top: 4px; font-weight: 500;">
+                                {icon} {summary}
+                            </div>
+                        </div>
+                        """, 
+                        unsafe_allow_html=True
+                    )
+                    count += 1
+                
+                if count == 0:
+                    st.caption("No events in this category.")
+
+            with tab_all: render_feed()
+            with tab_risk: render_feed("risk")
+            with tab_opp: render_feed("opportunity")
+            
+        st.divider()
+        st.caption(f"Last Updated: {datetime.utcnow().strftime('%H:%M:%S UTC')} | Run Count: {st.session_state.execution_count}")
+
+# ============================================
+# MAIN EXECUTION LOGIC
+# ============================================
+
+# We use a placeholder that we can overwrite dynamically
+dashboard_placeholder = st.empty()
+
+if st.session_state.monitoring_active:
+    
+    # ---------------------------------------------------------
+    # PHASE 1: INITIAL LOAD (Runs only if we have NO data)
+    # ---------------------------------------------------------
+    if st.session_state.latest_result is None:
+        with dashboard_placeholder.container():
+            st.markdown("<br><br><br>", unsafe_allow_html=True)
+            col1, col2, col3 = st.columns([1, 2, 1])
+            with col2:
+                st.markdown('<div class="loading-text">INITIALIZING NEURAL AGENTS...</div>', unsafe_allow_html=True)
+                st.markdown('<div style="text-align:center; color:#666;">Connecting to Roger Graph Network</div>', unsafe_allow_html=True)
+                progress_bar = st.progress(0)
+                
+                # Visual effect for initialization
+                steps = ["Loading Social Graph...", "Connecting to Market Data...", "Calibrating Risk Radar...", "Starting Fan-Out Sequence..."]
+                for i, step in enumerate(steps):
+                    time.sleep(0.3)
+                    progress_bar.progress((i + 1) * 25)
+
+            # --- PERFORM FIRST FETCH ---
+            try:
+                current_state = CombinedAgentState(max_runs=1, run_count=0)
+                result = graph.invoke(current_state)
+                
+                # Save to session state
+                st.session_state.latest_result = result
+                st.session_state.last_hash = calculate_hash(result)
+                st.session_state.execution_count = 1
+                
+            except Exception as e:
+                st.error(f"Initialization Error: {e}")
+                st.session_state.monitoring_active = False
+                st.stop()
+
+    # ---------------------------------------------------------
+    # PHASE 2: CONTINUOUS MONITORING LOOP
+    # ---------------------------------------------------------
+    # By this point, st.session_state.latest_result is GUARANTEED to have data.
+    
+    while st.session_state.monitoring_active:
+        
+        # 1. RENDER CURRENT DATA
+        # We render whatever is in the state immediately. 
+        # This replaces the loading screen or the previous frame.
+        render_dashboard(dashboard_placeholder, st.session_state.latest_result)
+        
+        # 2. WAIT (The "Background" part)
+        # The UI is now visible to the user while we sleep.
+        time.sleep(refresh_rate)
+        
+        # 3. FETCH NEW DATA
+        try:
+            current_state = CombinedAgentState(max_runs=1, run_count=st.session_state.execution_count)
+            # Run the graph silently in background
+            new_result = graph.invoke(current_state)
+            
+            # 4. CHECK FOR DIFFERENCES
+            new_hash = calculate_hash(new_result)
+            
+            if new_hash != st.session_state.last_hash:
+                # DATA CHANGED: Update state
+                st.session_state.last_hash = new_hash
+                st.session_state.latest_result = new_result
+                st.session_state.execution_count += 1
+                
+                # Optional: Pop a toast
+                st.toast(f"New Intel Detected ({len(new_result.get('final_ranked_feed', []))} events)", icon="⚡")
+                
+                # The loop continues... 
+                # The NEXT iteration (Step 1) will render this new data.
+            else:
+                # NO CHANGE:
+                # We do nothing. The loop continues. 
+                # Step 1 will simply re-render the existing stable data.
+                pass
+                
+        except Exception as e:
+            st.error(f"Monitoring Error: {e}")
+            time.sleep(5) # Wait before retrying on error
+
+else:
+    # ---------------------------------------------------------
+    # IDLE STATE
+    # ---------------------------------------------------------
+    with dashboard_placeholder.container():
+        st.markdown("<br><br>", unsafe_allow_html=True)
+        col1, col2, col3 = st.columns([1, 4, 1])
+        with col2:
+            st.info("System Standby. Click '▶ START' in the sidebar to begin autonomous monitoring.")
+            
+            if st.session_state.latest_result:
+                st.markdown("### Last Session Snapshot:")
+                # We use a temporary container here just for the snapshot
+                with st.container():
+                     render_dashboard(st.empty(), st.session_state.latest_result)

debug_path.py

@@ -0,0 +1,30 @@
+# Debug path calculation
+from pathlib import Path
+
+# Simulate the path from data_transformation.py
+file_path = Path(r"C:\Users\LENOVO\Desktop\Roger-Ultimate\models\anomaly-detection\src\components\data_transformation.py")
+
+print("File:", file_path)
+print()
+print("1 up (.parent):", file_path.parent)  # components
+print("2 up:", file_path.parent.parent)      # src
+print("3 up:", file_path.parent.parent.parent)  # anomaly-detection
+print("4 up:", file_path.parent.parent.parent.parent)  # models
+print("5 up:", file_path.parent.parent.parent.parent.parent)  # Roger-Ultimate (CORRECT!)
+print()
+
+main_project = file_path.parent.parent.parent.parent.parent
+print("Main project root:", main_project)
+print("Should be:", r"C:\Users\LENOVO\Desktop\Roger-Ultimate")
+print("Match:", str(main_project) == r"C:\Users\LENOVO\Desktop\Roger-Ultimate")
+
+# Check if src/graphs exists
+src_graphs = main_project / "src" / "graphs"
+print()
+print("src/graphs path:", src_graphs)
+print("Exists:", src_graphs.exists())
+
+# Check vectorizationAgentGraph
+vec_graph = src_graphs / "vectorizationAgentGraph.py"
+print("vectorizationAgentGraph.py:", vec_graph)
+print("Exists:", vec_graph.exists())

debug_runner.py

@@ -0,0 +1,250 @@
+import os
+import sys
+import json
+from datetime import datetime
+
+# Ensure we can find the 'src' module from the root
+sys.path.append(os.getcwd())
+
+try:
+    from src.utils.utils import (
+        scrape_facebook,
+        scrape_twitter,
+        scrape_local_news,
+        scrape_reddit,
+        scrape_government_gazette,
+        scrape_cse_stock_data,
+        tool_weather_nowcast,
+        tool_dmc_alerts,
+        scrape_linkedin,
+        scrape_instagram,
+    )
+    print("✅ Libraries loaded successfully.\n")
+except ImportError as e:
+    print(f"❌ Error loading libraries: {e}")
+    print("Make sure you are running this from the 'Roger-Final' folder.")
+    sys.exit(1)
+
+def print_separator(char="=", length=70):
+    print(char * length)
+
+def print_header(text):
+    print_separator()
+    print(f"  {text}")
+    print_separator()
+
+def run_test(name, func, description="", **kwargs):
+    print(f"\n🔍 Testing: {name}")
+    if description:
+        print(f"   {description}")
+    print("-" * 70)
+    
+    start_time = datetime.now()
+    
+    try:
+        # Check if it's a LangChain tool (needs .invoke)
+        if hasattr(func, "invoke"):
+            res = func.invoke(kwargs)
+        else:
+            res = func(**kwargs)
+        
+        elapsed = (datetime.now() - start_time).total_seconds()
+        
+        # Try to print pretty JSON
+        try:
+            parsed = json.loads(res)
+            
+            # Custom formatting for better readability
+            if isinstance(parsed, dict):
+                if "results" in parsed:
+                    print(f"\n✅ Success! Found {len(parsed.get('results', []))} results in {elapsed:.2f}s")
+                    print(f"\nSample Results:")
+                    for i, item in enumerate(parsed['results'][:3], 1):
+                        print(f"\n  [{i}] {item.get('title', 'No title')}")
+                        if 'snippet' in item:
+                            snippet = item['snippet'][:150] + "..." if len(item['snippet']) > 150 else item['snippet']
+                            print(f"      {snippet}")
+                        if 'url' in item:
+                            print(f"      🔗 {item['url']}")
+                else:
+                    print(f"\n✅ Success in {elapsed:.2f}s")
+                    print(json.dumps(parsed, indent=2)[:1000])
+            else:
+                print(json.dumps(parsed, indent=2)[:1000])
+                
+        except:
+            print(res[:1000] if len(res) > 1000 else res)
+        
+        print(f"\n⏱️  Completed in {elapsed:.2f} seconds")
+            
+    except Exception as e:
+        print(f"❌ Error: {e}")
+    
+    print("-" * 70)
+
+def check_sessions():
+    """Check which session files exist"""
+    print_header("Session Status Check")
+    
+    session_paths = [
+        "src/utils/.sessions",
+        ".sessions"
+    ]
+    
+    platforms = ["facebook", "twitter", "linkedin", "instagram", "reddit"]
+    found_sessions = []
+    print("session_path: ", session_paths)
+    
+    for path in session_paths:
+        if os.path.exists(path):
+            print(f"\n📁 Checking {path}/")
+            for platform in platforms:
+                session_file = os.path.join(path, f"{platform}_storage_state.json")
+                if os.path.exists(session_file):
+                    size = os.path.getsize(session_file)
+                    print(f"   ✅ {platform:12} ({size:,} bytes)")
+                    found_sessions.append(platform)
+                else:
+                    print(f"   ❌ {platform:12} (not found)")
+    
+    if not found_sessions:
+        print("\n⚠️  No session files found!")
+        print("   Run 'python src/utils/session_manager.py' to create sessions.")
+    
+    print_separator()
+    return found_sessions
+
+def main():
+    print_header("Roger Debug Runner - Comprehensive Tool Testing")
+    
+    print("\n📋 Available Test Categories:")
+    print("  1. Weather & Alerts (No auth required)")
+    print("  2. News & Government (No auth required)")
+    print("  3. Financial Data (No auth required)")
+    print("  4. Social Media (Requires auth)")
+    print("  5. Check Sessions")
+    print("  6. Run All Tests")
+    print("  q. Quit")
+    
+    choice = input("\nSelect category (1-6 or q): ").strip()
+    
+    if choice == "q":
+        return
+    
+    if choice == "5":
+        check_sessions()
+        return
+    
+    # === CATEGORY 1: Weather & Alerts ===
+    if choice in ["1", "6"]:
+        print_header("CATEGORY 1: Weather & Alerts")
+        
+        run_test(
+            "Weather Nowcast",
+            tool_weather_nowcast,
+            "Comprehensive weather data from Department of Meteorology",
+            location="Colombo"
+        )
+        
+        run_test(
+            "DMC Alerts",
+            tool_dmc_alerts,
+            "Disaster Management Centre severe weather alerts"
+        )
+    
+    # === CATEGORY 2: News & Government ===
+    if choice in ["2", "6"]:
+        print_header("CATEGORY 2: News & Government")
+        
+        run_test(
+            "Local News",
+            scrape_local_news,
+            "Scraping Daily Mirror, Daily FT, News First",
+            keywords=["economy", "politics"],
+            max_articles=5
+        )
+        
+        run_test(
+            "Government Gazette",
+            scrape_government_gazette,
+            "Latest gazette notifications",
+            keywords=["regulation"],
+            max_items=3
+        )
+    
+    # === CATEGORY 3: Financial Data ===
+    if choice in ["3", "6"]:
+        print_header("CATEGORY 3: Financial Data")
+        
+        run_test(
+            "CSE Stock Data",
+            scrape_cse_stock_data,
+            "Colombo Stock Exchange - ASPI Index",
+            symbol="ASPI",
+            period="1d"
+        )
+    
+    # === CATEGORY 4: Social Media ===
+    if choice in ["4", "6"]:
+        print_header("CATEGORY 4: Social Media (Authentication Required)")
+        
+        available_sessions = check_sessions()
+        
+        if "facebook" in available_sessions:
+            run_test(
+                "Facebook",
+                scrape_facebook,
+                "Facebook search results",
+                keywords=["Sri Lanka", "Elon musk", "business"],
+                max_items=5
+            )
+        else:
+            print("\n⚠️  Facebook session not found - skipping")
+
+        if "instagram" in available_sessions:
+            run_test(
+                "Instagram",
+                scrape_instagram,
+                "Instagram search results",
+                keywords=["Sri Lanka", "Elon musk", "business"],
+                max_items=5
+            )
+        else:
+            print("\n⚠️  Facebook session not found - skipping")
+
+        if "linkedin" in available_sessions:
+            run_test(
+                "Linkedin",
+                scrape_linkedin,
+                "Linkedin search results",
+                keywords=["Sri Lanka", "Elon musk", "business"],
+                max_items=5
+            )
+        else:
+            print("\n⚠️  Facebook session not found - skipping")
+
+        
+        if "twitter" in available_sessions:
+            run_test(
+                "Twitter",
+                scrape_twitter,
+                "Twitter/X search",
+                query="Sri Lanka economy"
+            )
+        else:
+            print("\n⚠️  Twitter session not found - skipping")
+        
+        # Reddit doesn't need session
+        run_test(
+            "Reddit",
+            scrape_reddit,
+            "Reddit posts (no auth needed)",
+            keywords=["Sri Lanka"],
+            limit=5
+        )
+    
+    print_header("Testing Complete!")
+    print(f"\n⏰ Finished at {datetime.now().strftime('%Y-%m-%d %H:%M:%S')}")
+
+if __name__ == "__main__":
+    main()

docker-compose.prod.yml

@@ -0,0 +1,65 @@
+version: '3.8'
+
+services:
+  # Neo4j Knowledge Graph (Production Feature)
+  neo4j:
+    image: neo4j:5.15-community
+    container_name: modelx-neo4j
+    ports:
+      - "7474:7474"  # Browser UI
+      - "7687:7687"  # Bolt protocol
+    environment:
+      NEO4J_AUTH: neo4j/modelx2024
+      NEO4J_PLUGINS: '["apoc"]'
+      NEO4J_dbms_security_procedures_unrestricted: "apoc.*"
+    volumes:
+      - ./data/neo4j/data:/data
+      - ./data/neo4j/logs:/logs
+    healthcheck:
+      test: ["CMD-SHELL", "cypher-shell -u neo4j -p modelx2024 'RETURN 1' || exit 1"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  # Backend API
+  backend:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8000:8000"
+    environment:
+      - GROQ_API_KEY=${GROQ_API_KEY}
+      - PYTHONUNBUFFERED=1
+      - NEO4J_ENABLED=true
+      - NEO4J_URI=bolt://neo4j:7687
+      - NEO4J_USER=neo4j
+      - NEO4J_PASSWORD=modelx2024
+    volumes:
+      - ./src:/app/src
+      - ./data:/app/data  # Persist storage data
+    command: python main.py
+    depends_on:
+      neo4j:
+        condition: service_healthy
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/api/status"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+
+  # Frontend (Next.js)
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - NEXT_PUBLIC_API_URL=http://backend:8000
+    depends_on:
+      - backend
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+      - /app/. next

docker-compose.yml

@@ -0,0 +1,38 @@
+version: '3.8'
+
+services:
+  # Backend API
+  backend:
+    build:
+      context: .
+      dockerfile: backend/Dockerfile
+    ports:
+      - "8000:8000"
+    environment:
+      - GROQ_API_KEY=${GROQ_API_KEY}
+      - PYTHONUNBUFFERED=1
+    volumes:
+      - ./src:/app/src
+      - ./backend:/app/backend
+    command: python backend/api/main.py
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:8000/api/status"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+
+  # Frontend (Next.js)
+  frontend:
+    build:
+      context: ./frontend
+      dockerfile: Dockerfile
+    ports:
+      - "3000:3000"
+    environment:
+      - NEXT_PUBLIC_API_URL=http://localhost:8000
+    depends_on:
+      - backend
+    volumes:
+      - ./frontend:/app
+      - /app/node_modules
+      - /app/.next

frontend/.gitignore

@@ -0,0 +1,41 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

frontend/app/components/App.tsx

@@ -0,0 +1,19 @@
+'use client'
+
+import { Routes, Route } from "react-router-dom";
+import ClientWrapper from "./ClientWrapper";
+import Index from "../pages/Index";
+import NotFound from "../pages/NotFound";
+import FloatingChatBox from "./FloatingChatBox";
+
+export default function App() {
+  return (
+    <ClientWrapper>
+      <Routes>
+        <Route path="/" element={<Index />} />
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+      <FloatingChatBox />
+    </ClientWrapper>
+  );
+}

frontend/app/components/ClientWrapper.tsx

@@ -0,0 +1,28 @@
+'use client'
+
+import { ReactNode, useState } from 'react';
+import { Toaster } from "./ui/toaster";
+import { Toaster as Sonner } from "./ui/sonner";
+import { TooltipProvider } from "./ui/tooltip";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { BrowserRouter } from "react-router-dom";
+
+interface ClientWrapperProps {
+  children: ReactNode;
+}
+
+export default function ClientWrapper({ children }: ClientWrapperProps) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <TooltipProvider>
+        <Toaster />
+        <Sonner />
+        <BrowserRouter>
+          {children}
+        </BrowserRouter>
+      </TooltipProvider>
+    </QueryClientProvider>
+  );
+}

frontend/app/components/FloatingChatBox.tsx

@@ -0,0 +1,310 @@
+'use client';
+
+import { useState, useRef, useEffect } from 'react';
+import { Send, Brain, Trash2, Radio } from 'lucide-react';
+import { Badge } from './ui/badge';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import './Roger.css';
+
+interface Message {
+    id: string;
+    role: 'user' | 'assistant';
+    content: string;
+    sources?: Array<{
+        domain: string;
+        platform: string;
+        similarity: number;
+    }>;
+    timestamp: Date;
+}
+
+const FloatingChatBox = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [messages, setMessages] = useState<Message[]>([]);
+    const [input, setInput] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [domainFilter, setDomainFilter] = useState<string | null>(null);
+    const scrollContainerRef = useRef<HTMLDivElement | null>(null);
+
+    const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+    // Auto-scroll to bottom
+    useEffect(() => {
+        if (scrollContainerRef.current) {
+            scrollContainerRef.current.scrollTop = scrollContainerRef.current.scrollHeight;
+        }
+    }, [messages, isLoading]);
+
+    // Handle body scroll when chat is open (mobile)
+    useEffect(() => {
+        if (isOpen) {
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = 'unset';
+        }
+        return () => {
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen]);
+
+    const sendMessage = async () => {
+        if (!input.trim() || isLoading) return;
+
+        const userMessage: Message = {
+            id: Date.now().toString(),
+            role: 'user',
+            content: input,
+            timestamp: new Date()
+        };
+
+        setMessages(prev => [...prev, userMessage]);
+        const currentInput = input;
+        setInput('');
+        setIsLoading(true);
+
+        try {
+            const response = await fetch(`${API_BASE}/api/rag/chat`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    message: currentInput,
+                    domain_filter: domainFilter,
+                    use_history: true
+                })
+            });
+
+            const data = await response.json();
+
+            const assistantMessage: Message = {
+                id: (Date.now() + 1).toString(),
+                role: 'assistant',
+                content: data.answer || 'No response received.',
+                sources: data.sources,
+                timestamp: new Date()
+            };
+
+            setMessages(prev => [...prev, assistantMessage]);
+        } catch (error) {
+            const errorMessage: Message = {
+                id: (Date.now() + 1).toString(),
+                role: 'assistant',
+                content: 'Failed to connect to Roger Intelligence. Please ensure the backend is running.',
+                timestamp: new Date()
+            };
+            setMessages(prev => [...prev, errorMessage]);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const clearHistory = async () => {
+        try {
+            await fetch(`${API_BASE}/api/rag/clear`, { method: 'POST' });
+            setMessages([]);
+        } catch (error) {
+            console.error('Failed to clear history:', error);
+        }
+    };
+
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    };
+
+    const toggleChat = () => {
+        setIsOpen(!isOpen);
+    };
+
+    const domains = ['political', 'economic', 'weather', 'social', 'intelligence'];
+
+    return (
+        <div className={`${isOpen ? 'h-[100vh] w-[100vw]' : ''} fixed z-[9999] text-white bottom-0 right-0`}>
+            {/* Backdrop */}
+            <div
+                onClick={() => setIsOpen(false)}
+                className={`absolute top-0 left-0 w-screen h-screen bg-black transition-opacity duration-500 ${isOpen ? 'opacity-40 flex' : 'opacity-0 hidden'}`}
+            />
+
+            {/* Roger Button */}
+            <div
+                onClick={toggleChat}
+                className={`${isOpen ? 'translate-y-[100px]' : 'translate-y-0 delay-300'} select-none transition-transform duration-500 ease-in-out absolute bottom-[15px] right-[15px] sm:bottom-[20px] sm:right-[30px] flex items-center justify-center w-fit bg-[#373435] ring-[0.5px] ring-[#727376] rounded-full cursor-pointer px-[25px] py-[8px] sm:px-[30px] sm:py-[8px] shadow-lg hover:bg-[#4a4a4a] transition-colors`}
+            >
+                <Radio className="w-5 h-5 mr-2 text-green-400" />
+                <p className="select-none text-white text-[18px] sm:text-[18px] font-semibold">Roger</p>
+            </div>
+
+            {/* Chat Container */}
+            <div className={`${isOpen ? 'scale-100 delay-200' : 'scale-0'} roger-scrollbar absolute bottom-0 right-0 sm:bottom-[20px] sm:right-[30px] origin-bottom-right transition-transform duration-500 ease-in-out flex flex-col bg-[#373435] ring-[0.5px] ring-[#727376] h-[100dvh] w-[100vw] sm:h-[600px] sm:w-[420px] sm:rounded-[12px] justify-center overflow-hidden`}>
+
+                {/* Header - with safe area for iPhone notch */}
+                <div className="w-full select-none px-[16px] sm:px-[20px] bg-[#000000] text-white flex flex-row justify-between sm:rounded-t-[12px] py-[14px] sm:py-[18px] pt-[max(14px,env(safe-area-inset-top))] h-fit items-center border-b border-[#373435]">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 rounded-lg bg-green-500/20">
+                            <Brain className="w-5 h-5 text-green-400" />
+                        </div>
+                        <div>
+                            <p className="text-[20px] sm:text-[18px] font-semibold">Roger</p>
+                            <p className="text-[12px] text-gray-400">Intelligence Assistant</p>
+                        </div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <div
+                            onClick={clearHistory}
+                            className="cursor-pointer bg-[#373435] hover:bg-red-500/30 p-2 rounded-lg transition-colors"
+                            title="Clear chat history"
+                        >
+                            <Trash2 className="w-4 h-4 text-gray-400 hover:text-red-400" />
+                        </div>
+                        <div
+                            onClick={toggleChat}
+                            className="cursor-pointer bg-[#373435] hover:bg-[#4a4a4a] active:bg-[#555] px-[14px] py-[8px] sm:px-[12px] sm:py-[6px] rounded-[8px] sm:rounded-[6px] transition-colors touch-manipulation"
+                        >
+                            <p className="text-[14px] sm:text-[13px]">Close</p>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Domain Filter - scrollable on mobile */}
+                <div className="flex gap-1.5 sm:gap-1 px-3 sm:px-4 py-3 bg-[#1a1a1a] border-b border-[#373435] overflow-x-auto sm:flex-wrap hide-scrollbar">
+                    <Badge
+                        className={`cursor-pointer text-xs sm:text-xs whitespace-nowrap px-3 py-1.5 sm:px-2 sm:py-1 transition-colors touch-manipulation ${!domainFilter ? 'bg-green-500 text-white' : 'bg-[#373435] text-gray-300 hover:bg-[#4a4a4a] active:bg-[#555]'}`}
+                        onClick={() => setDomainFilter(null)}
+                    >
+                        All
+                    </Badge>
+                    {domains.map(domain => (
+                        <Badge
+                            key={domain}
+                            className={`cursor-pointer text-xs sm:text-xs whitespace-nowrap px-3 py-1.5 sm:px-2 sm:py-1 capitalize transition-colors touch-manipulation ${domainFilter === domain ? 'bg-green-500 text-white' : 'bg-[#373435] text-gray-300 hover:bg-[#4a4a4a] active:bg-[#555]'}`}
+                            onClick={() => setDomainFilter(domain)}
+                        >
+                            {domain}
+                        </Badge>
+                    ))}
+                </div>
+
+                {/* Messages Container */}
+                {messages.length > 0 ? (
+                    <div
+                        className="flex flex-col flex-1 overflow-y-auto py-4 px-4 bg-[#101010] roger-scrollbar"
+                        ref={scrollContainerRef}
+                        style={{
+                            WebkitOverflowScrolling: 'touch',
+                            overscrollBehavior: 'contain',
+                        }}
+                    >
+                        {/* Today Badge */}
+                        <div className="flex justify-center mt-1 mb-4">
+                            <div className="bg-[#373435] text-[11px] px-3 py-1 rounded-full border border-[#505050]">
+                                <p className="text-gray-400">Today</p>
+                            </div>
+                        </div>
+
+                        {messages.map((msg) => (
+                            <div
+                                className={`flex mb-3 ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}
+                                key={msg.id}
+                            >
+                                <div
+                                    className={`max-w-[85%] rounded-[10px] py-[10px] px-[14px] text-[14px] leading-relaxed ${msg.role === 'user'
+                                        ? 'bg-[#505050] text-white border border-[#606060]'
+                                        : 'bg-white text-black border border-gray-300'
+                                        }`}
+                                >
+                                    {msg.role === 'assistant' ? (
+                                        <div className="roger-markdown">
+                                            <ReactMarkdown remarkPlugins={[remarkGfm]}>
+                                                {msg.content}
+                                            </ReactMarkdown>
+                                        </div>
+                                    ) : (
+                                        <p>{msg.content}</p>
+                                    )}
+
+                                    {/* Sources */}
+                                    {msg.sources && msg.sources.length > 0 && (
+                                        <div className="mt-2 pt-2 border-t border-gray-200">
+                                            <p className="text-[11px] text-gray-500 mb-1">Sources:</p>
+                                            <div className="flex flex-wrap gap-1">
+                                                {msg.sources.slice(0, 3).map((src, i) => (
+                                                    <span
+                                                        key={i}
+                                                        className="text-[10px] bg-gray-100 text-gray-600 px-2 py-0.5 rounded"
+                                                    >
+                                                        {src.domain} ({Math.round(src.similarity * 100)}%)
+                                                    </span>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+
+                        {/* Typing Indicator */}
+                        {isLoading && (
+                            <div className="flex py-2 items-center justify-start mb-3">
+                                <div className="rounded-lg p-3 flex h-[50px] justify-center items-center">
+                                    <span className="roger-loader"></span>
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                ) : (
+                    <div className="flex-1 flex flex-col justify-center items-center bg-[#101010] px-6">
+                        <div className="p-4 rounded-full bg-green-500/10 mb-4">
+                            <Radio className="w-12 h-12 text-green-400 opacity-50" />
+                        </div>
+                        <div className="text-gray-300 text-center max-w-[280px]">
+                            <p className="text-[16px] mb-3 leading-relaxed">
+                                Hello! I'm <strong>Roger</strong>, your intelligence assistant.
+                            </p>
+                            <p className="text-[14px] text-gray-400 leading-relaxed">
+                                Ask me anything about Sri Lanka's political, economic, weather, or social intelligence data.
+                            </p>
+                            <div className="mt-4 space-y-2 text-[12px] text-gray-500">
+                                <p>Try asking:</p>
+                                <p className="italic">"What are the latest political events?"</p>
+                                <p className="italic">"Any weather warnings today?"</p>
+                            </div>
+                        </div>
+                    </div>
+                )}
+
+                {/* Input Area - with safe area for bottom */}
+                <div className="w-full ring-1 ring-[#373435] sm:rounded-b-[12px] py-[10px] sm:py-[12px] px-[12px] pb-[max(10px,env(safe-area-inset-bottom))] bg-[#000000]">
+                    <div className="relative">
+                        <textarea
+                            onKeyDown={handleKeyDown}
+                            onChange={(e) => setInput(e.target.value)}
+                            value={input}
+                            disabled={isLoading}
+                            className="w-full focus:outline-none focus:ring-2 focus:ring-green-500 min-h-[50px] max-h-[100px] leading-[22px] rounded-[10px] bg-white text-black py-[12px] px-[14px] pr-[60px] resize-none text-[15px] placeholder-gray-500 disabled:opacity-50"
+                            placeholder="Ask Roger..."
+                            rows={2}
+                            style={{ fontSize: '16px' }}
+                        />
+                        <div
+                            onClick={sendMessage}
+                            className={`absolute top-[6px] right-[6px] w-[44px] h-[44px] sm:w-[42px] sm:h-[42px] ring-[0.5px] ring-[#727376] cursor-pointer rounded-full flex items-center justify-center transition-all shadow-lg touch-manipulation active:scale-95 ${input.trim() && !isLoading
+                                ? 'bg-green-500 hover:bg-green-600 active:bg-green-700'
+                                : 'bg-[#373435] hover:bg-[#4a4a4a] active:bg-[#555]'
+                                }`}
+                        >
+                            <Send className={`w-5 h-5 ml-[2px] ${input.trim() && !isLoading ? 'text-white' : 'text-gray-400'}`} />
+                        </div>
+                    </div>
+                    <p className="text-[11px] text-gray-500 mt-2 text-center sm:hidden">
+                        Press Enter to send • Shift+Enter for new line
+                    </p>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default FloatingChatBox;

frontend/app/components/LoadingScreen.tsx

@@ -0,0 +1,115 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import { Card } from "./ui/card";
+import { Loader2, Zap } from "lucide-react";
+
+export default function LoadingScreen() {
+  const [progress, setProgress] = useState(0);
+  const [loadingText, setLoadingText] = useState("Initializing Roger Platform...");
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setProgress((prev) => {
+        if (prev >= 95) {
+          return prev;
+        }
+        return prev + 5;
+      });
+    }, 200);
+
+    const textInterval = setInterval(() => {
+      setLoadingText((prev) => {
+        const texts = [
+          "Initializing Roger Platform...",
+          "Connecting to Intelligence Agents...",
+          "Loading Social Media Monitor...",
+          "Loading Political Intelligence...",
+          "Loading Economic Analysis...",
+          "Loading Meteorological Data...",
+          "Establishing WebSocket Connection...",
+          "Syncing with Database...",
+          "Preparing Real-Time Dashboard..."
+        ];
+        const currentIndex = texts.indexOf(prev);
+        return texts[(currentIndex + 1) % texts.length];
+      });
+    }, 1500);
+
+    return () => {
+      clearInterval(interval);
+      clearInterval(textInterval);
+    };
+  }, []);
+
+  return (
+    <div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-background via-background/95 to-primary/5">
+      <Card className="p-12 bg-card/95 backdrop-blur border-border max-w-lg w-full mx-4">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          className="space-y-8"
+        >
+          {/* Logo/Icon */}
+          <div className="flex items-center justify-center gap-3">
+            <motion.div
+              animate={{ rotate: 360 }}
+              transition={{ duration: 2, repeat: Infinity, ease: "linear" }}
+            >
+              <Zap className="w-12 h-12 text-primary" />
+            </motion.div>
+            <h1 className="text-3xl font-bold bg-gradient-to-r from-primary to-primary/60 bg-clip-text text-transparent">
+              ROGER
+            </h1>
+          </div>
+
+          {/* Progress Bar */}
+          <div className="space-y-3">
+            <div className="h-2 bg-muted rounded-full overflow-hidden">
+              <motion.div
+                className="h-full bg-gradient-to-r from-primary via-primary/80 to-primary/60"
+                initial={{ width: 0 }}
+                animate={{ width: `${progress}%` }}
+                transition={{ duration: 0.3 }}
+              />
+            </div>
+            <div className="flex items-center justify-between text-xs text-muted-foreground">
+              <span>{progress}%</span>
+              <span>Loading Intelligence Platform</span>
+            </div>
+          </div>
+
+          {/* Loading Text */}
+          <motion.div
+            key={loadingText}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.5 }}
+            className="text-center"
+          >
+            <div className="flex items-center justify-center gap-2 text-muted-foreground">
+              <Loader2 className="w-4 h-4 animate-spin" />
+              <p className="text-sm font-mono">{loadingText}</p>
+            </div>
+          </motion.div>
+
+          {/* Info */}
+          <div className="text-center space-y-2 pt-4 border-t border-border">
+            <p className="text-xs text-muted-foreground">
+              Real-Time Situational Awareness for Sri Lanka
+            </p>
+            <div className="flex items-center justify-center gap-2 text-xs text-muted-foreground">
+              <span>6 Domain Agents</span>
+              <span>•</span>
+              <span>47+ Data Sources</span>
+              <span>•</span>
+              <span>Live Updates</span>
+            </div>
+          </div>
+        </motion.div>
+      </Card>
+    </div>
+  );
+}

frontend/app/components/NavLink.tsx

@@ -0,0 +1,28 @@
+import { NavLink as RouterNavLink, NavLinkProps } from "react-router-dom";
+import { forwardRef } from "react";
+import { cn } from "../lib/utils";
+
+interface NavLinkCompatProps extends Omit<NavLinkProps, "className"> {
+  className?: string;
+  activeClassName?: string;
+  pendingClassName?: string;
+}
+
+const NavLink = forwardRef<HTMLAnchorElement, NavLinkCompatProps>(
+  ({ className, activeClassName, pendingClassName, to, ...props }, ref) => {
+    return (
+      <RouterNavLink
+        ref={ref}
+        to={to}
+        className={({ isActive, isPending }) =>
+          cn(className, isActive && activeClassName, isPending && pendingClassName)
+        }
+        {...props}
+      />
+    );
+  },
+);
+
+NavLink.displayName = "NavLink";
+
+export { NavLink };

frontend/app/components/Roger.css

@@ -0,0 +1,210 @@
+/* Roger Chatbox Styles */
+
+/* Typing Loader Animation */
+.roger-loader {
+  width: 6px;
+  height: 25px;
+  border-radius: 4px;
+  display: block;
+  background-color: #22c55e;
+  margin: 0 auto;
+  position: relative;
+  animation: rogerAnimloader 0.3s 0.3s linear infinite alternate;
+}
+
+.roger-loader::after,
+.roger-loader::before {
+  content: '';
+  width: 6px;
+  height: 25px;
+  border-radius: 4px;
+  background: #22c55e;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 13px;
+  animation: rogerAnimloader 0.3s 0.45s linear infinite alternate;
+}
+
+.roger-loader::before {
+  left: -13px;
+  animation-delay: 0s;
+}
+
+@keyframes rogerAnimloader {
+  0% {
+    height: 48px;
+  }
+
+  100% {
+    height: 4px;
+  }
+}
+
+/* Custom Scrollbar */
+.roger-scrollbar::-webkit-scrollbar {
+  width: 5px;
+}
+
+.roger-scrollbar::-webkit-scrollbar-track {
+  background: #1a1a1a;
+  border-radius: 4px;
+}
+
+.roger-scrollbar::-webkit-scrollbar-thumb {
+  background: #22c55e;
+  border-radius: 4px;
+}
+
+.roger-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #16a34a;
+}
+
+/* Firefox support */
+.roger-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #22c55e #1a1a1a;
+}
+
+/* Markdown Styling for AI Responses */
+.roger-markdown h1,
+.roger-markdown h2,
+.roger-markdown h3,
+.roger-markdown h4 {
+  font-weight: 600;
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.roger-markdown h1 {
+  font-size: 1.25rem;
+}
+
+.roger-markdown h2 {
+  font-size: 1.125rem;
+}
+
+.roger-markdown h3 {
+  font-size: 1rem;
+}
+
+.roger-markdown p {
+  margin-bottom: 0.5rem;
+}
+
+.roger-markdown ul,
+.roger-markdown ol {
+  margin-left: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.roger-markdown li {
+  margin-bottom: 0.25rem;
+}
+
+.roger-markdown code {
+  background: #f3f4f6;
+  padding: 0.125rem 0.375rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-family: ui-monospace, monospace;
+}
+
+.roger-markdown pre {
+  background: #1f2937;
+  color: #e5e7eb;
+  padding: 0.75rem;
+  border-radius: 6px;
+  overflow-x: auto;
+  margin: 0.5rem 0;
+}
+
+.roger-markdown pre code {
+  background: transparent;
+  color: inherit;
+  padding: 0;
+}
+
+.roger-markdown blockquote {
+  border-left: 3px solid #22c55e;
+  padding-left: 0.75rem;
+  margin: 0.5rem 0;
+  color: #6b7280;
+  font-style: italic;
+}
+
+.roger-markdown table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.5rem 0;
+}
+
+.roger-markdown th,
+.roger-markdown td {
+  border: 1px solid #e5e7eb;
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+}
+
+.roger-markdown th {
+  background: #f9fafb;
+  font-weight: 600;
+}
+
+.roger-markdown a {
+  color: #22c55e;
+  text-decoration: underline;
+}
+
+.roger-markdown a:hover {
+  color: #16a34a;
+}
+
+.roger-markdown strong {
+  font-weight: 600;
+}
+
+.roger-markdown em {
+  font-style: italic;
+}
+
+/* Hide scrollbar for domain filter on mobile */
+.hide-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Mobile Touch Improvements */
+@media (max-width: 640px) {
+
+  /* Prevent text selection on buttons */
+  .touch-manipulation {
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    user-select: none;
+  }
+
+  /* Larger touch targets on mobile */
+  .roger-markdown {
+    font-size: 15px;
+    line-height: 1.6;
+  }
+
+  /* Smoother scrolling on mobile */
+  .roger-scrollbar {
+    -webkit-overflow-scrolling: touch;
+  }
+}
+
+/* Prevent iOS zoom on input focus */
+@supports (-webkit-touch-callout: none) {
+
+  textarea,
+  input {
+    font-size: 16px !important;
+  }
+}

frontend/app/components/dashboard/AnomalyDetection.tsx

@@ -0,0 +1,217 @@
+'use client'
+
+import { Card } from "../ui/card";
+import { Badge } from "../ui/badge";
+import { Separator } from "../ui/separator";
+import { Brain, AlertTriangle, TrendingUp, RefreshCw, Zap, Database } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useState, useEffect } from "react";
+
+interface AnomalyEvent {
+    event_id: string;
+    summary: string;
+    domain: string;
+    severity: string;
+    impact_type: string;
+    anomaly_score: number;
+    is_anomaly: boolean;
+    language?: string;
+    timestamp?: string;
+}
+
+interface ModelStatus {
+    model_loaded: boolean;
+    models_available: string[];
+    vectorizer_loaded: boolean;
+    batch_threshold: number;
+}
+
+const AnomalyDetection = () => {
+    const [anomalies, setAnomalies] = useState<AnomalyEvent[]>([]);
+    const [modelStatus, setModelStatus] = useState<ModelStatus | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchAnomalies = async () => {
+        try {
+            setLoading(true);
+            const [anomalyRes, statusRes] = await Promise.all([
+                fetch('http://localhost:8000/api/anomalies?limit=20'),
+                fetch('http://localhost:8000/api/model/status')
+            ]);
+
+            const anomalyData = await anomalyRes.json();
+            const statusData = await statusRes.json();
+
+            setAnomalies(anomalyData.anomalies || []);
+            setModelStatus(statusData);
+            setError(null);
+        } catch (err) {
+            setError('Failed to fetch anomalies');
+            console.error(err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchAnomalies();
+        // Refresh every 30 seconds
+        const interval = setInterval(fetchAnomalies, 30000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const getScoreColor = (score: number) => {
+        if (score >= 0.8) return "text-destructive";
+        if (score >= 0.6) return "text-warning";
+        if (score >= 0.4) return "text-primary";
+        return "text-muted-foreground";
+    };
+
+    const getScoreBg = (score: number) => {
+        if (score >= 0.8) return "bg-destructive/20";
+        if (score >= 0.6) return "bg-warning/20";
+        if (score >= 0.4) return "bg-primary/20";
+        return "bg-muted/20";
+    };
+
+    return (
+        <Card className="p-6 bg-card border-border">
+            {/* Header */}
+            <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-3">
+                    <div className="p-2 rounded-lg bg-primary/20">
+                        <Brain className="w-6 h-6 text-primary" />
+                    </div>
+                    <div>
+                        <h2 className="text-lg font-bold">ML ANOMALY DETECTION</h2>
+                        <p className="text-xs text-muted-foreground font-mono">
+                            Powered by BERT + Isolation Forest
+                        </p>
+                    </div>
+                </div>
+                <div className="flex items-center gap-2">
+                    <button
+                        onClick={fetchAnomalies}
+                        disabled={loading}
+                        className="p-2 rounded-lg hover:bg-muted/50 transition-colors disabled:opacity-50"
+                    >
+                        <RefreshCw className={`w-4 h-4 ${loading ? 'animate-spin' : ''}`} />
+                    </button>
+                    {modelStatus && (
+                        <Badge className={modelStatus.model_loaded ? "bg-success/20 text-success" : "bg-warning/20 text-warning"}>
+                            {modelStatus.model_loaded ? "Model Active" : "Model Training..."}
+                        </Badge>
+                    )}
+                </div>
+            </div>
+
+            {/* Model Status Bar */}
+            {modelStatus && (
+                <div className="mb-4 p-3 rounded-lg bg-muted/30 flex items-center gap-4 text-xs">
+                    <div className="flex items-center gap-2">
+                        <Database className="w-4 h-4 text-muted-foreground" />
+                        <span>Batch Threshold: <strong>{modelStatus.batch_threshold}</strong> records</span>
+                    </div>
+                    <Separator orientation="vertical" className="h-4" />
+                    <div className="flex items-center gap-2">
+                        <Zap className="w-4 h-4 text-muted-foreground" />
+                        <span>Models: <strong>{modelStatus.models_available?.length || 0}</strong> trained</span>
+                    </div>
+                    {modelStatus.models_available?.length > 0 && (
+                        <>
+                            <Separator orientation="vertical" className="h-4" />
+                            <span className="text-muted-foreground">
+                                {modelStatus.models_available.join(', ')}
+                            </span>
+                        </>
+                    )}
+                </div>
+            )}
+
+            <Separator className="mb-4" />
+
+            {/* Anomalies List */}
+            <div className="space-y-3 max-h-[500px] overflow-y-auto">
+                {loading && anomalies.length === 0 ? (
+                    <div className="text-center py-8">
+                        <RefreshCw className="w-8 h-8 mx-auto animate-spin text-primary mb-3" />
+                        <p className="text-sm text-muted-foreground">Loading anomalies...</p>
+                    </div>
+                ) : error ? (
+                    <div className="text-center py-8">
+                        <AlertTriangle className="w-8 h-8 mx-auto text-destructive mb-3" />
+                        <p className="text-sm text-destructive">{error}</p>
+                    </div>
+                ) : anomalies.length === 0 ? (
+                    <div className="text-center py-8">
+                        <TrendingUp className="w-8 h-8 mx-auto text-success mb-3" />
+                        <p className="text-sm text-muted-foreground">No anomalies detected</p>
+                        <p className="text-xs text-muted-foreground mt-1">System operating normally</p>
+                    </div>
+                ) : (
+                    <AnimatePresence>
+                        {anomalies.map((anomaly, idx) => (
+                            <motion.div
+                                key={anomaly.event_id || idx}
+                                initial={{ opacity: 0, y: 20 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                exit={{ opacity: 0, y: -20 }}
+                                transition={{ delay: idx * 0.05 }}
+                            >
+                                <Card className={`p-4 border-l-4 ${anomaly.is_anomaly ? 'border-l-destructive' : 'border-l-warning'} ${getScoreBg(anomaly.anomaly_score)}`}>
+                                    <div className="flex items-start justify-between gap-4">
+                                        <div className="flex-1 min-w-0">
+                                            <div className="flex items-center gap-2 mb-2 flex-wrap">
+                                                <Badge className="bg-destructive/20 text-destructive text-xs">
+                                                    ⚠️ ANOMALY
+                                                </Badge>
+                                                <Badge className="border border-border text-xs">
+                                                    {anomaly.domain}
+                                                </Badge>
+                                                {anomaly.language && anomaly.language !== 'english' && (
+                                                    <Badge className="bg-info/20 text-info text-xs">
+                                                        {anomaly.language.toUpperCase()}
+                                                    </Badge>
+                                                )}
+                                            </div>
+                                            <p className="text-sm font-medium mb-2 leading-relaxed">
+                                                {anomaly.summary}
+                                            </p>
+                                            <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                                                <span>Severity: <strong className="text-foreground">{anomaly.severity}</strong></span>
+                                                {anomaly.timestamp && (
+                                                    <span className="font-mono">
+                                                        {new Date(anomaly.timestamp).toLocaleString()}
+                                                    </span>
+                                                )}
+                                            </div>
+                                        </div>
+                                        <div className="text-right shrink-0">
+                                            <div className={`text-2xl font-bold ${getScoreColor(anomaly.anomaly_score)}`}>
+                                                {Math.round(anomaly.anomaly_score * 100)}%
+                                            </div>
+                                            <div className="text-xs text-muted-foreground">
+                                                Anomaly Score
+                                            </div>
+                                        </div>
+                                    </div>
+                                </Card>
+                            </motion.div>
+                        ))}
+                    </AnimatePresence>
+                )}
+            </div>
+
+            {/* Footer */}
+            {anomalies.length > 0 && (
+                <div className="mt-4 pt-4 border-t border-border flex items-center justify-between text-xs text-muted-foreground">
+                    <span>Showing {anomalies.length} anomalous events</span>
+                    <span className="font-mono">Auto-refresh: 30s</span>
+                </div>
+            )}
+        </Card>
+    );
+};
+
+export default AnomalyDetection;

frontend/app/components/dashboard/CurrencyPrediction.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+interface CurrencyPrediction {
+    prediction_date: string;
+    generated_at: string;
+    model_version: string;
+    current_rate: number;
+    predicted_rate: number;
+    expected_change: number;
+    expected_change_pct: number;
+    direction: string;
+    direction_emoji: string;
+    volatility_class: string;
+    weekly_trend?: number;
+    monthly_trend?: number;
+    is_fallback?: boolean;
+}
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000";
+
+const VOLATILITY_COLORS = {
+    low: "bg-green-500/20 text-green-400 border-green-500/50",
+    medium: "bg-yellow-500/20 text-yellow-400 border-yellow-500/50",
+    high: "bg-red-500/20 text-red-400 border-red-500/50",
+};
+
+export default function CurrencyPrediction() {
+    const [prediction, setPrediction] = useState<CurrencyPrediction | null>(null);
+    const [history, setHistory] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        fetchPrediction();
+        fetchHistory();
+        // Refresh every hour
+        const interval = setInterval(() => {
+            fetchPrediction();
+            fetchHistory();
+        }, 60 * 60 * 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const fetchPrediction = async () => {
+        try {
+            const res = await fetch(`${API_BASE}/api/currency/prediction`);
+            const data = await res.json();
+
+            if (data.status === "success") {
+                setPrediction(data.prediction);
+                setError(null);
+            } else {
+                setError(data.message || "Failed to load prediction");
+            }
+        } catch (err) {
+            setError("Failed to connect to API");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const fetchHistory = async () => {
+        try {
+            const res = await fetch(`${API_BASE}/api/currency/history?days=7`);
+            const data = await res.json();
+            if (data.status === "success") {
+                setHistory(data.history.slice(-7)); // Last 7 days
+            }
+        } catch (err) {
+            console.error("Failed to fetch history:", err);
+        }
+    };
+
+    if (loading) {
+        return (
+            <div className="bg-slate-800/50 rounded-xl p-6 border border-slate-700/50">
+                <div className="animate-pulse space-y-4">
+                    <div className="h-6 bg-slate-700 rounded w-1/3"></div>
+                    <div className="h-20 bg-slate-700 rounded"></div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="bg-slate-800/50 rounded-xl p-6 border border-slate-700/50">
+            {/* Header */}
+            <div className="flex items-center justify-between mb-6">
+                <div>
+                    <h2 className="text-xl font-bold text-white flex items-center gap-2">
+                        💱 USD/LKR Prediction
+                    </h2>
+                    {prediction && (
+                        <p className="text-sm text-slate-400 mt-1">
+                            Forecast for {prediction.prediction_date}
+                        </p>
+                    )}
+                </div>
+                <button
+                    onClick={fetchPrediction}
+                    className="p-2 rounded-lg bg-slate-700 hover:bg-slate-600 transition-colors"
+                    title="Refresh"
+                >
+                    🔄
+                </button>
+            </div>
+
+            {error ? (
+                <div className="text-center py-8">
+                    <p className="text-red-400 mb-4">{error}</p>
+                    <button
+                        onClick={fetchPrediction}
+                        className="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors"
+                    >
+                        Retry
+                    </button>
+                </div>
+            ) : prediction ? (
+                <>
+                    {/* Main Prediction Card */}
+                    <div
+                        className={`p-6 rounded-xl border mb-6 ${prediction.expected_change_pct < 0
+                                ? "bg-green-500/10 border-green-500/30"
+                                : "bg-red-500/10 border-red-500/30"
+                            }`}
+                    >
+                        <div className="grid grid-cols-3 gap-4 text-center">
+                            <div>
+                                <div className="text-slate-400 text-sm">Current Rate</div>
+                                <div className="text-2xl font-bold text-white">
+                                    {prediction.current_rate.toFixed(2)}
+                                </div>
+                                <div className="text-xs text-slate-500">LKR/USD</div>
+                            </div>
+                            <div className="flex items-center justify-center">
+                                <div className="text-4xl">
+                                    {prediction.direction_emoji}
+                                </div>
+                            </div>
+                            <div>
+                                <div className="text-slate-400 text-sm">Predicted</div>
+                                <div className="text-2xl font-bold text-white">
+                                    {prediction.predicted_rate.toFixed(2)}
+                                </div>
+                                <div className="text-xs text-slate-500">LKR/USD</div>
+                            </div>
+                        </div>
+
+                        <div className="mt-4 pt-4 border-t border-white/10 flex items-center justify-between">
+                            <div>
+                                <span className="text-slate-400">Expected Change: </span>
+                                <span
+                                    className={`font-bold ${prediction.expected_change_pct < 0
+                                            ? "text-green-400"
+                                            : "text-red-400"
+                                        }`}
+                                >
+                                    {prediction.expected_change_pct > 0 ? "+" : ""}
+                                    {prediction.expected_change_pct.toFixed(3)}%
+                                </span>
+                            </div>
+                            <div
+                                className={`px-3 py-1 rounded-full text-sm ${VOLATILITY_COLORS[prediction.volatility_class as keyof typeof VOLATILITY_COLORS] ||
+                                    VOLATILITY_COLORS.low
+                                    }`}
+                            >
+                                {prediction.volatility_class.toUpperCase()} Volatility
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Trend Info */}
+                    <div className="grid grid-cols-2 gap-4 mb-6">
+                        {prediction.weekly_trend !== undefined && (
+                            <div className="p-4 rounded-lg bg-slate-700/50">
+                                <div className="text-slate-400 text-sm">7-Day Trend</div>
+                                <div
+                                    className={`text-lg font-bold ${prediction.weekly_trend < 0 ? "text-green-400" : "text-red-400"
+                                        }`}
+                                >
+                                    {prediction.weekly_trend > 0 ? "+" : ""}
+                                    {prediction.weekly_trend.toFixed(2)}%
+                                </div>
+                            </div>
+                        )}
+                        {prediction.monthly_trend !== undefined && (
+                            <div className="p-4 rounded-lg bg-slate-700/50">
+                                <div className="text-slate-400 text-sm">30-Day Trend</div>
+                                <div
+                                    className={`text-lg font-bold ${prediction.monthly_trend < 0 ? "text-green-400" : "text-red-400"
+                                        }`}
+                                >
+                                    {prediction.monthly_trend > 0 ? "+" : ""}
+                                    {prediction.monthly_trend.toFixed(2)}%
+                                </div>
+                            </div>
+                        )}
+                    </div>
+
+                    {/* Mini Chart (7-day history) */}
+                    {history.length > 0 && (
+                        <div className="p-4 rounded-lg bg-slate-700/30">
+                            <div className="text-sm text-slate-400 mb-2">Last 7 Days</div>
+                            <div className="flex items-end justify-between h-16 gap-1">
+                                {history.map((day, i) => {
+                                    const minRate = Math.min(...history.map((h) => h.close));
+                                    const maxRate = Math.max(...history.map((h) => h.close));
+                                    const range = maxRate - minRate || 1;
+                                    const height = ((day.close - minRate) / range) * 100;
+
+                                    return (
+                                        <div
+                                            key={i}
+                                            className="flex-1 bg-blue-500/50 rounded-t hover:bg-blue-400/50 transition-colors"
+                                            style={{ height: `${Math.max(20, height)}%` }}
+                                            title={`${day.date}: ${day.close.toFixed(2)} LKR`}
+                                        />
+                                    );
+                                })}
+                            </div>
+                        </div>
+                    )}
+
+                    {/* Fallback Warning */}
+                    {prediction.is_fallback && (
+                        <div className="mt-4 p-3 bg-yellow-500/10 border border-yellow-500/30 rounded-lg text-sm text-yellow-400">
+                            ⚠️ Using fallback model. Run training for accurate predictions.
+                        </div>
+                    )}
+
+                    {/* Footer */}
+                    <div className="mt-4 text-xs text-slate-500 text-center">
+                        Generated: {new Date(prediction.generated_at).toLocaleString()} |
+                        Model: {prediction.model_version}
+                    </div>
+                </>
+            ) : null}
+        </div>
+    );
+}

frontend/app/components/dashboard/DashboardOverview.tsx

@@ -0,0 +1,220 @@
+import { Card } from "../ui/card";
+import { AlertTriangle, TrendingUp, Cloud, Zap, Users, Building, Wifi, WifiOff, Waves } from "lucide-react";
+import { Badge } from "../ui/badge";
+import { useRogerData } from "../../hooks/use-roger-data";
+import { motion } from "framer-motion";
+import RiverNetStatus from "./RiverNetStatus";
+
+const DashboardOverview = () => {
+  // Get riverData directly from hook (fetched via /api/rivernet)
+  const { dashboard, events, isConnected, status, riverData } = useRogerData();
+
+  // Safety check: ensure events is always an array
+  const safeEvents = events || [];
+
+  // Sort events by timestamp descending (latest first)
+  const sortedEvents = [...safeEvents].sort((a, b) => {
+    const dateA = new Date(a.timestamp).getTime();
+    const dateB = new Date(b.timestamp).getTime();
+    return dateB - dateA; // Descending order (newest first)
+  });
+
+  // Calculate domain-specific metrics from sorted events
+  const domainCounts = sortedEvents.reduce((acc, event) => {
+    acc[event.domain] = (acc[event.domain] || 0) + 1;
+    return acc;
+  }, {} as Record<string, number>);
+
+  const riskEvents = sortedEvents.filter(e => e.impact_type === 'risk');
+  const opportunityEvents = sortedEvents.filter(e => e.impact_type === 'opportunity');
+  const criticalEvents = sortedEvents.filter(e => e.severity === 'critical' || e.severity === 'high');
+
+  // Count flood-related events
+  const floodEvents = sortedEvents.filter(e =>
+    e.category === 'flood_monitoring' ||
+    e.category === 'flood_alert' ||
+    (e.summary && e.summary.toLowerCase().includes('flood'))
+  );
+
+  const metrics = [
+    {
+      label: "Risk Events",
+      value: riskEvents.length.toString(),
+      change: criticalEvents.length > 0 ? `${criticalEvents.length} critical` : "—",
+      icon: AlertTriangle,
+      status: criticalEvents.length > 3 ? "warning" : "success"
+    },
+    {
+      label: "Opportunities",
+      value: opportunityEvents.length.toString(),
+      change: "+Growth",
+      icon: TrendingUp,
+      status: "success"
+    },
+    {
+      label: "Data Sources",
+      value: Object.keys(domainCounts).length.toString(),
+      change: "Active",
+      icon: Zap,
+      status: "info"
+    },
+    {
+      label: "Flood Alerts",
+      value: floodEvents.length.toString(),
+      change: riverData ? "Monitoring" : "Offline",
+      icon: Waves,
+      status: floodEvents.length > 0 ? "warning" : "success"
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Connection Status Banner */}
+      <Card className={`p-4 ${isConnected ? 'bg-success/10 border-success/50' : 'bg-warning/10 border-warning/50'}`}>
+        <div className="flex items-center gap-3">
+          {isConnected ? (
+            <>
+              <Wifi className="w-5 h-5 text-success" />
+              <div className="flex-1">
+                <h3 className="font-bold text-success">SYSTEM OPERATIONAL</h3>
+                <p className="text-xs text-muted-foreground">Real-time intelligence streaming • Run #{dashboard.total_events}</p>
+              </div>
+            </>
+          ) : (
+            <>
+              <WifiOff className="w-5 h-5 text-warning" />
+              <div className="flex-1">
+                <h3 className="font-bold text-warning">RECONNECTING...</h3>
+                <p className="text-xs text-muted-foreground">Attempting to restore live feed</p>
+              </div>
+            </>
+          )}
+          <Badge className="font-mono text-xs">
+            {new Date(dashboard.last_updated).toLocaleTimeString()}
+          </Badge>
+        </div>
+      </Card>
+
+      {/* Metrics Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        {metrics.map((metric, idx) => {
+          const Icon = metric.icon;
+          return (
+            <motion.div
+              key={idx}
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: idx * 0.1 }}
+            >
+              <Card className="p-4 bg-card border-border hover:border-primary/50 transition-all">
+                <div className="flex items-start justify-between mb-2">
+                  <div className={`p-2 rounded bg-${metric.status}/20`}>
+                    <Icon className={`w-5 h-5 text-${metric.status}`} />
+                  </div>
+                  <span className="text-xs font-mono text-success">{metric.change}</span>
+                </div>
+                <div>
+                  <p className="text-2xl font-bold">{metric.value}</p>
+                  <p className="text-xs text-muted-foreground uppercase tracking-wide">{metric.label}</p>
+                </div>
+              </Card>
+            </motion.div>
+          );
+        })}
+      </div>
+
+      {/* RiverNet Flood Monitoring */}
+      <RiverNetStatus riverData={riverData} compact={false} />
+
+      {/* Live Intelligence Feed - SORTED BY LATEST FIRST */}
+      <Card className="p-6 bg-card border-border">
+        <h3 className="font-bold mb-4 flex items-center gap-2">
+          <Zap className="w-5 h-5 text-primary" />
+          LIVE INTELLIGENCE FEED
+          <span className="text-xs text-muted-foreground ml-2">(Latest First)</span>
+          <Badge className="ml-auto">{sortedEvents.length} Events</Badge>
+        </h3>
+        <div className="space-y-3 max-h-[500px] overflow-y-auto">
+          {sortedEvents.slice(0, 10).map((event, idx) => {
+            const isRisk = event.impact_type === 'risk';
+            const isFlood = event.category === 'flood_monitoring' || event.category === 'flood_alert';
+            const severityColor = {
+              critical: 'destructive',
+              high: 'warning',
+              medium: 'primary',
+              low: 'secondary'
+            }[event.severity] || 'secondary';
+
+            return (
+              <motion.div
+                key={event.event_id}
+                initial={{ opacity: 0, x: -20 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: idx * 0.05 }}
+              >
+                <Card className={`p-4 bg-muted/30 border-l-4 border-l-${severityColor} hover:bg-muted/50 transition-colors`}>
+                  <div className="flex items-start justify-between mb-2">
+                    <div className="flex-1">
+                      <div className="flex items-center gap-2 mb-1 flex-wrap">
+                        <Badge className={`bg-${severityColor} text-${severityColor}-foreground`}>
+                          {event.severity.toUpperCase()}
+                        </Badge>
+                        <Badge className={isRisk ? "bg-destructive/20 text-destructive" : "bg-success/20 text-success"}>
+                          {isRisk ? "⚠️ RISK" : "✨ OPPORTUNITY"}
+                        </Badge>
+                        <Badge className="border border-border">{event.domain}</Badge>
+                        {isFlood && (
+                          <Badge className="bg-info/20 text-info">🌊 FLOOD</Badge>
+                        )}
+                      </div>
+                      <p className="font-semibold text-sm mb-1">{event.summary}</p>
+                      <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                        <span>Confidence: {Math.round(event.confidence * 100)}%</span>
+                        <span>•</span>
+                        <span className="font-mono">{new Date(event.timestamp).toLocaleTimeString()}</span>
+                        <span>•</span>
+                        <span className="font-mono">{new Date(event.timestamp).toLocaleDateString()}</span>
+                      </div>
+                    </div>
+                  </div>
+                </Card>
+              </motion.div>
+            );
+          })}
+          {sortedEvents.length === 0 && (
+            <div className="text-center text-muted-foreground py-8">
+              <AlertTriangle className="w-12 h-12 mx-auto mb-3 opacity-50" />
+              <p className="text-sm font-mono">Initializing intelligence gathering...</p>
+            </div>
+          )}
+        </div>
+      </Card>
+
+      {/* Operational Risk Radar */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card className="p-6 bg-card border-border">
+          <Cloud className="w-8 h-8 text-warning mb-3" />
+          <p className="text-2xl font-bold">{Math.round(dashboard.logistics_friction * 100)}%</p>
+          <p className="text-xs text-muted-foreground uppercase">Logistics Friction</p>
+        </Card>
+        <Card className="p-6 bg-card border-border">
+          <AlertTriangle className="w-8 h-8 text-destructive mb-3" />
+          <p className="text-2xl font-bold">{Math.round(dashboard.compliance_volatility * 100)}%</p>
+          <p className="text-xs text-muted-foreground uppercase">Compliance Volatility</p>
+        </Card>
+        <Card className="p-6 bg-card border-border">
+          <TrendingUp className="w-8 h-8 text-info mb-3" />
+          <p className="text-2xl font-bold">{Math.round(dashboard.market_instability * 100)}%</p>
+          <p className="text-xs text-muted-foreground uppercase">Market Instability</p>
+        </Card>
+        <Card className="p-6 bg-card border-border">
+          <Building className="w-8 h-8 text-success mb-3" />
+          <p className="text-2xl font-bold">{Math.round(dashboard.opportunity_index * 100)}%</p>
+          <p className="text-xs text-muted-foreground uppercase">Opportunity Index</p>
+        </Card>
+      </div>
+    </div>
+  );
+};
+
+export default DashboardOverview;

frontend/app/components/dashboard/HistoricalIntel.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { History, TrendingUp, CloudRain, AlertTriangle, Calendar, Droplets } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+interface HistoricalData {
+    source: string;
+    period: string;
+    fetched_at: string;
+    statistics: {
+        avg_annual_rainfall_mm: number;
+        max_daily_rainfall_mm: number;
+        heavy_rain_days_50mm: number;
+        extreme_rain_days_100mm: number;
+        avg_flood_events_per_year: number;
+    };
+    decadal_analysis: {
+        period: string;
+        avg_rainfall_mm: number;
+        extreme_days: number;
+        max_daily_mm: number;
+        major_flood_events: number;
+    }[];
+    key_findings: string[];
+    high_risk_periods: {
+        months: string;
+        type: string;
+        risk: string;
+    }[];
+}
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export default function HistoricalIntel() {
+    const [data, setData] = useState<HistoricalData | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        const fetchData = async () => {
+            try {
+                const res = await fetch(`${API_BASE}/api/weather/historical`);
+                const result = await res.json();
+                if (result.status === 'success') {
+                    setData(result.data);
+                } else {
+                    setError(result.error || 'Failed to load data');
+                }
+            } catch (err) {
+                setError('Failed to connect to API');
+            } finally {
+                setLoading(false);
+            }
+        };
+        fetchData();
+    }, []);
+
+    if (loading) {
+        return (
+            <Card className="p-6 bg-card border-border">
+                <div className="flex items-center gap-3 mb-4">
+                    <History className="w-6 h-6 text-info animate-pulse" />
+                    <h3 className="font-bold">Loading Historical Data...</h3>
+                </div>
+            </Card>
+        );
+    }
+
+    if (error || !data) {
+        return (
+            <Card className="p-6 bg-card border-border">
+                <div className="flex items-center gap-3 mb-4">
+                    <AlertTriangle className="w-6 h-6 text-warning" />
+                    <h3 className="font-bold">Historical Data Unavailable</h3>
+                </div>
+                <p className="text-sm text-muted-foreground">{error}</p>
+            </Card>
+        );
+    }
+
+    const stats = data.statistics;
+
+    return (
+        <div className="space-y-4">
+            {/* Header */}
+            <Card className="p-4 sm:p-6 bg-card border-border">
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 rounded-lg bg-info/20">
+                            <History className="w-5 h-5 text-info" />
+                        </div>
+                        <div>
+                            <h3 className="font-bold text-base sm:text-lg">Historical Flood Pattern Analysis</h3>
+                            <p className="text-xs text-muted-foreground">{data.period}</p>
+                        </div>
+                    </div>
+                    <Badge className="bg-info/20 text-info w-fit">
+                        <Calendar className="w-3 h-3 mr-1" />
+                        30-Year Data
+                    </Badge>
+                </div>
+
+                {/* Quick Stats */}
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 sm:gap-4">
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.1 }}
+                        className="p-3 sm:p-4 bg-muted/30 rounded-lg"
+                    >
+                        <div className="flex items-center gap-2 mb-1">
+                            <Droplets className="w-4 h-4 text-info" />
+                            <span className="text-xs text-muted-foreground">Avg Annual</span>
+                        </div>
+                        <p className="text-lg sm:text-xl font-bold">{stats.avg_annual_rainfall_mm}</p>
+                        <p className="text-xs text-muted-foreground">mm rainfall</p>
+                    </motion.div>
+
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.2 }}
+                        className="p-3 sm:p-4 bg-muted/30 rounded-lg"
+                    >
+                        <div className="flex items-center gap-2 mb-1">
+                            <CloudRain className="w-4 h-4 text-warning" />
+                            <span className="text-xs text-muted-foreground">Max Daily</span>
+                        </div>
+                        <p className="text-lg sm:text-xl font-bold">{stats.max_daily_rainfall_mm}</p>
+                        <p className="text-xs text-muted-foreground">mm recorded</p>
+                    </motion.div>
+
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.3 }}
+                        className="p-3 sm:p-4 bg-muted/30 rounded-lg"
+                    >
+                        <div className="flex items-center gap-2 mb-1">
+                            <TrendingUp className="w-4 h-4 text-success" />
+                            <span className="text-xs text-muted-foreground">Heavy Days</span>
+                        </div>
+                        <p className="text-lg sm:text-xl font-bold">{stats.heavy_rain_days_50mm}</p>
+                        <p className="text-xs text-muted-foreground">&gt;50mm days</p>
+                    </motion.div>
+
+                    <motion.div
+                        initial={{ opacity: 0, y: 10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        transition={{ delay: 0.4 }}
+                        className="p-3 sm:p-4 bg-destructive/10 rounded-lg"
+                    >
+                        <div className="flex items-center gap-2 mb-1">
+                            <AlertTriangle className="w-4 h-4 text-destructive" />
+                            <span className="text-xs text-muted-foreground">Extreme</span>
+                        </div>
+                        <p className="text-lg sm:text-xl font-bold">{stats.extreme_rain_days_100mm}</p>
+                        <p className="text-xs text-muted-foreground">&gt;100mm days</p>
+                    </motion.div>
+                </div>
+            </Card>
+
+            {/* Climate Change Comparison */}
+            <Card className="p-4 sm:p-6 bg-card border-border">
+                <h4 className="font-bold mb-4 flex items-center gap-2">
+                    <TrendingUp className="w-5 h-5 text-warning" />
+                    How Climate Has Changed
+                </h4>
+
+                <div className="overflow-x-auto">
+                    <table className="w-full text-sm">
+                        <thead>
+                            <tr className="border-b border-border">
+                                <th className="text-left py-2 px-2 text-muted-foreground font-medium">Period</th>
+                                <th className="text-right py-2 px-2 text-muted-foreground font-medium">Avg Rainfall</th>
+                                <th className="text-right py-2 px-2 text-muted-foreground font-medium">Extreme Days</th>
+                                <th className="text-right py-2 px-2 text-muted-foreground font-medium">Max Daily</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {data.decadal_analysis.map((decade, idx) => (
+                                <motion.tr
+                                    key={decade.period}
+                                    initial={{ opacity: 0, x: -10 }}
+                                    animate={{ opacity: 1, x: 0 }}
+                                    transition={{ delay: 0.1 * idx }}
+                                    className="border-b border-border/50 hover:bg-muted/30"
+                                >
+                                    <td className="py-3 px-2 font-medium">{decade.period}</td>
+                                    <td className="py-3 px-2 text-right">{decade.avg_rainfall_mm} mm</td>
+                                    <td className="py-3 px-2 text-right">
+                                        <Badge className={idx === 2 ? 'bg-destructive/20 text-destructive' : 'bg-muted'}>
+                                            {decade.extreme_days}
+                                        </Badge>
+                                    </td>
+                                    <td className="py-3 px-2 text-right">{decade.max_daily_mm} mm</td>
+                                </motion.tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+
+                {/* Key Findings */}
+                <div className="mt-4 p-3 bg-warning/10 border border-warning/30 rounded-lg">
+                    <p className="text-sm font-medium text-warning mb-2">📊 Key Finding</p>
+                    <p className="text-sm">{data.key_findings[0]}</p>
+                </div>
+            </Card>
+
+            {/* High Risk Periods */}
+            <Card className="p-4 sm:p-6 bg-card border-border">
+                <h4 className="font-bold mb-4 flex items-center gap-2">
+                    <Calendar className="w-5 h-5 text-primary" />
+                    High Risk Periods
+                </h4>
+                <div className="flex flex-wrap gap-2">
+                    {data.high_risk_periods.map((period, idx) => (
+                        <Badge
+                            key={idx}
+                            className={`${period.risk === 'high'
+                                    ? 'bg-destructive/20 text-destructive'
+                                    : 'bg-warning/20 text-warning'
+                                }`}
+                        >
+                            {period.months}: {period.type}
+                        </Badge>
+                    ))}
+                </div>
+            </Card>
+        </div>
+    );
+}

frontend/app/components/dashboard/NationalThreatCard.tsx

@@ -0,0 +1,202 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import { Card } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Shield, AlertTriangle, TrendingUp, CloudRain, Waves, Activity } from 'lucide-react';
+import { motion } from 'framer-motion';
+
+interface ThreatData {
+    status: string;
+    national_threat_score: number;
+    threat_level: string;
+    color: string;
+    breakdown: {
+        river_contribution: number;
+        alert_contribution: number;
+        seasonal_contribution: number;
+    };
+    risk_summary: {
+        critical_count: number;
+        high_count: number;
+        medium_count: number;
+        critical_districts: string[];
+        high_risk_districts: string[];
+        medium_risk_districts: string[];
+    };
+    calculated_at: string;
+}
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8000';
+
+export default function NationalThreatCard() {
+    const [data, setData] = useState<ThreatData | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    const fetchData = async () => {
+        try {
+            const res = await fetch(`${API_BASE}/api/weather/threat`);
+            const result = await res.json();
+            if (result.status === 'success') {
+                setData(result);
+                setError(null);
+            } else {
+                setError(result.error || 'Failed to load data');
+            }
+        } catch (err) {
+            setError('Failed to connect to API');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchData();
+        // Refresh every 5 minutes
+        const interval = setInterval(fetchData, 5 * 60 * 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const getThreatConfig = (level: string) => {
+        switch (level) {
+            case 'CRITICAL':
+                return {
+                    bgColor: 'bg-destructive/20',
+                    borderColor: 'border-destructive',
+                    textColor: 'text-destructive',
+                    icon: AlertTriangle,
+                    gradient: 'from-destructive to-red-700',
+                    pulse: true
+                };
+            case 'HIGH':
+                return {
+                    bgColor: 'bg-warning/20',
+                    borderColor: 'border-warning',
+                    textColor: 'text-warning',
+                    icon: TrendingUp,
+                    gradient: 'from-warning to-orange-600',
+                    pulse: true
+                };
+            case 'MODERATE':
+                return {
+                    bgColor: 'bg-yellow-500/20',
+                    borderColor: 'border-yellow-500',
+                    textColor: 'text-yellow-500',
+                    icon: Activity,
+                    gradient: 'from-yellow-500 to-amber-600',
+                    pulse: false
+                };
+            default:
+                return {
+                    bgColor: 'bg-success/20',
+                    borderColor: 'border-success',
+                    textColor: 'text-success',
+                    icon: Shield,
+                    gradient: 'from-success to-green-600',
+                    pulse: false
+                };
+        }
+    };
+
+    if (loading) {
+        return (
+            <Card className="p-6 bg-card border-border">
+                <div className="flex items-center gap-3">
+                    <Shield className="w-6 h-6 text-muted-foreground animate-pulse" />
+                    <span className="text-muted-foreground">Calculating threat level...</span>
+                </div>
+            </Card>
+        );
+    }
+
+    if (error || !data) {
+        return (
+            <Card className="p-6 bg-card border-border">
+                <div className="flex items-center gap-3">
+                    <AlertTriangle className="w-6 h-6 text-warning" />
+                    <span className="text-warning">Threat assessment unavailable</span>
+                </div>
+            </Card>
+        );
+    }
+
+    const config = getThreatConfig(data.threat_level);
+    const ThreatIcon = config.icon;
+    const { breakdown, risk_summary } = data;
+
+    return (
+        <Card className={`p-4 sm:p-6 ${config.bgColor} border-l-4 ${config.borderColor}`}>
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                {/* Left: Threat Score */}
+                <div className="flex items-center gap-4">
+                    <motion.div
+                        initial={{ scale: 0.8, opacity: 0 }}
+                        animate={{ scale: 1, opacity: 1 }}
+                        className={`relative p-3 sm:p-4 rounded-full bg-gradient-to-br ${config.gradient}`}
+                    >
+                        <ThreatIcon className="w-6 h-6 sm:w-8 sm:h-8 text-white" />
+                        {config.pulse && (
+                            <span className="absolute inset-0 rounded-full animate-ping bg-current opacity-20" />
+                        )}
+                    </motion.div>
+
+                    <div>
+                        <p className="text-xs sm:text-sm text-muted-foreground uppercase tracking-wide">National Threat</p>
+                        <div className="flex items-baseline gap-2">
+                            <motion.span
+                                initial={{ opacity: 0, y: 10 }}
+                                animate={{ opacity: 1, y: 0 }}
+                                className="text-3xl sm:text-4xl font-bold"
+                            >
+                                {data.national_threat_score}
+                            </motion.span>
+                            <span className="text-lg text-muted-foreground">/100</span>
+                        </div>
+                        <Badge className={`${config.bgColor} ${config.textColor} mt-1`}>
+                            {data.threat_level}
+                        </Badge>
+                    </div>
+                </div>
+
+                {/* Right: Breakdown */}
+                <div className="grid grid-cols-3 gap-2 sm:gap-4 text-center">
+                    <div className="p-2 sm:p-3 bg-background/50 rounded-lg">
+                        <Waves className="w-4 h-4 mx-auto mb-1 text-info" />
+                        <p className="text-xs text-muted-foreground">Rivers</p>
+                        <p className="font-bold">{breakdown.river_contribution}</p>
+                    </div>
+                    <div className="p-2 sm:p-3 bg-background/50 rounded-lg">
+                        <AlertTriangle className="w-4 h-4 mx-auto mb-1 text-warning" />
+                        <p className="text-xs text-muted-foreground">Alerts</p>
+                        <p className="font-bold">{breakdown.alert_contribution}</p>
+                    </div>
+                    <div className="p-2 sm:p-3 bg-background/50 rounded-lg">
+                        <CloudRain className="w-4 h-4 mx-auto mb-1 text-primary" />
+                        <p className="text-xs text-muted-foreground">Season</p>
+                        <p className="font-bold">{breakdown.seasonal_contribution}</p>
+                    </div>
+                </div>
+            </div>
+
+            {/* Risk Districts */}
+            {(risk_summary.critical_count > 0 || risk_summary.high_count > 0) && (
+                <div className="mt-4 pt-4 border-t border-border/50">
+                    <p className="text-xs text-muted-foreground mb-2">At-Risk Districts</p>
+                    <div className="flex flex-wrap gap-2">
+                        {risk_summary.critical_districts.map((d) => (
+                            <Badge key={d} className="bg-destructive/20 text-destructive text-xs">
+                                {d}
+                            </Badge>
+                        ))}
+                        {risk_summary.high_risk_districts.map((d) => (
+                            <Badge key={d} className="bg-warning/20 text-warning text-xs">
+                                {d}
+                            </Badge>
+                        ))}
+                    </div>
+                </div>
+            )}
+        </Card>
+    );
+}

frontend/app/components/dashboard/RiverNetStatus.tsx

@@ -0,0 +1,235 @@
+"use client";
+
+import { Card } from "../ui/card";
+import { Badge } from "../ui/badge";
+import { Waves, AlertTriangle, CheckCircle, TrendingUp, Clock } from "lucide-react";
+import { motion } from "framer-motion";
+
+interface RiverData {
+    location_key: string;
+    name: string;
+    region: string;
+    status: "danger" | "warning" | "rising" | "normal" | "unknown" | "error";
+    water_level?: {
+        value: number;
+        unit: string;
+    };
+    url?: string;
+    last_updated?: string;
+}
+
+interface RiverNetData {
+    rivers: RiverData[];
+    alerts: Array<{
+        text: string;
+        severity: string;
+        source: string;
+    }>;
+    summary: {
+        total_monitored: number;
+        overall_status: string;
+        has_alerts: boolean;
+        status_breakdown?: Record<string, number>;
+    };
+    fetched_at: string;
+    source: string;
+}
+
+interface RiverNetStatusProps {
+    riverData?: RiverNetData | null;
+    compact?: boolean;
+}
+
+const statusConfig = {
+    danger: {
+        color: "destructive",
+        bgColor: "bg-destructive/20",
+        borderColor: "border-destructive",
+        textColor: "text-destructive",
+        icon: AlertTriangle,
+        emoji: "🔴",
+        label: "DANGER"
+    },
+    warning: {
+        color: "warning",
+        bgColor: "bg-warning/20",
+        borderColor: "border-warning",
+        textColor: "text-warning",
+        icon: AlertTriangle,
+        emoji: "🟠",
+        label: "WARNING"
+    },
+    rising: {
+        color: "primary",
+        bgColor: "bg-primary/20",
+        borderColor: "border-primary",
+        textColor: "text-primary",
+        icon: TrendingUp,
+        emoji: "🟡",
+        label: "RISING"
+    },
+    normal: {
+        color: "success",
+        bgColor: "bg-success/20",
+        borderColor: "border-success",
+        textColor: "text-success",
+        icon: CheckCircle,
+        emoji: "🟢",
+        label: "NORMAL"
+    },
+    unknown: {
+        color: "muted",
+        bgColor: "bg-muted/20",
+        borderColor: "border-muted",
+        textColor: "text-muted-foreground",
+        icon: Clock,
+        emoji: "⚪",
+        label: "UNKNOWN"
+    },
+    error: {
+        color: "destructive",
+        bgColor: "bg-destructive/10",
+        borderColor: "border-destructive/50",
+        textColor: "text-destructive/70",
+        icon: AlertTriangle,
+        emoji: "❌",
+        label: "ERROR"
+    }
+};
+
+const RiverNetStatus = ({ riverData, compact = false }: RiverNetStatusProps) => {
+    if (!riverData || !riverData.rivers || riverData.rivers.length === 0) {
+        return (
+            <Card className="p-6 bg-card border-border">
+                <div className="flex items-center gap-3 mb-4">
+                    <Waves className="w-6 h-6 text-info" />
+                    <h3 className="font-bold">FLOOD MONITORING</h3>
+                    <Badge className="ml-auto bg-muted">Offline</Badge>
+                </div>
+                <div className="text-center text-muted-foreground py-4">
+                    <Waves className="w-10 h-10 mx-auto mb-2 opacity-50" />
+                    <p className="text-sm">River monitoring data unavailable</p>
+                    <p className="text-xs mt-1">Check rivernet.lk for live data</p>
+                </div>
+            </Card>
+        );
+    }
+
+    const { rivers, summary, alerts, fetched_at } = riverData;
+    const overallStatus = summary?.overall_status || "normal";
+    const statusInfo = statusConfig[overallStatus as keyof typeof statusConfig] || statusConfig.unknown;
+    const StatusIcon = statusInfo.icon;
+
+    // Count rivers by status
+    const statusCounts = summary?.status_breakdown || {};
+
+    return (
+        <Card className={`p-6 bg-card border-border ${summary?.has_alerts ? 'border-warning/50' : ''}`}>
+            {/* Header */}
+            <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-3">
+                    <div className={`p-2 rounded-lg ${statusInfo.bgColor}`}>
+                        <Waves className={`w-6 h-6 ${statusInfo.textColor}`} />
+                    </div>
+                    <div>
+                        <h3 className="font-bold flex items-center gap-2">
+                            🌊 FLOOD MONITORING
+                            {summary?.has_alerts && (
+                                <Badge className="bg-warning text-warning-foreground">ALERTS</Badge>
+                            )}
+                        </h3>
+                        <p className="text-xs text-muted-foreground">
+                            RiverNet.lk • {rivers.length} rivers monitored
+                        </p>
+                    </div>
+                </div>
+                <div className="text-right">
+                    <Badge className={`${statusInfo.bgColor} ${statusInfo.textColor}`}>
+                        {statusInfo.emoji} {statusInfo.label}
+                    </Badge>
+                    <p className="text-xs text-muted-foreground mt-1">
+                        {new Date(fetched_at).toLocaleTimeString()}
+                    </p>
+                </div>
+            </div>
+
+            {/* Status Summary */}
+            <div className="grid grid-cols-3 md:grid-cols-6 gap-2 mb-4">
+                {Object.entries(statusCounts).map(([status, count]) => {
+                    if (count === 0) return null;
+                    const config = statusConfig[status as keyof typeof statusConfig] || statusConfig.unknown;
+                    return (
+                        <div key={status} className={`p-2 rounded text-center ${config.bgColor}`}>
+                            <p className={`text-lg font-bold ${config.textColor}`}>{count}</p>
+                            <p className="text-xs text-muted-foreground uppercase">{status}</p>
+                        </div>
+                    );
+                })}
+            </div>
+
+            {/* Alerts Section */}
+            {alerts && alerts.length > 0 && (
+                <div className="mb-4 p-3 rounded-lg bg-warning/10 border border-warning/30">
+                    <p className="text-sm font-semibold text-warning mb-2">⚠️ Active Alerts</p>
+                    {alerts.slice(0, 2).map((alert, idx) => (
+                        <p key={idx} className="text-xs text-warning/80 mb-1">
+                            • {alert.text.slice(0, 100)}...
+                        </p>
+                    ))}
+                </div>
+            )}
+
+            {/* Rivers Grid */}
+            <div className={`grid ${compact ? 'grid-cols-2' : 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3'} gap-3`}>
+                {rivers.map((river, idx) => {
+                    const config = statusConfig[river.status] || statusConfig.normal;
+                    const RiverStatusIcon = config.icon;
+
+                    return (
+                        <motion.div
+                            key={river.location_key}
+                            initial={{ opacity: 0, y: 10 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            transition={{ delay: idx * 0.05 }}
+                        >
+                            <Card className={`p-3 ${config.bgColor} border-l-4 ${config.borderColor} hover:shadow-md transition-all cursor-pointer`}>
+                                <div className="flex items-start justify-between">
+                                    <div className="flex-1">
+                                        <div className="flex items-center gap-2 mb-1">
+                                            <RiverStatusIcon className={`w-4 h-4 ${config.textColor}`} />
+                                            <span className="font-semibold text-sm">{river.name}</span>
+                                        </div>
+                                        <p className="text-xs text-muted-foreground">{river.region}</p>
+                                        {river.water_level && (
+                                            <p className={`text-xs font-mono ${config.textColor} mt-1`}>
+                                                Level: {river.water_level.value}{river.water_level.unit}
+                                            </p>
+                                        )}
+                                    </div>
+                                    <Badge className={`${config.bgColor} ${config.textColor} text-xs`}>
+                                        {config.emoji} {river.status.toUpperCase()}
+                                    </Badge>
+                                </div>
+                            </Card>
+                        </motion.div>
+                    );
+                })}
+            </div>
+
+            {/* Footer Link */}
+            <div className="mt-4 pt-3 border-t border-border flex items-center justify-between">
+                <p className="text-xs text-muted-foreground">
+                    Source: <a href="https://rivernet.lk" target="_blank" rel="noopener noreferrer"
+                        className="text-primary hover:underline">rivernet.lk</a>
+                </p>
+                {rivers.length > (compact ? 4 : 6) && (
+                    <Badge variant="outline" className="text-xs">
+                        +{rivers.length - (compact ? 4 : 6)} more rivers
+                    </Badge>
+                )}
+            </div>
+        </Card>
+    );
+};
+
+export default RiverNetStatus;

frontend/app/components/dashboard/StockPredictions.tsx

@@ -0,0 +1,189 @@
+import { Card } from "../ui/card";
+import { Badge } from "../ui/badge";
+import { TrendingUp, TrendingDown, Activity } from "lucide-react";
+import { motion } from "framer-motion";
+import { useRogerData } from "../../hooks/use-roger-data";
+
+const StockPredictions = () => {
+  const { events } = useRogerData();
+
+  // Filter for economic/market events
+  const marketEvents = events.filter(e => 
+    e.domain === 'economical' || e.domain === 'market'
+  );
+
+  // Extract market insights
+  const marketInsights = marketEvents.map(event => {
+    const isBullish = event.impact_type === 'opportunity' || 
+                      event.summary.toLowerCase().includes('bullish') ||
+                      event.summary.toLowerCase().includes('growth');
+    
+    const isBearish = event.summary.toLowerCase().includes('bearish') ||
+                      event.summary.toLowerCase().includes('contraction');
+
+    return {
+      symbol: "ASPI",
+      title: event.summary,
+      sentiment: isBullish ? 'bullish' : isBearish ? 'bearish' : 'neutral',
+      confidence: event.confidence,
+      severity: event.severity,
+      timestamp: event.timestamp
+    };
+  });
+
+  // Mock stock data structure (in production, parse from actual events)
+  const stocks = [
+    {
+      symbol: "JKH.N0000",
+      name: "John Keells Holdings",
+      current: 145.50,
+      predicted: 148.20,
+      change: 2.70,
+      changePercent: 1.86,
+      volume: "1.2M",
+      sentiment: marketInsights[0]?.sentiment || 'neutral'
+    },
+    {
+      symbol: "COMB.N0000",
+      name: "Commercial Bank",
+      current: 89.75,
+      predicted: 87.30,
+      change: -2.45,
+      changePercent: -2.73,
+      volume: "856K",
+      sentiment: marketInsights[1]?.sentiment || 'neutral'
+    },
+    {
+      symbol: "HNB.N0000",
+      name: "Hatton National Bank",
+      current: 178.20,
+      predicted: 182.50,
+      change: 4.30,
+      changePercent: 2.41,
+      volume: "632K",
+      sentiment: 'bullish'
+    },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <Card className="p-6 bg-card border-border">
+        <div className="flex items-center justify-between mb-4">
+          <div className="flex items-center gap-2">
+            <Activity className="w-5 h-5 text-success" />
+            <h2 className="text-lg font-bold">MARKET INTELLIGENCE - CSE</h2>
+          </div>
+          <Badge className="font-mono text-xs border">
+            LIVE AI ANALYSIS
+          </Badge>
+        </div>
+
+        {/* AI-Generated Market Insights */}
+        <div className="mb-6 space-y-2">
+          <h3 className="text-sm font-semibold text-muted-foreground uppercase">AI Market Analysis</h3>
+          {marketInsights.length > 0 ? (
+            marketInsights.slice(0, 3).map((insight, idx) => (
+              <motion.div
+                key={idx}
+                initial={{ opacity: 0, x: -10 }}
+                animate={{ opacity: 1, x: 0 }}
+                transition={{ delay: idx * 0.1 }}
+                className={`p-3 rounded border-l-4 ${
+                  insight.sentiment === 'bullish' ? 'border-l-success bg-success/10' :
+                  insight.sentiment === 'bearish' ? 'border-l-destructive bg-destructive/10' :
+                  'border-l-muted bg-muted/30'
+                }`}
+              >
+                <div className="flex items-center gap-2 mb-1">
+                  {insight.sentiment === 'bullish' && <TrendingUp className="w-4 h-4 text-success" />}
+                  {insight.sentiment === 'bearish' && <TrendingDown className="w-4 h-4 text-destructive" />}
+                  <Badge className="text-xs">{insight.sentiment.toUpperCase()}</Badge>
+                  <span className="text-xs text-muted-foreground ml-auto">
+                    {Math.round(insight.confidence * 100)}% confidence
+                  </span>
+                </div>
+                <p className="text-sm">{insight.title}</p>
+              </motion.div>
+            ))
+          ) : (
+            <p className="text-sm text-muted-foreground">Waiting for market data...</p>
+          )}
+        </div>
+
+        {/* Stock Grid */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
+          {stocks.map((stock, idx) => {
+            const isPositive = stock.change > 0;
+            
+            return (
+              <motion.div
+                key={stock.symbol}
+                initial={{ opacity: 0, y: 20 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: idx * 0.1 }}
+              >
+                <Card className="p-4 bg-muted/30 border-border hover:border-primary/50 transition-all">
+                  <div className="flex items-start justify-between mb-2">
+                    <div>
+                      <h3 className="font-bold text-sm">{stock.symbol}</h3>
+                      <p className="text-xs text-muted-foreground">{stock.name}</p>
+                    </div>
+                    <Badge 
+                      className={`font-mono text-xs ${isPositive ? "bg-primary text-primary-foreground" : "bg-destructive text-destructive-foreground"}`}
+                    >
+                      {isPositive ? <TrendingUp className="w-3 h-3 mr-1" /> : <TrendingDown className="w-3 h-3 mr-1" />}
+                      {isPositive ? "+" : ""}{stock.changePercent.toFixed(2)}%
+                    </Badge>
+                  </div>
+
+                  <div className="grid grid-cols-2 gap-3 mt-3">
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">Current</p>
+                      <p className="text-lg font-bold font-mono">
+                        LKR {stock.current.toFixed(2)}
+                      </p>
+                    </div>
+                    <div>
+                      <p className="text-xs text-muted-foreground mb-1">AI Forecast</p>
+                      <p className={`text-lg font-bold font-mono ${isPositive ? "text-success" : "text-destructive"}`}>
+                        LKR {stock.predicted.toFixed(2)}
+                      </p>
+                    </div>
+                  </div>
+
+                  <div className="flex items-center justify-between mt-3 pt-3 border-t border-border">
+                    <span className="text-xs text-muted-foreground">
+                      Vol: {stock.volume}
+                    </span>
+                    <span className={`text-xs font-bold font-mono ${isPositive ? "text-success" : "text-destructive"}`}>
+                      {isPositive ? "+" : ""}{stock.change.toFixed(2)}
+                    </span>
+                  </div>
+
+                  {/* AI Sentiment Badge */}
+                  <div className="mt-2">
+                    <Badge className={`text-xs ${
+                      stock.sentiment === 'bullish' ? 'bg-success/20 text-success' :
+                      stock.sentiment === 'bearish' ? 'bg-destructive/20 text-destructive' :
+                      'bg-muted'
+                    }`}>
+                      AI: {stock.sentiment.toUpperCase()}
+                    </Badge>
+                  </div>
+                </Card>
+              </motion.div>
+            );
+          })}
+        </div>
+
+        <div className="mt-4 p-3 bg-muted/20 rounded border border-border">
+          <p className="text-xs text-muted-foreground font-mono">
+            <span className="text-warning font-bold">⚠ DISCLAIMER:</span> AI predictions based on real-time data analysis. Not financial advice.
+          </p>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default StockPredictions;

frontend/app/components/dashboard/WeatherPredictions.tsx

@@ -0,0 +1,238 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+interface DistrictPrediction {
+    temperature: {
+        high_c: number;
+        low_c: number;
+    };
+    rainfall: {
+        amount_mm: number;
+        probability: number;
+    };
+    flood_risk: number;
+    humidity_pct: number;
+    severity: "normal" | "advisory" | "warning" | "critical";
+    station_used: string;
+    is_fallback?: boolean;
+}
+
+interface WeatherPredictions {
+    status: string;
+    prediction_date: string;
+    generated_at: string;
+    districts: Record<string, DistrictPrediction>;
+    total_districts: number;
+}
+
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://127.0.0.1:8000";
+
+const SEVERITY_COLORS = {
+    normal: "bg-green-500/20 text-green-400 border-green-500/50",
+    advisory: "bg-yellow-500/20 text-yellow-400 border-yellow-500/50",
+    warning: "bg-orange-500/20 text-orange-400 border-orange-500/50",
+    critical: "bg-red-500/20 text-red-400 border-red-500/50",
+};
+
+const SEVERITY_ICONS = {
+    normal: "☀️",
+    advisory: "🌤️",
+    warning: "⛈️",
+    critical: "🌊",
+};
+
+export default function WeatherPredictions() {
+    const [predictions, setPredictions] = useState<WeatherPredictions | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [selectedDistrict, setSelectedDistrict] = useState<string | null>(null);
+    const [filter, setFilter] = useState<string>("all");
+
+    useEffect(() => {
+        fetchPredictions();
+        // Refresh every 30 minutes
+        const interval = setInterval(fetchPredictions, 30 * 60 * 1000);
+        return () => clearInterval(interval);
+    }, []);
+
+    const fetchPredictions = async () => {
+        try {
+            const res = await fetch(`${API_BASE}/api/weather/predictions`);
+            const data = await res.json();
+
+            if (data.status === "success") {
+                setPredictions(data);
+                setError(null);
+            } else {
+                setError(data.message || "Failed to load predictions");
+            }
+        } catch (err) {
+            setError("Failed to connect to weather API");
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const getFilteredDistricts = () => {
+        if (!predictions?.districts) return [];
+
+        const entries = Object.entries(predictions.districts);
+
+        if (filter === "all") return entries;
+        return entries.filter(([_, pred]) => pred.severity === filter);
+    };
+
+    const getSeverityCounts = () => {
+        if (!predictions?.districts) return { normal: 0, advisory: 0, warning: 0, critical: 0 };
+
+        const counts = { normal: 0, advisory: 0, warning: 0, critical: 0 };
+        Object.values(predictions.districts).forEach((pred) => {
+            counts[pred.severity] = (counts[pred.severity] || 0) + 1;
+        });
+        return counts;
+    };
+
+    if (loading) {
+        return (
+            <div className="bg-slate-800/50 rounded-xl p-6 border border-slate-700/50">
+                <div className="animate-pulse space-y-4">
+                    <div className="h-6 bg-slate-700 rounded w-1/3"></div>
+                    <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                        {[1, 2, 3, 4].map((i) => (
+                            <div key={i} className="h-24 bg-slate-700 rounded-lg"></div>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    const sevCounts = getSeverityCounts();
+    const filteredDistricts = getFilteredDistricts();
+
+    return (
+        <div className="bg-slate-800/50 rounded-xl p-6 border border-slate-700/50">
+            {/* Header */}
+            <div className="flex items-center justify-between mb-6">
+                <div>
+                    <h2 className="text-xl font-bold text-white flex items-center gap-2">
+                        🌦️ Weather Predictions
+                    </h2>
+                    {predictions && (
+                        <p className="text-sm text-slate-400 mt-1">
+                            Forecast for {predictions.prediction_date}
+                        </p>
+                    )}
+                </div>
+                <button
+                    onClick={fetchPredictions}
+                    className="p-2 rounded-lg bg-slate-700 hover:bg-slate-600 transition-colors"
+                    title="Refresh predictions"
+                >
+                    🔄
+                </button>
+            </div>
+
+            {error ? (
+                <div className="text-center py-8">
+                    <p className="text-red-400 mb-4">{error}</p>
+                    <button
+                        onClick={fetchPredictions}
+                        className="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded-lg transition-colors"
+                    >
+                        Retry
+                    </button>
+                </div>
+            ) : (
+                <>
+                    {/* Severity Summary */}
+                    <div className="grid grid-cols-4 gap-3 mb-6">
+                        {(["normal", "advisory", "warning", "critical"] as const).map((sev) => (
+                            <button
+                                key={sev}
+                                onClick={() => setFilter(filter === sev ? "all" : sev)}
+                                className={`p-3 rounded-lg border transition-all ${filter === sev ? "ring-2 ring-white/30" : ""
+                                    } ${SEVERITY_COLORS[sev]}`}
+                            >
+                                <div className="text-2xl">{SEVERITY_ICONS[sev]}</div>
+                                <div className="text-lg font-bold">{sevCounts[sev]}</div>
+                                <div className="text-xs capitalize">{sev}</div>
+                            </button>
+                        ))}
+                    </div>
+
+                    {/* District Grid */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 max-h-[500px] overflow-y-auto pr-2">
+                        {filteredDistricts.map(([district, pred]) => (
+                            <div
+                                key={district}
+                                className={`p-4 rounded-lg border cursor-pointer transition-all hover:scale-[1.02] ${SEVERITY_COLORS[pred.severity]
+                                    } ${selectedDistrict === district ? "ring-2 ring-white/50" : ""}`}
+                                onClick={() => setSelectedDistrict(selectedDistrict === district ? null : district)}
+                            >
+                                <div className="flex items-center justify-between mb-2">
+                                    <h3 className="font-semibold text-white">{district}</h3>
+                                    <span className="text-xl">{SEVERITY_ICONS[pred.severity]}</span>
+                                </div>
+
+                                <div className="grid grid-cols-2 gap-2 text-sm">
+                                    <div>
+                                        <span className="text-slate-400">Temp:</span>
+                                        <span className="ml-1 text-white">
+                                            {pred.temperature.low_c}° - {pred.temperature.high_c}°C
+                                        </span>
+                                    </div>
+                                    <div>
+                                        <span className="text-slate-400">Rain:</span>
+                                        <span className="ml-1 text-white">
+                                            {pred.rainfall.amount_mm}mm
+                                        </span>
+                                    </div>
+                                </div>
+
+                                {pred.flood_risk > 0 && (
+                                    <div className="mt-2 text-sm">
+                                        <span className="text-red-400">⚠️ Flood Risk: </span>
+                                        <span className="text-white">{(pred.flood_risk * 100).toFixed(0)}%</span>
+                                    </div>
+                                )}
+
+                                {/* Expanded details */}
+                                {selectedDistrict === district && (
+                                    <div className="mt-4 pt-3 border-t border-white/20 text-sm space-y-2">
+                                        <div className="flex justify-between">
+                                            <span className="text-slate-400">Rain Probability:</span>
+                                            <span className="text-white">{(pred.rainfall.probability * 100).toFixed(0)}%</span>
+                                        </div>
+                                        <div className="flex justify-between">
+                                            <span className="text-slate-400">Humidity:</span>
+                                            <span className="text-white">{pred.humidity_pct}%</span>
+                                        </div>
+                                        <div className="flex justify-between">
+                                            <span className="text-slate-400">Station:</span>
+                                            <span className="text-white">{pred.station_used}</span>
+                                        </div>
+                                        {pred.is_fallback && (
+                                            <div className="text-xs text-yellow-400">
+                                                ⚠️ Using climate fallback (LSTM model not trained)
+                                            </div>
+                                        )}
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                    </div>
+
+                    {/* Footer */}
+                    {predictions && (
+                        <div className="mt-4 text-xs text-slate-500 text-center">
+                            Generated: {new Date(predictions.generated_at).toLocaleString()} |
+                            {predictions.total_districts} districts
+                        </div>
+                    )}
+                </>
+            )}
+        </div>
+    );
+}

frontend/app/components/intelligence/IntelligenceFeed.tsx

@@ -0,0 +1,242 @@
+import { Card } from "../ui/card";
+import { Badge } from "../ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { Newspaper, Cloud, TrendingUp, FileText, Radio, Globe, MapPin } from "lucide-react";
+import { useRogerData, RogerEvent } from "../../hooks/use-roger-data";
+import { motion } from "framer-motion";
+import { useState } from "react";
+
+const IntelligenceFeed = () => {
+  const { events, isConnected } = useRogerData();
+
+  // Region toggle state (Sri Lanka / World)
+  const [region, setRegion] = useState<"sri_lanka" | "world">("sri_lanka");
+
+  // ALWAYS ensure events is an array
+  const safeEvents: RogerEvent[] = Array.isArray(events) ? events : [];
+
+  // Filter by region first
+  const regionFilteredEvents = safeEvents.filter(e => {
+    // If event has region field, use it; otherwise infer from domain
+    const eventRegion = e?.region || "sri_lanka"; // Default to Sri Lanka
+    return eventRegion === region;
+  });
+
+  // Then filter by category
+  const allEvents = regionFilteredEvents;
+  const newsEvents = regionFilteredEvents.filter(e => e?.domain === "social" || e?.domain === "intelligence");
+  const politicalEvents = regionFilteredEvents.filter(e => e?.domain === "political");
+  const weatherEvents = regionFilteredEvents.filter(e => e?.domain === "weather" || e?.domain === "meteorological");
+  const economicEvents = regionFilteredEvents.filter(e => e?.domain === "economical" || e?.domain === "market");
+
+  const renderEventCard = (item: RogerEvent, idx: number) => {
+    if (!item) return null;
+
+    const isRisk = item.impact_type === "risk";
+
+    const severityColorMap: Record<string, string> = {
+      critical: "destructive",
+      high: "warning",
+      medium: "primary",
+      low: "secondary",
+    };
+    const severityColor = severityColorMap[item.severity] || "secondary";
+
+    const domainIconMap: Record<string, React.ComponentType<any>> = {
+      social: Newspaper,
+      political: FileText,
+      weather: Cloud,
+      meteorological: Cloud,
+      economical: TrendingUp,
+      market: TrendingUp,
+      intelligence: Radio,
+    };
+    const Icon = domainIconMap[item.domain] || Radio;
+
+    return (
+      <motion.div
+        key={item.event_id}
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: idx * 0.05 }}
+      >
+        <Card
+          className={`p-4 bg-muted/30 border-l-4 hover:bg-muted/50 transition-colors ${severityColor === "destructive"
+            ? "border-l-destructive"
+            : severityColor === "warning"
+              ? "border-l-warning"
+              : severityColor === "primary"
+                ? "border-l-primary"
+                : "border-l-secondary"
+            }`}
+        >
+          <div className="flex items-start justify-between mb-2">
+            <div className="flex-1">
+              <div className="flex items-center gap-2 mb-1">
+                <Icon className="w-4 h-4" />
+                <Badge
+                  className={
+                    severityColor === "destructive"
+                      ? "bg-destructive text-destructive-foreground"
+                      : severityColor === "warning"
+                        ? "bg-warning text-warning-foreground"
+                        : severityColor === "primary"
+                          ? "bg-primary text-primary-foreground"
+                          : "bg-secondary text-secondary-foreground"
+                  }
+                >
+                  {item.severity?.toUpperCase()}
+                </Badge>
+
+                <Badge className={isRisk ? "bg-destructive/20 text-destructive" : "bg-success/20 text-success"}>
+                  {isRisk ? "⚠️ RISK" : "✨ OPP"}
+                </Badge>
+
+                <Badge className="border border-border">{item.domain}</Badge>
+              </div>
+
+              <h3 className="font-bold text-sm mb-1">{item.summary}</h3>
+
+              <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                <span>Confidence: {Math.round((item.confidence ?? 0) * 100)}%</span>
+                <span>•</span>
+                <span className="font-mono">
+                  {item.timestamp ? new Date(item.timestamp).toLocaleTimeString() : ""}
+                </span>
+              </div>
+            </div>
+          </div>
+        </Card>
+      </motion.div>
+    );
+  };
+
+  return (
+    <div className="space-y-6">
+      <Card className="p-6 bg-card border-border">
+        <div className="flex items-center gap-2 mb-4">
+          <Radio className="w-5 h-5 text-primary" />
+          <h2 className="text-lg font-bold">INTELLIGENCE FEED</h2>
+
+          <span className="ml-auto text-xs font-mono text-muted-foreground">
+            {isConnected ? (
+              <span className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-success animate-pulse"></span>
+                Live
+              </span>
+            ) : (
+              <span className="flex items-center gap-2">
+                <span className="w-2 h-2 rounded-full bg-warning"></span>
+                Reconnecting...
+              </span>
+            )}
+          </span>
+        </div>
+
+        {/* REGION TOGGLE - Sri Lanka / World */}
+        <div className="flex gap-2 mb-4 overflow-x-auto hide-scrollbar">
+          <button
+            onClick={() => setRegion("sri_lanka")}
+            className={`flex items-center gap-2 px-3 sm:px-4 py-2 rounded-lg font-medium transition-all whitespace-nowrap text-sm ${region === "sri_lanka"
+              ? "bg-primary text-primary-foreground shadow-lg"
+              : "bg-muted text-muted-foreground hover:bg-muted/80"
+              }`}
+          >
+            <MapPin className="w-4 h-4" />
+            🇱🇰 <span className="hidden sm:inline">Sri Lanka</span>
+            <Badge variant="secondary" className="ml-1">
+              {safeEvents.filter(e => (e?.region || "sri_lanka") === "sri_lanka").length}
+            </Badge>
+          </button>
+          <button
+            onClick={() => setRegion("world")}
+            className={`flex items-center gap-2 px-3 sm:px-4 py-2 rounded-lg font-medium transition-all whitespace-nowrap text-sm ${region === "world"
+              ? "bg-primary text-primary-foreground shadow-lg"
+              : "bg-muted text-muted-foreground hover:bg-muted/80"
+              }`}
+          >
+            <Globe className="w-4 h-4" />
+            🌍 <span className="hidden sm:inline">World</span>
+            <Badge variant="secondary" className="ml-1">
+              {safeEvents.filter(e => e?.region === "world").length}
+            </Badge>
+          </button>
+        </div>
+
+        <Tabs defaultValue="all" className="w-full">
+          <div className="overflow-x-auto hide-scrollbar -mx-2 px-2 sm:mx-0 sm:px-0">
+            <TabsList className="inline-flex w-max sm:grid sm:w-full sm:grid-cols-5 mb-4">
+              <TabsTrigger value="all" className="px-3 sm:px-4 py-2 text-xs sm:text-sm">ALL ({allEvents.length})</TabsTrigger>
+              <TabsTrigger value="news" className="px-3 sm:px-4 py-2 text-xs sm:text-sm">NEWS ({newsEvents.length})</TabsTrigger>
+              <TabsTrigger value="political" className="px-3 sm:px-4 py-2 text-xs sm:text-sm whitespace-nowrap">POLITICAL ({politicalEvents.length})</TabsTrigger>
+              <TabsTrigger value="weather" className="px-3 sm:px-4 py-2 text-xs sm:text-sm">WEATHER ({weatherEvents.length})</TabsTrigger>
+              <TabsTrigger value="economic" className="px-3 sm:px-4 py-2 text-xs sm:text-sm">ECONOMIC ({economicEvents.length})</TabsTrigger>
+            </TabsList>
+          </div>
+
+          {/* ALL */}
+          <TabsContent value="all" className="space-y-3 max-h-[600px] overflow-y-auto">
+            {allEvents.length > 0 ? (
+              allEvents.map(renderEventCard)
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                <Radio className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                <p className="text-sm font-mono">Waiting for intelligence data...</p>
+              </div>
+            )}
+          </TabsContent>
+
+          {/* NEWS */}
+          <TabsContent value="news" className="space-y-3 max-h-[600px] overflow-y-auto">
+            {newsEvents.length > 0 ? (
+              newsEvents.map(renderEventCard)
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                <Newspaper className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                <p className="text-sm">No news events yet</p>
+              </div>
+            )}
+          </TabsContent>
+
+          {/* POLITICAL */}
+          <TabsContent value="political" className="space-y-3 max-h-[600px] overflow-y-auto">
+            {politicalEvents.length > 0 ? (
+              politicalEvents.map(renderEventCard)
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                <FileText className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                <p className="text-sm">No political updates yet</p>
+              </div>
+            )}
+          </TabsContent>
+
+          {/* WEATHER */}
+          <TabsContent value="weather" className="space-y-3 max-h-[600px] overflow-y-auto">
+            {weatherEvents.length > 0 ? (
+              weatherEvents.map(renderEventCard)
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                <Cloud className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                <p className="text-sm">No weather alerts yet</p>
+              </div>
+            )}
+          </TabsContent>
+
+          {/* ECONOMIC */}
+          <TabsContent value="economic" className="space-y-3 max-h-[600px] overflow-y-auto">
+            {economicEvents.length > 0 ? (
+              economicEvents.map(renderEventCard)
+            ) : (
+              <div className="text-center py-12 text-muted-foreground">
+                <TrendingUp className="w-12 h-12 mx-auto mb-3 opacity-50" />
+                <p className="text-sm">No economic data yet</p>
+              </div>
+            )}
+          </TabsContent>
+        </Tabs>
+      </Card>
+    </div>
+  );
+};
+
+export default IntelligenceFeed;

frontend/app/components/intelligence/IntelligenceSettings.tsx

@@ -0,0 +1,429 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card } from "../ui/card";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Badge } from "../ui/badge";
+import {
+    Settings,
+    Plus,
+    X,
+    Save,
+    RefreshCw,
+    Twitter,
+    Linkedin,
+    Facebook,
+    Search,
+    Package,
+    User
+} from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+
+// API base URL - adjust based on your backend
+const API_BASE = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000";
+
+interface IntelConfig {
+    user_profiles: {
+        twitter: string[];
+        facebook: string[];
+        linkedin: string[];
+    };
+    user_keywords: string[];
+    user_products: string[];
+}
+
+const defaultConfig: IntelConfig = {
+    user_profiles: { twitter: [], facebook: [], linkedin: [] },
+    user_keywords: [],
+    user_products: [],
+};
+
+const IntelligenceSettings = () => {
+    const [config, setConfig] = useState<IntelConfig>(defaultConfig);
+    const [loading, setLoading] = useState(true);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+    const [success, setSuccess] = useState<string | null>(null);
+
+    // Input states
+    const [newKeyword, setNewKeyword] = useState("");
+    const [newProduct, setNewProduct] = useState("");
+    const [newProfile, setNewProfile] = useState("");
+    const [selectedPlatform, setSelectedPlatform] = useState<"twitter" | "facebook" | "linkedin">("twitter");
+
+    // Fetch config on mount
+    useEffect(() => {
+        fetchConfig();
+    }, []);
+
+    const fetchConfig = async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const res = await fetch(`${API_BASE}/api/intel/config`);
+            const data = await res.json();
+            if (data.status === "success" && data.config) {
+                setConfig(data.config);
+            } else if (data.config) {
+                setConfig(data.config);
+            }
+        } catch (err) {
+            setError("Failed to load configuration");
+            console.error("Failed to fetch intel config:", err);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const saveConfig = async () => {
+        setSaving(true);
+        setError(null);
+        setSuccess(null);
+        try {
+            const res = await fetch(`${API_BASE}/api/intel/config`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(config),
+            });
+            const data = await res.json();
+            if (data.status === "updated") {
+                setSuccess("Configuration saved! Changes will apply on next agent cycle.");
+                setTimeout(() => setSuccess(null), 3000);
+            } else {
+                setError(data.error || "Failed to save");
+            }
+        } catch (err) {
+            setError("Failed to save configuration");
+            console.error("Failed to save intel config:", err);
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    const addKeyword = () => {
+        if (newKeyword.trim() && !config.user_keywords.includes(newKeyword.trim())) {
+            setConfig({
+                ...config,
+                user_keywords: [...config.user_keywords, newKeyword.trim()],
+            });
+            setNewKeyword("");
+        }
+    };
+
+    const removeKeyword = (keyword: string) => {
+        setConfig({
+            ...config,
+            user_keywords: config.user_keywords.filter((k) => k !== keyword),
+        });
+    };
+
+    const addProduct = () => {
+        if (newProduct.trim() && !config.user_products.includes(newProduct.trim())) {
+            setConfig({
+                ...config,
+                user_products: [...config.user_products, newProduct.trim()],
+            });
+            setNewProduct("");
+        }
+    };
+
+    const removeProduct = (product: string) => {
+        setConfig({
+            ...config,
+            user_products: config.user_products.filter((p) => p !== product),
+        });
+    };
+
+    const addProfile = () => {
+        if (newProfile.trim() && !config.user_profiles[selectedPlatform].includes(newProfile.trim())) {
+            setConfig({
+                ...config,
+                user_profiles: {
+                    ...config.user_profiles,
+                    [selectedPlatform]: [...config.user_profiles[selectedPlatform], newProfile.trim()],
+                },
+            });
+            setNewProfile("");
+        }
+    };
+
+    const removeProfile = (platform: "twitter" | "facebook" | "linkedin", profile: string) => {
+        setConfig({
+            ...config,
+            user_profiles: {
+                ...config.user_profiles,
+                [platform]: config.user_profiles[platform].filter((p) => p !== profile),
+            },
+        });
+    };
+
+    const platformIcons = {
+        twitter: <Twitter className="w-4 h-4" />,
+        facebook: <Facebook className="w-4 h-4" />,
+        linkedin: <Linkedin className="w-4 h-4" />,
+    };
+
+    const platformColors = {
+        twitter: "bg-blue-500/20 text-blue-400 border-blue-500/30",
+        facebook: "bg-indigo-500/20 text-indigo-400 border-indigo-500/30",
+        linkedin: "bg-sky-500/20 text-sky-400 border-sky-500/30",
+    };
+
+    if (loading) {
+        return (
+            <Card className="p-6 bg-card border-border">
+                <div className="flex items-center justify-center py-12">
+                    <RefreshCw className="w-6 h-6 animate-spin text-primary" />
+                    <span className="ml-2 text-muted-foreground">Loading configuration...</span>
+                </div>
+            </Card>
+        );
+    }
+
+    return (
+        <Card className="p-6 bg-card border-border">
+            <div className="flex items-center justify-between mb-6">
+                <div className="flex items-center gap-2">
+                    <Settings className="w-5 h-5 text-primary" />
+                    <h2 className="text-lg font-bold">INTELLIGENCE SETTINGS</h2>
+                </div>
+                <div className="flex gap-2">
+                    <Button variant="outline" size="sm" onClick={fetchConfig} disabled={loading}>
+                        <RefreshCw className={`w-4 h-4 mr-1 ${loading ? "animate-spin" : ""}`} />
+                        Refresh
+                    </Button>
+                    <Button size="sm" onClick={saveConfig} disabled={saving}>
+                        <Save className={`w-4 h-4 mr-1 ${saving ? "animate-pulse" : ""}`} />
+                        {saving ? "Saving..." : "Save Changes"}
+                    </Button>
+                </div>
+            </div>
+
+            {/* Status Messages */}
+            <AnimatePresence>
+                {error && (
+                    <motion.div
+                        initial={{ opacity: 0, y: -10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0 }}
+                        className="mb-4 p-3 bg-destructive/20 border border-destructive/30 rounded-lg text-destructive text-sm"
+                    >
+                        {error}
+                    </motion.div>
+                )}
+                {success && (
+                    <motion.div
+                        initial={{ opacity: 0, y: -10 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0 }}
+                        className="mb-4 p-3 bg-success/20 border border-success/30 rounded-lg text-success text-sm"
+                    >
+                        {success}
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            <div className="space-y-6">
+                {/* Keywords Section */}
+                <div className="p-4 bg-muted/30 rounded-lg border border-border">
+                    <div className="flex items-center gap-2 mb-3">
+                        <Search className="w-4 h-4 text-primary" />
+                        <h3 className="font-semibold">Custom Keywords</h3>
+                        <Badge variant="secondary" className="ml-auto">
+                            {config.user_keywords.length} keywords
+                        </Badge>
+                    </div>
+                    <p className="text-xs text-muted-foreground mb-3">
+                        Add keywords to monitor across all social platforms
+                    </p>
+                    <div className="flex gap-2 mb-3">
+                        <Input
+                            placeholder="Enter keyword (e.g., 'Colombo Port')"
+                            value={newKeyword}
+                            onChange={(e) => setNewKeyword(e.target.value)}
+                            onKeyDown={(e) => e.key === "Enter" && addKeyword()}
+                            className="flex-1"
+                        />
+                        <Button size="sm" onClick={addKeyword}>
+                            <Plus className="w-4 h-4" />
+                        </Button>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                        <AnimatePresence>
+                            {config.user_keywords.map((keyword) => (
+                                <motion.div
+                                    key={keyword}
+                                    initial={{ opacity: 0, scale: 0.8 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    exit={{ opacity: 0, scale: 0.8 }}
+                                >
+                                    <Badge className="flex items-center gap-1 pr-1 bg-primary/20 text-primary border border-primary/30">
+                                        {keyword}
+                                        <button
+                                            onClick={() => removeKeyword(keyword)}
+                                            className="ml-1 p-0.5 rounded hover:bg-destructive/20"
+                                        >
+                                            <X className="w-3 h-3" />
+                                        </button>
+                                    </Badge>
+                                </motion.div>
+                            ))}
+                        </AnimatePresence>
+                        {config.user_keywords.length === 0 && (
+                            <span className="text-xs text-muted-foreground italic">No custom keywords added</span>
+                        )}
+                    </div>
+                </div>
+
+                {/* Products Section */}
+                <div className="p-4 bg-muted/30 rounded-lg border border-border">
+                    <div className="flex items-center gap-2 mb-3">
+                        <Package className="w-4 h-4 text-warning" />
+                        <h3 className="font-semibold">Products to Track</h3>
+                        <Badge variant="secondary" className="ml-auto">
+                            {config.user_products.length} products
+                        </Badge>
+                    </div>
+                    <p className="text-xs text-muted-foreground mb-3">
+                        Track mentions and reviews of specific products
+                    </p>
+                    <div className="flex gap-2 mb-3">
+                        <Input
+                            placeholder="Enter product name (e.g., 'iPhone 15')"
+                            value={newProduct}
+                            onChange={(e) => setNewProduct(e.target.value)}
+                            onKeyDown={(e) => e.key === "Enter" && addProduct()}
+                            className="flex-1"
+                        />
+                        <Button size="sm" onClick={addProduct}>
+                            <Plus className="w-4 h-4" />
+                        </Button>
+                    </div>
+                    <div className="flex flex-wrap gap-2">
+                        <AnimatePresence>
+                            {config.user_products.map((product) => (
+                                <motion.div
+                                    key={product}
+                                    initial={{ opacity: 0, scale: 0.8 }}
+                                    animate={{ opacity: 1, scale: 1 }}
+                                    exit={{ opacity: 0, scale: 0.8 }}
+                                >
+                                    <Badge className="flex items-center gap-1 pr-1 bg-warning/20 text-warning border border-warning/30">
+                                        {product}
+                                        <button
+                                            onClick={() => removeProduct(product)}
+                                            className="ml-1 p-0.5 rounded hover:bg-destructive/20"
+                                        >
+                                            <X className="w-3 h-3" />
+                                        </button>
+                                    </Badge>
+                                </motion.div>
+                            ))}
+                        </AnimatePresence>
+                        {config.user_products.length === 0 && (
+                            <span className="text-xs text-muted-foreground italic">No custom products added</span>
+                        )}
+                    </div>
+                </div>
+
+                {/* Profiles Section */}
+                <div className="p-4 bg-muted/30 rounded-lg border border-border">
+                    <div className="flex items-center gap-2 mb-3">
+                        <User className="w-4 h-4 text-success" />
+                        <h3 className="font-semibold">Profiles to Monitor</h3>
+                        <Badge variant="secondary" className="ml-auto">
+                            {Object.values(config.user_profiles).flat().length} profiles
+                        </Badge>
+                    </div>
+                    <p className="text-xs text-muted-foreground mb-3">
+                        Add social media profiles/pages to monitor
+                    </p>
+
+                    {/* Platform Selector */}
+                    <div className="flex gap-2 mb-3">
+                        {(["twitter", "facebook", "linkedin"] as const).map((platform) => (
+                            <button
+                                key={platform}
+                                onClick={() => setSelectedPlatform(platform)}
+                                className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${selectedPlatform === platform
+                                        ? platformColors[platform] + " border"
+                                        : "bg-muted text-muted-foreground hover:bg-muted/80"
+                                    }`}
+                            >
+                                {platformIcons[platform]}
+                                {platform.charAt(0).toUpperCase() + platform.slice(1)}
+                            </button>
+                        ))}
+                    </div>
+
+                    <div className="flex gap-2 mb-3">
+                        <Input
+                            placeholder={`Enter ${selectedPlatform} username/page`}
+                            value={newProfile}
+                            onChange={(e) => setNewProfile(e.target.value)}
+                            onKeyDown={(e) => e.key === "Enter" && addProfile()}
+                            className="flex-1"
+                        />
+                        <Button size="sm" onClick={addProfile}>
+                            <Plus className="w-4 h-4" />
+                        </Button>
+                    </div>
+
+                    {/* Show profiles by platform */}
+                    <div className="space-y-3">
+                        {(["twitter", "facebook", "linkedin"] as const).map((platform) => (
+                            <div key={platform}>
+                                <div className="flex items-center gap-2 mb-2">
+                                    {platformIcons[platform]}
+                                    <span className="text-xs font-medium text-muted-foreground uppercase">
+                                        {platform}
+                                    </span>
+                                    <span className="text-xs text-muted-foreground">
+                                        ({config.user_profiles[platform].length})
+                                    </span>
+                                </div>
+                                <div className="flex flex-wrap gap-2">
+                                    <AnimatePresence>
+                                        {config.user_profiles[platform].map((profile) => (
+                                            <motion.div
+                                                key={`${platform}-${profile}`}
+                                                initial={{ opacity: 0, scale: 0.8 }}
+                                                animate={{ opacity: 1, scale: 1 }}
+                                                exit={{ opacity: 0, scale: 0.8 }}
+                                            >
+                                                <Badge className={`flex items-center gap-1 pr-1 border ${platformColors[platform]}`}>
+                                                    @{profile}
+                                                    <button
+                                                        onClick={() => removeProfile(platform, profile)}
+                                                        className="ml-1 p-0.5 rounded hover:bg-destructive/20"
+                                                    >
+                                                        <X className="w-3 h-3" />
+                                                    </button>
+                                                </Badge>
+                                            </motion.div>
+                                        ))}
+                                    </AnimatePresence>
+                                    {config.user_profiles[platform].length === 0 && (
+                                        <span className="text-xs text-muted-foreground italic">None</span>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Info Box */}
+                <div className="p-3 bg-primary/10 border border-primary/20 rounded-lg">
+                    <p className="text-xs text-primary">
+                        <strong>Note:</strong> Your custom targets will be monitored in addition to the default
+                        competitor profiles (Dialog, SLT, Mobitel, Hutch). Changes take effect on the next
+                        intelligence collection cycle.
+                    </p>
+                </div>
+            </div>
+        </Card>
+    );
+};
+
+export default IntelligenceSettings;

frontend/app/components/map/DistrictInfoPanel.tsx

@@ -0,0 +1,199 @@
+import { Card } from "../ui/card";
+import { Badge } from "../ui/badge";
+import { Separator } from "../ui/separator";
+import { Cloud, Newspaper, TrendingUp, Users, AlertTriangle, MapPin } from "lucide-react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useRogerData } from "../../hooks/use-roger-data";
+
+interface DistrictInfoPanelProps {
+  district: string | null;
+}
+
+const DistrictInfoPanel = ({ district }: DistrictInfoPanelProps) => {
+  const { events } = useRogerData();
+
+  if (!district) {
+    return (
+      <Card className="p-6 bg-card border-border h-full flex items-center justify-center">
+        <div className="text-center text-muted-foreground">
+          <MapPin className="w-12 h-12 mx-auto mb-3 opacity-50" />
+          <p className="text-sm font-mono">Select a district to view intelligence</p>
+        </div>
+      </Card>
+    );
+  }
+
+  // FIXED: Filter events that relate to this district (with null-safe check)
+  const districtEvents = events.filter(e =>
+    e.summary?.toLowerCase().includes(district.toLowerCase())
+  );
+
+  // FIXED: Categorize events - include ALL relevant domains
+  const alerts = districtEvents.filter(e => e.impact_type === 'risk');
+
+  // News includes all domains that have district-specific content
+  const news = districtEvents.filter(e =>
+    ['social', 'intelligence', 'political', 'economical'].includes(e.domain)
+  );
+
+  // FIXED: Weather events should also be filtered by district
+  const weatherEvents = districtEvents.filter(e =>
+    e.domain === 'weather' || e.domain === 'meteorological'
+  );
+
+  // Calculate risk level
+  const criticalAlerts = alerts.filter(e => e.severity === 'critical' || e.severity === 'high');
+  const riskLevel = criticalAlerts.length > 0 ? 'high' : alerts.length > 0 ? 'medium' : 'low';
+
+  // District population data (static for demo)
+  const districtData: Record<string, any> = {
+    "Colombo": { population: "2.3M", businesses: "15,234", growth: "+5.2%" },
+    "Gampaha": { population: "2.4M", businesses: "8,456", growth: "+4.1%" },
+    "Kandy": { population: "1.4M", businesses: "5,678", growth: "+3.8%" },
+    "Jaffna": { population: "0.6M", businesses: "2,345", growth: "+6.2%" },
+    "Galle": { population: "1.1M", businesses: "4,567", growth: "+4.5%" },
+    "Kurunegala": { population: "1.6M", businesses: "3,800", growth: "+3.5%" },
+    "Matara": { population: "0.8M", businesses: "2,100", growth: "+2.8%" },
+    "Ratnapura": { population: "1.1M", businesses: "2,400", growth: "+3.1%" },
+    "Badulla": { population: "0.8M", businesses: "1,900", growth: "+2.5%" },
+    "Trincomalee": { population: "0.4M", businesses: "1,200", growth: "+4.8%" },
+  };
+
+  const info = districtData[district] || { population: "N/A", businesses: "N/A", growth: "N/A" };
+
+  return (
+    <AnimatePresence mode="wait">
+      <motion.div
+        key={district}
+        initial={{ opacity: 0, x: 20 }}
+        animate={{ opacity: 1, x: 0 }}
+        exit={{ opacity: 0, x: -20 }}
+        transition={{ duration: 0.3 }}
+      >
+        <Card className="p-6 bg-card border-border space-y-4">
+          {/* Header */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <h3 className="text-xl font-bold text-primary">{district}</h3>
+              <Badge className={`font-mono border ${riskLevel === 'high' ? 'border-destructive text-destructive' :
+                riskLevel === 'medium' ? 'border-warning text-warning' :
+                  'border-success text-success'
+                }`}>
+                {riskLevel.toUpperCase()} RISK
+              </Badge>
+            </div>
+            <p className="text-xs text-muted-foreground font-mono">
+              Population: {info.population} | Events: {districtEvents.length}
+            </p>
+          </div>
+
+          <Separator className="bg-border" />
+
+          {/* Live Weather */}
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+              <Cloud className="w-4 h-4 text-info" />
+              <h4 className="font-semibold text-sm">WEATHER STATUS</h4>
+            </div>
+            {weatherEvents.length > 0 ? (
+              <div className="space-y-1">
+                {weatherEvents.slice(0, 2).map((event, idx) => (
+                  <div key={idx} className="text-sm bg-muted/30 rounded p-2">
+                    <p className="font-semibold leading-relaxed">{event.summary || 'No summary'}</p>
+                    <Badge className="text-xs mt-1">{event.severity}</Badge>
+                  </div>
+                ))}
+              </div>
+            ) : (
+              <p className="text-sm text-muted-foreground">No weather alerts for {district}</p>
+            )}
+          </div>
+
+          <Separator className="bg-border" />
+
+          {/* Active Alerts */}
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+              <AlertTriangle className="w-4 h-4 text-warning" />
+              <h4 className="font-semibold text-sm">ACTIVE ALERTS</h4>
+              <Badge className="ml-auto text-xs">{alerts.length}</Badge>
+            </div>
+            <div className="space-y-2 max-h-[200px] overflow-y-auto">
+              {alerts.length > 0 ? (
+                alerts.slice(0, 5).map((alert, idx) => (
+                  <div key={idx} className="bg-muted/30 rounded p-2">
+                    <p className="text-xs font-semibold leading-relaxed">{alert.summary || 'Alert'}</p>
+                    <div className="flex items-center gap-2 mt-1">
+                      <Badge
+                        className={`text-xs ${alert.severity === 'high' || alert.severity === 'critical'
+                          ? "bg-destructive text-destructive-foreground"
+                          : "bg-secondary text-secondary-foreground"
+                          }`}
+                      >
+                        {alert.severity?.toUpperCase() || 'MEDIUM'}
+                      </Badge>
+                      <span className="text-xs text-muted-foreground">
+                        {alert.timestamp ? new Date(alert.timestamp).toLocaleTimeString() : 'N/A'}
+                      </span>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <p className="text-xs text-muted-foreground">No active alerts for {district}</p>
+              )}
+            </div>
+          </div>
+
+          <Separator className="bg-border" />
+
+          {/* Recent News */}
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+              <Newspaper className="w-4 h-4 text-primary" />
+              <h4 className="font-semibold text-sm">RECENT NEWS</h4>
+            </div>
+            <div className="space-y-2 max-h-[150px] overflow-y-auto">
+              {news.length > 0 ? (
+                news.slice(0, 3).map((item, idx) => (
+                  <div key={idx} className="bg-muted/30 rounded p-2">
+                    <p className="text-xs font-semibold mb-1 leading-relaxed">{item.summary || 'News'}</p>
+                    <div className="flex items-center justify-between">
+                      <span className="text-xs text-muted-foreground">{item.domain}</span>
+                      <span className="text-xs font-mono text-muted-foreground">
+                        {item.timestamp ? new Date(item.timestamp).toLocaleTimeString() : 'N/A'}
+                      </span>
+                    </div>
+                  </div>
+                ))
+              ) : (
+                <p className="text-xs text-muted-foreground">No recent news for {district}</p>
+              )}
+            </div>
+          </div>
+
+          <Separator className="bg-border" />
+
+          {/* Economic */}
+          <div>
+            <div className="flex items-center gap-2 mb-2">
+              <TrendingUp className="w-4 h-4 text-success" />
+              <h4 className="font-semibold text-sm">ECONOMIC</h4>
+            </div>
+            <div className="grid grid-cols-2 gap-3">
+              <div className="bg-muted/30 rounded p-2">
+                <p className="text-xs text-muted-foreground">Businesses</p>
+                <p className="text-lg font-bold">{info.businesses}</p>
+              </div>
+              <div className="bg-muted/30 rounded p-2">
+                <p className="text-xs text-muted-foreground">Growth</p>
+                <p className="text-lg font-bold text-success">{info.growth}</p>
+              </div>
+            </div>
+          </div>
+        </Card>
+      </motion.div>
+    </AnimatePresence>
+  );
+};
+
+export default DistrictInfoPanel;

frontend/app/components/map/MapView.tsx

@@ -0,0 +1,84 @@
+'use client'
+import { useState } from "react";
+import SriLankaMap from "./SriLankaMap";
+import DistrictInfoPanel from "./DistrictInfoPanel";
+import { Card } from "../ui/card";
+import { MapPin, Activity } from "lucide-react";
+import { useRogerData } from "../../hooks/use-roger-data";
+import { Badge } from "../ui/badge";
+
+const MapView = () => {
+  const [selectedDistrict, setSelectedDistrict] = useState<string | null>(null);
+  const { events, isConnected } = useRogerData();
+
+  // Count alerts per district (simplified - matches district names in event summaries)
+  const districtAlertCounts: Record<string, number> = {};
+
+  (events ?? []).forEach(event => {
+    const summary = (event.summary ?? '').toLowerCase();
+    // Check if district name is mentioned in the event
+    ['colombo', 'gampaha', 'kandy', 'jaffna', 'galle', 'matara', 'hambantota',
+      'anuradhapura', 'polonnaruwa', 'batticaloa', 'ampara', 'trincomalee',
+      'kurunegala', 'puttalam', 'kalutara', 'ratnapura', 'kegalle', 'nuwara eliya',
+      'badulla', 'monaragala', 'kilinochchi', 'mannar', 'vavuniya', 'mullaitivu', 'matale'
+    ].forEach(district => {
+      if (summary.includes(district)) {
+        const capitalizedDistrict = district.charAt(0).toUpperCase() + district.slice(1);
+        districtAlertCounts[capitalizedDistrict] = (districtAlertCounts[capitalizedDistrict] || 0) + 1;
+      }
+    });
+  });
+
+  // Count critical events
+  const criticalEvents = events.filter(e => e.severity === 'critical' || e.severity === 'high');
+
+  return (
+    <div className="space-y-4">
+      <Card className="p-4 sm:p-6 bg-card border-border">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
+          <div className="flex items-center gap-2">
+            <MapPin className="w-5 h-5 text-primary" />
+            <h2 className="text-base sm:text-lg font-bold">TERRITORY MAP</h2>
+          </div>
+          <div className="flex items-center gap-2 sm:gap-3 flex-wrap">
+            {isConnected ? (
+              <Badge className="bg-success/20 text-success flex items-center gap-2 text-xs">
+                <span className="w-2 h-2 rounded-full bg-success animate-pulse"></span>
+                Live
+              </Badge>
+            ) : (
+              <Badge className="bg-warning/20 text-warning text-xs">Reconnecting...</Badge>
+            )}
+            <Badge className="border border-border flex items-center gap-2 text-xs">
+              <Activity className="w-3 h-3" />
+              {criticalEvents.length} Critical
+            </Badge>
+            <span className="text-xs font-mono text-muted-foreground hidden sm:inline">
+              Click any district for detailed intelligence
+            </span>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
+          <div className="lg:col-span-2 order-1">
+            <div className="h-[350px] sm:h-[450px] lg:h-[550px] w-full">
+              <SriLankaMap
+                selectedDistrict={selectedDistrict}
+                onDistrictSelect={setSelectedDistrict}
+                alertCounts={districtAlertCounts}
+                className="w-full h-full"
+              />
+            </div>
+          </div>
+
+
+          <div className="lg:col-span-1 order-2">
+            <DistrictInfoPanel district={selectedDistrict} />
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+};
+
+export default MapView;

frontend/app/components/map/SatelliteView.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useState } from 'react';
+import { Card } from '../ui/card';
+import { Badge } from '../ui/badge';
+import { Satellite, Cloud, Wind, Thermometer, Droplets, Gauge, Waves, ExternalLink, RefreshCw, Maximize2 } from 'lucide-react';
+
+type LayerType = 'wind' | 'rain' | 'temp' | 'clouds' | 'waves' | 'pressure';
+
+interface LayerConfig {
+    id: LayerType;
+    label: string;
+    icon: React.ComponentType<{ className?: string }>;
+    overlay: string;  // Windy overlay parameter
+    description: string;
+}
+
+const LAYERS: LayerConfig[] = [
+    {
+        id: 'wind',
+        label: 'Wind',
+        icon: Wind,
+        overlay: 'wind',
+        description: 'Wind speed and direction'
+    },
+    {
+        id: 'rain',
+        label: 'Rain',
+        icon: Cloud,
+        overlay: 'rain',
+        description: 'Precipitation forecast'
+    },
+    {
+        id: 'temp',
+        label: 'Temperature',
+        icon: Thermometer,
+        overlay: 'temp',
+        description: 'Air temperature'
+    },
+    {
+        id: 'clouds',
+        label: 'Clouds',
+        icon: Satellite,
+        overlay: 'clouds',
+        description: 'Cloud cover'
+    },
+    {
+        id: 'waves',
+        label: 'Waves',
+        icon: Waves,
+        overlay: 'waves',
+        description: 'Ocean wave height'
+    },
+    {
+        id: 'pressure',
+        label: 'Pressure',
+        icon: Gauge,
+        overlay: 'pressure',
+        description: 'Atmospheric pressure'
+    }
+];
+
+// Sri Lanka coordinates
+const SRI_LANKA = {
+    lat: 7.87,
+    lon: 80.77,
+    zoom: 7
+};
+
+export default function SatelliteView() {
+    const [activeLayer, setActiveLayer] = useState<LayerType>('wind');
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [key, setKey] = useState(0);
+
+    const activeConfig = LAYERS.find(l => l.id === activeLayer) || LAYERS[0];
+
+    // Windy.com embed URL - officially supported!
+    const iframeSrc = `https://embed.windy.com/embed.html?type=map&location=coordinates&metricRain=mm&metricTemp=°C&metricWind=km/h&zoom=${SRI_LANKA.zoom}&overlay=${activeConfig.overlay}&product=ecmwf&level=surface&lat=${SRI_LANKA.lat}&lon=${SRI_LANKA.lon}&detailLat=${SRI_LANKA.lat}&detailLon=${SRI_LANKA.lon}&marker=true&message=true`;
+
+    const handleRefresh = () => {
+        setKey(prev => prev + 1);
+    };
+
+    const handleFullscreen = () => {
+        setIsFullscreen(!isFullscreen);
+    };
+
+    const handleOpenExternal = () => {
+        window.open(`https://www.windy.com/?${SRI_LANKA.lat},${SRI_LANKA.lon},${SRI_LANKA.zoom}`, '_blank');
+    };
+
+    return (
+        <div className={`space-y-4 ${isFullscreen ? 'fixed inset-0 z-50 bg-background p-4' : ''}`}>
+            {/* Header */}
+            <Card className="p-4 bg-card border-border">
+                <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 rounded-lg bg-primary/20">
+                            <Satellite className="w-5 h-5 text-primary" />
+                        </div>
+                        <div>
+                            <h2 className="font-bold text-lg">Live Weather Map</h2>
+                            <p className="text-xs text-muted-foreground">
+                                Powered by Windy.com • ECMWF Model • Real-time data
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="flex items-center gap-2">
+                        <button
+                            onClick={handleRefresh}
+                            className="p-2 rounded-lg bg-muted hover:bg-muted/80 transition-colors"
+                            title="Refresh"
+                        >
+                            <RefreshCw className="w-4 h-4" />
+                        </button>
+                        <button
+                            onClick={handleFullscreen}
+                            className="p-2 rounded-lg bg-muted hover:bg-muted/80 transition-colors"
+                            title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
+                        >
+                            <Maximize2 className="w-4 h-4" />
+                        </button>
+                        <button
+                            onClick={handleOpenExternal}
+                            className="p-2 rounded-lg bg-muted hover:bg-muted/80 transition-colors"
+                            title="Open in Windy.com"
+                        >
+                            <ExternalLink className="w-4 h-4" />
+                        </button>
+                    </div>
+                </div>
+
+                {/* Layer Selector */}
+                <div className="mt-4 flex flex-wrap gap-2">
+                    {LAYERS.map((layer) => {
+                        const Icon = layer.icon;
+                        const isActive = activeLayer === layer.id;
+                        return (
+                            <button
+                                key={layer.id}
+                                onClick={() => setActiveLayer(layer.id)}
+                                className={`flex items-center gap-2 px-3 py-2 rounded-lg text-sm transition-all ${isActive
+                                        ? 'bg-primary text-primary-foreground'
+                                        : 'bg-muted hover:bg-muted/80 text-muted-foreground'
+                                    }`}
+                                title={layer.description}
+                            >
+                                <Icon className="w-4 h-4" />
+                                <span className="hidden sm:inline">{layer.label}</span>
+                            </button>
+                        );
+                    })}
+                </div>
+
+                {/* Active Layer Info */}
+                <div className="mt-3 flex items-center gap-2">
+                    <Badge className="bg-primary/20 text-primary">
+                        {activeConfig.label}
+                    </Badge>
+                    <span className="text-xs text-muted-foreground">
+                        {activeConfig.description}
+                    </span>
+                </div>
+            </Card>
+
+            {/* Map Container */}
+            <Card className={`overflow-hidden bg-card border-border ${isFullscreen ? 'flex-1' : ''}`}>
+                <div className={`relative ${isFullscreen ? 'h-[calc(100vh-200px)]' : 'h-[500px] sm:h-[600px]'}`}>
+                    <iframe
+                        key={key}
+                        src={iframeSrc}
+                        className="w-full h-full border-0"
+                        title="Windy Weather Map - Sri Lanka"
+                        loading="lazy"
+                        allowFullScreen
+                    />
+                </div>
+            </Card>
+
+            {/* Data Attribution */}
+            <div className="text-xs text-muted-foreground text-center">
+                Data: ECMWF • GFS • ICON • NAM Models
+                <span className="mx-2">•</span>
+                Powered by{' '}
+                <a
+                    href="https://www.windy.com"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline"
+                >
+                    Windy.com
+                </a>
+            </div>
+        </div>
+    );
+}

frontend/app/components/map/SriLankaMap.tsx

@@ -0,0 +1,226 @@
+"use client";
+
+import React, { useMemo } from "react";
+import { motion } from "framer-motion";
+import sriLanka from "@svg-maps/sri-lanka";
+
+// ------------ Types ------------
+
+interface LocationShape {
+  id?: string;
+  name?: string;
+  centroid?: [number, number];
+  path?: string;
+  paths?: string;
+  d?: string;
+  geometry?: {
+    coordinates?: any;
+  };
+}
+
+interface SriLankaMapData {
+  locations?: LocationShape[];
+  features?: LocationShape[];
+  viewBox?: string;
+}
+
+interface Centroid {
+  id: string;
+  x: number;
+  y: number;
+}
+
+interface SriLankaMapProps {
+  selectedDistrict: string | null;
+  onDistrictSelect: (district: string) => void;
+  alertCounts?: Record<string, number>;
+  className?: string;
+  width?: number | string;
+  height?: number | string;
+}
+
+// ------------ Component ------------
+
+const SriLankaMap: React.FC<SriLankaMapProps> = ({
+  selectedDistrict,
+  onDistrictSelect,
+  alertCounts = {},
+  className = "",
+  width = "100%",
+  height = "100%",
+}) => {
+  const mapData = sriLanka as unknown as SriLankaMapData;
+
+  const safeAlerts = alertCounts || {};
+  const totalAlerts = Object.values(safeAlerts).reduce((a, b) => a + (b || 0), 0);
+
+  // Extract locations safely
+  const locations: LocationShape[] = Array.isArray(mapData.locations)
+    ? mapData.locations
+    : Array.isArray(mapData.features)
+    ? mapData.features
+    : [];
+
+  // ------------ Compute Centroids (safe + typed) ------------
+
+  const centroids = useMemo<Centroid[]>(() => {
+    return locations.map((loc) => {
+      const id = loc.id ?? loc.name ?? "unknown";
+
+      // Use existing centroid
+      if (
+        Array.isArray(loc.centroid) &&
+        loc.centroid.length === 2 &&
+        typeof loc.centroid[0] === "number" &&
+        typeof loc.centroid[1] === "number"
+      ) {
+        return { id, x: loc.centroid[0], y: loc.centroid[1] };
+      }
+
+      // Compute centroid from SVG path
+      const d = loc.path ?? loc.paths ?? loc.d ?? "";
+      const nums = d.match(/-?\d+\.?\d*/g)?.map(Number) ?? [];
+
+      const xs = nums.filter((_, i) => i % 2 === 0);
+      const ys = nums.filter((_, i) => i % 2 === 1);
+
+      const x = xs.length ? xs.reduce((a, b) => a + b, 0) / xs.length : 0;
+      const y = ys.length ? ys.reduce((a, b) => a + b, 0) / ys.length : 0;
+
+      return { id, x, y };
+    });
+  }, [locations]);
+
+  // Helper to find a centroid
+  const findCentroid = (id: string): [number, number] => {
+    const c = centroids.find((c) => c.id === id);
+    return c ? [c.x, c.y] : [0, 0];
+  };
+
+  const viewBox = mapData.viewBox ?? "0 0 600 900";
+
+  // ------------ Render ------------
+
+  return (
+    <div className={`relative ${className}`} style={{ width, height }}>
+      <svg
+        viewBox={viewBox}
+        width="100%"
+        height="100%"
+        preserveAspectRatio="xMidYMid meet"
+        role="img"
+        aria-label="Sri Lanka map by district"
+      >
+        <g id="base">
+          <rect width="100%" height="100%" fill="transparent" />
+        </g>
+
+        <g id="districts">
+          {locations.map((loc) => {
+            const id = loc.id ?? loc.name ?? "unknown";
+            const name = loc.name ?? id;
+
+            const pathData =
+              loc.path ??
+              loc.paths ??
+              loc.d ??
+              (loc.geometry?.coordinates ? "" : "");
+
+            const alertCount = safeAlerts[name] ?? 0;
+            const isSelected = selectedDistrict === name;
+            const hasAlerts = alertCount > 0;
+
+            const fill = isSelected
+              ? "hsl(var(--primary) / 0.95)"
+              : hasAlerts
+              ? "hsl(var(--destructive) / 0.28)"
+              : "hsl(var(--muted) / 0.22)";
+
+            const stroke = isSelected
+              ? "hsl(var(--primary))"
+              : hasAlerts
+              ? "hsl(var(--destructive))"
+              : "hsl(var(--border))";
+
+            const strokeWidth = isSelected ? 2.2 : hasAlerts ? 1.5 : 0.9;
+
+            const [cx, cy] = findCentroid(id);
+
+            return (
+              <g key={id} id={`grp-${id}`} data-name={name}>
+                {pathData ? (
+                  <motion.path
+                    id={id}
+                    d={pathData}
+                    fill={fill}
+                    stroke={stroke}
+                    strokeWidth={strokeWidth}
+                    className="cursor-pointer"
+                    onClick={() => onDistrictSelect(name)}
+                    whileHover={{ opacity: 0.85 }}
+                    whileTap={{ scale: 0.995 }}
+                    initial={{ opacity: 0.98 }}
+                    transition={{ duration: 0.18 }}
+                  />
+                ) : (
+                  <motion.circle
+                    cx={cx}
+                    cy={cy}
+                    r={10}
+                    fill={fill}
+                    stroke={stroke}
+                    strokeWidth={1}
+                    onClick={() => onDistrictSelect(name)}
+                    className="cursor-pointer"
+                  />
+                )}
+
+                {alertCount > 0 && (
+                  <motion.g
+                    initial={{ scale: 0 }}
+                    animate={{ scale: 1 }}
+                    transition={{ type: "spring", stiffness: 200 }}
+                  >
+                    <circle
+                      cx={cx}
+                      cy={cy}
+                      r={10}
+                      fill="hsl(var(--destructive))"
+                      stroke="white"
+                      strokeWidth={1.2}
+                    />
+                    <text
+                      x={cx}
+                      y={cy + 4}
+                      textAnchor="middle"
+                      fontSize={9}
+                      fontWeight={700}
+                      fill="#fff"
+                      pointerEvents="none"
+                    >
+                      {alertCount}
+                    </text>
+                  </motion.g>
+                )}
+              </g>
+            );
+          })}
+        </g>
+      </svg>
+
+      {/* Legend */}
+      <div className="absolute top-3 right-3 bg-card/95 border border-border rounded p-2 text-xs text-center">
+        <div className="text-lg font-bold text-destructive">{totalAlerts}</div>
+        <div className="text-[10px] text-muted-foreground uppercase">
+          Total Alerts
+        </div>
+      </div>
+
+      <style>{`
+        svg .cursor-pointer { cursor: pointer; }
+      `}</style>
+    </div>
+  );
+};
+
+export default SriLankaMap;

frontend/app/components/ui/accordion.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn("border-b", className)} {...props} />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

frontend/app/components/ui/alert-dialog.tsx

@@ -0,0 +1,104 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "../ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className,
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...props} />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

frontend/app/components/ui/alert.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
+));
+Alert.displayName = "Alert";
+
+const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h5 ref={ref} className={cn("mb-1 font-medium leading-none tracking-tight", className)} {...props} />
+  ),
+);
+AlertTitle.displayName = "AlertTitle";
+
+const AlertDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("text-sm [&_p]:leading-relaxed", className)} {...props} />
+  ),
+);
+AlertDescription.displayName = "AlertDescription";
+
+export { Alert, AlertTitle, AlertDescription };

frontend/app/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

frontend/app/components/ui/avatar.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "../../lib/utils";
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className)}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

frontend/app/components/ui/badge.tsx

@@ -0,0 +1,29 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

frontend/app/components/ui/breadcrumb.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<HTMLOListElement, React.ComponentPropsWithoutRef<"ol">>(
+  ({ className, ...props }, ref) => (
+    <ol
+      ref={ref}
+      className={cn(
+        "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<"li">>(
+  ({ className, ...props }, ref) => (
+    <li ref={ref} className={cn("inline-flex items-center gap-1.5", className)} {...props} />
+  ),
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return <Comp ref={ref} className={cn("transition-colors hover:text-foreground", className)} {...props} />;
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<"span">>(
+  ({ className, ...props }, ref) => (
+    <span
+      ref={ref}
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("font-normal text-foreground", className)}
+      {...props}
+    />
+  ),
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({ children, className, ...props }: React.ComponentProps<"li">) => (
+  <li role="presentation" aria-hidden="true" className={cn("[&>svg]:size-3.5", className)} {...props}>
+    {children ?? <ChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({ className, ...props }: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <MoreHorizontal className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

frontend/app/components/ui/button.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

frontend/app/components/ui/calendar.tsx

@@ -0,0 +1,81 @@
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "../../lib/utils";
+import { buttonVariants } from "../ui/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months:
+          "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+        month: "space-y-4",
+        caption: "flex justify-center pt-1 relative items-center",
+        caption_label: "text-sm font-medium",
+        nav: "space-x-1 flex items-center",
+        nav_button: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+        ),
+        nav_button_previous: "absolute left-1",
+        nav_button_next: "absolute right-1",
+        table: "w-full border-collapse space-y-1",
+        head_row: "flex",
+        head_cell:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
+        row: "flex w-full mt-2",
+        cell:
+          "h-9 w-9 text-center text-sm p-0 relative " +
+          "[&:has([aria-selected].day-range-end)]:rounded-r-md " +
+          "[&:has([aria-selected].day-outside)]:bg-accent/50 " +
+          "[&:has([aria-selected])]:bg-accent " +
+          "first:[&:has([aria-selected])]:rounded-l-md " +
+          "last:[&:has([aria-selected])]:rounded-r-md " +
+          "focus-within:relative focus-within:z-20",
+        day: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
+        ),
+        day_range_end: "day-range-end",
+        day_selected:
+          "bg-primary text-primary-foreground hover:bg-primary " +
+          "hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-accent text-accent-foreground",
+        day_outside:
+          "day-outside text-muted-foreground opacity-50 " +
+          "aria-selected:bg-accent/50 aria-selected:text-muted-foreground " +
+          "aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
+        ...classNames,
+      }}
+      components={{
+        Chevron: (props) => {
+          return props.orientation === "left" ? (
+            <ChevronLeft className="h-4 w-4" {...props} />
+          ) : (
+            <ChevronRight className="h-4 w-4" {...props} />
+          );
+        },
+      }}
+      {...props}
+    />
+  );
+}
+
+Calendar.displayName = "Calendar";
+
+export { Calendar };

frontend/app/components/ui/card.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("rounded-lg border bg-card text-card-foreground shadow-sm", className)} {...props} />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  ),
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3 ref={ref} className={cn("text-2xl font-semibold leading-none tracking-tight", className)} {...props} />
+  ),
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+  ),
+);
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  ),
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };

frontend/app/components/ui/carousel.tsx

@@ -0,0 +1,224 @@
+import * as React from "react";
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+import { Button } from "../../components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+  opts?: CarouselOptions;
+  plugins?: CarouselPlugin;
+  orientation?: "horizontal" | "vertical";
+  setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+  api: ReturnType<typeof useEmblaCarousel>[1];
+  scrollPrev: () => void;
+  scrollNext: () => void;
+  canScrollPrev: boolean;
+  canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+  const context = React.useContext(CarouselContext);
+
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+
+  return context;
+}
+
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
+  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
+    const [carouselRef, api] = useEmblaCarousel(
+      {
+        ...opts,
+        axis: orientation === "horizontal" ? "x" : "y",
+      },
+      plugins,
+    );
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+    const onSelect = React.useCallback((api: CarouselApi) => {
+      if (!api) {
+        return;
+      }
+
+      setCanScrollPrev(api.canScrollPrev());
+      setCanScrollNext(api.canScrollNext());
+    }, []);
+
+    const scrollPrev = React.useCallback(() => {
+      api?.scrollPrev();
+    }, [api]);
+
+    const scrollNext = React.useCallback(() => {
+      api?.scrollNext();
+    }, [api]);
+
+    const handleKeyDown = React.useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (event.key === "ArrowLeft") {
+          event.preventDefault();
+          scrollPrev();
+        } else if (event.key === "ArrowRight") {
+          event.preventDefault();
+          scrollNext();
+        }
+      },
+      [scrollPrev, scrollNext],
+    );
+
+    React.useEffect(() => {
+      if (!api || !setApi) {
+        return;
+      }
+
+      setApi(api);
+    }, [api, setApi]);
+
+    React.useEffect(() => {
+      if (!api) {
+        return;
+      }
+
+      onSelect(api);
+      api.on("reInit", onSelect);
+      api.on("select", onSelect);
+
+      return () => {
+        api?.off("select", onSelect);
+      };
+    }, [api, onSelect]);
+
+    return (
+      <CarouselContext.Provider
+        value={{
+          carouselRef,
+          api: api,
+          opts,
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+          scrollPrev,
+          scrollNext,
+          canScrollPrev,
+          canScrollNext,
+        }}
+      >
+        <div
+          ref={ref}
+          onKeyDownCapture={handleKeyDown}
+          className={cn("relative", className)}
+          role="region"
+          aria-roledescription="carousel"
+          {...props}
+        >
+          {children}
+        </div>
+      </CarouselContext.Provider>
+    );
+  },
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { carouselRef, orientation } = useCarousel();
+
+    return (
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+          {...props}
+        />
+      </div>
+    );
+  },
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
+      <div
+        ref={ref}
+        role="group"
+        aria-roledescription="slide"
+        className={cn("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
+        {...props}
+      />
+    );
+  },
+);
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-left-12 top-1/2 -translate-y-1/2"
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollPrev}
+        onClick={scrollPrev}
+        {...props}
+      >
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  },
+);
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+    return (
+      <Button
+        ref={ref}
+        variant={variant}
+        size={size}
+        className={cn(
+          "absolute h-8 w-8 rounded-full",
+          orientation === "horizontal"
+            ? "-right-12 top-1/2 -translate-y-1/2"
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+          className,
+        )}
+        disabled={!canScrollNext}
+        onClick={scrollNext}
+        {...props}
+      >
+        <ArrowRight className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
+      </Button>
+    );
+  },
+);
+CarouselNext.displayName = "CarouselNext";
+
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };

frontend/app/components/ui/chart.tsx

@@ -0,0 +1,363 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "../../lib/utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k: string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs " +
+            "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground " +
+            "[&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 " +
+            "[&_.recharts-curve.recharts-tooltip-cursor]:stroke-border " +
+            "[&_.recharts-dot[stroke='#fff']]:stroke-transparent " +
+            "[&_.recharts-layer]:outline-none " +
+            "[&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border " +
+            "[&_.recharts-radial-bar-background-sector]:fill-muted " +
+            "[&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted " +
+            "[&_.recharts-reference-line_[stroke='#ccc']]:stroke-border " +
+            "[&_.recharts-sector[stroke='#fff']]:stroke-transparent " +
+            "[&_.recharts-sector]:outline-none " +
+            "[&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({
+  id,
+  config,
+}: {
+  id: string;
+  config: ChartConfig;
+}) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, cfg]) => cfg.theme || cfg.color
+  );
+
+  if (!colorConfig.length) return null;
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : "";
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+/**
+ * Expose the raw Recharts Tooltip component to be used in charts.
+ * (We keep the raw component export for parity with shadcn patterns.)
+ */
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+/* ---------------------------
+   Custom Tooltip Content
+   - Compatible with Recharts v3
+   - Avoids importing removed types (TooltipPayload)
+   - Uses a small local type describing what we need from Recharts
+   --------------------------- */
+
+type RechartsPayloadItem = {
+  dataKey?: string | number;
+  name?: string;
+  value?: any;
+  payload?: Record<string, any> | undefined;
+  // Recharts provides 'color' at runtime for many series; unknown to types,
+  // so treat as optional/any when reading.
+  color?: string;
+};
+
+type ChartTooltipContentProps = {
+  active?: boolean;
+  label?: string | number | React.ReactNode;
+  payload?: RechartsPayloadItem[];
+  labelFormatter?: (label: any, payload?: RechartsPayloadItem[]) => React.ReactNode;
+  formatter?: (value: any, name: any, item?: RechartsPayloadItem, index?: number, fullPayload?: any) => React.ReactNode;
+  className?: string;
+  labelClassName?: string;
+  hideLabel?: boolean;
+  hideIndicator?: boolean;
+  indicator?: "line" | "dot" | "dashed";
+  nameKey?: string;
+  labelKey?: string;
+  // any other props may exist; we don't depend on them
+};
+
+const ChartTooltipContent = React.forwardRef<HTMLDivElement, ChartTooltipContentProps>(
+  (props, ref) => {
+    const {
+      active,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      nameKey,
+      labelKey,
+      payload = [],
+    } = props;
+
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) return null;
+
+      const item = payload[0];
+      if (!item) return null;
+
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+      const value =
+        !labelKey && typeof label === "string"
+          ? (config[label as string]?.label ?? label)
+          : itemConfig?.label;
+
+      if (!value) return null;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [label, labelFormatter, payload, hideLabel, labelClassName, config, labelKey]);
+
+    if (!active || !payload?.length) return null;
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}
+      >
+        {!nestLabel && tooltipLabel}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+            // Recharts v3 exposes `color` at runtime for many series, but types may not.
+            // Read it defensively:
+            const indicatorColor = (item && (item.color ?? item.payload?.fill)) ?? undefined;
+
+            return (
+              <div
+                key={String(item.dataKey ?? index)}
+                className={cn(
+                  "flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}
+              >
+                {formatter && item.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn("shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]", {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          })}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center")}
+                    >
+                      <div className="grid gap-1.5">
+                        {nestLabel && tooltipLabel}
+                        <span className="text-muted-foreground">{itemConfig?.label ?? item.name}</span>
+                      </div>
+
+                      {item.value !== undefined && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {typeof item.value === "number" ? item.value.toLocaleString() : String(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+/* ---------------------------
+   Legend
+   - For Recharts v3 the Legend payload shape can differ; be defensive and use any[]
+   --------------------------- */
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    payload?: any[]; // Recharts v3 payload shape varies; use any[]
+    hideIcon?: boolean;
+    nameKey?: string;
+    verticalAlign?: "top" | "bottom";
+  }
+>(({ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey }, ref) => {
+  const { config } = useChart();
+
+  if (!payload?.length) return null;
+
+  return (
+    <div
+      ref={ref}
+      className={cn("flex items-center justify-center gap-4", verticalAlign === "top" ? "pb-3" : "pt-3", className)}
+    >
+      {payload.map((item: any) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={String(item.value ?? item.dataKey ?? Math.random())}
+            className={cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground")}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{ backgroundColor: item.color ?? undefined }}
+              />
+            )}
+            {itemConfig?.label ?? item.value ?? item.dataKey}
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+ChartLegendContent.displayName = "ChartLegend";
+
+/* ---------------------------
+   Helpers
+   --------------------------- */
+
+function getPayloadConfigFromPayload(config: ChartConfig, payload: any, key: string) {
+  if (typeof payload !== "object" || payload === null) return undefined;
+
+  const payloadPayload =
+    "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : undefined;
+
+  let configLabelKey: string = key;
+
+  if (key in payload && typeof payload[key] === "string") {
+    configLabelKey = payload[key];
+  } else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") {
+    configLabelKey = payloadPayload[key];
+  }
+
+  return (config as any)[configLabelKey] ?? (config as any)[key];
+}
+
+/* ---------------------------
+   Exports
+   --------------------------- */
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};

frontend/app/components/ui/checkbox.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+      <Check className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox };