# NSCT Research Frontend

Web-Oberfläche für den **Neutral Search Crawler Tool (NSCT)** — eine Such- und Analyseplattform für faktbasierte Recherche.

## Architektur-Diagramm

```
┌─────────────────────────────────────────────────────────────┐
│                        Client                              │
│  ┌──────────┐  ┌──────────┐  ┌──────────┐  ┌──────────┐   │
│  │  Research │  │  Sources │  │  Claims  │  │ Report  │   │
│  │  Detail  │  │   Tab    │  │   Tab    │  │  Tab    │   │
│  └──────────┘  └──────────┘  └──────────┘  └──────────┘   │
│         ┌─────────────────────────────────────────┐        │
│         │         SvelteKit App (SPA)             │        │
│         │   - 6 Tabs: Status, Quellen, Claims     │        │
│         │   - Evidence, Bericht, Methodik          │        │
│         │   - Error-System, Share-Links            │        │
│         └─────────────────────────────────────────┘        │
└─────────────────────────────────────────────────────────────┘
                        │
                        ▼ /api/*
┌─────────────────────────────────────────────────────────────┐
│                        Proxy                                │
│  ┌─────────────────────────────────────────────────────┐    │
│  │                   Caddy 2                             │    │
│  │  - HTTPS (Let's Encrypt)                              │    │
│  │  - Security Headers                                   │    │
│  │  - gzip + zstd Compression                            │    │
│  └─────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────┘
                        │
                        ▼
┌─────────────────────────────────────────────────────────────┐
│                     Backend API                              │
│  ┌─────────────────────────────────────────────────────┐    │
│  │ NSCT Backend auf separatem Rechner (z. B. :8080)     │    │
│  │         - /v1/research                              │    │
│  │         - /v1/research/{id}/status                  │    │
│  │         - /v1/research/{id}                         │    │
│  │         - /v1/research/share/{token}                │    │
│  └─────────────────────────────────────────────────────┘    │
└─────────────────────────────────────────────────────────────┘
```

## Features

- **Research-Tab** mit 6 Ansichten: Status, Quellen, Claims, Evidence, Bericht, Methodik
- **Contradiction Detection**: Automatische Erkennung widersprüchlicher Claims
- **Share-Links**: Token-basierte Freigabe mit Ablaufzeit und Max-Views
- **Error-System**: Stapelbare Toast-Notifications mit Auto-hide
- **Error-Handling**: Polling bei COMPLETED/FAILED, onDestroy Cleanup
- **Responsive Design**: Mobile-First mit TailwindCSS
- **Docker Deployment**: Caddy Reverse-Proxy mit API-Weiterleitung, Healthchecks, Resource-Limits

## Installation

### Lokal

```bash
npm install
npm run dev
```

### Docker Compose

```bash
docker compose up -d
```

### Getrenntes Frontend- und Backend-Deployment

Frontend und Backend können auf unterschiedlichen Rechnern laufen. Der Browser
spricht ausschließlich die Frontend-Domain unter `/api/*` an; Caddy leitet diese
Anfragen an den Backend-Rechner weiter. Dadurch ist keine gemeinsame Docker-Bridge
und keine Backend-CORS-Freigabe für den Browser erforderlich.

```env
# .env im Frontend-Repository; Host:Port, ohne http:// und ohne /api
NSCT_API_UPSTREAM=backend.example.com:8080
```

Der Backend-Rechner muss vom Frontend-Rechner auf dem angegebenen Port erreichbar
sein. Für zwei Compose-Stacks auf demselben Rechner funktioniert der Default
`host.docker.internal:8080`.

## Environment Variables

| Variable | Beschreibung | Default |
|----------|-------------|---------|
| `NSCT_API_UPSTREAM` | Erreichbarer Backend-Host inklusive Port | `host.docker.internal:8080` |
| `CADDY_DOMAIN` | Domain für HTTPS (Let's Encrypt) | keine (HTTP nur) |
| `NSCT_RATE_LIMIT` | Rate-Limit Config für Caddy | keine |

## Nutzung

1. **API-Key eintragen** im Login
2. **Neue Recherche starten** mit Suchanfrage, Sprache und Tiefe
3. **Fortschritt verfolgen** im Status-Tab (Polling alle 5s)
4. **Quellen & Claims analysieren** in den jeweiligen Tabs
5. **Bericht herunterladen** als JSON, Markdown oder Text
6. **Thread teilen** über Share-Links mit Ablaufzeit

## Share-Links

- Token-basiert, zeitlich begrenzt
- Ablaufzeiten: 24h, 48h, 7Tage, 14Tage, 30Tage, Nie
- Max. Aufrufe: 1, 10, 50, Unbegrenzt
- Read-Only-Zugriff für Empfänger
- Token kann deaktiviert werden

## Testen

Die Tests befinden sich im `tests/`-Verzeichnis:

- `tests/test_theme.svelte` — Theme-Persistenz (localStorage)
- `tests/test_api.svelte` — API-Client-Tests
- `tests/test_formatter.svelte` — Formatter-Tests
- `tests/test_share_link.svelte` — Share-Link-Ablauf-Tests

## Architektur

- **SvelteKit** + **TailwindCSS** + **TypeScript**
- SvelteKit Static Adapter (`adapter-static`)
- Build Output: `build/`
- Polling: Alle 5 Sekunden, stoppt bei COMPLETED/FAILED
- Error-System: `ErrorBannerStore.ts` + `ErrorBanner.svelte` (stapelbar, auto-hide)