Deploy to HuggingFace Spaces

.github/workflows/ci.yml

@@ -0,0 +1,131 @@
+# WHY GitHub Actions CI: catches broken imports, TypeScript errors, and test
+# failures before they reach HuggingFace Spaces. Runs on every push to main.
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Detect C sources
+        id: detect-c
+        run: |
+          if find . -name "*.c" -o -name "*.h" | grep -q .; then
+            echo "present=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "present=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Install lcov
+        run: sudo apt-get update && sudo apt-get install -y lcov
+
+      - name: Install clang-format (if needed)
+        if: steps.detect-c.outputs.present == 'true'
+        run: sudo apt-get install -y clang-format
+
+      - name: Set up Python 3.12
+        id: setup-python
+        uses: actions/setup-python@v5
+        with:
+          python-version: "3.12"
+
+      - name: Cache pip
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ steps.setup-python.outputs.python-version }}-${{ hashFiles('requirements.txt', 'requirements-dev.txt') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-${{ steps.setup-python.outputs.python-version }}-
+            ${{ runner.os }}-pip-
+
+      - name: Install Python dependencies
+        run: pip install -r requirements.txt -r requirements-dev.txt
+
+      - name: Python lint (ruff)
+        run: ruff check app/ tests/
+
+      - name: C style (clang-format)
+        if: steps.detect-c.outputs.present == 'true'
+        run: |
+          mapfile -d '' files < <(find . -name "*.c" -o -name "*.h" -print0)
+          clang-format --version
+          printf '%s\0' "${files[@]}" | xargs -0 clang-format --dry-run --Werror
+
+      - name: Check all Python modules import cleanly
+        run: |
+          python -c "from app.model import ToxicityClassifier"
+          python -c "from app.database import get_recent_posts, save_post, seed_if_empty"
+          python -c "from app.graph import build_cooccurrence_graph"
+          python -c "from app.ingestion import ALGOSPEAK_QUERIES"
+          python -c "from app.main import app"
+
+      - name: Run tests with coverage
+        env:
+          BLUESKY_HANDLE: "test@test.com"
+          BLUESKY_PASSWORD: "testpassword"
+          PYTHONPATH: .
+        run: |
+          python -m pytest tests/ -v --tb=short --cov=app --cov-report=xml
+
+      # ── Frontend build verification ──────────────────────────────────────────
+      # WHY build React in CI: catches TypeScript errors and missing imports
+      # before they cause a silent failure during Docker build on HuggingFace.
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Cache pnpm store
+        uses: actions/cache@v4
+        with:
+          path: ~/.local/share/pnpm/store
+          key: ${{ runner.os }}-pnpm-${{ hashFiles('frontend/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-
+
+      - name: Install frontend dependencies
+        working-directory: frontend
+        run: pnpm install --frozen-lockfile
+
+      - name: Build frontend (verify no TypeScript errors)
+        working-directory: frontend
+        run: pnpm build
+
+      - name: Collect lcov coverage
+        id: lcov
+        run: |
+          if find . -name "*.gcda" -o -name "*.gcno" | grep -q .; then
+            lcov --capture --directory . --output-file coverage.info --ignore-errors unused --no-external
+            echo "generated=true" >> "$GITHUB_OUTPUT"
+          else
+            echo "No gcda/gcno files found; skipping lcov capture."
+            echo "generated=false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Upload Python coverage to Codecov
+        uses: codecov/codecov-action@v4
+        with:
+          files: ./coverage.xml
+          token: ${{ secrets.CODECOV_TOKEN }}
+          flags: python
+          fail_ci_if_error: false
+
+      - name: Upload C coverage to Codecov
+        if: steps.lcov.outputs.generated == 'true'
+        uses: codecov/codecov-action@v4
+        with:
+          files: ./coverage.info
+          token: ${{ secrets.CODECOV_TOKEN }}
+          flags: c
+          fail_ci_if_error: false

.github/workflows/hf-deploy.yml

@@ -0,0 +1,53 @@
+name: Deploy to HuggingFace Spaces
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Build React frontend
+        working-directory: frontend
+        run: |
+          pnpm install --frozen-lockfile
+          pnpm build
+
+      - name: Push to HuggingFace Space
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          git config --global user.email "deploy@github-actions.com"
+          git config --global user.name "GitHub Actions"
+
+          git checkout --orphan hf-deploy
+
+          git rm -rf assets/ 2>/dev/null || true
+          git rm -r --cached frontend/src/ 2>/dev/null || true
+          git rm -r --cached frontend/node_modules/ 2>/dev/null || true
+          git rm -r --cached frontend/public/ 2>/dev/null || true
+
+          cp README_HF.md README.md
+          git rm --cached README_HF.md 2>/dev/null || true
+          rm README_HF.md
+
+          git add -f frontend/dist/
+          git add .
+
+          git commit -m "Deploy to HuggingFace Spaces"
+          git remote add space https://odeliyach:$HF_TOKEN@huggingface.co/spaces/odeliyach/Algoscope
+          git push space hf-deploy:main --force

.gitignore

@@ -0,0 +1,38 @@
+# Credentials — NEVER commit
+.env
+.env.local
+.env.*.local
+
+# Database — contains scraped user data
+algoscope.db
+*.db
+
+# Python
+__pycache__/
+*.py[cod]
+*.pyo
+venv/
+.venv/
+*.egg-info/
+dist/
+build/
+
+# HuggingFace model cache
+.cache/
+
+# Pyvis auto-generated output — not application code
+*.html
+test_graph.html
+
+# React build output — generated by `pnpm build`, not source code
+frontend/dist/
+frontend/node_modules/
+
+# OS
+.DS_Store
+Thumbs.db
+
+# IDE
+.vscode/
+.idea/
+*.swp

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.12-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY app/ ./app/
+COPY frontend/dist/ ./frontend/dist/
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860", "--log-level", "debug"]

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Odeliya Charitonova
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Makefile

@@ -0,0 +1,20 @@
+.PHONY: install run-api run-dashboard test lint clean
+
+install:
+	pip install -r requirements.txt
+
+run-api:
+	uvicorn app.main:app --reload --port 8000
+
+run-dashboard:
+	streamlit run dashboard.py
+
+test:
+	python -m pytest tests/ -v --tb=short
+
+lint:
+	ruff check app/ dashboard.py tests/
+
+clean:
+	find . -type d -name __pycache__ -exec rm -rf {} + 2>/dev/null || true
+	rm -f algoscope.db

README.md

@@ -0,0 +1,205 @@
+---
+title: AlgoScope
+emoji: 🔍
+colorFrom: red
+colorTo: yellow
+sdk: docker
+pinned: false
+---
+
+<div align="center">
+
+# 🔍 AlgoScope
+
+**Real-time algospeak & toxicity detection on Bluesky**
+
+[![Build](https://img.shields.io/github/actions/workflow/status/odeliyach/Algoscope/ci.yml?branch=main&label=Build)](https://github.com/odeliyach/Algoscope/actions/workflows/ci.yml)
+[![Coverage](https://img.shields.io/codecov/c/github/odeliyach/Algoscope?branch=main&label=Coverage)](https://codecov.io/gh/odeliyach/Algoscope)
+[![Linting/Style](https://img.shields.io/github/actions/workflow/status/odeliyach/Algoscope/ci.yml?branch=main&label=Linting%2FStyle)](https://github.com/odeliyach/Algoscope/actions/workflows/ci.yml)
+[![Python 3.12](https://img.shields.io/badge/Python-3.12-blue?logo=python)](https://python.org)
+[![HuggingFace Model](https://img.shields.io/badge/Model-AlgoShield-orange?logo=huggingface)](https://huggingface.co/odeliyach/AlgoShield-Algospeak-Detection)
+[![HuggingFace Space](https://img.shields.io/badge/Live%20Demo-Spaces-yellow?logo=huggingface)](https://huggingface.co/spaces/odeliyach/algoscope)
+[![Streamlit](https://img.shields.io/badge/Dashboard-Streamlit-red?logo=streamlit)](https://streamlit.io)
+[![License: MIT](https://img.shields.io/badge/License-MIT-green)](LICENSE)
+
+*Odeliya Charitonova · Tel Aviv University, School of CS & AI · 2026*
+
+</div>
+
+---
+
+## What is AlgoScope?
+
+Algospeak is the evolving coded language people use to evade content moderation — "unalive" instead of suicide, "seggs" instead of sex, "le dollar bean" instead of lesbian. Standard toxicity APIs score these near zero because they look benign to classifiers trained on explicit language.
+
+AlgoScope is a live dashboard that catches them anyway. It ingests posts from the Bluesky social network in real time, classifies each one with a fine-tuned DistilBERT model trained specifically on algospeak, and visualizes toxicity patterns, co-occurrence networks, and trend spikes in an interactive dashboard.
+
+> **Why this matters:** Algospeak evasion is an active research problem in content moderation. This project turns published NLP research into a live, clickable product.
+
+---
+
+## Live Demo
+
+| Resource | Link |
+|----------|------|
+| 🖥️ Live dashboard | [huggingface.co/spaces/odeliyach/algoscope](https://huggingface.co/spaces/odeliyach/algoscope) |
+| 🤗 Fine-tuned model | [odeliyach/AlgoShield-Algospeak-Detection](https://huggingface.co/odeliyach/AlgoShield-Algospeak-Detection) |
+| 💻 GitHub | [github.com/odeliyach/Algoscope](https://github.com/odeliyach/Algoscope) |
+
+---
+
+---
+
+## Features
+
+- **🚨 Spike alerts** — red banner when a tracked term exceeds 80% toxic in the last hour
+- **📊 Toxicity over time** — hourly line chart with color-coded data points (green/orange/red by toxicity level)
+- **🕸️ Co-occurrence graph** — interactive word graph built with NetworkX + Pyvis; nodes colored by toxicity rate
+- **⚖️ Term comparison** — side-by-side toxicity profiles for any two tracked terms
+- **📥 Export** — download all analyzed posts as CSV or JSON
+- **🎛️ Threshold slider** — tune precision/recall tradeoff at inference time without retraining
+
+---
+
+## Architecture
+
+```
+┌─────────────────┐   AT Protocol    ┌───────────────────┐
+│   Bluesky API   │ ───────────────▶ │   ingestion.py    │
+└─────────────────┘                  │  dedup + preproc  │
+                                     └─────────┬─────────┘
+                                               │
+                                     ┌─────────▼─────────┐
+                                     │     model.py      │
+                                     │  DistilBERT       │
+                                     │  singleton + batch│
+                                     └─────────┬─────────┘
+                                               │
+                          ┌────────────────────▼──────────────────────┐
+                          │              database.py                  │
+                          │   SQLite · URI-keyed deduplication        │
+                          └────────────────────┬──────────────────────┘
+                                               │
+              ┌────────────────────────────────▼────────────────────────────┐
+              │                         dashboard.py                        │
+              │   Streamlit �� Plotly · NetworkX · Pyvis  (4 tabs)           │
+              └─────────────────────────────────────────────────────────────┘
+```
+
+**Stack:** Python 3.12 · FastAPI · Streamlit · SQLite · NetworkX · Pyvis · Plotly · HuggingFace Transformers · AT Protocol (Bluesky)
+
+---
+
+## Model — AlgoShield
+
+The classifier powering AlgoScope is **AlgoShield**, a DistilBERT model fine-tuned on the [MADOC dataset](https://arxiv.org/abs/2306.01976) (Multimodal Algospeak Detection and Offensive Content). It was trained and evaluated separately — full training code, dataset preprocessing, and evaluation notebooks are in the [AlgoShield repository](https://huggingface.co/odeliyach/AlgoShield-Algospeak-Detection).
+
+| Metric | Baseline DistilBERT | AlgoShield (fine-tuned) |
+|--------|---------------------|------------------------|
+| Precision | 70.3% | 61.2% |
+| Recall | 33.2% | **73.2% (+40 pts)** |
+| F1 | 49.0% | **66.7% (+17.7 pts)** |
+
+The +40-point recall improvement comes at the cost of ~9 points of precision — a deliberate tradeoff. In content moderation, a false negative (missing a toxic post) causes real harm; a false positive just means a human reviews something innocent. The threshold slider in AlgoScope lets operators tune this tradeoff at deployment time without retraining.
+
+> Want to understand how AlgoShield was built? See the [model card and training details →](https://huggingface.co/odeliyach/AlgoShield-Algospeak-Detection)
+
+---
+
+## Key Engineering Decisions
+
+**Train/serve parity** — The same `preprocess_text()` function used during AlgoShield's training is applied at inference time in AlgoScope. Without this, the model sees out-of-distribution input on every prediction — a production ML bug called train/serve skew.
+
+**Threshold separation** — The model outputs a raw confidence score; a threshold slider converts it to a binary label. This separates the ML model from business policy — the same pattern used in Gmail spam and YouTube moderation. One model, multiple thresholds tuned per context.
+
+**Graph construction order** — The co-occurrence graph filters to the 1-hop neighborhood of algospeak seed words *before* frequency ranking. The naive approach (top-30 globally, then filter) always returns generic English function words ("get", "like", "know") — useless for the project's purpose.
+
+**Physics disabled** — Pyvis force-directed layout is O(n²) per animation frame. With 30+ nodes it froze the browser for 2+ minutes. A fixed `randomSeed` layout loads instantly with reproducible positions.
+
+**SQLite with clean abstraction** — All persistence is isolated in `database.py`. No other file imports `sqlite3` directly. Replacing SQLite with PostgreSQL or Cassandra requires changing only that one file.
+
+---
+
+## Running Locally
+
+**Requirements:** Python 3.12, a Bluesky account
+
+```bash
+git clone https://github.com/odeliyach/Algoscope
+cd Algoscope
+python -m venv venv
+venv\Scripts\activate        # Windows
+# source venv/bin/activate   # Mac/Linux
+pip install -r requirements.txt
+```
+
+Or with Make:
+```bash
+make install
+make run-dashboard   # in one terminal
+make run-api         # in another
+```
+
+Create `.env` in the project root:
+```env
+BLUESKY_HANDLE=yourhandle.bsky.social
+BLUESKY_PASSWORD=yourpassword
+```
+
+---
+
+## Project Structure
+
+```
+Algoscope/
+├── app/
+│   ├── main.py          # FastAPI endpoints (/health, /predict)
+│   ├── model.py         # ToxicityClassifier — singleton load, batch inference
+│   ├── ingestion.py     # Bluesky AT Protocol client + preprocessing
+│   ├── database.py      # SQLite persistence — isolated for easy swap
+│   └── graph.py         # NetworkX co-occurrence graph + Pyvis HTML export
+├── assets/
+│   ├── overview.png         # Dashboard overview screenshot
+│   ├── graph.png            # Co-occurrence graph screenshot
+│   └── term_comparison.png  # Term comparison screenshot
+├── tests/
+│   └── test_core.py     # Preprocessing parity, DB round-trip, stopwords
+├── dashboard.py         # Streamlit dashboard — 4 tabs
+├── Makefile             # install / run / test / lint shortcuts
+├── requirements.txt     # Runtime dependencies
+├── pyproject.toml       # Project metadata + tooling config
+├── Dockerfile           # python:3.12-slim, non-root user
+├── .github/workflows/
+│   └── ci.yml           # Import checks + syntax + pytest on every push
+└── .env                 # Credentials — not committed
+```
+
+---
+
+## Deployment (HuggingFace Spaces)
+
+1. Push this repo to GitHub (verify `.env` and `algoscope.db` are in `.gitignore`)
+2. Go to [huggingface.co](https://huggingface.co) → New Space → Streamlit → connect this GitHub repo
+3. In Space Settings → Secrets, add `BLUESKY_HANDLE` and `BLUESKY_PASSWORD`
+4. The Space auto-deploys on every push to `main`
+
+---
+
+## Limitations & Future Work
+
+- **Bluesky-only** — the ingestion layer is modular; adding Reddit or Mastodon requires only a new adapter in `ingestion.py`
+- **Fetch-on-click** — a background ingestion loop would keep data flowing continuously without user interaction
+- **Static model** — algospeak evolves; periodic retraining or drift detection would maintain coverage over time
+- **SQLite single-writer** — replacing with PostgreSQL or Cassandra enables concurrent multi-worker ingestion
+
+---
+
+## License
+
+MIT — see [LICENSE](LICENSE)
+
+---
+
+<div align="center">
+<sub>AlgoScope · Tel Aviv University, School of CS & AI · Odeliya Charitonova · 2026</sub>
+</div>

app/__init__.py

@@ -0,0 +1 @@
+

app/database.py

@@ -0,0 +1,164 @@
+"""
+SQLite database for storing post classification results.
+
+ARCHITECTURE NOTE (interview talking point):
+All persistence is isolated in this file. No other module imports sqlite3
+directly. This means swapping SQLite for PostgreSQL or any other store
+requires changing only this one file — the rest of the codebase is
+completely unaware of how data is stored.
+"""
+
+import logging
+import os
+import sqlite3
+from typing import Any
+
+logger = logging.getLogger(__name__)
+
+_temp_dir = os.environ.get("TMPDIR")
+if not _temp_dir:
+    _temp_dir = os.environ.get("TEMP") or os.environ.get("TMP") or "/tmp"
+DB_PATH = os.environ.get(
+    "ALGOSCOPE_DB_PATH",
+    os.path.join(_temp_dir, "algoscope.db"),
+)
+
+_db_initialized = False
+
+
+def _get_connection() -> sqlite3.Connection:
+    conn = sqlite3.connect(DB_PATH)
+    conn.row_factory = sqlite3.Row
+    return conn
+
+
+def init_db() -> None:
+    """Create tables if they don't exist. Safe to call multiple times."""
+    with _get_connection() as conn:
+        conn.execute(
+            """
+            CREATE TABLE IF NOT EXISTS posts (
+                id          INTEGER PRIMARY KEY AUTOINCREMENT,
+                text        TEXT    NOT NULL,
+                label       TEXT    NOT NULL,
+                score       REAL    NOT NULL,
+                platform    TEXT    NOT NULL,
+                query_term  TEXT    NOT NULL DEFAULT '',
+                created_at  TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            )
+            """
+        )
+        try:
+            conn.execute("ALTER TABLE posts ADD COLUMN query_term TEXT NOT NULL DEFAULT ''")
+        except sqlite3.OperationalError:
+            pass
+        conn.commit()
+
+
+def _ensure_init() -> None:
+    """Initialize DB once per process, not on every call."""
+    global _db_initialized
+    if not _db_initialized:
+        init_db()
+        _db_initialized = True
+
+
+def save_post(
+    text: str,
+    label: str,
+    score: float,
+    platform: str,
+    query_term: str = "",
+) -> None:
+    """Insert a classified post into the posts table."""
+    _ensure_init()
+    with _get_connection() as conn:
+        conn.execute(
+            "INSERT INTO posts (text, label, score, platform, query_term) VALUES (?, ?, ?, ?, ?)",
+            (text, label, score, platform, query_term),
+        )
+        conn.commit()
+
+
+def get_recent_posts(limit: int = 100) -> list[dict[str, Any]]:
+    """Return the most recent posts as a list of dicts, newest first."""
+    _ensure_init()
+    with _get_connection() as conn:
+        cursor = conn.execute(
+            """
+            SELECT id, text, label, score, platform, query_term, created_at
+            FROM posts
+            ORDER BY created_at DESC
+            LIMIT ?
+            """,
+            (limit,),
+        )
+        rows = cursor.fetchall()
+    return [dict(row) for row in rows]
+
+
+def get_post_count() -> int:
+    """Return total number of posts in the DB."""
+    _ensure_init()
+    with _get_connection() as conn:
+        return conn.execute("SELECT COUNT(*) FROM posts").fetchone()[0]
+
+
+def seed_if_empty() -> None:
+    """
+    If the DB is empty (cold start or HF ephemeral filesystem wipe), fetch
+    a small batch of real posts from Bluesky and classify them so the
+    dashboard has data immediately without requiring the user to click FETCH.
+
+    WHY this is safe now (it was disabled before):
+    Previously this ran at module import time, triggering a model download
+    before uvicorn bound to port 7860, killing the container with no logs.
+    Now it is called from lifespan() AFTER the server is up and AFTER the
+    classifier has loaded. A failure here is non-fatal.
+
+    WHY 4 queries at limit=32 (not all queries at full limit):
+    Seeding is best-effort background work. ~30 posts is enough to populate
+    all dashboard widgets. Seeding all queries would add 10-30s to cold
+    start time, unacceptable for a free-tier Space that restarts often.
+    """
+    _ensure_init()
+    count = get_post_count()
+    if count > 0:
+        logger.info("seed_if_empty: DB has %d posts, skipping seed", count)
+        return
+
+    logger.info("seed_if_empty: DB is empty, seeding from Bluesky...")
+    try:
+        from app.ingestion import ALGOSPEAK_QUERIES, fetch_posts
+        from app.model import ToxicityClassifier
+
+        classifier = ToxicityClassifier()
+        if classifier._pipeline is None:
+            logger.warning("seed_if_empty: classifier not ready, skipping seed")
+            return
+
+        seed_queries = ALGOSPEAK_QUERIES[:4]
+        posts = fetch_posts(query=seed_queries[0], limit=32, queries=seed_queries)
+        if not posts:
+            logger.warning("seed_if_empty: no posts returned from Bluesky")
+            return
+
+        texts = [t for t, _ in posts]
+        timestamps = [ts for _, ts in posts]
+        predictions = classifier.predict_batch(texts)
+
+        for text, ts, pred in zip(texts, timestamps, predictions):
+            score = float(pred.get("score", 0.0) or 0.0)
+            label = "toxic" if score >= 0.70 else "non-toxic"
+            matched = next(
+                (q for q in seed_queries if q and q.lower() in text.lower()),
+                seed_queries[0],
+            )
+            save_post(text=text, label=label, score=score, platform="bluesky", query_term=matched)
+
+        logger.info("seed_if_empty: seeded %d posts", len(texts))
+    except Exception as exc:
+        # WHY catch-all: Bluesky credentials may not be set, the network may
+        # be unavailable, or the model may not have loaded. The app must start
+        # regardless - the user can always click FETCH manually.
+        logger.warning("seed_if_empty: failed (non-fatal): %s", exc)

app/graph.py

@@ -0,0 +1,211 @@
+"""
+Graph utilities for exploring algospeak co-occurrence patterns.
+
+Co-occurrence graphs are a classic NLP exploratory tool: by connecting words
+that frequently appear together, we can surface clusters of related slang
+or emergent euphemisms that would be hard to spot from raw text alone.
+"""
+
+from __future__ import annotations
+
+import re
+from itertools import combinations
+from typing import Dict, List
+
+import networkx as nx
+from pyvis.network import Network
+
+from app.database import get_recent_posts
+
+# All words to exclude from the graph. Centralizing here makes it easy to tune.
+STOPWORDS = {
+    # English function words
+    "the", "and", "or", "but", "if", "then", "else", "when", "where",
+    "what", "which", "who", "whom", "this", "that", "these", "those",
+    "a", "an", "of", "in", "on", "for", "to", "from", "by", "with",
+    "at", "as", "is", "am", "are", "was", "were", "be", "been", "being",
+    "it", "its", "he", "she", "they", "them", "we", "us", "you", "your",
+    "yours", "i", "me", "my", "mine", "our", "ours", "their", "theirs",
+    "do", "does", "did", "doing", "done", "have", "has", "had",
+    "will", "would", "can", "could", "should", "must", "may", "might",
+    "just", "like", "so", "very", "too", "not", "no", "yes",
+    "there", "here", "than", "then", "also", "even", "more", "most",
+    "get", "got", "go", "going", "say", "said", "out", "now", "day",
+    "because", "some", "people", "love", "social", "really", "while",
+    "think", "know", "want", "see", "make", "take", "come", "look",
+    "good", "new", "first", "last", "long", "great", "little", "own",
+    "right", "big", "high", "small", "large", "next", "early", "old",
+    "well", "still", "way", "every", "never", "always", "much", "need",
+    "feel", "put", "keep", "let", "ask", "seem", "show", "try", "call",
+    "back", "other", "free", "real", "best", "true", "about", "after",
+    "again", "dont", "isnt", "cant", "wont", "didnt", "doesnt", "youre",
+    "theyre", "whats", "thats", "dont", "thing", "things", "time",
+    # Spanish function words (common on Bluesky)
+    "de", "que", "con", "como", "para", "una", "uno", "los", "las",
+    "por", "del", "sus", "pero", "todo", "esta", "este", "son", "hay",
+    "nos", "han", "fue", "ser", "ver", "vez", "sin", "sobre", "entre",
+    "cuando", "bien", "solo", "puede", "tiene", "desde", "hasta",
+    # Web / file tokens
+    "jpg", "jpeg", "png", "gif", "webp", "www", "http", "https",
+    "com", "org", "net", "html", "php", "amp", "via", "bit",
+}
+
+
+def _tokenize(text: str) -> List[str]:
+    """
+    Lightweight tokenizer for short social posts.
+    Drops stopwords, short tokens, and tokens with digits.
+    """
+    text = text.lower()
+    raw_tokens = re.split(r"\W+", text)
+    tokens = []
+    for tok in raw_tokens:
+        if not tok or len(tok) <= 2:
+            continue
+        if any(ch.isdigit() for ch in tok):
+            continue
+        if tok in STOPWORDS:
+            continue
+        tokens.append(tok)
+    return tokens
+
+
+def build_cooccurrence_graph(min_cooccurrence: int = 2) -> nx.Graph:
+    """
+    Build a word co-occurrence graph from all posts in the database.
+
+    WHY co-occurrence graphs for algospeak: slang evolves in clusters.
+    'unalive' tends to appear with 'suicide', 'depression', 'mental'.
+    Mapping these clusters reveals semantic neighborhoods of evasive language
+    that a simple keyword list would miss.
+    """
+    posts = get_recent_posts(limit=10_000_000)
+
+    G = nx.Graph()
+    word_counts: Dict[str, int] = {}
+    toxic_word_counts: Dict[str, int] = {}
+
+    for row in posts:
+        text = (row.get("text") or "").strip()
+        label = (row.get("label") or "non-toxic").lower()
+        if not text:
+            continue
+        tokens = _tokenize(text)
+        if not tokens:
+            continue
+
+        # Use a set so repeated words in one post don't inflate edge weights
+        unique_words = set(tokens)
+
+        for w in unique_words:
+            word_counts[w] = word_counts.get(w, 0) + 1
+            if label == "toxic":
+                toxic_word_counts[w] = toxic_word_counts.get(w, 0) + 1
+
+        for w1, w2 in combinations(sorted(unique_words), 2):
+            if G.has_edge(w1, w2):
+                G[w1][w2]["weight"] += 1
+            else:
+                G.add_edge(w1, w2, weight=1)
+
+    # Remove weak edges and isolated nodes
+    G.remove_edges_from([
+        (u, v) for u, v, d in G.edges(data=True)
+        if d.get("weight", 0) < min_cooccurrence
+    ])
+    G.remove_nodes_from(list(nx.isolates(G)))
+
+    # Attach node metadata for visualization
+    for word, count in word_counts.items():
+        if word not in G:
+            continue
+        G.nodes[word]["count"] = count
+        G.nodes[word]["toxic_count"] = toxic_word_counts.get(word, 0)
+
+    # STEP 1: Filter to algospeak neighborhood FIRST.
+    # WHY order matters: filtering before top-30 ensures we get the most
+    # frequent *algospeak-related* words, not the most frequent generic words.
+    from app.ingestion import ALGOSPEAK_QUERIES
+    seed_words = {w for q in ALGOSPEAK_QUERIES for w in q.lower().split()}
+
+    relevant = set()
+    for seed in seed_words:
+        if seed in G:
+            relevant.add(seed)
+            relevant.update(G.neighbors(seed))
+
+    if relevant:
+        G = G.subgraph(relevant).copy()
+
+    # STEP 2: Take top 30 by frequency from the algospeak neighborhood
+    if G.number_of_nodes() > 30:
+        top_nodes = sorted(
+            G.nodes(data=True),
+            key=lambda x: x[1].get("count", 0),
+            reverse=True,
+        )[:30]
+        G = G.subgraph({n[0] for n in top_nodes}).copy()
+
+    return G
+
+
+def graph_to_pyvis(graph: nx.Graph, toxic_only: bool = False) -> str:
+    """
+    Convert a NetworkX graph into interactive Pyvis HTML.
+    Physics disabled for instant rendering (animation caused 2min load times).
+    """
+    net = Network(height="600px", width="100%", directed=False, notebook=False)
+    net.set_options('''{
+      "physics": {"enabled": false},
+      "configure": {"enabled": false},
+      "layout": {"randomSeed": 42}
+    }''')
+
+    included_nodes = set()
+    for node, data in graph.nodes(data=True):
+        count = int(data.get("count", 1) or 1)
+        toxic_count = int(data.get("toxic_count", 0) or 0)
+        toxic_ratio = toxic_count / count if count else 0.0
+
+        if toxic_only and toxic_count == 0:
+            continue
+
+        # 3-color system: red=mostly toxic, orange=mixed, green=mostly benign
+        # More informative than binary because it shows usage context gradient
+        if toxic_ratio > 0.7:
+            color = "#ff4b4b"
+        elif toxic_ratio >= 0.4:
+            color = "#ff9f43"
+        else:
+            color = "#2ecc71"
+
+        net.add_node(node, label=node, color=color, value=count)
+        included_nodes.add(node)
+
+    for u, v, data in graph.edges(data=True):
+        if u not in included_nodes or v not in included_nodes:
+            continue
+        net.add_edge(u, v, value=int(data.get("weight", 1) or 1))
+
+    # Replace local file reference that breaks in Streamlit's sandboxed iframe
+    html = net.generate_html()
+
+    import json  # noqa: F401
+    center_script = """
+    <script>
+    window.addEventListener('load', function() {
+      setTimeout(function() {
+        if (typeof network !== 'undefined') {
+          network.fit({animation: false});
+        }
+      }, 300);
+    });
+    </script>
+    """
+    html = html.replace("</body>", center_script + "</body>")
+
+    html = html.replace(
+        '<script src="lib/bindings/utils.js"></script>',
+        '<script>function neighbourhoodHighlight(){} function filterHighlight(){} function resetFilter(){}</script>'
+    )
+    return html

app/ingestion.py

@@ -0,0 +1,221 @@
+"""
+Bluesky post ingestion via the atproto library.
+"""
+
+import os
+import re
+from concurrent.futures import ThreadPoolExecutor, TimeoutError
+from typing import Any, Iterable, Optional, Set
+import logging
+
+logger = logging.getLogger(__name__)
+
+# Using multiple queries lets us cover different algospeak variants that
+# users employ to evade simple keyword filters. Centralizing them here makes
+# it easy to tune the "vocabulary" without changing the rest of the pipeline.
+ALGOSPEAK_QUERIES: list[str] = [
+    "unalive",
+    "le dollar bean",
+    "seggs",
+    "cornhole",
+    "spicy eggplant",
+    "cope harder",
+    "ratio",
+    "touch grass",
+    "based",
+    "sus",
+]
+
+# Cache the atproto client so we only pay the authentication cost once.
+# In practice this can save ~10 seconds per fetch because login requires
+# multiple network round trips, while the resulting session stays valid
+# for many minutes to hours.
+_client = None
+
+
+def get_client():
+    """Return a logged-in atproto Client, cached at module level."""
+    global _client
+    if _client is not None:
+        return _client
+
+    from atproto import Client
+
+    handle = os.environ.get("BLUESKY_HANDLE")
+    password = os.environ.get("BLUESKY_PASSWORD")
+    if not handle or not password:
+        raise RuntimeError("BLUESKY_HANDLE or BLUESKY_PASSWORD not set")
+
+    logger.info("Authenticating with Bluesky as %s", handle)
+    client = Client()
+    client.login(handle, password)
+    _client = client
+    logger.info("Bluesky authentication successful")
+    return client
+
+
+def preprocess_text(text: str) -> str:
+    """
+    Normalize text to match the training-time preprocessing.
+
+    A very common ML bug is to train with one preprocessing pipeline and
+    serve with another. Keeping train and inference transforms aligned is
+    critical; otherwise, the model is effectively seeing out-of-distribution
+    data at serving time even if it "looks" similar to humans.
+
+    Args:
+        text: Raw post text from Bluesky.
+
+    Returns:
+        Cleaned text string, or empty string if the post should be discarded.
+    """
+    if not text:
+        return ""
+
+    # Remove URLs so we don't overfit to specific domains not in training data.
+    text = re.sub(r"https?://\S+", " ", text)
+
+    # Drop non-ASCII characters (including most emojis) to mimic training preprocessing.
+    text = text.encode("ascii", errors="ignore").decode("ascii")
+
+    # Collapse repeated whitespace and trim.
+    text = re.sub(r"\s+", " ", text).strip()
+
+    # Strip hashtags before word analysis — hashtags are metadata, not content.
+    text_no_hashtags = re.sub(r"#\S+", "", text).strip()
+
+    # Filter posts with no real linguistic content (filenames, hashtag spam).
+    # WHY: These posts add noise to the model and co-occurrence graph
+    # without contributing meaningful signal about algospeak patterns.
+    NON_WORDS = {"jpg", "png", "gif", "com", "www", "http", "https", "the", "and"}
+    real_words = [
+        w for w in re.findall(r"[a-zA-Z]{3,}", text_no_hashtags)
+        if w.lower() not in NON_WORDS
+    ]
+    if len(real_words) < 3:
+        return ""
+
+    # Enforce minimum length consistent with the training filter from the paper.
+    if len(text) < 10:
+        return ""
+
+    return text
+
+
+def _dedupe_texts(texts: Iterable[tuple[str, str | None]]) -> list[tuple[str, str | None]]:
+    """
+    Deduplicate posts while preserving order.
+
+    In real moderation systems, the same content can appear multiple times
+    (reposts, quote-posts, different queries). Deduplication avoids wasting
+    model budget on identical texts and keeps metrics from being biased by
+    repeated copies of the same post.
+
+    Args:
+        texts: Iterable of text strings (may contain duplicates).
+
+    Returns:
+        List of unique strings in original order.
+    """
+    seen: Set[str] = set()
+    result: list[tuple[str, str | None]] = []
+    for text, ts in texts:
+        if text in seen:
+            continue
+        seen.add(text)
+        result.append((text, ts))
+    return result
+
+
+def fetch_posts(
+    query: str,
+    limit: int = 50,
+    queries: Optional[list[str]] = None,
+) -> list[tuple[str, str | None]]:
+    """
+    Search Bluesky for posts and return their text content.
+
+    If `queries` is provided, we search for each query term independently
+    and merge the results. This fan-out pattern covers different algospeak
+    variants without relying on a single brittle keyword.
+
+    Args:
+        query: Primary search term (used if queries is None).
+        limit: Maximum number of posts to return across all queries.
+        queries: Optional list of terms to fan out across.
+
+    Returns:
+        Deduplicated list of preprocessed post texts.
+        Returns empty list on any error (credentials, network, API).
+    """
+    all_texts: list[str] = []
+
+    def _worker() -> None:
+        """
+        Perform the actual API calls in a worker thread.
+
+        WHY a thread + timeout: if Bluesky's API hangs, the request thread
+        would block indefinitely without a timeout, degrading UX and
+        potentially exhausting the worker pool in a multi-user deployment.
+        """
+        try:
+            client = get_client()
+            query_list = queries if queries is not None else [query]
+            logger.info("Fetching posts for %d queries (limit=%d)", len(query_list), limit)
+
+            for q in query_list:
+                # Divide the total limit evenly across all queries so that the
+                # sum of per-query fetches equals the requested limit.
+                # WHY: previously every query fetched min(limit, 10) posts,
+                # so 10 queries × 10 posts = up to 100 posts regardless of
+                # what the user requested. Now 25 limit ÷ 10 queries = 2-3
+                # posts each, giving ~25 total before dedup — matching the UI.
+                per_query_limit = max(1, limit // len(query_list)) if queries is not None else limit
+                params: dict[str, Any] = {
+                    "q": q,
+                    "limit": min(max(1, per_query_limit), 100),
+                }
+                response = client.app.bsky.feed.search_posts(params=params)
+
+                if not response or not getattr(response, "posts", None):
+                    logger.warning("No results for query: %r", q)
+                    continue
+
+                for post in response.posts:
+                    record = getattr(post, "record", None)
+                    if record is None:
+                        continue
+                    raw_text = getattr(post.record, "text", None)
+                    if raw_text is None or not isinstance(raw_text, str):
+                        continue
+                    cleaned = preprocess_text(raw_text)
+                    if not cleaned:
+                        continue
+                    post_ts = getattr(post.record, "created_at", None)
+                    all_texts.append((cleaned, post_ts))
+
+            logger.info("Fetched %d posts before deduplication", len(all_texts))
+
+        except Exception as exc:
+            # WHY reset client: if auth expired the next fetch should
+            # re-authenticate from scratch, not retry with a stale session.
+            logger.error("Fetch failed: %s — resetting client", exc, exc_info=True)
+            global _client
+            _client = None
+
+    try:
+        with ThreadPoolExecutor(max_workers=1) as executor:
+            future = executor.submit(_worker)
+            try:
+                future.result(timeout=30)
+            except TimeoutError:
+                logger.warning("Bluesky fetch timed out after 30s")
+                future.cancel()
+
+        deduped = _dedupe_texts(all_texts)
+        logger.info("Returning %d posts after deduplication", len(deduped))
+        return deduped
+
+    except Exception as exc:
+        logger.error("Unexpected error in fetch_posts: %s", exc, exc_info=True)
+        return []

app/main.py

@@ -0,0 +1,297 @@
+"""
+FastAPI backend for AlgoScope toxicity detection.
+
+ARCHITECTURE NOTE (interview talking point):
+This file is the boundary between the ML layer and the outside world.
+The React frontend talks exclusively to these endpoints — it has no direct
+access to the database, the model, or the Bluesky client. That separation
+means you can swap any layer (swap SQLite for Postgres, swap the model,
+swap the frontend framework) without touching the others.
+"""
+
+import logging
+import os
+import threading
+import time
+from contextlib import asynccontextmanager
+from typing import Any
+
+from fastapi import FastAPI, Query
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+from pydantic import BaseModel
+from dotenv import load_dotenv
+
+from app.database import get_post_count, get_recent_posts, save_post, seed_if_empty
+from app.graph import build_cooccurrence_graph
+from app.ingestion import ALGOSPEAK_QUERIES, fetch_posts
+from app.model import ToxicityClassifier
+
+logger = logging.getLogger(__name__)
+
+# Load local environment variables for Bluesky credentials in development.
+load_dotenv()
+
+# WHY None here: initializing ToxicityClassifier() at module scope triggers
+# a 250MB model download before uvicorn binds to port 7860. HuggingFace Spaces
+# sees no response on the port and kills the container with no logs.
+# We initialize inside lifespan() instead, after the server is already up.
+classifier: ToxicityClassifier | None = None
+
+
+def _background_init() -> None:
+    """
+    Load the model and seed the DB in a background thread.
+
+    WHY background thread and not lifespan:
+    HuggingFace Spaces kills containers that don't respond on port 7860
+    within ~30 seconds. Loading a 250MB model + fetching Bluesky posts
+    easily exceeds that. Running both in a daemon thread lets uvicorn bind
+    immediately; the model and seed data become available a few seconds
+    later. Requests that arrive before the model is ready return default
+    predictions (non-toxic / 0.0) which is acceptable for a brief window.
+    """
+    global classifier
+    try:
+        classifier = ToxicityClassifier()
+        classifier._load_model()
+        logger.info("ToxicityClassifier ready")
+    except Exception as exc:
+        logger.warning("Model load failed — predictions will return defaults: %s", exc)
+        classifier = None
+    try:
+        seed_if_empty()
+        logger.info("DB seed check complete")
+    except Exception as exc:
+        logger.warning("Seed skipped (likely missing credentials): %s", exc)
+
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    # WHY daemon=True: daemon threads are killed automatically when the main
+    # process exits, so we don't block graceful shutdown waiting for a slow
+    # model download or Bluesky fetch.
+    t = threading.Thread(target=_background_init, daemon=True)
+    t.start()
+    logger.info("AlgoScope API starting up — model loading in background")
+    yield
+    logger.info("AlgoScope API shutting down")
+
+
+app = FastAPI(
+    title="AlgoScope API",
+    description="Real-time algospeak and toxicity detection for Bluesky posts.",
+    version="0.2.0",
+    lifespan=lifespan,
+)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+class PredictRequest(BaseModel):
+    text: str
+
+
+class PredictResponse(BaseModel):
+    label: str
+    score: float
+
+
+class FetchRequest(BaseModel):
+    queries: list[str] = ALGOSPEAK_QUERIES
+    limit: int = 25
+    threshold: float = 0.70
+
+
+class PostOut(BaseModel):
+    id: int
+    text: str
+    label: str
+    score: float
+    platform: str
+    created_at: str
+    query_term: str = ""
+
+
+@app.get("/health")
+def health() -> dict[str, str]:
+    """Liveness check — used by HuggingFace Spaces and load balancers."""
+    return {"status": "ok"}
+
+
+@app.post("/predict", response_model=PredictResponse)
+def predict(request: PredictRequest) -> dict[str, str | float]:
+    """Classify a single text as toxic or non-toxic."""
+    if classifier is None:
+        return {"label": "non-toxic", "score": 0.0}
+    logger.info("Predicting for text (len=%d)", len(request.text))
+    result = classifier.predict(request.text)
+    logger.info("Result: label=%s score=%.3f", result["label"], result["score"])
+    return {"label": result["label"], "score": result["score"]}
+
+
+@app.get("/posts")
+def get_posts(
+    limit: int = Query(default=100, ge=1, le=10000),
+) -> dict[str, Any]:
+    """Return recent posts from the database for the React frontend."""
+    rows = get_recent_posts(limit=limit)
+    for row in rows:
+        if "query_term" not in row:
+            row["query_term"] = ""
+        if not row.get("created_at"):
+            row["created_at"] = ""
+    # WHY get_post_count() instead of len(rows):
+    # rows is capped at `limit`, so len(rows) always equals min(limit, n_posts).
+    # The frontend calls GET /posts?limit=1 to get the true total for the
+    # "Posts Analyzed" counter — returning len(rows)=1 there was causing
+    # the counter to reset to 1 after every fetch.
+    return {"posts": rows, "total": get_post_count()}
+
+
+@app.post("/fetch-and-analyze")
+def fetch_and_analyze(request: FetchRequest) -> dict[str, Any]:
+    """
+    Fetch posts from Bluesky, run batch inference, save to DB, return results.
+    """
+    if classifier is None:
+        return {"posts": [], "fetch_time": 0.0, "infer_time": 0.0, "count": 0,
+                "message": "Model not loaded yet, please try again in a moment."}
+
+    logger.info(
+        "fetch-and-analyze: queries=%s limit=%d threshold=%.2f",
+        request.queries, request.limit, request.threshold,
+    )
+
+    t0 = time.time()
+    posts_text = fetch_posts(
+        query=request.queries[0] if request.queries else "unalive",
+        limit=request.limit,
+        queries=request.queries or None,
+    )
+    fetch_time = time.time() - t0
+
+    if not posts_text:
+        return {
+            "posts": [],
+            "fetch_time": fetch_time,
+            "infer_time": 0.0,
+            "count": 0,
+            "message": "No posts fetched. Check Bluesky credentials or try again.",
+        }
+
+    texts_only = [text for text, _ts in posts_text]
+    timestamps = [ts for _text, ts in posts_text]
+
+    t1 = time.time()
+    predictions = classifier.predict_batch(texts_only)
+    infer_time = time.time() - t1
+
+    batch_ts_iso = time.strftime("%Y-%m-%dT%H:%M:%S", time.gmtime())
+    result_posts: list[dict[str, Any]] = []
+
+    for i, (text, post_ts, pred) in enumerate(zip(texts_only, timestamps, predictions)):
+        score = float(pred.get("score", 0.0) or 0.0)
+        label = "toxic" if score >= request.threshold else "non-toxic"
+        matched_term = next(
+            (t for t in request.queries if t and t.lower() in text.lower()),
+            request.queries[0] if request.queries else "",
+        )
+        save_post(text=text, label=label, score=score, platform="bluesky", query_term=matched_term)
+        result_posts.append({
+            "id": int(time.time() * 1000) + i,
+            "text": text,
+            "label": label,
+            "score": score,
+            "platform": "bluesky",
+            "created_at": post_ts or batch_ts_iso,
+            "query_term": matched_term,
+        })
+
+    logger.info(
+        "fetch-and-analyze: %d posts, fetch=%.2fs infer=%.2fs",
+        len(result_posts), fetch_time, infer_time,
+    )
+
+    return {
+        "posts": result_posts,
+        "fetch_time": fetch_time,
+        "infer_time": infer_time,
+        "count": len(result_posts),
+    }
+
+
+@app.get("/graph-data")
+def graph_data(
+    min_cooccurrence: int = Query(default=2, ge=1, le=20),
+    toxic_only: bool = Query(default=False),
+) -> dict[str, Any]:
+    """Return co-occurrence graph as JSON nodes + edges."""
+    graph = build_cooccurrence_graph(min_cooccurrence=min_cooccurrence)
+
+    nodes = []
+    for node, data in graph.nodes(data=True):
+        count = int(data.get("count", 1) or 1)
+        toxic_count = int(data.get("toxic_count", 0) or 0)
+        toxic_ratio = toxic_count / count if count else 0.0
+        if toxic_only and toxic_count == 0:
+            continue
+        nodes.append({
+            "id": node,
+            "count": count,
+            "toxic_count": toxic_count,
+            "toxic_ratio": round(toxic_ratio, 3),
+        })
+
+    included = {n["id"] for n in nodes}
+    edges = [
+        {"source": u, "target": v, "weight": int(data.get("weight", 1) or 1)}
+        for u, v, data in graph.edges(data=True)
+        if u in included and v in included
+    ]
+
+    return {"nodes": nodes, "edges": edges, "node_count": len(nodes), "edge_count": len(edges)}
+
+
+@app.get("/stats")
+def stats() -> dict[str, Any]:
+    """Aggregate statistics for the Overview tab metric cards."""
+    rows = get_recent_posts(limit=100_000)
+    total = len(rows)
+    toxic = sum(1 for r in rows if (r.get("label") or "").lower() == "toxic")
+    term_counts: dict[str, int] = {}
+    for row in rows:
+        term = row.get("query_term") or ""
+        if term:
+            term_counts[term] = term_counts.get(term, 0) + 1
+    return {
+        "total_posts": total,
+        "toxic_posts": toxic,
+        "toxic_rate": round(toxic / total * 100, 2) if total else 0.0,
+        "term_counts": term_counts,
+    }
+
+
+# ── Static file serving (React build) ─────────────────────────────────────────
+_FRONTEND_DIST = os.path.join(os.path.dirname(__file__), "..", "frontend", "dist")
+
+if os.path.exists(_FRONTEND_DIST):
+    _assets_dir = os.path.join(_FRONTEND_DIST, "assets")
+    if os.path.exists(_assets_dir):
+        app.mount("/assets", StaticFiles(directory=_assets_dir), name="assets")
+
+    @app.get("/", response_class=FileResponse, include_in_schema=False)
+    def serve_frontend_root():
+        return FileResponse(os.path.join(_FRONTEND_DIST, "index.html"))
+
+    @app.get("/{full_path:path}", response_class=FileResponse, include_in_schema=False)
+    def serve_frontend_spa(full_path: str):
+        """Catch-all for React Router — prevents 404 on page refresh."""
+        return FileResponse(os.path.join(_FRONTEND_DIST, "index.html"))

app/model.py

@@ -0,0 +1,103 @@
+"""
+Toxicity classifier using the AlgoShield-Algospeak-Detection HuggingFace model.
+"""
+
+from typing import Any
+import logging
+
+logger = logging.getLogger(__name__)
+
+
+class ToxicityClassifier:
+    """
+    Wrapper around the fine-tuned DistilBERT toxicity model.
+
+    WHY lazy loading: calling _load_model() inside __init__ triggers a 250MB
+    model download at import time, before uvicorn binds to port 7860.
+    HuggingFace Spaces sees no response and kills the container with no logs.
+    Instead, main.py calls _load_model() explicitly inside lifespan(), after
+    the server is already up and logging.
+    """
+
+    def __init__(self) -> None:
+        self._pipeline = None
+
+    def _load_model(self) -> None:
+        """Load the HuggingFace pipeline. Called once by lifespan() in main.py."""
+        if self._pipeline is not None:
+            return
+
+        try:
+            import torch  # noqa: F401
+            from transformers import pipeline
+
+            logger.info("Loading AlgoShield-Algospeak-Detection model...")
+            self._pipeline = pipeline(
+                "text-classification",
+                model="odeliyach/AlgoShield-Algospeak-Detection",
+            )
+            logger.info("Model loaded successfully")
+        except Exception as exc:
+            logger.error("Failed to load model: %s", exc, exc_info=True)
+            self._pipeline = None
+
+    def predict(self, text: str) -> dict[str, Any]:
+        """Classify a single text as toxic or non-toxic."""
+        default: dict[str, Any] = {"label": "non-toxic", "score": 0.0}
+
+        if not text or not text.strip():
+            return default
+
+        try:
+            if self._pipeline is None:
+                logger.error("Pipeline is None — model was not loaded correctly")
+                return default
+
+            results = self._pipeline(text, truncation=True, max_length=512)
+            if not results:
+                return default
+
+            raw = results[0]
+            raw_label = str(raw.get("label", "")).lower()
+            raw_score = float(raw.get("score", 0.0))
+
+            if "toxic" in raw_label or raw_label in ("1", "label_1", "positive"):
+                label = "toxic"
+            else:
+                label = "non-toxic"
+
+            return {"label": label, "score": raw_score}
+
+        except Exception as exc:
+            logger.error("predict() failed: %s", exc, exc_info=True)
+            return default
+
+    def predict_batch(self, texts: list[str]) -> list[dict[str, Any]]:
+        """Classify a list of texts in a single forward pass."""
+        if not texts:
+            return []
+
+        cleaned = [t for t in texts if isinstance(t, str) and t.strip()]
+        if not cleaned or self._pipeline is None:
+            return []
+
+        try:
+            outputs = self._pipeline(cleaned, truncation=True, max_length=512)
+        except Exception as exc:
+            logger.error("predict_batch() failed: %s", exc, exc_info=True)
+            return []
+
+        results: list[dict[str, Any]] = []
+        for raw in outputs:
+            raw_label = str(raw.get("label", "")).lower()
+            raw_score = float(raw.get("score", 0.0))
+
+            if "toxic" in raw_label or raw_label in ("1", "label_1", "positive"):
+                label = "toxic"
+            else:
+                label = "non-toxic"
+
+            results.append({"label": label, "score": raw_score})
+
+        logger.info("predict_batch: classified %d texts", len(results))
+        return results

dashboard.py

@@ -0,0 +1,953 @@
+"""
+AlgoScope Streamlit dashboard for live algospeak/toxicity detection.
+"""
+
+from __future__ import annotations
+
+import time
+from collections import defaultdict
+from datetime import datetime, timedelta
+from html import escape
+
+from dotenv import load_dotenv
+import plotly.graph_objects as go
+import streamlit as st
+
+from app.database import get_recent_posts, save_post
+from app.graph import build_cooccurrence_graph, graph_to_pyvis
+from app.ingestion import ALGOSPEAK_QUERIES, fetch_posts
+from app.model import ToxicityClassifier
+
+load_dotenv()
+
+# Singleton classifier — loads once, survives all reruns.
+# DistilBERT takes ~2s to load; without this every button click reloads it.
+classifier = ToxicityClassifier()
+
+
+def _parse_dt(ts_str) -> datetime | None:
+    """
+    Safely parse a timestamp string to datetime.
+    WHY: SQLite stores timestamps as plain text with no timezone info.
+    Without explicit normalization, timezone-naive comparisons silently
+    give wrong results — a common subtle data bug in production.
+    """
+    try:
+        s = str(ts_str).replace("Z", "").replace(" ", "T")
+        return datetime.fromisoformat(s)
+    except Exception:
+        return None
+
+
+def main() -> None:
+    st.set_page_config(
+        page_title="AlgoScope — Live Algospeak Detection",
+        layout="wide",
+        initial_sidebar_state="expanded",  # WHY: prevents sidebar from starting closed
+    )
+
+    st.markdown(
+        """
+        <style>
+        [data-testid="stAppViewContainer"] { background: #0a0d14; color: #e8eaf0; }
+        [data-testid="stSidebar"] { background: #0d1120; }
+        /* Hide toolbar/menu but keep header for sidebar toggle */
+        [data-testid="stToolbar"] { display: none !important; }
+        [data-testid="stDecoration"] { display: none !important; }
+        #MainMenu { display: none !important; }
+        footer { display: none !important; }
+        /* Hide Streamlit header entirely — we use our own JS toggle button */
+        [data-testid="stHeader"] { display: none !important; }
+        [data-testid="stMain"] { overflow-y: auto !important; }
+        /* Kill every source of top-gap Streamlit adds */
+        [data-testid="block-container"],
+        [data-testid="stMainBlockContainer"],
+        .main .block-container,
+        .block-container { padding-top: 0.3rem !important; max-width: 100% !important; }
+        [data-testid="stSidebarContent"] { padding-top: 0 !important; }
+        body { color: #e8eaf0; }
+        .stButton>button {
+            background: linear-gradient(135deg, #ff4b4b, #ff8c42);
+            color: white; border: none; border-radius: 8px; font-weight: 600;
+        }
+        .stTabs [data-baseweb="tab-list"] { background: transparent; border-bottom: 1px solid #1e2540; }
+        .stTabs [data-baseweb="tab"] { color: #5a6080; background: transparent; }
+        .stTabs [aria-selected="true"] { color: #ff6b3d !important; border-bottom: 2px solid #ff6b3d !important; }
+        .algoscope-header {
+            display: flex; justify-content: space-between; align-items: center;
+            padding: 0.5rem 0 0.75rem 0;
+            border-bottom: 1px solid #1e2540; margin-bottom: 1rem;
+        }
+        .algoscope-header-left { display: flex; align-items: center; gap: 0.8rem; }
+        .algoscope-logo {
+            width: 32px; height: 32px; border-radius: 8px;
+            background: linear-gradient(135deg, #ff4b4b, #ff8c42);
+            display: flex; align-items: center; justify-content: center;
+            font-weight: 800; color: #fff; font-size: 1.1rem;
+            box-shadow: 0 0 14px rgba(255,76,76,0.45);
+        }
+        .algoscope-title-text { font-size: 1.8rem; font-weight: 800; color: #fff; line-height: 1.1; }
+        .algoscope-subtitle { font-size: 0.85rem; color: #9aa0c0; }
+        .algoscope-header-right { text-align: right; }
+        .algoscope-live {
+            display: inline-flex; align-items: center; gap: 0.35rem;
+            padding: 0.2rem 0.6rem; border-radius: 999px;
+            background: rgba(46,204,113,0.08); border: 1px solid rgba(46,204,113,0.2);
+            margin-bottom: 0.25rem;
+        }
+        .algoscope-live-dot {
+            width: 7px; height: 7px; border-radius: 50%; background: #2ecc71;
+            box-shadow: 0 0 6px rgba(46,204,113,0.9);
+            animation: blink 1.5s infinite;
+        }
+        @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0.3} }
+        .algoscope-live-text { color: #2ecc71; font-weight: 700; letter-spacing: 1px; font-size: 0.7rem; }
+        .algoscope-meta { font-size: 0.75rem; color: #6f7695; }
+        .algoscope-meta a { color: #a6b0ff; text-decoration: none; }
+        .sidebar-section-label {
+            font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1.2px;
+            color: #3a4060; margin-top: 0.5rem; margin-bottom: 0.3rem;
+        }
+        .term-row {
+            display: flex; align-items: center; justify-content: space-between;
+            background: #141826; border: 1px solid #1e2540; border-radius: 8px;
+            padding: 6px 10px; margin-bottom: 5px;
+        }
+        .term-row-left { display: flex; align-items: center; gap: 8px; font-size: 0.8rem; color: #c8cce0; }
+        .term-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+        .term-pct { font-size: 0.7rem; color: #3a4060; }
+        .card {
+            background: #0d1120; border: 1px solid #1e2540;
+            border-radius: 10px; padding: 0.75rem 0.9rem;
+        }
+        .metric-label {
+            font-size: 0.6rem; text-transform: uppercase; letter-spacing: 1px;
+            color: #3a4060; margin-bottom: 0.35rem;
+        }
+        .metric-value { font-size: 1.4rem; font-weight: 700; line-height: 1.1; }
+        .metric-sub { font-size: 0.72rem; color: #8a90ad; margin-top: 0.2rem; }
+        .post-list { max-height: 320px; overflow-y: auto; }
+        .post-card {
+            display: flex; align-items: center; gap: 0.6rem;
+            padding: 0.55rem 0.4rem; border-bottom: 1px solid #141826;
+        }
+        .score-badge {
+            min-width: 48px; text-align: center; font-size: 0.72rem;
+            font-weight: 700; border-radius: 6px; padding: 0.2rem 0.3rem; flex-shrink: 0;
+        }
+        .score-low  { background: rgba(46,204,113,0.15); color: #2ecc71; }
+        .score-mid  { background: rgba(255,159,67,0.15); color: #ff9f43; }
+        .score-high { background: rgba(255,75,75,0.18);  color: #ff4b4b; }
+        .post-text  { flex: 1; font-size: 0.78rem; color: #c8cce0; }
+        .term-pill {
+            font-size: 0.68rem; padding: 0.12rem 0.4rem; border-radius: 999px;
+            background: rgba(155,127,212,0.14); color: #c3a6ff;
+            border: 1px solid rgba(155,127,212,0.5); white-space: nowrap;
+        }
+        .custom-term-pill {
+            display: inline-flex; align-items: center; gap: 0.2rem;
+            padding: 0.1rem 0.4rem; border-radius: 999px;
+            background: rgba(155,127,212,0.1); color: #c3a6ff;
+            border: 1px solid rgba(155,127,212,0.5);
+            font-size: 0.68rem; margin: 2px 3px 0 0;
+        }
+        </style>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    # ── Header ─────────────────────────────────────────────────────────────────
+    # WHY st.components.v1.html: st.markdown strips onclick for security.
+    # components.html renders inside an iframe, so JS runs freely and can
+    # reach window.parent.document to click Streamlit's native sidebar button.
+    import streamlit.components.v1 as components
+    components.html("""
+        <style>
+        body { margin: 0; padding: 0; background: transparent; }
+        #toggle-btn {
+            position: fixed;
+            top: 8px;
+            left: 8px;
+            z-index: 999999;
+            width: 34px;
+            height: 34px;
+            background: #1a1f35;
+            border: 1px solid #2e3560;
+            border-radius: 7px;
+            color: #e8eaf0;
+            font-size: 18px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        #toggle-btn:hover { background: #252b4a; border-color: #ff6b3d; color: #ff6b3d; }
+        </style>
+        <button id="toggle-btn" onclick="
+            var d = window.parent.document;
+            var btn = d.querySelector('[data-testid=stSidebarCollapseButton] button')
+                   || d.querySelector('[data-testid=stSidebarNavCollapseButton] button')
+                   || d.querySelector('button[kind=header]');
+            if (btn) btn.click();
+        ">&#9776;</button>
+    """, height=50, scrolling=False)
+
+    st.markdown(
+        """
+        <div class="algoscope-header">
+          <div class="algoscope-header-left">
+            <div class="algoscope-logo">A</div>
+            <div>
+              <div class="algoscope-title-text">AlgoScope</div>
+              <div class="algoscope-subtitle">Real-time algospeak &amp; toxicity intelligence on Bluesky</div>
+            </div>
+          </div>
+          <div class="algoscope-header-right">
+            <div class="algoscope-live">
+              <span class="algoscope-live-dot"></span>
+              <span class="algoscope-live-text">LIVE</span>
+            </div>
+            <div class="algoscope-meta">
+              by Odeliya Charitonova <br/>
+              <a href="https://github.com/odeliyach/Algoscope" target="_blank">
+                github.com/odeliyach/Algoscope
+              </a>
+            </div>
+          </div>
+        </div>
+        """,
+        unsafe_allow_html=True,
+    )
+
+    # ── Session state init ───────────────��─────────────────────────────────────
+    # WHY session_state: Streamlit reruns the entire script on every interaction.
+    # Anything that must survive between clicks lives here.
+    defaults = {
+        "analyzed_results": [],
+        "just_fetched": False,
+        "graph_html": None,
+        "custom_terms": [],
+        "selected_queries": list(ALGOSPEAK_QUERIES[:3]),
+        "fetch_stats": None,
+        "auto_refresh_ran": False,
+        "auto_trigger_fetch": False,
+        "fetch_message": None,
+        "last_min_cooc": 3,
+        "sidebar_open": True,
+    }
+    for k, v in defaults.items():
+        if k not in st.session_state:
+            st.session_state[k] = v
+
+    # ── Sidebar ────────────────────────────────────────────────────────────────
+    with st.sidebar:
+        # ── Tracked terms display (styled pills like the mockup) ───────────────
+        st.markdown('<div class="sidebar-section-label">Tracked terms</div>', unsafe_allow_html=True)
+
+        # Build toxic-ratio per term from DB history for the sidebar display
+        history_for_terms = get_recent_posts(limit=1000)
+        term_toxic_ratio: dict[str, float] = {}
+        for term in ALGOSPEAK_QUERIES:
+            term_posts = [r for r in history_for_terms if term in (r.get("text") or "").lower()]
+            if term_posts:
+                toxic_n = sum(1 for r in term_posts if (r.get("label") or "").lower() == "toxic")
+                term_toxic_ratio[term] = toxic_n / len(term_posts)
+            else:
+                term_toxic_ratio[term] = 0.0
+
+        selected_queries = st.session_state.selected_queries
+        base_options = list(ALGOSPEAK_QUERIES)
+        extra_options = [t for t in st.session_state.custom_terms if t not in base_options]
+        all_options = base_options + extra_options
+
+        # Show styled term rows for selected terms
+        term_rows_html = []
+        for term in selected_queries:
+            ratio = term_toxic_ratio.get(term, 0.0)
+            pct = int(ratio * 100)
+            if ratio > 0.7:
+                dot_color = "#ff4b4b"
+            elif ratio >= 0.4:
+                dot_color = "#ff8c42"
+            else:
+                dot_color = "#2ecc71"
+            term_rows_html.append(f"""
+            <div class="term-row">
+              <div class="term-row-left">
+                <div class="term-dot" style="background:{dot_color};"></div>
+                <span>{escape(term)}</span>
+              </div>
+              <span class="term-pct">{pct}%</span>
+            </div>""")
+        if term_rows_html:
+            st.markdown("".join(term_rows_html), unsafe_allow_html=True)
+
+        st.markdown('<div class="sidebar-section-label">Algospeak terms</div>', unsafe_allow_html=True)
+        # WHY multiselect over checkboxes: supports the full vocabulary list
+        # and lets analysts add/remove terms without page reload.
+        selected_queries = st.multiselect(
+            "Select terms",
+            options=all_options,
+            default=st.session_state.selected_queries,
+            label_visibility="collapsed",
+        )
+        st.session_state.selected_queries = selected_queries
+
+        # Custom term input — full width input + button below
+        new_term = st.text_input("Add custom term", key="custom_term_input", label_visibility="collapsed",
+                                  placeholder="Add custom term...")
+        add_clicked = st.button("+ Add term", key="add_custom_term", use_container_width=True)
+        if add_clicked and new_term.strip():
+            term = new_term.strip().lower()
+            if term not in st.session_state.custom_terms and term not in base_options:
+                st.session_state.custom_terms.append(term)
+            if term not in st.session_state.selected_queries:
+                st.session_state.selected_queries.append(term)
+            selected_queries = st.session_state.selected_queries
+
+        if st.session_state.custom_terms:
+            pills = "".join(
+                f"<span class='custom-term-pill'>{escape(t)}</span>"
+                for t in st.session_state.custom_terms
+            )
+            st.markdown(pills, unsafe_allow_html=True)
+
+        # ── Threshold ──────────────────────────────────────────────────────────
+        st.markdown('<div class="sidebar-section-label">Threshold</div>', unsafe_allow_html=True)
+        # WHY threshold slider: separates ML policy from model. Operators tune
+        # sensitivity without retraining — standard MLOps pattern.
+        threshold = st.slider("Toxicity threshold", 0.0, 1.0, 0.7, 0.05, label_visibility="collapsed")
+
+        # ── Sampling ───────────────────────────────────────────────────────────
+        st.markdown('<div class="sidebar-section-label">Sampling</div>', unsafe_allow_html=True)
+        limit = st.slider("Number of posts", 5, 100, 25, label_visibility="collapsed")
+
+        # ── Fetch ──────────────────────────────────────────────────────────────
+        st.markdown('<div class="sidebar-section-label">Fetch</div>', unsafe_allow_html=True)
+        auto_refresh = st.checkbox("Auto-refresh (60s)", value=False)
+        fetch_button = st.button("Fetch & Analyze", type="primary", use_container_width=True)
+
+        # Auto-refresh countdown
+        if auto_refresh and not st.session_state.auto_refresh_ran and not fetch_button:
+            ph = st.empty()
+            for remaining in range(60, 0, -1):
+                ph.caption(f"Next fetch in: {remaining}s")
+                time.sleep(1)
+            st.session_state.auto_trigger_fetch = True
+            st.session_state.auto_refresh_ran = True
+            st.rerun()  # WHY st.rerun: experimental_rerun removed in Streamlit 1.34
+        if not auto_refresh:
+            st.session_state.auto_refresh_ran = False
+
+        # ── Fetch stats ────────────────────────────────────────────────────────
+        if st.session_state.fetch_stats:
+            s = st.session_state.fetch_stats
+            st.caption(f"Fetched {s['n']} posts in {s['fetch']:.1f}s · Inference: {s['infer']:.1f}s")
+
+    min_cooccurrence = st.session_state.last_min_cooc
+
+    # ── Trigger handling ───────────────────────────────────────────────────────
+    if st.session_state.auto_trigger_fetch:
+        fetch_button = True
+        st.session_state.auto_trigger_fetch = False
+
+    # ── Fetch & Analyze ────────────────────────────────────────────────────────
+    if fetch_button:
+        st.session_state.just_fetched = True
+        st.session_state.analyzed_results = []
+
+        with st.spinner("Fetching posts from Bluesky..."):
+            t0 = time.time()
+            effective_query = selected_queries[0] if selected_queries else "toxic"
+            posts = fetch_posts(query=effective_query, limit=limit, queries=selected_queries or None)
+            fetch_time = time.time() - t0
+
+        if posts:
+            t1 = time.time()
+            # WHY predict_batch: one forward pass for all posts — ~50x faster
+            # than looping predict() on CPU (measured: 0.36s vs ~18s for 50 posts).
+            predictions = classifier.predict_batch(posts)
+            infer_time = time.time() - t1
+
+            # WHY store created_at and query_term in session_state:
+            # trend alerts and export both need these fields. Without created_at,
+            # all datetime comparisons return None and alerts never fire.
+            batch_ts = datetime.utcnow().isoformat()
+            for text, pred in zip(posts, predictions):
+                score = float(pred.get("score", 0.0) or 0.0)
+                label = "toxic" if score >= threshold else "non-toxic"
+                # Identify which query term matched this post
+                matched_term = next(
+                    (t for t in (selected_queries or []) if t and t in text.lower()),
+                    selected_queries[0] if selected_queries else ""
+                )
+                save_post(text=text, label=label, score=score, platform="bluesky")
+                st.session_state.analyzed_results.append({
+                    "text": text,
+                    "label": label,
+                    "score": score,
+                    "query_term": matched_term,
+                    "created_at": batch_ts,
+                })
+
+            st.session_state.fetch_stats = {"n": len(posts), "fetch": fetch_time, "infer": infer_time}
+            st.session_state.fetch_message = ("success", f"Done! Analyzed {len(posts)} posts.")
+        else:
+            st.session_state.fetch_stats = {"n": 0, "fetch": fetch_time, "infer": 0.0}
+            st.session_state.fetch_message = ("warning", "No posts fetched. Try again or check your connection.")
+    else:
+        st.session_state.just_fetched = False
+
+
+    # ── Load data ──────────────────────────────────────────────────────────────
+    # WHY limit=10000: using 1000 capped the "Posts analyzed" metric
+    # at 1000 even when the DB had more. High limit shows the real total.
+    history = get_recent_posts(limit=10000)
+    batch_rows = st.session_state.analyzed_results
+    vocab = set(st.session_state.selected_queries or []) | set(st.session_state.custom_terms or [])
+
+    # ── Tabs ───────────────────────────────────────────────────────────────────
+    overview_tab, graph_tab, compare_tab, export_tab = st.tabs(["  Overview  ", "  Co-occurrence Graph  ", "  Term Comparison  ", "  Export  "])
+
+    with overview_tab:
+
+        # Show fetch message inside the tab (not above tabs)
+        if st.session_state.get("fetch_message"):
+            msg_type, msg_text = st.session_state.fetch_message
+            if msg_type == "success":
+                st.success(msg_text)
+            else:
+                st.warning(msg_text)
+            st.session_state.fetch_message = None
+
+        # ── Trend alerts ───────────────────────────────────────────────────────
+        # WHY: simple spike detection — if a term's toxicity rate in the last
+        # hour exceeds 80%, show a red banner. In production you'd use z-scores
+        # or CUSUM control charts; this is the lightweight portfolio version.
+        now_utc = datetime.utcnow()
+        one_hour_ago = now_utc - timedelta(hours=1)
+        alerts = []
+        all_terms_alert = list(set(st.session_state.selected_queries or []) | set(st.session_state.custom_terms or []))
+        for term in all_terms_alert:
+            recent_term = [r for r in history
+                           if term in (r.get("text") or "").lower()
+                           and _parse_dt(r.get("created_at"))
+                           and _parse_dt(r.get("created_at")) >= one_hour_ago]
+            if len(recent_term) >= 3:
+                t_rate = sum(1 for r in recent_term if (r.get("label") or "").lower() == "toxic") / len(recent_term)
+                if t_rate >= 0.80:
+                    alerts.append((term, t_rate, len(recent_term)))
+        for term, t_rate, count in alerts:
+            st.markdown(f"""<div style="background:rgba(255,75,75,0.10);border:1px solid
+                rgba(255,75,75,0.4);border-radius:10px;padding:0.6rem 1rem;
+                margin-bottom:0.5rem;display:flex;align-items:center;gap:0.7rem">
+                <span style="font-size:1.1rem">🚨</span>
+                <span style="color:#ff4b4b;font-weight:700">Spike detected:</span>
+                <span style="color:#e8eaf0"><b>{term}</b> &mdash; {t_rate*100:.0f}%
+                toxic in last hour ({count} posts)</span></div>""",
+                unsafe_allow_html=True)
+
+        # ── Metrics ────────────────────────────────────────────────────────────
+        total_posts = len(history)
+        toxic_posts = sum(1 for r in history if (r.get("label") or "").lower() == "toxic")
+        toxic_rate = (toxic_posts / total_posts * 100.0) if total_posts else 0.0
+        avg_score = (
+            sum(float(r.get("score", 0) or 0) for r in batch_rows) / len(batch_rows)
+            if batch_rows else 0.0
+        )
+
+        term_counts: dict[str, int] = defaultdict(int)
+        for row in batch_rows:
+            txt = (row.get("text") or "").lower()
+            for t in vocab:
+                if t and t in txt:
+                    term_counts[t] += 1
+        top_term = max(term_counts, key=term_counts.get) if term_counts else "—"
+
+        now = datetime.utcnow()
+        yesterday = now - timedelta(hours=24)
+        two_days_ago = now - timedelta(hours=48)
+
+        posts_today = sum(
+            1 for r in history
+            if _parse_dt(r.get("created_at")) and _parse_dt(r["created_at"]) > yesterday
+        )
+        posts_yesterday_n = sum(
+            1 for r in history
+            if _parse_dt(r.get("created_at"))
+            and two_days_ago < _parse_dt(r["created_at"]) <= yesterday
+        )
+        delta_sign = "+" if posts_today >= posts_yesterday_n else ""
+        delta_text = f"{delta_sign}{posts_today - posts_yesterday_n} vs yesterday"
+
+        # WHY compare batch vs prior history instead of today vs yesterday:
+        # All posts in the DB were fetched today, so a day-based comparison
+        # always yields delta=0. Comparing the current batch toxic rate against
+        # everything fetched before it gives a real, meaningful signal —
+        # "is this fetch more toxic than usual?"
+        batch_toxic = sum(1 for r in batch_rows if (r.get("label") or "").lower() == "toxic")
+        batch_rate = (batch_toxic / len(batch_rows) * 100.0) if batch_rows else None
+
+        prior_rows = [r for r in history if r not in batch_rows]
+        prior_toxic = sum(1 for r in prior_rows if (r.get("label") or "").lower() == "toxic")
+        prior_rate = (prior_toxic / len(prior_rows) * 100.0) if prior_rows else None
+
+        if batch_rate is not None and prior_rate is not None:
+            rate_delta = batch_rate - prior_rate
+            delta_color = "#ff4b4b" if rate_delta > 0 else "#2ecc71"
+            delta_arrow = "↑" if rate_delta > 0 else "↓"
+            rate_delta_str = f"{delta_arrow} {abs(rate_delta):.1f}% vs prior"
+        elif batch_rate is not None:
+            rate_delta_str = f"batch: {batch_rate:.1f}%"
+            delta_color = "#ff4b4b" if batch_rate >= 70 else "#ff8c42" if batch_rate >= 40 else "#2ecc71"
+        else:
+            rate_delta_str = "fetch to see delta"
+            delta_color = "#5a6080"
+
+        c1, c2, c3, c4 = st.columns(4)
+        with c1:
+            st.markdown(f"""<div class="card">
+              <div class="metric-label">Posts analyzed</div>
+              <div class="metric-value" style="color:#fff">{total_posts}</div>
+              <div class="metric-sub" style="color:#ff6b3d">+{posts_today} today &middot; {delta_text}</div>
+            </div>""", unsafe_allow_html=True)
+        with c2:
+            st.markdown(f"""<div class="card">
+              <div class="metric-label">Toxic rate</div>
+              <div class="metric-value" style="color:#ff4b4b">{toxic_rate:.1f}%</div>
+              <div class="metric-sub" style="color:{delta_color}">{rate_delta_str}</div>
+            </div>""", unsafe_allow_html=True)
+        with c3:
+            st.markdown(f"""<div class="card">
+              <div class="metric-label">Avg score (last batch)</div>
+              <div class="metric-value" style="color:#ff8c42">{avg_score:.3f}</div>
+              <div class="metric-sub">Mean toxicity from last fetch</div>
+            </div>""", unsafe_allow_html=True)
+        with c4:
+            st.markdown(f"""<div class="card">
+              <div class="metric-label">Top term</div>
+              <div class="metric-value" style="color:#9b7fd4">{escape(str(top_term))}</div>
+              <div class="metric-sub">Most frequent in last batch</div>
+            </div>""", unsafe_allow_html=True)
+
+        st.markdown("<div style='height:0.8rem'></div>", unsafe_allow_html=True)
+
+        # ── Toxicity over time + Score distribution ────────────────────────────
+        ts_col, hist_col = st.columns([3, 1])
+
+        with ts_col:
+            st.markdown("#### Toxicity over time")
+            buckets: dict = defaultdict(lambda: {"sum": 0.0, "count": 0})
+            for row in history:
+                dt = _parse_dt(row.get("created_at"))
+                if not dt:
+                    continue
+                hour = dt.replace(minute=0, second=0, microsecond=0)
+                score = float(row.get("score", 0) or 0)
+                buckets[hour]["sum"] += score
+                buckets[hour]["count"] += 1
+
+            if buckets:
+                # WHY sort by datetime key not string label: hours like "01:00"
+                # sort alphabetically before "03:00" so without proper datetime
+                # sorting the line jumps backwards across midnight, creating a
+                # visual zigzag. Sorting by the actual datetime object fixes this.
+                # WHY sort by datetime key: ensures chronological order across
+                # midnight. Using datetime objects (not strings) as the x-axis
+                # means Plotly treats it as a real time axis — no more zigzag
+                # when data spans midnight (e.g. 22:00 → 01:00 → 14:00).
+                # WHY fixed 24 buckets: previous approach only showed hours
+                # with data, causing uneven spacing and duplicate labels when
+                # data spanned midnight. A fixed 0-23 hour axis is always
+                # uniform — empty hours show as gaps in the line (connectgaps=False).
+                hour_avgs = {}
+                for dt_key, val in buckets.items():
+                    h = dt_key.hour
+                    # If same hour appears on multiple days, keep the most recent
+                    if h not in hour_avgs or dt_key > max(
+                        k for k in buckets if k.hour == h
+                    ):
+                        hour_avgs[h] = val["sum"] / val["count"]
+
+                x_labels = [f"{h:02d}:00" for h in range(24)]
+                y_vals = [hour_avgs.get(h, None) for h in range(24)]
+                point_colors = [
+                    "#2ecc71" if v is not None and v < 0.4
+                    else "#ff8c42" if v is not None and v < 0.7
+                    else "#ff4b4b" if v is not None
+                    else "rgba(0,0,0,0)"
+                    for v in y_vals
+                ]
+
+                fig = go.Figure()
+                fig.add_trace(go.Scatter(
+                    x=x_labels,
+                    y=y_vals,
+                    mode="lines+markers",
+                    connectgaps=True,
+                    line=dict(color="#ff4b4b", width=2, shape="spline"),
+                    fill="tozeroy",
+                    fillcolor="rgba(255,75,75,0.07)",
+                    marker=dict(
+                        color=point_colors,
+                        size=8,
+                        line=dict(color="#0a0d14", width=1.5),
+                    ),
+                    hovertemplate="%{x}<br>Avg score: %{y:.3f}<extra></extra>",
+                    showlegend=False,
+                ))
+                fig.update_layout(
+                    showlegend=False,
+                    margin=dict(l=10, r=10, t=10, b=10),
+                    paper_bgcolor="#0a0d14",
+                    plot_bgcolor="#0a0d14",
+                    height=220,
+                )
+                fig.update_xaxes(
+                    showgrid=False, color="#5a6080", tickfont_size=10,
+                    tickmode="array",
+                    tickvals=[f"{h:02d}:00" for h in range(0, 24, 3)],
+                    ticktext=[f"{h:02d}:00" for h in range(0, 24, 3)],
+                )
+                fig.update_yaxes(range=[0, 1], showgrid=True,
+                                  gridcolor="#1e2540", color="#5a6080", tickfont_size=10)
+                st.plotly_chart(fig, use_container_width=True)
+            else:
+                st.info("No time series data yet. Fetch posts first.")
+
+        with hist_col:
+            st.markdown("#### Score distribution")
+            scores = [float(r.get("score", 0) or 0) for r in batch_rows]
+            if scores:
+                bin_labels = ["0-0.2", "0.2-0.4", "0.4-0.6", "0.6-0.8", "0.8-1.0"]
+                bin_styles = [
+                    ("rgba(46,204,113,0.15)",  "#2ecc71"),
+                    ("rgba(163,230,53,0.15)",  "#a3e635"),
+                    ("rgba(255,235,59,0.15)",  "#ffeb3b"),
+                    ("rgba(255,140,66,0.15)",  "#ff8c42"),
+                    ("rgba(255,75,75,0.18)",   "#ff4b4b"),
+                ]
+                bins = [0.0, 0.2, 0.4, 0.6, 0.8, 1.01]
+                counts = [0] * 5
+                for s in scores:
+                    for i in range(5):
+                        if bins[i] <= s < bins[i + 1]:
+                            counts[i] += 1
+                            break
+                fig2 = go.Figure()
+                for label, count, (fill, line) in zip(bin_labels, counts, bin_styles):
+                    fig2.add_trace(go.Bar(
+                        x=[label], y=[count],
+                        marker_color=fill,
+                        marker_line_color=line,
+                        marker_line_width=1.5,
+                        hovertemplate=f"{label}: {count} posts<extra></extra>",
+                        showlegend=False,
+                    ))
+                fig2.update_layout(
+                    showlegend=False,
+                    margin=dict(l=5, r=5, t=10, b=10),
+                    paper_bgcolor="#0a0d14",
+                    plot_bgcolor="#0a0d14",
+                    height=220, bargap=0.2,
+                )
+                fig2.update_xaxes(showgrid=False, color="#5a6080", tickfont_size=9)
+                fig2.update_yaxes(showgrid=True, gridcolor="#1e2540", color="#5a6080", tickfont_size=9)
+                st.plotly_chart(fig2, use_container_width=True)
+            else:
+                st.info("Fetch posts to see score distribution.")
+
+        # ── Activity heatmap ───────────────────────────────────────────────────
+        st.markdown("#### Activity heatmap")
+        # WHY heatmap: reveals temporal patterns in toxic speech — e.g. spikes
+        # on weekends or late night — that raw numbers can't show.
+        # GitHub-style contribution grid is immediately readable to developers.
+        hm: dict = defaultdict(lambda: {"sum": 0.0, "count": 0})
+        for row in history:
+            dt = _parse_dt(row.get("created_at"))
+            if not dt:
+                continue
+            hm[(dt.weekday(), dt.hour)]["sum"] += float(row.get("score", 0) or 0)
+            hm[(dt.weekday(), dt.hour)]["count"] += 1
+
+        if hm:
+            max_avg = max(
+                (v["sum"] / v["count"] for v in hm.values() if v["count"]), default=1.0
+            ) or 1.0
+
+            days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
+            rows_html = ["<div style='display:flex;flex-direction:column;gap:3px;overflow-x:auto;'>"]
+
+            # Hour labels row
+            hour_labels = "<div style='display:flex;align-items:center;gap:2px;margin-bottom:2px;'>"
+            hour_labels += "<div style='width:36px'></div>"
+            for h in range(24):
+                label = str(h) if h % 6 == 0 else ""
+                hour_labels += f"<div style='width:18px;font-size:0.55rem;color:#3a4060;text-align:center'>{label}</div>"
+            hour_labels += "</div>"
+            rows_html.append(hour_labels)
+
+            for d_idx, day in enumerate(days):
+                row_html = "<div style='display:flex;align-items:center;gap:2px;'>"
+                row_html += f"<div style='width:36px;font-size:0.68rem;color:#5a6080;text-align:right;padding-right:6px'>{day}</div>"
+                for h in range(24):
+                    cell = hm.get((d_idx, h))
+                    if cell and cell["count"]:
+                        intensity = (cell["sum"] / cell["count"]) / max_avg
+                        r_val = int(30 + (255 - 30) * intensity)
+                        g_val = int(37 + (75 - 37) * intensity)
+                        b_val = int(64 + (75 - 64) * intensity)
+                        bg = f"rgb({r_val},{g_val},{b_val})"
+                        title = f"{day} {h:02d}:00 — avg {cell['sum']/cell['count']:.2f}"
+                    else:
+                        bg = "#1a1d2e"
+                        title = f"{day} {h:02d}:00 — no data"
+                    row_html += f"<div style='width:18px;height:18px;background:{bg};border-radius:3px;' title='{title}'></div>"
+                row_html += "</div>"
+                rows_html.append(row_html)
+
+            rows_html.append("</div>")
+            rows_html.append("""
+            <div style='margin-top:6px;display:flex;align-items:center;gap:6px;font-size:0.68rem;color:#5a6080;'>
+              <span>Low</span>
+              <div style='width:100px;height:7px;border-radius:4px;
+                background:linear-gradient(90deg,#1a1d2e,#ff4b4b);'></div>
+              <span>High toxicity</span>
+            </div>""")
+
+            st.markdown("".join(rows_html), unsafe_allow_html=True)
+        else:
+            st.info("Not enough data for heatmap yet.")
+
+        st.markdown("<div style='height:0.5rem'></div>", unsafe_allow_html=True)
+
+        # ── Recent posts ───────────────────────────────────────────────────────
+        st.markdown("#### Recent posts (last batch)")
+        if batch_rows:
+            cards_html = ["<div class='card post-list'>"]
+            for row in batch_rows[:20]:
+                text = (row.get("text") or "").strip()
+                score = float(row.get("score", 0) or 0)
+                sc = "score-high" if score >= 0.7 else ("score-mid" if score >= 0.4 else "score-low")
+                # WHY prefer stored query_term over vocab search:
+                # query_term is set at fetch time so it's always accurate.
+                # vocab search is a fallback for older rows that predate this field.
+                matched = row.get("query_term") or next((t for t in vocab if t and t in text.lower()), "—")
+                cards_html.append(f"""<div class="post-card">
+                  <div class="score-badge {sc}">{score:.3f}</div>
+                  <div class="post-text">{escape(text[:110])}</div>
+                  <div class="term-pill">{escape(matched)}</div>
+                </div>""")
+            cards_html.append("</div>")
+            st.markdown("".join(cards_html), unsafe_allow_html=True)
+        else:
+            st.info("Click 'Fetch & Analyze' to see recent posts.")
+
+    with graph_tab:
+            # Graph controls live inside the tab.
+            # WHY: we use a session_state trigger flag so the button click stores
+            # intent in session_state. On the NEXT rerun (which re-renders the tab
+            # we are already on), the flag is read and graph is built. This avoids
+            # the tab-reset issue caused by st.button triggering a full rerun.
+            info_col, ctrl_col = st.columns([3, 1])
+            with info_col:
+                st.markdown("""<div class="card" style="margin-bottom:1rem">
+                  <div class="metric-label">How to read this graph</div>
+                  <div style="font-size:0.8rem;color:#8a90ad;margin-top:0.3rem">
+                    Words that frequently appear together in algospeak posts are connected.
+                    Node size = frequency &nbsp;|&nbsp;
+                    <span style="color:#ff4b4b">red &gt;70% toxic</span> &nbsp;
+                    <span style="color:#ff9f43">orange 40-70% mixed</span> &nbsp;
+                    <span style="color:#2ecc71">green &lt;40% benign</span>
+                  </div>
+                </div>""", unsafe_allow_html=True)
+            with ctrl_col:
+                min_cooccurrence = st.slider("Min co-occurrences", 2, 10,
+                                              st.session_state.last_min_cooc, key="graph_cooc_slider")
+                _ = st.checkbox("Toxic posts only", value=False, key="toxic_only_graph")
+                if st.button("Build Graph", use_container_width=True, key="build_graph_btn"):
+                    st.session_state.build_graph_trigger = True
+                    st.session_state.build_graph_cooc = int(min_cooccurrence)
+
+            if st.session_state.get("build_graph_trigger"):
+                st.session_state.build_graph_trigger = False
+                cooc = st.session_state.get("build_graph_cooc", 3)
+                with st.spinner("Building co-occurrence graph..."):
+                    graph = build_cooccurrence_graph(min_cooccurrence=cooc)
+                st.session_state.last_min_cooc = cooc
+                if graph.number_of_nodes() == 0:
+                    st.session_state.graph_html = None
+                    st.warning("Not enough data. Fetch more posts first.")
+                else:
+                    st.session_state.graph_html = graph_to_pyvis(
+                        graph, toxic_only=st.session_state.get("toxic_only_graph", False)
+                    )
+
+            if st.session_state.graph_html:
+                st.components.v1.html(st.session_state.graph_html, height=620, scrolling=True)
+            else:
+                st.info("Adjust settings above and click 'Build Graph' to visualize word co-occurrences.")
+
+    # ── Term comparison tab ────────────────────────────────────────────────────
+    with compare_tab:
+        st.markdown("#### Compare two terms side by side")
+        st.markdown("<div style='color:#5a6080;font-size:0.82rem;margin-bottom:0.8rem'>Select two algospeak terms to compare their toxicity profiles from all stored posts.</div>", unsafe_allow_html=True)
+
+        all_opts = list(ALGOSPEAK_QUERIES) + [t for t in st.session_state.custom_terms if t not in ALGOSPEAK_QUERIES]
+        col_a, col_b = st.columns(2)
+        with col_a:
+            term_a = st.selectbox("Term A", all_opts, index=0, key="compare_a")
+        with col_b:
+            term_b = st.selectbox("Term B", all_opts, index=min(1, len(all_opts)-1), key="compare_b")
+
+        if term_a == term_b:
+            st.warning("Select two different terms to compare.")
+        else:
+            # WHY: filter history per term, then compute the same metrics used in
+            # Overview so the numbers are directly comparable side by side.
+            def term_stats(term):
+                posts = [r for r in history if term in (r.get("text") or "").lower()]
+                if not posts:
+                    return None
+                scores = [float(r.get("score", 0) or 0) for r in posts]
+                toxic_n = sum(1 for r in posts if (r.get("label") or "").lower() == "toxic")
+                return {
+                    "count": len(posts),
+                    "toxic_rate": toxic_n / len(posts) * 100,
+                    "avg_score": sum(scores) / len(scores),
+                    "max_score": max(scores),
+                    "posts": posts,
+                }
+
+            stats_a = term_stats(term_a)
+            stats_b = term_stats(term_b)
+
+            if not stats_a or not stats_b:
+                st.info("Not enough data for one or both terms. Fetch more posts first.")
+            else:
+                # Metric cards
+                ca, cb = st.columns(2)
+                for col, term, stats in [(ca, term_a, stats_a), (cb, term_b, stats_b)]:
+                    color = "#ff4b4b" if stats["toxic_rate"] >= 70 else ("#ff8c42" if stats["toxic_rate"] >= 40 else "#2ecc71")
+                    with col:
+                        st.markdown(f"""<div class="card" style="margin-bottom:0.8rem">
+                          <div style="font-size:1rem;font-weight:700;color:#e8eaf0;margin-bottom:0.5rem">"{term}"</div>
+                          <div style="display:flex;gap:1.5rem;flex-wrap:wrap">
+                            <div><div class="metric-label">Posts</div>
+                              <div class="metric-value" style="color:#a6b0ff">{stats["count"]}</div></div>
+                            <div><div class="metric-label">Toxic rate</div>
+                              <div class="metric-value" style="color:{color}">{stats["toxic_rate"]:.1f}%</div></div>
+                            <div><div class="metric-label">Avg score</div>
+                              <div class="metric-value" style="color:{color}">{stats["avg_score"]:.3f}</div></div>
+                            <div><div class="metric-label">Max score</div>
+                              <div class="metric-value" style="color:#ff4b4b">{stats["max_score"]:.3f}</div></div>
+                          </div></div>""", unsafe_allow_html=True)
+
+                # Side by side score distribution
+                st.markdown("#### Score distribution comparison")
+                bins = [0.0, 0.2, 0.4, 0.6, 0.8, 1.01]
+                bin_labels = ["0-0.2", "0.2-0.4", "0.4-0.6", "0.6-0.8", "0.8-1.0"]
+
+                def bin_scores(posts):
+                    counts = [0] * 5
+                    for r in posts:
+                        s = float(r.get("score", 0) or 0)
+                        for i in range(5):
+                            if bins[i] <= s < bins[i+1]:
+                                counts[i] += 1
+                                break
+                    return counts
+
+                counts_a = bin_scores(stats_a["posts"])
+                counts_b = bin_scores(stats_b["posts"])
+
+                fig_cmp = go.Figure()
+                fig_cmp.add_trace(go.Bar(name=term_a, x=bin_labels, y=counts_a,
+                    marker_color="rgba(166,176,255,0.2)", marker_line_color="#a6b0ff", marker_line_width=1.5))
+                fig_cmp.add_trace(go.Bar(name=term_b, x=bin_labels, y=counts_b,
+                    marker_color="rgba(255,140,66,0.2)", marker_line_color="#ff8c42", marker_line_width=1.5))
+                fig_cmp.update_layout(
+                    barmode="group", paper_bgcolor="#0a0d14", plot_bgcolor="#0a0d14",
+                    legend=dict(font=dict(color="#e8eaf0")),
+                    margin=dict(l=10, r=10, t=10, b=10), height=260,
+                )
+                fig_cmp.update_xaxes(showgrid=False, color="#5a6080")
+                fig_cmp.update_yaxes(showgrid=True, gridcolor="#1e2540", color="#5a6080")
+                st.plotly_chart(fig_cmp, use_container_width=True)
+
+    # ── Export tab ─────────────────────────────────────────────────────────────
+    with export_tab:
+        st.markdown("#### Export data")
+        st.markdown("<div style='color:#5a6080;font-size:0.82rem;margin-bottom:0.8rem'>Download posts from the current session or the full database history.</div>", unsafe_allow_html=True)
+
+        export_source = st.radio("Data source", ["Last batch (current fetch)", "Full history (all stored posts)"],
+                                  horizontal=True, key="export_source")
+        export_rows = batch_rows if export_source.startswith("Last") else history
+
+        if not export_rows:
+            st.info("No data to export yet. Fetch posts first.")
+        else:
+            import csv
+            import io
+            import json as _json
+
+            # WHY io.StringIO: lets us build the CSV entirely in memory without
+            # writing to disk — important for a stateless server environment like
+            # HuggingFace Spaces where you don't control the filesystem.
+            csv_buf = io.StringIO()
+            writer = csv.DictWriter(csv_buf, fieldnames=["text", "label", "score", "query_term", "created_at"])
+            writer.writeheader()
+            for r in export_rows:
+                writer.writerow({
+                    "text": (r.get("text") or "").replace("\n", " "),
+                    "label": r.get("label", ""),
+                    "score": f'{float(r.get("score", 0) or 0):.4f}',
+                    "query_term": r.get("query_term", ""),
+                    "created_at": r.get("created_at", ""),
+                })
+
+            json_buf = _json.dumps(export_rows, ensure_ascii=False, indent=2, default=str)
+
+            st.markdown(f"<div style='color:#5a6080;font-size:0.8rem;margin-bottom:0.6rem'>{len(export_rows)} posts ready to export</div>", unsafe_allow_html=True)
+
+            dl_csv, dl_json = st.columns(2)
+            with dl_csv:
+                st.download_button(
+                    label="Download CSV",
+                    data=csv_buf.getvalue(),
+                    file_name="algoscope_export.csv",
+                    mime="text/csv",
+                    use_container_width=True,
+                )
+            with dl_json:
+                st.download_button(
+                    label="Download JSON",
+                    data=json_buf,
+                    file_name="algoscope_export.json",
+                    mime="application/json",
+                    use_container_width=True,
+                )
+
+            # Preview table
+            st.markdown("#### Preview (first 10 rows)")
+            preview_html = ["<div class='card'><table style='width:100%;border-collapse:collapse;font-size:0.75rem'>",
+                "<tr style='color:#5a6080;border-bottom:1px solid #1e2540'>",
+                "<th style='padding:6px;text-align:left'>Score</th>",
+                "<th style='padding:6px;text-align:left'>Label</th>",
+                "<th style='padding:6px;text-align:left'>Term</th>",
+                "<th style='padding:6px;text-align:left'>Text</th></tr>"]
+            for r in export_rows[:10]:
+                score = float(r.get("score", 0) or 0)
+                sc = "score-high" if score >= 0.7 else ("score-mid" if score >= 0.4 else "score-low")
+                preview_html.append(f"""<tr style='border-bottom:1px solid #141826'>
+                    <td style='padding:5px'><span class='score-badge {sc}'>{score:.3f}</span></td>
+                    <td style='padding:5px;color:#c8cce0'>{escape(r.get("label",""))}</td>
+                    <td style='padding:5px'><span class='term-pill'>{escape(r.get("query_term",""))}</span></td>
+                    <td style='padding:5px;color:#9aa0c0'>{escape((r.get("text","") or "")[:80])}</td>
+                </tr>""")
+            preview_html.append("</table></div>")
+            st.markdown("".join(preview_html), unsafe_allow_html=True)
+
+
+if __name__ == "__main__":
+    main()

frontend/.env.development

@@ -0,0 +1,4 @@
+# WHY empty: in production, the frontend is served by the same FastAPI server
+# on port 7860. Empty VITE_API_URL means fetch() uses relative URLs (/posts,
+# /fetch-and-analyze etc.) which automatically go to the correct host.
+VITE_API_URL=

frontend/.env.production

@@ -0,0 +1,4 @@
+# WHY empty: in production, React is served by the same FastAPI process.
+# All fetch() calls use a relative URL (e.g. /posts), which resolves to
+# the same origin — no CORS, no separate server address needed.
+VITE_API_URL=

frontend/dist/assets/index-DgSDpXn3.css

@@ -0,0 +1 @@
+@media source(none){@layer theme,base,components,utilities;@layer theme{@theme default{ --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --color-red-50: oklch(97.1% .013 17.38); --color-red-100: oklch(93.6% .032 17.717); --color-red-200: oklch(88.5% .062 18.334); --color-red-300: oklch(80.8% .114 19.571); --color-red-400: oklch(70.4% .191 22.216); --color-red-500: oklch(63.7% .237 25.331); --color-red-600: oklch(57.7% .245 27.325); --color-red-700: oklch(50.5% .213 27.518); --color-red-800: oklch(44.4% .177 26.899); --color-red-900: oklch(39.6% .141 25.723); --color-red-950: oklch(25.8% .092 26.042); --color-orange-50: oklch(98% .016 73.684); --color-orange-100: oklch(95.4% .038 75.164); --color-orange-200: oklch(90.1% .076 70.697); --color-orange-300: oklch(83.7% .128 66.29); --color-orange-400: oklch(75% .183 55.934); --color-orange-500: oklch(70.5% .213 47.604); --color-orange-600: oklch(64.6% .222 41.116); --color-orange-700: oklch(55.3% .195 38.402); --color-orange-800: oklch(47% .157 37.304); --color-orange-900: oklch(40.8% .123 38.172); --color-orange-950: oklch(26.6% .079 36.259); --color-amber-50: oklch(98.7% .022 95.277); --color-amber-100: oklch(96.2% .059 95.617); --color-amber-200: oklch(92.4% .12 95.746); --color-amber-300: oklch(87.9% .169 91.605); --color-amber-400: oklch(82.8% .189 84.429); --color-amber-500: oklch(76.9% .188 70.08); --color-amber-600: oklch(66.6% .179 58.318); --color-amber-700: oklch(55.5% .163 48.998); --color-amber-800: oklch(47.3% .137 46.201); --color-amber-900: oklch(41.4% .112 45.904); --color-amber-950: oklch(27.9% .077 45.635); --color-yellow-50: oklch(98.7% .026 102.212); --color-yellow-100: oklch(97.3% .071 103.193); --color-yellow-200: oklch(94.5% .129 101.54); --color-yellow-300: oklch(90.5% .182 98.111); --color-yellow-400: oklch(85.2% .199 91.936); --color-yellow-500: oklch(79.5% .184 86.047); --color-yellow-600: oklch(68.1% .162 75.834); --color-yellow-700: oklch(55.4% .135 66.442); --color-yellow-800: oklch(47.6% .114 61.907); --color-yellow-900: oklch(42.1% .095 57.708); --color-yellow-950: oklch(28.6% .066 53.813); --color-lime-50: oklch(98.6% .031 120.757); --color-lime-100: oklch(96.7% .067 122.328); --color-lime-200: oklch(93.8% .127 124.321); --color-lime-300: oklch(89.7% .196 126.665); --color-lime-400: oklch(84.1% .238 128.85); --color-lime-500: oklch(76.8% .233 130.85); --color-lime-600: oklch(64.8% .2 131.684); --color-lime-700: oklch(53.2% .157 131.589); --color-lime-800: oklch(45.3% .124 130.933); --color-lime-900: oklch(40.5% .101 131.063); --color-lime-950: oklch(27.4% .072 132.109); --color-green-50: oklch(98.2% .018 155.826); --color-green-100: oklch(96.2% .044 156.743); --color-green-200: oklch(92.5% .084 155.995); --color-green-300: oklch(87.1% .15 154.449); --color-green-400: oklch(79.2% .209 151.711); --color-green-500: oklch(72.3% .219 149.579); --color-green-600: oklch(62.7% .194 149.214); --color-green-700: oklch(52.7% .154 150.069); --color-green-800: oklch(44.8% .119 151.328); --color-green-900: oklch(39.3% .095 152.535); --color-green-950: oklch(26.6% .065 152.934); --color-emerald-50: oklch(97.9% .021 166.113); --color-emerald-100: oklch(95% .052 163.051); --color-emerald-200: oklch(90.5% .093 164.15); --color-emerald-300: oklch(84.5% .143 164.978); --color-emerald-400: oklch(76.5% .177 163.223); --color-emerald-500: oklch(69.6% .17 162.48); --color-emerald-600: oklch(59.6% .145 163.225); --color-emerald-700: oklch(50.8% .118 165.612); --color-emerald-800: oklch(43.2% .095 166.913); --color-emerald-900: oklch(37.8% .077 168.94); --color-emerald-950: oklch(26.2% .051 172.552); --color-teal-50: oklch(98.4% .014 180.72); --color-teal-100: oklch(95.3% .051 180.801); --color-teal-200: oklch(91% .096 180.426); --color-teal-300: oklch(85.5% .138 181.071); --color-teal-400: oklch(77.7% .152 181.912); --color-teal-500: oklch(70.4% .14 182.503); --color-teal-600: oklch(60% .118 184.704); --color-teal-700: oklch(51.1% .096 186.391); --color-teal-800: oklch(43.7% .078 188.216); --color-teal-900: oklch(38.6% .063 188.416); --color-teal-950: oklch(27.7% .046 192.524); --color-cyan-50: oklch(98.4% .019 200.873); --color-cyan-100: oklch(95.6% .045 203.388); --color-cyan-200: oklch(91.7% .08 205.041); --color-cyan-300: oklch(86.5% .127 207.078); --color-cyan-400: oklch(78.9% .154 211.53); --color-cyan-500: oklch(71.5% .143 215.221); --color-cyan-600: oklch(60.9% .126 221.723); --color-cyan-700: oklch(52% .105 223.128); --color-cyan-800: oklch(45% .085 224.283); --color-cyan-900: oklch(39.8% .07 227.392); --color-cyan-950: oklch(30.2% .056 229.695); --color-sky-50: oklch(97.7% .013 236.62); --color-sky-100: oklch(95.1% .026 236.824); --color-sky-200: oklch(90.1% .058 230.902); --color-sky-300: oklch(82.8% .111 230.318); --color-sky-400: oklch(74.6% .16 232.661); --color-sky-500: oklch(68.5% .169 237.323); --color-sky-600: oklch(58.8% .158 241.966); --color-sky-700: oklch(50% .134 242.749); --color-sky-800: oklch(44.3% .11 240.79); --color-sky-900: oklch(39.1% .09 240.876); --color-sky-950: oklch(29.3% .066 243.157); --color-blue-50: oklch(97% .014 254.604); --color-blue-100: oklch(93.2% .032 255.585); --color-blue-200: oklch(88.2% .059 254.128); --color-blue-300: oklch(80.9% .105 251.813); --color-blue-400: oklch(70.7% .165 254.624); --color-blue-500: oklch(62.3% .214 259.815); --color-blue-600: oklch(54.6% .245 262.881); --color-blue-700: oklch(48.8% .243 264.376); --color-blue-800: oklch(42.4% .199 265.638); --color-blue-900: oklch(37.9% .146 265.522); --color-blue-950: oklch(28.2% .091 267.935); --color-indigo-50: oklch(96.2% .018 272.314); --color-indigo-100: oklch(93% .034 272.788); --color-indigo-200: oklch(87% .065 274.039); --color-indigo-300: oklch(78.5% .115 274.713); --color-indigo-400: oklch(67.3% .182 276.935); --color-indigo-500: oklch(58.5% .233 277.117); --color-indigo-600: oklch(51.1% .262 276.966); --color-indigo-700: oklch(45.7% .24 277.023); --color-indigo-800: oklch(39.8% .195 277.366); --color-indigo-900: oklch(35.9% .144 278.697); --color-indigo-950: oklch(25.7% .09 281.288); --color-violet-50: oklch(96.9% .016 293.756); --color-violet-100: oklch(94.3% .029 294.588); --color-violet-200: oklch(89.4% .057 293.283); --color-violet-300: oklch(81.1% .111 293.571); --color-violet-400: oklch(70.2% .183 293.541); --color-violet-500: oklch(60.6% .25 292.717); --color-violet-600: oklch(54.1% .281 293.009); --color-violet-700: oklch(49.1% .27 292.581); --color-violet-800: oklch(43.2% .232 292.759); --color-violet-900: oklch(38% .189 293.745); --color-violet-950: oklch(28.3% .141 291.089); --color-purple-50: oklch(97.7% .014 308.299); --color-purple-100: oklch(94.6% .033 307.174); --color-purple-200: oklch(90.2% .063 306.703); --color-purple-300: oklch(82.7% .119 306.383); --color-purple-400: oklch(71.4% .203 305.504); --color-purple-500: oklch(62.7% .265 303.9); --color-purple-600: oklch(55.8% .288 302.321); --color-purple-700: oklch(49.6% .265 301.924); --color-purple-800: oklch(43.8% .218 303.724); --color-purple-900: oklch(38.1% .176 304.987); --color-purple-950: oklch(29.1% .149 302.717); --color-fuchsia-50: oklch(97.7% .017 320.058); --color-fuchsia-100: oklch(95.2% .037 318.852); --color-fuchsia-200: oklch(90.3% .076 319.62); --color-fuchsia-300: oklch(83.3% .145 321.434); --color-fuchsia-400: oklch(74% .238 322.16); --color-fuchsia-500: oklch(66.7% .295 322.15); --color-fuchsia-600: oklch(59.1% .293 322.896); --color-fuchsia-700: oklch(51.8% .253 323.949); --color-fuchsia-800: oklch(45.2% .211 324.591); --color-fuchsia-900: oklch(40.1% .17 325.612); --color-fuchsia-950: oklch(29.3% .136 325.661); --color-pink-50: oklch(97.1% .014 343.198); --color-pink-100: oklch(94.8% .028 342.258); --color-pink-200: oklch(89.9% .061 343.231); --color-pink-300: oklch(82.3% .12 346.018); --color-pink-400: oklch(71.8% .202 349.761); --color-pink-500: oklch(65.6% .241 354.308); --color-pink-600: oklch(59.2% .249 .584); --color-pink-700: oklch(52.5% .223 3.958); --color-pink-800: oklch(45.9% .187 3.815); --color-pink-900: oklch(40.8% .153 2.432); --color-pink-950: oklch(28.4% .109 3.907); --color-rose-50: oklch(96.9% .015 12.422); --color-rose-100: oklch(94.1% .03 12.58); --color-rose-200: oklch(89.2% .058 10.001); --color-rose-300: oklch(81% .117 11.638); --color-rose-400: oklch(71.2% .194 13.428); --color-rose-500: oklch(64.5% .246 16.439); --color-rose-600: oklch(58.6% .253 17.585); --color-rose-700: oklch(51.4% .222 16.935); --color-rose-800: oklch(45.5% .188 13.697); --color-rose-900: oklch(41% .159 10.272); --color-rose-950: oklch(27.1% .105 12.094); --color-slate-50: oklch(98.4% .003 247.858); --color-slate-100: oklch(96.8% .007 247.896); --color-slate-200: oklch(92.9% .013 255.508); --color-slate-300: oklch(86.9% .022 252.894); --color-slate-400: oklch(70.4% .04 256.788); --color-slate-500: oklch(55.4% .046 257.417); --color-slate-600: oklch(44.6% .043 257.281); --color-slate-700: oklch(37.2% .044 257.287); --color-slate-800: oklch(27.9% .041 260.031); --color-slate-900: oklch(20.8% .042 265.755); --color-slate-950: oklch(12.9% .042 264.695); --color-gray-50: oklch(98.5% .002 247.839); --color-gray-100: oklch(96.7% .003 264.542); --color-gray-200: oklch(92.8% .006 264.531); --color-gray-300: oklch(87.2% .01 258.338); --color-gray-400: oklch(70.7% .022 261.325); --color-gray-500: oklch(55.1% .027 264.364); --color-gray-600: oklch(44.6% .03 256.802); --color-gray-700: oklch(37.3% .034 259.733); --color-gray-800: oklch(27.8% .033 256.848); --color-gray-900: oklch(21% .034 264.665); --color-gray-950: oklch(13% .028 261.692); --color-zinc-50: oklch(98.5% 0 0); --color-zinc-100: oklch(96.7% .001 286.375); --color-zinc-200: oklch(92% .004 286.32); --color-zinc-300: oklch(87.1% .006 286.286); --color-zinc-400: oklch(70.5% .015 286.067); --color-zinc-500: oklch(55.2% .016 285.938); --color-zinc-600: oklch(44.2% .017 285.786); --color-zinc-700: oklch(37% .013 285.805); --color-zinc-800: oklch(27.4% .006 286.033); --color-zinc-900: oklch(21% .006 285.885); --color-zinc-950: oklch(14.1% .005 285.823); --color-neutral-50: oklch(98.5% 0 0); --color-neutral-100: oklch(97% 0 0); --color-neutral-200: oklch(92.2% 0 0); --color-neutral-300: oklch(87% 0 0); --color-neutral-400: oklch(70.8% 0 0); --color-neutral-500: oklch(55.6% 0 0); --color-neutral-600: oklch(43.9% 0 0); --color-neutral-700: oklch(37.1% 0 0); --color-neutral-800: oklch(26.9% 0 0); --color-neutral-900: oklch(20.5% 0 0); --color-neutral-950: oklch(14.5% 0 0); --color-stone-50: oklch(98.5% .001 106.423); --color-stone-100: oklch(97% .001 106.424); --color-stone-200: oklch(92.3% .003 48.717); --color-stone-300: oklch(86.9% .005 56.366); --color-stone-400: oklch(70.9% .01 56.259); --color-stone-500: oklch(55.3% .013 58.071); --color-stone-600: oklch(44.4% .011 73.639); --color-stone-700: oklch(37.4% .01 67.558); --color-stone-800: oklch(26.8% .007 34.298); --color-stone-900: oklch(21.6% .006 56.043); --color-stone-950: oklch(14.7% .004 49.25); --color-black: #000; --color-white: #fff; --spacing: .25rem; --breakpoint-sm: 40rem; --breakpoint-md: 48rem; --breakpoint-lg: 64rem; --breakpoint-xl: 80rem; --breakpoint-2xl: 96rem; --container-3xs: 16rem; --container-2xs: 18rem; --container-xs: 20rem; --container-sm: 24rem; --container-md: 28rem; --container-lg: 32rem; --container-xl: 36rem; --container-2xl: 42rem; --container-3xl: 48rem; --container-4xl: 56rem; --container-5xl: 64rem; --container-6xl: 72rem; --container-7xl: 80rem; --text-xs: .75rem; --text-xs--line-height: calc(1 / .75); --text-sm: .875rem; --text-sm--line-height: calc(1.25 / .875); --text-base: 1rem; --text-base--line-height: 1.5 ; --text-lg: 1.125rem; --text-lg--line-height: calc(1.75 / 1.125); --text-xl: 1.25rem; --text-xl--line-height: calc(1.75 / 1.25); --text-2xl: 1.5rem; --text-2xl--line-height: calc(2 / 1.5); --text-3xl: 1.875rem; --text-3xl--line-height: 1.2 ; --text-4xl: 2.25rem; --text-4xl--line-height: calc(2.5 / 2.25); --text-5xl: 3rem; --text-5xl--line-height: 1; --text-6xl: 3.75rem; --text-6xl--line-height: 1; --text-7xl: 4.5rem; --text-7xl--line-height: 1; --text-8xl: 6rem; --text-8xl--line-height: 1; --text-9xl: 8rem; --text-9xl--line-height: 1; --font-weight-thin: 100; --font-weight-extralight: 200; --font-weight-light: 300; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold: 800; --font-weight-black: 900; --tracking-tighter: -.05em; --tracking-tight: -.025em; --tracking-normal: 0em; --tracking-wide: .025em; --tracking-wider: .05em; --tracking-widest: .1em; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; --leading-loose: 2; --radius-xs: .125rem; --radius-sm: .25rem; --radius-md: .375rem; --radius-lg: .5rem; --radius-xl: .75rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --shadow-2xs: 0 1px rgb(0 0 0 / .05); --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / .05); --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1); --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / .25); --inset-shadow-2xs: inset 0 1px rgb(0 0 0 / .05); --inset-shadow-xs: inset 0 1px 1px rgb(0 0 0 / .05); --inset-shadow-sm: inset 0 2px 4px rgb(0 0 0 / .05); --drop-shadow-xs: 0 1px 1px rgb(0 0 0 / .05); --drop-shadow-sm: 0 1px 2px rgb(0 0 0 / .15); --drop-shadow-md: 0 3px 3px rgb(0 0 0 / .12); --drop-shadow-lg: 0 4px 4px rgb(0 0 0 / .15); --drop-shadow-xl: 0 9px 7px rgb(0 0 0 / .1); --drop-shadow-2xl: 0 25px 25px rgb(0 0 0 / .15); --text-shadow-2xs: 0px 1px 0px rgb(0 0 0 / .15); --text-shadow-xs: 0px 1px 1px rgb(0 0 0 / .2); --text-shadow-sm: 0px 1px 0px rgb(0 0 0 / .075), 0px 1px 1px rgb(0 0 0 / .075), 0px 2px 2px rgb(0 0 0 / .075); --text-shadow-md: 0px 1px 1px rgb(0 0 0 / .1), 0px 1px 2px rgb(0 0 0 / .1), 0px 2px 4px rgb(0 0 0 / .1); --text-shadow-lg: 0px 1px 2px rgb(0 0 0 / .1), 0px 3px 2px rgb(0 0 0 / .1), 0px 4px 8px rgb(0 0 0 / .1); --ease-in: cubic-bezier(.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --animate-spin: spin 1s linear infinite; --animate-ping: ping 1s cubic-bezier(0, 0, .2, 1) infinite; --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; --animate-bounce: bounce 1s infinite; @keyframes spin { to { transform: rotate(360deg); } } @keyframes ping { 75%, 100% { transform: scale(2); opacity: 0; } } @keyframes pulse { 50% { opacity: .5; } } @keyframes bounce { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8, 0, 1, 1); } 50% { transform: none; animation-timing-function: cubic-bezier(0, 0, .2, 1); } } --blur-xs: 4px; --blur-sm: 8px; --blur-md: 12px; --blur-lg: 16px; --blur-xl: 24px; --blur-2xl: 40px; --blur-3xl: 64px; --perspective-dramatic: 100px; --perspective-near: 300px; --perspective-normal: 500px; --perspective-midrange: 800px; --perspective-distant: 1200px; --aspect-video: 16 / 9; --default-transition-duration: .15s; --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1); --default-font-family: --theme(--font-sans, initial); --default-font-feature-settings: --theme( --font-sans--font-feature-settings, initial ); --default-font-variation-settings: --theme( --font-sans--font-variation-settings, initial ); --default-mono-font-family: --theme(--font-mono, initial); --default-mono-font-feature-settings: --theme( --font-mono--font-feature-settings, initial ); --default-mono-font-variation-settings: --theme( --font-mono--font-variation-settings, initial ); }@theme default inline reference{ --blur: 8px; --shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1); --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / .05); --drop-shadow: 0 1px 2px rgb(0 0 0 / .1), 0 1px 1px rgb(0 0 0 / .06); --radius: .25rem; --max-width-prose: 65ch; }}@layer base{*,:after,:before,::backdrop,::file-selector-button{box-sizing:border-box;margin:0;padding:0;border:0 solid}html,:host{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:--theme(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:--theme(--default-font-feature-settings,normal);font-variation-settings:--theme(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:--theme(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:--theme(--default-mono-font-feature-settings,normal);font-variation-settings:--theme(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea,::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;border-radius:0;background-color:transparent;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]),::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{@tailwind utilities;}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@theme inline{--animation-delay-0: 0s; --animation-delay-75: 75ms; --animation-delay-100: .1s; --animation-delay-150: .15s; --animation-delay-200: .2s; --animation-delay-300: .3s; --animation-delay-500: .5s; --animation-delay-700: .7s; --animation-delay-1000: 1s; --animation-repeat-0: 0; --animation-repeat-1: 1; --animation-repeat-infinite: infinite; --animation-direction-normal: normal; --animation-direction-reverse: reverse; --animation-direction-alternate: alternate; --animation-direction-alternate-reverse: alternate-reverse; --animation-fill-mode-none: none; --animation-fill-mode-forwards: forwards; --animation-fill-mode-backwards: backwards; --animation-fill-mode-both: both; --percentage-0: 0; --percentage-5: .05; --percentage-10: .1; --percentage-15: .15; --percentage-20: .2; --percentage-25: .25; --percentage-30: .3; --percentage-35: .35; --percentage-40: .4; --percentage-45: .45; --percentage-50: .5; --percentage-55: .55; --percentage-60: .6; --percentage-65: .65; --percentage-70: .7; --percentage-75: .75; --percentage-80: .8; --percentage-85: .85; --percentage-90: .9; --percentage-95: .95; --percentage-100: 1; --percentage-translate-full: 1; --animate-in: enter var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-out: exit var(--tw-animation-duration,var(--tw-duration,.15s))var(--tw-ease,ease)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes enter { from { opacity: var(--tw-enter-opacity,1); transform: translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0)scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1))rotate(var(--tw-enter-rotate,0)); filter: blur(var(--tw-enter-blur,0)); }}@keyframes exit { to { opacity: var(--tw-exit-opacity,1); transform: translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0)scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1))rotate(var(--tw-exit-rotate,0)); filter: blur(var(--tw-exit-blur,0)); }}--animate-accordion-down: accordion-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-accordion-up: accordion-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-down: collapsible-down var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); --animate-collapsible-up: collapsible-up var(--tw-animation-duration,var(--tw-duration,.2s))var(--tw-ease,ease-out)var(--tw-animation-delay,0s)var(--tw-animation-iteration-count,1)var(--tw-animation-direction,normal)var(--tw-animation-fill-mode,none); @keyframes accordion-down { from { height: 0; }to { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }}@keyframes accordion-up { from { height: var(--radix-accordion-content-height,var(--bits-accordion-content-height,var(--reka-accordion-content-height,var(--kb-accordion-content-height,var(--ngp-accordion-content-height,auto))))); }to { height: 0; }}@keyframes collapsible-down { from { height: 0; }to { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }}@keyframes collapsible-up { from { height: var(--radix-collapsible-content-height,var(--bits-collapsible-content-height,var(--reka-collapsible-content-height,var(--kb-collapsible-content-height,auto)))); }to { height: 0; }}--animate-caret-blink: caret-blink 1.25s ease-out infinite; @keyframes caret-blink { 0%,70%,100% { opacity: 1; }20%,50% { opacity: 0; }}}@utility animation-duration-*{--tw-animation-duration: calc(--value(number)*1ms) ; --tw-animation-duration: --value(--animation-duration-*,[duration],"initial",[*]); animation-duration: calc(--value(number)*1ms) ; animation-duration: --value(--animation-duration-*,[duration],"initial",[*]);}@utility delay-*{animation-delay: calc(--value(number)*1ms) ; animation-delay: --value(--animation-delay-*,[duration],"initial",[*]); --tw-animation-delay: calc(--value(number)*1ms) ; --tw-animation-delay: --value(--animation-delay-*,[duration],"initial",[*]);}@utility repeat-*{animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]); --tw-animation-iteration-count: --value(--animation-repeat-*,number,"initial",[*]);}@utility direction-*{animation-direction: --value(--animation-direction-*,"initial",[*]); --tw-animation-direction: --value(--animation-direction-*,"initial",[*]);}@utility fill-mode-*{animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]); --tw-animation-fill-mode: --value(--animation-fill-mode-*,"initial",[*]);}@utility running{animation-play-state: running;}@utility paused{animation-play-state: paused;}@utility play-state-*{animation-play-state: --value("initial",[*]);}@utility blur-in{--tw-enter-blur: 20px;}@utility blur-in-*{--tw-enter-blur: calc(--value(number)*1px) ; --tw-enter-blur: --value(--blur-*,[*]);}@utility blur-out{--tw-exit-blur: 20px;}@utility blur-out-*{--tw-exit-blur: calc(--value(number)*1px) ; --tw-exit-blur: --value(--blur-*,[*]);}@utility fade-in{--tw-enter-opacity: 0;}@utility fade-in-*{--tw-enter-opacity: calc(--value(number)*.01) ; --tw-enter-opacity: --value(--percentage-*,[*]);}@utility fade-out{--tw-exit-opacity: 0;}@utility fade-out-*{--tw-exit-opacity: calc(--value(number)*.01) ; --tw-exit-opacity: --value(--percentage-*,[*]);}@utility zoom-in{--tw-enter-scale: 0;}@utility zoom-in-*{--tw-enter-scale: calc(--value(number)*1%) ; --tw-enter-scale: --value(ratio) ; --tw-enter-scale: --value(--percentage-*,[*]);}@utility -zoom-in-*{--tw-enter-scale: calc(--value(number)*-1%) ; --tw-enter-scale: calc(--value(ratio)*-1) ; --tw-enter-scale: --value(--percentage-*,[*]);}@utility zoom-out{--tw-exit-scale: 0;}@utility zoom-out-*{--tw-exit-scale: calc(--value(number)*1%) ; --tw-exit-scale: --value(ratio) ; --tw-exit-scale: --value(--percentage-*,[*]);}@utility -zoom-out-*{--tw-exit-scale: calc(--value(number)*-1%) ; --tw-exit-scale: calc(--value(ratio)*-1) ; --tw-exit-scale: --value(--percentage-*,[*]);}@utility spin-in{--tw-enter-rotate: 30deg;}@utility spin-in-*{--tw-enter-rotate: calc(--value(number)*1deg) ; --tw-enter-rotate: calc(--value(ratio)*360deg) ; --tw-enter-rotate: --value(--rotate-*,[*]);}@utility -spin-in{--tw-enter-rotate: -30deg;}@utility -spin-in-*{--tw-enter-rotate: calc(--value(number)*-1deg) ; --tw-enter-rotate: calc(--value(ratio)*-360deg) ; --tw-enter-rotate: --value(--rotate-*,[*]);}@utility spin-out{--tw-exit-rotate: 30deg;}@utility spin-out-*{--tw-exit-rotate: calc(--value(number)*1deg) ; --tw-exit-rotate: calc(--value(ratio)*360deg) ; --tw-exit-rotate: --value(--rotate-*,[*]);}@utility -spin-out{--tw-exit-rotate: -30deg;}@utility -spin-out-*{--tw-exit-rotate: calc(--value(number)*-1deg) ; --tw-exit-rotate: calc(--value(ratio)*-360deg) ; --tw-exit-rotate: --value(--rotate-*,[*]);}@utility slide-in-from-top{--tw-enter-translate-y: -100%;}@utility slide-in-from-top-*{--tw-enter-translate-y: --spacing(--value(integer)*-1); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%) ; --tw-enter-translate-y: calc(--value(ratio)*-100%) ; --tw-enter-translate-y: calc(--value(--translate-*,[percentage],[length])*-1) ;}@utility slide-in-from-bottom{--tw-enter-translate-y: 100%;}@utility slide-in-from-bottom-*{--tw-enter-translate-y: --spacing(--value(integer)); --tw-enter-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%) ; --tw-enter-translate-y: calc(--value(ratio)*100%) ; --tw-enter-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-left{--tw-enter-translate-x: -100%;}@utility slide-in-from-left-*{--tw-enter-translate-x: --spacing(--value(integer)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%) ; --tw-enter-translate-x: calc(--value(ratio)*-100%) ; --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1) ;}@utility slide-in-from-right{--tw-enter-translate-x: 100%;}@utility slide-in-from-right-*{--tw-enter-translate-x: --spacing(--value(integer)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%) ; --tw-enter-translate-x: calc(--value(ratio)*100%) ; --tw-enter-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-in-from-start{&:dir(ltr){ --tw-enter-translate-x: -100%; }&:dir(rtl){ --tw-enter-translate-x: 100%; }}@utility slide-in-from-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: --spacing(--value(integer)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%) ; --tw-enter-translate-x: calc(--value(ratio)*-100%) ; --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1) ; }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: --spacing(--value(integer)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%) ; --tw-enter-translate-x: calc(--value(ratio)*100%) ; --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-in-from-end{&:dir(ltr){ --tw-enter-translate-x: 100%; }&:dir(rtl){ --tw-enter-translate-x: -100%; }}@utility slide-in-from-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-enter-translate-x: --spacing(--value(integer)); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%) ; --tw-enter-translate-x: calc(--value(ratio)*100%) ; --tw-enter-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-enter-translate-x: --spacing(--value(integer)*-1); --tw-enter-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%) ; --tw-enter-translate-x: calc(--value(ratio)*-100%) ; --tw-enter-translate-x: calc(--value(--translate-*,[percentage],[length])*-1) ; }}@utility slide-out-to-top{--tw-exit-translate-y: -100%;}@utility slide-out-to-top-*{--tw-exit-translate-y: --spacing(--value(integer)*-1); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*-100%) ; --tw-exit-translate-y: calc(--value(ratio)*-100%) ; --tw-exit-translate-y: calc(--value(--translate-*,[percentage],[length])*-1) ;}@utility slide-out-to-bottom{--tw-exit-translate-y: 100%;}@utility slide-out-to-bottom-*{--tw-exit-translate-y: --spacing(--value(integer)); --tw-exit-translate-y: calc(--value(--percentage-*,--percentage-translate-*)*100%) ; --tw-exit-translate-y: calc(--value(ratio)*100%) ; --tw-exit-translate-y: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-left{--tw-exit-translate-x: -100%;}@utility slide-out-to-left-*{--tw-exit-translate-x: --spacing(--value(integer)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%) ; --tw-exit-translate-x: calc(--value(ratio)*-100%) ; --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1) ;}@utility slide-out-to-right{--tw-exit-translate-x: 100%;}@utility slide-out-to-right-*{--tw-exit-translate-x: --spacing(--value(integer)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%) ; --tw-exit-translate-x: calc(--value(ratio)*100%) ; --tw-exit-translate-x: --value(--translate-*,[percentage],[length]);}@utility slide-out-to-start{&:dir(ltr){ --tw-exit-translate-x: -100%; }&:dir(rtl){ --tw-exit-translate-x: 100%; }}@utility slide-out-to-start-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: --spacing(--value(integer)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%) ; --tw-exit-translate-x: calc(--value(ratio)*-100%) ; --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1) ; }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: --spacing(--value(integer)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%) ; --tw-exit-translate-x: calc(--value(ratio)*100%) ; --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }}@utility slide-out-to-end{&:dir(ltr){ --tw-exit-translate-x: 100%; }&:dir(rtl){ --tw-exit-translate-x: -100%; }}@utility slide-out-to-end-*{&:where(:dir(ltr),[dir="ltr"],[dir="ltr"]*){ --tw-exit-translate-x: --spacing(--value(integer)); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*100%) ; --tw-exit-translate-x: calc(--value(ratio)*100%) ; --tw-exit-translate-x: --value(--translate-*,[percentage],[length]); }&:where(:dir(rtl),[dir="rtl"],[dir="rtl"]*){ --tw-exit-translate-x: --spacing(--value(integer)*-1); --tw-exit-translate-x: calc(--value(--percentage-*,--percentage-translate-*)*-100%) ; --tw-exit-translate-x: calc(--value(ratio)*-100%) ; --tw-exit-translate-x: calc(--value(--translate-*,[percentage],[length])*-1) ; }}@source "../**/*.{js,ts,jsx,tsx}";@custom-variant dark (&:is(.dark *));:root{--font-size: 16px;--background: #ffffff;--foreground: oklch(.145 0 0);--card: #ffffff;--card-foreground: oklch(.145 0 0);--popover: oklch(1 0 0);--popover-foreground: oklch(.145 0 0);--primary: #030213;--primary-foreground: oklch(1 0 0);--secondary: oklch(.95 .0058 264.53);--secondary-foreground: #030213;--muted: #ececf0;--muted-foreground: #717182;--accent: #e9ebef;--accent-foreground: #030213;--destructive: #d4183d;--destructive-foreground: #ffffff;--border: rgba(0, 0, 0, .1);--input: transparent;--input-background: #f3f3f5;--switch-background: #cbced4;--font-weight-medium: 500;--font-weight-normal: 400;--ring: oklch(.708 0 0);--chart-1: oklch(.646 .222 41.116);--chart-2: oklch(.6 .118 184.704);--chart-3: oklch(.398 .07 227.392);--chart-4: oklch(.828 .189 84.429);--chart-5: oklch(.769 .188 70.08);--radius: .625rem;--sidebar: oklch(.985 0 0);--sidebar-foreground: oklch(.145 0 0);--sidebar-primary: #030213;--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.97 0 0);--sidebar-accent-foreground: oklch(.205 0 0);--sidebar-border: oklch(.922 0 0);--sidebar-ring: oklch(.708 0 0)}.dark{--background: oklch(.145 0 0);--foreground: oklch(.985 0 0);--card: oklch(.145 0 0);--card-foreground: oklch(.985 0 0);--popover: oklch(.145 0 0);--popover-foreground: oklch(.985 0 0);--primary: oklch(.985 0 0);--primary-foreground: oklch(.205 0 0);--secondary: oklch(.269 0 0);--secondary-foreground: oklch(.985 0 0);--muted: oklch(.269 0 0);--muted-foreground: oklch(.708 0 0);--accent: oklch(.269 0 0);--accent-foreground: oklch(.985 0 0);--destructive: oklch(.396 .141 25.723);--destructive-foreground: oklch(.637 .237 25.331);--border: oklch(.269 0 0);--input: oklch(.269 0 0);--ring: oklch(.439 0 0);--font-weight-medium: 500;--font-weight-normal: 400;--chart-1: oklch(.488 .243 264.376);--chart-2: oklch(.696 .17 162.48);--chart-3: oklch(.769 .188 70.08);--chart-4: oklch(.627 .265 303.9);--chart-5: oklch(.645 .246 16.439);--sidebar: oklch(.205 0 0);--sidebar-foreground: oklch(.985 0 0);--sidebar-primary: oklch(.488 .243 264.376);--sidebar-primary-foreground: oklch(.985 0 0);--sidebar-accent: oklch(.269 0 0);--sidebar-accent-foreground: oklch(.985 0 0);--sidebar-border: oklch(.269 0 0);--sidebar-ring: oklch(.439 0 0)}@theme inline{ --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-input-background: var(--input-background); --color-switch-background: var(--switch-background); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); }@layer base{*{@apply border-border outline-ring/50;}body{@apply bg-background text-foreground;}html{font-size:var(--font-size)}h1{font-size:var(--text-2xl);font-weight:var(--font-weight-medium);line-height:1.5}h2{font-size:var(--text-xl);font-weight:var(--font-weight-medium);line-height:1.5}h3{font-size:var(--text-lg);font-weight:var(--font-weight-medium);line-height:1.5}h4,label,button{font-size:var(--text-base);font-weight:var(--font-weight-medium);line-height:1.5}input{font-size:var(--text-base);font-weight:var(--font-weight-normal);line-height:1.5}}

frontend/dist/index.html

@@ -0,0 +1,16 @@
+
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>שיפור עיצוב עם אנימציה</title>
+      <script type="module" crossorigin src="/assets/index-CZMDWpNf.js"></script>
+      <link rel="stylesheet" crossorigin href="/assets/index-DgSDpXn3.css">
+    </head>
+
+    <body>
+      <div id="root"></div>
+    </body>
+  </html>
+  

frontend/index.html

@@ -0,0 +1,15 @@
+
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <meta charset="UTF-8" />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <title>שיפור עיצוב עם אנימציה</title>
+    </head>
+
+    <body>
+      <div id="root"></div>
+      <script type="module" src="/src/main.tsx"></script>
+    </body>
+  </html>
+  

frontend/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@figma/my-make-file",
+  "private": true,
+  "version": "0.0.1",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite"
+  },
+  "dependencies": {
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
+    "@emotion/react": "11.14.0",
+    "@emotion/styled": "11.14.1",
+    "@mui/icons-material": "7.3.5",
+    "@mui/material": "7.3.5",
+    "@popperjs/core": "2.11.8",
+    "@radix-ui/react-accordion": "1.2.3",
+    "@radix-ui/react-alert-dialog": "1.1.6",
+    "@radix-ui/react-aspect-ratio": "1.1.2",
+    "@radix-ui/react-avatar": "1.1.3",
+    "@radix-ui/react-checkbox": "1.1.4",
+    "@radix-ui/react-collapsible": "1.1.3",
+    "@radix-ui/react-context-menu": "2.2.6",
+    "@radix-ui/react-dialog": "1.1.6",
+    "@radix-ui/react-dropdown-menu": "2.1.6",
+    "@radix-ui/react-hover-card": "1.1.6",
+    "@radix-ui/react-label": "2.1.2",
+    "@radix-ui/react-menubar": "1.1.6",
+    "@radix-ui/react-navigation-menu": "1.2.5",
+    "@radix-ui/react-popover": "1.1.6",
+    "@radix-ui/react-progress": "1.1.2",
+    "@radix-ui/react-radio-group": "1.2.3",
+    "@radix-ui/react-scroll-area": "1.2.3",
+    "@radix-ui/react-select": "2.1.6",
+    "@radix-ui/react-separator": "1.1.2",
+    "@radix-ui/react-slider": "1.2.3",
+    "@radix-ui/react-slot": "1.1.2",
+    "@radix-ui/react-switch": "1.1.3",
+    "@radix-ui/react-tabs": "1.1.3",
+    "@radix-ui/react-toggle-group": "1.1.2",
+    "@radix-ui/react-toggle": "1.1.2",
+    "@radix-ui/react-tooltip": "1.1.8",
+    "canvas-confetti": "1.9.4",
+    "class-variance-authority": "0.7.1",
+    "clsx": "2.1.1",
+    "cmdk": "1.1.1",
+    "date-fns": "3.6.0",
+    "embla-carousel-react": "8.6.0",
+    "input-otp": "1.4.2",
+    "lucide-react": "0.487.0",
+    "motion": "12.23.24",
+    "next-themes": "0.4.6",
+    "react-day-picker": "8.10.1",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
+    "react-hook-form": "7.55.0",
+    "react-popper": "2.3.0",
+    "react-resizable-panels": "2.1.7",
+    "react-responsive-masonry": "2.7.1",
+    "react-router": "7.13.0",
+    "react-slick": "0.31.0",
+    "recharts": "2.15.2",
+    "sonner": "2.0.3",
+    "tailwind-merge": "3.2.0",
+    "tw-animate-css": "1.3.8",
+    "vaul": "1.1.2"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "4.1.12",
+    "@vitejs/plugin-react": "4.7.0",
+    "tailwindcss": "4.1.12",
+    "vite": "6.3.5"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "6.3.5"
+    },
+    "onlyBuiltDependencies": ["@tailwindcss/oxide", "esbuild"]
+  }
+}

frontend/postcss.config.mjs

@@ -0,0 +1,15 @@
+/**
+ * PostCSS Configuration
+ *
+ * Tailwind CSS v4 (via @tailwindcss/vite) automatically sets up all required
+ * PostCSS plugins — you do NOT need to include `tailwindcss` or `autoprefixer` here.
+ *
+ * This file only exists for adding additional PostCSS plugins, if needed.
+ * For example:
+ *
+ * import postcssNested from 'postcss-nested'
+ * export default { plugins: [postcssNested()] }
+ *
+ * Otherwise, you can leave this file empty.
+ */
+export default {}

frontend/src/app/App.tsx

@@ -0,0 +1,333 @@
+import { useState, useCallback, useEffect } from "react";
+// AlgoScope dashboard — v2 (custom charts, no Recharts)
+import { motion, AnimatePresence } from "motion/react";
+import { Header } from "./components/Header";
+import { Sidebar } from "./components/Sidebar";
+import { OverviewTab } from "./components/OverviewTab";
+import { CoOccurrenceGraph } from "./components/CoOccurrenceGraph";
+import { TermComparisonTab } from "./components/TermComparisonTab";
+import { ExportTab } from "./components/ExportTab";
+import { SplashScreen } from "./components/SplashScreen";
+import {
+  apiFetchPosts,
+  apiFetchAndAnalyze,
+  apiFetchTotal,
+  generateMockPosts,
+  ALGOSPEAK_TERMS,
+  Post,
+} from "./components/mockData";
+
+// WHY empty initial state instead of mock data:
+// We fetch real posts from the backend in the useEffect below. Starting with
+// an empty array avoids a flash of mock data before real data arrives.
+const EMPTY_POSTS: Post[] = [];
+
+const TABS = [
+  { id: "overview",   label: "Overview" },
+  { id: "graph",      label: "Co-occurrence Graph" },
+  { id: "compare",    label: "Term Comparison" },
+  { id: "export",     label: "Export" },
+];
+
+export default function App() {
+  const [showSplash, setShowSplash] = useState(true);
+  const [sidebarOpen, setSidebarOpen] = useState(true);
+  const [activeTab, setActiveTab] = useState("overview");
+
+  // Sidebar state
+  const [selectedTerms, setSelectedTerms] = useState(ALGOSPEAK_TERMS.slice(0, 4));
+  const [threshold, setThreshold] = useState(0.70);
+  const [sampling, setSampling] = useState(25);
+  const [autoRefresh, setAutoRefresh] = useState(false);
+
+  // Data
+  const [allPosts, setAllPosts] = useState<Post[]>(EMPTY_POSTS);
+  const [batchPosts, setBatchPosts] = useState<Post[]>(EMPTY_POSTS);
+  const [fetching, setFetching] = useState(false);
+  const [justFetched, setJustFetched] = useState(false);
+  const [fetchError, setFetchError] = useState<string | null>(null);
+  // WHY separate counter instead of allPosts.length:
+  // allPosts is capped at 500 and deduplicates by id, so it can go DOWN
+  // when new posts replace old ones. totalAnalyzed is a monotonically
+  // increasing sum — the true count of posts ever processed this session.
+  const [totalAnalyzed, setTotalAnalyzed] = useState(0);
+
+  // Graph controls
+  const [minCooccurrence, setMinCooccurrence] = useState(3);
+  const [toxicOnly, setToxicOnly] = useState(false);
+
+  // ── Load initial posts from backend on mount ────────────────────────────────
+  // WHY useEffect + apiFetchPosts:
+  // On mount we call GET /posts to populate the dashboard with whatever the
+  // server already has (either seeded posts from cold start, or posts from
+  // previous sessions). This replaces the old `generateMockPosts()` call.
+  //
+  // WHY fallback to mock data on error:
+  // If the backend is unavailable (local dev without FastAPI running), we fall
+  // back to mock data so the UI is still usable. This is dev-only behaviour;
+  // in production the frontend and backend are served from the same process.
+  useEffect(() => {
+    let cancelled = false;
+    async function loadInitial() {
+      try {
+        const posts = await apiFetchPosts(200);
+        if (cancelled) return;
+        if (posts.length > 0) {
+          setAllPosts(posts);
+          setBatchPosts(posts.slice(0, 25));
+          // WHY set totalAnalyzed from DB count on mount:
+          // The counter starts at 0 but the DB already has posts from previous
+          // sessions. Without this, the display jumps DOWN from 200 (DB load)
+          // to 25 (first fetch) because totalAnalyzed || totalPosts picks
+          // totalPosts on load, then switches to the smaller totalAnalyzed.
+          setTotalAnalyzed(posts.length);
+        } else {
+          // Backend is healthy but DB is empty — show mock data as a placeholder
+          const mock = generateMockPosts(ALGOSPEAK_TERMS.slice(0, 4), 30);
+          setAllPosts(mock);
+          setBatchPosts(mock.slice(0, 25));
+        }
+      } catch {
+        if (cancelled) return;
+        // Backend unreachable — fall back to mock data for dev/offline use
+        const mock = generateMockPosts(ALGOSPEAK_TERMS.slice(0, 4), 30);
+        setAllPosts(mock);
+        setBatchPosts(mock.slice(0, 25));
+      }
+    }
+    loadInitial();
+    return () => { cancelled = true; };
+  }, []);
+
+  // ── Fetch & Analyze handler ─────────────────────────────────────────────────
+  // WHY apiFetchAndAnalyze instead of generateMockPosts:
+  // This calls POST /fetch-and-analyze which fetches real Bluesky posts,
+  // runs batch DistilBERT inference, saves them to SQLite, and returns results.
+  const handleFetch = useCallback(async () => {
+    setFetching(true);
+    setJustFetched(false);
+    setFetchError(null);
+    try {
+      const { posts: newBatch, message } = await apiFetchAndAnalyze(
+        selectedTerms.length ? selectedTerms : ALGOSPEAK_TERMS,
+        sampling,
+        threshold,
+      );
+
+      if (newBatch.length === 0) {
+        setFetchError(message ?? "No posts fetched from Bluesky. Check credentials and try again.");
+        setJustFetched(true);
+        return;
+      }
+
+      setBatchPosts(newBatch);
+      setAllPosts(prev => {
+        const idSet = new Set(newBatch.map(p => String(p.id)));
+        const filtered = prev.filter(p => !idSet.has(String(p.id)));
+        return [...newBatch, ...filtered].slice(0, 500);
+      });
+      // WHY fetch total from DB instead of computing locally:
+      // Any local computation (trulyNew, c => c + n) suffers from stale
+      // closures inside useCallback — allPosts captured at creation time is
+      // never the latest value, so the counter stops accumulating after the
+      // first fetch. The DB is the only source of truth for how many posts
+      // have ever been analyzed. One extra GET /posts?limit=1 call (tiny)
+      // gives us the exact real count with zero closure risk.
+      const dbTotal = await apiFetchTotal();
+      if (dbTotal >= 0) setTotalAnalyzed(dbTotal);
+      setJustFetched(true);
+    } catch (err) {
+      const msg = err instanceof Error ? err.message : "Fetch failed";
+      setFetchError(msg);
+      // Fallback: generate mock data so the UI doesn't go blank
+      const mock = generateMockPosts(selectedTerms.length ? selectedTerms : ALGOSPEAK_TERMS, sampling);
+      setBatchPosts(mock);
+      setAllPosts(prev => [...mock, ...prev].slice(0, 500));
+      setJustFetched(true);
+    } finally {
+      setFetching(false);
+    }
+  }, [selectedTerms, sampling, threshold]);
+
+  return (
+    <>
+      {showSplash && <SplashScreen onDone={() => setShowSplash(false)} />}
+      <div
+        style={{
+          width: "100vw",
+          minHeight: "100vh",
+          background: "#0a0d14",
+          display: "flex",
+          flexDirection: "column",
+          overflowY: "auto",
+          overflowX: "hidden",
+          fontFamily: "system-ui, -apple-system, sans-serif",
+          color: "#e8eaf0",
+        }}
+      >
+        {/* Header */}
+        <Header onToggleSidebar={() => setSidebarOpen(v => !v)} sidebarOpen={sidebarOpen} />
+
+        {/* Body */}
+        <div style={{ flex: 1, display: "flex", overflow: "visible", minHeight: 0 }}>
+          {/* Sidebar */}
+          <Sidebar
+            open={sidebarOpen}
+            selectedTerms={selectedTerms}
+            setSelectedTerms={setSelectedTerms}
+            threshold={threshold}
+            setThreshold={setThreshold}
+            sampling={sampling}
+            setSampling={setSampling}
+            autoRefresh={autoRefresh}
+            setAutoRefresh={setAutoRefresh}
+            onFetch={handleFetch}
+            posts={allPosts}
+            fetching={fetching}
+          />
+
+          {/* Main content */}
+          <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "visible", minHeight: 0 }}>
+            {/* Tabs nav */}
+            <div
+              style={{
+                display: "flex",
+                borderBottom: "1px solid #1e2540",
+                background: "#0a0d14",
+                paddingInline: "1.4rem",
+                gap: "0.25rem",
+                flexShrink: 0,
+              }}
+            >
+              {TABS.map(tab => {
+                const active = tab.id === activeTab;
+                return (
+                  <button
+                    key={tab.id}
+                    onClick={() => setActiveTab(tab.id)}
+                    style={{
+                      background: "transparent",
+                      border: "none",
+                      borderBottom: active ? "2px solid #ff6b3d" : "2px solid transparent",
+                      color: active ? "#ff6b3d" : "#5a6080",
+                      fontSize: "0.82rem",
+                      padding: "0.65rem 0.9rem",
+                      cursor: "pointer",
+                      fontWeight: active ? 600 : 400,
+                      transition: "color 0.2s, border-color 0.2s",
+                      whiteSpace: "nowrap",
+                    }}
+                    onMouseEnter={e => {
+                      if (!active) (e.currentTarget as HTMLButtonElement).style.color = "#9aa0c0";
+                    }}
+                    onMouseLeave={e => {
+                      if (!active) (e.currentTarget as HTMLButtonElement).style.color = "#5a6080";
+                    }}
+                  >
+                    {tab.label}
+                  </button>
+                );
+              })}
+
+              {/* Status toast — shows fetch success or error */}
+              <AnimatePresence>
+                {justFetched && !fetchError && (
+                  <motion.div
+                    initial={{ opacity: 0, x: 20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: 20 }}
+                    transition={{ duration: 0.3 }}
+                    style={{
+                      marginLeft: "auto",
+                      alignSelf: "center",
+                      fontSize: "0.72rem",
+                      padding: "4px 10px",
+                      borderRadius: 999,
+                      background: "rgba(46,204,113,0.1)",
+                      border: "1px solid rgba(46,204,113,0.25)",
+                      color: "#2ecc71",
+                    }}
+                  >
+                    ✓ Done! Analyzed {batchPosts.length} posts
+                  </motion.div>
+                )}
+                {justFetched && fetchError && (
+                  <motion.div
+                    initial={{ opacity: 0, x: 20 }}
+                    animate={{ opacity: 1, x: 0 }}
+                    exit={{ opacity: 0, x: 20 }}
+                    transition={{ duration: 0.3 }}
+                    style={{
+                      marginLeft: "auto",
+                      alignSelf: "center",
+                      fontSize: "0.72rem",
+                      padding: "4px 10px",
+                      borderRadius: 999,
+                      background: "rgba(255,75,75,0.1)",
+                      border: "1px solid rgba(255,75,75,0.25)",
+                      color: "#ff6b3d",
+                    }}
+                  >
+                    ⚠ API unavailable — showing mock data
+                  </motion.div>
+                )}
+              </AnimatePresence>
+            </div>
+
+            {/* Tab content */}
+            <div style={{ flex: 1, overflow: "visible", minHeight: 0 }}>
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={activeTab}
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -8 }}
+                  transition={{ duration: 0.25 }}
+                  style={{ minHeight: "100%" }}
+                >
+                  {activeTab === "overview" && (
+                    <OverviewTab
+                      posts={allPosts}
+                      batchPosts={batchPosts}
+                      selectedTerms={selectedTerms}
+                      justFetched={justFetched}
+                      totalAnalyzed={totalAnalyzed}
+                    />
+                  )}
+                  {activeTab === "graph" && (
+                    <CoOccurrenceGraph
+                      minCooccurrence={minCooccurrence}
+                      setMinCooccurrence={setMinCooccurrence}
+                      toxicOnly={toxicOnly}
+                      setToxicOnly={setToxicOnly}
+                    />
+                  )}
+                  {activeTab === "compare" && (
+                    <TermComparisonTab posts={allPosts} />
+                  )}
+                  {activeTab === "export" && (
+                    <ExportTab posts={allPosts} />
+                  )}
+                </motion.div>
+              </AnimatePresence>
+            </div>
+          </div>
+        </div>
+
+        <style>{`
+          * { box-sizing: border-box; }
+          ::-webkit-scrollbar { width: 5px; height: 5px; }
+          ::-webkit-scrollbar-track { background: #0d1120; }
+          ::-webkit-scrollbar-thumb { background: #1e2540; border-radius: 3px; }
+          ::-webkit-scrollbar-thumb:hover { background: #2e3560; }
+          input[type=range] { appearance: none; height: 4px; border-radius: 2px; background: #1e2540; outline: none; }
+          input[type=range]::-webkit-slider-thumb {
+            appearance: none; width: 14px; height: 14px; border-radius: 50%;
+            background: #ff4b4b; cursor: pointer; border: 2px solid #0a0d14;
+          }
+          select option { background: #141826; color: #e8eaf0; }
+        `}</style>
+      </div>
+    </>
+  );
+}

frontend/src/app/components/CoOccurrenceGraph.tsx

@@ -0,0 +1,609 @@
+import { useEffect, useRef, useState, useCallback, useMemo, Component } from "react";
+import { motion } from "motion/react";
+import { nodeColor, apiGetGraphData, GraphNode, GraphEdge } from "./mockData";
+
+// ── Types ──────────────────────────────────────────────────────────────────────
+interface SimNode {
+  id: string;
+  x: number;
+  y: number;
+  vx: number;
+  vy: number;
+  frequency: number;
+  toxicRatio: number;
+}
+
+interface Props {
+  minCooccurrence: number;
+  setMinCooccurrence: (v: number) => void;
+  toxicOnly: boolean;
+  setToxicOnly: (v: boolean) => void;
+}
+
+// ── Constants ──────────────────────────────────────────────────────────────────
+const W = 820;
+const H = 540;
+// WHY increased REPULSION + reduced SPRING for real data:
+// Mock data had ~6 nodes with low edge weights. Real data has 20-30 nodes
+// where a hub like "unalive" has 17 edges — the combined spring pull
+// overwhelmed repulsion and collapsed the graph into one blob.
+// Higher REPULSION (6000) pushes nodes apart more aggressively,
+// lower SPRING (0.018) reduces the per-edge pull so a hub with 17 edges
+// doesn't dominate. EDGE_LEN increased so nodes have more breathing room.
+const REPULSION = 6000;
+const SPRING = 0.018;
+const EDGE_LEN = 180;
+const GRAVITY = 0.008;
+const DAMPING = 0.82;
+const CENTER_X = W / 2;
+const CENTER_Y = H / 2;
+
+// ── Error Boundary ─────────────────────────────────────────────────────────────
+interface EBState { hasError: boolean; error?: string }
+class GraphErrorBoundary extends Component<{ children: React.ReactNode }, EBState> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+  static getDerivedStateFromError(err: Error): EBState {
+    return { hasError: true, error: err.message };
+  }
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{
+          margin: "1.5rem",
+          background: "rgba(255,75,75,0.07)",
+          border: "1px solid rgba(255,75,75,0.2)",
+          borderRadius: 10,
+          padding: "1.5rem",
+          textAlign: "center",
+        }}>
+          <div style={{ color: "#ff4b4b", fontSize: "0.9rem", marginBottom: 8 }}>
+            ⚠ Graph failed to render
+          </div>
+          <div style={{ color: "#5a6080", fontSize: "0.75rem" }}>
+            {this.state.error || "Unknown error"}
+          </div>
+          <button
+            onClick={() => this.setState({ hasError: false })}
+            style={{
+              marginTop: 12,
+              background: "rgba(255,75,75,0.12)",
+              border: "1px solid rgba(255,75,75,0.3)",
+              borderRadius: 7,
+              color: "#ff6b3d",
+              padding: "5px 14px",
+              cursor: "pointer",
+              fontSize: "0.78rem",
+            }}
+          >
+            Retry
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+// ── Physics hook ───────────────────────────────────────────────────────────────
+function safeNum(v: number, fallback = 0): number {
+  return isFinite(v) && !isNaN(v) ? v : fallback;
+}
+
+function useForceSimulation(
+  nodeConfigs: GraphNode[],
+  edges: GraphEdge[],
+  nodeKey: string,
+) {
+  const nodesRef = useRef<SimNode[]>([]);
+  const [positions, setPositions] = useState<SimNode[]>([]);
+  const rafRef = useRef<number>(0);
+  const edgesRef = useRef(edges);
+  edgesRef.current = edges;
+  const activeRef = useRef(false);
+
+  const run = useCallback(() => {
+    if (!activeRef.current) return;
+    const ns = nodesRef.current;
+    if (!ns.length) return;
+    const es = edgesRef.current;
+
+    try {
+      // Repulsion
+      for (let i = 0; i < ns.length; i++) {
+        for (let j = i + 1; j < ns.length; j++) {
+          const dx = (ns[i].x - ns[j].x) || 0.5;
+          const dy = (ns[i].y - ns[j].y) || 0.5;
+          const dist2 = Math.max(0.01, dx * dx + dy * dy);
+          const dist = Math.sqrt(dist2);
+          const force = REPULSION / dist2;
+          const fx = safeNum((dx / dist) * force);
+          const fy = safeNum((dy / dist) * force);
+          ns[i].vx += fx;
+          ns[i].vy += fy;
+          ns[j].vx -= fx;
+          ns[j].vy -= fy;
+        }
+      }
+
+      // Spring edges
+      for (const e of es) {
+        const s = ns.find(n => n.id === e.source);
+        const t = ns.find(n => n.id === e.target);
+        if (!s || !t) continue;
+        const dx = t.x - s.x;
+        const dy = t.y - s.y;
+        const dist = Math.sqrt(dx * dx + dy * dy) || 1;
+        // WHY Math.min cap: with real data edge weights can be 50–500+
+        // (co-occurrence count across hundreds of posts). Without capping,
+        // naturalLen collapses to ~3px, pulling all nodes into a single blob.
+        // Capping at 8 keeps naturalLen in the range 115–140px regardless of
+        // how large the real-data weights get.
+        const naturalLen = EDGE_LEN / (1 + Math.min(e.weight, 8) * 0.04);
+        const force = (dist - naturalLen) * SPRING;
+        const fx = safeNum((dx / dist) * force);
+        const fy = safeNum((dy / dist) * force);
+        s.vx += fx;
+        s.vy += fy;
+        t.vx -= fx;
+        t.vy -= fy;
+      }
+
+      // Gravity + integrate
+      for (const n of ns) {
+        n.vx = safeNum(n.vx + (CENTER_X - n.x) * GRAVITY);
+        n.vy = safeNum(n.vy + (CENTER_Y - n.y) * GRAVITY);
+        n.vx *= DAMPING;
+        n.vy *= DAMPING;
+        n.x = safeNum(n.x + n.vx, CENTER_X);
+        n.y = safeNum(n.y + n.vy, CENTER_Y);
+        // WHY log scale: linear sizing (freq * 0.25) lets high-frequency common
+        // words (e.g. "yeah", "his") grow to 10x the size of algospeak terms,
+        // dominating the canvas. Math.log compresses the range so all nodes
+        // stay visually comparable. Min 8px, max ~32px regardless of frequency.
+        const r = 5 + Math.min(Math.log1p(n.frequency ?? 1) * 1.8, 12);
+        n.x = Math.max(r + 40, Math.min(W - r - 40, n.x));
+        n.y = Math.max(r + 20, Math.min(H - r - 20, n.y));
+      }
+
+      if (activeRef.current) {
+        setPositions(ns.map(n => ({ ...n })));
+        const maxV = ns.reduce((mx, n) => Math.max(mx, Math.abs(n.vx) + Math.abs(n.vy)), 0);
+        if (maxV > 0.15) {
+          rafRef.current = requestAnimationFrame(run);
+        }
+      }
+    } catch {
+      activeRef.current = false;
+    }
+  }, []);
+
+  useEffect(() => {
+    cancelAnimationFrame(rafRef.current);
+    activeRef.current = true;
+
+    nodesRef.current = nodeConfigs.map((n, i) => {
+      // WHY circle spread: random init clusters nodes near center, requiring
+      // hundreds of ticks to separate. Evenly spreading in a circle means
+      // repulsion forces are balanced from tick 1 — graph settles readable.
+      const angle = (i / Math.max(nodeConfigs.length, 1)) * 2 * Math.PI;
+      const spread = Math.min(W, H) * 0.32;
+      return {
+        id: n.id,
+        frequency: n.frequency,
+        toxicRatio: n.toxicRatio,
+        x: CENTER_X + Math.cos(angle) * spread,
+        y: CENTER_Y + Math.sin(angle) * spread,
+        vx: (Math.random() - 0.5) * 1.5,
+        vy: (Math.random() - 0.5) * 1.5,
+      };
+    });
+    setPositions(nodesRef.current.map(n => ({ ...n })));
+    rafRef.current = requestAnimationFrame(run);
+
+    return () => {
+      activeRef.current = false;
+      cancelAnimationFrame(rafRef.current);
+    };
+  }, [nodeKey, run]);
+
+  return positions;
+}
+
+// ── Edge colour ───────────────────────────────────────────────────────────────
+function edgeColor(sourceRatio: number, targetRatio: number, weight: number): string {
+  const avg = ((sourceRatio ?? 0) + (targetRatio ?? 0)) / 2;
+  const alpha = Math.min(0.9, 0.3 + weight * 0.05);
+  if (avg >= 0.7) return `rgba(255,75,75,${alpha})`;
+  if (avg >= 0.4) return `rgba(255,140,66,${alpha})`;
+  return `rgba(46,204,113,${alpha})`;
+}
+
+// ── Inner graph component ─────────────────────────────────────────────────────
+function GraphCanvas({
+  minCooccurrence, toxicOnly, setMinCooccurrence, setToxicOnly,
+}: {
+  minCooccurrence: number;
+  toxicOnly: boolean;
+  setMinCooccurrence: (v: number) => void;
+  setToxicOnly: (v: boolean) => void;
+}) {
+  const [built, setBuilt] = useState(false);
+  const [hoveredNode, setHoveredNode] = useState<string | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // WHY state for nodes/edges instead of hardcoded constants:
+  // Previously these were GRAPH_NODES / GRAPH_EDGES imported from mockData.
+  // Now they come from GET /graph-data when the user clicks "Build Graph".
+  // The physics simulation code is exactly unchanged — it just receives real data.
+  const [nodes, setNodes] = useState<GraphNode[]>([]);
+  const [edges, setEdges] = useState<GraphEdge[]>([]);
+
+  // ── Fetch graph data from backend ───────────────────────────────────────────
+  const handleBuild = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const data = await apiGetGraphData(minCooccurrence, toxicOnly);
+      setNodes(data.nodes);
+      setEdges(data.edges);
+      setBuilt(true);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load graph data");
+    } finally {
+      setLoading(false);
+    }
+  }, [minCooccurrence, toxicOnly]);
+
+  const visibleNodes = useMemo(() => {
+    return nodes.filter(n => {
+      if (toxicOnly && n.toxicRatio < 0.7) return false;
+      const edgeCount = edges.filter(
+        e => (e.source === n.id || e.target === n.id) && e.weight >= minCooccurrence
+      ).length;
+      return edgeCount > 0 || minCooccurrence <= 2;
+    });
+  }, [nodes, edges, toxicOnly, minCooccurrence]);
+
+  const visibleEdges = useMemo(() => {
+    const nodeIds = new Set(visibleNodes.map(n => n.id));
+    return edges.filter(
+      e => e.weight >= minCooccurrence && nodeIds.has(e.source) && nodeIds.has(e.target)
+    );
+  }, [visibleNodes, edges, minCooccurrence]);
+
+  const nodeKey = useMemo(
+    () => visibleNodes.map(n => n.id).sort().join(","),
+    [visibleNodes]
+  );
+
+  const positions = useForceSimulation(visibleNodes, visibleEdges, nodeKey);
+
+  const posMap = useMemo(() => {
+    const m: Record<string, { x: number; y: number }> = {};
+    for (const p of positions) m[p.id] = { x: p.x, y: p.y };
+    return m;
+  }, [positions]);
+
+  const nodeMap = useMemo(() => {
+    const m: Record<string, GraphNode> = {};
+    for (const n of visibleNodes) m[n.id] = n;
+    return m;
+  }, [visibleNodes]);
+
+  return (
+    <div style={{ padding: "1.2rem 1.4rem" }}>
+      {/* Top controls */}
+      <div style={{ display: "flex", gap: "1rem", marginBottom: "1rem" }}>
+        {/* Info card */}
+        <motion.div
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          style={{
+            flex: 3,
+            background: "#0d1120",
+            border: "1px solid #1e2540",
+            borderRadius: 10,
+            padding: "0.75rem 1rem",
+          }}
+        >
+          <div style={{ fontSize: "0.58rem", textTransform: "uppercase", letterSpacing: "1px", color: "#3a4060", marginBottom: 6 }}>
+            How to read this graph
+          </div>
+          <div style={{ fontSize: "0.78rem", color: "#8a90ad" }}>
+            Words that frequently appear together in algospeak posts are connected. Node size = frequency &nbsp;|&nbsp;
+            <span style={{ color: "#ff4b4b" }}>red &gt;70% toxic</span>
+            {" "}<span style={{ color: "#ff9f43" }}>orange 40-70% mixed</span>
+            {" "}<span style={{ color: "#2ecc71" }}>green &lt;40% benign</span>
+          </div>
+        </motion.div>
+
+        {/* Controls */}
+        <motion.div
+          initial={{ opacity: 0, y: 16 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.05 }}
+          style={{
+            flex: 1,
+            background: "#0d1120",
+            border: "1px solid #1e2540",
+            borderRadius: 10,
+            padding: "0.75rem 1rem",
+            display: "flex",
+            flexDirection: "column",
+            gap: 8,
+          }}
+        >
+          <div>
+            <div style={{ fontSize: "0.62rem", color: "#5a6080", marginBottom: 3 }}>
+              Min co-occurrences
+            </div>
+            <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 2 }}>
+              <span style={{ fontSize: "0.72rem", color: "#ff6b3d", fontWeight: 700 }}>{minCooccurrence}</span>
+            </div>
+            <input
+              type="range"
+              min={2} max={10} step={1}
+              value={minCooccurrence}
+              onChange={e => {
+                setMinCooccurrence(parseInt(e.target.value));
+                // Reset graph so user re-clicks Build Graph with new params
+                setBuilt(false);
+                setNodes([]);
+                setEdges([]);
+              }}
+              style={{ width: "100%", accentColor: "#ff4b4b" }}
+            />
+          </div>
+          <label style={{ display: "flex", alignItems: "center", gap: 6, cursor: "pointer" }}>
+            <input
+              type="checkbox"
+              checked={toxicOnly}
+              onChange={e => {
+                setToxicOnly(e.target.checked);
+                setBuilt(false);
+                setNodes([]);
+                setEdges([]);
+              }}
+              style={{ accentColor: "#ff4b4b" }}
+            />
+            <span style={{ fontSize: "0.75rem", color: "#8a90ad" }}>Toxic posts only</span>
+          </label>
+          <motion.button
+            onClick={handleBuild}
+            disabled={loading}
+            whileHover={{ scale: loading ? 1 : 1.02 }}
+            whileTap={{ scale: loading ? 1 : 0.97 }}
+            style={{
+              background: built
+                ? "linear-gradient(135deg, #2ecc71, #27ae60)"
+                : "linear-gradient(135deg, #ff4b4b, #ff8c42)",
+              color: "#fff",
+              border: "none",
+              borderRadius: 8,
+              padding: "7px 0",
+              fontWeight: 700,
+              fontSize: "0.82rem",
+              cursor: loading ? "wait" : "pointer",
+              opacity: loading ? 0.7 : 1,
+              boxShadow: built
+                ? "0 0 14px rgba(46,204,113,0.25)"
+                : "0 0 14px rgba(255,75,75,0.25)",
+            }}
+          >
+            {loading ? "Loading…" : built ? "✓ Graph Active" : "Build Graph"}
+          </motion.button>
+        </motion.div>
+      </div>
+
+      {/* Error state */}
+      {error && (
+        <div style={{
+          background: "rgba(255,75,75,0.07)",
+          border: "1px solid rgba(255,75,75,0.2)",
+          borderRadius: 10,
+          padding: "1rem",
+          color: "#ff6b3d",
+          fontSize: "0.8rem",
+          marginBottom: "1rem",
+        }}>
+          ⚠ {error}
+        </div>
+      )}
+
+      {/* Graph canvas */}
+      {!built ? (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          style={{
+            background: "#0d1120",
+            border: "1px solid #1e2540",
+            borderRadius: 10,
+            padding: "3rem",
+            textAlign: "center",
+            color: "#5a6080",
+            fontSize: "0.85rem",
+          }}
+        >
+          Adjust settings above and click &quot;Build Graph&quot; to visualize word co-occurrences.
+        </motion.div>
+      ) : (
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.5 }}
+          style={{
+            background: "#080c18",
+            border: "1px solid #1e2540",
+            borderRadius: 10,
+            overflow: "hidden",
+            position: "relative",
+            maxHeight: "62vh",
+          }}
+        >
+          <svg
+            width="100%"
+            viewBox={`0 0 ${W} ${H}`}
+            preserveAspectRatio="xMidYMid meet"
+            style={{ display: "block", width: "100%", height: "auto", maxHeight: "62vh" }}
+          >
+            {/* Background grid */}
+            <defs>
+              <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
+                <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#1a1f35" strokeWidth="0.5" />
+              </pattern>
+            </defs>
+            <rect width={W} height={H} fill="url(#grid)" opacity={0.5} />
+
+            {/* Edges */}
+            {visibleEdges.map(e => {
+              const s = posMap[e.source];
+              const t = posMap[e.target];
+              if (!s || !t) return null;
+              const sNode = nodeMap[e.source];
+              const tNode = nodeMap[e.target];
+              if (!sNode || !tNode) return null;
+              const isHighlighted = hoveredNode === e.source || hoveredNode === e.target;
+              return (
+                <line
+                  key={`${e.source}--${e.target}`}
+                  x1={s.x} y1={s.y} x2={t.x} y2={t.y}
+                  stroke={edgeColor(sNode.toxicRatio, tNode.toxicRatio, e.weight)}
+                  strokeWidth={0.5 + Math.min(Math.log1p(e.weight) * 0.5, 2.5)}
+                  opacity={hoveredNode ? (isHighlighted ? 0.9 : 0.1) : 0.7}
+                  style={{ transition: "opacity 0.2s" }}
+                />
+              );
+            })}
+
+            {/* Nodes */}
+            {positions.map(node => {
+              const freq = node.frequency ?? 1;
+              const tRatio = node.toxicRatio ?? 0.5;
+              // WHY log1p: same formula as the physics loop so the rendered
+              // circle matches the collision radius used for simulation.
+              const size = 5 + Math.min(Math.log1p(freq) * 1.8, 12);
+              const color = nodeColor(tRatio);
+              const isHovered = hoveredNode === node.id;
+              const isDimmed = !!(hoveredNode && !isHovered);
+              const r = isHovered ? size * 1.25 : size;
+
+              if (!isFinite(node.x) || !isFinite(node.y)) return null;
+
+              return (
+                <g
+                  key={node.id}
+                  onMouseEnter={() => setHoveredNode(node.id)}
+                  onMouseLeave={() => setHoveredNode(null)}
+                  style={{ cursor: "pointer" }}
+                >
+                  <circle
+                    cx={node.x} cy={node.y}
+                    r={r + 6}
+                    fill={color}
+                    opacity={isHovered ? 0.2 : 0}
+                    style={{ transition: "opacity 0.2s" }}
+                  />
+                  <circle
+                    cx={node.x} cy={node.y}
+                    r={r}
+                    fill={color}
+                    fillOpacity={isDimmed ? 0.2 : 0.85}
+                    stroke={color}
+                    strokeWidth={isHovered ? 2.5 : 1.5}
+                    strokeOpacity={isDimmed ? 0.2 : 0.6}
+                    style={{ transition: "opacity 0.2s" }}
+                  />
+                  <text
+                    x={node.x}
+                    y={node.y + r + 12}
+                    textAnchor="middle"
+                    fontSize={isHovered ? 11 : 9.5}
+                    fill={isDimmed ? "#3a4060" : "#c8cce0"}
+                    fontFamily="system-ui, sans-serif"
+                    style={{ userSelect: "none", pointerEvents: "none", transition: "opacity 0.2s" }}
+                    opacity={isDimmed ? 0.2 : 1}
+                  >
+                    {node.id}
+                  </text>
+                </g>
+              );
+            })}
+          </svg>
+
+          {/* Hover tooltip */}
+          {hoveredNode && (() => {
+            const n = visibleNodes.find(x => x.id === hoveredNode);
+            if (!n) return null;
+            const color = nodeColor(n.toxicRatio);
+            const connections = visibleEdges.filter(
+              e => e.source === n.id || e.target === n.id
+            ).length;
+            return (
+              <motion.div
+                key={hoveredNode}
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                style={{
+                  position: "absolute",
+                  top: 12, right: 12,
+                  background: "#0d1120",
+                  border: `1px solid ${color}44`,
+                  borderRadius: 9,
+                  padding: "0.6rem 0.9rem",
+                  minWidth: 150,
+                  boxShadow: `0 0 20px ${color}22`,
+                }}
+              >
+                <div style={{ fontWeight: 700, color: "#e8eaf0", fontSize: "0.88rem", marginBottom: 6 }}>
+                  {n.id}
+                </div>
+                <div style={{ fontSize: "0.72rem", color: "#8a90ad", marginBottom: 2 }}>
+                  Frequency: <span style={{ color: "#e8eaf0" }}>{n.frequency}</span>
+                </div>
+                <div style={{ fontSize: "0.72rem", color: "#8a90ad", marginBottom: 2 }}>
+                  Toxic ratio:{" "}
+                  <span style={{ color, fontWeight: 700 }}>
+                    {(n.toxicRatio * 100).toFixed(0)}%
+                  </span>
+                </div>
+                <div style={{ fontSize: "0.72rem", color: "#8a90ad" }}>
+                  Connections: <span style={{ color: "#e8eaf0" }}>{connections}</span>
+                </div>
+                <div style={{ marginTop: 6, background: "#1a1f35", borderRadius: 4, height: 4, overflow: "hidden" }}>
+                  <div
+                    style={{
+                      width: `${n.toxicRatio * 100}%`,
+                      height: "100%",
+                      background: color,
+                      borderRadius: 4,
+                      transition: "width 0.3s",
+                    }}
+                  />
+                </div>
+              </motion.div>
+            );
+          })()}
+        </motion.div>
+      )}
+    </div>
+  );
+}
+
+// ── Public component ───────────────────────────────────────────────────────────
+export function CoOccurrenceGraph({ minCooccurrence, setMinCooccurrence, toxicOnly, setToxicOnly }: Props) {
+  return (
+    <GraphErrorBoundary>
+      <GraphCanvas
+        minCooccurrence={minCooccurrence}
+        setMinCooccurrence={setMinCooccurrence}
+        toxicOnly={toxicOnly}
+        setToxicOnly={setToxicOnly}
+      />
+    </GraphErrorBoundary>
+  );
+}

frontend/src/app/components/ExportTab.tsx

@@ -0,0 +1,242 @@
+import { useState } from "react";
+import { motion } from "motion/react";
+import { Download, FileText, FileJson, CheckCircle } from "lucide-react";
+import { Post } from "./mockData";
+
+interface Props {
+  posts: Post[];
+}
+
+function downloadJSON(data: unknown, filename: string) {
+  const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function downloadCSV(posts: Post[], filename: string) {
+  const header = "id,text,score,label,query_term,created_at";
+  const rows = posts.map(p =>
+    [p.id, `"${p.text.replace(/"/g, '""')}"`, p.score, p.label, p.query_term, p.created_at].join(",")
+  );
+  const blob = new Blob([[header, ...rows].join("\n")], { type: "text/csv" });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement("a");
+  a.href = url;
+  a.download = filename;
+  a.click();
+  URL.revokeObjectURL(url);
+}
+
+function ExportCard({
+  icon,
+  title,
+  description,
+  buttonLabel,
+  color,
+  onClick,
+  delay,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  buttonLabel: string;
+  color: string;
+  onClick: () => void;
+  delay: number;
+}) {
+  const [clicked, setClicked] = useState(false);
+
+  const handleClick = () => {
+    onClick();
+    setClicked(true);
+    setTimeout(() => setClicked(false), 2000);
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 18 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay, duration: 0.45 }}
+      style={{
+        background: "#0d1120",
+        border: "1px solid #1e2540",
+        borderRadius: 10,
+        padding: "1.1rem 1.2rem",
+        display: "flex",
+        alignItems: "center",
+        gap: "1rem",
+      }}
+    >
+      <div
+        style={{
+          width: 42,
+          height: 42,
+          borderRadius: 10,
+          background: `${color}18`,
+          border: `1px solid ${color}44`,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+          color,
+        }}
+      >
+        {icon}
+      </div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontSize: "0.88rem", fontWeight: 700, color: "#e8eaf0", marginBottom: 3 }}>{title}</div>
+        <div style={{ fontSize: "0.73rem", color: "#5a6080" }}>{description}</div>
+      </div>
+      <motion.button
+        onClick={handleClick}
+        whileHover={{ scale: 1.04 }}
+        whileTap={{ scale: 0.96 }}
+        style={{
+          background: clicked ? "rgba(46,204,113,0.12)" : `${color}18`,
+          border: `1px solid ${clicked ? "#2ecc71" : color}55`,
+          borderRadius: 8,
+          color: clicked ? "#2ecc71" : color,
+          padding: "6px 14px",
+          fontSize: "0.78rem",
+          fontWeight: 600,
+          cursor: "pointer",
+          display: "flex",
+          alignItems: "center",
+          gap: 5,
+          whiteSpace: "nowrap",
+          transition: "all 0.2s",
+        }}
+      >
+        {clicked ? <CheckCircle size={14} /> : <Download size={14} />}
+        {clicked ? "Downloaded!" : buttonLabel}
+      </motion.button>
+    </motion.div>
+  );
+}
+
+export function ExportTab({ posts }: Props) {
+  const toxicPosts = posts.filter(p => p.label === "toxic");
+  const nonToxicPosts = posts.filter(p => p.label === "non-toxic");
+
+  const summaryData = {
+    exported_at: new Date().toISOString(),
+    total_posts: posts.length,
+    toxic_count: toxicPosts.length,
+    non_toxic_count: nonToxicPosts.length,
+    toxic_rate: posts.length ? ((toxicPosts.length / posts.length) * 100).toFixed(2) + "%" : "0%",
+    avg_score: posts.length
+      ? (posts.reduce((s, p) => s + p.score, 0) / posts.length).toFixed(4)
+      : "0",
+    posts,
+  };
+
+  return (
+    <div style={{ padding: "1.2rem 1.4rem", display: "flex", flexDirection: "column", gap: "0.9rem" }}>
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        animate={{ opacity: 1, y: 0 }}
+        style={{ color: "#5a6080", fontSize: "0.82rem" }}
+      >
+        Export your analyzed data for further research or archiving.
+      </motion.div>
+
+      {/* Stats summary */}
+      <motion.div
+        initial={{ opacity: 0, y: 14 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.05 }}
+        style={{
+          background: "#0d1120",
+          border: "1px solid #1e2540",
+          borderRadius: 10,
+          padding: "0.9rem 1rem",
+          display: "flex",
+          gap: "2rem",
+          flexWrap: "wrap",
+        }}
+      >
+        {[
+          { label: "Total posts", value: String(posts.length), color: "#fff" },
+          { label: "Toxic", value: String(toxicPosts.length), color: "#ff4b4b" },
+          { label: "Non-toxic", value: String(nonToxicPosts.length), color: "#2ecc71" },
+          {
+            label: "Toxic rate",
+            value: posts.length ? `${((toxicPosts.length / posts.length) * 100).toFixed(1)}%` : "0%",
+            color: "#ff8c42",
+          },
+        ].map(({ label, value, color }) => (
+          <div key={label}>
+            <div style={{ fontSize: "0.58rem", textTransform: "uppercase", letterSpacing: "1px", color: "#3a4060", marginBottom: 4 }}>
+              {label}
+            </div>
+            <div style={{ fontSize: "1.3rem", fontWeight: 700, color }}>{value}</div>
+          </div>
+        ))}
+      </motion.div>
+
+      {/* Export options */}
+      <ExportCard
+        icon={<FileJson size={20} />}
+        title="Full dataset (JSON)"
+        description={`Export all ${posts.length} analyzed posts with scores, labels, and metadata`}
+        buttonLabel="Export JSON"
+        color="#a6b0ff"
+        onClick={() => downloadJSON(summaryData, "algoscope-export.json")}
+        delay={0.1}
+      />
+
+      <ExportCard
+        icon={<FileText size={20} />}
+        title="All posts (CSV)"
+        description={`${posts.length} rows · id, text, score, label, query_term, created_at`}
+        buttonLabel="Export CSV"
+        color="#ff8c42"
+        onClick={() => downloadCSV(posts, "algoscope-posts.csv")}
+        delay={0.18}
+      />
+
+      <ExportCard
+        icon={<FileText size={20} />}
+        title="Toxic posts only (CSV)"
+        description={`${toxicPosts.length} rows · filtered to toxic label (score ≥ threshold)`}
+        buttonLabel="Export CSV"
+        color="#ff4b4b"
+        onClick={() => downloadCSV(toxicPosts, "algoscope-toxic.csv")}
+        delay={0.26}
+      />
+
+      <ExportCard
+        icon={<FileJson size={20} />}
+        title="Summary statistics (JSON)"
+        description="Aggregate metrics: counts, rates, avg scores per term"
+        buttonLabel="Export JSON"
+        color="#2ecc71"
+        onClick={() => {
+          const termStats: Record<string, unknown> = {};
+          const terms = [...new Set(posts.map(p => p.query_term))];
+          for (const t of terms) {
+            const tp = posts.filter(p => p.query_term === t);
+            const toxicN = tp.filter(p => p.label === "toxic").length;
+            termStats[t] = {
+              count: tp.length,
+              toxic_count: toxicN,
+              toxic_rate: `${((toxicN / tp.length) * 100).toFixed(1)}%`,
+              avg_score: (tp.reduce((s, p) => s + p.score, 0) / tp.length).toFixed(4),
+            };
+          }
+          downloadJSON({
+            exported_at: new Date().toISOString(),
+            total: posts.length,
+            toxic_rate: `${((toxicPosts.length / posts.length) * 100).toFixed(1)}%`,
+            per_term: termStats,
+          }, "algoscope-summary.json");
+        }}
+        delay={0.34}
+      />
+    </div>
+  );
+}

frontend/src/app/components/Header.tsx

@@ -0,0 +1,140 @@
+import { motion } from "motion/react";
+
+interface HeaderProps {
+  onToggleSidebar: () => void;
+  sidebarOpen: boolean;
+}
+
+export function Header({ onToggleSidebar, sidebarOpen }: HeaderProps) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: -12 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.4 }}
+      style={{
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        padding: "0.6rem 1.4rem 0.7rem",
+        borderBottom: "1px solid #1e2540",
+        background: "#0a0d14",
+        position: "sticky",
+        top: 0,
+        zIndex: 10,
+      }}
+    >
+      <div style={{ display: "flex", alignItems: "center", gap: "0.9rem" }}>
+        {/* Sidebar toggle */}
+        <button
+          onClick={onToggleSidebar}
+          style={{
+            width: 32,
+            height: 32,
+            background: "#141826",
+            border: "1px solid #1e2540",
+            borderRadius: 7,
+            color: "#e8eaf0",
+            fontSize: 16,
+            cursor: "pointer",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            transition: "border-color 0.2s, color 0.2s",
+          }}
+          onMouseEnter={e => {
+            (e.currentTarget as HTMLButtonElement).style.borderColor = "#ff6b3d";
+            (e.currentTarget as HTMLButtonElement).style.color = "#ff6b3d";
+          }}
+          onMouseLeave={e => {
+            (e.currentTarget as HTMLButtonElement).style.borderColor = "#1e2540";
+            (e.currentTarget as HTMLButtonElement).style.color = "#e8eaf0";
+          }}
+        >
+          ☰
+        </button>
+
+        {/* Logo */}
+        <motion.div
+          whileHover={{ scale: 1.05 }}
+          style={{
+            width: 36,
+            height: 36,
+            borderRadius: 9,
+            background: "linear-gradient(135deg, #ff4b4b, #ff8c42)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontWeight: 800,
+            color: "#fff",
+            fontSize: "1.15rem",
+            boxShadow: "0 0 18px rgba(255,76,76,0.45)",
+            flexShrink: 0,
+          }}
+        >
+          A
+        </motion.div>
+
+        {/* Title */}
+        <div>
+          <div style={{ fontSize: "1.55rem", fontWeight: 800, color: "#fff", lineHeight: 1.1 }}>
+            AlgoScope
+          </div>
+          <div style={{ fontSize: "0.78rem", color: "#9aa0c0" }}>
+            Real-time algospeak &amp; toxicity intelligence on Bluesky
+          </div>
+        </div>
+      </div>
+
+      {/* Right side */}
+      <div style={{ textAlign: "right" }}>
+        <div
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: "0.35rem",
+            padding: "0.2rem 0.65rem",
+            borderRadius: 999,
+            background: "rgba(46,204,113,0.08)",
+            border: "1px solid rgba(46,204,113,0.22)",
+            marginBottom: "0.25rem",
+          }}
+        >
+          <span
+            style={{
+              width: 7,
+              height: 7,
+              borderRadius: "50%",
+              background: "#2ecc71",
+              boxShadow: "0 0 6px rgba(46,204,113,0.9)",
+              display: "inline-block",
+              animation: "pulse-dot 1.5s infinite",
+            }}
+          />
+          <span style={{ color: "#2ecc71", fontWeight: 700, letterSpacing: 1, fontSize: "0.68rem" }}>
+            LIVE
+          </span>
+        </div>
+        <div style={{ fontSize: "0.73rem", color: "#6f7695" }}>
+          by Odeliya Charitonova
+          <br />
+          <a
+            href="https://github.com/odeliyach/Algoscope"
+            target="_blank"
+            rel="noopener noreferrer"
+            style={{ color: "#a6b0ff", textDecoration: "none" }}
+          >
+            github.com/odeliyach/Algoscope
+          </a>
+        </div>
+      </div>
+
+      <style>{`
+        @keyframes pulse-dot {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.25; }
+        }
+      `}</style>
+    </motion.div>
+  );
+}

frontend/src/app/components/OverviewTab.tsx

@@ -0,0 +1,687 @@
+import { useMemo, useEffect, useRef, useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Post } from "./mockData";
+
+interface OverviewTabProps {
+  posts: Post[];
+  batchPosts: Post[];
+  selectedTerms: string[];
+  justFetched: boolean;
+  totalAnalyzed: number;
+}
+
+// ── Animated counter hook ──────────────────────────────────────────────────────
+function useAnimatedNumber(target: number, duration = 900): number {
+  const [current, setCurrent] = useState(0);
+  const startRef = useRef<number | null>(null);
+  const fromRef = useRef(0);
+  const rafRef = useRef<number>(0);
+
+  useEffect(() => {
+    const from = fromRef.current;
+    startRef.current = null;
+    const tick = (ts: number) => {
+      if (startRef.current === null) startRef.current = ts;
+      const progress = Math.min((ts - startRef.current) / duration, 1);
+      const ease = 1 - Math.pow(1 - progress, 3);
+      setCurrent(Math.round(from + (target - from) * ease));
+      if (progress < 1) rafRef.current = requestAnimationFrame(tick);
+      else fromRef.current = target;
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [target, duration]);
+
+  return current;
+}
+
+function useAnimatedFloat(target: number, duration = 900, decimals = 1): string {
+  const [current, setCurrent] = useState(0);
+  const startRef = useRef<number | null>(null);
+  const fromRef = useRef(0);
+  const rafRef = useRef<number>(0);
+
+  useEffect(() => {
+    const from = fromRef.current;
+    startRef.current = null;
+    const tick = (ts: number) => {
+      if (startRef.current === null) startRef.current = ts;
+      const progress = Math.min((ts - startRef.current) / duration, 1);
+      const ease = 1 - Math.pow(1 - progress, 3);
+      setCurrent(from + (target - from) * ease);
+      if (progress < 1) rafRef.current = requestAnimationFrame(tick);
+      else fromRef.current = target;
+    };
+    rafRef.current = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(rafRef.current);
+  }, [target, duration]);
+
+  return current.toFixed(decimals);
+}
+
+// ── Metric card ────────────────────────────────────────────────────────────────
+function MetricCard({
+  label, displayValue, sub, subIcon, subColor, subBg, valueColor, delay, isAlert,
+}: {
+  label: string;
+  displayValue?: string;
+  sub: string;
+  subIcon?: string;
+  subColor?: string;
+  subBg?: string;
+  valueColor: string;
+  delay: number;
+  isAlert?: boolean;
+}) {
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 24 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay, duration: 0.45, ease: "easeOut" }}
+      style={{
+        background: isAlert ? "rgba(255,75,75,0.06)" : "#0d1120",
+        border: isAlert ? "1px solid rgba(255,75,75,0.3)" : "1px solid #1e2540",
+        borderRadius: 10,
+        padding: "0.8rem 1rem",
+        flex: 1,
+        minWidth: 0,
+        position: "relative",
+        overflow: "hidden",
+      }}
+    >
+      {isAlert && (
+        <motion.div
+          animate={{ opacity: [0.4, 1, 0.4] }}
+          transition={{ duration: 1.5, repeat: Infinity }}
+          style={{
+            position: "absolute", top: 0, left: 0,
+            width: "100%", height: 2,
+            background: "linear-gradient(90deg, transparent, #ff4b4b, transparent)",
+          }}
+        />
+      )}
+      <div style={{ fontSize: "0.58rem", textTransform: "uppercase", letterSpacing: "1px", color: "#3a4060", marginBottom: "0.35rem" }}>
+        {label}
+      </div>
+      <div style={{ fontSize: "1.45rem", fontWeight: 700, color: valueColor, lineHeight: 1.1, fontVariantNumeric: "tabular-nums" }}>
+        {displayValue}
+      </div>
+      {/* Styled sub badge */}
+      <motion.div
+        initial={{ opacity: 0, x: -6 }}
+        animate={{ opacity: 1, x: 0 }}
+        transition={{ delay: delay + 0.25, duration: 0.35 }}
+        style={{
+          marginTop: "0.4rem",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 4,
+          padding: "2px 7px 2px 5px",
+          borderRadius: 999,
+          background: subBg ?? "rgba(90,96,128,0.12)",
+          border: `1px solid ${subColor ? subColor + "30" : "#2a3050"}`,
+          maxWidth: "100%",
+        }}
+      >
+        {subIcon && (
+          <span style={{ fontSize: "0.65rem", flexShrink: 0 }}>{subIcon}</span>
+        )}
+        <span style={{
+          fontSize: "0.65rem",
+          color: subColor ?? "#6a7090",
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          fontWeight: subColor ? 600 : 400,
+        }}>
+          {sub}
+        </span>
+      </motion.div>
+    </motion.div>
+  );
+}
+
+// ── Spike alert banner ─────────────────────────────────────────────────────────
+function SpikeAlert({ batchToxicRate, batchCount }: { batchToxicRate: number; batchCount: number }) {
+  const [dismissed, setDismissed] = useState(false);
+  useEffect(() => { setDismissed(false); }, [Math.floor(batchToxicRate)]);
+  if (batchToxicRate < 38 || batchCount === 0 || dismissed) return null;
+
+  const severity = batchToxicRate >= 70 ? "critical" : batchToxicRate >= 55 ? "high" : "elevated";
+  const severityColor = severity === "critical" ? "#ff4b4b" : severity === "high" ? "#ff6b3d" : "#ff9f43";
+  const severityBg = severity === "critical" ? "rgba(255,75,75,0.08)" : severity === "high" ? "rgba(255,107,61,0.08)" : "rgba(255,159,67,0.08)";
+  const severityBorder = severity === "critical" ? "rgba(255,75,75,0.35)" : severity === "high" ? "rgba(255,107,61,0.3)" : "rgba(255,159,67,0.28)";
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0, y: -12, height: 0 }}
+        animate={{ opacity: 1, y: 0, height: "auto" }}
+        exit={{ opacity: 0, y: -12, height: 0 }}
+        transition={{ duration: 0.4 }}
+        style={{
+          background: severityBg,
+          border: `1px solid ${severityBorder}`,
+          borderRadius: 9, padding: "0.7rem 1rem",
+          display: "flex", alignItems: "center", gap: "0.75rem",
+          overflow: "hidden",
+          position: "relative",
+        }}
+      >
+        {/* Animated scan line */}
+        <motion.div
+          animate={{ x: ["-100%", "400%"] }}
+          transition={{ duration: 2.5, repeat: Infinity, ease: "linear", repeatDelay: 1 }}
+          style={{
+            position: "absolute", top: 0, left: 0,
+            width: "30%", height: "100%",
+            background: `linear-gradient(90deg, transparent, ${severityColor}10, transparent)`,
+            pointerEvents: "none",
+          }}
+        />
+        {/* Pulsing dot */}
+        <motion.div
+          animate={{ scale: [1, 1.5, 1], opacity: [1, 0.4, 1] }}
+          transition={{ duration: 1.1, repeat: Infinity }}
+          style={{
+            width: 10, height: 10, borderRadius: "50%",
+            background: severityColor,
+            boxShadow: `0 0 12px ${severityColor}cc`,
+            flexShrink: 0,
+          }}
+        />
+        <div style={{ flex: 1 }}>
+          <span style={{ color: severityColor, fontWeight: 700, fontSize: "0.82rem" }}>
+            ⚠ Toxicity Spike Detected
+          </span>
+          <span style={{ color: "#9a8060", fontSize: "0.78rem", marginLeft: 8 }}>
+            {batchToxicRate.toFixed(1)}% of last {batchCount} posts flagged as toxic
+          </span>
+          <div style={{ marginTop: 4, display: "flex", alignItems: "center", gap: 6 }}>
+            <div style={{ flex: 1, height: 3, background: "#1a1d2e", borderRadius: 2, overflow: "hidden" }}>
+              <motion.div
+                initial={{ width: 0 }}
+                animate={{ width: `${Math.min(batchToxicRate, 100)}%` }}
+                transition={{ duration: 0.8, ease: "easeOut" }}
+                style={{ height: "100%", background: `linear-gradient(90deg, ${severityColor}88, ${severityColor})`, borderRadius: 2 }}
+              />
+            </div>
+            <span style={{ fontSize: "0.65rem", color: severityColor, fontWeight: 700, minWidth: 30 }}>
+              {severity.toUpperCase()}
+            </span>
+          </div>
+        </div>
+        <button
+          onClick={() => setDismissed(true)}
+          style={{ background: "none", border: "none", color: "#5a4040", cursor: "pointer", fontSize: "1rem", padding: "0 4px", flexShrink: 0 }}
+        >✕</button>
+      </motion.div>
+    </AnimatePresence>
+  );
+}
+
+// ── Custom SVG area chart (no Recharts) ────────────────────────────────────────
+function CustomAreaChart({ data }: { data: { hour: string; value: number | null }[] }) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(400);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+    const obs = new ResizeObserver(entries => {
+      for (const e of entries) setContainerWidth(e.contentRect.width);
+    });
+    obs.observe(containerRef.current);
+    setContainerWidth(containerRef.current.clientWidth);
+    return () => obs.disconnect();
+  }, []);
+
+  const W = containerWidth;
+  const H = 170;
+  const PAD = { top: 12, right: 12, bottom: 28, left: 36 };
+  const inner = { w: W - PAD.left - PAD.right, h: H - PAD.top - PAD.bottom };
+
+  // Fill null with 0 so the line is always continuous
+  const filled = data.map(d => ({ ...d, value: d.value ?? 0 }));
+
+  const vals = filled.map(d => d.value) as number[];
+  const minV = 0;
+  const maxV = Math.max(...vals, 0.01);
+  const rangeV = maxV - minV || 0.001;
+
+  const [tooltip, setTooltip] = useState<{ x: number; y: number; hour: string; val: number } | null>(null);
+
+  const toX = (i: number) => PAD.left + (i / (filled.length - 1)) * inner.w;
+  const toY = (v: number) => PAD.top + inner.h - ((v - minV) / rangeV) * inner.h;
+
+  const linePath = filled.map((d, i) => {
+    const x = toX(i); const y = toY(d.value);
+    return `${i === 0 ? "M" : "L"} ${x},${y}`;
+  }).join(" ");
+
+  const areaPath = `${linePath} L ${toX(filled.length - 1)},${PAD.top + inner.h} L ${toX(0)},${PAD.top + inner.h} Z`;
+
+  const yTicks = [0, 0.25, 0.5, 0.75, 1.0];
+  const xLabels = filled.filter((_, i) => i % 4 === 0);
+
+  return (
+    <div ref={containerRef} style={{ position: "relative", width: "100%" }}>
+      <svg
+        viewBox={`0 0 ${W} ${H}`}
+        width={W}
+        height={H}
+        style={{ display: "block", overflow: "visible", width: "100%" }}
+        onMouseLeave={() => setTooltip(null)}
+      >
+        <defs>
+          <linearGradient id="areaGrad" x1="0" y1="0" x2="0" y2="1">
+            <stop offset="0%" stopColor="#ff4b4b" stopOpacity={0.25} />
+            <stop offset="100%" stopColor="#ff4b4b" stopOpacity={0.02} />
+          </linearGradient>
+          <filter id="glow">
+            <feGaussianBlur stdDeviation="2" result="coloredBlur" />
+            <feMerge><feMergeNode in="coloredBlur" /><feMergeNode in="SourceGraphic" /></feMerge>
+          </filter>
+        </defs>
+
+        {/* Grid lines */}
+        {yTicks.map(t => {
+          const y = PAD.top + inner.h - (t / 1) * inner.h;
+          return (
+            <g key={`grid-y-${t}`}>
+              <line x1={PAD.left} y1={y} x2={PAD.left + inner.w} y2={y} stroke="#1e2540" strokeDasharray="4 4" strokeOpacity={0.7} />
+              <text x={PAD.left - 6} y={y + 4} textAnchor="end" fill="#3a4060" fontSize={9}>{t.toFixed(1)}</text>
+            </g>
+          );
+        })}
+
+        {/* X labels */}
+        {xLabels.map(d => {
+          const i = filled.indexOf(d);
+          return (
+            <text key={`xlabel-${d.hour}`} x={toX(i)} y={H - 6} textAnchor="middle" fill="#3a4060" fontSize={9}>{d.hour}</text>
+          );
+        })}
+
+        {/* Area fill */}
+        <path d={areaPath} fill="url(#areaGrad)" strokeWidth={0} />
+
+        {/* Line */}
+        <path d={linePath} fill="none" stroke="#ff4b4b" strokeWidth={2} strokeLinejoin="round" strokeLinecap="round" filter="url(#glow)" />
+
+        {/* Interactive dots — only at hours with real data */}
+        {data.map((d, i) => {
+          if (d.value === null || d.value === 0) return null;
+          const x = toX(i); const y = toY(d.value);
+          const c = d.value >= 0.7 ? "#ff4b4b" : d.value >= 0.4 ? "#ff8c42" : "#2ecc71";
+          return (
+            <circle
+              key={`dot-${d.hour}`}
+              cx={x} cy={y} r={3.5}
+              fill={c} stroke="#0a0d14" strokeWidth={1.5}
+              style={{ cursor: "pointer" }}
+              onMouseEnter={() => setTooltip({ x, y, hour: d.hour, val: d.value! })}
+            />
+          );
+        })}
+
+        {/* Tooltip */}
+        {tooltip && (
+          <g>
+            <line x1={tooltip.x} y1={PAD.top} x2={tooltip.x} y2={PAD.top + inner.h} stroke="#ff4b4b" strokeWidth={1} strokeDasharray="3 3" strokeOpacity={0.4} />
+            <rect x={tooltip.x - 40} y={tooltip.y - 40} width={80} height={32} rx={6} fill="#141826" stroke="#2a3050" strokeWidth={1} />
+            <text x={tooltip.x} y={tooltip.y - 26} textAnchor="middle" fill="#8a90ad" fontSize={9}>{tooltip.hour}</text>
+            <text x={tooltip.x} y={tooltip.y - 13} textAnchor="middle" fill="#ff6b6b" fontSize={11} fontWeight="bold">{tooltip.val.toFixed(3)}</text>
+          </g>
+        )}
+      </svg>
+    </div>
+  );
+}
+
+// ── Cool Score Distribution Chart ─────────────────────────────────────────────
+function CustomScoreBars({ data }: { data: { label: string; count: number; color: string }[] }) {
+  const maxCount = Math.max(...data.map(d => d.count), 1);
+  const [hovered, setHovered] = useState<number | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const GRADIENTS: [string, string][] = [
+    ["#4ade80", "#22c55e"],
+    ["#a3e635", "#84cc16"],
+    ["#facc15", "#eab308"],
+    ["#fb923c", "#f97316"],
+    ["#f87171", "#ef4444"],
+  ];
+
+  return (
+    <div style={{ position: "relative" }}>
+      {/* Y grid lines */}
+      <div style={{ position: "relative", height: 160, display: "flex", alignItems: "flex-end", gap: 6, padding: "0 2px" }}>
+        {/* Grid lines overlay */}
+        {[0.25, 0.5, 0.75, 1].map((t, gi) => (
+          <div key={gi} style={{
+            position: "absolute",
+            bottom: `${t * 100}%`,
+            left: 0, right: 0,
+            height: 1,
+            background: "rgba(30,37,64,0.7)",
+            pointerEvents: "none",
+          }} />
+        ))}
+
+        {data.map((d, i) => {
+          const heightPct = (d.count / maxCount) * 100;
+          const isHov = hovered === i;
+          const [colorTop, colorBot] = GRADIENTS[i];
+          return (
+            <div
+              key={`score-bar-${d.label}`}
+              style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", height: "100%", justifyContent: "flex-end", position: "relative" }}
+              onMouseEnter={() => setHovered(i)}
+              onMouseLeave={() => setHovered(null)}
+            >
+              {/* Tooltip */}
+              {isHov && (
+                <motion.div
+                  initial={{ opacity: 0, y: 4 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  style={{
+                    position: "absolute",
+                    bottom: `calc(${heightPct}% + 10px)`,
+                    left: "50%", transform: "translateX(-50%)",
+                    background: "#141826",
+                    border: `1px solid ${colorTop}55`,
+                    borderRadius: 6,
+                    padding: "3px 8px",
+                    fontSize: 10,
+                    color: colorTop,
+                    whiteSpace: "nowrap",
+                    zIndex: 10,
+                    fontWeight: 700,
+                    boxShadow: `0 0 8px ${colorTop}33`,
+                  }}
+                >
+                  {d.count} posts
+                </motion.div>
+              )}
+
+              {/* Bar */}
+              <motion.div
+                initial={{ height: 0 }}
+                animate={{ height: `${heightPct}%` }}
+                transition={{ delay: 0.3 + i * 0.07, duration: 0.6, ease: [0.34, 1.2, 0.64, 1] }}
+                style={{
+                  width: "100%",
+                  background: `linear-gradient(180deg, ${colorTop} 0%, ${colorBot} 100%)`,
+                  borderRadius: "5px 5px 0 0",
+                  minHeight: d.count > 0 ? 4 : 0,
+                  opacity: hovered === null || isHov ? 1 : 0.4,
+                  transition: "opacity 0.2s",
+                  boxShadow: isHov ? `0 0 16px ${colorTop}80, 0 0 6px ${colorTop}40` : "none",
+                  position: "relative",
+                }}
+              >
+                {/* Shine on top */}
+                <div style={{
+                  position: "absolute",
+                  top: 0, left: 0, right: 0,
+                  height: 3,
+                  background: `linear-gradient(90deg, transparent, ${colorTop}cc, transparent)`,
+                  borderRadius: "5px 5px 0 0",
+                }} />
+              </motion.div>
+            </div>
+          );
+        })}
+      </div>
+
+      {/* Baseline */}
+      <div style={{ height: 1, background: "#1e2540", margin: "0 2px" }} />
+
+      {/* X labels */}
+      <div style={{ display: "flex", gap: 6, padding: "5px 2px 0", marginTop: 2 }}>
+        {data.map((d, i) => (
+          <div key={i} style={{
+            flex: 1,
+            fontSize: 8,
+            color: hovered === i ? GRADIENTS[i][0] : "#4a5070",
+            textAlign: "center",
+            transition: "color 0.2s",
+            lineHeight: 1.3,
+          }}>
+            {d.label}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+const DAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+
+export function OverviewTab({ posts, batchPosts, selectedTerms, justFetched, totalAnalyzed }: OverviewTabProps) {
+  const totalPosts = posts.length;
+  const toxicCount = posts.filter(p => p.label === "toxic").length;
+  const toxicRate = totalPosts ? (toxicCount / totalPosts) * 100 : 0;
+
+  // Batch-specific spike detection
+  const batchToxicCount = batchPosts.filter(p => p.label === "toxic").length;
+  const batchToxicRate = batchPosts.length ? (batchToxicCount / batchPosts.length) * 100 : 0;
+
+  const avgScoreRaw = batchPosts.length
+    ? batchPosts.reduce((s, p) => s + p.score, 0) / batchPosts.length
+    : 0;
+
+  const termCounts: Record<string, number> = {};
+  for (const p of batchPosts) {
+    termCounts[p.query_term] = (termCounts[p.query_term] || 0) + 1;
+  }
+  const topTerm = Object.keys(termCounts).sort((a, b) => termCounts[b] - termCounts[a])[0] || "—";
+
+  // WHY totalAnalyzed directly (no || totalPosts fallback):
+  // The old fallback `totalAnalyzed || totalPosts` caused the counter to show
+  // totalPosts (200) on load, then jump DOWN to totalAnalyzed (25) after the
+  // first fetch. Now App.tsx seeds totalAnalyzed from the DB count on mount,
+  // so the fallback is no longer needed and only caused confusion.
+  const animatedTotal = useAnimatedNumber(totalAnalyzed);
+  const animatedToxicRate = useAnimatedFloat(toxicRate, 900, 1);
+  const animatedAvg = useAnimatedFloat(avgScoreRaw, 900, 3);
+
+  const timeData = useMemo(() => {
+    const buckets: Record<number, { sum: number; count: number }> = {};
+    for (const p of posts) {
+      const h = new Date(p.created_at).getUTCHours();
+      if (!buckets[h]) buckets[h] = { sum: 0, count: 0 };
+      buckets[h].sum += p.score;
+      buckets[h].count += 1;
+    }
+    return Array.from({ length: 24 }, (_, h) => ({
+      hour: `${String(h).padStart(2, "0")}:00`,
+      value: buckets[h] ? +(buckets[h].sum / buckets[h].count).toFixed(3) : null,
+    }));
+  }, [posts]);
+
+  const scoreDistData = useMemo(() => {
+    const bins = [0, 0, 0, 0, 0];
+    for (const p of batchPosts) {
+      const idx = Math.min(4, Math.floor(p.score / 0.2));
+      bins[idx]++;
+    }
+    const COLORS = ["#2ecc71", "#a3e635", "#ffeb3b", "#ff8c42", "#ff4b4b"];
+    const LABELS = ["0-0.2", "0.2-0.4", "0.4-0.6", "0.6-0.8", "0.8-1.0"];
+    return LABELS.map((label, i) => ({ label, count: bins[i], color: COLORS[i] }));
+  }, [batchPosts]);
+
+  const heatmapData = useMemo(() => {
+    const grid: Record<string, { sum: number; count: number }> = {};
+    for (const p of posts) {
+      const d = new Date(p.created_at);
+      const day = (d.getDay() + 6) % 7;
+      const hour = d.getHours();
+      const key = `${day}-${hour}`;
+      if (!grid[key]) grid[key] = { sum: 0, count: 0 };
+      grid[key].sum += p.score;
+      grid[key].count += 1;
+    }
+    return grid;
+  }, [posts]);
+
+  const maxHeat = useMemo(() => {
+    let mx = 0;
+    for (const v of Object.values(heatmapData)) {
+      mx = Math.max(mx, v.count ? v.sum / v.count : 0);
+    }
+    return mx || 1;
+  }, [heatmapData]);
+
+  const recentPosts = batchPosts.slice(0, 20);
+
+  return (
+    <div style={{ padding: "1.2rem 1.4rem", display: "flex", flexDirection: "column", gap: "1.1rem" }}>
+
+      <SpikeAlert batchToxicRate={batchToxicRate} batchCount={batchPosts.length} />
+
+      {/* Metric cards */}
+      <div style={{ display: "flex", gap: "0.9rem" }}>
+        <MetricCard
+          label="Posts analyzed"
+          displayValue={String(animatedTotal)}
+          sub={`+${batchPosts.length} this batch`}
+          subIcon="📥"
+          subColor="#4ade80"
+          subBg="rgba(74,222,128,0.08)"
+          valueColor="#fff"
+          delay={0}
+        />
+        <MetricCard
+          label="Toxic rate"
+          displayValue={`${animatedToxicRate}%`}
+          sub={toxicRate >= 38 ? "↑ High — monitor closely" : "✓ Within expected range"}
+          subIcon={toxicRate >= 38 ? "🔴" : undefined}
+          subColor={toxicRate >= 38 ? "#ff4b4b" : "#2ecc71"}
+          subBg={toxicRate >= 38 ? "rgba(255,75,75,0.1)" : "rgba(46,204,113,0.08)"}
+          valueColor="#ff4b4b"
+          delay={0.07}
+          isAlert={toxicRate >= 38}
+        />
+        <MetricCard
+          label="Avg score (last batch)"
+          displayValue={animatedAvg}
+          sub="mean toxicity · last fetch"
+          subIcon="📊"
+          subColor="#ff8c42"
+          subBg="rgba(255,140,66,0.08)"
+          valueColor="#ff8c42"
+          delay={0.14}
+        />
+        <MetricCard
+          label="Top term"
+          displayValue={topTerm}
+          sub="most frequent · last batch"
+          subIcon="🏷️"
+          subColor="#9b7fd4"
+          subBg="rgba(155,127,212,0.1)"
+          valueColor="#9b7fd4"
+          delay={0.21}
+        />
+      </div>
+
+      {/* Charts row */}
+      <div style={{ display: "flex", gap: "0.9rem" }}>
+        <motion.div
+          initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.28, duration: 0.45 }}
+          style={{ flex: 3, background: "#0d1120", border: "1px solid #1e2540", borderRadius: 10, padding: "0.9rem 1rem" }}
+        >
+          <div style={{ fontSize: "0.95rem", fontWeight: 700, color: "#e8eaf0", marginBottom: "0.7rem" }}>Toxicity over time</div>
+          <CustomAreaChart data={timeData} />
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.35, duration: 0.45 }}
+          style={{ flex: 1, background: "#0d1120", border: "1px solid #1e2540", borderRadius: 10, padding: "0.9rem 1rem" }}
+        >
+          <div style={{ fontSize: "0.95rem", fontWeight: 700, color: "#e8eaf0", marginBottom: "0.7rem" }}>Score distribution</div>
+          <CustomScoreBars data={scoreDistData} />
+        </motion.div>
+      </div>
+
+      {/* Activity heatmap */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.42, duration: 0.45 }}
+        style={{ background: "#0d1120", border: "1px solid #1e2540", borderRadius: 10, padding: "0.9rem 1rem" }}
+      >
+        <div style={{ fontSize: "0.95rem", fontWeight: 700, color: "#e8eaf0", marginBottom: "0.8rem" }}>Activity heatmap</div>
+        <div style={{ overflowX: "auto" }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 2, marginBottom: 4 }}>
+            <div style={{ width: 36 }} />
+            {Array.from({ length: 24 }, (_, h) => (
+              <div key={`hlabel-${h}`} style={{ width: 20, fontSize: "0.52rem", color: "#3a4060", textAlign: "center", userSelect: "none" }}>
+                {h % 6 === 0 ? h : ""}
+              </div>
+            ))}
+          </div>
+          {DAYS.map((day, d) => (
+            <div key={`day-${day}`} style={{ display: "flex", alignItems: "center", gap: 2, marginBottom: 2 }}>
+              <div style={{ width: 36, fontSize: "0.65rem", color: "#5a6080", textAlign: "right", paddingRight: 6 }}>{day}</div>
+              {Array.from({ length: 24 }, (_, h) => {
+                const cell = heatmapData[`${d}-${h}`];
+                const intensity = cell ? (cell.sum / cell.count) / maxHeat : 0;
+                const hasData = cell && cell.count > 0;
+                const r = hasData ? Math.round(30 + (255 - 30) * intensity) : 26;
+                const g = hasData ? Math.round(37 + (75 - 37) * intensity) : 29;
+                const b = hasData ? Math.round(64 + (75 - 64) * intensity) : 46;
+                return (
+                  <motion.div
+                    key={`cell-${day}-${h}`}
+                    initial={{ opacity: 0, scale: 0.5 }}
+                    animate={{ opacity: 1, scale: 1 }}
+                    transition={{ delay: (d * 24 + h) * 0.002, duration: 0.25 }}
+                    title={hasData ? `${day} ${String(h).padStart(2, "0")}:00 — avg ${(cell.sum / cell.count).toFixed(2)}` : `${day} ${String(h).padStart(2, "0")}:00 — no data`}
+                    style={{ width: 20, height: 20, borderRadius: 3, background: `rgb(${r},${g},${b})`, cursor: hasData ? "pointer" : "default" }}
+                  />
+                );
+              })}
+            </div>
+          ))}
+          <div style={{ marginTop: 8, display: "flex", alignItems: "center", gap: 7, fontSize: "0.65rem", color: "#5a6080" }}>
+            <span>Low</span>
+            <div style={{ width: 90, height: 7, borderRadius: 4, background: "linear-gradient(90deg, #1a1d2e, #ff4b4b)" }} />
+            <span>High toxicity</span>
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Recent posts */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.5, duration: 0.45 }}
+        style={{ background: "#0d1120", border: "1px solid #1e2540", borderRadius: 10, padding: "0.9rem 1rem" }}
+      >
+        <div style={{ fontSize: "0.95rem", fontWeight: 700, color: "#e8eaf0", marginBottom: "0.6rem" }}>Recent posts (last batch)</div>
+        {recentPosts.length === 0 ? (
+          <div style={{ color: "#5a6080", fontSize: "0.8rem", padding: "1rem 0" }}>Click &quot;Fetch &amp; Analyze&quot; to see recent posts.</div>
+        ) : (
+          <div style={{ maxHeight: 300, overflowY: "auto", display: "flex", flexDirection: "column" }}>
+            {recentPosts.map((p, i) => {
+              const sc = p.score >= 0.7 ? "#ff4b4b" : p.score >= 0.4 ? "#ff9f43" : "#2ecc71";
+              const scBg = p.score >= 0.7 ? "rgba(255,75,75,0.12)" : p.score >= 0.4 ? "rgba(255,159,67,0.12)" : "rgba(46,204,113,0.12)";
+              return (
+                <motion.div
+                  key={p.id}
+                  initial={{ opacity: 0, x: -10 }} animate={{ opacity: 1, x: 0 }} transition={{ delay: i * 0.03 }}
+                  style={{ display: "flex", alignItems: "center", gap: "0.6rem", padding: "0.55rem 0.3rem", borderBottom: "1px solid #141826" }}
+                >
+                  <div style={{ minWidth: 50, textAlign: "center", fontSize: "0.7rem", fontWeight: 700, borderRadius: 6, padding: "0.2rem 0.3rem", background: scBg, color: sc, flexShrink: 0 }}>
+                    {p.score.toFixed(3)}
+                  </div>
+                  <div style={{ flex: 1, fontSize: "0.77rem", color: "#c8cce0" }}>{p.text.slice(0, 110)}</div>
+                  <div style={{ fontSize: "0.65rem", padding: "0.1rem 0.4rem", borderRadius: 999, background: "rgba(155,127,212,0.12)", color: "#c3a6ff", border: "1px solid rgba(155,127,212,0.4)", whiteSpace: "nowrap", flexShrink: 0 }}>
+                    {p.query_term}
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        )}
+      </motion.div>
+    </div>
+  );
+}

frontend/src/app/components/Sidebar.tsx

@@ -0,0 +1,335 @@
+import { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { X } from "lucide-react";
+import { ALGOSPEAK_TERMS, Post, nodeColor } from "./mockData";
+
+interface SidebarProps {
+  open: boolean;
+  selectedTerms: string[];
+  setSelectedTerms: (terms: string[]) => void;
+  threshold: number;
+  setThreshold: (v: number) => void;
+  sampling: number;
+  setSampling: (v: number) => void;
+  autoRefresh: boolean;
+  setAutoRefresh: (v: boolean) => void;
+  onFetch: () => void;
+  posts: Post[];
+  fetching: boolean;
+}
+
+function SectionLabel({ children }: { children: React.ReactNode }) {
+  return (
+    <div style={{
+      fontSize: "0.58rem",
+      textTransform: "uppercase",
+      letterSpacing: "1.4px",
+      color: "#3a4060",
+      marginTop: "1rem",
+      marginBottom: "0.35rem",
+    }}>
+      {children}
+    </div>
+  );
+}
+
+export function Sidebar({
+  open,
+  selectedTerms,
+  setSelectedTerms,
+  threshold,
+  setThreshold,
+  sampling,
+  setSampling,
+  autoRefresh,
+  setAutoRefresh,
+  onFetch,
+  posts,
+  fetching,
+}: SidebarProps) {
+  const [customInput, setCustomInput] = useState("");
+  const [customTerms, setCustomTerms] = useState<string[]>([]);
+
+  const addCustom = () => {
+    const t = customInput.trim().toLowerCase();
+    if (!t) return;
+    if (!customTerms.includes(t)) setCustomTerms(prev => [...prev, t]);
+    if (!selectedTerms.includes(t)) setSelectedTerms([...selectedTerms, t]);
+    setCustomInput("");
+  };
+
+  // Compute toxic ratio per selected term from posts
+  const termRatio: Record<string, number> = {};
+  for (const term of selectedTerms) {
+    const matching = posts.filter(p => p.query_term === term || p.text.toLowerCase().includes(term));
+    if (matching.length === 0) { termRatio[term] = Math.random() * 0.8; continue; }
+    termRatio[term] = matching.filter(p => p.label === "toxic").length / matching.length;
+  }
+
+  return (
+    <AnimatePresence>
+      {open && (
+        <motion.aside
+          key="sidebar"
+          initial={{ x: -260, opacity: 0 }}
+          animate={{ x: 0, opacity: 1 }}
+          exit={{ x: -260, opacity: 0 }}
+          transition={{ type: "spring", stiffness: 280, damping: 30 }}
+          style={{
+            width: 240,
+            minWidth: 240,
+            background: "#0d1120",
+            borderRight: "1px solid #1e2540",
+            padding: "1rem 0.85rem 1.5rem",
+            display: "flex",
+            flexDirection: "column",
+            overflowY: "auto",
+            overflowX: "hidden",
+          }}
+        >
+          {/* Tracked terms */}
+          <SectionLabel>Tracked terms</SectionLabel>
+          <div style={{ display: "flex", flexDirection: "column", gap: 4, flexShrink: 0 }}>
+            {selectedTerms.slice(0, 6).map(term => {
+              const pct = Math.round((termRatio[term] ?? 0) * 100);
+              const color = nodeColor(termRatio[term] ?? 0);
+              return (
+                <motion.div
+                  key={term}
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    background: "#141826",
+                    border: "1px solid #1e2540",
+                    borderRadius: 8,
+                    padding: "5px 9px",
+                  }}
+                >
+                  <div style={{ display: "flex", alignItems: "center", gap: 7 }}>
+                    <div style={{ width: 8, height: 8, borderRadius: "50%", background: color, flexShrink: 0 }} />
+                    <span style={{ fontSize: "0.78rem", color: "#c8cce0" }}>{term}</span>
+                  </div>
+                  <span style={{ fontSize: "0.68rem", color: "#3a4060" }}>{pct}%</span>
+                </motion.div>
+              );
+            })}
+          </div>
+
+          {/* Algospeak terms multiselect */}
+          <SectionLabel>Algospeak terms</SectionLabel>
+          <div style={{
+            background: "#141826",
+            border: "1px solid #1e2540",
+            borderRadius: 8,
+            padding: "6px",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 4,
+            maxHeight: 160,
+            overflowY: "auto",
+            flexShrink: 0,
+          }}>
+            {[...ALGOSPEAK_TERMS, ...customTerms].map(t => {
+              const selected = selectedTerms.includes(t);
+              return (
+                <button
+                  key={t}
+                  onClick={() => {
+                    setSelectedTerms(
+                      selected
+                        ? selectedTerms.filter(s => s !== t)
+                        : [...selectedTerms, t]
+                    );
+                  }}
+                  style={{
+                    padding: "2px 6px 2px 8px",
+                    borderRadius: 999,
+                    fontSize: "0.68rem",
+                    cursor: "pointer",
+                    border: "1px solid",
+                    transition: "all 0.15s",
+                    background: selected ? "rgba(155,127,212,0.18)" : "transparent",
+                    borderColor: selected ? "rgba(155,127,212,0.5)" : "#2a3050",
+                    color: selected ? "#c3a6ff" : "#5a6080",
+                    display: "flex",
+                    alignItems: "center",
+                    gap: 4,
+                  }}
+                >
+                  {t}
+                  {selected && (
+                    <span
+                      onClick={e => {
+                        e.stopPropagation();
+                        setSelectedTerms(selectedTerms.filter(s => s !== t));
+                      }}
+                      style={{
+                        display: "inline-flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        width: 12,
+                        height: 12,
+                        borderRadius: "50%",
+                        background: "rgba(155,127,212,0.3)",
+                        color: "#c3a6ff",
+                        fontSize: "0.6rem",
+                        lineHeight: 1,
+                        flexShrink: 0,
+                        cursor: "pointer",
+                      }}
+                    >
+                      ✕
+                    </span>
+                  )}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Custom term input */}
+          <SectionLabel>Add custom term</SectionLabel>
+          <div style={{ display: "flex", gap: 6, flexShrink: 0 }}>
+            <input
+              value={customInput}
+              onChange={e => setCustomInput(e.target.value)}
+              onKeyDown={e => e.key === "Enter" && addCustom()}
+              placeholder="Type a term..."
+              style={{
+                flex: 1,
+                background: "#141826",
+                border: "1px solid #1e2540",
+                borderRadius: 7,
+                padding: "5px 9px",
+                color: "#e8eaf0",
+                fontSize: "0.78rem",
+                outline: "none",
+              }}
+            />
+          </div>
+          <button
+            onClick={addCustom}
+            style={{
+              marginTop: 6,
+              width: "100%",
+              background: "rgba(155,127,212,0.12)",
+              border: "1px solid rgba(155,127,212,0.3)",
+              borderRadius: 7,
+              color: "#c3a6ff",
+              fontSize: "0.78rem",
+              padding: "5px 0",
+              cursor: "pointer",
+              fontWeight: 600,
+              flexShrink: 0,
+            }}
+          >
+            + Add term
+          </button>
+
+          {/* Threshold slider */}
+          <SectionLabel>Threshold</SectionLabel>
+          <div style={{ paddingInline: 2, flexShrink: 0 }}>
+            <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 4 }}>
+              <span style={{ fontSize: "0.72rem", color: "#ff6b3d", fontWeight: 700 }}>
+                {threshold.toFixed(2)}
+              </span>
+            </div>
+            <input
+              type="range"
+              min={0} max={1} step={0.05}
+              value={threshold}
+              onChange={e => setThreshold(parseFloat(e.target.value))}
+              style={{ width: "100%", accentColor: "#ff4b4b" }}
+            />
+          </div>
+
+          {/* Sampling slider */}
+          <SectionLabel>Sampling</SectionLabel>
+          <div style={{ paddingInline: 2, flexShrink: 0 }}>
+            <div style={{ display: "flex", justifyContent: "flex-end", marginBottom: 4 }}>
+              <span style={{ fontSize: "0.72rem", color: "#ff6b3d", fontWeight: 700 }}>{sampling}</span>
+            </div>
+            <input
+              type="range"
+              min={5} max={100} step={5}
+              value={sampling}
+              onChange={e => setSampling(parseInt(e.target.value))}
+              style={{ width: "100%", accentColor: "#ff4b4b" }}
+            />
+          </div>
+
+          {/* Fetch section */}
+          <SectionLabel>Fetch</SectionLabel>
+          <label style={{ display: "flex", alignItems: "center", gap: 7, cursor: "pointer", marginBottom: 10, flexShrink: 0 }}>
+            <input
+              type="checkbox"
+              checked={autoRefresh}
+              onChange={e => setAutoRefresh(e.target.checked)}
+              style={{ accentColor: "#ff4b4b" }}
+            />
+            <span style={{ fontSize: "0.78rem", color: "#8a90ad" }}>Auto-refresh (60s)</span>
+          </label>
+
+          <motion.button
+            onClick={onFetch}
+            disabled={fetching}
+            whileHover={{ scale: fetching ? 1 : 1.02 }}
+            whileTap={{ scale: fetching ? 1 : 0.97 }}
+            style={{
+              width: "100%",
+              background: fetching
+                ? "linear-gradient(135deg, #aa3333, #aa5f2a)"
+                : "linear-gradient(135deg, #ff4b4b, #ff8c42)",
+              color: "#fff",
+              border: "none",
+              borderRadius: 9,
+              padding: "9px 0",
+              fontWeight: 700,
+              fontSize: "0.88rem",
+              cursor: fetching ? "not-allowed" : "pointer",
+              boxShadow: fetching ? "none" : "0 0 16px rgba(255,75,75,0.3)",
+              transition: "box-shadow 0.2s",
+              flexShrink: 0,
+            }}
+          >
+            {fetching ? "Fetching…" : "Fetch & Analyze"}
+          </motion.button>
+
+          {/* Custom terms pills at bottom */}
+          {customTerms.length > 0 && (
+            <div style={{ marginTop: "0.8rem", display: "flex", flexWrap: "wrap", gap: 4, flexShrink: 0 }}>
+              {customTerms.map(t => (
+                <span
+                  key={t}
+                  style={{
+                    display: "inline-flex",
+                    alignItems: "center",
+                    gap: 3,
+                    padding: "2px 7px",
+                    borderRadius: 999,
+                    background: "rgba(155,127,212,0.1)",
+                    border: "1px solid rgba(155,127,212,0.4)",
+                    color: "#c3a6ff",
+                    fontSize: "0.65rem",
+                  }}
+                >
+                  {t}
+                  <X
+                    size={10}
+                    style={{ cursor: "pointer" }}
+                    onClick={() => {
+                      setCustomTerms(prev => prev.filter(x => x !== t));
+                      setSelectedTerms(selectedTerms.filter(x => x !== t));
+                    }}
+                  />
+                </span>
+              ))}
+            </div>
+          )}
+        </motion.aside>
+      )}
+    </AnimatePresence>
+  );
+}

frontend/src/app/components/SplashScreen.tsx

@@ -0,0 +1,279 @@
+import { useEffect, useState, useRef } from "react";
+import { motion, AnimatePresence } from "motion/react";
+
+interface SplashScreenProps {
+  onDone: () => void;
+}
+
+const TITLE = "ALGOSCOPE";
+const SUBTITLE = "Real-time algospeak & toxicity intelligence on Bluesky";
+
+// Animated background nodes for the splash
+const BG_NODES = Array.from({ length: 14 }, (_, i) => ({
+  id: i,
+  x: 8 + (i * 13.5) % 92,
+  y: 10 + (i * 17) % 80,
+  r: 3 + (i % 4) * 1.8,
+  color: i % 3 === 0 ? "#ff4b4b" : i % 3 === 1 ? "#ff8c42" : "#a6b0ff",
+  delay: i * 0.07,
+}));
+
+const BG_EDGES = [
+  [0, 3], [3, 7], [7, 11], [1, 5], [5, 9], [9, 12],
+  [2, 6], [6, 10], [0, 4], [4, 8], [8, 13], [2, 7],
+  [1, 6], [3, 10], [5, 12], [4, 11],
+];
+
+export function SplashScreen({ onDone }: SplashScreenProps) {
+  const [lettersDone, setLettersDone] = useState(0);
+  const [subtitleVisible, setSubtitleVisible] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [exiting, setExiting] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+  useEffect(() => {
+    // Letter-by-letter reveal
+    let i = 0;
+    const letterInterval = setInterval(() => {
+      i++;
+      setLettersDone(i);
+      if (i >= TITLE.length) clearInterval(letterInterval);
+    }, 80);
+
+    // Show subtitle after title is done
+    timerRef.current = setTimeout(() => setSubtitleVisible(true), 900);
+
+    // Progress bar
+    let prog = 0;
+    const progInterval = setInterval(() => {
+      prog += 1.6;
+      setProgress(Math.min(100, prog));
+      if (prog >= 100) clearInterval(progInterval);
+    }, 28);
+
+    // Exit
+    const exitTimer = setTimeout(() => {
+      setExiting(true);
+      setTimeout(onDone, 700);
+    }, 2600);
+
+    return () => {
+      clearInterval(letterInterval);
+      clearInterval(progInterval);
+      if (timerRef.current) clearTimeout(timerRef.current);
+      clearTimeout(exitTimer);
+    };
+  }, [onDone]);
+
+  return (
+    <AnimatePresence>
+      {!exiting && (
+        <motion.div
+          initial={{ opacity: 1 }}
+          exit={{ opacity: 0, scale: 1.04 }}
+          transition={{ duration: 0.65, ease: "easeInOut" }}
+          style={{
+            position: "fixed",
+            inset: 0,
+            zIndex: 9999,
+            background: "#080b12",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            overflow: "hidden",
+          }}
+        >
+          {/* Animated background graph */}
+          <svg
+            style={{
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              opacity: 0.18,
+            }}
+            viewBox="0 0 100 100"
+            preserveAspectRatio="xMidYMid slice"
+          >
+            {BG_EDGES.map(([a, b], i) => {
+              const nodeA = BG_NODES[a];
+              const nodeB = BG_NODES[b];
+              return (
+                <motion.line
+                  key={i}
+                  x1={nodeA.x} y1={nodeA.y}
+                  x2={nodeB.x} y2={nodeB.y}
+                  stroke="#a6b0ff"
+                  strokeWidth="0.3"
+                  initial={{ pathLength: 0, opacity: 0 }}
+                  animate={{ pathLength: 1, opacity: 1 }}
+                  transition={{ delay: 0.3 + i * 0.04, duration: 0.5 }}
+                />
+              );
+            })}
+            {BG_NODES.map(node => (
+              <motion.circle
+                key={node.id}
+                cx={node.x} cy={node.y} r={node.r}
+                fill={node.color}
+                initial={{ scale: 0, opacity: 0 }}
+                animate={{ scale: 1, opacity: 0.7 }}
+                transition={{ delay: node.delay, duration: 0.4, type: "spring" }}
+              />
+            ))}
+          </svg>
+
+          {/* Radial glow */}
+          <div
+            style={{
+              position: "absolute",
+              width: 520,
+              height: 520,
+              borderRadius: "50%",
+              background:
+                "radial-gradient(circle, rgba(255,75,75,0.08) 0%, rgba(10,13,20,0) 70%)",
+              pointerEvents: "none",
+            }}
+          />
+
+          {/* Logo icon */}
+          <motion.div
+            initial={{ scale: 0, rotate: -15 }}
+            animate={{ scale: 1, rotate: 0 }}
+            transition={{ duration: 0.5, type: "spring", stiffness: 200 }}
+            style={{
+              width: 72,
+              height: 72,
+              borderRadius: 18,
+              background: "linear-gradient(135deg, #ff4b4b, #ff8c42)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "2.2rem",
+              fontWeight: 900,
+              color: "#fff",
+              boxShadow:
+                "0 0 40px rgba(255,75,75,0.5), 0 0 80px rgba(255,75,75,0.2)",
+              marginBottom: "1.5rem",
+            }}
+          >
+            A
+          </motion.div>
+
+          {/* Title: letter by letter */}
+          <div
+            style={{
+              display: "flex",
+              gap: 3,
+              marginBottom: "1rem",
+            }}
+          >
+            {TITLE.split("").map((char, i) => (
+              <motion.span
+                key={i}
+                initial={{ opacity: 0, y: 20, filter: "blur(8px)" }}
+                animate={
+                  i < lettersDone
+                    ? { opacity: 1, y: 0, filter: "blur(0px)" }
+                    : { opacity: 0, y: 20, filter: "blur(8px)" }
+                }
+                transition={{ duration: 0.3, ease: "easeOut" }}
+                style={{
+                  fontSize: "3.2rem",
+                  fontWeight: 900,
+                  letterSpacing: "0.06em",
+                  color: i < 4 ? "#ff4b4b" : "#e8eaf0",
+                  textShadow:
+                    i < 4
+                      ? "0 0 30px rgba(255,75,75,0.6)"
+                      : "0 0 20px rgba(232,234,240,0.2)",
+                  fontFamily: "system-ui, -apple-system, sans-serif",
+                }}
+              >
+                {char}
+              </motion.span>
+            ))}
+          </div>
+
+          {/* Subtitle */}
+          <AnimatePresence>
+            {subtitleVisible && (
+              <motion.div
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.5 }}
+                style={{
+                  fontSize: "0.9rem",
+                  color: "#6a70a0",
+                  letterSpacing: "0.04em",
+                  maxWidth: 440,
+                  textAlign: "center",
+                  marginBottom: "2.5rem",
+                  fontFamily: "system-ui, -apple-system, sans-serif",
+                }}
+              >
+                {SUBTITLE}
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          {/* Progress bar */}
+          <div
+            style={{
+              width: 260,
+              height: 3,
+              background: "#1a1f35",
+              borderRadius: 999,
+              overflow: "hidden",
+            }}
+          >
+            <motion.div
+              style={{
+                height: "100%",
+                background: "linear-gradient(90deg, #ff4b4b, #ff8c42)",
+                borderRadius: 999,
+                boxShadow: "0 0 10px rgba(255,75,75,0.5)",
+                width: `${progress}%`,
+              }}
+            />
+          </div>
+
+          {/* Loading label */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.4 }}
+            style={{
+              marginTop: "0.75rem",
+              fontSize: "0.62rem",
+              color: "#3a4060",
+              letterSpacing: "2px",
+              textTransform: "uppercase",
+              fontFamily: "system-ui, -apple-system, sans-serif",
+            }}
+          >
+            {progress < 100 ? "Loading intelligence engine…" : "Ready"}
+          </motion.div>
+
+          {/* Version badge */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.8 }}
+            style={{
+              position: "absolute",
+              bottom: "1.5rem",
+              right: "1.5rem",
+              fontSize: "0.62rem",
+              color: "#2a3050",
+              fontFamily: "system-ui, -apple-system, sans-serif",
+            }}
+          >
+            by Odeliya Charitonova · TAU CS
+          </motion.div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}

frontend/src/app/components/TermComparisonTab.tsx

@@ -0,0 +1,364 @@
+import { useState } from "react";
+import { motion } from "motion/react";
+import { Post, ALGOSPEAK_TERMS, nodeColor } from "./mockData";
+
+interface Props {
+  posts: Post[];
+}
+
+function termStats(posts: Post[], term: string) {
+  const matched = posts.filter(p =>
+    p.query_term === term || p.text.toLowerCase().includes(term)
+  );
+  if (!matched.length) return null;
+  const scores = matched.map(p => p.score);
+  const toxicN = matched.filter(p => p.label === "toxic").length;
+  return {
+    count: matched.length,
+    toxicRate: (toxicN / matched.length) * 100,
+    avgScore: scores.reduce((a, b) => a + b, 0) / scores.length,
+    maxScore: Math.max(...scores),
+    posts: matched,
+  };
+}
+
+const BIN_LABELS = ["0-0.2", "0.2-0.4", "0.4-0.6", "0.6-0.8", "0.8-1.0"];
+
+function binPosts(posts: Post[]) {
+  const bins = [0, 0, 0, 0, 0];
+  for (const p of posts) {
+    const idx = Math.min(4, Math.floor(p.score / 0.2));
+    bins[idx]++;
+  }
+  return bins;
+}
+
+export function TermComparisonTab({ posts }: Props) {
+  const [termA, setTermA] = useState(ALGOSPEAK_TERMS[0]);
+  const [termB, setTermB] = useState(ALGOSPEAK_TERMS[1]);
+  const [hovered, setHovered] = useState<{ binIdx: number; series: "a" | "b" } | null>(null);
+
+  const sA = termStats(posts, termA);
+  const sB = termStats(posts, termB);
+
+  const selectStyle: React.CSSProperties = {
+    background: "#141826",
+    border: "1px solid #1e2540",
+    borderRadius: 8,
+    padding: "6px 10px",
+    color: "#e8eaf0",
+    fontSize: "0.83rem",
+    width: "100%",
+    cursor: "pointer",
+  };
+
+  const compData = BIN_LABELS.map((label, i) => ({
+    label,
+    a: sA ? binPosts(sA.posts)[i] : 0,
+    b: sB ? binPosts(sB.posts)[i] : 0,
+  }));
+
+  return (
+    <div style={{ padding: "1.2rem 1.4rem", display: "flex", flexDirection: "column", gap: "1.1rem" }}>
+      <motion.div
+        initial={{ opacity: 0, y: 12 }}
+        animate={{ opacity: 1, y: 0 }}
+        style={{ color: "#5a6080", fontSize: "0.82rem" }}
+      >
+        Select two algospeak terms to compare their toxicity profiles from all stored posts.
+      </motion.div>
+
+      {/* Term selectors */}
+      <div style={{ display: "flex", gap: "1rem" }}>
+        <motion.div
+          initial={{ opacity: 0, y: 14 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.07 }}
+          style={{ flex: 1 }}
+        >
+          <div style={{ fontSize: "0.68rem", color: "#5a6080", marginBottom: 5 }}>Term A</div>
+          <select value={termA} onChange={e => setTermA(e.target.value)} style={selectStyle}>
+            {ALGOSPEAK_TERMS.map(t => <option key={t} value={t}>{t}</option>)}
+          </select>
+        </motion.div>
+        <motion.div
+          initial={{ opacity: 0, y: 14 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.12 }}
+          style={{ flex: 1 }}
+        >
+          <div style={{ fontSize: "0.68rem", color: "#5a6080", marginBottom: 5 }}>Term B</div>
+          <select value={termB} onChange={e => setTermB(e.target.value)} style={selectStyle}>
+            {ALGOSPEAK_TERMS.map(t => <option key={t} value={t}>{t}</option>)}
+          </select>
+        </motion.div>
+      </div>
+
+      {termA === termB && (
+        <div style={{
+          background: "rgba(255,159,67,0.08)",
+          border: "1px solid rgba(255,159,67,0.2)",
+          borderRadius: 8,
+          padding: "0.6rem 1rem",
+          color: "#ff9f43",
+          fontSize: "0.8rem",
+        }}>
+          Select two different terms to compare.
+        </div>
+      )}
+
+      {termA !== termB && (
+        <>
+          {/* Stat cards */}
+          <div style={{ display: "flex", gap: "1rem" }}>
+            {[
+              { term: termA, stats: sA, color: "#a6b0ff" },
+              { term: termB, stats: sB, color: "#ff8c42" },
+            ].map(({ term, stats, color }, idx) => (
+              <motion.div
+                key={term}
+                initial={{ opacity: 0, y: 18 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: idx * 0.08 + 0.15 }}
+                style={{
+                  flex: 1,
+                  background: "#0d1120",
+                  border: "1px solid #1e2540",
+                  borderRadius: 10,
+                  padding: "0.9rem 1rem",
+                }}
+              >
+                <div style={{ fontSize: "0.95rem", fontWeight: 700, color: "#e8eaf0", marginBottom: "0.6rem" }}>
+                  &ldquo;{term}&rdquo;
+                </div>
+                {!stats ? (
+                  <div style={{ color: "#5a6080", fontSize: "0.8rem" }}>No data — fetch more posts first.</div>
+                ) : (
+                  <div style={{ display: "flex", gap: "1.5rem", flexWrap: "wrap" }}>
+                    {[
+                      { label: "Posts", value: String(stats.count), valueColor: color },
+                      { label: "Toxic rate", value: `${stats.toxicRate.toFixed(1)}%`, valueColor: nodeColor(stats.toxicRate / 100) },
+                      { label: "Avg score", value: stats.avgScore.toFixed(3), valueColor: nodeColor(stats.avgScore) },
+                      { label: "Max score", value: stats.maxScore.toFixed(3), valueColor: "#ff4b4b" },
+                    ].map(({ label, value, valueColor }) => (
+                      <div key={label}>
+                        <div style={{ fontSize: "0.58rem", textTransform: "uppercase", letterSpacing: "1px", color: "#3a4060", marginBottom: 4 }}>
+                          {label}
+                        </div>
+                        <div style={{ fontSize: "1.25rem", fontWeight: 700, color: valueColor }}>
+                          {value}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </motion.div>
+            ))}
+          </div>
+
+          {/* Comparison chart — custom div-based with enhanced visuals */}
+          {sA && sB && (() => {
+            const binsA = binPosts(sA.posts);
+            const binsB = binPosts(sB.posts);
+            const maxVal = Math.max(...binsA, ...binsB, 1);
+            const gridLines = [0.25, 0.5, 0.75, 1.0];
+            return (
+              <motion.div
+                initial={{ opacity: 0, y: 18 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.3 }}
+                style={{
+                  background: "#0d1120",
+                  border: "1px solid #1e2540",
+                  borderRadius: 10,
+                  padding: "1rem 1.1rem 0.8rem",
+                }}
+              >
+                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.6rem" }}>
+                  <div style={{ fontSize: "0.95rem", fontWeight: 700, color: "#e8eaf0" }}>
+                    Score distribution comparison
+                  </div>
+                  {/* Legend */}
+                  <div style={{ display: "flex", gap: "1rem" }}>
+                    {[{ label: termA, color: "#a6b0ff", glow: "rgba(166,176,255,0.4)" }, { label: termB, color: "#ff8c42", glow: "rgba(255,140,66,0.4)" }].map(({ label, color, glow }) => (
+                      <div key={label} style={{ display: "flex", alignItems: "center", gap: 6, fontSize: "0.72rem", color: "#8a90ad" }}>
+                        <div style={{
+                          width: 10, height: 10, borderRadius: 2,
+                          background: color,
+                          boxShadow: `0 0 6px ${glow}`,
+                        }} />
+                        {label}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Chart wrapper with y-axis */}
+                <div style={{ display: "flex", gap: 6 }}>
+                  {/* Y-axis labels */}
+                  <div style={{ display: "flex", flexDirection: "column", justifyContent: "space-between", alignItems: "flex-end", height: 180, paddingBottom: 18, paddingTop: 2 }}>
+                    {[maxVal, Math.round(maxVal * 0.75), Math.round(maxVal * 0.5), Math.round(maxVal * 0.25), 0].map((v, i) => (
+                      <div key={i} style={{ fontSize: 9, color: "#3a4060", lineHeight: 1 }}>{v}</div>
+                    ))}
+                  </div>
+
+                  {/* Chart area */}
+                  <div style={{ flex: 1, position: "relative" }}>
+                    {/* Grid lines */}
+                    <div style={{ position: "absolute", inset: "0 0 18px 0", display: "flex", flexDirection: "column", justifyContent: "space-between", pointerEvents: "none" }}>
+                      {gridLines.map((_, i) => (
+                        <div key={i} style={{ height: 1, background: "rgba(30,37,64,0.8)", width: "100%" }} />
+                      ))}
+                      <div style={{ height: 1, background: "#1e2540", width: "100%" }} />
+                    </div>
+
+                    {/* Bars */}
+                    <div style={{ display: "flex", alignItems: "flex-end", gap: "0.5rem", height: 162, padding: "0 2px" }}>
+                      {BIN_LABELS.map((label, i) => (
+                        <div key={`bin-group-${i}`} style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 0, height: "100%" }}>
+                          <div style={{ flex: 1, display: "flex", alignItems: "flex-end", gap: 2, width: "100%" }}>
+                            {/* Bar A */}
+                            <div
+                              style={{ flex: 1, display: "flex", alignItems: "flex-end", height: "100%", cursor: "pointer" }}
+                              onMouseEnter={() => setHovered({ binIdx: i, series: "a" })}
+                              onMouseLeave={() => setHovered(null)}
+                            >
+                              <motion.div
+                                initial={{ height: 0 }}
+                                animate={{ height: `${(binsA[i] / maxVal) * 100}%` }}
+                                transition={{ delay: 0.35 + i * 0.04, duration: 0.55, ease: "easeOut" }}
+                                style={{
+                                  width: "100%",
+                                  background: "linear-gradient(180deg, #c0c8ff 0%, #7080e8 100%)",
+                                  opacity: hovered && hovered.binIdx === i && hovered.series === "a" ? 1 : 0.82,
+                                  borderRadius: "3px 3px 0 0",
+                                  minHeight: binsA[i] > 0 ? 3 : 0,
+                                  position: "relative",
+                                  boxShadow: hovered?.binIdx === i && hovered?.series === "a"
+                                    ? "0 0 12px rgba(166,176,255,0.6)"
+                                    : "none",
+                                  transition: "box-shadow 0.15s, opacity 0.15s",
+                                }}
+                              >
+                                {hovered?.binIdx === i && hovered?.series === "a" && (
+                                  <div style={{
+                                    position: "absolute", bottom: "calc(100% + 5px)", left: "50%", transform: "translateX(-50%)",
+                                    background: "#1a2038", border: "1px solid #2e3a5e", borderRadius: 5,
+                                    padding: "4px 8px", fontSize: 10, color: "#a6b0ff", whiteSpace: "nowrap", zIndex: 10,
+                                    boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+                                  }}>
+                                    <span style={{ fontWeight: 700 }}>{termA}</span>: {binsA[i]}
+                                  </div>
+                                )}
+                              </motion.div>
+                            </div>
+                            {/* Bar B */}
+                            <div
+                              style={{ flex: 1, display: "flex", alignItems: "flex-end", height: "100%", cursor: "pointer" }}
+                              onMouseEnter={() => setHovered({ binIdx: i, series: "b" })}
+                              onMouseLeave={() => setHovered(null)}
+                            >
+                              <motion.div
+                                initial={{ height: 0 }}
+                                animate={{ height: `${(binsB[i] / maxVal) * 100}%` }}
+                                transition={{ delay: 0.38 + i * 0.04, duration: 0.55, ease: "easeOut" }}
+                                style={{
+                                  width: "100%",
+                                  background: "linear-gradient(180deg, #ffa96a 0%, #e06820 100%)",
+                                  opacity: hovered && hovered.binIdx === i && hovered.series === "b" ? 1 : 0.82,
+                                  borderRadius: "3px 3px 0 0",
+                                  minHeight: binsB[i] > 0 ? 3 : 0,
+                                  position: "relative",
+                                  boxShadow: hovered?.binIdx === i && hovered?.series === "b"
+                                    ? "0 0 12px rgba(255,140,66,0.6)"
+                                    : "none",
+                                  transition: "box-shadow 0.15s, opacity 0.15s",
+                                }}
+                              >
+                                {hovered?.binIdx === i && hovered?.series === "b" && (
+                                  <div style={{
+                                    position: "absolute", bottom: "calc(100% + 5px)", left: "50%", transform: "translateX(-50%)",
+                                    background: "#1a2038", border: "1px solid #2e3a5e", borderRadius: 5,
+                                    padding: "4px 8px", fontSize: 10, color: "#ff8c42", whiteSpace: "nowrap", zIndex: 10,
+                                    boxShadow: "0 2px 8px rgba(0,0,0,0.4)",
+                                  }}>
+                                    <span style={{ fontWeight: 700 }}>{termB}</span>: {binsB[i]}
+                                  </div>
+                                )}
+                              </motion.div>
+                            </div>
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+
+                    {/* Baseline */}
+                    <div style={{ height: 1, background: "#1e2540" }} />
+
+                    {/* X-axis labels */}
+                    <div style={{ display: "flex", gap: "0.5rem", padding: "4px 2px 0" }}>
+                      {BIN_LABELS.map((label, i) => (
+                        <div key={i} style={{ flex: 1, fontSize: 9, color: "#4a5070", textAlign: "center" }}>{label}</div>
+                      ))}
+                    </div>
+                  </div>
+                </div>
+
+                {/* X-axis title */}
+                <div style={{ textAlign: "center", fontSize: "0.65rem", color: "#3a4060", marginTop: "0.35rem", letterSpacing: "0.5px" }}>
+                  Toxicity score range
+                </div>
+              </motion.div>
+            );
+          })()}
+
+          {/* Per-term bar comparisons */}
+          {sA && sB && (
+            <motion.div
+              initial={{ opacity: 0, y: 18 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.38 }}
+              style={{
+                background: "#0d1120",
+                border: "1px solid #1e2540",
+                borderRadius: 10,
+                padding: "0.9rem 1rem",
+              }}
+            >
+              <div style={{ fontSize: "0.95rem", fontWeight: 700, color: "#e8eaf0", marginBottom: "1rem" }}>
+                Key metrics at a glance
+              </div>
+              {[
+                { label: "Toxic rate (%)", a: sA.toxicRate, b: sB.toxicRate, max: 100, colorA: "#a6b0ff", colorB: "#ff8c42" },
+                { label: "Avg score", a: sA.avgScore * 100, b: sB.avgScore * 100, max: 100, colorA: "#a6b0ff", colorB: "#ff8c42" },
+              ].map(({ label, a, b, max, colorA, colorB }) => (
+                <div key={label} style={{ marginBottom: "0.8rem" }}>
+                  <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 5 }}>
+                    <span style={{ fontSize: "0.72rem", color: "#5a6080" }}>{label}</span>
+                    <span style={{ fontSize: "0.72rem", color: "#5a6080" }}>
+                      <span style={{ color: colorA }}>{termA}: {a.toFixed(1)}</span>
+                      {" vs "}
+                      <span style={{ color: colorB }}>{termB}: {b.toFixed(1)}</span>
+                    </span>
+                  </div>
+                  <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+                    {[{ pct: a / max * 100, color: colorA }, { pct: b / max * 100, color: colorB }].map((bar, bi) => (
+                      <div key={bi} style={{ background: "#1a1f35", borderRadius: 4, height: 6, overflow: "hidden" }}>
+                        <motion.div
+                          initial={{ width: 0 }}
+                          animate={{ width: `${bar.pct}%` }}
+                          transition={{ delay: 0.4 + bi * 0.07, duration: 0.6, ease: "easeOut" }}
+                          style={{ height: "100%", background: bar.color, borderRadius: 4 }}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </motion.div>
+          )}
+        </>
+      )}
+    </div>
+  );
+}

frontend/src/app/components/figma/ImageWithFallback.tsx

@@ -0,0 +1,27 @@
+import React, { useState } from 'react'
+
+const ERROR_IMG_SRC =
+  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODgiIGhlaWdodD0iODgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjMDAwIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIuMyIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIzLjciPjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjU2IiBoZWlnaHQ9IjU2IiByeD0iNiIvPjxwYXRoIGQ9Im0xNiA1OCAxNi0xOCAzMiAzMiIvPjxjaXJjbGUgY3g9IjUzIiBjeT0iMzUiIHI9IjciLz48L3N2Zz4KCg=='
+
+export function ImageWithFallback(props: React.ImgHTMLAttributes<HTMLImageElement>) {
+  const [didError, setDidError] = useState(false)
+
+  const handleError = () => {
+    setDidError(true)
+  }
+
+  const { src, alt, style, className, ...rest } = props
+
+  return didError ? (
+    <div
+      className={`inline-block bg-gray-100 text-center align-middle ${className ?? ''}`}
+      style={style}
+    >
+      <div className="flex items-center justify-center w-full h-full">
+        <img src={ERROR_IMG_SRC} alt="Error loading image" {...rest} data-original-url={src} />
+      </div>
+    </div>
+  ) : (
+    <img src={src} alt={alt} className={className} style={style} {...rest} onError={handleError} />
+  )
+}

frontend/src/app/components/mockData.ts

@@ -0,0 +1,198 @@
+// ── API base URL ───────────────────────────────────────────────────────────────
+// WHY import.meta.env: Vite reads environment variables at build time.
+// VITE_API_URL is empty string in production (same origin as FastAPI),
+// and http://localhost:8000 in development.
+// This means the same compiled artifact works in both environments without
+// any code change — just a different .env file.
+const API_BASE = import.meta.env.VITE_API_URL ?? "";
+
+// ── Shared types ───────────────────────────────────────────────────────────────
+export const ALGOSPEAK_TERMS = [
+  "unalive", "le dollar bean", "seggs", "cute", "based",
+  "cornhole", "nsfw", "eggplant", "spicy", "ratio",
+  "touch grass", "down bad", "pretty", "why", "mean",
+  "better", "someone", "having", "harder", "top",
+];
+
+export interface Post {
+  id: number | string;  // DB returns number; mock generator uses string
+  text: string;
+  score: number;
+  label: "toxic" | "non-toxic";
+  query_term: string;
+  created_at: string;
+}
+
+export interface GraphNode {
+  id: string;
+  frequency: number;   // maps to "count" from the API
+  toxicRatio: number;  // maps to "toxic_ratio" from the API
+}
+
+export interface GraphEdge {
+  source: string;
+  target: string;
+  weight: number;
+}
+
+// ── Real API client functions ──────────────────────────────────────────────────
+
+/**
+ * Fetch recent classified posts from the database.
+ * Called on mount to populate initial dashboard state.
+ */
+export async function apiFetchPosts(limit = 100): Promise<Post[]> {
+  const res = await fetch(`${API_BASE}/posts?limit=${limit}`);
+  if (!res.ok) throw new Error(`/posts failed: ${res.status}`);
+  const data = await res.json();
+  // Normalize: API returns id as number, mock uses string — cast to keep
+  // downstream components happy with either.
+  return (data.posts as Post[]).map(p => ({
+    ...p,
+    id: p.id ?? 0,
+    query_term: p.query_term ?? "",
+    created_at: p.created_at ?? "",
+    label: p.label === "toxic" ? "toxic" : "non-toxic",
+  }));
+}
+
+/**
+ * Fetch just the total post count from the DB without pulling all rows.
+ * Used to keep the "Posts analyzed" counter in sync with the real DB after
+ * every fetch — avoids stale-closure bugs in useCallback.
+ */
+export async function apiFetchTotal(): Promise<number> {
+  const res = await fetch(`${API_BASE}/posts?limit=1`);
+  if (!res.ok) return -1;
+  const data = await res.json();
+  return typeof data.total === "number" ? data.total : -1;
+}
+
+/**
+ * Trigger a Bluesky fetch + batch inference cycle.
+ * Returns the new posts plus timing metadata for the UI.
+ */
+export async function apiFetchAndAnalyze(
+  queries: string[],
+  limit: number,
+  threshold: number,
+): Promise<{ posts: Post[]; fetchTime: number; inferTime: number; count: number; message?: string }> {
+  const res = await fetch(`${API_BASE}/fetch-and-analyze`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ queries, limit, threshold }),
+  });
+  if (!res.ok) throw new Error(`/fetch-and-analyze failed: ${res.status}`);
+  const data = await res.json();
+  const posts = (data.posts as Post[]).map(p => ({
+    ...p,
+    id: p.id ?? 0,
+    query_term: p.query_term ?? "",
+    created_at: p.created_at ?? "",
+    label: p.label === "toxic" ? "toxic" : "non-toxic",
+  }));
+  return {
+    posts,
+    fetchTime: data.fetch_time,
+    inferTime: data.infer_time,
+    count: data.count,
+    message: data.message,
+  };
+}
+
+/**
+ * Fetch co-occurrence graph data as nodes + edges JSON.
+ * The React canvas simulation handles layout — the server only provides structure.
+ */
+export async function apiGetGraphData(
+  minCooccurrence: number,
+  toxicOnly: boolean,
+): Promise<{ nodes: GraphNode[]; edges: GraphEdge[] }> {
+  const res = await fetch(
+    `${API_BASE}/graph-data?min_cooccurrence=${minCooccurrence}&toxic_only=${toxicOnly}`
+  );
+  if (!res.ok) throw new Error(`/graph-data failed: ${res.status}`);
+  const data = await res.json();
+  // Map API field names (count, toxic_ratio) to the names the graph
+  // simulation already uses (frequency, toxicRatio).
+  const nodes: GraphNode[] = (data.nodes as Array<{
+    id: string; count: number; toxic_ratio: number;
+  }>).map(n => ({
+    id: n.id,
+    frequency: n.count,
+    toxicRatio: n.toxic_ratio,
+  }));
+  return { nodes, edges: data.edges as GraphEdge[] };
+}
+
+// ── Mock data (kept for local dev / offline fallback) ─────────────────────────
+// These are only used if the API is unreachable. They are never sent to the
+// backend — no secrets here.
+
+const MOCK_TEMPLATES = [
+  "I can't believe they used {term} like that, this is getting out of hand",
+  "Found another account using {term} to avoid filters, reported it immediately",
+  "The {term} discourse is absolutely wild today, why are people like this",
+  "Seeing {term} trending again. Not a great sign for the platform tbh",
+  "Whoever invented {term} to avoid filters is frankly unhinged",
+  "Just saw {term} used unironically in a serious post, internet is something",
+  "Moderators need to update their filters, {term} is literally everywhere now",
+  "The {term} to english translation is honestly concerning for society",
+  "Why does {term} keep showing up in my feed, algorithm is broken again",
+  "Teaching my mom what {term} means was the hardest conversation I've had this year",
+  "{term} energy today, not gonna lie tbh",
+  "Petition to ban {term} from the platform. Who's with me",
+  "Using {term} unironically is such a major red flag ngl",
+  "The way {term} has evolved over time is fascinating from a linguistics POV",
+  "Just another day of seeing {term} everywhere on here smh",
+  "Why is {term} suddenly all over my fyp, is this a new trend",
+  "Blocked 3 accounts today for using {term} in my replies",
+  "{term} popped up again in the discourse, same old same old",
+  "Can we talk about how normalized {term} has become? Not ok.",
+  "Researchers studying {term} usage patterns should check bluesky tbh",
+];
+
+function randomScore(): number {
+  const r = Math.random();
+  if (r < 0.55) return 0.62 + Math.random() * 0.38;
+  if (r < 0.75) return 0.40 + Math.random() * 0.30;
+  return Math.random() * 0.38;
+}
+
+export function generateMockPosts(terms: string[], count = 180): Post[] {
+  const posts: Post[] = [];
+  const now = Date.now();
+  const dayMs = 24 * 60 * 60 * 1000;
+
+  for (let i = 0; i < count; i++) {
+    const term = terms[Math.floor(Math.random() * terms.length)];
+    const tpl = MOCK_TEMPLATES[Math.floor(Math.random() * MOCK_TEMPLATES.length)];
+    const text = tpl.replace("{term}", term);
+    const score = randomScore();
+    const created_at = new Date(now - Math.random() * dayMs).toISOString();
+    posts.push({
+      id: `mock-${i}`,
+      text,
+      score: Math.round(score * 1000) / 1000,
+      label: score >= 0.7 ? "toxic" : "non-toxic",
+      query_term: term,
+      created_at,
+    });
+  }
+  return posts.sort(
+    (a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
+  );
+}
+
+// ── Graph colour helpers (used by CoOccurrenceGraph.tsx) ──────────────────────
+export function nodeColor(toxicRatio: number): string {
+  if (toxicRatio >= 0.7) return "#ff4b4b";
+  if (toxicRatio >= 0.4) return "#ff8c42";
+  return "#2ecc71";
+}
+
+export function nodeColorAlpha(toxicRatio: number, alpha = 0.25): string {
+  if (toxicRatio >= 0.7) return `rgba(255,75,75,${alpha})`;
+  if (toxicRatio >= 0.4) return `rgba(255,140,66,${alpha})`;
+  return `rgba(46,204,113,${alpha})`;
+}

frontend/src/app/components/ui/accordion.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

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

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "./utils";
+import { buttonVariants } from "./button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

frontend/src/app/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

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

@@ -0,0 +1,11 @@
+"use client";
+
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };

frontend/src/app/components/ui/avatar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "./utils";
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-10 shrink-0 overflow-hidden rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

frontend/src/app/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

frontend/src/app/components/ui/breadcrumb.tsx

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

frontend/src/app/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "./utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

frontend/src/app/components/ui/calendar.tsx

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

frontend/src/app/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "./utils";
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 pt-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <h4
+      data-slot="card-title"
+      className={cn("leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <p
+      data-slot="card-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6 [&:last-child]:pb-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 pb-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+};

frontend/src/app/components/ui/carousel.tsx

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

frontend/src/app/components/ui/chart.tsx

@@ -0,0 +1,353 @@
+"use client";
+
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "./utils";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+function ChartContainer({
+  id,
+  className,
+  children,
+  config,
+  ...props
+}: React.ComponentProps<"div"> & {
+  config: ChartConfig;
+  children: React.ComponentProps<
+    typeof RechartsPrimitive.ResponsiveContainer
+  >["children"];
+}) {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-slot="chart"
+        data-chart={chartId}
+        className={cn(
+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+          className,
+        )}
+        {...props}
+      >
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+}
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([, config]) => config.theme || config.color,
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`,
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+function ChartTooltipContent({
+  active,
+  payload,
+  className,
+  indicator = "dot",
+  hideLabel = false,
+  hideIndicator = false,
+  label,
+  labelFormatter,
+  labelClassName,
+  formatter,
+  color,
+  nameKey,
+  labelKey,
+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+  React.ComponentProps<"div"> & {
+    hideLabel?: boolean;
+    hideIndicator?: boolean;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+  }) {
+  const { config } = useChart();
+
+  const tooltipLabel = React.useMemo(() => {
+    if (hideLabel || !payload?.length) {
+      return null;
+    }
+
+    const [item] = payload;
+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
+    const value =
+      !labelKey && typeof label === "string"
+        ? config[label as keyof typeof config]?.label || label
+        : itemConfig?.label;
+
+    if (labelFormatter) {
+      return (
+        <div className={cn("font-medium", labelClassName)}>
+          {labelFormatter(value, payload)}
+        </div>
+      );
+    }
+
+    if (!value) {
+      return null;
+    }
+
+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+  }, [
+    label,
+    labelFormatter,
+    payload,
+    hideLabel,
+    labelClassName,
+    config,
+    labelKey,
+  ]);
+
+  if (!active || !payload?.length) {
+    return null;
+  }
+
+  const nestLabel = payload.length === 1 && indicator !== "dot";
+
+  return (
+    <div
+      className={cn(
+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        className,
+      )}
+    >
+      {!nestLabel ? tooltipLabel : null}
+      <div className="grid gap-1.5">
+        {payload.map((item, index) => {
+          const key = `${nameKey || item.name || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+          const indicatorColor = color || item.payload.fill || item.color;
+
+          return (
+            <div
+              key={item.dataKey}
+              className={cn(
+                "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+                indicator === "dot" && "items-center",
+              )}
+            >
+              {formatter && item?.value !== undefined && item.name ? (
+                formatter(item.value, item.name, item, index, item.payload)
+              ) : (
+                <>
+                  {itemConfig?.icon ? (
+                    <itemConfig.icon />
+                  ) : (
+                    !hideIndicator && (
+                      <div
+                        className={cn(
+                          "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+                          {
+                            "h-2.5 w-2.5": indicator === "dot",
+                            "w-1": indicator === "line",
+                            "w-0 border-[1.5px] border-dashed bg-transparent":
+                              indicator === "dashed",
+                            "my-0.5": nestLabel && indicator === "dashed",
+                          },
+                        )}
+                        style={
+                          {
+                            "--color-bg": indicatorColor,
+                            "--color-border": indicatorColor,
+                          } as React.CSSProperties
+                        }
+                      />
+                    )
+                  )}
+                  <div
+                    className={cn(
+                      "flex flex-1 justify-between leading-none",
+                      nestLabel ? "items-end" : "items-center",
+                    )}
+                  >
+                    <div className="grid gap-1.5">
+                      {nestLabel ? tooltipLabel : null}
+                      <span className="text-muted-foreground">
+                        {itemConfig?.label || item.name}
+                      </span>
+                    </div>
+                    {item.value && (
+                      <span className="text-foreground font-mono font-medium tabular-nums">
+                        {item.value.toLocaleString()}
+                      </span>
+                    )}
+                  </div>
+                </>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+function ChartLegendContent({
+  className,
+  hideIcon = false,
+  payload,
+  verticalAlign = "bottom",
+  nameKey,
+}: React.ComponentProps<"div"> &
+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+    hideIcon?: boolean;
+    nameKey?: string;
+  }) {
+  const { config } = useChart();
+
+  if (!payload?.length) {
+    return null;
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center gap-4",
+        verticalAlign === "top" ? "pb-3" : "pt-3",
+        className,
+      )}
+    >
+      {payload.map((item) => {
+        const key = `${nameKey || item.dataKey || "value"}`;
+        const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+        return (
+          <div
+            key={item.value}
+            className={cn(
+              "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+            )}
+          >
+            {itemConfig?.icon && !hideIcon ? (
+              <itemConfig.icon />
+            ) : (
+              <div
+                className="h-2 w-2 shrink-0 rounded-[2px]"
+                style={{
+                  backgroundColor: item.color,
+                }}
+              />
+            )}
+            {itemConfig?.label}
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string,
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  const payloadPayload =
+    "payload" in payload &&
+    typeof payload.payload === "object" &&
+    payload.payload !== null
+      ? payload.payload
+      : undefined;
+
+  let configLabelKey: string = key;
+
+  if (
+    key in payload &&
+    typeof payload[key as keyof typeof payload] === "string"
+  ) {
+    configLabelKey = payload[key as keyof typeof payload] as string;
+  } else if (
+    payloadPayload &&
+    key in payloadPayload &&
+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+  ) {
+    configLabelKey = payloadPayload[
+      key as keyof typeof payloadPayload
+    ] as string;
+  }
+
+  return configLabelKey in config
+    ? config[configLabelKey]
+    : config[key as keyof typeof config];
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};

frontend/src/app/components/ui/checkbox.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };

frontend/src/app/components/ui/collapsible.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

frontend/src/app/components/ui/command.tsx

@@ -0,0 +1,177 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "./utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./dialog";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

frontend/src/app/components/ui/context-menu.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function ContextMenu({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+
+function ContextMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+  return (
+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+  );
+}
+
+function ContextMenuGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
+  return (
+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
+  );
+}
+
+function ContextMenuPortal({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
+  return (
+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
+  );
+}
+
+function ContextMenuSub({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+
+function ContextMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
+  return (
+    <ContextMenuPrimitive.RadioGroup
+      data-slot="context-menu-radio-group"
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+
+function ContextMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+
+function ContextMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
+  inset?: boolean;
+}) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn(
+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function ContextMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuCheckboxItem,
+  ContextMenuRadioItem,
+  ContextMenuLabel,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuGroup,
+  ContextMenuPortal,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuRadioGroup,
+};

frontend/src/app/components/ui/dialog.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+
+import { cn } from "./utils";
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};