# Frontend de osint_web (pendiente)

Este directorio es un **placeholder**. El frontend lo montará un agente
posterior. El backend (`../server/main.py`) ya está completo y sirve todos los
endpoints que el frontend consumirá.

## Stack previsto

- **React + Vite + Mantine v9 + `@fn_library`** (el sistema de UI del registry,
  alias a `frontend/functions/ui/`). Componentes propios de `@fn_library` antes
  que HTML nativo (regla `frontend_theming.md`): `Group`, `Stack`, `Table`,
  `Paper`, `AppShell`, etc., e iconos de `@tabler/icons-react`. Theming con
  `createTheme()` de `@mantine/core` (sin Tailwind, sin CSS variables custom).
- **Grafo**: `sigma.js` + `graphology` + `graphology-layout-forceatlas2` (las
  dos únicas dependencias nuevas fuera de `@fn_library`; KISS). Color por
  `tipo`, tamaño por grado, layout force-directed. Click en nodo → `NodeCard`.
  Panel lateral con toggles de tipos visibles y caja de búsqueda.
- **Fechas** en formato europeo `DD/MM/AAAA` (memoria `formato-fecha-europeo`),
  incluido el parseo de las fechas iCal (`YYYYMMDD[THHMMSS[Z]]`) que devuelve
  `/api/calendar`.

## Vistas a construir

| Vista | Fuente (endpoint) | Qué muestra |
|---|---|---|
| `views/GraphView.tsx` | `GET /api/graph` | grafo sigma.js; nodos coloreados por `tipo` usando `counts` para la leyenda; nodos `dangling` atenuados con toggle; búsqueda con `GET /api/search?q=`. |
| `views/TablesView.tsx` | `GET /api/nodes?tipo=<tipo>` | una pestaña/tabla Mantine por tipo (persona, organizacion, lugar, dominio, caso) con columnas del `frontmatter`, ordenable y filtrable. |
| `views/NodeCard.tsx` | `GET /api/node/<slug>` | ficha: `frontmatter` clave-valor + `body` Markdown + galería de `attachments` (imágenes con lightbox vía `GET /api/attachment?path=`, PDFs como enlace). |
| `views/ContactsView.tsx` | `GET /api/contacts`, `GET /api/contact/<uid>` | lista/tabla de contactos del addressbook Xandikos (nombre, teléfonos, emails, org, nota). |
| `views/CalendarView.tsx` | `GET /api/calendar?from=&to=` | eventos del calendario Xandikos en un rango (summary, fechas en formato europeo, lugar, descripción). |

## Cómo se montará (cuando se haga)

```bash
cd projects/osint/apps/osint_web/frontend
pnpm create vite . --template react-ts   # o el scaffolder del registry
pnpm add @mantine/core @mantine/hooks @tabler/icons-react sigma graphology graphology-layout-forceatlas2
# alias @fn_library -> ../../../../../frontend/functions/ui en vite.config.ts
pnpm dev    # http://127.0.0.1:5173 (proxy /api -> http://127.0.0.1:8470)
```

Configurar el proxy de Vite (`server.proxy`) para reenviar `/api` al backend en
`http://127.0.0.1:8470`, o leer la URL del backend de una env var
(`VITE_API_BASE`). El backend ya emite CORS abierto solo en localhost, así que
ambos enfoques funcionan.

## Arrancar el backend (necesario para desarrollar el frontend)

```bash
cd projects/osint/apps/osint_web
.venv/bin/python server/main.py --vault ~/Obsidian/osint --port 8470
```