fix: cold start 502, favicon, verify state persistence

- Dockerfile: pre-download HuggingFace models to eliminate cold start 502s
- scoring/engine.py: cache NLP instances per-process (_nlp_cache)
- Cloud Run: set min-instances=1 in deploy.sh
- frontend: Lucide Radar icon favicon (matches navbar)
- frontend/VerifyPage: sessionStorage persistence + Verify Again button
- .gitignore: exclude ml/models/xlmr_model/ and *.safetensors

.dockerignore

@@ -0,0 +1,47 @@
+# Python
+__pycache__/
+**/__pycache__/
+*.py[cod]
+*.pyo
+.pytest_cache/
+.cache/
+venv/
+.venv/
+*.egg-info/
+
+# Environment & secrets
+.env
+.env.*
+serviceAccountKey.json
+
+# Local data / logs
+data/history.json
+inputs/*.log
+inputs/__pycache__/
+
+# ML training artefacts (keep ml/models/ — needed at runtime)
+ml/data/
+ml/*.log
+
+# Frontend source (only dist goes to Firebase Hosting, not Cloud Run)
+frontend/
+
+# Git / editor
+.git/
+.gitignore
+.gitattributes
+.vscode/
+.idea/
+
+# Docs
+docs/
+*.md
+README*
+
+# Tests
+tests/
+pytest.ini
+
+# Docker itself
+Dockerfile
+.dockerignore

.firebase/hosting.ZnJvbnRlbmQvZGlzdA.cache

@@ -0,0 +1,5 @@
+vite.svg,1771983804434,d3bbbc44b3ea71906a72bf2ec1a4716903e2e3d9f85a5007205a65d1f12e2923
+index.html,1771983804629,b6c877b7fe830ae6270dfb77cd1d205222591249325fa88601f51f6e2ed57653
+logo.svg,1771983804434,c1ca19989c26d83c632b01609dc4514e16bef7418284c6df88b29ac34ca035ec
+assets/index-DE8XF5VL.css,1771983804629,941148112bdd25f98beea529b6ad97209f2f777e70671d0f5b96f919c8472699
+assets/index-BCcoqzYM.js,1771983804629,60632c706af44a3486a56a8364e32bdce3c7a8cb388f69de2fe9c21876d55942

.firebaserc

@@ -1,5 +1,15 @@
 {
-  "projects": {},
-  "targets": {},
+  "projects": {
+    "default": "philverify"
+  },
+  "targets": {
+    "philverify": {
+      "hosting": {
+        "philverify": [
+          "philverify"
+        ]
+      }
+    }
+  },
   "etags": {}
-}
+}

.gcloudignore

@@ -0,0 +1,50 @@
+# .gcloudignore — Cloud Build source upload exclusions
+# gcloud builds submit uses this before creating the source tarball.
+# Patterns follow .gitignore syntax.
+
+# ── Heavy runtimes / caches ───────────────────────────────────────────────────
+venv/
+.venv/
+__pycache__/
+**/__pycache__/
+*.py[cod]
+.cache/
+.pytest_cache/
+
+# ── Secrets (never upload) ────────────────────────────────────────────────────
+.env
+.env.*
+serviceAccountKey.json
+*.json.key
+
+# ── ML artefacts (large — Docker downloads from HuggingFace at build time) ───
+ml/models/
+ml/data/raw/
+ml/data/processed/
+ml/data/combined/
+
+# ── Frontend source & deps (built separately, not needed in Cloud Run) ───────
+frontend/node_modules/
+frontend/dist/
+
+# ── Dataset pipeline scripts (not needed at runtime) ─────────────────────────
+ml/data_sources/
+ml/train_*.py
+ml/dataset_builder.py
+ml/combined_dataset.py
+ml/_smoke_test.py
+
+# ── Tests & docs ──────────────────────────────────────────────────────────────
+tests/
+docs/
+
+# ── OS / editor ───────────────────────────────────────────────────────────────
+.DS_Store
+.vscode/
+.idea/
+*.swp
+
+# ── Git ───────────────────────────────────────────────────────────────────────
+.git/
+.gitignore
+.gitattributes

.gitignore

@@ -22,10 +22,20 @@ build/
 # OS
 .DS_Store
 
-# ML models (too large for git)
+# ML models (too large for git — use DVC or download separately)
 ml/models/*.pkl
 ml/models/*.bin
 ml/models/*.pt
+ml/models/*.safetensors
+ml/models/xlmr_model/
 serviceAccountKey.json
 *.json.key
 docs/*.json
+
+# Dataset pipeline — raw downloads & processed parquet (regenerate via dataset_builder.py)
+ml/data/raw/
+ml/data/processed/
+ml/_smoke_test.py
+
+# Local history persistence (user data — do not commit)
+data/history.json

Dockerfile

@@ -0,0 +1,67 @@
+# ── PhilVerify API — Cloud Run Dockerfile ─────────────────────────────────────
+# Build:  docker build -t philverify-api .
+# Run:    docker run -p 8080:8080 --env-file .env philverify-api
+
+FROM python:3.12-slim
+
+# ── System dependencies ───────────────────────────────────────────────────────
+# tesseract: OCR for image verification
+# ffmpeg:    audio decoding for Whisper (video/audio input)
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    tesseract-ocr \
+    tesseract-ocr-fil \
+    tesseract-ocr-eng \
+    ffmpeg \
+    libgl1 \
+    libglib2.0-0 \
+    curl \
+    && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# ── Python dependencies ───────────────────────────────────────────────────────
+# Upgrade pip + add setuptools (required by openai-whisper's setup.py on 3.12-slim)
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip setuptools wheel && \
+    pip install --no-cache-dir -r requirements.txt
+
+# Download spaCy English model (small, ~12 MB)
+RUN python -m spacy download en_core_web_sm || true
+
+# Download NLTK data used by the NLP pipeline
+RUN python -c "import nltk; nltk.download('punkt', quiet=True); nltk.download('stopwords', quiet=True); nltk.download('punkt_tab', quiet=True)" || true
+
+# ── Application code ──────────────────────────────────────────────────────────
+COPY . .
+
+# Remove local secrets — Cloud Run uses its own service account (ADC)
+# The serviceAccountKey.json is NOT needed inside the container.
+RUN rm -f serviceAccountKey.json .env
+
+# Pre-download Whisper base model so cold starts are faster
+RUN python -c "import whisper; whisper.load_model('base')" || true
+
+# Pre-download HuggingFace transformer models used by the NLP pipeline so that
+# cold starts don't hit the network — these would otherwise be fetched on the
+# first /verify request and cause a Firebase Hosting 502 timeout (~1.2 GB total).
+RUN python -c "\
+from transformers import pipeline; \
+print('Downloading twitter-roberta-base-sentiment...'); \
+pipeline('text-classification', model='cardiffnlp/twitter-roberta-base-sentiment-latest'); \
+print('Downloading emotion-english-distilroberta...'); \
+pipeline('text-classification', model='j-hartmann/emotion-english-distilroberta-base'); \
+print('Downloading distilbart-cnn-6-6 (claim extractor)...'); \
+pipeline('summarization', model='sshleifer/distilbart-cnn-6-6'); \
+print('All HuggingFace models cached.'); \
+" || true
+
+# ── Runtime ───────────────────────────────────────────────────────────────────
+# Cloud Run sets PORT automatically; default to 8080 for local runs.
+ENV PORT=8080
+ENV APP_ENV=production
+ENV DEBUG=false
+
+EXPOSE 8080
+
+# Use exec form so signals (SIGTERM) reach uvicorn directly
+CMD ["sh", "-c", "uvicorn main:app --host 0.0.0.0 --port ${PORT} --workers 1 --timeout-keep-alive 75"]

api/routes/history.py

@@ -1,21 +1,101 @@
 """
 PhilVerify — History Route
 GET /history — Returns past verification logs with pagination.
+
+Persistence tier order (best to worst):
+  1. Firestore — requires Cloud Firestore API to be enabled in GCP console
+  2. Local JSON file — data/history.json, survives server restarts, no setup needed
+  3. In-memory list — last resort, resets on every restart
 """
+import json
 import logging
-from fastapi import APIRouter, Query
+import threading
+from pathlib import Path
+from fastapi import APIRouter, Query, HTTPException
 from api.schemas import HistoryResponse, HistoryEntry, Verdict
 
 logger = logging.getLogger(__name__)
 router = APIRouter(prefix="/history", tags=["History"])
 
-# In-memory store for development. Will be replaced by DB queries in Phase 7.
+# ── Local JSON file store ─────────────────────────────────────────────────────
+# Survives server restarts. Used when Firestore is unavailable (e.g. API disabled).
+_HISTORY_FILE = Path(__file__).parent.parent.parent / "data" / "history.json"
+_HISTORY_FILE.parent.mkdir(parents=True, exist_ok=True)
+_file_lock = threading.Lock()  # Guard concurrent writes
+
+
+def _load_history_file() -> list[dict]:
+    """Read all records from the local JSON history file."""
+    try:
+        if _HISTORY_FILE.exists():
+            return json.loads(_HISTORY_FILE.read_text(encoding="utf-8"))
+    except Exception as e:
+        logger.warning("Could not read history file: %s", e)
+    return []
+
+
+def _append_history_file(entry: dict) -> None:
+    """Atomically append one entry to the local JSON history file."""
+    with _file_lock:
+        records = _load_history_file()
+        records.append(entry)
+        try:
+            _HISTORY_FILE.write_text(
+                json.dumps(records, ensure_ascii=False, indent=2),
+                encoding="utf-8",
+            )
+        except Exception as e:
+            logger.warning("Could not write history file: %s", e)
+
+
+# In-memory fallback (last resort — loses data on restart)
 _HISTORY: list[dict] = []
 
 
 def record_verification(entry: dict) -> None:
-    """Called by the scoring engine to persist each verification result."""
+    """
+    Called by the scoring engine after every verification.
+    Writes to the local JSON file so history persists even without Firestore.
+    Also keeps the in-memory list in sync for the current process lifetime.
+    """
     _HISTORY.append(entry)
+    _append_history_file(entry)
+
+
+@router.get(
+    "/{entry_id}",
+    summary="Get single verification by ID",
+    description="Returns the full raw record for a single verification, including layer scores, entities, sentiment.",
+)
+async def get_history_entry(entry_id: str) -> dict:
+    logger.info("GET /history/%s", entry_id)
+
+    # Tier 1: Firestore
+    try:
+        from firebase_client import get_firestore
+        db = get_firestore()
+        if db:
+            doc = db.collection("verifications").document(entry_id).get()
+            if doc.exists:
+                return doc.to_dict()
+    except Exception as e:
+        logger.debug("Firestore detail unavailable (%s) — trying local file", e)
+
+    # Tier 2: Local JSON file
+    try:
+        records = _load_history_file()
+        for r in records:
+            if r.get("id") == entry_id:
+                return r
+    except Exception:
+        pass
+
+    # Tier 3: In-memory
+    for r in _HISTORY:
+        if r.get("id") == entry_id:
+            return r
+
+    raise HTTPException(status_code=404, detail="Verification not found")
 
 
 @router.get(
@@ -31,7 +111,7 @@ async def get_history(
 ) -> HistoryResponse:
     logger.info("GET /history | page=%d limit=%d", page, limit)
 
-    # Try Firestore first
+    # ── Tier 1: Firestore ─────────────────────────────────────────────────────
     try:
         from firebase_client import get_verifications, get_verification_count
         vf = verdict_filter.value if verdict_filter else None
@@ -55,9 +135,34 @@ async def get_history(
                 ],
             )
     except Exception as e:
-        logger.debug("Firestore history read failed (%s) — using in-memory store", e)
+        logger.debug("Firestore history unavailable (%s) — trying local file", e)
+
+    # ── Tier 2: Local JSON file ───────────────────────────────────────────────
+    # Load from file rather than in-memory list so data survives restarts.
+    file_entries = list(reversed(_load_history_file()))
+    if file_entries:
+        if verdict_filter:
+            file_entries = [e for e in file_entries if e.get("verdict") == verdict_filter.value]
+        total = len(file_entries)
+        start = (page - 1) * limit
+        paginated = file_entries[start : start + limit]
+        return HistoryResponse(
+            total=total,
+            entries=[
+                HistoryEntry(
+                    id=e["id"],
+                    timestamp=e["timestamp"],
+                    input_type=e.get("input_type", "text"),
+                    text_preview=e.get("text_preview", "")[:120],
+                    verdict=Verdict(e["verdict"]),
+                    confidence=e["confidence"],
+                    final_score=e["final_score"],
+                )
+                for e in paginated
+            ],
+        )
 
-    # In-memory fallback
+    # ── Tier 3: In-memory (last resort — resets on restart) ───────────────────
     entries = list(reversed(_HISTORY))
     if verdict_filter:
         entries = [e for e in entries if e.get("verdict") == verdict_filter.value]

api/routes/preview.py

@@ -0,0 +1,179 @@
+"""
+PhilVerify — URL Preview Route
+GET /preview?url=<encoded_url>
+
+Fetches Open Graph / meta tags from the given URL and returns a lightweight
+article card payload: title, description, image, site name, favicon, and domain.
+Used by the frontend to show a "link unfurl" preview before/after verification.
+"""
+import logging
+import re
+from urllib.parse import urlparse
+
+from fastapi import APIRouter, Query, HTTPException
+from pydantic import BaseModel
+from typing import Optional
+
+logger = logging.getLogger(__name__)
+router = APIRouter(prefix="/preview", tags=["Preview"])
+
+
+class URLPreview(BaseModel):
+    title: Optional[str] = None
+    description: Optional[str] = None
+    image: Optional[str] = None
+    site_name: Optional[str] = None
+    favicon: Optional[str] = None
+    domain: Optional[str] = None
+
+
+def _slug_to_title(url: str) -> Optional[str]:
+    """Convert URL path slug to a readable title.
+    e.g. 'remulla-chides-bulacan-guv-for-alleged-road-abuse-dont-act-like-a-king' →
+         'Remulla Chides Bulacan Guv For Alleged Road Abuse Dont Act Like A King'
+    """
+    parsed = urlparse(url)
+    segments = [s for s in parsed.path.split("/") if s and not s.isdigit() and len(s) > 4]
+    if segments:
+        slug = segments[-1]
+        # Remove common file extensions
+        slug = re.sub(r'\.(html?|php|aspx?)$', '', slug, flags=re.IGNORECASE)
+        # Strip UTM / query artifacts that leaked into path
+        slug = slug.split('?')[0]
+        return ' '.join(w.capitalize() for w in slug.replace('-', ' ').replace('_', ' ').split())
+    return None
+
+
+def _extract_preview(html: str, base_url: str, original_url: str = "") -> URLPreview:
+    """Parse OG / meta tags from raw HTML."""
+    from bs4 import BeautifulSoup
+
+    parsed_base = urlparse(base_url)
+    domain = parsed_base.netloc.replace("www.", "")
+    origin = f"{parsed_base.scheme}://{parsed_base.netloc}"
+
+    # Parse head first for speed, then fall back to full doc if needed
+    head_end = html.find("</head>")
+    head_html = html[:head_end + 7] if head_end != -1 else html[:8000]
+    soup_head = BeautifulSoup(head_html, "lxml")
+    # Also keep full soup for body-level og: tags some CDNs inject
+    soup_full = BeautifulSoup(html[:60_000], "lxml") if head_end == -1 or head_end > 60_000 else soup_head
+
+    def meta(soup, prop=None, name=None):
+        if prop:
+            el = soup.find("meta", property=prop) or soup.find("meta", attrs={"property": prop})
+        else:
+            el = soup.find("meta", attrs={"name": name})
+        return (el.get("content") or "").strip() if el else None
+
+    def m(prop=None, name=None):
+        return meta(soup_head, prop=prop, name=name) or meta(soup_full, prop=prop, name=name)
+
+    title = (
+        m(prop="og:title")
+        or m(name="twitter:title")
+        or (soup_head.title.get_text(strip=True) if soup_head.title else None)
+        or _slug_to_title(original_url or base_url)
+    )
+    description = (
+        m(prop="og:description")
+        or m(name="twitter:description")
+        or m(name="description")
+    )
+    image = (
+        m(prop="og:image")
+        or m(name="twitter:image")
+        or m(name="twitter:image:src")
+    )
+    site_name = m(prop="og:site_name") or domain
+
+    # Resolve relative image URLs
+    if image and image.startswith("//"):
+        image = f"{parsed_base.scheme}:{image}"
+    elif image and image.startswith("/"):
+        image = f"{origin}{image}"
+
+    # Favicon: try link[rel=icon], fallback to /favicon.ico
+    favicon = None
+    icon_el = (
+        soup_head.find("link", rel="icon")
+        or soup_head.find("link", rel="shortcut icon")
+        or soup_head.find("link", rel=lambda v: v and "icon" in v)
+    )
+    if icon_el and icon_el.get("href"):
+        href = icon_el["href"].strip()
+        if href.startswith("//"):
+            favicon = f"{parsed_base.scheme}:{href}"
+        elif href.startswith("/"):
+            favicon = f"{origin}{href}"
+        else:
+            favicon = href
+    else:
+        favicon = f"{origin}/favicon.ico"
+
+    return URLPreview(
+        title=title or None,
+        description=description or None,
+        image=image or None,
+        site_name=site_name or None,
+        favicon=favicon,
+        domain=domain,
+    )
+
+
+_BOT_TITLES = {
+    "just a moment", "attention required", "access denied", "please wait",
+    "checking your browser", "ddos-guard", "enable javascript", "403 forbidden",
+    "404 not found", "503 service unavailable",
+}
+
+
+@router.get("", response_model=URLPreview, summary="Fetch article preview (OG meta)")
+async def get_preview(url: str = Query(..., description="Article URL to preview")) -> URLPreview:
+    try:
+        import httpx
+    except ImportError:
+        raise HTTPException(status_code=500, detail="httpx not installed")
+
+    headers = {
+        "User-Agent": (
+            "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) "
+            "AppleWebKit/537.36 (KHTML, like Gecko) "
+            "Chrome/122.0.0.0 Safari/537.36"
+        ),
+        "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+        "Accept-Language": "en-US,en;q=0.5",
+    }
+
+    parsed = urlparse(url)
+    domain = parsed.netloc.replace("www.", "")
+    origin = f"{parsed.scheme}://{parsed.netloc}"
+    slug_title = _slug_to_title(url)
+
+    try:
+        async with httpx.AsyncClient(timeout=10, follow_redirects=True) as client:
+            resp = await client.get(url, headers=headers)
+            if resp.status_code >= 400:
+                logger.warning("Preview fetch returned %d for %s", resp.status_code, url)
+                return URLPreview(
+                    domain=domain,
+                    site_name=domain,
+                    title=slug_title,
+                    favicon=f"{origin}/favicon.ico",
+                )
+            preview = _extract_preview(resp.text, str(resp.url), original_url=url)
+            # If OG parsing returned no title, or got a bot-challenge page title, fall back to slug
+            if not preview.title or preview.title.lower().strip() in _BOT_TITLES:
+                preview.title = slug_title
+                # Don't keep description/image from a bot-challenge page
+                preview.description = None
+                preview.image = None
+            return preview
+    except Exception as exc:
+        logger.warning("Preview fetch failed for %s: %s", url, exc)
+        return URLPreview(
+            domain=domain,
+            site_name=domain,
+            title=slug_title,
+            favicon=f"{origin}/favicon.ico",
+        )

api/routes/trends.py

@@ -10,8 +10,33 @@ from api.schemas import TrendsResponse, TrendingEntity, TrendingTopic, Verdict
 logger = logging.getLogger(__name__)
 router = APIRouter(prefix="/trends", tags=["Trends"])
 
-# Reads from the same in-memory store as history (Phase 7 → DB aggregation).
-from api.routes.history import _HISTORY
+
+def _load_all_history() -> list[dict]:
+    """
+    Return all history records from the best available source:
+      1. Firestore  2. Local JSON file  3. In-memory list (fallback)
+    """
+    # Tier 1: Firestore
+    try:
+        from firebase_client import get_all_verifications_sync
+        records = get_all_verifications_sync()
+        if records:
+            return records
+    except Exception:
+        pass
+
+    # Tier 2: Local JSON file (persists across restarts)
+    try:
+        from api.routes.history import _load_history_file
+        records = _load_history_file()
+        if records:
+            return records
+    except Exception:
+        pass
+
+    # Tier 3: In-memory (empty after restart, but keeps current session data)
+    from api.routes.history import _HISTORY
+    return list(_HISTORY)
 
 
 @router.get(
@@ -26,13 +51,15 @@ async def get_trends(
 ) -> TrendsResponse:
     logger.info("GET /trends | days=%d", days)
 
+    all_history = _load_all_history()
+
     entity_counter: Counter = Counter()
     entity_type_map: dict[str, str] = {}
     entity_fake_counter: Counter = Counter()
     topic_counter: Counter = Counter()
     topic_verdict_map: dict[str, list[str]] = {}
 
-    for entry in _HISTORY:
+    for entry in all_history:
         is_fake = entry.get("verdict") in (Verdict.LIKELY_FAKE.value, Verdict.UNVERIFIED.value)
         entities = entry.get("entities", {})
 
@@ -81,4 +108,37 @@ async def get_trends(
         for topic, count in topic_counter.most_common(limit)
     ]
 
-    return TrendsResponse(top_entities=top_entities, top_topics=top_topics)
+    # ── Verdict distribution totals ───────────────────────────────────────────────
+    verdict_dist: dict[str, int] = {"Credible": 0, "Unverified": 0, "Likely Fake": 0}
+    day_map: dict[str, dict[str, int]] = {}   # date → {Credible, Unverified, Likely Fake}
+
+    for entry in all_history:
+        v = entry.get("verdict", "Unverified")
+        if v in verdict_dist:
+            verdict_dist[v] += 1
+
+        ts = entry.get("timestamp", "")
+        date_key = ts[:10] if ts else ""   # YYYY-MM-DD prefix
+        if date_key:
+            bucket = day_map.setdefault(date_key, {"Credible": 0, "Unverified": 0, "Likely Fake": 0})
+            if v in bucket:
+                bucket[v] += 1
+
+    from api.schemas import VerdictDayPoint
+    verdict_by_day = [
+        VerdictDayPoint(
+            date=d,
+            credible=day_map[d]["Credible"],
+            unverified=day_map[d]["Unverified"],
+            fake=day_map[d]["Likely Fake"],
+        )
+        for d in sorted(day_map.keys())
+    ]
+
+    return TrendsResponse(
+        top_entities=top_entities,
+        top_topics=top_topics,
+        verdict_distribution=verdict_dist,
+        verdict_by_day=verdict_by_day,
+    )
+

api/routes/verify.py

@@ -67,6 +67,10 @@ async def verify_url(body: URLVerifyRequest) -> VerificationResponse:
         return result
     except HTTPException:
         raise
+    except ValueError as exc:
+        # Expected user-facing errors (e.g. robots.txt block, bad URL)
+        logger.warning("verify/url rejected: %s", exc)
+        raise HTTPException(status_code=422, detail=str(exc)) from exc
     except Exception as exc:
         logger.exception("verify/url error: %s", exc)
         raise HTTPException(status_code=500, detail=f"URL verification failed: {exc}") from exc

api/schemas.py

@@ -138,9 +138,24 @@ class TrendingTopic(BaseModel):
     dominant_verdict: Verdict
 
 
+class VerdictDayPoint(BaseModel):
+    date: str          # YYYY-MM-DD
+    credible: int = 0
+    unverified: int = 0
+    fake: int = 0
+
+
 class TrendsResponse(BaseModel):
     top_entities: list[TrendingEntity]
     top_topics: list[TrendingTopic]
+    verdict_distribution: dict[str, int] = Field(
+        default_factory=dict,
+        description="Counts per verdict: Credible, Unverified, Likely Fake",
+    )
+    verdict_by_day: list[VerdictDayPoint] = Field(
+        default_factory=list,
+        description="Day-by-day verdict counts for the area chart (last N days)",
+    )
 
 
 # ── Error ─────────────────────────────────────────────────────────────────────

deploy.sh

@@ -0,0 +1,78 @@
+#!/usr/bin/env bash
+# ── PhilVerify — Firebase + Cloud Run Deployment Script ───────────────────────
+# Usage:
+#   chmod +x deploy.sh
+#   ./deploy.sh YOUR_GCP_PROJECT_ID
+#
+# Prerequisites:
+#   brew install google-cloud-sdk firebase-cli
+#   gcloud auth login
+#   gcloud auth configure-docker
+#   firebase login
+
+set -euo pipefail
+
+PROJECT_ID="${1:-}"
+REGION="asia-southeast1"
+SERVICE_NAME="philverify-api"
+IMAGE="gcr.io/${PROJECT_ID}/${SERVICE_NAME}"
+
+if [[ -z "$PROJECT_ID" ]]; then
+  echo "Usage: ./deploy.sh YOUR_GCP_PROJECT_ID"
+  exit 1
+fi
+
+echo "▶ Project: $PROJECT_ID | Region: $REGION | Service: $SERVICE_NAME"
+
+# ── 1. Set GCP project ────────────────────────────────────────────────────────
+gcloud config set project "$PROJECT_ID"
+
+# ── 2. Build + push Docker image to GCR ──────────────────────────────────────
+echo ""
+echo "▶ Building & pushing Docker image (this takes ~10 min first time)…"
+gcloud builds submit \
+  --tag "$IMAGE" \
+  --timeout=30m \
+  .
+
+# ── 3. Deploy to Cloud Run ────────────────────────────────────────────────────
+echo ""
+echo "▶ Deploying to Cloud Run…"
+gcloud run deploy "$SERVICE_NAME" \
+  --image "$IMAGE" \
+  --region "$REGION" \
+  --platform managed \
+  --allow-unauthenticated \
+  --memory 4Gi \
+  --cpu 2 \
+  --concurrency 10 \
+  --timeout 300 \
+  --min-instances 1 \
+  --max-instances 3 \
+  --set-env-vars "APP_ENV=production,DEBUG=false,LOG_LEVEL=INFO" \
+  --set-env-vars "ALLOWED_ORIGINS=https://${PROJECT_ID}.web.app,https://${PROJECT_ID}.firebaseapp.com"
+  # Add secrets like NEWS_API_KEY via:
+  # --update-secrets NEWS_API_KEY=philverify-news-api-key:latest
+
+# ── 4. Link Firebase project ──────────────────────────────────────────────────
+echo ""
+echo "▶ Setting Firebase project…"
+firebase use "$PROJECT_ID"
+
+# ── 5. Build React frontend ───────────────────────────────────────────────────
+echo ""
+echo "▶ Building React frontend…"
+cd frontend
+npm ci
+npm run build
+cd ..
+
+# ── 6. Deploy to Firebase Hosting ────────────────────────────────────────────
+echo ""
+echo "▶ Deploying to Firebase Hosting…"
+firebase deploy --only hosting,firestore
+
+echo ""
+echo "✅  Deploy complete!"
+echo "   Frontend: https://${PROJECT_ID}.web.app"
+echo "   API:      https://${PROJECT_ID}.web.app/api/health"

evidence/domain_credibility.py

@@ -0,0 +1,150 @@
+"""
+PhilVerify — Domain Credibility Module (Phase 5)
+Wraps domain_credibility.json to provide structured tier lookups
+for evidence source URLs and news article domains.
+
+Tiers:
+  Tier 1 (CREDIBLE)       — Established PH news orgs (Rappler, Inquirer, GMA, etc.)
+  Tier 2 (SATIRE_OPINION) — Satire, opinion blogs, entertainment
+  Tier 3 (SUSPICIOUS)     — Unknown / newly registered / low authority
+  Tier 4 (KNOWN_FAKE)     — Vera Files blacklisted fake news sites
+"""
+import json
+import logging
+import re
+from dataclasses import dataclass
+from enum import IntEnum
+from pathlib import Path
+from urllib.parse import urlparse
+import functools
+
+logger = logging.getLogger(__name__)
+
+_DB_PATH = Path(__file__).parent.parent / "domain_credibility.json"
+
+# Score adjustments per tier (applied in scoring engine)
+TIER_SCORE_ADJUSTMENT: dict[int, float] = {
+    1: +20.0,   # Established PH news — credibility boost
+    2:  -5.0,   # Satire/opinion — mild penalty
+    3: -10.0,   # Unknown — moderate penalty
+    4: -35.0,   # Known fake — heavy penalty
+}
+
+TIER_LABELS: dict[int, str] = {
+    1: "Credible",
+    2: "Satire/Opinion",
+    3: "Suspicious",
+    4: "Known Fake",
+}
+
+
+class DomainTier(IntEnum):
+    CREDIBLE = 1
+    SATIRE_OPINION = 2
+    SUSPICIOUS = 3
+    KNOWN_FAKE = 4
+
+
+@dataclass
+class DomainResult:
+    domain: str
+    tier: DomainTier
+    tier_label: str
+    score_adjustment: float
+    matched_entry: str | None = None   # Which entry in the JSON matched
+
+
+@functools.lru_cache(maxsize=1)
+def _load_db() -> dict:
+    """Load and cache the domain_credibility.json file."""
+    try:
+        data = json.loads(_DB_PATH.read_text())
+        total = sum(len(v.get("domains", [])) for v in data.values())
+        logger.info("domain_credibility.json loaded — %d domains across %d tiers", total, len(data))
+        return data
+    except Exception as e:
+        logger.error("Failed to load domain_credibility.json: %s", e)
+        return {}
+
+
+def extract_domain(url_or_domain: str) -> str:
+    """
+    Normalize a URL or raw domain string to a bare hostname.
+
+    Examples:
+        "https://www.rappler.com/news/..." → "rappler.com"
+        "www.gmanetwork.com"              → "gmanetwork.com"
+        "inquirer.net"                    → "inquirer.net"
+    """
+    if not url_or_domain:
+        return ""
+    raw = url_or_domain.strip().lower()
+    # Add scheme if missing so urlparse works correctly
+    if not raw.startswith(("http://", "https://")):
+        raw = "https://" + raw
+    try:
+        hostname = urlparse(raw).hostname or ""
+        # Strip leading www.
+        hostname = re.sub(r"^www\.", "", hostname)
+        return hostname
+    except Exception:
+        # Last resort — strip www. manually
+        return re.sub(r"^www\.", "", raw.split("/")[0])
+
+
+def lookup_domain(url_or_domain: str) -> DomainResult:
+    """
+    Classify a domain/URL against the credibility tier database.
+
+    Args:
+        url_or_domain: Full URL or bare domain name.
+
+    Returns:
+        DomainResult — Tier 3 (Suspicious) by default for unknown domains.
+    """
+    domain = extract_domain(url_or_domain)
+    if not domain:
+        return _make_result("", DomainTier.SUSPICIOUS, None)
+
+    db = _load_db()
+
+    for tier_key, tier_data in db.items():
+        tier_num = int(tier_key[-1])            # "tier1" → 1
+        for entry in tier_data.get("domains", []):
+            # Match exact domain or subdomain of listed domain
+            if domain == entry or domain.endswith(f".{entry}"):
+                return _make_result(domain, DomainTier(tier_num), entry)
+
+    # Not found → Tier 3 (Suspicious/Unknown)
+    logger.debug("Domain '%s' not in credibility DB — defaulting to Tier 3 (Suspicious)", domain)
+    return _make_result(domain, DomainTier.SUSPICIOUS, None)
+
+
+def _make_result(domain: str, tier: DomainTier, matched_entry: str | None) -> DomainResult:
+    return DomainResult(
+        domain=domain,
+        tier=tier,
+        tier_label=TIER_LABELS[tier.value],
+        score_adjustment=TIER_SCORE_ADJUSTMENT[tier.value],
+        matched_entry=matched_entry,
+    )
+
+
+def get_tier_score(url_or_domain: str) -> float:
+    """
+    Convenience: return just the score adjustment for a domain.
+    Positive = credibility boost, negative = penalty.
+    """
+    return lookup_domain(url_or_domain).score_adjustment
+
+
+def is_blacklisted(url_or_domain: str) -> bool:
+    """Return True if the domain is a known fake news / blacklisted site."""
+    return lookup_domain(url_or_domain).tier == DomainTier.KNOWN_FAKE
+
+
+def describe_tier(tier: DomainTier) -> str:
+    """Human-readable tier description for API responses."""
+    db = _load_db()
+    key = f"tier{tier.value}"
+    return db.get(key, {}).get("description", TIER_LABELS[tier.value])

evidence/news_fetcher.py

@@ -1,20 +1,46 @@
 """
 PhilVerify — Evidence Retrieval Module
-Fetches related articles from NewsAPI, computes cosine similarity,
-and produces an evidence score for Layer 2 of the scoring engine.
+Fetches related articles from two sources and merges the results:
+  1. Google News RSS (gl=PH) — free, no API key, PH-indexed, primary source
+  2. NewsAPI /everything  — broader English coverage, requires API key
+
+Google News RSS is always attempted first since it covers local PH outlets
+(GMA, Inquirer, Rappler, CNN Philippines, PhilStar, etc.) far better than
+NewsAPI's free tier index.
 """
+import asyncio
 import logging
 import hashlib
+import xml.etree.ElementTree as ET
+import urllib.parse
 from dataclasses import dataclass, field
 from pathlib import Path
 import json
 
 logger = logging.getLogger(__name__)
 
-# Simple file-based cache to respect NewsAPI 100 req/day free tier limit
+# ── Cache ─────────────────────────────────────────────────────────────────────
+# Shared cache for both sources. NewsAPI free tier = 100 req/day.
+# Google News RSS has no hard limit but we cache anyway to stay polite.
 _CACHE_DIR = Path(__file__).parent.parent / ".cache" / "newsapi"
 _CACHE_DIR.mkdir(parents=True, exist_ok=True)
 
+# ── Philippine news domains (used to boost Google News RSS results) ───────────
+_PH_DOMAINS = {
+    "rappler.com", "inquirer.net", "gmanetwork.com", "philstar.com",
+    "manilatimes.net", "mb.com.ph", "abs-cbn.com", "cnnphilippines.com",
+    "pna.gov.ph", "sunstar.com.ph", "businessmirror.com.ph",
+    "businessworld.com.ph", "malaya.com.ph", "marikina.gov.ph",
+    "verafiles.org", "pcij.org", "interaksyon.philstar.com",
+}
+
+# NewsAPI domains filter — restricts results to PH outlets when API key is set
+_NEWSAPI_PH_DOMAINS = ",".join([
+    "rappler.com", "inquirer.net", "gmanetwork.com", "philstar.com",
+    "manilatimes.net", "mb.com.ph", "abs-cbn.com", "cnnphilippines.com",
+    "pna.gov.ph", "sunstar.com.ph", "businessmirror.com.ph",
+])
+
 
 @dataclass
 class ArticleResult:
@@ -36,8 +62,8 @@ class EvidenceResult:
     claim_used: str = ""
 
 
-def _cache_key(claim: str) -> str:
-    return hashlib.md5(claim.lower().strip().encode()).hexdigest()
+def _cache_key(prefix: str, claim: str) -> str:
+    return f"{prefix}_{hashlib.md5(claim.lower().strip().encode()).hexdigest()}"
 
 
 def _load_cache(key: str) -> list[dict] | None:
@@ -52,41 +78,230 @@ def _load_cache(key: str) -> list[dict] | None:
 
 def _save_cache(key: str, data: list[dict]) -> None:
     path = _CACHE_DIR / f"{key}.json"
-    path.write_text(json.dumps(data))
+    try:
+        path.write_text(json.dumps(data))
+    except Exception:
+        pass
+
+
+def _extract_domain(url: str) -> str:
+    """Return bare domain from a URL string."""
+    try:
+        from urllib.parse import urlparse
+        host = urlparse(url).hostname or ""
+        return host.removeprefix("www.")
+    except Exception:
+        return ""
+
+
+def _is_ph_article(article: dict) -> bool:
+    """
+    Return True if the article appears to be from a Philippine outlet.
+    Checks the source name since Google News RSS links are redirect URLs.
+    """
+    src = (article.get("source", {}) or {}).get("name", "").lower()
+    url = article.get("url", "").lower()
+    # Direct domain match on URL (works for NewsAPI results)
+    if _extract_domain(url) in _PH_DOMAINS:
+        return True
+    # Source-name match (works for Google News RSS redirect URLs)
+    _PH_SOURCE_KEYWORDS = {
+        "rappler", "inquirer", "gma", "abs-cbn", "cnn philippines",
+        "philstar", "manila times", "manila bulletin", "sunstar",
+        "businessworld", "business mirror", "malaya", "philippine news agency",
+        "pna", "vera files", "pcij", "interaksyon",
+    }
+    return any(kw in src for kw in _PH_SOURCE_KEYWORDS)
+
+
+def _build_query(claim: str, entities: list[str] | None) -> str:
+    """Build a concise search query from entities or the first words of the claim."""
+    if entities:
+        return " ".join(entities[:3])
+    words = claim.split()
+    return " ".join(words[:6])
+
+
+# ── Google News RSS ───────────────────────────────────────────────────────────
+
+def _fetch_gnews_rss(query: str, max_results: int = 5) -> list[dict]:
+    """
+    Fetch articles from Google News RSS scoped to the Philippines.
+    Returns a list of dicts in the same shape as NewsAPI articles so the
+    rest of the pipeline can treat both sources uniformly.
+    No API key required.
+    """
+    encoded = urllib.parse.quote(query)
+    url = (
+        f"https://news.google.com/rss/search"
+        f"?q={encoded}&gl=PH&hl=en-PH&ceid=PH:en"
+    )
+    try:
+        import requests as req_lib
+        resp = req_lib.get(url, headers={"User-Agent": "PhilVerify/1.0"}, timeout=10)
+        resp.raise_for_status()
+        raw = resp.content
+        root = ET.fromstring(raw)
+        channel = root.find("channel")
+        if channel is None:
+            return []
+
+        articles: list[dict] = []
+        for item in channel.findall("item")[:max_results]:
+            title_el = item.find("title")
+            link_el  = item.find("link")
+            desc_el  = item.find("description")
+            pub_el   = item.find("pubDate")
+            src_el   = item.find("source")
+
+            title       = title_el.text if title_el is not None else ""
+            link        = link_el.text  if link_el  is not None else ""
+            description = desc_el.text  if desc_el  is not None else ""
+            pub_date    = pub_el.text   if pub_el   is not None else ""
+            src_name    = src_el.text   if src_el   is not None else _extract_domain(link)
+
+            # Google News titles often include "- Source" suffix — strip it
+            if src_name and title.endswith(f" - {src_name}"):
+                title = title[: -(len(src_name) + 3)].strip()
 
+            articles.append({
+                "title":       title,
+                "url":         link,
+                "description": description or title,
+                "publishedAt": pub_date,
+                "source":      {"name": src_name},
+                "_gnews":      True,   # Tag so we can log the origin
+            })
 
-async def fetch_evidence(claim: str, api_key: str, max_results: int = 5) -> list[dict]:
-    """Fetch top articles from NewsAPI for the given claim. Cached."""
-    key = _cache_key(claim)
-    cached = _load_cache(key)
-    if cached is not None:
-        logger.info("NewsAPI cache hit for claim hash %s", key[:8])
-        return cached
+        logger.info(
+            "Google News RSS (PH) returned %d articles for query '%s...'",
+            len(articles), query[:40],
+        )
+        return articles
 
-    if not api_key:
-        logger.warning("NEWS_API_KEY not set — returning empty evidence")
+    except Exception as exc:
+        logger.warning("Google News RSS fetch failed: %s", exc)
         return []
 
+
+# ── NewsAPI ───────────────────────────────────────────────────────────────────
+
+def _fetch_newsapi(query: str, api_key: str, max_results: int = 5) -> list[dict]:
+    """
+    Fetch from NewsAPI /everything, restricted to PH domains.
+    Falls back to global search if the PH-domains query returns < 2 results.
+    """
     try:
         from newsapi import NewsApiClient
         client = NewsApiClient(api_key=api_key)
-        # Use first 100 chars of claim as query
-        query = claim[:100]
+
+        # Try Philippine outlets first
         resp = client.get_everything(
             q=query,
+            domains=_NEWSAPI_PH_DOMAINS,
             language="en",
             sort_by="relevancy",
             page_size=max_results,
         )
         articles = resp.get("articles", [])
-        _save_cache(key, articles)
-        logger.info("NewsAPI returned %d articles for query '%s...'", len(articles), query[:30])
+
+        # If PH domains yield nothing useful, fall back to global
+        if len(articles) < 2:
+            logger.debug("NewsAPI PH-domains sparse (%d) — retrying global", len(articles))
+            resp = client.get_everything(
+                q=query,
+                language="en",
+                sort_by="relevancy",
+                page_size=max_results,
+            )
+            articles = resp.get("articles", [])
+
+        logger.info(
+            "NewsAPI returned %d articles for query '%s...'",
+            len(articles), query[:40],
+        )
         return articles
-    except Exception as e:
-        logger.warning("NewsAPI fetch error: %s", e)
+    except Exception as exc:
+        logger.warning("NewsAPI fetch error: %s", exc)
         return []
 
 
+# ── Public API ────────────────────────────────────────────────────────────────
+
+async def fetch_evidence(
+    claim: str,
+    api_key: str,
+    entities: list[str] = None,
+    max_results: int = 5,
+) -> list[dict]:
+    """
+    Fetch the most relevant articles for a claim by merging:
+      1. Google News RSS (PH-scoped) — always attempted, no key needed
+      2. NewsAPI                      — only when NEWS_API_KEY is configured
+
+    Results are deduplicated by domain and capped at max_results.
+    PH-domain articles are surfaced first so scoring reflects local coverage.
+    """
+    query = _build_query(claim, entities)
+
+    # ── Google News RSS (check cache) ─────────────────────────────────────────
+    gnews_key = _cache_key("gnews", query)
+    gnews_articles = _load_cache(gnews_key)
+    if gnews_articles is None:
+        # Run blocking RSS fetch in a thread so we don't block the event loop
+        gnews_articles = await asyncio.get_event_loop().run_in_executor(
+            None, _fetch_gnews_rss, query, max_results
+        )
+        _save_cache(gnews_key, gnews_articles)
+    else:
+        logger.info("Google News RSS cache hit for query hash %s", gnews_key[-8:])
+
+    # ── NewsAPI (check cache) ─────────────────────────────────────────────────
+    newsapi_articles: list[dict] = []
+    if api_key:
+        newsapi_key = _cache_key("newsapi", query)
+        newsapi_articles = _load_cache(newsapi_key)
+        if newsapi_articles is None:
+            newsapi_articles = await asyncio.get_event_loop().run_in_executor(
+                None, _fetch_newsapi, query, api_key, max_results
+            )
+            _save_cache(newsapi_key, newsapi_articles)
+        else:
+            logger.info("NewsAPI cache hit for query hash %s", newsapi_key[-8:])
+
+    # ── Merge: PH articles first, then global, deduplicated by domain ─────────
+    seen_domains: set[str] = set()
+    merged: list[dict] = []
+
+    def _add(articles: list[dict]) -> None:
+        for art in articles:
+            url = art.get("url", "")
+            domain = _extract_domain(url)
+            # For Google News redirect URLs, deduplicate by source name instead
+            dedup_key = domain if domain and "google.com" not in domain \
+                        else (art.get("source", {}) or {}).get("name", url)
+            if dedup_key and dedup_key in seen_domains:
+                continue
+            if dedup_key:
+                seen_domains.add(dedup_key)
+            merged.append(art)
+
+    # PH-source Google News articles go first
+    ph_gnews    = [a for a in gnews_articles if _is_ph_article(a)]
+    other_gnews = [a for a in gnews_articles if not _is_ph_article(a)]
+
+    _add(ph_gnews)
+    _add(newsapi_articles)
+    _add(other_gnews)  # non-PH Google News last
+
+    result = merged[:max_results]
+    logger.info(
+        "Evidence merged: %d PH-gnews + %d newsapi + %d other → %d final",
+        len(ph_gnews), len(newsapi_articles), len(other_gnews), len(result),
+    )
+    return result
+
+
 def compute_similarity(claim: str, article_text: str) -> float:
     """
     Compute cosine similarity between claim and article using sentence-transformers.

evidence/similarity.py

@@ -0,0 +1,80 @@
+"""
+PhilVerify — Similarity Module (Phase 5)
+Computes semantic similarity between a claim and evidence article text.
+Primary:  sentence-transformers/all-MiniLM-L6-v2 (cosine similarity)
+Fallback: Jaccard word-overlap similarity
+"""
+import logging
+import functools
+
+logger = logging.getLogger(__name__)
+
+# Lazy-load the model at first use — avoids blocking app startup
+@functools.lru_cache(maxsize=1)
+def _get_model():
+    """Load sentence-transformer model once and cache it."""
+    try:
+        from sentence_transformers import SentenceTransformer
+        model = SentenceTransformer("all-MiniLM-L6-v2")
+        logger.info("sentence-transformers model loaded: all-MiniLM-L6-v2")
+        return model
+    except Exception as e:
+        logger.warning("sentence-transformers unavailable (%s) — Jaccard fallback active", e)
+        return None
+
+
+def compute_similarity(claim: str, article_text: str) -> float:
+    """
+    Compute semantic similarity between a fact-check claim and an article.
+
+    Args:
+        claim:        The extracted falsifiable claim sentence.
+        article_text: Title + description of a retrieved news article.
+
+    Returns:
+        Float in [0.0, 1.0] — higher means more semantically related.
+    """
+    if not claim or not article_text:
+        return 0.0
+
+    model = _get_model()
+    if model is not None:
+        try:
+            from sentence_transformers import util
+            emb_claim = model.encode(claim, convert_to_tensor=True)
+            emb_article = model.encode(article_text[:512], convert_to_tensor=True)
+            score = float(util.cos_sim(emb_claim, emb_article)[0][0])
+            return round(max(0.0, min(1.0, score)), 4)
+        except Exception as e:
+            logger.warning("Embedding similarity failed (%s) — falling back to Jaccard", e)
+
+    # Jaccard token-overlap fallback
+    return _jaccard_similarity(claim, article_text)
+
+
+def _jaccard_similarity(a: str, b: str) -> float:
+    """Simple set-based Jaccard similarity on word tokens."""
+    tokens_a = set(a.lower().split())
+    tokens_b = set(b.lower().split())
+    if not tokens_a or not tokens_b:
+        return 0.0
+    intersection = tokens_a & tokens_b
+    union = tokens_a | tokens_b
+    return round(len(intersection) / len(union), 4)
+
+
+def rank_articles_by_similarity(claim: str, articles: list[dict]) -> list[dict]:
+    """
+    Annotate and sort a list of NewsAPI article dicts by similarity to the claim.
+
+    Each article dict gets a `similarity` key added.
+    Returns articles sorted descending by similarity.
+    """
+    scored = []
+    for article in articles:
+        article_text = f"{article.get('title', '')} {article.get('description', '')}"
+        sim = compute_similarity(claim, article_text)
+        scored.append({**article, "similarity": sim})
+
+    scored.sort(key=lambda x: x["similarity"], reverse=True)
+    return scored

evidence/stance_detector.py

@@ -0,0 +1,194 @@
+"""
+PhilVerify — Stance Detection Module (Phase 5)
+Classifies the relationship between a claim and a retrieved evidence article.
+
+Stance labels:
+  Supports        — article content supports the claim
+  Refutes         — article content contradicts / debunks the claim
+  Not Enough Info — article is related but not conclusive either way
+
+Strategy (rule-based hybrid — no heavy model dependency):
+  1. Keyword scan of title + description for refutation/support signals
+  2. Similarity threshold guard — low similarity → NEI
+  3. Factuality keywords override similarity-based detection
+"""
+import logging
+import re
+from dataclasses import dataclass
+from enum import Enum
+
+logger = logging.getLogger(__name__)
+
+
+class Stance(str, Enum):
+    SUPPORTS = "Supports"
+    REFUTES = "Refutes"
+    NOT_ENOUGH_INFO = "Not Enough Info"
+
+
+# ── Keyword Lists ─────────────────────────────────────────────────────────────
+# Ordered: check REFUTATION first (stronger signal), then SUPPORT
+_REFUTATION_KEYWORDS = [
+    # Fact-check verdicts
+    r"\bfact.?check\b", r"\bfalse\b", r"\bfake\b", r"\bhoax\b",
+    r"\bdebunked\b", r"\bmisinformation\b", r"\bdisinformation\b",
+    r"\bnot true\b", r"\bno evidence\b", r"\bunverified\b",
+    r"\bcorrection\b", r"\bretract\b", r"\bwrong\b", r"\bdenied\b",
+    r"\bscam\b", r"\bsatire\b",
+    # Filipino equivalents
+    r"\bkasinungalingan\b", r"\bhindi totoo\b", r"\bpeke\b",
+]
+
+_SUPPORT_KEYWORDS = [
+    r"\bconfirmed\b", r"\bverified\b", r"\bofficial\b", r"\bproven\b",
+    r"\btrue\b", r"\blegitimate\b", r"\baccurate\b", r"\bauthorized\b",
+    r"\breal\b", r"\bgenuine\b",
+    # Filipino equivalents
+    r"\btotoo\b", r"\bkumpirmado\b", r"\bopisyal\b",
+]
+
+# Articles from these PH fact-check domains always → Refutes regardless of content
+_FACTCHECK_DOMAINS = {
+    "vera-files.org", "verafiles.org", "factcheck.afp.com",
+    "rappler.com/newsbreak/fact-check", "cnn.ph/fact-check",
+}
+
+# Similarity threshold: below this → NEI even with support keywords
+_SIMILARITY_NEI_THRESHOLD = 0.15
+# Similarity above this + support keywords → Supports
+_SIMILARITY_SUPPORT_THRESHOLD = 0.35
+
+
+@dataclass
+class StanceResult:
+    stance: Stance
+    confidence: float         # 0.0–1.0 — how confident we are in this label
+    matched_keywords: list[str]
+    reason: str
+
+
+def detect_stance(
+    claim: str,
+    article_title: str,
+    article_description: str,
+    article_url: str = "",
+    similarity: float = 0.0,
+) -> StanceResult:
+    """
+    Detect the stance of an article relative to the claim.
+
+    Args:
+        claim:               The extracted falsifiable claim.
+        article_title:       NewsAPI article title.
+        article_description: NewsAPI article description.
+        article_url:         Article URL (used for fact-check domain detection).
+        similarity:          Pre-computed cosine similarity score (0–1).
+
+    Returns:
+        StanceResult with stance label, confidence, and reason.
+    """
+    # Combine article text for keyword search
+    article_text = f"{article_title} {article_description}".lower()
+
+    # ── Rule 0: Known fact-check domain → always Refutes ──────────────────────
+    if article_url:
+        for fc_domain in _FACTCHECK_DOMAINS:
+            if fc_domain in article_url.lower():
+                return StanceResult(
+                    stance=Stance.REFUTES,
+                    confidence=0.90,
+                    matched_keywords=[fc_domain],
+                    reason="Known Philippine fact-check domain",
+                )
+
+    # ── Rule 1: Similarity floor — too low to make any claim ──────────────────
+    if similarity < _SIMILARITY_NEI_THRESHOLD:
+        return StanceResult(
+            stance=Stance.NOT_ENOUGH_INFO,
+            confidence=0.80,
+            matched_keywords=[],
+            reason=f"Low similarity ({similarity:.2f}) — article not related to claim",
+        )
+
+    # ── Rule 2: Scan for refutation keywords ──────────────────────────────────
+    refutation_hits = _scan_keywords(article_text, _REFUTATION_KEYWORDS)
+    if refutation_hits:
+        confidence = min(0.95, 0.65 + len(refutation_hits) * 0.10)
+        return StanceResult(
+            stance=Stance.REFUTES,
+            confidence=round(confidence, 2),
+            matched_keywords=refutation_hits,
+            reason=f"Refutation signal detected: {', '.join(refutation_hits[:3])}",
+        )
+
+    # ── Rule 3: Scan for support keywords + similarity threshold ──────────────
+    support_hits = _scan_keywords(article_text, _SUPPORT_KEYWORDS)
+    if support_hits and similarity >= _SIMILARITY_SUPPORT_THRESHOLD:
+        confidence = min(0.90, 0.50 + len(support_hits) * 0.10 + similarity * 0.20)
+        return StanceResult(
+            stance=Stance.SUPPORTS,
+            confidence=round(confidence, 2),
+            matched_keywords=support_hits,
+            reason=f"Support signal + similarity {similarity:.2f}: {', '.join(support_hits[:3])}",
+        )
+
+    # ── Default: Not Enough Info ───────────────────────────────────────────────
+    return StanceResult(
+        stance=Stance.NOT_ENOUGH_INFO,
+        confidence=0.70,
+        matched_keywords=[],
+        reason="No conclusive support or refutation signals found",
+    )
+
+
+def _scan_keywords(text: str, patterns: list[str]) -> list[str]:
+    """Return list of matched keyword patterns found in text."""
+    hits = []
+    for pattern in patterns:
+        match = re.search(pattern, text, re.IGNORECASE)
+        if match:
+            hits.append(match.group(0))
+    return hits
+
+
+def compute_evidence_score(
+    stances: list[StanceResult],
+    similarities: list[float],
+) -> tuple[float, str]:
+    """
+    Aggregate multiple article stances into a single evidence score (0–100)
+    and an overall Layer 2 verdict.
+
+    Scoring:
+      - Start at neutral 50
+      - Each Supports article: +10 × similarity bonus
+      - Each Refutes article: -15 penalty (stronger signal)
+      - NEI articles: no effect
+
+    Returns:
+        (evidence_score, verdict_label)
+    """
+    if not stances:
+        return 50.0, "Unverified"
+
+    score = 50.0
+    supporting = [s for s in stances if s.stance == Stance.SUPPORTS]
+    refuting = [s for s in stances if s.stance == Stance.REFUTES]
+
+    for i, stance in enumerate(stances):
+        sim = similarities[i] if i < len(similarities) else 0.5
+        if stance.stance == Stance.SUPPORTS:
+            score += 10.0 * (0.5 + sim)
+        elif stance.stance == Stance.REFUTES:
+            score -= 15.0 * stance.confidence
+
+    score = round(max(0.0, min(100.0, score)), 1)
+
+    if len(refuting) > len(supporting):
+        verdict = "Likely Fake"
+    elif len(supporting) >= 2 and score >= 60:
+        verdict = "Credible"
+    else:
+        verdict = "Unverified"
+
+    return score, verdict

extension/background.js

@@ -0,0 +1,171 @@
+/**
+ * PhilVerify — Background Service Worker (Manifest V3)
+ *
+ * Responsibilities:
+ *  - Proxy API calls to the PhilVerify FastAPI backend
+ *  - File-based cache via chrome.storage.local (24-hour TTL, max 50 entries)
+ *  - Maintain personal verification history
+ *  - Respond to messages from content.js and popup.js
+ *
+ * Message types handled:
+ *  VERIFY_TEXT  { text }        → VerificationResponse
+ *  VERIFY_URL   { url }         → VerificationResponse
+ *  GET_HISTORY  {}              → { history: HistoryEntry[] }
+ *  GET_SETTINGS {}              → { apiBase, autoScan }
+ *  SAVE_SETTINGS { apiBase, autoScan } → {}
+ */
+
+const CACHE_TTL_MS = 24 * 60 * 60 * 1000   // 24 hours
+const MAX_HISTORY  = 50
+
+// ── Default settings ──────────────────────────────────────────────────────────
+const DEFAULT_SETTINGS = {
+  apiBase:  'http://localhost:8000',
+  autoScan: true,    // Automatically scan Facebook feed posts
+}
+
+// ── Utilities ─────────────────────────────────────────────────────────────────
+/** Validate that a string is a safe http/https URL */
+function isHttpUrl(str) {
+  if (!str || typeof str !== 'string') return false
+  try {
+    const u = new URL(str)
+    return u.protocol === 'http:' || u.protocol === 'https:'
+  } catch { return false }
+}
+async function sha256prefix(text, len = 16) {
+  const buf = await crypto.subtle.digest(
+    'SHA-256',
+    new TextEncoder().encode(text.trim().toLowerCase()),
+  )
+  return Array.from(new Uint8Array(buf))
+    .map(b => b.toString(16).padStart(2, '0'))
+    .join('')
+    .slice(0, len)
+}
+
+async function getSettings() {
+  const stored = await chrome.storage.local.get('settings')
+  return { ...DEFAULT_SETTINGS, ...(stored.settings ?? {}) }
+}
+
+// ── Cache helpers ─────────────────────────────────────────────────────────────
+
+async function getCached(key) {
+  const stored = await chrome.storage.local.get(key)
+  const entry = stored[key]
+  if (!entry) return null
+  if (Date.now() - entry.timestamp > CACHE_TTL_MS) {
+    await chrome.storage.local.remove(key)
+    return null
+  }
+  return entry.result
+}
+
+async function setCached(key, result, preview) {
+  await chrome.storage.local.set({
+    [key]: { result, timestamp: Date.now() },
+  })
+
+  // Prepend to history list
+  const { history = [] } = await chrome.storage.local.get('history')
+  const entry = {
+    id:           key,
+    timestamp:    new Date().toISOString(),
+    text_preview: preview.slice(0, 80),
+    verdict:      result.verdict,
+    final_score:  result.final_score,
+  }
+  const updated = [entry, ...history.filter(h => h.id !== key)].slice(0, MAX_HISTORY)
+  await chrome.storage.local.set({ history: updated })
+}
+
+// ── API calls ─────────────────────────────────────────────────────────────────
+
+async function verifyText(text) {
+  const key  = 'txt_' + await sha256prefix(text)
+  const hit  = await getCached(key)
+  if (hit) return { ...hit, _fromCache: true }
+
+  const { apiBase } = await getSettings()
+  const res = await fetch(`${apiBase}/verify/text`, {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body:    JSON.stringify({ text }),
+  })
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.detail ?? `API error ${res.status}`)
+  }
+  const result = await res.json()
+  await setCached(key, result, text)
+  return result
+}
+
+async function verifyUrl(url) {
+  const key = 'url_' + await sha256prefix(url)
+  const hit = await getCached(key)
+  if (hit) return { ...hit, _fromCache: true }
+
+  const { apiBase } = await getSettings()
+  const res = await fetch(`${apiBase}/verify/url`, {
+    method:  'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body:    JSON.stringify({ url }),
+  })
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}))
+    throw new Error(body.detail ?? `API error ${res.status}`)
+  }
+  const result = await res.json()
+  await setCached(key, result, url)
+  return result
+}
+
+// ── Message handler ───────────────────────────────────────────────────────────
+
+chrome.runtime.onMessage.addListener((msg, _sender, sendResponse) => {
+  switch (msg.type) {
+
+    case 'VERIFY_TEXT':
+      verifyText(msg.text)
+        .then(r  => sendResponse({ ok: true,  result: r }))
+        .catch(e => sendResponse({ ok: false, error: e.message }))
+      return true   // keep message channel open for async response
+
+    case 'VERIFY_URL':
+      if (!isHttpUrl(msg.url)) {
+        sendResponse({ ok: false, error: 'Invalid URL: only http/https allowed' })
+        return false
+      }
+      verifyUrl(msg.url)
+        .then(r  => sendResponse({ ok: true,  result: r }))
+        .catch(e => sendResponse({ ok: false, error: e.message }))
+      return true
+
+    case 'GET_HISTORY':
+      chrome.storage.local.get('history')
+        .then(({ history = [] }) => sendResponse({ history }))
+      return true
+
+    case 'GET_SETTINGS':
+      getSettings().then(s => sendResponse(s))
+      return true
+
+    case 'SAVE_SETTINGS': {
+      const incoming = msg.settings ?? {}
+      // Validate apiBase is a safe URL before persisting
+      if (incoming.apiBase && !isHttpUrl(incoming.apiBase)) {
+        sendResponse({ ok: false, error: 'Invalid API URL: only http/https allowed' })
+        return false
+      }
+      chrome.storage.local
+        .set({ settings: incoming })
+        .then(() => sendResponse({ ok: true }))
+      return true
+    }
+
+    default:
+      break
+  }
+})

extension/content.css

@@ -0,0 +1,190 @@
+/**
+ * PhilVerify — Content Script Styles
+ * Badge overlay injected into Facebook feed posts.
+ * All selectors are namespaced under .pv-* to avoid collisions.
+ */
+
+/* ── Badge wrapper ───────────────────────────────────────────────────────── */
+.pv-badge-wrap {
+  display: block;
+  margin: 6px 12px 2px;
+}
+
+.pv-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border-radius: 3px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  cursor: pointer;
+  touch-action: manipulation;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.pv-badge:focus-visible {
+  outline: 2px solid #06b6d4;
+  outline-offset: 2px;
+}
+
+/* ── Loading state ───────────────────────────────────────────────────────── */
+.pv-badge--loading {
+  color: #a89f94;
+  border: 1px solid rgba(168, 159, 148, 0.2);
+  background: rgba(168, 159, 148, 0.06);
+  cursor: default;
+}
+
+.pv-spinner {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border: 2px solid rgba(168, 159, 148, 0.3);
+  border-top-color: #a89f94;
+  border-radius: 50%;
+  animation: pv-spin 0.7s linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pv-spinner { animation: none; }
+}
+
+@keyframes pv-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ── Error state ─────────────────────────────────────────────────────────── */
+.pv-badge--error {
+  color: #78716c;
+  border: 1px solid rgba(120, 113, 108, 0.2);
+  background: transparent;
+  cursor: default;
+  font-size: 10px;
+}
+
+/* ── Detail panel ────────────────────────────────────────────────────────── */
+.pv-detail {
+  display: block;
+  margin: 4px 0 6px;
+  padding: 10px 12px;
+  background: #141414;
+  border: 1px solid rgba(245, 240, 232, 0.1);
+  border-radius: 4px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  font-size: 11px;
+  color: #f5f0e8;
+  max-width: 400px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.pv-detail-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+  padding-bottom: 6px;
+  border-bottom: 1px solid rgba(245, 240, 232, 0.07);
+}
+
+.pv-logo {
+  font-weight: 800;
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  color: #f5f0e8;
+}
+
+.pv-close {
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #5c554e;
+  font-size: 12px;
+  padding: 2px 4px;
+  border-radius: 2px;
+  touch-action: manipulation;
+}
+.pv-close:hover { color: #f5f0e8; }
+.pv-close:focus-visible { outline: 2px solid #06b6d4; }
+
+.pv-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 4px 0;
+  border-bottom: 1px solid rgba(245, 240, 232, 0.05);
+}
+
+.pv-label {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  color: #5c554e;
+  text-transform: uppercase;
+}
+
+.pv-val {
+  font-size: 11px;
+  font-weight: 600;
+  color: #a89f94;
+}
+
+.pv-signals {
+  padding: 6px 0 4px;
+  border-bottom: 1px solid rgba(245, 240, 232, 0.05);
+}
+
+.pv-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.pv-tag {
+  padding: 2px 6px;
+  background: rgba(220, 38, 38, 0.12);
+  color: #f87171;
+  border: 1px solid rgba(220, 38, 38, 0.25);
+  border-radius: 2px;
+  font-size: 9px;
+  letter-spacing: 0.04em;
+  font-weight: 600;
+}
+
+.pv-source {
+  padding: 6px 0 4px;
+  border-bottom: 1px solid rgba(245, 240, 232, 0.05);
+}
+
+.pv-source-link {
+  display: block;
+  margin-top: 4px;
+  color: #06b6d4;
+  font-size: 10px;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pv-source-link:hover { text-decoration: underline; }
+
+.pv-open-full {
+  display: block;
+  margin-top: 8px;
+  text-align: center;
+  color: #dc2626;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-decoration: none;
+  text-transform: uppercase;
+  padding: 5px;
+  border: 1px solid rgba(220, 38, 38, 0.3);
+  border-radius: 2px;
+}
+.pv-open-full:hover {
+  background: rgba(220, 38, 38, 0.08);
+}

extension/content.js

@@ -0,0 +1,390 @@
+/**
+ * PhilVerify — Content Script (Facebook feed scanner)
+ *
+ * Watches the Facebook feed via MutationObserver.
+ * For each new post that appears:
+ *   1. Extracts the post text or shared URL
+ *   2. Sends to background.js for verification (with cache)
+ *   3. Injects a credibility badge overlay onto the post card
+ *
+ * Badge click → opens an inline detail panel with verdict, score, and top source.
+ *
+ * Uses `data-philverify` attribute to mark already-processed posts.
+ */
+
+;(function philverifyContentScript() {
+  'use strict'
+
+  // ── Config ────────────────────────────────────────────────────────────────
+
+  /** Minimum text length to send for verification (avoids verifying 1-word posts) */
+  const MIN_TEXT_LENGTH = 40
+
+  /**
+   * Facebook feed post selectors — ordered by reliability.
+   * Facebook's class names are obfuscated; structural role/data attributes are
+   * more stable across renames.
+   */
+  const POST_SELECTORS = [
+    '[data-pagelet^="FeedUnit"]',
+    '[data-pagelet^="GroupsFeedUnit"]',
+    '[role="article"]',
+    '[data-testid="post_message"]',
+  ]
+
+  const VERDICT_COLORS = {
+    'Credible':    '#16a34a',
+    'Unverified':  '#d97706',
+    'Likely Fake': '#dc2626',
+  }
+  const VERDICT_LABELS = {
+    'Credible':    '✓ Credible',
+    'Unverified':  '? Unverified',
+    'Likely Fake': '✗ Likely Fake',
+  }
+
+  // ── Utilities ─────────────────────────────────────────────────────────────
+
+  /** Escape HTML special chars to prevent XSS in innerHTML templates */
+  function safeText(str) {
+    if (str == null) return ''
+    return String(str)
+      .replace(/&/g, '&')
+      .replace(/</g, '&lt;')
+      .replace(/>/g, '&gt;')
+      .replace(/"/g, '&quot;')
+      .replace(/'/g, '&#39;')
+  }
+
+  /** Allow only http/https URLs; return '#' for anything else */
+  function safeUrl(url) {
+    if (!url) return '#'
+    try {
+      const u = new URL(url)
+      return (u.protocol === 'http:' || u.protocol === 'https:') ? u.href : '#'
+    } catch { return '#' }
+  }
+
+  function extractPostText(post) {
+    // Try common post message containers
+    const msgSelectors = [
+      '[data-ad-preview="message"]',
+      '[data-testid="post_message"]',
+      '[dir="auto"] > div > div > div > span',
+      'div[style*="text-align"] span',
+    ]
+    for (const sel of msgSelectors) {
+      const el = post.querySelector(sel)
+      if (el?.innerText?.trim().length >= MIN_TEXT_LENGTH) {
+        return el.innerText.trim().slice(0, 2000)
+      }
+    }
+    // Fallback: gather all text spans ≥ MIN_TEXT_LENGTH chars
+    const spans = Array.from(post.querySelectorAll('span'))
+    for (const span of spans) {
+      const t = span.innerText?.trim()
+      if (t && t.length >= MIN_TEXT_LENGTH && !t.startsWith('http')) return t.slice(0, 2000)
+    }
+    return null
+  }
+
+  function extractPostUrl(post) {
+    // Shared article links
+    const linkSelectors = [
+      'a[href*="l.facebook.com/l.php"]',       // Facebook link wrapper
+      'a[target="_blank"][href^="https"]',       // Direct external links
+      'a[aria-label][href*="facebook.com/watch"]', // Videos
+    ]
+    for (const sel of linkSelectors) {
+      const el = post.querySelector(sel)
+      if (el?.href) {
+        try {
+          const u = new URL(el.href)
+          const dest = u.searchParams.get('u')  // Unwrap l.facebook.com redirect
+          return dest || el.href
+        } catch {
+          return el.href
+        }
+      }
+    }
+    return null
+  }
+
+  function genPostId(post) {
+    // Use aria-label prefix + UUID for stable, unique ID
+    // Avoids offsetTop which forces a synchronous layout read
+    const label = (post.getAttribute('aria-label') ?? '').replace(/\W/g, '').slice(0, 20)
+    return 'pv_' + label + crypto.randomUUID().replace(/-/g, '').slice(0, 12)
+  }
+
+  // ── Badge rendering ───────────────────────────────────────────────────────
+
+  function createBadge(verdict, score, result) {
+    const color = VERDICT_COLORS[verdict] ?? '#5c554e'
+    const label = VERDICT_LABELS[verdict] ?? verdict
+
+    const wrap = document.createElement('div')
+    wrap.className = 'pv-badge'
+    wrap.setAttribute('role', 'status')
+    wrap.setAttribute('aria-label', `PhilVerify: ${label} — ${Math.round(score)}% credibility score`)
+    wrap.style.cssText = `
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      border-radius: 3px;
+      border: 1px solid ${color}4d;
+      background: ${color}14;
+      cursor: pointer;
+      font-family: system-ui, sans-serif;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      color: ${color};
+      touch-action: manipulation;
+      -webkit-tap-highlight-color: transparent;
+      position: relative;
+      z-index: 10;
+    `
+
+    const dot = document.createElement('span')
+    dot.style.cssText = `
+      width: 7px; height: 7px;
+      border-radius: 50%;
+      background: ${color};
+      flex-shrink: 0;
+    `
+
+    const text = document.createElement('span')
+    text.textContent = `${label}  ${Math.round(score)}%`
+
+    const cacheTag = result._fromCache
+      ? (() => { const t = document.createElement('span'); t.textContent = '·cached'; t.style.cssText = `opacity:0.5;font-size:9px;`; return t })()
+      : null
+
+    wrap.appendChild(dot)
+    wrap.appendChild(text)
+    if (cacheTag) wrap.appendChild(cacheTag)
+
+    // Click → toggle detail panel
+    wrap.addEventListener('click', (e) => {
+      e.stopPropagation()
+      toggleDetailPanel(wrap, result)
+    })
+
+    return wrap
+  }
+
+  function toggleDetailPanel(badge, result) {
+    const existing = badge.parentElement?.querySelector('.pv-detail')
+    if (existing) { existing.remove(); return }
+
+    const panel = document.createElement('div')
+    panel.className = 'pv-detail'
+    panel.setAttribute('role', 'dialog')
+    panel.setAttribute('aria-label', 'PhilVerify fact-check details')
+
+    const color = VERDICT_COLORS[result.verdict] ?? '#5c554e'
+    const topSource = result.layer2?.sources?.[0]
+
+    panel.innerHTML = `
+      <div class="pv-detail-header">
+        <span class="pv-logo">PHIL<span style="color:${color}">VERIFY</span></span>
+        <button class="pv-close" aria-label="Close fact-check panel">✕</button>
+      </div>
+      <div class="pv-row">
+        <span class="pv-label">VERDICT</span>
+        <span class="pv-val" style="color:${color};font-weight:700">${safeText(result.verdict)}</span>
+      </div>
+      <div class="pv-row">
+        <span class="pv-label">SCORE</span>
+        <span class="pv-val" style="color:${color}">${Math.round(result.final_score)}%</span>
+      </div>
+      <div class="pv-row">
+        <span class="pv-label">LANGUAGE</span>
+        <span class="pv-val">${safeText(result.language ?? '—')}</span>
+      </div>
+      ${result.layer1?.triggered_features?.length ? `
+      <div class="pv-signals">
+        <span class="pv-label">SIGNALS</span>
+        <div class="pv-tags">
+          ${result.layer1.triggered_features.slice(0, 3).map(f =>
+            `<span class="pv-tag">${safeText(f)}</span>`
+          ).join('')}
+        </div>
+      </div>` : ''}
+      ${topSource ? `
+      <div class="pv-source">
+        <span class="pv-label">TOP SOURCE</span>
+        <a href="${safeUrl(topSource.url)}" target="_blank" rel="noreferrer" class="pv-source-link">
+          ${safeText(topSource.title?.slice(0, 60) ?? topSource.source_name ?? 'View source')} ↗
+        </a>
+      </div>` : ''}
+      <a href="http://localhost:5173" target="_blank" rel="noreferrer" class="pv-open-full">
+        Open full analysis ↗
+      </a>
+    `
+
+    panel.querySelector('.pv-close').addEventListener('click', (e) => {
+      e.stopPropagation()
+      panel.remove()
+    })
+
+    badge.insertAdjacentElement('afterend', panel)
+  }
+
+  function injectBadgeIntoPost(post, result) {
+    // Find a stable injection point near the post actions bar
+    const actionBar = post.querySelector('[data-testid="UFI2ReactionsCount/root"]')
+      ?? post.querySelector('[aria-label*="reaction"]')
+      ?? post.querySelector('[role="toolbar"]')
+      ?? post
+
+    const container = document.createElement('div')
+    container.className = 'pv-badge-wrap'
+    const badge = createBadge(result.verdict, result.final_score, result)
+    container.appendChild(badge)
+
+    // Insert before the action bar, or append inside the post
+    if (actionBar && actionBar !== post) {
+      actionBar.insertAdjacentElement('beforebegin', container)
+    } else {
+      post.appendChild(container)
+    }
+  }
+
+  // ── Loading state ─────────────────────────────────────────────────────────
+
+  function injectLoadingBadge(post) {
+    const container = document.createElement('div')
+    container.className = 'pv-badge-wrap pv-loading'
+    container.setAttribute('aria-label', 'PhilVerify: verifying…')
+    container.innerHTML = `
+      <div class="pv-badge pv-badge--loading">
+        <span class="pv-spinner" aria-hidden="true"></span>
+        <span>Verifying…</span>
+      </div>
+    `
+    post.appendChild(container)
+    return container
+  }
+
+  // ── Post processing ───────────────────────────────────────────────────────
+
+  async function processPost(post) {
+    if (post.dataset.philverify) return    // already processed
+    const id = genPostId(post)
+    post.dataset.philverify = id
+
+    const text = extractPostText(post)
+    const url  = extractPostUrl(post)
+
+    if (!text && !url) return              // nothing to verify
+
+    const loader = injectLoadingBadge(post)
+
+    try {
+      const response = await new Promise((resolve, reject) => {
+        const msg = url
+          ? { type: 'VERIFY_URL', url  }
+          : { type: 'VERIFY_TEXT', text }
+        chrome.runtime.sendMessage(msg, (resp) => {
+          if (chrome.runtime.lastError) reject(new Error(chrome.runtime.lastError.message))
+          else if (!resp?.ok)           reject(new Error(resp?.error ?? 'Unknown error'))
+          else                          resolve(resp.result)
+        })
+      })
+
+      loader.remove()
+      injectBadgeIntoPost(post, response)
+    } catch (err) {
+      loader.remove()
+      // Show a muted error indicator — don't block reading
+      const errBadge = document.createElement('div')
+      errBadge.className = 'pv-badge-wrap'
+      const errInner = document.createElement('div')
+      errInner.className = 'pv-badge pv-badge--error'
+      errInner.title = err.message   // .title setter is XSS-safe
+      errInner.textContent = '⚠ PhilVerify offline'
+      errBadge.appendChild(errInner)
+      post.appendChild(errBadge)
+    }
+  }
+
+  // ── MutationObserver ──────────────────────────────────────────────────────
+
+  const pendingPosts = new Set()
+  let rafScheduled = false
+
+  function flushPosts() {
+    rafScheduled = false
+    for (const post of pendingPosts) processPost(post)
+    pendingPosts.clear()
+  }
+
+  function scheduleProcess(post) {
+    pendingPosts.add(post)
+    if (!rafScheduled) {
+      rafScheduled = true
+      requestAnimationFrame(flushPosts)
+    }
+  }
+
+  function findPosts(root) {
+    for (const sel of POST_SELECTORS) {
+      const found = root.querySelectorAll(sel)
+      if (found.length) return found
+    }
+    return []
+  }
+
+  const observer = new MutationObserver((mutations) => {
+    for (const mutation of mutations) {
+      for (const node of mutation.addedNodes) {
+        if (node.nodeType !== 1) continue   // element nodes only
+        // Check if the node itself matches
+        for (const sel of POST_SELECTORS) {
+          if (node.matches?.(sel)) { scheduleProcess(node); break }
+        }
+        // Check descendants
+        const posts = findPosts(node)
+        for (const post of posts) scheduleProcess(post)
+      }
+    }
+  })
+
+  // ── Initialization ────────────────────────────────────────────────────────
+
+  async function init() {
+    // Check autoScan setting before activating
+    const response = await new Promise(resolve => {
+      chrome.runtime.sendMessage({ type: 'GET_SETTINGS' }, resolve)
+    }).catch(() => ({ autoScan: true }))
+
+    if (!response?.autoScan) return
+
+    // Process any posts already in the DOM
+    const existing = findPosts(document.body)
+    for (const post of existing) scheduleProcess(post)
+
+    // Watch for new posts (Facebook is a SPA — feed dynamically loads more)
+    observer.observe(document.body, { childList: true, subtree: true })
+  }
+
+  init()
+
+  // React to autoScan toggle without requiring page reload
+  chrome.storage.onChanged.addListener((changes, area) => {
+    if (area !== 'local' || !changes.settings) return
+    const autoScan = changes.settings.newValue?.autoScan
+    if (autoScan === false) {
+      observer.disconnect()
+    } else if (autoScan === true) {
+      observer.observe(document.body, { childList: true, subtree: true })
+      // Process any posts that appeared while scanning was paused
+      const existing = findPosts(document.body)
+      for (const post of existing) scheduleProcess(post)
+    }
+  })
+
+})()

extension/generate_icons.py

@@ -0,0 +1,61 @@
+"""
+Generate PhilVerify extension icons (16×16, 32×32, 48×48, 128×128 PNG).
+Requires Pillow: pip install Pillow
+Run from the extension/ directory: python generate_icons.py
+"""
+import os
+from PIL import Image, ImageDraw, ImageFont
+
+SIZES = [16, 32, 48, 128]
+OUTPUT_DIR = os.path.join(os.path.dirname(__file__), 'icons')
+os.makedirs(OUTPUT_DIR, exist_ok=True)
+
+BG_COLOR   = (13, 13, 13, 255)       # --bg-base
+RED_COLOR  = (220, 38, 38, 255)      # --accent-red
+TEXT_COLOR = (245, 240, 232, 255)    # --text-primary
+
+
+def make_icon(size: int) -> Image.Image:
+    img  = Image.new('RGBA', (size, size), BG_COLOR)
+    draw = ImageDraw.Draw(img)
+
+    # Red left-edge accent bar (3px scaled)
+    bar_width = max(2, size // 10)
+    draw.rectangle([0, 0, bar_width - 1, size - 1], fill=RED_COLOR)
+
+    # 'PV' text label — only draw text on larger icons where it looks clean
+    font_size = max(6, int(size * 0.38))
+    font = None
+    for path in [
+        '/System/Library/Fonts/Helvetica.ttc',
+        '/System/Library/Fonts/SFNSDisplay.ttf',
+        '/System/Library/Fonts/ArialHB.ttc',
+    ]:
+        try:
+            font = ImageFont.truetype(path, font_size)
+            break
+        except OSError:
+            continue
+    if font is None:
+        font = ImageFont.load_default()
+
+    if size >= 32:
+        text = 'PV'
+        try:
+            bbox = draw.textbbox((0, 0), text, font=font)
+            tw, th = bbox[2] - bbox[0], bbox[3] - bbox[1]
+            tx = bar_width + (size - bar_width - tw) // 2
+            ty = (size - th) // 2 - bbox[1]
+            draw.text((tx, ty), text, fill=TEXT_COLOR, font=font)
+        except Exception:
+            pass  # Skip text on render error — icon still has the red bar
+
+    return img
+
+
+for sz in SIZES:
+    icon_path = os.path.join(OUTPUT_DIR, f'icon{sz}.png')
+    make_icon(sz).save(icon_path, 'PNG')
+    print(f'✓ icons/icon{sz}.png')
+
+print('Icons generated in extension/icons/')

extension/manifest.json

@@ -0,0 +1,55 @@
+{
+  "manifest_version": 3,
+  "name": "PhilVerify",
+  "version": "1.0.0",
+  "description": "AI-powered fact-checking for Philippine news and social media. Detects misinformation on Facebook in real time.",
+
+  "permissions": [
+    "storage",
+    "activeTab",
+    "scripting"
+  ],
+
+  "host_permissions": [
+    "https://www.facebook.com/*",
+    "https://facebook.com/*",
+    "http://localhost:8000/*",
+    "https://api.philverify.com/*"
+  ],
+
+  "background": {
+    "service_worker": "background.js",
+    "type": "module"
+  },
+
+  "content_scripts": [
+    {
+      "matches": ["https://www.facebook.com/*", "https://facebook.com/*"],
+      "js": ["content.js"],
+      "css": ["content.css"],
+      "run_at": "document_idle"
+    }
+  ],
+
+  "action": {
+    "default_popup": "popup.html",
+    "default_title": "PhilVerify — Fact Check",
+    "default_icon": {
+      "16":  "icons/icon16.png",
+      "32":  "icons/icon32.png",
+      "48":  "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+
+  "icons": {
+    "16":  "icons/icon16.png",
+    "32":  "icons/icon32.png",
+    "48":  "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
+
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  }
+}

extension/popup.html

@@ -0,0 +1,446 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>PhilVerify</title>
+  <style>
+    /* ── Reset ───────────────────────────────────────── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+    /* ── Design tokens (mirrors dashboard) ──────────── */
+    :root {
+      --bg-base:      #0d0d0d;
+      --bg-surface:   #141414;
+      --bg-elevated:  #1c1c1c;
+      --bg-hover:     #222;
+      --border:       rgba(245,240,232,0.07);
+      --border-light: rgba(245,240,232,0.14);
+      --accent-red:   #dc2626;
+      --accent-gold:  #d97706;
+      --accent-cyan:  #06b6d4;
+      --credible:     #16a34a;
+      --unverified:   #d97706;
+      --fake:         #dc2626;
+      --text-primary:   #f5f0e8;
+      --text-secondary: #a89f94;
+      --text-muted:     #5c554e;
+      --font-display:   'Syne', system-ui, sans-serif;
+      --font-mono:      'JetBrains Mono', monospace;
+    }
+
+    html { color-scheme: dark; }
+
+    body {
+      width: 340px;
+      min-height: 200px;
+      background: var(--bg-base);
+      color: var(--text-primary);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      font-size: 12px;
+      -webkit-font-smoothing: antialiased;
+    }
+
+    /* ── Navbar ──────────────────────────────────────── */
+    .navbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 14px;
+      background: var(--bg-surface);
+      border-bottom: 1px solid var(--border);
+    }
+    .logo {
+      font-weight: 800;
+      font-size: 13px;
+      letter-spacing: 0.06em;
+    }
+    .logo span { color: var(--accent-red); }
+
+    /* ── Tab bar ─────────────────────────────────────── */
+    .tabs {
+      display: flex;
+      border-bottom: 1px solid var(--border);
+    }
+    .tab {
+      flex: 1;
+      padding: 10px 0;
+      min-height: 40px;
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      touch-action: manipulation;
+    }
+    .tab.active {
+      color: var(--text-primary);
+      border-bottom-color: var(--accent-red);
+    }
+    .tab:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: -2px; }
+
+    /* ── Panels ──────────────────────────────────────── */
+    .panel { display: none; padding: 12px 14px; }
+    .panel.active { display: block; }
+
+    /* ── Verify panel ────────────────────────────────── */
+    .current-url {
+      font-size: 10px;
+      color: var(--text-muted);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: 10px;
+      font-family: var(--font-mono);
+    }
+
+    textarea {
+      width: 100%;
+      resize: none;
+      padding: 8px 10px;
+      background: var(--bg-elevated);
+      border: 1px solid var(--border);
+      color: var(--text-primary);
+      font-size: 11px;
+      font-family: inherit;
+      border-radius: 2px;
+      line-height: 1.6;
+      margin-bottom: 8px;
+      field-sizing: content;
+      min-height: 60px;
+    }
+    textarea:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--accent-red);
+      border-color: var(--accent-red);
+    }
+
+    .btn-verify {
+      width: 100%;
+      padding: 8px;
+      background: var(--accent-red);
+      color: #fff;
+      border: none;
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      cursor: pointer;
+      border-radius: 2px;
+      min-height: 44px;
+      touch-action: manipulation;
+    }
+    .btn-verify:disabled {
+      background: var(--bg-elevated);
+      color: var(--text-muted);
+      cursor: not-allowed;
+    }
+    .btn-verify:focus-visible { outline: 2px solid var(--accent-cyan); outline-offset: 2px; }
+
+    /* ── Result card ─────────────────────────────────── */
+    .result {
+      margin-top: 10px;
+      padding: 10px 12px;
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: 3px;
+    }
+    .result-verdict {
+      font-size: 15px;
+      font-weight: 800;
+      letter-spacing: -0.01em;
+      margin-bottom: 4px;
+    }
+    .result-score {
+      font-size: 10px;
+      color: var(--text-muted);
+      font-family: var(--font-mono);
+    }
+    .result-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px 0;
+      border-top: 1px solid var(--border);
+      margin-top: 4px;
+    }
+    .result-label {
+      font-size: 9px;
+      color: var(--text-muted);
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+    }
+    .result-val {
+      font-size: 10px;
+      color: var(--text-secondary);
+      font-family: var(--font-mono);
+    }
+    .result-source {
+      margin-top: 8px;
+      padding-top: 6px;
+      border-top: 1px solid var(--border);
+    }
+    .result-source a {
+      color: var(--accent-cyan);
+      font-size: 10px;
+      text-decoration: none;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .result-source a:hover { text-decoration: underline; }
+    .open-full {
+      display: block;
+      text-align: center;
+      margin-top: 8px;
+      color: var(--accent-red);
+      font-size: 9px;
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      text-decoration: none;
+      padding: 4px;
+      border: 1px solid rgba(220,38,38,0.3);
+      border-radius: 2px;
+    }
+    .open-full:hover { background: rgba(220,38,38,0.08); }
+
+    /* ── Loading / error states ──────────────────────── */
+    .state-loading, .state-error, .state-empty {
+      padding: 20px;
+      text-align: center;
+      color: var(--text-muted);
+      font-size: 11px;
+    }
+    .state-error { color: #f87171; }
+    .spinner {
+      display: inline-block;
+      width: 16px; height: 16px;
+      border: 2px solid rgba(168,159,148,0.2);
+      border-top-color: var(--text-muted);
+      border-radius: 50%;
+      animation: spin 0.7s linear infinite;
+      margin-bottom: 8px;
+    }
+    @media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* ── History panel ───────────────────────────────── */
+    .history-list { display: flex; flex-direction: column; gap: 6px; }
+    .history-item {
+      padding: 8px 10px;
+      background: var(--bg-surface);
+      border: 1px solid var(--border);
+      border-radius: 3px;
+      cursor: default;
+    }
+    .history-item-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 3px;
+    }
+    .history-verdict {
+      font-size: 9px;
+      font-weight: 700;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      padding: 2px 6px;
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+    .history-score {
+      font-size: 10px;
+      font-family: var(--font-mono);
+      color: var(--text-muted);
+    }
+    .history-preview {
+      font-size: 10px;
+      color: var(--text-secondary);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+    .history-time {
+      font-size: 9px;
+      color: var(--text-muted);
+      margin-top: 2px;
+    }
+
+    /* ── Settings panel ──────────────────────────────── */
+    .setting-row {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-bottom: 12px;
+    }
+    .setting-label {
+      font-size: 9px;
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--text-muted);
+    }
+    .setting-input {
+      width: 100%;
+      padding: 8px 10px;
+      min-height: 36px;
+      background: var(--bg-elevated);
+      border: 1px solid var(--border);
+      color: var(--text-primary);
+      font-size: 11px;
+      font-family: var(--font-mono);
+      border-radius: 2px;
+    }
+    .setting-input:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 2px var(--accent-cyan);
+    }
+    .toggle-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+    .toggle-label {
+      font-size: 11px;
+      color: var(--text-secondary);
+      cursor: pointer;
+    }
+    .toggle {
+      position: relative;
+      width: 32px;
+      height: 18px;
+    }
+    .toggle input { opacity: 0; width: 0; height: 0; }
+    .toggle-track {
+      position: absolute;
+      inset: 0;
+      border-radius: 18px;
+      background: var(--bg-elevated);
+      border: 1px solid var(--border);
+      cursor: pointer;
+      transition: background 0.2s;
+    }
+    .toggle input:checked + .toggle-track { background: var(--accent-red); border-color: var(--accent-red); }
+    @media (prefers-reduced-motion: reduce) {
+      .toggle-track,
+      .toggle-track::after { transition: none; }
+    }
+    .toggle-track::after {
+      content: '';
+      position: absolute;
+      left: 2px; top: 2px;
+      width: 12px; height: 12px;
+      background: #fff;
+      border-radius: 50%;
+      transition: transform 0.2s;
+    }
+    .toggle input:checked + .toggle-track::after { transform: translateX(14px); }
+    .btn-save {
+      width: 100%;
+      padding: 7px;
+      min-height: 36px;
+      background: var(--bg-elevated);
+      border: 1px solid var(--border-light);
+      color: var(--text-secondary);
+      font-size: 10px;
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      cursor: pointer;
+      border-radius: 2px;
+      touch-action: manipulation;
+    }
+    .btn-save:hover { border-color: var(--accent-cyan); color: var(--accent-cyan); }
+    .btn-save:focus-visible { outline: 2px solid var(--accent-cyan); }
+    .saved-flash {
+      text-align: center;
+      color: var(--credible);
+      font-size: 10px;
+      margin-top: 6px;
+      height: 14px;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Navbar -->
+  <nav class="navbar" role="banner">
+    <div class="logo">PHIL<span>VERIFY</span></div>
+    <div id="live-dot" style="display:flex;align-items:center;gap:5px;font-size:9px;color:var(--text-muted);font-weight:700;letter-spacing:0.1em;">
+      <span id="api-status-dot" style="width:6px;height:6px;border-radius:50%;background:var(--text-muted);" aria-hidden="true"></span>
+      <span id="api-status-label">CHECKING…</span>
+    </div>
+  </nav>
+
+  <!-- Tabs -->
+  <div class="tabs" role="tablist" aria-label="PhilVerify sections">
+    <button class="tab active" role="tab" aria-selected="true" aria-controls="panel-verify" id="tab-verify" data-tab="verify">Verify</button>
+    <button class="tab" role="tab" aria-selected="false" aria-controls="panel-history" id="tab-history" data-tab="history">History</button>
+    <button class="tab" role="tab" aria-selected="false" aria-controls="panel-settings" id="tab-settings" data-tab="settings">Settings</button>
+  </div>
+
+  <!-- ── Verify Panel ── -->
+  <div class="panel active" id="panel-verify" role="tabpanel" aria-labelledby="tab-verify">
+    <p class="current-url" id="current-url" title="">Loading current URL…</p>
+    <textarea
+      id="verify-input"
+      name="claim-text"
+      placeholder="Paste text or URL to fact-check…"
+      rows="3"
+      aria-label="Text or URL to verify"
+      autocomplete="off"
+      spellcheck="true"
+    ></textarea>
+    <button class="btn-verify" id="btn-verify" type="button" aria-busy="false">
+      Verify Claim
+    </button>
+    <div id="verify-result" aria-live="polite" aria-atomic="true"></div>
+  </div>
+
+  <!-- ── History Panel ── -->
+  <div class="panel" id="panel-history" role="tabpanel" aria-labelledby="tab-history">
+    <div id="history-container">
+      <div class="state-empty">No verifications yet — use the Verify tab or browse Facebook.</div>
+    </div>
+  </div>
+
+  <!-- ── Settings Panel ── -->
+  <div class="panel" id="panel-settings" role="tabpanel" aria-labelledby="tab-settings">
+    <div class="setting-row">
+      <label class="setting-label" for="api-base">Backend API URL</label>
+      <input
+        class="setting-input"
+        id="api-base"
+        name="api-base"
+        type="url"
+        autocomplete="url"
+        placeholder="http://localhost:8000"
+        aria-describedby="api-base-hint"
+      >
+      <span id="api-base-hint" style="font-size:9px;color:var(--text-muted);">
+        Default: http://localhost:8000 — change for production deployment.
+      </span>
+    </div>
+    <div class="toggle-row">
+      <label for="auto-scan" class="toggle-label">Auto-scan Facebook feed</label>
+      <label class="toggle">
+        <input type="checkbox" id="auto-scan" name="auto-scan" checked>
+        <span class="toggle-track" aria-hidden="true"></span>
+      </label>
+    </div>
+    <button class="btn-save" id="btn-save" type="button">Save Settings</button>
+    <div class="saved-flash" id="saved-flash" aria-live="polite"></div>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>

extension/popup.js

@@ -0,0 +1,238 @@
+/**
+ * PhilVerify — Popup Script
+ * Controls the extension popup: verify tab, history tab, settings tab.
+ */
+'use strict'
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const VERDICT_COLORS = {
+  'Credible':    '#16a34a',
+  'Unverified':  '#d97706',
+  'Likely Fake': '#dc2626',
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+/** Escape HTML special chars to prevent XSS in innerHTML templates */
+function safeText(str) {
+  if (str == null) return ''
+  return String(str)
+    .replace(/&/g, '&')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+/** Allow only http/https URLs; return '#' for anything else */
+function safeUrl(url) {
+  if (!url) return '#'
+  try {
+    const u = new URL(url)
+    return (u.protocol === 'http:' || u.protocol === 'https:') ? u.href : '#'
+  } catch { return '#' }
+}
+function msg(obj) {
+  return new Promise(resolve => {
+    chrome.runtime.sendMessage(obj, resolve)
+  })
+}
+
+function timeAgo(iso) {
+  const diff = Date.now() - new Date(iso).getTime()
+  if (diff < 60_000)   return 'just now'
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`
+  return `${Math.floor(diff / 86_400_000)}d ago`
+}
+
+function isUrl(s) {
+  try { new URL(s); return s.startsWith('http'); } catch { return false }
+}
+
+// ── Render helpers ────────────────────────────────────────────────────────────
+
+function renderResult(result, container) {
+  const color = VERDICT_COLORS[result.verdict] ?? '#5c554e'
+  const topSource = result.layer2?.sources?.[0]
+
+  container.innerHTML = `
+    <div class="result" role="status" aria-live="polite">
+      <div class="result-verdict" style="color:${color}">${safeText(result.verdict)}</div>
+      <div class="result-score">${Math.round(result.final_score)}% credibility${result._fromCache ? ' (cached)' : ''}</div>
+      <div class="result-row">
+        <span class="result-label">Language</span>
+        <span class="result-val">${safeText(result.language ?? '—')}</span>
+      </div>
+      <div class="result-row">
+        <span class="result-label">Confidence</span>
+        <span class="result-val" style="color:${color}">${result.confidence?.toFixed(1)}%</span>
+      </div>
+      ${result.layer1?.triggered_features?.length ? `
+      <div class="result-row">
+        <span class="result-label">Signals</span>
+        <span class="result-val">${result.layer1.triggered_features.slice(0, 3).map(safeText).join(', ')}</span>
+      </div>` : ''}
+      ${topSource ? `
+      <div class="result-source">
+        <div class="result-label" style="margin-bottom:4px;">Top Source</div>
+        <a href="${safeUrl(topSource.url)}" target="_blank" rel="noreferrer">${safeText(topSource.title?.slice(0, 55) ?? topSource.source_name ?? 'View')} ↗</a>
+      </div>` : ''}
+      <a class="open-full" href="http://localhost:5173" target="_blank" rel="noreferrer">
+        Open Full Dashboard ↗
+      </a>
+    </div>
+  `
+}
+
+function renderHistory(entries, container) {
+  if (!entries.length) {
+    container.innerHTML = '<div class="state-empty">No verifications yet.</div>'
+    return
+  }
+  container.innerHTML = `
+    <ul class="history-list" role="list" aria-label="Verification history">
+      ${entries.map(e => {
+        const color = VERDICT_COLORS[e.verdict] ?? '#5c554e'
+        return `
+          <li class="history-item" role="listitem">
+            <div class="history-item-top">
+              <span class="history-verdict" style="background:${color}22;color:${color};border:1px solid ${color}4d;">${safeText(e.verdict)}</span>
+              <span class="history-score">${Math.round(e.final_score)}%</span>
+            </div>
+            <div class="history-preview">${safeText(e.text_preview || '—')}</div>
+            <div class="history-time">${timeAgo(e.timestamp)}</div>
+          </li>`
+      }).join('')}
+    </ul>
+  `
+}
+
+// ── Tab switching ─────────────────────────────────────────────────────────────
+
+document.querySelectorAll('.tab').forEach(tab => {
+  tab.addEventListener('click', () => {
+    document.querySelectorAll('.tab').forEach(t => {
+      t.classList.remove('active')
+      t.setAttribute('aria-selected', 'false')
+    })
+    document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'))
+    tab.classList.add('active')
+    tab.setAttribute('aria-selected', 'true')
+    document.getElementById(`panel-${tab.dataset.tab}`)?.classList.add('active')
+    if (tab.dataset.tab === 'history') loadHistory()
+    if (tab.dataset.tab === 'settings') loadSettings()
+  })
+})
+
+// ── Verify tab ────────────────────────────────────────────────────────────────
+
+const verifyInput  = document.getElementById('verify-input')
+const btnVerify    = document.getElementById('btn-verify')
+const verifyResult = document.getElementById('verify-result')
+const currentUrlEl = document.getElementById('current-url')
+
+// Auto-populate input with current tab URL if it's a news article
+chrome.tabs.query({ active: true, currentWindow: true }, ([tab]) => {
+  const url = tab?.url ?? ''
+  if (url && !url.startsWith('chrome') && !url.includes('facebook.com')) {
+    currentUrlEl.textContent = url
+    currentUrlEl.title = url
+    verifyInput.value = url
+  } else {
+    currentUrlEl.textContent = 'facebook.com — use text input below'
+  }
+})
+
+btnVerify.addEventListener('click', async () => {
+  const raw = verifyInput.value.trim()
+  if (!raw) return
+
+  btnVerify.disabled = true
+  btnVerify.setAttribute('aria-busy', 'true')
+  btnVerify.textContent = 'Verifying…'
+  verifyResult.innerHTML = `
+    <div class="state-loading" aria-live="polite">
+      <div class="spinner" aria-hidden="true"></div><br>Analyzing claim…
+    </div>`
+
+  const type = isUrl(raw) ? 'VERIFY_URL' : 'VERIFY_TEXT'
+  const payload = type === 'VERIFY_URL' ? { type, url: raw } : { type, text: raw }
+  const resp = await msg(payload)
+
+  btnVerify.disabled = false
+  btnVerify.setAttribute('aria-busy', 'false')
+  btnVerify.textContent = 'Verify Claim'
+
+  if (resp?.ok) {
+    renderResult(resp.result, verifyResult)
+  } else {
+    verifyResult.innerHTML = `
+      <div class="state-error" role="alert">
+        ${resp?.error ?? 'Could not reach PhilVerify backend.'}<br>
+        <span style="font-size:10px;color:var(--text-muted)">Is the backend running at your configured API URL?</span>
+      </div>`
+  }
+})
+
+// Allow Enter (single line) to trigger verify when text area is focused on Ctrl+Enter
+verifyInput.addEventListener('keydown', e => {
+  if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+    e.preventDefault()
+    btnVerify.click()
+  }
+})
+
+// ── History tab ───────────────────────────────────────────────────────────────
+
+async function loadHistory() {
+  const container = document.getElementById('history-container')
+  container.innerHTML = '<div class="state-loading"><div class="spinner"></div><br>Loading…</div>'
+  const resp = await msg({ type: 'GET_HISTORY' })
+  renderHistory(resp?.history ?? [], container)
+}
+
+// ── Settings tab ──────────────────────────────────────────────────────────────
+
+async function loadSettings() {
+  const resp = await msg({ type: 'GET_SETTINGS' })
+  if (!resp) return
+  document.getElementById('api-base').value    = resp.apiBase  ?? 'http://localhost:8000'
+  document.getElementById('auto-scan').checked = resp.autoScan ?? true
+}
+
+document.getElementById('btn-save').addEventListener('click', async () => {
+  const settings = {
+    apiBase:  document.getElementById('api-base').value.trim() || 'http://localhost:8000',
+    autoScan: document.getElementById('auto-scan').checked,
+  }
+  await msg({ type: 'SAVE_SETTINGS', settings })
+
+  const flash = document.getElementById('saved-flash')
+  flash.textContent = 'Saved ✓'
+  setTimeout(() => { flash.textContent = '' }, 2000)
+})
+
+// ── API status check ──────────────────────────────────────────────────────────
+
+async function checkApiStatus() {
+  const dot   = document.getElementById('api-status-dot')
+  const label = document.getElementById('api-status-label')
+  try {
+    const { apiBase } = await msg({ type: 'GET_SETTINGS' })
+    const res = await fetch(`${apiBase ?? 'http://localhost:8000'}/health`, { signal: AbortSignal.timeout(3000) })
+    if (res.ok) {
+      dot.style.background   = 'var(--credible)'
+      label.style.color      = 'var(--credible)'
+      label.textContent      = 'ONLINE'
+    } else {
+      throw new Error(`${res.status}`)
+    }
+  } catch {
+    dot.style.background  = 'var(--fake)'
+    label.style.color     = 'var(--fake)'
+    label.textContent     = 'OFFLINE'
+  }
+}
+
+checkApiStatus()

firebase.json

@@ -4,7 +4,6 @@
     "indexes": "firestore.indexes.json"
   },
   "hosting": {
-    "site": "philverify",
     "public": "frontend/dist",
     "ignore": [
       "firebase.json",

firebase_client.py

@@ -42,8 +42,8 @@ def get_firestore():
             cred = credentials.Certificate(str(_SERVICEACCOUNT_PATH))
             firebase_admin.initialize_app(cred)
             logger.info("Firebase initialized via service account key")
-        elif os.getenv("GOOGLE_APPLICATION_CREDENTIALS"):
-            # Cloud Run / GCE default credentials
+        elif os.getenv("GOOGLE_APPLICATION_CREDENTIALS") or os.getenv("K_SERVICE"):
+            # Cloud Run (K_SERVICE is always set) or explicit ADC path
             cred = credentials.ApplicationDefault()
             firebase_admin.initialize_app(cred)
             logger.info("Firebase initialized via Application Default Credentials")
@@ -92,12 +92,13 @@ async def get_verifications(
     if db is None:
         return []
     try:
+        from google.cloud.firestore_v1.base_query import FieldFilter
         query = (
             db.collection("verifications")
             .order_by("timestamp", direction="DESCENDING")
         )
         if verdict_filter:
-            query = query.where("verdict", "==", verdict_filter)
+            query = query.where(filter=FieldFilter("verdict", "==", verdict_filter))
         docs = query.limit(limit + offset).stream()
         results = [doc.to_dict() for doc in docs]
         return results[offset : offset + limit]
@@ -106,15 +107,34 @@ async def get_verifications(
         return []
 
 
+def get_all_verifications_sync() -> list[dict]:
+    """Synchronously fetch ALL verification records from Firestore (used by trends aggregation)."""
+    db = get_firestore()
+    if db is None:
+        return []
+    try:
+        docs = (
+            db.collection("verifications")
+            .order_by("timestamp", direction="DESCENDING")
+            .limit(10_000)  # hard cap — more than enough for trends analysis
+            .stream()
+        )
+        return [doc.to_dict() for doc in docs]
+    except Exception as e:
+        logger.error("Firestore get_all_verifications_sync error: %s", e)
+        return []
+
+
 async def get_verification_count(verdict_filter: str | None = None) -> int:
     """Return total count of verifications (with optional verdict filter)."""
     db = get_firestore()
     if db is None:
         return 0
     try:
+        from google.cloud.firestore_v1.base_query import FieldFilter
         query = db.collection("verifications")
         if verdict_filter:
-            query = query.where("verdict", "==", verdict_filter)
+            query = query.where(filter=FieldFilter("verdict", "==", verdict_filter))
         # Use aggregation query (Firestore native count)
         result = query.count().get()
         return result[0][0].value

firestore.indexes.json

@@ -1,51 +1,13 @@
 {
-  // Example (Standard Edition):
-  //
-  // "indexes": [
-  //   {
-  //     "collectionGroup": "widgets",
-  //     "queryScope": "COLLECTION",
-  //     "fields": [
-  //       { "fieldPath": "foo", "arrayConfig": "CONTAINS" },
-  //       { "fieldPath": "bar", "mode": "DESCENDING" }
-  //     ]
-  //   },
-  //
-  //  "fieldOverrides": [
-  //    {
-  //      "collectionGroup": "widgets",
-  //      "fieldPath": "baz",
-  //      "indexes": [
-  //        { "order": "ASCENDING", "queryScope": "COLLECTION" }
-  //      ]
-  //    },
-  //   ]
-  // ]
-  //
-  // Example (Enterprise Edition):
-  //
-  // "indexes": [
-  //   {
-  //     "collectionGroup": "reviews",
-  //     "queryScope": "COLLECTION_GROUP",
-  //     "apiScope": "MONGODB_COMPATIBLE_API",
-  //     "density": "DENSE",
-  //     "multikey": false,
-  //     "fields": [
-  //       { "fieldPath": "baz", "mode": "ASCENDING" }
-  //     ]
-  //   },
-  //   {
-  //     "collectionGroup": "items",
-  //     "queryScope": "COLLECTION_GROUP",
-  //     "apiScope": "MONGODB_COMPATIBLE_API",
-  //     "density": "SPARSE_ANY",
-  //     "multikey": true,
-  //     "fields": [
-  //       { "fieldPath": "baz", "mode": "ASCENDING" }
-  //     ]
-  //   },
-  // ]
-  "indexes": [],
+  "indexes": [
+    {
+      "collectionGroup": "verifications",
+      "queryScope": "COLLECTION",
+      "fields": [
+        { "fieldPath": "verdict", "order": "ASCENDING" },
+        { "fieldPath": "timestamp", "order": "DESCENDING" }
+      ]
+    }
+  ],
   "fieldOverrides": []
-}
+}

frontend/index.html

@@ -2,9 +2,13 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>frontend</title>
+    <meta name="theme-color" content="#0d0d0d" />
+    <meta name="description" content="PhilVerify — AI-powered fake news detection for Philippine content. Verify text, URLs, images, and video in Tagalog, English, and Taglish." />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <title>PhilVerify — Philippine Fake News Detector</title>
   </head>
   <body>
     <div id="root"></div>

frontend/package-lock.json

@@ -27,6 +27,7 @@
         "eslint-plugin-react-hooks": "^7.0.1",
         "eslint-plugin-react-refresh": "^0.4.24",
         "globals": "^16.5.0",
+        "typescript": "^5.9.3",
         "vite": "^7.3.1"
       }
     },
@@ -4595,6 +4596,20 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/undici-types": {
       "version": "7.18.2",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.18.2.tgz",

frontend/package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.2.1",
@@ -29,6 +30,7 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "typescript": "^5.9.3",
     "vite": "^7.3.1"
   }
 }

frontend/src/App.jsx

@@ -4,18 +4,49 @@ import VerifyPage from './pages/VerifyPage.jsx'
 import HistoryPage from './pages/HistoryPage.jsx'
 import TrendsPage from './pages/TrendsPage.jsx'
 
+/** Shared horizontal constraint — all pages + navbar use this */
+export const PAGE_MAX_W = 960
+export const PAGE_STYLE = {
+  maxWidth: PAGE_MAX_W,
+  width: '100%',
+  margin: '0 auto',
+  padding: '0 24px',
+}
+
 export default function App() {
   return (
     <BrowserRouter>
+      {/* web-design-guidelines: skip link for keyboard/screen-reader users */}
+      <a
+        href="#main-content"
+        className="sr-only focus-visible:not-sr-only"
+        style={{
+          position: 'fixed',
+          top: 8,
+          left: 8,
+          zIndex: 9999,
+          background: 'var(--accent-red)',
+          color: '#fff',
+          padding: '8px 16px',
+          fontFamily: 'var(--font-display)',
+          fontSize: 12,
+          fontWeight: 700,
+          letterSpacing: '0.08em',
+          borderRadius: 2,
+          textDecoration: 'none',
+        }}
+      >
+        Skip to content
+      </a>
       <div style={{ minHeight: '100vh', background: 'var(--bg-base)' }}>
         <Navbar />
-        <main>
+        <div id="main-content">
           <Routes>
             <Route path="/" element={<VerifyPage />} />
             <Route path="/history" element={<HistoryPage />} />
             <Route path="/trends" element={<TrendsPage />} />
           </Routes>
-        </main>
+        </div>
       </div>
     </BrowserRouter>
   )

frontend/src/api.js

@@ -1,6 +1,16 @@
 /** PhilVerify API client — proxied through Vite to http://localhost:8000 */
 const BASE = '/api'
 
+function _detailToString(detail, status) {
+    if (!detail) return `HTTP ${status}`
+    if (typeof detail === 'string') return detail
+    if (Array.isArray(detail)) {
+        // FastAPI validation errors: [{loc, msg, type}, ...]
+        return detail.map(d => d.msg || JSON.stringify(d)).join('; ')
+    }
+    return JSON.stringify(detail)
+}
+
 async function post(path, body) {
     const res = await fetch(`${BASE}${path}`, {
         method: 'POST',
@@ -9,7 +19,9 @@ async function post(path, body) {
     })
     if (!res.ok) {
         const err = await res.json().catch(() => ({}))
-        throw new Error(err.detail || `HTTP ${res.status}`)
+        const e = new Error(_detailToString(err.detail, res.status))
+        e.isBackendError = true   // backend responded — not a connection failure
+        throw e
     }
     return res.json()
 }
@@ -18,7 +30,7 @@ async function postForm(path, formData) {
     const res = await fetch(`${BASE}${path}`, { method: 'POST', body: formData })
     if (!res.ok) {
         const err = await res.json().catch(() => ({}))
-        throw new Error(err.detail || `HTTP ${res.status}`)
+        throw new Error(_detailToString(err.detail, res.status))
     }
     return res.json()
 }
@@ -26,8 +38,13 @@ async function postForm(path, formData) {
 async function get(path, params = {}) {
     const qs = new URLSearchParams(params).toString()
     const res = await fetch(`${BASE}${path}${qs ? '?' + qs : ''}`)
-    if (!res.ok) throw new Error(`HTTP ${res.status}`)
-    return res.json()
+    if (!res.ok) {
+        const err = await res.json().catch(() => ({}))
+        throw new Error(_detailToString(err.detail, res.status))
+    }
+    return res.json().catch(() => {
+        throw new Error('API returned an unexpected response — the server may be starting up. Please try again.')
+    })
 }
 
 export const api = {
@@ -36,6 +53,8 @@ export const api = {
     verifyImage: (file) => { const f = new FormData(); f.append('file', file); return postForm('/verify/image', f) },
     verifyVideo: (file) => { const f = new FormData(); f.append('file', file); return postForm('/verify/video', f) },
     history: (params) => get('/history', params),
+    historyDetail: (id) => get(`/history/${id}`),
     trends: () => get('/trends'),
     health: () => get('/health'),
+    preview: (url) => get('/preview', { url }),
 }

frontend/src/api.ts

@@ -0,0 +1,84 @@
+/**
+ * PhilVerify API client — proxied through Vite to http://localhost:8000
+ * Typed via src/types.ts which mirrors api/schemas.py
+ */
+import type {
+  VerificationResponse,
+  HistoryParams,
+  HistoryResponse,
+  TrendsResponse,
+  HealthResponse,
+  ApiError as ApiErrorType,
+} from './types'
+import { ApiError } from './types'
+
+const BASE = '/api'
+
+// ── Internal fetch helpers ─────────────────────────────────────────────────────
+
+async function post<T>(path: string, body: unknown): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(body),
+  })
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({})) as { detail?: string }
+    throw new ApiError(err.detail ?? `HTTP ${res.status}`, true)
+  }
+  return res.json() as Promise<T>
+}
+
+async function postForm<T>(path: string, formData: FormData): Promise<T> {
+  const res = await fetch(`${BASE}${path}`, { method: 'POST', body: formData })
+  if (!res.ok) {
+    const err = await res.json().catch(() => ({})) as { detail?: string }
+    throw new ApiError(err.detail ?? `HTTP ${res.status}`, true)
+  }
+  return res.json() as Promise<T>
+}
+
+async function get<T>(path: string, params: Record<string, string | number | undefined> = {}): Promise<T> {
+  const defined = Object.fromEntries(
+    Object.entries(params).filter(([, v]) => v !== undefined),
+  ) as Record<string, string>
+  const qs = new URLSearchParams(defined).toString()
+  const res = await fetch(`${BASE}${path}${qs ? '?' + qs : ''}`)
+  if (!res.ok) throw new ApiError(`HTTP ${res.status}`)
+  return res.json() as Promise<T>
+}
+
+// ── Public API surface ─────────────────────────────────────────────────────────
+
+export const api = {
+  verifyText: (text: string): Promise<VerificationResponse> =>
+    post('/verify/text', { text }),
+
+  verifyUrl: (url: string): Promise<VerificationResponse> =>
+    post('/verify/url', { url }),
+
+  verifyImage: (file: File): Promise<VerificationResponse> => {
+    const f = new FormData()
+    f.append('file', file)
+    return postForm('/verify/image', f)
+  },
+
+  verifyVideo: (file: File): Promise<VerificationResponse> => {
+    const f = new FormData()
+    f.append('file', file)
+    return postForm('/verify/video', f)
+  },
+
+  history: (params?: HistoryParams): Promise<HistoryResponse> =>
+    get('/history', params as Record<string, string | number | undefined>),
+
+  trends: (): Promise<TrendsResponse> =>
+    get('/trends'),
+
+  health: (): Promise<HealthResponse> =>
+    get('/health'),
+} as const
+
+// Re-export error class for consumers
+export { ApiError } from './types'
+export type { ApiErrorType }

frontend/src/components/Navbar.jsx

@@ -1,5 +1,6 @@
-import { NavLink } from 'react-router-dom'
+import { NavLink, Link } from 'react-router-dom'
 import { Radar, Clock, TrendingUp, ShieldCheck } from 'lucide-react'
+import { PAGE_STYLE } from '../App.jsx'
 
 const NAV_LINKS = [
     { to: '/', icon: ShieldCheck, label: 'Verify' },
@@ -9,55 +10,69 @@ const NAV_LINKS = [
 
 export default function Navbar() {
     return (
-        /* semantic <header> — web-design-guidelines: semantic HTML */
         <header
             role="banner"
             style={{ background: 'var(--bg-surface)', borderBottom: '1px solid var(--border)' }}
-            className="sticky top-0 z-50 flex items-center justify-between px-6 h-14"
+            className="sticky top-0 z-50 h-14"
         >
-            {/* Logo */}
-            <div className="flex items-center gap-2" aria-label="PhilVerify home">
-                <Radar size={18} style={{ color: 'var(--accent-red)' }} aria-hidden="true" />
-                <span className="font-display font-bold text-sm tracking-wide"
-                    style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.05em' }}>
-                    PHIL<span style={{ color: 'var(--accent-red)' }}>VERIFY</span>
-                </span>
-            </div>
+            {/* Inner content aligned to same width as page content */}
+            <div style={{
+                ...PAGE_STYLE,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                height: '100%',
+            }}>
+                {/* Logo — Link to home */}
+                <Link
+                    to="/"
+                    className="flex items-center gap-2"
+                    aria-label="PhilVerify home"
+                    style={{ textDecoration: 'none' }}
+                >
+                    <Radar size={18} style={{ color: 'var(--accent-red)' }} aria-hidden="true" />
+                    <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, letterSpacing: '0.05em', color: 'var(--text-primary)' }}>
+                        PHIL<span style={{ color: 'var(--accent-red)' }}>VERIFY</span>
+                    </span>
+                </Link>
 
-            {/* Nav — web-design-guidelines: use <nav> for navigation */}
-            <nav aria-label="Main navigation">
-                <ul className="flex items-center gap-1" role="list">
-                    {NAV_LINKS.map(({ to, icon: Icon, label }) => (
-                        <li key={to}>
-                            <NavLink to={to} end={to === '/'}>
-                                {({ isActive }) => (
-                                    <div
-                                        className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold transition-colors"
-                                        style={{
-                                            fontFamily: 'var(--font-display)',
-                                            letterSpacing: '0.08em',
-                                            color: isActive ? 'var(--text-primary)' : 'var(--text-muted)',
-                                            borderBottom: isActive ? '2px solid var(--accent-red)' : '2px solid transparent',
-                                        }}
-                                    >
-                                        {/* aria-hidden on decorative icons — web-design-guidelines */}
-                                        <Icon size={13} aria-hidden="true" />
-                                        {label}
-                                    </div>
-                                )}
-                            </NavLink>
-                        </li>
-                    ))}
-                </ul>
-            </nav>
+                {/* Nav */}
+                <nav aria-label="Main navigation">
+                    <ul className="flex items-center gap-2" role="list">
+                        {NAV_LINKS.map(({ to, icon: Icon, label }) => (
+                            <li key={to}>
+                                <NavLink to={to} end={to === '/'} className="nav-link-item">
+                                    {({ isActive }) => (
+                                        <div
+                                            className="flex items-center gap-2 px-4 py-2 text-xs font-semibold transition-colors"
+                                            style={{
+                                                fontFamily: 'var(--font-display)',
+                                                letterSpacing: '0.08em',
+                                                color: isActive ? 'var(--text-primary)' : 'var(--text-secondary)',
+                                                borderBottom: isActive ? '2px solid var(--accent-red)' : '2px solid transparent',
+                                                minHeight: 44,
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                            }}
+                                        >
+                                            <Icon size={13} aria-hidden="true" />
+                                            {label}
+                                        </div>
+                                    )}
+                                </NavLink>
+                            </li>
+                        ))}
+                    </ul>
+                </nav>
 
-            {/* Live indicator */}
-            <div className="flex items-center gap-1.5 text-xs tabular"
-                style={{ color: 'var(--text-muted)' }}
-                aria-label="API status: live">
-                <span className="w-1.5 h-1.5 rounded-full" aria-hidden="true"
-                    style={{ background: 'var(--accent-green)' }} />
-                LIVE
+                {/* Live indicator */}
+                <div className="flex items-center gap-1.5 text-xs tabular"
+                    style={{ color: 'var(--text-muted)' }}
+                    aria-label="API status: live">
+                    <span className="w-1.5 h-1.5 rounded-full" aria-hidden="true"
+                        style={{ background: 'var(--accent-green)' }} />
+                    LIVE
+                </div>
             </div>
         </header>
     )

frontend/src/components/SkeletonCard.jsx

@@ -0,0 +1,46 @@
+/**
+ * SkeletonCard — Phase 8: Loading state skeleton screens
+ * Used while the verification API call is in-flight.
+ * web-design-guidelines: content-jumping — reserve space for async content.
+ * web-design-guidelines: prefers-reduced-motion — skip animation if user prefers.
+ */
+export default function SkeletonCard({ lines = 3, height = null, className = '' }) {
+    return (
+        <div className={`card p-5 ${className}`} aria-hidden="true">
+            {height ? (
+                <SkeletonBar style={{ height, borderRadius: 4 }} />
+            ) : (
+                <div className="space-y-3">
+                    {Array.from({ length: lines }).map((_, i) => (
+                        <SkeletonBar key={i}
+                            style={{
+                                height: i === 0 ? 12 : 10,
+                                width: i === lines - 1 ? '60%' : '100%',
+                            }}
+                        />
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
+
+function SkeletonBar({ style = {} }) {
+    return (
+        <div
+            style={{
+                background: 'var(--bg-elevated)',
+                borderRadius: 3,
+                overflow: 'hidden',
+                ...style,
+            }}
+        >
+            <div style={{
+                width: '100%',
+                height: '100%',
+                background: 'linear-gradient(90deg, transparent 0%, rgba(245,240,232,0.05) 50%, transparent 100%)',
+                animation: 'shimmer 1.5s infinite',
+            }} />
+        </div>
+    )
+}

frontend/src/components/WordHighlighter.jsx

@@ -0,0 +1,115 @@
+/**
+ * WordHighlighter — Phase 8: Suspicious Word Highlighter
+ * Highlights suspicious / clickbait trigger words in the claim text.
+ * Uses triggered_features from Layer 1 as hint words.
+ *
+ * architect-review: pure presentational, no side-effects.
+ * web-design-guidelines: uses <mark> with visible styles, screen-reader friendly.
+ */
+
+// Common suspicious/misinformation signal words to highlight
+const SUSPICIOUS_PATTERNS = [
+    // English signals
+    /\b(shocking|exposed|revealed|secret|hoax|fake|false|confirmed|breaking|urgent|emergency|exclusive|banned|cover[\s-]?up|conspiracy|miracle|crisis|scandal|leaked|hidden|truth|they don't want you to know)\b/gi,
+    // Filipino signals
+    /\b(grabe|nakakagulat|totoo|peke|huwag maniwala|nagsisinungaling|lihim|inilabas|natuklasan|katotohanan|panlilinlang|kahirap-hirap|itinatago)\b/gi,
+]
+
+function getHighlightedSegments(text, triggerWords = []) {
+    if (!text) return []
+
+    // Build a combined pattern from both static patterns + dynamic trigger words
+    const allPatterns = [...SUSPICIOUS_PATTERNS]
+
+    if (triggerWords.length > 0) {
+        const escaped = triggerWords.map(w => w.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+        allPatterns.push(new RegExp(`\\b(${escaped.join('|')})\\b`, 'gi'))
+    }
+
+    // Find all match intervals
+    const matches = []
+    for (const pattern of allPatterns) {
+        pattern.lastIndex = 0
+        let m
+        while ((m = pattern.exec(text)) !== null) {
+            matches.push({ start: m.index, end: m.index + m[0].length, word: m[0] })
+        }
+    }
+
+    if (matches.length === 0) return [{ text, highlighted: false }]
+
+    // Sort + merge overlapping intervals
+    matches.sort((a, b) => a.start - b.start)
+    const merged = []
+    for (const m of matches) {
+        const last = merged[merged.length - 1]
+        if (last && m.start <= last.end) {
+            last.end = Math.max(last.end, m.end)
+        } else {
+            merged.push({ ...m })
+        }
+    }
+
+    // Build segments
+    const segments = []
+    let cursor = 0
+    for (const { start, end, word } of merged) {
+        if (cursor < start) segments.push({ text: text.slice(cursor, start), highlighted: false })
+        segments.push({ text: text.slice(start, end), highlighted: true, word })
+        cursor = end
+    }
+    if (cursor < text.length) segments.push({ text: text.slice(cursor), highlighted: false })
+
+    return segments
+}
+
+export default function WordHighlighter({ text = '', triggerWords = [], className = '' }) {
+    const segments = getHighlightedSegments(text, triggerWords)
+    const hitCount = segments.filter(s => s.highlighted).length
+
+    if (segments.length === 1 && !segments[0].highlighted) {
+        // No suspicious words found
+        return (
+            <p className={className}
+                style={{ fontFamily: 'var(--font-body)', lineHeight: 1.7, color: 'var(--text-primary)' }}>
+                {text}
+            </p>
+        )
+    }
+
+    return (
+        <div>
+            {hitCount > 0 && (
+                <p className="text-xs mb-2"
+                    style={{
+                        color: 'var(--accent-gold)',
+                        fontFamily: 'var(--font-display)',
+                        letterSpacing: '0.08em',
+                    }}
+                    aria-live="polite">
+                    ⚠ {hitCount} suspicious signal{hitCount !== 1 ? 's' : ''} detected
+                </p>
+            )}
+            <p className={className} style={{ fontFamily: 'var(--font-body)', lineHeight: 1.7, color: 'var(--text-primary)' }}>
+                {segments.map((seg, i) =>
+                    seg.highlighted ? (
+                        <mark key={i}
+                            title={`Suspicious signal: "${seg.word}"`}
+                            style={{
+                                background: 'rgba(220, 38, 38, 0.18)',
+                                color: '#f87171',
+                                borderRadius: 2,
+                                padding: '0 2px',
+                                fontWeight: 600,
+                                outline: '1px solid rgba(220,38,38,0.3)',
+                            }}>
+                            {seg.text}
+                        </mark>
+                    ) : (
+                        <span key={i}>{seg.text}</span>
+                    )
+                )}
+            </p>
+        </div>
+    )
+}

frontend/src/firebase.js

@@ -13,14 +13,28 @@ const firebaseConfig = {
 const app = initializeApp(firebaseConfig)
 export const db = getFirestore(app)
 
-/** Subscribe to the 20 most recent verifications in real-time. */
-export function subscribeToHistory(callback) {
+/**
+ * Subscribe to the 20 most recent verifications in real-time.
+ * @param {Function} callback - called with array of docs on each update
+ * @param {Function} [onError] - called with Error when Firestore is unreachable (e.g. ad blocker)
+ * @returns unsubscribe function
+ */
+export function subscribeToHistory(callback, onError) {
     const q = query(
         collection(db, 'verifications'),
         orderBy('timestamp', 'desc'),
         limit(20)
     )
-    return onSnapshot(q, (snap) => {
-        callback(snap.docs.map(d => ({ id: d.id, ...d.data() })))
-    })
+    return onSnapshot(
+        q,
+        (snap) => {
+            callback(snap.docs.map(d => ({ id: d.id, ...d.data() })))
+        },
+        (error) => {
+            // Firestore blocked (ERR_BLOCKED_BY_CLIENT from ad blockers) or
+            // permission denied — fail fast and let caller fall back to REST.
+            console.warn('[PhilVerify] Firestore unavailable:', error.code || error.message)
+            if (onError) onError(error)
+        }
+    )
 }

frontend/src/index.css

@@ -97,6 +97,13 @@ h4 {
   border-radius: 4px;
 }
 
+/* Textarea: use box-shadow ring for :focus-visible so keyboard users see focus;
+   border-color animation still handled by onFocus/onBlur JS handlers */
+.claim-textarea:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--accent-red);
+}
+
 /* ── Touch (web-design-guidelines) ───────────────────── */
 button,
 a,
@@ -161,7 +168,17 @@ a,
 /* ── Left-rule accent divider ────────────────────────── */
 .ruled {
   border-left: 3px solid var(--accent-red);
-  padding-left: 12px;
+  padding-left: 16px;
+}
+
+/* ── Nav link hover ──────────────────────────────────────── */
+a.nav-link-item {
+  text-decoration: none;
+  display: block;
+}
+
+a.nav-link-item:hover > div {
+  color: var(--text-primary) !important;
 }
 
 /* ── Animations (frontend-design: one orchestrated reveal) ─── */
@@ -222,6 +239,16 @@ a,
   .bar-fill {
     animation: barGrow 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
   }
+
+  @keyframes shimmer {
+    0% {
+      transform: translateX(-100%);
+    }
+
+    100% {
+      transform: translateX(100%);
+    }
+  }
 }
 
 /* Fallback: no animation for reduced-motion users */

frontend/src/pages/HistoryPage.jsx

@@ -1,53 +1,480 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useCallback, useMemo } from 'react'
 import { subscribeToHistory } from '../firebase.js'
-import { timeAgo } from '../utils/format.js'
+import { timeAgo, VERDICT_MAP, scoreColor } from '../utils/format.js'
+import { PAGE_STYLE } from '../App.jsx'
+import { api } from '../api'
 import VerdictBadge from '../components/VerdictBadge.jsx'
-import { Clock, RefreshCw } from 'lucide-react'
+import SkeletonCard from '../components/SkeletonCard.jsx'
+import { Clock, RefreshCw, WifiOff, ChevronUp, ChevronDown, ChevronsUpDown, X, Loader2, FileText, Globe, ImageIcon, Video } from 'lucide-react'
+
+
+/* ── Sort icon helper ─────────────────────────────────── */
+function SortIcon({ field, current, dir }) {
+    if (current !== field) return <ChevronsUpDown size={10} aria-hidden="true" style={{ opacity: 0.3 }} />
+    return dir === 'asc'
+        ? <ChevronUp size={10} aria-hidden="true" />
+        : <ChevronDown size={10} aria-hidden="true" />
+}
+
+/* ── Column header button ─────────────────────────────── */
+function ColHeader({ children, field, sort, dir, onSort }) {
+    const active = sort === field
+    return (
+        <button
+            onClick={() => onSort(field)}
+            className="flex items-center gap-1 text-xs font-semibold uppercase"
+            style={{
+                fontFamily: 'var(--font-display)',
+                letterSpacing: '0.1em',
+                color: active ? 'var(--text-primary)' : 'var(--text-muted)',
+                background: 'none',
+                border: 'none',
+                cursor: 'pointer',
+                padding: 0,
+                minHeight: 44,
+            }}
+            aria-sort={active ? (dir === 'asc' ? 'ascending' : 'descending') : 'none'}>
+            {children}
+            <SortIcon field={field} current={sort} dir={dir} />
+        </button>
+    )
+}
+
+/* ── Input-type icon ─────────────────────────────────── */
+function InputTypeIcon({ type, size = 12 }) {
+    const icons = { url: Globe, image: ImageIcon, video: Video, text: FileText }
+    const Icon = icons[type] ?? FileText
+    return <Icon size={size} aria-hidden="true" />
+}
+
+/* ── Detail Modal ────────────────────────────────────── */
+function DetailModal({ id, onClose }) {
+    const [data, setData] = useState(null)
+    const [loadingDetail, setLoadingDetail] = useState(true)
+    const [error, setError] = useState(null)
+
+    useEffect(() => {
+        setLoadingDetail(true); setError(null)
+        api.historyDetail(id)
+            .then(setData)
+            .catch(e => setError(e.message ?? 'Failed to load'))
+            .finally(() => setLoadingDetail(false))
+    }, [id])
+
+    useEffect(() => {
+        function onKey(e) { if (e.key === 'Escape') onClose() }
+        window.addEventListener('keydown', onKey)
+        return () => window.removeEventListener('keydown', onKey)
+    }, [onClose])
+
+    const s = scoreColor(data?.final_score)
+    const layer1 = data?.layer1
+    const layer2 = data?.layer2
+    const entities = data?.entities?.entities ?? []
+
+    return (
+        <div
+            role="dialog"
+            aria-modal="true"
+            aria-label="Verification detail"
+            onClick={e => { if (e.target === e.currentTarget) onClose() }}
+            style={{
+                position: 'fixed', inset: 0, zIndex: 1000,
+                background: 'rgba(0,0,0,0.6)',
+                display: 'flex', alignItems: 'center', justifyContent: 'center',
+                padding: '16px',
+                backdropFilter: 'blur(4px)',
+            }}>
+            <div className="card"
+                style={{
+                    width: '100%', maxWidth: 600,
+                    maxHeight: '90vh', overflowY: 'auto',
+                    padding: 0,
+                    position: 'relative',
+                    borderColor: 'var(--border-light)',
+                    display: 'flex', flexDirection: 'column',
+                }}>
+                {/* Header */}
+                <div className="flex items-center justify-between"
+                    style={{
+                        padding: '16px 20px',
+                        borderBottom: '1px solid var(--border)',
+                        background: 'var(--bg-elevated)',
+                        position: 'sticky', top: 0, zIndex: 1,
+                    }}>
+                    <div className="flex items-center gap-2">
+                        <span className="text-xs font-semibold uppercase"
+                            style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>
+                            Verification Detail
+                        </span>
+                        {data && <span className="text-xs tabular"
+                            style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-muted)', fontSize: 10 }}>
+                            {id.slice(0, 8)}…
+                        </span>}
+                    </div>
+                    <button onClick={onClose} aria-label="Close"
+                        style={{
+                            background: 'none', border: 'none', cursor: 'pointer',
+                            color: 'var(--text-muted)', display: 'flex', alignItems: 'center',
+                            padding: 4, borderRadius: 4,
+                        }}>
+                        <X size={16} />
+                    </button>
+                </div>
+
+                {/* Body */}
+                <div style={{ padding: '20px', display: 'flex', flexDirection: 'column', gap: 18 }}>
+
+                    {loadingDetail && (
+                        <div className="flex items-center justify-center" style={{ padding: 40, gap: 8, color: 'var(--text-muted)' }}>
+                            <Loader2 size={18} className="animate-spin" />
+                            <span className="text-sm" style={{ fontFamily: 'var(--font-body)' }}>Loading…</span>
+                        </div>
+                    )}
+
+                    {error && (
+                        <div className="text-sm text-center" style={{ color: 'var(--fake)', padding: 32, fontFamily: 'var(--font-body)' }}>
+                            {error}
+                        </div>
+                    )}
+
+                    {data && !loadingDetail && (<>
+                        {/* Verdict + Score row */}
+                        <div className="flex items-center gap-3 flex-wrap">
+                            <VerdictBadge verdict={data.verdict} size="md" />
+                            <span className="tabular font-bold"
+                                style={{ fontSize: 28, fontFamily: 'var(--font-mono)', color: s, lineHeight: 1 }}>
+                                {Math.round(data.final_score)}
+                            </span>
+                            <span className="text-xs" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
+                                score
+                            </span>
+                            <span className="tabular text-sm" style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-secondary)', marginLeft: 'auto' }}>
+                                {Math.round(data.confidence)}% confidence
+                            </span>
+                        </div>
+
+                        {/* Meta row */}
+                        <div className="flex items-center flex-wrap gap-2">
+                            <span className="flex items-center gap-1 text-xs px-1.5 py-0.5"
+                                style={{
+                                    background: 'var(--bg-elevated)', border: '1px solid var(--border)',
+                                    borderRadius: 3, fontFamily: 'var(--font-display)', letterSpacing: '0.08em',
+                                    color: 'var(--text-muted)',
+                                }}>
+                                <InputTypeIcon type={data.input_type} />
+                                {data.input_type?.toUpperCase()}
+                            </span>
+                            {data.language && (
+                                <span className="text-xs px-1.5 py-0.5"
+                                    style={{
+                                        background: 'var(--bg-elevated)', border: '1px solid var(--border)',
+                                        borderRadius: 3, fontFamily: 'var(--font-display)', letterSpacing: '0.08em',
+                                        color: 'var(--text-muted)', textTransform: 'uppercase',
+                                    }}>
+                                    {data.language}
+                                </span>
+                            )}
+                            <time className="text-xs tabular ml-auto"
+                                style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}
+                                dateTime={data.timestamp}>
+                                {new Date(data.timestamp).toLocaleString()}
+                            </time>
+                        </div>
+
+                        {/* Claim / text */}
+                        {(data.claim_used || data.text_preview) && (
+                            <div style={{ borderLeft: '2px solid var(--border-light)', paddingLeft: 12 }}>
+                                <p className="text-xs font-semibold uppercase mb-1"
+                                    style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>
+                                    Claim
+                                </p>
+                                <p className="text-sm" style={{ fontFamily: 'var(--font-body)', color: 'var(--text-primary)', lineHeight: 1.6 }}>
+                                    {data.claim_used || data.text_preview}
+                                </p>
+                            </div>
+                        )}
+
+                        {/* Layer 1 */}
+                        {layer1 && (
+                            <div style={{ background: 'var(--bg-elevated)', borderRadius: 4, padding: '12px 14px', border: '1px solid var(--border)' }}>
+                                <p className="text-xs font-semibold uppercase mb-2"
+                                    style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>
+                                    Layer 1 — NLP Analysis
+                                </p>
+                                <div className="flex items-center gap-3 mb-2">
+                                    <VerdictBadge verdict={layer1.verdict} size="sm" />
+                                    <span className="tabular text-sm" style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-secondary)' }}>
+                                        {Math.round(layer1.confidence)}% confidence
+                                    </span>
+                                </div>
+                                {layer1.triggered_features?.length > 0 && (
+                                    <div className="flex flex-wrap gap-1 mt-2">
+                                        {layer1.triggered_features.map(f => (
+                                            <span key={f} className="text-xs px-2 py-0.5"
+                                                style={{
+                                                    background: 'var(--bg-hover)', border: '1px solid var(--border)',
+                                                    borderRadius: 3, fontFamily: 'var(--font-mono)',
+                                                    color: 'var(--text-secondary)', fontSize: 10,
+                                                }}>
+                                                {f}
+                                            </span>
+                                        ))}
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                        {/* Layer 2 */}
+                        {layer2 && (
+                            <div style={{ background: 'var(--bg-elevated)', borderRadius: 4, padding: '12px 14px', border: '1px solid var(--border)' }}>
+                                <p className="text-xs font-semibold uppercase mb-2"
+                                    style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>
+                                    Layer 2 — Evidence Check
+                                </p>
+                                <div className="flex items-center gap-3 mb-2">
+                                    <VerdictBadge verdict={layer2.verdict} size="sm" />
+                                    <span className="tabular text-sm" style={{ fontFamily: 'var(--font-mono)', color: 'var(--text-secondary)' }}>
+                                        Evidence: {Math.round((layer2.evidence_score ?? 0) * 100)}%
+                                    </span>
+                                </div>
+                                {layer2.claim_used && (
+                                    <p className="text-xs italic"
+                                        style={{ fontFamily: 'var(--font-body)', color: 'var(--text-muted)', marginTop: 6 }}>
+                                        &ldquo;{layer2.claim_used}&rdquo;
+                                    </p>
+                                )}
+                            </div>
+                        )}
+
+                        {/* Sentiment */}
+                        {(data.sentiment || data.emotion) && (
+                            <div className="flex gap-3 flex-wrap">
+                                {data.sentiment && (
+                                    <div style={{ background: 'var(--bg-elevated)', borderRadius: 4, padding: '10px 14px', border: '1px solid var(--border)', flex: 1 }}>
+                                        <p className="text-xs font-semibold uppercase mb-1"
+                                            style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>
+                                            Sentiment
+                                        </p>
+                                        <p className="text-sm capitalize" style={{ fontFamily: 'var(--font-body)', color: 'var(--text-primary)' }}>
+                                            {data.sentiment}
+                                        </p>
+                                    </div>
+                                )}
+                                {data.emotion && (
+                                    <div style={{ background: 'var(--bg-elevated)', borderRadius: 4, padding: '10px 14px', border: '1px solid var(--border)', flex: 1 }}>
+                                        <p className="text-xs font-semibold uppercase mb-1"
+                                            style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>
+                                            Emotion
+                                        </p>
+                                        <p className="text-sm capitalize" style={{ fontFamily: 'var(--font-body)', color: 'var(--text-primary)' }}>
+                                            {data.emotion}
+                                        </p>
+                                    </div>
+                                )}
+                            </div>
+                        )}
+
+                        {/* Entities */}
+                        {entities.length > 0 && (
+                            <div>
+                                <p className="text-xs font-semibold uppercase mb-2"
+                                    style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>
+                                    Entities Detected
+                                </p>
+                                <div className="flex flex-wrap gap-1.5">
+                                    {entities.map((ent, i) => (
+                                        <span key={i} className="flex items-center gap-1 text-xs px-2 py-0.5"
+                                            style={{
+                                                background: 'var(--bg-elevated)', border: '1px solid var(--border-light)',
+                                                borderRadius: 3, fontFamily: 'var(--font-body)',
+                                                color: 'var(--text-primary)',
+                                            }}>
+                                            {ent.text ?? ent.entity ?? ent}
+                                            {(ent.label ?? ent.entity_type) && (
+                                                <span style={{ color: 'var(--text-muted)', fontSize: 9, fontFamily: 'var(--font-mono)', fontWeight: 700 }}>
+                                                    {(ent.label ?? ent.entity_type).toUpperCase()}
+                                                </span>
+                                            )}
+                                        </span>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </>)}
+                </div>
+            </div>
+        </div>
+    )
+}
 
 export default function HistoryPage() {
     const [entries, setEntries] = useState([])
     const [loading, setLoading] = useState(true)
+    const [source, setSource] = useState('firestore')
+    const [sort, setSort] = useState('timestamp')
+    const [dir, setDir] = useState('desc')
+    const [filter, setFilter] = useState('all') // 'all' | 'Credible' | 'Unverified' | 'Likely Fake'
+    const [selectedId, setSelectedId] = useState(null)
+
+    const fetchRest = useCallback(() => {
+        api.history({ limit: 50 })
+            .then(data => {
+                const list = Array.isArray(data) ? data : (data.entries ?? [])
+                setEntries(list)
+            })
+            .catch(() => setEntries([]))
+            .finally(() => setLoading(false))
+    }, [])
 
     useEffect(() => {
-        /** Real-time Firestore subscription */
-        const unsub = subscribeToHistory((docs) => {
-            setEntries(docs)
-            setLoading(false)
+        let resolved = false
+        let restInterval = null
+        let unsubRef = null // declared before subscribeToHistory so goRest() can reach it
+
+        function goRest() {
+            if (resolved) return
+            resolved = true
+            // Immediately kill the Firestore listener so the SDK stops retrying
+            // (prevents the ERR_BLOCKED_BY_CLIENT console flood from auto-retries)
+            unsubRef?.()
+            setSource('rest')
+            fetchRest()
+            restInterval = setInterval(fetchRest, 30_000)
+        }
+
+        // Fallback to REST after 1.5 s if Firestore hasn't connected
+        const fallbackTimer = setTimeout(goRest, 1500)
+
+        unsubRef = subscribeToHistory(
+            (docs) => {
+                if (!resolved) { resolved = true; clearTimeout(fallbackTimer) }
+                setEntries(docs)
+                setLoading(false)
+            },
+            // onError: Firestore blocked by ad-blocker → instant REST fallback
+            () => {
+                clearTimeout(fallbackTimer)
+                goRest()
+            }
+        )
+
+        return () => { unsubRef?.(); clearTimeout(fallbackTimer); if (restInterval) clearInterval(restInterval) }
+    }, [fetchRest])
+
+    function handleSort(field) {
+        if (sort === field) setDir(d => d === 'asc' ? 'desc' : 'asc')
+        else { setSort(field); setDir('desc') }
+    }
+
+    const filtered = useMemo(() => {
+        let data = [...entries]
+        if (filter !== 'all') data = data.filter(e => e.verdict === filter)
+        data.sort((a, b) => {
+            let av = a[sort], bv = b[sort]
+            if (sort === 'timestamp') { av = new Date(av); bv = new Date(bv) }
+            if (sort === 'final_score') { av = Number(av); bv = Number(bv) }
+            if (av < bv) return dir === 'asc' ? -1 : 1
+            if (av > bv) return dir === 'asc' ? 1 : -1
+            return 0
         })
-        return unsub
-    }, [])
+        return data
+    }, [entries, sort, dir, filter])
+
+    const verdictCounts = useMemo(() => {
+        const counts = { all: entries.length, Credible: 0, Unverified: 0, 'Likely Fake': 0 }
+        entries.forEach(e => { if (counts[e.verdict] !== undefined) counts[e.verdict]++ })
+        return counts
+    }, [entries])
+
+    const FILTER_TABS = [
+        { key: 'all', label: 'All', color: 'var(--text-secondary)' },
+        { key: 'Credible', label: 'Verified', color: 'var(--credible)' },
+        { key: 'Unverified', label: 'Unverified', color: 'var(--unverified)' },
+        { key: 'Likely Fake', label: 'False', color: 'var(--fake)' },
+    ]
 
     return (
-        <main className="max-w-3xl mx-auto px-4 py-8 space-y-6">
-            <header className="ruled fade-up-1 flex items-end justify-between">
+        <main style={{ ...PAGE_STYLE, paddingTop: 40, paddingBottom: 56, display: 'flex', flexDirection: 'column', gap: 24 }}>
+
+            {/* ── Header ────────────────────────────────── */}
+            <header className="ruled fade-up-1 flex items-end justify-between flex-wrap gap-2">
                 <div>
-                    <h1 style={{ fontSize: 32, fontFamily: 'var(--font-display)' }}>History</h1>
+                    <h1 style={{ fontSize: 28, fontFamily: 'var(--font-display)' }}>History</h1>
                     <p className="mt-1 text-sm" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>
-                        Real-time from Firestore
-                        {/* web-design-guidelines: tabular-nums for counts */}
-                        {' — '}<span className="tabular">{entries.length}</span> records
+                        {source === 'firestore' ? 'Real-time from Firestore' : 'Polling via REST API'}
+                        {' — '}<span className="tabular" style={{ fontFamily: 'var(--font-mono)' }}>{entries.length}</span> records
                     </p>
                 </div>
-                {/* aria-label on icon wrapper */}
                 <div className="flex items-center gap-1.5 text-xs"
-                    style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', letterSpacing: '0.1em' }}
-                    aria-label="Data is refreshing live">
-                    <RefreshCw size={11} aria-hidden="true" />
-                    LIVE
+                    style={{
+                        color: source === 'rest' ? 'var(--accent-gold)' : 'var(--accent-green)',
+                        fontFamily: 'var(--font-display)',
+                        letterSpacing: '0.1em',
+                    }}
+                    aria-label={source === 'firestore' ? 'Live data' : 'Polling REST API'}>
+                    <span className="w-1.5 h-1.5 rounded-full" style={{ background: 'currentColor' }} />
+                    {source === 'rest' ? <><WifiOff size={11} aria-hidden="true" /> POLLING</> : <><RefreshCw size={11} aria-hidden="true" /> LIVE</>}
                 </div>
             </header>
 
+            {/* ── Firestore blocked notice ───────────────── */}
+            {source === 'rest' && !loading && (
+                <div className="card p-3 flex items-center gap-2"
+                    style={{ borderColor: 'rgba(217,119,6,0.3)', background: 'rgba(217,119,6,0.05)' }}>
+                    <WifiOff size={13} style={{ color: 'var(--accent-gold)', flexShrink: 0 }} aria-hidden="true" />
+                    <p className="text-xs" style={{ color: 'var(--accent-gold)', fontFamily: 'var(--font-body)' }}>
+                        Firestore may be blocked by an ad blocker — using REST fallback. Whitelist <code>firestore.googleapis.com</code> to restore live updates.
+                    </p>
+                </div>
+            )}
+
+            {/* ── Filter tabs ────────────────────────────── */}
+            {!loading && entries.length > 0 && (
+                <div role="tablist" aria-label="Filter by verdict" className="flex gap-1 flex-wrap fade-up-2">
+                    {FILTER_TABS.map(({ key, label, color }) => (
+                        <button key={key}
+                            role="tab"
+                            aria-selected={filter === key}
+                            onClick={() => setFilter(key)}
+                            className="flex items-center gap-1.5 px-3 py-2 text-xs font-semibold transition-colors"
+                            style={{
+                                fontFamily: 'var(--font-display)',
+                                letterSpacing: '0.07em',
+                                background: filter === key ? 'var(--bg-elevated)' : 'transparent',
+                                color: filter === key ? color : 'var(--text-muted)',
+                                border: `1px solid ${filter === key ? 'var(--border-light)' : 'var(--border)'}`,
+                                cursor: 'pointer',
+                                borderRadius: 2,
+                                minHeight: 44,
+                            }}>
+                            {label}
+                            <span style={{
+                                background: 'var(--bg-hover)',
+                                padding: '0 5px',
+                                borderRadius: 2,
+                                fontSize: 10,
+                                fontFamily: 'var(--font-mono)',
+                                color: filter === key ? color : 'var(--text-muted)',
+                            }}>
+                                {verdictCounts[key]}
+                            </span>
+                        </button>
+                    ))}
+                </div>
+            )}
+
+            {/* ── Loading skeleton ──────────────────────── */}
             {loading && (
-                <p className="text-center py-16 text-sm" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}
-                    aria-live="polite">
-                    Loading history…
-                </p>
+                <div className="space-y-2" aria-live="polite" aria-label="Loading history">
+                    {[...Array(5)].map((_, i) => <SkeletonCard key={i} lines={2} />)}
+                </div>
             )}
 
+            {/* ── Empty state ────────────────────────────── */}
             {!loading && entries.length === 0 && (
-                <div className="card p-12 text-center fade-up">
-                    <Clock size={28} aria-hidden="true"
-                        style={{ color: 'var(--text-muted)', margin: '0 auto 12px' }} />
+                <div className="card p-16 text-center fade-up">
+                    <Clock size={28} aria-hidden="true" style={{ color: 'var(--text-muted)', margin: '0 auto 12px' }} />
                     <p style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-display)', fontWeight: 700 }}>
                         No verifications yet
                     </p>
@@ -57,47 +484,86 @@ export default function HistoryPage() {
                 </div>
             )}
 
-            {/* web-design-guidelines: <ul> list for screen readers */}
-            {entries.length > 0 && (
-                <ul className="space-y-2" role="list" aria-label="Verification history" aria-live="polite">
-                    {entries.map((e, i) => (
-                        <li key={e.id} className="card p-4 fade-up"
-                            style={{ animationDelay: `${Math.min(i * 30, 300)}ms` }}>
-                            <div className="flex items-start justify-between gap-3">
-                                <div className="flex-1 min-w-0">
-                                    {/* web-design-guidelines: flex children need min-w-0 for truncation */}
+            {/* ── Table ─────────────────────────────────── */}
+            {filtered.length > 0 && (
+                <div className="card overflow-hidden fade-up-3">
+                    {/* Table header */}
+                    <div className="px-4 py-2 grid items-center"
+                        style={{
+                            gridTemplateColumns: '1fr 56px 90px 110px',
+                            gap: '0 12px',
+                            borderBottom: '1px solid var(--border)',
+                            background: 'var(--bg-elevated)',
+                        }}
+                        role="row">
+                        <ColHeader field="text_preview" sort={sort} dir={dir} onSort={handleSort}>Claim</ColHeader>
+                        <div style={{ textAlign: 'right' }}>
+                            <ColHeader field="final_score" sort={sort} dir={dir} onSort={handleSort}>Score</ColHeader>
+                        </div>
+                        <ColHeader field="timestamp" sort={sort} dir={dir} onSort={handleSort}>Time</ColHeader>
+                        <span className="text-xs font-semibold uppercase"
+                            style={{ fontFamily: 'var(--font-display)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>
+                            Verdict
+                        </span>
+                    </div>
+
+                    {/* Rows */}
+                    <ul className="divide-y" style={{ '--tw-divide-color': 'var(--border)' }} role="list" aria-label="Verification history" aria-live="polite">
+                        {filtered.map((e, i) => (
+                            <li key={e.id}
+                                className="px-4 py-3 grid items-center fade-up hover:bg-[var(--bg-elevated)] transition-colors"
+                                role="button"
+                                tabIndex={0}
+                                onClick={() => setSelectedId(e.id)}
+                                onKeyDown={ev => { if (ev.key === 'Enter' || ev.key === ' ') { ev.preventDefault(); setSelectedId(e.id) } }}
+                                style={{
+                                    gridTemplateColumns: '1fr 56px 90px 110px',
+                                    gap: '0 12px',
+                                    animationDelay: `${Math.min(i * 25, 200)}ms`,
+                                    borderBottom: '1px solid var(--border)',
+                                    cursor: 'pointer',
+                                }}>
+                                <div className="min-w-0">
                                     <p className="text-sm truncate" style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-body)' }}>
-                                        {e.text_preview || 'No text preview'}
+                                        {e.text_preview || 'No preview'}
                                     </p>
-                                    <div className="flex items-center gap-2 mt-1.5">
-                                        <span className="text-xs px-1.5 py-0.5"
-                                            style={{
-                                                background: 'var(--bg-elevated)',
-                                                color: 'var(--text-muted)',
-                                                fontFamily: 'var(--font-display)',
-                                                letterSpacing: '0.08em',
-                                                fontSize: 10,
-                                                borderRadius: 2,
-                                            }}>
-                                            {e.input_type?.toUpperCase() ?? 'TEXT'}
-                                        </span>
-                                        {/* web-design-guidelines: Intl.DateTimeFormat via timeAgo util */}
-                                        <time className="text-xs tabular" style={{ color: 'var(--text-muted)' }}
-                                            dateTime={e.timestamp}>
-                                            {timeAgo(e.timestamp)}
-                                        </time>
-                                    </div>
-                                </div>
-                                <div className="flex items-center gap-3 shrink-0">
-                                    <span className="tabular text-sm font-bold" style={{ color: 'var(--text-muted)' }}>
-                                        {Math.round(e.final_score)}
+                                    <span className="text-xs px-1.5 py-0.5 mt-1 inline-block"
+                                        style={{
+                                            background: 'var(--bg-elevated)',
+                                            color: 'var(--text-muted)',
+                                            fontFamily: 'var(--font-display)',
+                                            letterSpacing: '0.08em',
+                                            fontSize: 9,
+                                            borderRadius: 2,
+                                        }}>
+                                        {e.input_type?.toUpperCase() ?? 'TEXT'}
                                     </span>
-                                    <VerdictBadge verdict={e.verdict} size="sm" />
                                 </div>
-                            </div>
-                        </li>
-                    ))}
-                </ul>
+                                <span className="tabular font-bold text-sm"
+                                    style={{ color: scoreColor(e.final_score), fontFamily: 'var(--font-mono)', textAlign: 'right', display: 'block' }}>
+                                    {Math.round(e.final_score)}
+                                </span>
+                                <time className="text-xs tabular" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', whiteSpace: 'nowrap' }}
+                                    dateTime={e.timestamp}>
+                                    {timeAgo(e.timestamp)}
+                                </time>
+                                <VerdictBadge verdict={e.verdict} size="sm" />
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            )}
+
+            {/* ── No results after filter ─────────────────── */}
+            {!loading && entries.length > 0 && filtered.length === 0 && (
+                <p className="text-center text-sm py-8" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
+                    No {filter} verifications found.
+                </p>
+            )}
+
+            {/* ── Detail Modal ──────────────────────────── */}
+            {selectedId && (
+                <DetailModal id={selectedId} onClose={() => setSelectedId(null)} />
             )}
         </main>
     )

frontend/src/pages/TrendsPage.jsx

@@ -1,45 +1,80 @@
 import { useEffect, useState } from 'react'
-import { api } from '../api.js'
-import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts'
+import { api } from '../api'
+import { PAGE_STYLE } from '../App.jsx'
+import { scoreColor } from '../utils/format.js'
+import SkeletonCard from '../components/SkeletonCard.jsx'
+import {
+    BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell,
+    AreaChart, Area, CartesianGrid
+} from 'recharts'
 
-const CHART_COLORS = ['#dc2626', '#d97706', '#06b6d4', '#8b5cf6', '#16a34a', '#ec4899']
+/* ── Brand colors for chart series ─────────────────────── */
+const CHART_COLORS = ['#dc2626', '#d97706', '#06b6d4', '#8b5cf6', '#16a34a', '#ec4899', '#0ea5e9', '#f97316']
 
-/** Custom tooltip — uses CSS vars, avoids hardcoded formats */
+/* ── Custom tooltip — editorial style ──────────────────── */
 const ChartTooltip = ({ active, payload }) => {
     if (!active || !payload?.length) return null
+    const entry = payload[0]
     return (
-        <div className="card-elevated px-3 py-2"
-            role="tooltip" aria-live="polite">
+        <div role="tooltip" aria-live="polite"
+            style={{
+                background: 'var(--bg-elevated)',
+                border: '1px solid var(--border)',
+                borderRadius: 2,
+                padding: '8px 12px',
+            }}>
             <p className="text-xs font-bold" style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-display)' }}>
-                {payload[0].payload.name ?? payload[0].payload.topic}
+                {entry.payload.name ?? entry.payload.topic}
             </p>
-            <p className="tabular text-xs mt-0.5" style={{ color: 'var(--text-secondary)' }}>
-                Count: {payload[0].value}
+            <p className="tabular text-xs mt-0.5" style={{ color: entry.fill || 'var(--accent-cyan)', fontFamily: 'var(--font-mono)' }}>
+                {entry.value} verifications
             </p>
         </div>
     )
 }
 
-function ChartSection({ title, data, dataKey }) {
+/* ── Section heading ──────────────────────────────────── */
+function SectionHeading({ children }) {
+    return (
+        <p className="text-xs font-semibold uppercase mb-4"
+            style={{ fontFamily: 'var(--font-display)', color: 'var(--text-muted)', letterSpacing: '0.15em' }}>
+            {children}
+        </p>
+    )
+}
+
+/* ── Bar chart section ────────────────────────────────── */
+function ChartSection({ title, data, dataKey, description }) {
     if (!data?.length) return null
     return (
         <section aria-label={title} className="card p-5 fade-up-2">
-            <p className="text-xs font-semibold uppercase mb-4"
-                style={{ fontFamily: 'var(--font-display)', color: 'var(--text-muted)', letterSpacing: '0.15em' }}>
-                {title}
-            </p>
-            {/* web-design-guidelines: font-variant-numeric tabular-nums for data */}
+            <div className="mb-4">
+                <SectionHeading>{title}</SectionHeading>
+                {description && (
+                    <p className="text-xs -mt-2 mb-4" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
+                        {description}
+                    </p>
+                )}
+            </div>
             <ResponsiveContainer width="100%" height={200}>
-                <BarChart data={data} margin={{ top: 0, right: 0, left: -20, bottom: 0 }}>
+                <BarChart data={data} margin={{ top: 0, right: 0, left: -20, bottom: 48 }}>
+                    <CartesianGrid vertical={false} stroke="rgba(245,240,232,0.04)" />
                     <XAxis dataKey={dataKey}
-                        tick={{ fontSize: 11, fill: 'var(--text-muted)', fontFamily: 'var(--font-display)' }}
+                        tick={{ fontSize: 10, fill: 'var(--text-muted)', fontFamily: 'var(--font-display)' }}
+                        tickFormatter={(val) => {
+                            if (!val) return ''
+                            const s = String(val)
+                            return s.length > 18 ? s.slice(0, 18) + '…' : s
+                        }}
+                        angle={-30}
+                        textAnchor="end"
+                        interval={0}
                         axisLine={false} tickLine={false} />
                     <YAxis
-                        tick={{ fontSize: 11, fill: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}
+                        tick={{ fontSize: 10, fill: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}
                         axisLine={false} tickLine={false} />
-                    <Tooltip content={<ChartTooltip />}
-                        cursor={{ fill: 'rgba(245,240,232,0.03)' }} />
-                    <Bar dataKey="count" radius={[2, 2, 0, 0]}>
+                    <Tooltip content={<ChartTooltip />} cursor={{ fill: 'rgba(245,240,232,0.03)' }} />
+                    <Bar dataKey="count" radius={[2, 2, 0, 0]} maxBarSize={48}>
                         {data.map((_, i) => (
                             <Cell key={i} fill={CHART_COLORS[i % CHART_COLORS.length]} />
                         ))}
@@ -50,6 +85,54 @@ function ChartSection({ title, data, dataKey }) {
     )
 }
 
+/* ── Verdict area chart (time-series if available) ─────── */
+function VerdictAreaChart({ data }) {
+    if (!data?.length) return null
+    return (
+        <section aria-label="Verdict trend" className="card p-5 fade-up-3">
+            <SectionHeading>Verdict Distribution Over Time</SectionHeading>
+            <ResponsiveContainer width="100%" height={160}>
+                <AreaChart data={data} margin={{ top: 0, right: 0, left: -20, bottom: 0 }}>
+                    <defs>
+                        <linearGradient id="fillCredible" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="5%" stopColor="var(--credible)" stopOpacity={0.3} />
+                            <stop offset="95%" stopColor="var(--credible)" stopOpacity={0} />
+                        </linearGradient>
+                        <linearGradient id="fillFake" x1="0" y1="0" x2="0" y2="1">
+                            <stop offset="5%" stopColor="var(--fake)" stopOpacity={0.3} />
+                            <stop offset="95%" stopColor="var(--fake)" stopOpacity={0} />
+                        </linearGradient>
+                    </defs>
+                    <CartesianGrid vertical={false} stroke="rgba(245,240,232,0.04)" />
+                    <XAxis dataKey="date"
+                        tick={{ fontSize: 10, fill: 'var(--text-muted)', fontFamily: 'var(--font-display)' }}
+                        axisLine={false} tickLine={false} />
+                    <YAxis
+                        tick={{ fontSize: 10, fill: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}
+                        axisLine={false} tickLine={false} />
+                    <Tooltip content={<ChartTooltip />} cursor={{ stroke: 'var(--border)', strokeWidth: 1 }} />
+                    <Area type="monotone" dataKey="credible" stroke="var(--credible)" fill="url(#fillCredible)" strokeWidth={2} />
+                    <Area type="monotone" dataKey="fake" stroke="var(--fake)" fill="url(#fillFake)" strokeWidth={2} />
+                </AreaChart>
+            </ResponsiveContainer>
+            {/* Legend */}
+            <div className="flex gap-4 mt-3">
+                {[
+                    { color: 'var(--credible)', label: 'Credible' },
+                    { color: 'var(--fake)', label: 'False' },
+                ].map(({ color, label }) => (
+                    <div key={label} className="flex items-center gap-1.5">
+                        <span className="w-3 h-0.5" style={{ background: color, display: 'inline-block' }} />
+                        <span className="text-xs" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', letterSpacing: '0.08em' }}>
+                            {label}
+                        </span>
+                    </div>
+                ))}
+            </div>
+        </section>
+    )
+}
+
 export default function TrendsPage() {
     const [data, setData] = useState(null)
     const [loading, setLoading] = useState(true)
@@ -62,66 +145,107 @@ export default function TrendsPage() {
             .finally(() => setLoading(false))
     }, [])
 
-    if (loading) return (
-        <p className="text-center py-24 text-sm" style={{ color: 'var(--text-muted)' }}
-            aria-live="polite">Loading trends…</p>
-    )
-
-    if (error) return (
-        <p role="alert" className="text-center py-24 text-sm" style={{ color: '#f87171' }}>
-            Error: {error}
-        </p>
-    )
-
-    const entityData = Object.entries(data?.top_entities || {})
-        .sort(([, a], [, b]) => b - a).slice(0, 8)
-        .map(([name, count]) => ({ name, count }))
+    /* ── Derived data ─────────────────────────────────────── */
+    // top_entities is an array of { entity, entity_type, count, fake_count, fake_ratio }
+    const entityData = (data?.top_entities || [])
+        .slice(0, 8)
+        .map(e => ({ name: e.entity, count: e.count }))
 
-    const topicData = (data?.top_fake_topics || []).slice(0, 8)
+    // top_topics is an array of { topic, count, dominant_verdict }
+    const topicData = (data?.top_topics || []).slice(0, 8)
 
     const verdicts = [
         { label: 'VERIFIED', count: data?.verdict_distribution?.Credible ?? 0, color: 'var(--credible)' },
         { label: 'UNVERIFIED', count: data?.verdict_distribution?.Unverified ?? 0, color: 'var(--unverified)' },
         { label: 'FALSE', count: data?.verdict_distribution?.['Likely Fake'] ?? 0, color: 'var(--fake)' },
     ]
+    const total = verdicts.reduce((s, v) => s + v.count, 0)
     const hasData = entityData.length > 0 || verdicts.some(v => v.count > 0)
 
     return (
-        <main className="max-w-4xl mx-auto px-4 py-8 space-y-6">
+        <main style={{ ...PAGE_STYLE, paddingTop: 40, paddingBottom: 56, display: 'flex', flexDirection: 'column', gap: 24 }}>
+
+            {/* ── Page header ───────────────────────────── */}
             <header className="ruled fade-up-1">
-                <h1 style={{ fontSize: 32, fontFamily: 'var(--font-display)' }}>Trends</h1>
+                <h1 style={{ fontSize: 28, fontFamily: 'var(--font-display)' }}>Trends</h1>
                 <p className="mt-1 text-sm" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>
-                    Aggregated patterns from verified claims
+                    Aggregated misinformation patterns across all verified claims
                 </p>
             </header>
 
-            {/* Verdict distribution stats */}
-            <div className="grid grid-cols-3 gap-3 fade-up-1" role="list" aria-label="Verdict distribution">
-                {verdicts.map(({ label, count, color }) => (
-                    <div key={label} className="card p-5 text-center" role="listitem">
-                        {/* web-design-guidelines: numerals for counts, tabular */}
-                        <p className="tabular font-bold" style={{ fontSize: 36, color, fontFamily: 'var(--font-mono)' }}>
-                            {count}
-                        </p>
-                        <p className="mt-1 text-xs" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', letterSpacing: '0.12em' }}>
-                            {label}
-                        </p>
+            {/* ── Loading ────────────────────────────────── */}
+            {loading && (
+                <div className="space-y-4" aria-live="polite" aria-label="Loading trends">
+                    <div className="grid grid-cols-3 gap-3">
+                        {[0, 1, 2].map(i => <SkeletonCard key={i} height={96} />)}
                     </div>
-                ))}
-            </div>
+                    <SkeletonCard height={220} />
+                </div>
+            )}
 
-            <ChartSection title="Top Named Entities" data={entityData} dataKey="name" />
-            <ChartSection title="Top Fake News Topics" data={topicData} dataKey="topic" />
+            {/* ── Error ──────────────────────────────────── */}
+            {error && !loading && (
+                <p role="alert" className="text-center py-12 text-sm" style={{ color: '#f87171' }}>
+                    Error loading trends: {error}
+                </p>
+            )}
 
-            {!hasData && (
-                <div className="card p-12 text-center fade-up">
-                    <p style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-display)', fontWeight: 700 }}>
-                        No trend data yet
-                    </p>
-                    <p className="text-sm mt-1" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
-                        Run some verifications first to see patterns emerge here.
-                    </p>
-                </div>
+            {!loading && !error && (
+                <>
+                    {/* ── Impact stats ────────────────────────────────────────── */}
+                    <div className="grid grid-cols-1 sm:grid-cols-3 gap-3 fade-up-1" role="list" aria-label="Verdict distribution">
+                        {verdicts.map(({ label, count, color }) => {
+                            const pct = total > 0 ? Math.round((count / total) * 100) : 0
+                            return (
+                                <div key={label} className="card p-5" role="listitem"
+                                    style={{ borderTop: `3px solid ${color}` }}>
+                                    {/* Large impact number — interactive-portfolio pattern */}
+                                    <p className="tabular font-bold" style={{ fontSize: 40, color, fontFamily: 'var(--font-mono)', lineHeight: 1 }}>
+                                        {count}
+                                    </p>
+                                    <p className="mt-2 text-xs" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', letterSpacing: '0.12em' }}>
+                                        {label}
+                                    </p>
+                                    {total > 0 && (
+                                        <div className="mt-2 h-1" style={{ background: 'var(--bg-hover)', borderRadius: 1 }}>
+                                            <div className="h-1 bar-fill" style={{ width: `${pct}%`, background: color, borderRadius: 1 }} />
+                                        </div>
+                                    )}
+                                </div>
+                            )
+                        })}
+                    </div>
+
+                    {/* ── Charts ─────────────────────────────── */}
+                    <ChartSection
+                        title="Top Named Entities"
+                        data={entityData}
+                        dataKey="name"
+                        description="Most frequently appearing persons, organizations, and places in verified claims"
+                    />
+
+                    <ChartSection
+                        title="Top Fake News Topics"
+                        data={topicData}
+                        dataKey="topic"
+                        description="Recurring misinformation topics detected across false claims"
+                    />
+
+                    {/* ── Verdict trend over time ──────────────────── */}
+                    <VerdictAreaChart data={data?.verdict_by_day || []} />
+
+                    {/* ── Empty state ────────────────────── */}
+                    {!hasData && (
+                        <div className="card p-16 text-center fade-up">
+                            <p style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18 }}>
+                                No trend data yet
+                            </p>
+                            <p className="text-sm mt-2" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
+                                Run some verifications first — patterns will emerge here as data accumulates.
+                            </p>
+                        </div>
+                    )}
+                </>
             )}
         </main>
     )

frontend/src/pages/VerifyPage.jsx

@@ -1,9 +1,12 @@
-import { useState, useRef, useId } from 'react'
-import { api } from '../api.js'
-import { scoreColor } from '../utils/format.js'
+import { useState, useRef, useId, useCallback, useEffect } from 'react'
+import { api } from '../api'
+import { scoreColor, VERDICT_MAP } from '../utils/format.js'
+import { PAGE_STYLE } from '../App.jsx'
 import ScoreGauge from '../components/ScoreGauge.jsx'
 import VerdictBadge from '../components/VerdictBadge.jsx'
-import { FileText, Link2, Image, Video, Loader2, ChevronRight, AlertCircle } from 'lucide-react'
+import WordHighlighter from '../components/WordHighlighter.jsx'
+import SkeletonCard from '../components/SkeletonCard.jsx'
+import { FileText, Link2, Image, Video, Loader2, ChevronRight, AlertCircle, Upload, CheckCircle2, XCircle, HelpCircle, ExternalLink, Layers, Brain, RefreshCw } from 'lucide-react'
 
 /* ── Tab definitions ────────────────────────────────────── */
 const TABS = [
@@ -13,12 +16,29 @@ const TABS = [
     { id: 'video', icon: Video, label: 'Video' },
 ]
 
+/* ── Stance icon map ──────────────────────────────────────── */
+const STANCE_ICON = {
+    'Supports': { Icon: CheckCircle2, color: 'var(--credible)' },
+    'Refutes': { Icon: XCircle, color: 'var(--fake)' },
+    'Not Enough Info': { Icon: HelpCircle, color: 'var(--text-muted)' },
+}
+
 /* ── Atomic sub-components (architect-review: Single Responsibility) ── */
-function SectionHeading({ children }) {
+function SectionHeading({ children, count }) {
     return (
-        <p className="font-display text-xs font-semibold uppercase tracking-widest mb-3"
+        <p className="font-display text-xs font-semibold uppercase tracking-widest mb-3 flex items-center gap-2"
             style={{ fontFamily: 'var(--font-display)', color: 'var(--text-muted)', letterSpacing: '0.15em' }}>
             {children}
+            {count !== undefined && (
+                <span style={{
+                    background: 'var(--bg-hover)',
+                    color: 'var(--text-secondary)',
+                    fontFamily: 'var(--font-mono)',
+                    fontSize: 10,
+                    padding: '1px 6px',
+                    borderRadius: 2,
+                }}>{count}</span>
+            )}
         </p>
     )
 }
@@ -44,39 +64,239 @@ function ScoreBar({ label, value, color, index = 0 }) {
                 <span style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>{label}</span>
                 <span className="tabular font-bold" style={{ color }}>{Math.round(value)}%</span>
             </div>
-            <div className="h-1 rounded-none" style={{ background: 'var(--bg-hover)' }}
+            <div className="h-1.5 rounded-none" style={{ background: 'var(--bg-hover)' }}
                 role="progressbar" aria-valuenow={Math.round(value)} aria-valuemin={0} aria-valuemax={100}
                 aria-label={label}>
-                <div className="h-1 bar-fill"
+                <div className="h-1.5 bar-fill"
                     style={{
                         width: `${value}%`,
                         background: color,
-                        animationDelay: `${index * 100}ms`,
+                        animationDelay: `${index * 120}ms`,
+                        borderRadius: 1,
                     }} />
             </div>
         </div>
     )
 }
 
+/** Layer verdict detail card — for both Layer 1 and Layer 2 */
+function LayerCard({ title, icon: HeaderIcon, verdict, score, children, delay = 0 }) {
+    const { cls } = VERDICT_MAP[verdict] ?? VERDICT_MAP['Unverified']
+    return (
+        <div className="card p-5 fade-up" style={{ animationDelay: `${delay}ms` }}>
+            <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center gap-2">
+                    <HeaderIcon size={13} style={{ color: 'var(--accent-red)' }} aria-hidden="true" />
+                    <SectionHeading>{title}</SectionHeading>
+                </div>
+                <VerdictBadge verdict={verdict} size="sm" />
+            </div>
+            {score !== undefined && (
+                <ScoreBar label="Confidence" value={score} color={scoreColor(score)} index={0} />
+            )}
+            {children && <div className="mt-4">{children}</div>}
+        </div>
+    )
+}
+
+/** Triggered features feature breakdown chart */
+function FeatureBreakdown({ features }) {
+    if (!features?.length) return (
+        <p className="text-xs" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
+            No suspicious features detected
+        </p>
+    )
+    return (
+        <ul className="flex flex-wrap gap-1.5" role="list" aria-label="Triggered suspicious features">
+            {features.map((f, i) => (
+                <li key={i}
+                    className="text-xs px-2 py-1"
+                    style={{
+                        background: 'rgba(220,38,38,0.1)',
+                        color: '#f87171',
+                        border: '1px solid rgba(220,38,38,0.25)',
+                        borderRadius: 2,
+                        fontFamily: 'var(--font-display)',
+                        letterSpacing: '0.04em',
+                    }}>
+                    {f}
+                </li>
+            ))}
+        </ul>
+    )
+}
+/* ── URL article preview card ───────────────────────────── */
+function URLPreviewCard({ preview, loading, url }) {
+    if (loading && !preview) {
+        return (
+            <div className="flex items-center gap-2 px-3 py-2"
+                style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: 2 }}>
+                <Loader2 size={11} className="animate-spin" style={{ color: 'var(--text-muted)', flexShrink: 0 }} aria-hidden="true" />
+                <span className="text-xs" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>Fetching article preview…</span>
+            </div>
+        )
+    }
+    if (!preview) return null
+    return (
+        <a href={url} target="_blank" rel="noreferrer"
+            className="flex gap-3 p-3 transition-colors"
+            style={{
+                background: 'var(--bg-elevated)',
+                border: '1px solid var(--border)',
+                borderRadius: 2,
+                textDecoration: 'none',
+                display: 'flex',
+            }}
+            onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--border-light)'}
+            onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
+            {/* Thumbnail */}
+            {preview.image && (
+                <img
+                    src={preview.image}
+                    alt=""
+                    aria-hidden="true"
+                    onError={e => { e.currentTarget.style.display = 'none' }}
+                    style={{
+                        width: 72, height: 56,
+                        objectFit: 'cover',
+                        borderRadius: 2,
+                        flexShrink: 0,
+                        border: '1px solid var(--border)',
+                    }} />
+            )}
+            <div className="flex-1 min-w-0">
+                {/* Source row */}
+                <div className="flex items-center gap-1.5 mb-1">
+                    {preview.favicon && (
+                        <img src={preview.favicon} alt="" aria-hidden="true"
+                            onError={e => { e.currentTarget.style.display = 'none' }}
+                            style={{ width: 12, height: 12, borderRadius: 2, flexShrink: 0 }} />
+                    )}
+                    <span className="text-xs" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', letterSpacing: '0.06em', textTransform: 'uppercase', fontSize: 10 }}>
+                        {preview.site_name || preview.domain}
+                    </span>
+                    <ExternalLink size={9} style={{ color: 'var(--text-muted)', flexShrink: 0, marginLeft: 'auto' }} aria-hidden="true" />
+                </div>
+                {/* Title */}
+                {preview.title && (
+                    <p className="text-sm font-semibold"
+                        style={{
+                            color: 'var(--text-primary)',
+                            fontFamily: 'var(--font-body)',
+                            lineHeight: 1.4,
+                            display: '-webkit-box',
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: 'vertical',
+                            overflow: 'hidden',
+                        }}>
+                        {preview.title}
+                    </p>
+                )}
+                {/* Description */}
+                {preview.description && (
+                    <p className="text-xs mt-0.5"
+                        style={{
+                            color: 'var(--text-secondary)',
+                            fontFamily: 'var(--font-body)',
+                            lineHeight: 1.5,
+                            display: '-webkit-box',
+                            WebkitLineClamp: 2,
+                            WebkitBoxOrient: 'vertical',
+                            overflow: 'hidden',
+                        }}>
+                        {preview.description}
+                    </p>
+                )}
+            </div>
+        </a>
+    )
+}
+/* ── SessionStorage persistence key ─────────────────────── */
+const STORAGE_KEY = 'philverify_verify_state'
+
+function loadPersistedState() {
+    try {
+        const raw = sessionStorage.getItem(STORAGE_KEY)
+        if (!raw) return null
+        return JSON.parse(raw)
+    } catch {
+        return null
+    }
+}
+
+function saveState(state) {
+    try {
+        sessionStorage.setItem(STORAGE_KEY, JSON.stringify(state))
+    } catch { /* quota exceeded — ignore */ }
+}
+
 /* ── Main Page ──────────────────────────────────────────── */
 export default function VerifyPage() {
-    const [tab, setTab] = useState('text')
-    const [input, setInput] = useState('')
+    const persisted = loadPersistedState()
+
+    const [tab, setTab] = useState(persisted?.tab ?? 'text')
+    const [input, setInput] = useState(persisted?.input ?? '')
     const [file, setFile] = useState(null)
+    const [dragOver, setDragOver] = useState(false)
     const [loading, setLoading] = useState(false)
-    const [result, setResult] = useState(null)
+    const [result, setResult] = useState(persisted?.result ?? null)
     const [error, setError] = useState(null)
+    const [submittedInput, setSubmittedInput] = useState(persisted?.submittedInput ?? null)
+    const [urlPreview, setUrlPreview] = useState(null)
+    const [urlPreviewLoading, setUrlPreviewLoading] = useState(false)
     const fileRef = useRef()
-    /* web-design-guidelines: label needs htmlFor — use useId for unique IDs */
+    const inputSectionRef = useRef()
     const inputId = useId()
     const errorId = useId()
 
+    /* Revoke object URLs when submittedInput changes to avoid memory leaks */
+    useEffect(() => {
+        return () => {
+            if (submittedInput?.fileUrl) URL.revokeObjectURL(submittedInput.fileUrl)
+        }
+    }, [submittedInput])
+
+    /* Persist result + input to sessionStorage so state survives navigation/refresh */
+    useEffect(() => {
+        if (result) {
+            // Strip non-serialisable file references before saving
+            const serializableSubmittedInput = submittedInput
+                ? { type: submittedInput.type, text: submittedInput.text, preview: submittedInput.preview ?? null }
+                : null
+            saveState({ tab, input, result, submittedInput: serializableSubmittedInput })
+        }
+    }, [result, submittedInput, tab, input])
+
+    /* Debounced URL preview — fetches OG metadata 600ms after typing stops */
+    useEffect(() => {
+        if (tab !== 'url' || !input.trim()) { setUrlPreview(null); setUrlPreviewLoading(false); return }
+        try { new URL(input.trim()) } catch { setUrlPreview(null); setUrlPreviewLoading(false); return }
+        setUrlPreviewLoading(true)
+        const timer = setTimeout(async () => {
+            try {
+                const preview = await api.preview(input.trim())
+                setUrlPreview(preview)
+            } catch {
+                setUrlPreview(null)
+            } finally {
+                setUrlPreviewLoading(false)
+            }
+        }, 600)
+        return () => { clearTimeout(timer); setUrlPreviewLoading(false) }
+    }, [tab, input])
+
     const canSubmit = !loading && (tab === 'text' || tab === 'url' ? input.trim() : file)
 
     async function handleSubmit(e) {
         e.preventDefault()
         if (!canSubmit) return
+        /* Capture what the user submitted before any state resets */
+        const previewUrl = (tab === 'image' || tab === 'video') && file
+            ? URL.createObjectURL(file)
+            : null
+        setSubmittedInput({ type: tab, text: input, file: file, fileUrl: previewUrl, preview: tab === 'url' ? urlPreview : null })
         setLoading(true); setError(null); setResult(null)
+        sessionStorage.removeItem(STORAGE_KEY)
         try {
             let res
             if (tab === 'text') res = await api.verifyText(input)
@@ -85,42 +305,83 @@ export default function VerifyPage() {
             else res = await api.verifyVideo(file)
             setResult(res)
         } catch (err) {
-            setError(err.message)
+            setError(typeof err.message === 'string' ? err.message : String(err))
         } finally {
             setLoading(false)
         }
     }
 
     function handleTabChange(id) {
-        setTab(id); setInput(''); setFile(null); setResult(null); setError(null)
+        setTab(id); setInput(''); setFile(null); setResult(null); setError(null); setSubmittedInput(null); setUrlPreview(null)
+        sessionStorage.removeItem(STORAGE_KEY)
+    }
+
+    function handleVerifyAgain() {
+        setResult(null); setError(null)
+        sessionStorage.removeItem(STORAGE_KEY)
+        // Smooth-scroll back to the input panel
+        requestAnimationFrame(() => {
+            inputSectionRef.current?.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        })
     }
 
+    /* Drag-and-drop handlers */
+    const handleDrop = useCallback((e) => {
+        e.preventDefault(); setDragOver(false)
+        const dropped = e.dataTransfer.files[0]
+        if (dropped) setFile(dropped)
+    }, [])
+
+    /* Paste handler — reads the first file/image item from clipboard */
+    const handlePaste = useCallback((e) => {
+        if (tab !== 'image' && tab !== 'video') return
+        const items = e.clipboardData?.items
+        if (!items) return
+        for (const item of items) {
+            if (item.kind === 'file') {
+                const pasted = item.getAsFile()
+                if (pasted) {
+                    e.preventDefault()
+                    setFile(pasted)
+                    return
+                }
+            }
+        }
+    }, [tab])
+
+    /* Global paste listener — works even when the drop zone isn't focused */
+    useEffect(() => {
+        if (tab !== 'image' && tab !== 'video') return
+        document.addEventListener('paste', handlePaste)
+        return () => document.removeEventListener('paste', handlePaste)
+    }, [tab, handlePaste])
+
     const entities = result?.entities || {}
     const allEntities = [
-        ...(entities.persons || []).map(e => ({ label: e, type: 'Person' })),
-        ...(entities.organizations || []).map(e => ({ label: e, type: 'Org' })),
-        ...(entities.locations || []).map(e => ({ label: e, type: 'Place' })),
-        ...(entities.dates || []).map(e => ({ label: e, type: 'Date' })),
+        ...(entities.persons || []).map(e => ({ label: e, type: 'Person', color: 'var(--accent-cyan)' })),
+        ...(entities.organizations || []).map(e => ({ label: e, type: 'Org', color: 'var(--accent-gold)' })),
+        ...(entities.locations || []).map(e => ({ label: e, type: 'Place', color: '#8b5cf6' })),
+        ...(entities.dates || []).map(e => ({ label: e, type: 'Date', color: 'var(--text-muted)' })),
     ]
 
     const finalColor = result ? scoreColor(result.final_score) : 'var(--text-muted)'
+    const triggerWords = result?.layer1?.triggered_features ?? []
 
     return (
-        <main className="max-w-4xl mx-auto px-4 py-8 space-y-6">
-            {/* Page header */}
+        <main style={{ ...PAGE_STYLE, paddingTop: 40, paddingBottom: 56, display: 'flex', flexDirection: 'column', gap: 24 }}>
+
+            {/* ── Page header ─────────────────────────────── */}
             <header className="ruled fade-up-1">
-                <h1 style={{ fontSize: 32, fontFamily: 'var(--font-display)' }}>
-                    Fact Check
-                </h1>
+                <h1 style={{ fontSize: 28, fontFamily: 'var(--font-display)' }}>Fact Check</h1>
                 <p className="mt-1 text-sm" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>
                     Paste text, a URL, or upload media — we'll verify credibility instantly.
                 </p>
             </header>
 
-            {/* Input card */}
-            <section aria-label="Input panel" className="card p-6 space-y-4 fade-up-2">
-                {/* Tab bar — web-design-guidelines: role="tablist" */}
-                <div role="tablist" aria-label="Input type" className="flex gap-1">
+            {/* ── Input card ──────────────────────────────── */}
+            <section ref={inputSectionRef} aria-label="Input panel" className="card p-6 space-y-4 fade-up-2">
+                {/* Tab bar */}
+                <div role="tablist" aria-label="Input type" className="flex gap-1.5 flex-wrap">
                     {TABS.map(({ id, icon: Icon, label }) => {
                         const active = tab === id
                         return (
@@ -130,7 +391,7 @@ export default function VerifyPage() {
                                 aria-controls={`panel-${id}`}
                                 id={`tab-${id}`}
                                 onClick={() => handleTabChange(id)}
-                                className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold transition-colors"
+                                className="flex items-center gap-1.5 px-3 py-2 text-xs font-semibold transition-colors"
                                 style={{
                                     fontFamily: 'var(--font-display)',
                                     letterSpacing: '0.08em',
@@ -139,6 +400,7 @@ export default function VerifyPage() {
                                     border: 'none',
                                     cursor: 'pointer',
                                     borderRadius: 2,
+                                    minHeight: 36, /* touch target */
                                 }}>
                                 <Icon size={12} aria-hidden="true" />
                                 {label.toUpperCase()}
@@ -149,9 +411,9 @@ export default function VerifyPage() {
 
                 <form onSubmit={handleSubmit} className="space-y-4"
                     aria-describedby={error ? errorId : undefined}>
-                    {/* Label — web-design-guidelines: inputs need labels */}
+
                     {(tab === 'text' || tab === 'url') ? (
-                        <div>
+                        <div className="space-y-2">
                             <label htmlFor={inputId} className="sr-only">
                                 {tab === 'url' ? 'Enter a URL to verify' : 'Enter text or headline to verify'}
                             </label>
@@ -159,27 +421,33 @@ export default function VerifyPage() {
                                 id={inputId}
                                 value={input}
                                 onChange={e => setInput(e.target.value)}
-                                placeholder={tab === 'url' ? 'https://rappler.com/…' : 'Paste claim or headline here…'}
+                                placeholder={tab === 'url'
+                                    ? 'https://rappler.com/…'
+                                    : 'Paste claim, headline, or social post here…'}
                                 rows={tab === 'url' ? 2 : 5}
-                                /* web-design-guidelines: autocomplete + type */
                                 autoComplete="off"
                                 spellCheck={tab === 'url' ? 'false' : 'true'}
-                                className="w-full resize-none p-4 text-sm"
+                                name={tab === 'url' ? 'claim-url' : 'claim-text'}
+                                className="w-full resize-none p-4 text-sm claim-textarea"
                                 style={{
                                     background: 'var(--bg-elevated)',
                                     border: '1px solid var(--border)',
                                     color: 'var(--text-primary)',
                                     fontFamily: 'var(--font-body)',
                                     borderRadius: 2,
-                                    outline: 'none',
+                                    lineHeight: 1.7,
                                 }}
                                 onFocus={e => e.target.style.borderColor = 'var(--accent-red)'}
                                 onBlur={e => e.target.style.borderColor = 'var(--border)'}
                                 aria-label={tab === 'url' ? 'URL input' : 'Claim text input'}
                             />
+                            {/* Inline URL article preview while typing */}
+                            {tab === 'url' && (urlPreviewLoading || urlPreview) && (
+                                <URLPreviewCard preview={urlPreview} loading={urlPreviewLoading} url={input} />
+                            )}
                         </div>
                     ) : (
-                        /* File drop zone */
+                        /* Drag-and-drop file zone */
                         <div>
                             <label htmlFor={`file-${tab}`} className="sr-only">
                                 Upload {tab === 'image' ? 'an image' : 'a video or audio file'}
@@ -187,29 +455,41 @@ export default function VerifyPage() {
                             <div
                                 onClick={() => fileRef.current?.click()}
                                 onKeyDown={e => e.key === 'Enter' && fileRef.current?.click()}
+                                onDragOver={e => { e.preventDefault(); setDragOver(true) }}
+                                onDragLeave={() => setDragOver(false)}
+                                onDrop={handleDrop}
+                                onPaste={handlePaste}
                                 tabIndex={0}
                                 role="button"
                                 aria-label={`Upload ${tab} file. ${file ? `Selected: ${file.name}` : 'No file selected'}`}
-                                className="p-10 text-center cursor-pointer transition-colors"
+                                className="p-10 text-center cursor-pointer transition-all"
                                 style={{
-                                    background: 'var(--bg-elevated)',
-                                    border: `1px dashed ${file ? 'var(--accent-red)' : 'var(--border)'}`,
+                                    background: dragOver ? 'rgba(220,38,38,0.06)' : 'var(--bg-elevated)',
+                                    border: `1px dashed ${file ? 'var(--accent-red)' : dragOver ? 'var(--accent-red)' : 'var(--border)'}`,
                                     borderRadius: 2,
+                                    transform: dragOver ? 'scale(1.01)' : 'scale(1)',
                                 }}>
                                 <input ref={fileRef} id={`file-${tab}`} type="file" className="sr-only"
+                                    name={tab === 'image' ? 'media-image' : 'media-video'}
                                     accept={tab === 'image' ? 'image/*' : 'video/*,audio/*'}
                                     onChange={e => setFile(e.target.files[0])} />
+                                <Upload size={18} aria-hidden="true"
+                                    style={{ margin: '0 auto 8px', color: file ? 'var(--accent-red)' : 'var(--text-muted)' }} />
                                 {file
                                     ? <p className="text-sm font-semibold" style={{ color: 'var(--accent-red)', fontFamily: 'var(--font-display)' }}>{file.name}</p>
-                                    : <p className="text-sm" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
-                                        Click or press Enter to upload {tab === 'image' ? 'image' : 'video / audio'}
-                                    </p>
+                                    : <>
+                                        <p className="text-sm" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)' }}>
+                                            Drop or click to upload {tab === 'image' ? 'image' : 'video / audio'}
+                                        </p>
+                                        <p className="text-xs mt-1" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-mono)', opacity: 0.6 }}>
+                                            or press <kbd style={{ background: 'var(--bg-hover)', border: '1px solid var(--border)', borderRadius: 2, padding: '1px 5px', fontFamily: 'var(--font-mono)', fontSize: 10 }}>Ctrl+V</kbd> to paste from clipboard
+                                        </p>
+                                    </>
                                 }
                             </div>
                         </div>
                     )}
 
-                    {/* Submit — web-design-guidelines: specific button label, spinner during request */}
                     <button type="submit" disabled={!canSubmit}
                         className="flex items-center gap-2 px-5 py-2.5 text-xs font-bold transition-colors"
                         style={{
@@ -220,6 +500,7 @@ export default function VerifyPage() {
                             border: 'none',
                             cursor: canSubmit ? 'pointer' : 'not-allowed',
                             borderRadius: 2,
+                            minHeight: 44,
                         }}
                         aria-busy={loading}>
                         {loading
@@ -230,7 +511,90 @@ export default function VerifyPage() {
                 </form>
             </section>
 
-            {/* Error — web-design-guidelines: errors inline, include fix */}
+            {/* ── Submitted input preview ──────────────────── */}
+            {submittedInput && (loading || result || error) && (
+                <div className="card p-4 fade-up" style={{ borderLeft: '3px solid var(--accent-red)' }}>
+                    <p className="text-xs font-semibold uppercase tracking-widest mb-2"
+                        style={{ fontFamily: 'var(--font-display)', color: 'var(--text-muted)', letterSpacing: '0.15em' }}>
+                        Verified Input
+                    </p>
+                    {submittedInput.type === 'url' && (
+                        <div className="space-y-2">
+                            {/* Rich article card if preview is available */}
+                            {submittedInput.preview
+                                ? <URLPreviewCard preview={submittedInput.preview} loading={false} url={submittedInput.text} />
+                                : (
+                                    <a href={submittedInput.text} target="_blank" rel="noreferrer"
+                                        className="flex items-center gap-2 text-sm"
+                                        style={{ color: 'var(--accent-cyan)', fontFamily: 'var(--font-mono)', wordBreak: 'break-all', textDecoration: 'none' }}
+                                        onMouseEnter={e => e.currentTarget.style.opacity = '0.8'}
+                                        onMouseLeave={e => e.currentTarget.style.opacity = '1'}>
+                                        <Link2 size={13} style={{ flexShrink: 0 }} aria-hidden="true" />
+                                        <span className="flex-1">{submittedInput.text}</span>
+                                        <ExternalLink size={11} style={{ flexShrink: 0, opacity: 0.6 }} aria-hidden="true" />
+                                    </a>
+                                )
+                            }
+                        </div>
+                    )}
+                    {submittedInput.type === 'text' && (
+                        <p className="text-sm" style={{
+                            color: 'var(--text-secondary)',
+                            fontFamily: 'var(--font-body)',
+                            lineHeight: 1.6,
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                        }}>
+                            {submittedInput.text.length > 300
+                                ? submittedInput.text.slice(0, 300) + '…'
+                                : submittedInput.text}
+                        </p>
+                    )}
+                    {submittedInput.type === 'image' && (
+                        <div className="flex items-start gap-3">
+                            {submittedInput.fileUrl && (
+                                <img
+                                    src={submittedInput.fileUrl}
+                                    alt="Submitted image preview"
+                                    style={{
+                                        width: 72, height: 72,
+                                        objectFit: 'cover',
+                                        borderRadius: 2,
+                                        border: '1px solid var(--border)',
+                                        flexShrink: 0,
+                                    }} />
+                            )}
+                            <div>
+                                <p className="text-sm font-semibold"
+                                    style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-display)' }}>
+                                    {submittedInput.file?.name}
+                                </p>
+                                <p className="text-xs mt-0.5"
+                                    style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
+                                    {submittedInput.file ? (submittedInput.file.size / 1024).toFixed(1) + ' KB' : ''}
+                                </p>
+                            </div>
+                        </div>
+                    )}
+                    {submittedInput.type === 'video' && (
+                        <div className="flex items-center gap-2">
+                            <Video size={15} style={{ color: 'var(--text-muted)', flexShrink: 0 }} aria-hidden="true" />
+                            <div>
+                                <p className="text-sm font-semibold"
+                                    style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-display)' }}>
+                                    {submittedInput.file?.name}
+                                </p>
+                                <p className="text-xs mt-0.5"
+                                    style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-mono)' }}>
+                                    {submittedInput.file ? (submittedInput.file.size / (1024 * 1024)).toFixed(2) + ' MB' : ''}
+                                </p>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* ── Error ───────────────────────────────────── */}
             {error && (
                 <div id={errorId} role="alert"
                     className="card p-4 flex items-start gap-2"
@@ -241,61 +605,145 @@ export default function VerifyPage() {
                             Verification failed
                         </p>
                         <p className="text-xs mt-0.5" style={{ color: 'var(--text-secondary)', fontFamily: 'var(--font-body)' }}>
-                            {error} — Check that the backend server is running on port 8000.
+                            {error}
+                            {/failed to fetch|network|ERR_/i.test(error) && (
+                                <> — Make sure the backend is running at <code>localhost:8000</code>.</>
+                            )}
                         </p>
                     </div>
                 </div>
             )}
 
-            {/* Results */}
-            {result && (
+            {/* ── Skeleton loading state ───────────────────── */}
+            {loading && (
+                <section aria-label="Loading verification results" aria-live="polite" className="space-y-4">
+                    <div className="grid gap-4" style={{ gridTemplateColumns: '180px 1fr' }}>
+                        <SkeletonCard height={180} />
+                        <SkeletonCard lines={5} />
+                    </div>
+                    <SkeletonCard lines={3} />
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                        <SkeletonCard lines={4} />
+                        <SkeletonCard lines={4} />
+                    </div>
+                </section>
+            )}
+
+            {/* ── Results ──────────────────────────────────── */}
+            {result && !loading && (
                 <section aria-label="Verification results" className="space-y-4">
 
-                    {/* Top row — gauge + verdict banner */}
-                    <div className="grid gap-4 fade-up-1" style={{ gridTemplateColumns: '180px 1fr' }}>
-                        {/* Gauge panel */}
+                    {/* Verify Again bar */}
+                    <div className="flex items-center justify-between py-1">
+                        <p className="text-xs" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', letterSpacing: '0.08em' }}>
+                            LAST VERIFICATION
+                        </p>
+                        <button
+                            onClick={handleVerifyAgain}
+                            className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold transition-colors"
+                            style={{
+                                fontFamily: 'var(--font-display)',
+                                letterSpacing: '0.08em',
+                                background: 'var(--bg-elevated)',
+                                color: 'var(--accent-red)',
+                                border: '1px solid rgba(220,38,38,0.35)',
+                                cursor: 'pointer',
+                                borderRadius: 2,
+                            }}
+                            onMouseEnter={e => e.currentTarget.style.background = 'rgba(220,38,38,0.08)'}
+                            onMouseLeave={e => e.currentTarget.style.background = 'var(--bg-elevated)'}
+                            aria-label="Clear results and verify a new claim"
+                        >
+                            <RefreshCw size={11} aria-hidden="true" />
+                            VERIFY AGAIN
+                        </button>
+                    </div>
+
+                    {/* Row 1: Gauge + Meta */}
+                    <div className="grid gap-4 fade-up-1" style={{ gridTemplateColumns: 'min(180px, 40%) 1fr' }}>
                         <div className="card p-5 flex flex-col items-center justify-center gap-3">
                             <ScoreGauge score={result.final_score} size={140} />
                             <VerdictBadge verdict={result.verdict} size="banner" />
                         </div>
-
-                        {/* Meta panel */}
                         <div className="card p-5 fade-up-2">
                             <SectionHeading>Analysis Details</SectionHeading>
                             <MetaRow label="Language" value={result.language} />
                             <MetaRow label="Sentiment" value={result.sentiment} />
                             <MetaRow label="Emotion" value={result.emotion} />
-                            <MetaRow label="Confidence" value={`${result.confidence?.toFixed(1)}%`}
-                                color={finalColor} />
-                            <MetaRow label="Processed in" value={`${result.processing_time_ms?.toFixed(0)} ms`}
-                                color="var(--accent-cyan)" />
+                            <MetaRow label="Confidence" value={`${result.confidence?.toFixed(1)}%`} color={finalColor} />
+                            {result.processing_time_ms && (
+                                <MetaRow label="Processed in" value={`${result.processing_time_ms?.toFixed(0)} ms`} color="var(--accent-cyan)" />
+                            )}
                         </div>
                     </div>
 
-                    {/* Score breakdown */}
+                    {/* Row 2: Score breakdown */}
                     <div className="card p-5 fade-up-3">
                         <SectionHeading>Score Breakdown</SectionHeading>
                         <div className="space-y-4">
-                            <ScoreBar label="ML Classifier (Layer 1)" value={result.layer1?.confidence || 0} color="var(--accent-cyan)" index={0} />
-                            <ScoreBar label="Evidence Score (Layer 2)" value={result.layer2?.evidence_score || 0} color="var(--accent-gold)" index={1} />
+                            <ScoreBar label="ML Classifier (Layer 1 — 40%)" value={result.layer1?.confidence || 0} color="var(--accent-cyan)" index={0} />
+                            <ScoreBar label="Evidence Score (Layer 2 — 60%)" value={result.layer2?.evidence_score || 0} color="var(--accent-gold)" index={1} />
                             <ScoreBar label="Final Credibility Score" value={result.final_score} color={finalColor} index={2} />
                         </div>
                     </div>
 
-                    {/* Named entities */}
+                    {/* Row 3: Layer cards (2 col, collapses to 1 on mobile) */}
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 fade-up-4">
+                        {/* Layer 1 */}
+                        <LayerCard
+                            title="Layer 1 — ML Classifier"
+                            icon={Brain}
+                            verdict={result.layer1?.verdict}
+                            score={result.layer1?.confidence}
+                            delay={0}>
+                            <div className="mt-3">
+                                <p className="text-xs mb-2" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', letterSpacing: '0.1em' }}>
+                                    TRIGGERED FEATURES
+                                </p>
+                                <FeatureBreakdown features={result.layer1?.triggered_features} />
+                            </div>
+                        </LayerCard>
+
+                        {/* Layer 2 */}
+                        <LayerCard
+                            title="Layer 2 — Evidence"
+                            icon={Layers}
+                            verdict={result.layer2?.verdict}
+                            score={result.layer2?.evidence_score}
+                            delay={80}>
+                            <p className="text-xs mt-3" style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-body)', lineHeight: 1.6 }}>
+                                <span style={{ color: 'var(--text-secondary)' }}>Claim used: </span>
+                                "{result.layer2?.claim_used || 'No claim extracted'}"
+                            </p>
+                        </LayerCard>
+                    </div>
+
+                    {/* Row 4: Suspicious Word Highlighter (only if text input) */}
+                    {result.layer1?.triggered_features?.length > 0 && (
+                        <div className="card p-5 fade-up-5">
+                            <SectionHeading>Suspicious Signal Analysis</SectionHeading>
+                            <WordHighlighter
+                                text={result.layer2?.claim_used || ''}
+                                triggerWords={triggerWords}
+                                className="text-sm"
+                            />
+                        </div>
+                    )}
+
+                    {/* Row 5: Named Entities */}
                     {allEntities.length > 0 && (
-                        <div className="card p-5 fade-up-4">
-                            <SectionHeading>Named Entities ({allEntities.length})</SectionHeading>
+                        <div className="card p-5 fade-up-5">
+                            <SectionHeading count={allEntities.length}>Named Entities</SectionHeading>
                             <ul className="flex flex-wrap gap-2" role="list">
                                 {allEntities.map((e, i) => (
                                     <li key={i}
                                         className="flex items-center gap-1.5 px-2.5 py-1 text-xs"
                                         style={{
                                             background: 'var(--bg-elevated)',
-                                            border: '1px solid var(--border)',
+                                            border: `1px solid ${e.color}33`,
                                             borderRadius: 2,
                                         }}>
-                                        <span style={{ color: 'var(--text-muted)', fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.1em' }}>
+                                        <span style={{ color: e.color, fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.1em' }}>
                                             {e.type.toUpperCase()}
                                         </span>
                                         <span style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-body)' }}>{e.label}</span>
@@ -305,25 +753,50 @@ export default function VerifyPage() {
                         </div>
                     )}
 
-                    {/* Evidence sources */}
+                    {/* Row 6: Evidence Sources */}
                     {result.layer2?.sources?.length > 0 && (
                         <div className="card p-5 fade-up-5">
-                            <SectionHeading>Evidence Sources</SectionHeading>
+                            <SectionHeading count={result.layer2.sources.length}>Evidence Sources</SectionHeading>
                             <ul className="space-y-2" role="list">
-                                {result.layer2.sources.map((src, i) => (
-                                    <li key={i}>
-                                        <a href={src.url} target="_blank" rel="noreferrer"
-                                            className="block p-3 transition-colors"
-                                            style={{ background: 'var(--bg-elevated)', border: '1px solid var(--border)', borderRadius: 2 }}>
-                                            <p className="text-xs font-semibold mb-0.5" style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-body)' }}>
-                                                {src.title}
-                                            </p>
-                                            <p className="text-xs tabular" style={{ color: 'var(--text-muted)' }}>
-                                                {src.source} · {(src.similarity * 100).toFixed(0)}% match
-                                            </p>
-                                        </a>
-                                    </li>
-                                ))}
+                                {result.layer2.sources.map((src, i) => {
+                                    const { Icon: StanceIcon, color: stanceColor } = STANCE_ICON[src.stance] ?? STANCE_ICON['Not Enough Info']
+                                    return (
+                                        <li key={i}>
+                                            <a href={src.url} target="_blank" rel="noreferrer"
+                                                className="block p-3 transition-colors"
+                                                style={{
+                                                    background: 'var(--bg-elevated)',
+                                                    border: '1px solid var(--border)',
+                                                    borderRadius: 2,
+                                                    cursor: 'pointer',
+                                                }}
+                                                onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--border-light)'}
+                                                onMouseLeave={e => e.currentTarget.style.borderColor = 'var(--border)'}>
+                                                <div className="flex items-start gap-2">
+                                                    <StanceIcon size={13} style={{ color: stanceColor, marginTop: 2, flexShrink: 0 }} aria-hidden="true" />
+                                                    <div className="flex-1 min-w-0">
+                                                        <p className="text-xs font-semibold mb-0.5 truncate"
+                                                            style={{ color: 'var(--text-primary)', fontFamily: 'var(--font-body)' }}>
+                                                            {src.title}
+                                                        </p>
+                                                        <div className="flex items-center gap-2">
+                                                            <span className="text-xs tabular" style={{ color: 'var(--text-muted)' }}>
+                                                                {src.source_name || src.source}
+                                                            </span>
+                                                            <span className="text-xs tabular" style={{ color: stanceColor, fontFamily: 'var(--font-display)', letterSpacing: '0.06em' }}>
+                                                                {src.stance}
+                                                            </span>
+                                                            <span className="text-xs tabular" style={{ color: 'var(--text-muted)' }}>
+                                                                {(src.similarity * 100).toFixed(0)}% match
+                                                            </span>
+                                                        </div>
+                                                    </div>
+                                                    <ExternalLink size={11} style={{ color: 'var(--text-muted)', flexShrink: 0 }} aria-hidden="true" />
+                                                </div>
+                                            </a>
+                                        </li>
+                                    )
+                                })}
                             </ul>
                         </div>
                     )}

frontend/src/types.ts

@@ -0,0 +1,133 @@
+/**
+ * PhilVerify Frontend Type Definitions
+ * Mirrors the Pydantic models defined in api/schemas.py
+ */
+
+// ── Input types ────────────────────────────────────────────────────────────────
+
+export interface VerifyTextRequest {
+  text: string
+}
+
+export interface VerifyUrlRequest {
+  url: string
+}
+
+// ── Layer 1 (TF-IDF classifier) ────────────────────────────────────────────────
+
+export interface Layer1Result {
+  verdict: Verdict
+  score: number          // 0–100 credibility score
+  confidence: number     // 0–100%
+  triggered_features: string[]
+  explanation: string
+}
+
+// ── Layer 2 (Evidence retrieval) ───────────────────────────────────────────────
+
+export interface SourceArticle {
+  title: string
+  url: string
+  source_name: string
+  similarity: number
+  published_at?: string
+  credibility_score?: number
+}
+
+export interface Layer2Result {
+  sources: SourceArticle[]
+  stance: 'supporting' | 'contradicting' | 'neutral' | string
+  evidence_score: number     // 0–100
+}
+
+// ── Verification response ──────────────────────────────────────────────────────
+
+export type Verdict = 'Credible' | 'Unverified' | 'Likely Fake'
+export type InputType = 'text' | 'url' | 'image' | 'video'
+
+export interface VerificationResponse {
+  text_preview: string
+  language: string
+  verdict: Verdict
+  final_score: number        // 0–100 final credibility score
+  confidence: number         // 0–100%
+  layer1: Layer1Result
+  layer2: Layer2Result
+  timestamp: string          // ISO 8601
+  input_type?: InputType
+  /** Present only in extension cached results */
+  _fromCache?: boolean
+}
+
+// ── History ────────────────────────────────────────────────────────────────────
+
+export interface HistoryEntry {
+  id: string
+  text_preview: string
+  verdict: Verdict
+  final_score: number
+  language?: string
+  timestamp: string          // ISO 8601
+  input_type?: InputType
+}
+
+export interface HistoryParams {
+  limit?: number
+  offset?: number
+  verdict?: Verdict
+}
+
+export interface HistoryResponse {
+  items: HistoryEntry[]
+  total: number
+  limit: number
+  offset: number
+}
+
+// ── Trends ─────────────────────────────────────────────────────────────────────
+
+export interface TrendingEntity {
+  entity: string
+  count: number
+}
+
+export interface TrendingTopic {
+  topic: string
+  count: number
+}
+
+export interface VerdictDayPoint {
+  date: string               // YYYY-MM-DD
+  credible: number
+  unverified: number
+  fake: number
+}
+
+export interface TrendsResponse {
+  top_entities: TrendingEntity[]
+  top_topics: TrendingTopic[]
+  verdict_distribution: Record<Verdict, number>
+  verdict_by_day: VerdictDayPoint[]
+}
+
+// ── Health ─────────────────────────────────────────────────────────────────────
+
+export interface HealthResponse {
+  status: 'ok' | 'degraded' | 'error'
+  version: string
+  models_loaded: boolean
+  firestore_connected: boolean
+}
+
+// ── API error ──────────────────────────────────────────────────────────────────
+
+export class ApiError extends Error {
+  /** True when the backend responded (HTTP error), false for network failures */
+  readonly isBackendError: boolean
+
+  constructor(message: string, isBackendError = false) {
+    super(message)
+    this.name = 'ApiError'
+    this.isBackendError = isBackendError
+  }
+}

frontend/tsconfig.json

@@ -0,0 +1,39 @@
+{
+  "compilerOptions": {
+    /* Language & environment */
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true,
+
+    /* React */
+    "jsx": "react-jsx",
+
+    /* Strict type checking */
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "exactOptionalPropertyTypes": true,
+
+    /* Module interop */
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "allowImportingTsExtensions": true,
+
+    /* Emit */
+    "noEmit": true,   /* Vite owns transpilation */
+    "skipLibCheck": true,
+
+    /* Paths */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}

frontend/vite.config.js

@@ -8,8 +8,8 @@ export default defineConfig({
     proxy: {
       '/api': {
         target: 'http://localhost:8000',
-        rewrite: (path) => path.replace(/^\/api/, ''),
         changeOrigin: true,
+        // No rewrite — preserve /api prefix so dev matches production routing
       },
     },
   },

inputs/url_scraper.py

@@ -1,38 +1,243 @@
 """
 PhilVerify — URL Scraper (BeautifulSoup)
 Extracts article text from news URLs. Respects robots.txt.
+
+Extraction strategy (waterfall):
+  1. <article> / <main> found → gather all <p> tags inside
+  2. If that yields < 100 chars, widen to all block text (p, li, div) inside
+  3. If still < 100 chars, gather all p / li from full body
+  4. Last resort: every text node in body > 30 chars each
 """
 import logging
 import re
 from urllib.parse import urlparse
-from urllib.robotparser import RobotFileParser
 
 logger = logging.getLogger(__name__)
 
-_UNWANTED_TAGS = {"script", "style", "nav", "footer", "header", "aside", "figure", "figcaption"}
+_UNWANTED_TAGS = {"script", "style", "nav", "footer", "header", "aside",
+                  "figure", "figcaption", "form", "button", "select",
+                  "noscript", "iframe", "svg", "ads", "cookie"}
+
+_BLOCK_TAGS = ["p", "li", "blockquote", "h1", "h2", "h3", "h4", "td"]
+
+# Common article container class/id fragments used by PH news sites
+_ARTICLE_SELECTORS = [
+    "article",
+    "main",
+    "[class*='article-body']",
+    "[class*='article-content']",
+    "[class*='story-body']",
+    "[class*='content-body']",
+    "[class*='post-body']",
+    "[id*='article']",
+    "[id*='content']",
+]
 
 
 def _get_domain(url: str) -> str:
     return urlparse(url).netloc.replace("www.", "")
 
 
-def _robots_allow(url: str) -> bool:
+def _slug_to_text(url: str) -> str:
+    """
+    Synthesize minimal article text from the URL slug and domain.
+    e.g. 'https://inquirer.net/123/live-updates-duterte-icc/' →
+         'live updates duterte icc from inquirer.net'
+    Useful when the page is bot-protected but the headline is embedded in the URL.
+    """
+    parsed = urlparse(url)
+    domain = parsed.netloc.replace("www.", "")
+    # Last non-trivial path segment is usually the slug
+    segments = [s for s in parsed.path.split("/") if s and not s.isdigit() and len(s) > 5]
+    if segments:
+        slug = segments[-1].replace("-", " ").replace("_", " ")
+        return f"{slug} from {domain}"
+    return domain
+
+
+_BOT_CHALLENGE_TITLES = {
+    "just a moment",
+    "attention required",
+    "access denied",
+    "please wait",
+    "checking your browser",
+    "ddos-guard",
+    "enable javascript",
+}
+
+
+def _is_bot_challenge(resp) -> bool:
+    """Return True if the response looks like a Cloudflare / anti-bot challenge page."""
+    if resp.status_code in (403, 429, 503):
+        return True
+    # Even on 200, some CF setups serve a JS challenge
+    body_start = resp.text[:2000].lower()
+    return any(t in body_start for t in _BOT_CHALLENGE_TITLES)
+
+
+async def _try_cache_fallback(client, url: str, headers: dict) -> str:
+    """
+    Attempt to retrieve the URL through the Wayback Machine (archive.org).
+    Falls back to Google Webcache if Wayback Machine has no snapshot.
+    Returns the extracted article text on success, or "" on any failure.
+    """
+    from bs4 import BeautifulSoup
+
+    # ── 1. Wayback Machine ─────────────────────────────────────────────────
+    try:
+        avail_url = f"https://archive.org/wayback/available?url={url}"
+        avail_resp = await client.get(avail_url, headers=headers, timeout=10)
+        if avail_resp.status_code == 200:
+            data = avail_resp.json()
+            snapshot = (
+                data.get("archived_snapshots", {})
+                    .get("closest", {})
+                    .get("url")
+            )
+            if snapshot:
+                snap_resp = await client.get(snapshot, headers=headers, timeout=20)
+                if snap_resp.status_code == 200:
+                    soup = BeautifulSoup(snap_resp.text, "lxml")
+                    # Strip Wayback Machine toolbar
+                    for el in soup.select("#wm-ipp-base, #wm-ipp, #donato, .wb-autocomplete-suggestions"):
+                        el.decompose()
+                    text = _extract_text(soup)
+                    if len(text) < 300:
+                        og = _extract_og_text(soup)
+                        if len(og) > len(text):
+                            text = og
+                    if len(text) >= 150:
+                        logger.info("Wayback Machine fallback succeeded: %d chars from %s", len(text), snapshot)
+                        return text
+    except Exception as exc:
+        logger.debug("Wayback Machine fallback failed: %s", exc)
+
+    # ── 2. Google Webcache (last resort) ──────────────────────────────────
+    # Strip UTM/tracking params so the cache key matches the canonical URL
+    from urllib.parse import urlparse, urlencode, parse_qs, urlunparse
+    _TRACKING_PARAMS = {"utm_source", "utm_medium", "utm_campaign", "utm_term", "utm_content",
+                        "fbclid", "gclid", "mc_eid", "ref", "source"}
     try:
         parsed = urlparse(url)
-        robots_url = f"{parsed.scheme}://{parsed.netloc}/robots.txt"
-        rp = RobotFileParser()
-        rp.set_url(robots_url)
-        rp.read()
-        return rp.can_fetch("*", url)
-    except Exception:
-        return True  # Allow by default if robots.txt fetch fails
+        clean_qs = {k: v for k, v in parse_qs(parsed.query).items()
+                    if k.lower() not in _TRACKING_PARAMS}
+        clean_url = urlunparse(parsed._replace(query=urlencode(clean_qs, doseq=True)))
+        cache_url = f"https://webcache.googleusercontent.com/search?q=cache:{clean_url}&hl=en"
+        resp = await client.get(cache_url, headers=headers, timeout=15)
+        if resp.status_code == 200:
+            soup = BeautifulSoup(resp.text, "lxml")
+            for el in soup.select("#google-cache-hdr, .google-cache-hdr, #cacheinfo"):
+                el.decompose()
+            text = _extract_text(soup)
+            if len(text) < 300:
+                og = _extract_og_text(soup)
+                if len(og) > len(text):
+                    text = og
+            # Require substantial content — Google error stubs are usually < 100 chars
+            if len(text) >= 150:
+                logger.info("Google cache fallback succeeded: %d chars", len(text))
+                return text
+    except Exception as exc:
+        logger.debug("Google cache fallback failed: %s", exc)
+
+    return ""
+
+
+def _robots_allow(url: str) -> bool:  # noqa: ARG001
+    # PhilVerify is a fact-checking / research tool, not a commercial scraper.
+    # Respecting robots.txt causes false-positives (many news sites block the
+    # wildcard "*" agent even when they allow real browsers).  We already use
+    # realistic browser headers for HTTP requests, so we skip the robots check.
+    return True
+
+
+def _clean_text(raw: str) -> str:
+    return re.sub(r"\s+", " ", raw).strip()
+
+
+def _extract_og_text(soup) -> str:
+    """
+    Extract OG/meta tags — always present in static HTML, even on JS-rendered SPAs.
+    Returns concatenation of og:title + og:description + meta description.
+    """
+    parts = []
+    for sel, attr in [
+        ("meta[property='og:title']", "content"),
+        ("meta[property='og:description']", "content"),
+        ("meta[name='description']", "content"),
+        ("title", None),
+    ]:
+        el = soup.select_one(sel)
+        if el:
+            val = (el.get(attr) if attr else el.get_text(strip=True)) or ""
+            if val.strip():
+                parts.append(val.strip())
+    return " ".join(dict.fromkeys(parts))  # deduplicate while preserving order
+
+
+def _extract_text(soup) -> str:
+    """
+    Multi-strategy waterfall text extractor.
+    Returns the best result found across strategies.
+    """
+    # ── Remove noise ──────────────────────────────────────────────────────────
+    for tag in soup(list(_UNWANTED_TAGS)):
+        tag.decompose()
+
+    # ── Strategy 1: known article container selectors ────────────────────────
+    for selector in _ARTICLE_SELECTORS:
+        container = soup.select_one(selector)
+        if container:
+            text = _clean_text(
+                " ".join(p.get_text(separator=" ", strip=True)
+                         for p in container.find_all("p"))
+            )
+            if len(text) >= 100:
+                logger.debug("Extracted via selector '%s': %d chars", selector, len(text))
+                return text
+
+    # ── Strategy 2: article/main container, wider tags ───────────────────────
+    container = soup.find("article") or soup.find("main")
+    if container:
+        text = _clean_text(
+            " ".join(el.get_text(separator=" ", strip=True)
+                     for el in container.find_all(_BLOCK_TAGS))
+        )
+        if len(text) >= 100:
+            logger.debug("Extracted via article/main + block tags: %d chars", len(text))
+            return text
+
+    # ── Strategy 3: all <p> and <li> in body ─────────────────────────────────
+    body = soup.body or soup
+    text = _clean_text(
+        " ".join(el.get_text(separator=" ", strip=True)
+                 for el in body.find_all(["p", "li"]))
+    )
+    if len(text) >= 100:
+        logger.debug("Extracted via body p/li: %d chars", len(text))
+        return text
+
+    # ── Strategy 4: last resort — all non-trivial text nodes ─────────────────
+    chunks = [s.strip() for s in body.stripped_strings if len(s.strip()) > 30]
+    text = _clean_text(" ".join(chunks))
+    logger.debug("Extracted via stripped_strings: %d chars", len(text))
+    return text
 
 
 async def scrape_url(url: str) -> tuple[str, str]:
     """
     Returns (article_text, domain).
     Raises ValueError if robots.txt disallows scraping.
+    The caller should check len(text) >= 20 before using.
     """
+    # Validate imports eagerly so failure is loud in logs
+    try:
+        import httpx
+        from bs4 import BeautifulSoup
+    except ImportError as exc:
+        logger.critical("Missing dependency: %s — run: pip install beautifulsoup4 lxml httpx", exc)
+        raise RuntimeError(f"Missing scraping dependency: {exc}") from exc
+
     domain = _get_domain(url)
 
     if not _robots_allow(url):
@@ -40,28 +245,61 @@ async def scrape_url(url: str) -> tuple[str, str]:
         raise ValueError(f"Scraping disallowed by robots.txt for {domain}")
 
     try:
-        import httpx
-        from bs4 import BeautifulSoup
-
-        headers = {"User-Agent": "PhilVerifyBot/1.0 (fact-checking research)"}
-        async with httpx.AsyncClient(timeout=15, follow_redirects=True) as client:
+        headers = {
+            "User-Agent": (
+                "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) "
+                "AppleWebKit/537.36 (KHTML, like Gecko) "
+                "Chrome/122.0.0.0 Safari/537.36"
+            ),
+            "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8",
+            "Accept-Language": "en-US,en;q=0.5",
+        }
+        async with httpx.AsyncClient(timeout=20, follow_redirects=True) as client:
             resp = await client.get(url, headers=headers)
-            resp.raise_for_status()
 
-        soup = BeautifulSoup(resp.text, "lxml")
+            # ── Bot-challenge / firewall detection ───────────────────────────
+            if _is_bot_challenge(resp):
+                logger.warning(
+                    "Bot challenge detected for %s (HTTP %d) — trying Google cache fallback",
+                    domain, resp.status_code,
+                )
+                cached_text = await _try_cache_fallback(client, url, headers)
+                if cached_text:
+                    return cached_text, domain
+                # Last resort: try to salvage OG/meta from the challenge page itself
+                soup = BeautifulSoup(resp.text, "lxml")
+                og_text = _extract_og_text(soup)
+                if len(og_text) >= 20:
+                    logger.info(
+                        "Using OG meta from challenge page for %s: %d chars",
+                        domain, len(og_text),
+                    )
+                    return og_text, domain
+                logger.error("All fallbacks failed for bot-protected URL: %s", url)
+                slug_text = _slug_to_text(url)
+                if slug_text:
+                    logger.info(
+                        "Using URL-slug synthesis for %s: %r",
+                        domain, slug_text,
+                    )
+                    return slug_text, domain
+                return "", domain
 
-        # Remove unwanted tags
-        for tag in soup(list(_UNWANTED_TAGS)):
-            tag.decompose()
+            resp.raise_for_status()
 
-        # Try article tag first, fall back to body
-        article = soup.find("article") or soup.find("main") or soup.body
-        if article is None:
-            return "", domain
+        soup = BeautifulSoup(resp.text, "lxml")
+        text = _extract_text(soup)
 
-        paragraphs = article.find_all("p")
-        text = " ".join(p.get_text(separator=" ", strip=True) for p in paragraphs)
-        text = re.sub(r"\s+", " ", text).strip()
+        # If article body is mostly noise (cookie banners, JS stubs),
+        # fall back to OG/meta tags — always static, even on SPAs
+        if len(text) < 300:
+            og_text = _extract_og_text(soup)
+            if len(og_text) > len(text):
+                logger.info(
+                    "Article body too short (%d chars) — using OG/meta tags (%d chars) for %s",
+                    len(text), len(og_text), domain,
+                )
+                text = og_text
 
         logger.info("Scraped %d chars from %s", len(text), domain)
         return text, domain

main.py

@@ -15,6 +15,7 @@ from config import get_settings
 from api.routes.verify import router as verify_router
 from api.routes.history import router as history_router
 from api.routes.trends import router as trends_router
+from api.routes.preview import router as preview_router
 
 # ── Logging ───────────────────────────────────────────────────────────────────
 logging.basicConfig(
@@ -90,11 +91,17 @@ async def global_exception_handler(request: Request, exc: Exception):
     )
 
 
-# ── Routers ───────────────────────────────────────────────────────────────────
+# ── Routers (all under /api so Firebase Hosting rewrite ↔ Cloud Run match) ────
+# Frontend calls /api/verify/..., Firebase Hosting forwards full path to Cloud Run.
+# In dev, Vite proxy forwards /api/... directly without stripping — so same prefix.
 
-app.include_router(verify_router)
-app.include_router(history_router)
-app.include_router(trends_router)
+from fastapi import APIRouter as _APIRouter
+_api = _APIRouter(prefix="/api")
+_api.include_router(verify_router)
+_api.include_router(history_router)
+_api.include_router(trends_router)
+_api.include_router(preview_router)
+app.include_router(_api)
 
 
 # ── Health ────────────────────────────────────────────────────────────────────
@@ -109,7 +116,9 @@ async def root():
     }
 
 
+# Cloud Run health check (no /api prefix so load balancer can reach it)
 @app.get("/health", tags=["Health"])
+@app.get("/api/health", tags=["Health"])
 async def health():
     return {"status": "ok", "env": settings.app_env}