diff --git a/.githooks/pre-push b/.githooks/pre-push index 146d2ba..4fe8bad 100644 --- a/.githooks/pre-push +++ b/.githooks/pre-push @@ -11,10 +11,12 @@ # set -e -echo "▶ pre-push : porte de qualité (~6 s)…" +echo "▶ pre-push : porte de qualité + parcours e2e (~30 s)…" start=$(date +%s) +# `check` d'abord (6 s) : la majorité des régressions y tombent, autant échouer +# vite. Les parcours Playwright (~22 s) ensuite, seulement si le reste est vert. if ! npm run --silent check; then cat >&2 <<'MSG' @@ -29,4 +31,18 @@ MSG exit 1 fi +if ! npm run --silent test:e2e; then + cat >&2 <<'MSG' + +✗ Les parcours e2e ont échoué — push interrompu. + + Rejouer en mode interactif pour comprendre : + npm run test:e2e:ui + + Sur un clone neuf, récupérer d'abord le navigateur : + npm run test:e2e:install +MSG + exit 1 +fi + echo "✓ pre-push : tout est vert ($(( $(date +%s) - start ))s)" diff --git a/.gitignore b/.gitignore index 280c680..6efe934 100644 --- a/.gitignore +++ b/.gitignore @@ -25,3 +25,7 @@ CLAUDE.md # Caches d outillage (lint, tsc) node_modules/.cache/ + +# Artefacts Playwright +test-results/ +playwright-report/ diff --git a/README-CI.md b/README-CI.md index 284859c..d3c7417 100644 --- a/README-CI.md +++ b/README-CI.md @@ -7,10 +7,15 @@ Coolify redéploie sur webhook à **chaque** push (`dev` → dev.metalfrom.eu, **locale**, dans le hook `pre-push`. ``` -git push ──▶ [hook pre-push : npm run check] ──▶ Forgejo ──▶ webhook ──▶ Coolify redeploy - ↑ 6 s, bloquant +git push ──▶ [pre-push : npm run check + test:e2e] ──▶ Forgejo ──▶ webhook ──▶ Coolify redeploy + ↑ 6 s + 22 s, bloquant ``` +Deux granularités volontaires : `check` (6 s) tourne pendant qu'on code, les +parcours Playwright (22 s) seulement au moment de pousser. Mettre l'e2e dans +`check` ferait passer la boucle de 6 à 22 s pour un gain marginal — la plupart +des régressions tombent déjà dans les tests unitaires. + ## Installation (une fois par clone) ```bash @@ -27,7 +32,9 @@ pip install -r requirements-dev.txt | `npm run check:sequential` | Idem, en série (pour isoler un échec) | 14 s | — | | `npm run test:mutation` | Mutation, logique pure (352 mutants) | 33 s | ~5 s | | `npm run test:mutation:full` | Mutation, toute l'API (1511 mutants) | 3 min 40 | **12 s** | -| `npm run check:full` | `check` + audits de dépendances + mutation complète | — | ~40 s | +| `npm run test:e2e` | 53 parcours Playwright (dashboard admin) | 22 s | — | +| `npm run test:e2e:install` | Récupère Chromium (clone neuf) | — | — | +| `npm run check:full` | `check` + e2e + audits + mutation complète | — | ~1 min | | `npm run check:clean` | Purge les caches ESLint / tsc | — | — | ### Où passe le temps @@ -77,6 +84,8 @@ Le plancher de ~3 min à froid est celui de Stryker sur 1511 mutants, assumé. | **Frontend** | `apps/web/test/pure.test.js` | Filtrage, tri, échappement HTML | | **Méta** | `apps/api/test/harness.test.js` | Vérifie le faux pool lui-même | | **Python** | `apps/geocoder/tests/`, `apps/crawler/tests/` | Parseur de localisations, annulation | +| **Parcours (e2e)** | `apps/admin/test/e2e/admin.spec.js` | Playwright sur la VRAIE app Fastify + faux pool : connexion, recherche, édition, déblocage d'une localisation, annulation d'un traitement | +| **a11y des vues rendues** | `apps/admin/test/e2e/a11y.spec.js` | axe-core dans un vrai navigateur — contraste inclus, ce que jsdom ne sait pas calculer | | **Mutation** | `stryker*.config.json` | 82 % (logique pure) / 65 % (API complète) | ## Principe des tests @@ -110,10 +119,28 @@ dit que « cette ligne a été exécutée ». Les seuils d'échec (70 % et 55 %) sont des cliquets anti-régression, pas des objectifs. +## Les parcours e2e + +`apps/admin/test/e2e/server.mjs` reproduit la topologie de production : un +serveur HTTP sert les fichiers statiques et proxifie `/admin/*` vers la VRAIE +application Fastify (comme `apps/admin/nginx.conf`), avec un faux pool à la +place de Postgres. + +Sont donc réellement exercés : le routage Fastify, les cookies, le JWT, bcrypt, +la validation des entrées et la génération SQL. Ne le sont pas : la validité du +SQL pour Postgres et le comportement de PostGIS — affaire de tests +d'intégration, pas de tests d'interface. + +Démarrage ~1 s, aucun conteneur. Une session est enregistrée une fois +(`auth.setup.js`) et partagée : sans ça, chacun des 53 scénarios repayait un +aller-retour de connexion complet. 4 workers est l'optimum mesuré (8 et 12 sont +plus lents — contention au démarrage des navigateurs). + ### Ce qui n'est pas couvert -- Règles a11y exigeant un moteur de rendu (contraste, cibles tactiles) : jsdom - ne calcule pas de styles. À compléter par un audit Lighthouse manuel. +- Règles a11y exigeant un moteur de rendu sur le **site public** : le test jsdom + ne calcule pas les styles. Le dashboard admin, lui, est couvert par axe dans + un vrai navigateur. - `migrate.js` : s'exécute au démarrage du conteneur et appelle `process.exit`. - Crawler et workers de géocodage : seuls le parseur et l'annulation sont couverts, le reste est de l'I/O réseau et base. diff --git a/apps/admin/site/app.js b/apps/admin/site/app.js index fb1f702..ab59bb0 100644 --- a/apps/admin/site/app.js +++ b/apps/admin/site/app.js @@ -1,16 +1,36 @@ "use strict"; +/** + * Dashboard admin metalfrom.eu. + * + * Organisation : un onglet = une question que se pose l'admin, et non une table + * de la base. Chaque chiffre problématique porte son action à côté de lui — + * l'ancienne séparation « je constate ici / j'agis dans un autre onglet » était + * la principale source de confusion. + * + * Pilotage → est-ce que ça tourne ? + * Groupes → trouver et corriger un groupe + * Localisations → qu'est-ce qui coince dans le géocodage ? + * Journal → que s'est-il passé ? + * LLM & coûts → combien ça coûte ? + */ + const state = { username: null, - view: "dashboard", - bands: { page: 1, pageSize: 50, q: "", location_q: "", country: "", status: "", genre: "", enriched: "", has_lat: "", has_location: "", has_conflict: "", sort: "ma_id", dir: "asc", total: 0 }, + view: "pilotage", + bands: { + page: 1, pageSize: 50, q: "", location_q: "", country: "", status: "", genre: "", + themes_q: "", enriched: "", has_lat: "", has_location: "", has_conflict: "", + sort: "ma_id", dir: "asc", total: 0, advanced: false, + }, + locations: { page: 1, pageSize: 50, status: "error,llm_needed", q: "", country: "", total: 0 }, activity: { page: 1, pageSize: 50, type: "", status: "", total: 0 }, llm: { page: 1 }, - overviewTimer: null, + timer: null, }; // ------------------------------------------------------------------ -// API helper +// API // ------------------------------------------------------------------ async function api(path, opts = {}) { const res = await fetch(path, { @@ -23,21 +43,69 @@ async function api(path, opts = {}) { throw new Error("unauthorized"); } const body = await res.json().catch(() => ({})); - if (!res.ok || body.ok === false) { - throw new Error(body.error || `HTTP ${res.status}`); - } + if (!res.ok || body.ok === false) throw new Error(body.error || `HTTP ${res.status}`); return body; } +// ------------------------------------------------------------------ +// Utilitaires de rendu +// ------------------------------------------------------------------ +function esc(s) { + return String(s ?? "").replace(/[&<>"']/g, (c) => + ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c])); +} +function fmtDate(s) { + if (!s) return "—"; + return new Date(s).toLocaleString("fr-FR", { + day: "2-digit", month: "2-digit", year: "2-digit", hour: "2-digit", minute: "2-digit", + }); +} +function fmtNum(n) { + return Number(n || 0).toLocaleString("fr-FR"); +} +/** Durée écoulée, lisible ("3 min", "2 h 10"). */ +function since(ts) { + if (!ts) return "—"; + const min = Math.max(0, Math.round((Date.now() - new Date(ts)) / 60000)); + if (min < 60) return `${min} min`; + const h = Math.floor(min / 60); + return `${h} h ${String(min % 60).padStart(2, "0")}`; +} +const content = () => document.getElementById("content"); + +const STATUS_TONE = { + done: "ok", country_only: "ok", error: "err", running: "warn", + cancelled: "muted", queued: "muted", processing: "warn", + llm_needed: "warn", manual: "warn", +}; +/** Les valeurs stockées sont techniques ; l'admin lit du français. */ +const STATUS_LABEL = { + done: "résolu", country_only: "pays seul", error: "erreur", + running: "en cours", cancelled: "annulé", queued: "en file", + processing: "traitement", llm_needed: "attente LLM", manual: "manuel", +}; +function statusBadge(status) { + return `${esc(STATUS_LABEL[status] || status)}`; +} +function emptyRow(msg = "Aucune donnée") { return `
${esc(msg)}
`; } + +/** Bloc d'erreur uniforme, avec le message réel de l'API. */ +function errorBox(e) { + return `
⚠ ${esc(e.message)}
`; +} + +function clearTimer() { + if (state.timer) { clearInterval(state.timer); state.timer = null; } +} + // ------------------------------------------------------------------ // Auth // ------------------------------------------------------------------ function showLogin() { document.getElementById("login-screen").classList.remove("hidden"); document.getElementById("app").classList.add("hidden"); - if (state.overviewTimer) { clearInterval(state.overviewTimer); state.overviewTimer = null; } + clearTimer(); } - function showApp() { document.getElementById("login-screen").classList.add("hidden"); document.getElementById("app").classList.remove("hidden"); @@ -60,7 +128,9 @@ document.getElementById("login-form").addEventListener("submit", async (e) => { const username = document.getElementById("login-username").value.trim(); const password = document.getElementById("login-password").value; const errEl = document.getElementById("login-error"); + const btn = e.target.querySelector('button[type="submit"]'); errEl.textContent = ""; + btn.disabled = true; try { const res = await fetch("/admin/auth/login", { method: "POST", @@ -79,6 +149,8 @@ document.getElementById("login-form").addEventListener("submit", async (e) => { router(); } catch { errEl.textContent = "Erreur réseau"; + } finally { + btn.disabled = false; } }); @@ -89,399 +161,469 @@ document.getElementById("logout-btn").addEventListener("click", async () => { }); // ------------------------------------------------------------------ -// Router — 5 onglets : Vue d'ensemble, Groupes, Activité, Actions, LLM +// Routeur // ------------------------------------------------------------------ -const VIEWS = ["dashboard", "bands", "activity", "actions", "llm"]; +const VIEWS = ["pilotage", "bands", "locations", "activity", "llm"]; const VIEW_ALIASES = { - "": "dashboard", - dashboard: "dashboard", - overview: "dashboard", - bands: "bands", - band: "bands", - activity: "activity", - activities: "activity", - activite: "activity", - activites: "activity", - actions: "actions", - action: "actions", - llm: "llm", + "": "pilotage", pilotage: "pilotage", dashboard: "pilotage", overview: "pilotage", + bands: "bands", band: "bands", groupes: "bands", + locations: "locations", localisations: "locations", geocoding: "locations", + activity: "activity", activite: "activity", journal: "activity", + llm: "llm", couts: "llm", + // L'onglet « Actions » a été fondu dans Pilotage : on redirige les favoris. + actions: "pilotage", }; function normalizeView(raw) { - const key = String(raw || "").trim().toLowerCase().replace(/^\/+|\/+$/g, ""); + // La query string doit être retirée AVANT la recherche d'alias : les liens du + // Pilotage pointent vers "#/locations?status=error", qui sinon ne + // correspondrait à aucune vue et retomberait sur Pilotage. + const key = String(raw || "").split("?")[0] + .trim().toLowerCase().replace(/^\/+|\/+$/g, ""); const normalized = VIEW_ALIASES[key]; - return VIEWS.includes(normalized) ? normalized : "dashboard"; + return VIEWS.includes(normalized) ? normalized : "pilotage"; } function currentViewFromLocation() { - const hashView = normalizeView((location.hash || "").replace(/^#\/?/, "")); - if (location.hash) return hashView; - - const pathParts = location.pathname.split("/").filter(Boolean); - return normalizeView(pathParts[0] || ""); + if (location.hash) return normalizeView((location.hash || "").replace(/^#\/?/, "")); + return normalizeView(location.pathname.split("/").filter(Boolean)[0] || ""); } +const RENDERERS = { + pilotage: renderPilotage, + bands: renderBands, + locations: renderLocations, + activity: renderActivity, + llm: renderLLM, +}; + function router() { const view = currentViewFromLocation(); state.view = view; document.querySelectorAll(".nav a").forEach((a) => { - a.classList.toggle("active", a.dataset.view === view); + const active = a.dataset.view === view; + a.classList.toggle("active", active); + if (active) a.setAttribute("aria-current", "page"); + else a.removeAttribute("aria-current"); }); - if (state.overviewTimer) { clearInterval(state.overviewTimer); state.overviewTimer = null; } - const renderers = { - dashboard: renderOverview, - bands: renderBands, - activity: renderActivity, - actions: renderActions, - llm: renderLLM, - }; - renderers[view](); + clearTimer(); + RENDERERS[view](); } window.addEventListener("hashchange", router); -function esc(s) { - return String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" }[c])); -} -function fmtDate(s) { - if (!s) return "—"; - const d = new Date(s); - return d.toLocaleString("fr-FR", { day: "2-digit", month: "2-digit", year: "2-digit", hour: "2-digit", minute: "2-digit" }); -} -const content = () => document.getElementById("content"); +// ================================================================== +// PILOTAGE — « est-ce que ça tourne ? » +// ================================================================== +async function renderPilotage() { + content().innerHTML = ` +
+

Pilotage

+ Actualisation auto toutes les 15 s +
+
Chargement…
+
+
+
Chargement…
+
+
+
+ ⚠️ Opérations destructives +

+ À n'utiliser que si le géocodage est corrompu. Ces actions relancent des + milliers d'appels Geoapify et Groq, qui sont facturés. +

+
+ + + +
+
+
+ `; -function statCard(label, value, cls = "") { - return `
${esc(label)}
${Number(value).toLocaleString("fr-FR")}
`; -} -function barRow(label, count, max) { - const pct = Math.max(2, Math.round((count / max) * 100)); - return `
${esc(label)}
${count}
`; -} -function emptyRow() { return `
Aucune donnée
`; } -function statusBadge(status) { - const cls = status === "done" ? "ok" : status === "error" ? "err" : status === "running" ? "warn" : "muted"; - return `${esc(status)}`; + renderTriggers(); + wireDangerZone(); + await loadPilotage(); + clearTimer(); + state.timer = setInterval(loadPilotage, 15000); } -// Découpe un genre complexe ("Doom/Death Metal; Gothic/Progressive") en mots-clés -function splitGenreElements(genreRows) { - const counts = new Map(); - for (const { genre, total } of genreRows) { - if (!genre) continue; - const cleaned = genre.replace(/\([^)]*\)/g, ""); - const tokens = cleaned.split(/[/;,]+/); - for (const tok of tokens) { - const kw = tok.trim(); - if (kw.length < 3) continue; - counts.set(kw, (counts.get(kw) || 0) + total); +function renderTriggers() { + document.getElementById("p-triggers").innerHTML = ` +

Lancer un traitement

+

Le crawler consomme la demande à son prochain cycle (~1 min).

+
+ + + + +
+
+ `; + + document.getElementById("p-triggers").addEventListener("click", async (e) => { + const btn = e.target.closest("[data-job]"); + if (!btn) return; + const job_type = btn.dataset.job; + if (job_type === "full_crawl" && + !confirm("Lancer un crawl complet de l'Europe ?\n\nPlusieurs heures, et beaucoup de requêtes vers Metal Archives.")) return; + const fb = document.getElementById("p-job-feedback"); + btn.disabled = true; + fb.textContent = "Envoi…"; fb.className = "feedback"; + try { + const r = await api("/admin/api/job-triggers", { method: "POST", body: JSON.stringify({ job_type }) }); + fb.textContent = `✓ Demande #${r.id} enregistrée — suivi dans Journal.`; + fb.className = "feedback ok"; + await loadPilotage(); + } catch (err) { + fb.textContent = `✗ ${err.message}`; + fb.className = "feedback err"; + } finally { + btn.disabled = false; } - } - return [...counts.entries()] - .map(([kw, n]) => ({ kw, n })) - .sort((a, b) => b.n - a.n); + }); } -// ------------------------------------------------------------------ -// Vue d'ensemble — stats bands + genre/pays + live (crawl/jobs/géocodage) -// ------------------------------------------------------------------ -async function renderOverview() { - content().innerHTML = `
Chargement…
`; - try { - const r = await api("/admin/api/stats"); - const t = r.totals; - const maxStatus = Math.max(1, ...r.by_status.map((x) => x.total)); - const maxCountry = Math.max(1, ...r.by_country.map((x) => x.total)); - const elements = splitGenreElements(r.by_genre); - const maxEl = Math.max(1, ...elements.map((x) => x.n)); +const DANGER_ACTIONS = { + "reset-all": { + url: "/admin/api/locations/reset-all", + confirm: "RÉINITIALISER TOUT LE GÉOCODAGE ?\n\nToutes les localisations repassent en file et perdent leurs coordonnées. Le cache est réutilisé quand c'est possible, mais cela reste coûteux.", + }, + "purge-nominatim": { + url: "/admin/api/geocode-cache/purge-nominatim", + confirm: "Supprimer les entrées de cache de l'ancien pipeline Nominatim ?\n\nCes lieux seront re-géocodés via Geoapify — appels facturés.", + }, + "requeue-all": { + url: "/admin/api/locations/requeue-all", + body: { include_done: true }, + confirm: "Remettre TOUTES les localisations en file, y compris celles déjà résolues ?", + }, +}; - content().innerHTML = ` -
- ${statCard("Total bands", t.total)} - ${statCard("Enrichis", t.enriched, "ok")} - ${statCard("Non enrichis", t.not_enriched, "warn")} - ${statCard("Géocodés", t.geocoded, "ok")} - ${statCard("Sans localisation", t.not_geocoded, "warn")} - ${statCard("Jamais enrichis (band_page absent)", t.never_enriched, "err")} - ${statCard("Stale (>30j)", t.stale, "warn")} -
- -
-
En direct
- Auto-refresh 15s -
-
-
…
-
…
-
…
-
…
-
- -
-
-

Par statut

- ${r.by_status.map((x) => barRow(x.status, x.total, maxStatus)).join("") || emptyRow()} -
-
-

Par pays (${r.by_country.length})

- ${r.by_country.map((x) => barRow(x.country, x.total, maxCountry)).join("") || emptyRow()} -
-
-

Éléments de genre (${elements.length} mots-clés)

-

Chaque genre complexe (ex: "Doom/Death Metal; Gothic") est découpé en mots-clés.

- ${elements.map((x) => barRow(x.kw, x.n, maxEl)).join("") || emptyRow()} -
-
- `; - } catch (e) { - content().innerHTML = `
Erreur : ${esc(e.message)}
`; - return; - } - - await loadOverviewLive(); - if (state.overviewTimer) clearInterval(state.overviewTimer); - state.overviewTimer = setInterval(loadOverviewLive, 15000); +function wireDangerZone() { + document.getElementById("p-danger").addEventListener("click", async (e) => { + const btn = e.target.closest("[data-danger]"); + if (!btn) return; + const action = DANGER_ACTIONS[btn.dataset.danger]; + if (!action || !confirm(action.confirm)) return; + const fb = document.getElementById("p-danger-feedback"); + btn.disabled = true; + fb.textContent = "En cours…"; fb.className = "feedback"; + try { + const r = await api(action.url, { method: "POST", body: JSON.stringify(action.body || {}) }); + fb.textContent = `✓ ${fmtNum(r.count)} entrée(s) modifiée(s).`; + fb.className = "feedback ok"; + await loadPilotage(); + } catch (err) { + fb.textContent = `✗ ${err.message}`; + fb.className = "feedback err"; + } finally { + btn.disabled = false; + } + }); } -async function loadOverviewLive() { - const el = document.getElementById("ov-live"); - if (!el) return; +function healthCard(label, value, sub, tone = "") { + return `
+
${esc(label)}
+
${value}
+
${sub}
+
`; +} + +async function loadPilotage() { try { - const [live, geo, queue] = await Promise.all([ + const [stats, live, geo, queue] = await Promise.all([ + api("/admin/api/stats"), api("/admin/api/live"), api("/admin/api/geocoding"), api("/admin/api/queue"), ]); - // --- Crawl en cours --- - const runsHtml = live.active_runs.length - ? live.active_runs.map(r => { - const elapsed = Math.round((Date.now() - new Date(r.started_at)) / 60000); - // L'annulation est coopérative : le crawler ne s'arrête qu'au prochain - // point de contrôle. Tant qu'il n'a pas basculé le statut à - // 'cancelled', on affiche l'état intermédiaire au lieu de laisser - // croire que c'est déjà fait. - const pendingCancel = r.cancel_requested === true; - return `
-
- ▶ ${esc(r.run_type)} -
- ${elapsed}min · ${r.bands_seen} vus · ${r.bands_new} nouveaux · ${r.bands_enriched} enrichis -
- ${pendingCancel ? `
⏳ Arrêt demandé${r.cancel_requested_by ? ` par ${esc(r.cancel_requested_by)}` : ""} — le crawler s'arrêtera au prochain lot
` : ""} - ${r.error ? `
${esc(r.error)}
` : ""} + const t = stats.totals; + const locs = geo.locations || []; + const n = (s) => locs.find((x) => x.status === s)?.n || 0; + const locTotal = locs.reduce((sum, x) => sum + x.n, 0); + const locDone = n("done") + n("country_only"); + const locPct = locTotal ? Math.round((locDone / locTotal) * 100) : 0; + const errors = n("error"); + const llmNeeded = n("llm_needed"); + const queued = n("queued") + n("processing"); + const cost = Number(geo.llm_cache?.total_cost_usd || 0); + + // ---- Bandeau de santé ---- + document.getElementById("p-health").innerHTML = [ + healthCard("Groupes", fmtNum(t.total), `${fmtNum(t.enriched)} enrichis`), + healthCard("Géocodage", `${locPct} %`, + `${fmtNum(locDone)} / ${fmtNum(locTotal)} lieux`, + locPct >= 95 ? "ok" : locPct >= 70 ? "warn" : "err"), + healthCard("En file", fmtNum(queued), + queued ? "traitement en cours" : "rien à traiter", + queued ? "warn" : "ok"), + healthCard("Bloqués", fmtNum(errors + llmNeeded), + `${fmtNum(errors)} erreurs · ${fmtNum(llmNeeded)} LLM`, + errors + llmNeeded === 0 ? "ok" : "err"), + healthCard("Coût LLM", `$${cost.toFixed(2)}`, `${fmtNum(geo.llm_cache?.n || 0)} appels`), + ].join(""); + + // ---- Alertes actionnables ---- + // Le principe de cette vue : aucun chiffre problématique sans le bouton qui + // le résout juste à côté. + const alerts = []; + if (errors > 0) { + alerts.push({ + tone: "err", + text: `${fmtNum(errors)} localisation(s) en erreur de géocodage`, + actions: [ + { label: "Examiner", href: "#/locations?status=error" }, + { label: "Tout remettre en file", post: "/admin/api/locations/reset-errors" }, + ], + }); + } + if (llmNeeded > 0) { + alerts.push({ + tone: "warn", + text: `${fmtNum(llmNeeded)} lieu(x) en attente de désambiguïsation LLM`, + actions: [{ label: "Examiner", href: "#/locations?status=llm_needed" }], + }); + } + if (t.never_enriched > 0) { + alerts.push({ + tone: "warn", + text: `${fmtNum(t.never_enriched)} groupe(s) jamais enrichis`, + actions: [{ label: "Lancer l'enrichissement", job: "enrich" }], + }); + } + if (queue.breakdown?.stale > 0) { + alerts.push({ + tone: "muted", + text: `${fmtNum(queue.breakdown.stale)} groupe(s) non revus depuis plus de 30 jours`, + actions: [{ label: "Crawl incrémental", job: "incremental" }], + }); + } + const stuck = (live.active_runs || []).filter( + (r) => Date.now() - new Date(r.started_at) > 30 * 60000 && !r.cancel_requested); + if (stuck.length) { + alerts.push({ + tone: "err", + text: `${stuck.length} run(s) actifs depuis plus de 30 min — possiblement bloqués`, + actions: [{ label: "Nettoyer les runs bloqués", post: "/admin/api/crawl-runs/cleanup", body: { older_than_minutes: 30 } }], + }); + } + + document.getElementById("p-alerts").innerHTML = alerts.length + ? `
${alerts.map((a, idx) => ` +
+ ${esc(a.text)} + + ${a.actions.map((act, j) => act.href + ? `${esc(act.label)}` + : `` + ).join("")} + +
`).join("")}
` + : `
✓ Rien ne bloque : le pipeline est sain.
`; + + document.getElementById("p-alerts").onclick = async (e) => { + const btn = e.target.closest("[data-alert]"); + if (!btn) return; + const act = alerts[Number(btn.dataset.alert)].actions[Number(btn.dataset.act)]; + btn.disabled = true; + try { + if (act.job) { + await api("/admin/api/job-triggers", { method: "POST", body: JSON.stringify({ job_type: act.job }) }); + } else { + await api(act.post, { method: "POST", body: JSON.stringify(act.body || {}) }); + } + await loadPilotage(); + } catch (err) { + alert(err.message); + btn.disabled = false; + } + }; + + // ---- Runs actifs ---- + const runs = live.active_runs || []; + document.getElementById("p-runs").innerHTML = ` +

Traitements en cours (${runs.length})

+ ${runs.length ? runs.map((r) => { + const pending = r.cancel_requested === true; + return `
+
+ ▶ ${esc(r.run_type)} +
+ ${since(r.started_at)} · ${fmtNum(r.bands_seen)} vus · ${fmtNum(r.bands_new)} nouveaux · ${fmtNum(r.bands_enriched)} enrichis
- ${pendingCancel - ? `` - : ``} -
`; - }).join("") - : `
Aucun run actif
`; + ${pending ? `
⏳ Arrêt demandé${r.cancel_requested_by ? ` par ${esc(r.cancel_requested_by)}` : ""} — s'arrêtera au prochain lot
` : ""} +
+ ${pending + ? `` + : ``} +
`; + }).join("") : emptyRow("Aucun traitement en cours")} - // --- Géocodage (band_locations) --- - const locs = geo.locations || []; - const locTotal = locs.reduce((s, x) => s + x.n, 0); - const locDone = (locs.find(x => x.status === "done")?.n || 0) + (locs.find(x => x.status === "country_only")?.n || 0); - const locLlm = locs.find(x => x.status === "llm_needed")?.n || 0; - const locManual = locs.find(x => x.status === "manual")?.n || 0; - const locErr = locs.find(x => x.status === "error")?.n || 0; - const locPct = locTotal ? Math.round((locDone / locTotal) * 100) : 0; - const provTxt = (geo.providers || []).map(p => `${esc(p.provider)}: ${p.n.toLocaleString("fr-FR")}${p.avg_conf != null ? ` (conf~${p.avg_conf})` : ""}`).join(" · "); - const geoHtml = ` -
-
-
-
${locPct}% — ${locDone.toLocaleString("fr-FR")} / ${locTotal.toLocaleString("fr-FR")}
-
- ${locLlm ? `⚡ ${locLlm} LLM needed` : ""} - ${locManual ? `${locManual} manuel` : ""} - ${locErr ? `✗ ${locErr} erreurs` : ""} -
-
${provTxt || "—"}
+ ${(live.pending_jobs || []).length ? ` +

En attente (${live.pending_jobs.length})

+ ${live.pending_jobs.map((j) => `
+
+ ${esc(j.job_type)} +
demandé par ${esc(j.requested_by || "?")} · il y a ${since(j.created_at)}
+
+ +
`).join("")}` : ""} `; - // --- Jobs en attente --- - const jobsHtml = live.pending_jobs.length - ? live.pending_jobs.map(j => { - const age = Math.round((Date.now() - new Date(j.created_at)) / 60000); - return `
-
- ${esc(j.job_type)} -
par ${esc(j.requested_by || "?")} · ${age}min
-
- -
`; - }).join("") - : `
Aucun job en attente
`; + document.getElementById("p-runs").onclick = async (e) => { + const runBtn = e.target.closest("[data-cancel-run]"); + const jobBtn = e.target.closest("[data-cancel-job]"); + if (!runBtn && !jobBtn) return; + const id = Number((runBtn || jobBtn).dataset.cancelRun || (runBtn || jobBtn).dataset.cancelJob); + const url = runBtn ? `/admin/api/crawl-runs/${id}/cancel` : `/admin/api/job-triggers/${id}/cancel`; + const msg = runBtn + ? `Demander l'arrêt du traitement #${id} ?\n\nIl s'arrêtera à son prochain point de contrôle.` + : `Retirer la demande #${id} de la file ?`; + if (!confirm(msg)) return; + (runBtn || jobBtn).disabled = true; + try { await api(url, { method: "POST", body: "{}" }); await loadPilotage(); } + catch (err) { alert(err.message); await loadPilotage(); } + }; - const b = queue.breakdown; - const queueHtml = ` -
- ${b.new_bands} nouveaux (priorité 1) - ${b.modified_since_enrich} modifiés depuis enrich (p.2) - ${b.legacy_pending} legacy à ré-enrichir (p.3) - ${b.stale} stale >30j (p.4) -
- `; - - el.innerHTML = ` -
-

Crawl en cours (${live.active_runs.length})

- ${runsHtml} -
-
-

Géocodage

- ${geoHtml} -
-
-

Jobs en attente (${live.pending_jobs.length})

- ${jobsHtml} -
-
-

File d'enrichissement

- ${queueHtml} -
- `; - const ts = document.getElementById("ov-live-ts"); - if (ts) ts.textContent = `Actualisé à ${new Date().toLocaleTimeString("fr-FR")}`; + const note = document.getElementById("p-refresh"); + if (note) note.textContent = `Actualisé à ${new Date().toLocaleTimeString("fr-FR")}`; } catch (e) { - const ts = document.getElementById("ov-live-ts"); - if (ts) ts.textContent = `Erreur : ${e.message}`; + const note = document.getElementById("p-refresh"); + if (note) note.textContent = `Erreur : ${e.message}`; } } -async function adminCancelRun(id) { - if (!confirm(`Demander l'arrêt du run #${id} ?\n\nLe crawler s'arrêtera à son prochain point de contrôle (quelques secondes à une minute selon le job).`)) return; - try { - await api(`/admin/api/crawl-runs/${id}/cancel`, { method: "POST", body: "{}" }); - await loadOverviewLive(); - } catch (e) { alert(`Erreur : ${e.message}`); } -} +// ================================================================== +// GROUPES — « trouver et corriger » +// ================================================================== +const BAND_CHIPS = [ + { key: "has_conflict", value: "true", label: "🔒 Conflits crawler" }, + { key: "has_lat", value: "false", label: "Sans coordonnées" }, + { key: "has_location", value: "false", label: "Sans lieu renseigné" }, + { key: "enriched", value: "false", label: "Non enrichis" }, +]; -async function adminCancelJob(id) { - if (!confirm(`Annuler le job trigger #${id} ?`)) return; - try { - await api(`/admin/api/job-triggers/${id}/cancel`, { method: "POST", body: "{}" }); - await loadOverviewLive(); - } catch (e) { alert(`Erreur : ${e.message}`); } -} - -// Ces deux handlers sont appelés depuis des attributs onclick= générés dans -// les templates ci-dessus : l'exposition sur `window` est explicite pour que le -// couplage reste visible (et que le linter ne les prenne pas pour du code mort). -window.adminCancelRun = adminCancelRun; -window.adminCancelJob = adminCancelJob; - -// ------------------------------------------------------------------ -// Groupes (Bands + Conflits fondus) -// ------------------------------------------------------------------ async function renderBands() { const s = state.bands; content().innerHTML = ` -
- - - - - - - - - - - +

Groupes

+ +
+ + +
+ +
+ ${BAND_CHIPS.map((c) => ``).join("")} + +
+ +
+ + + + + + +
+
Chargement…
`; - document.getElementById("b-apply").addEventListener("click", () => { - s.q = document.getElementById("b-q").value.trim(); - s.location_q = document.getElementById("b-location_q").value.trim(); - s.country = document.getElementById("b-country").value.trim(); - s.status = document.getElementById("b-status").value.trim(); - s.genre = document.getElementById("b-genre").value.trim(); - s.enriched = document.getElementById("b-enriched").value; - s.themes_q = document.getElementById("b-themes_q").value.trim(); - s.has_lat = document.getElementById("b-has_lat").value; - s.has_location = document.getElementById("b-has_location").value; - s.has_conflict = document.getElementById("b-has_conflict").checked ? "true" : ""; + + const applySearch = () => { s.q = document.getElementById("b-q").value.trim(); s.page = 1; loadBands(); }; + document.getElementById("b-search").addEventListener("click", applySearch); + document.getElementById("b-q").addEventListener("keydown", (e) => { if (e.key === "Enter") applySearch(); }); + + document.getElementById("b-advanced-toggle").addEventListener("click", (e) => { + s.advanced = !s.advanced; + document.getElementById("b-advanced").classList.toggle("hidden", !s.advanced); + e.target.setAttribute("aria-expanded", String(s.advanced)); + }); + + document.querySelector(".chips").addEventListener("click", (e) => { + const chip = e.target.closest("[data-chip]"); + if (chip) { + const { chip: key, val } = chip.dataset; + s[key] = s[key] === val ? "" : val; + s.page = 1; + renderBands(); + return; + } + if (e.target.id === "b-clear") { + for (const c of BAND_CHIPS) s[c.key] = ""; + s.q = s.country = s.status = s.genre = s.location_q = s.themes_q = ""; + s.page = 1; + renderBands(); + } + }); + + document.getElementById("b-apply")?.addEventListener("click", () => { + for (const f of ["country", "status", "genre", "location_q", "themes_q"]) { + s[f] = document.getElementById(`b-${f}`).value.trim(); + } s.page = 1; loadBands(); }); + await loadBands(); } const BAND_COLUMNS = [ - { key: "ma_id", label: "MA ID" }, + { key: "ma_id", label: "ID" }, { key: "name", label: "Nom" }, { key: "country", label: "Pays" }, { key: "status", label: "Statut" }, { key: "genre", label: "Genre" }, - { key: "themes", label: "Thèmes" }, { key: "location_text", label: "Lieu" }, { key: "formed_year", label: "Année" }, - { key: "enriched", label: "Enrichi" }, - { key: "crawled_at", label: "Crawlé le" }, - { key: "updated_at", label: "Modifié le" }, + { key: "enriched", label: "État" }, + { key: "updated_at", label: "Modifié" }, ]; async function loadBands() { const s = state.bands; - const params = new URLSearchParams({ - page: s.page, pageSize: s.pageSize, sort: s.sort, dir: s.dir, - }); - if (s.q) params.set("q", s.q); - if (s.location_q) params.set("location_q", s.location_q); - if (s.country) params.set("country", s.country); - if (s.status) params.set("status", s.status); - if (s.genre) params.set("genre", s.genre); - if (s.enriched) params.set("enriched", s.enriched); - if (s.themes_q) params.set("themes_q", s.themes_q); - if (s.has_lat) params.set("has_lat", s.has_lat); - if (s.has_location) params.set("has_location", s.has_location); - if (s.has_conflict) params.set("has_conflict", s.has_conflict); + const params = new URLSearchParams({ page: s.page, pageSize: s.pageSize, sort: s.sort, dir: s.dir }); + for (const f of ["q", "location_q", "country", "status", "genre", "themes_q", "enriched", "has_lat", "has_location", "has_conflict"]) { + if (s[f]) params.set(f, s[f]); + } try { const r = await api(`/admin/api/bands?${params}`); s.total = r.total; - const tableEl = document.getElementById("b-table"); - tableEl.innerHTML = ` + document.getElementById("b-count").textContent = `${fmtNum(r.total)} groupe(s)`; + + document.getElementById("b-table").innerHTML = ` - ${BAND_COLUMNS.map((c) => ``).join("")} + ${BAND_COLUMNS.map((c) => ``).join("")} ${r.items.map((b) => ` - + - - - + + - - + - - `).join("") || ``} + `).join("") || ``} -
${c.label}${s.sort === c.key ? (s.dir === "asc" ? " ▲" : " ▼") : ""}
${b.ma_id} ${esc(b.name)} ${esc(b.country || "")} ${esc(b.status || "")}${esc(b.genre || "")}${esc(b.themes || "")}${esc(b.location_text || "")}${esc(b.genre || "")}${esc(b.location_text || "")} ${b.formed_year || ""}${b.enriched ? 'oui' : 'non'}${Object.keys(b.locked_fields||{}).length ? ' 🔒' : ""}${fmtDate(b.crawled_at)} + ${b.enriched ? 'enrichi' : 'à enrichir'} + ${b.lat == null ? '📍?' : ""} + ${Object.keys(b.locked_fields || {}).length ? '🔒' : ""} + ${fmtDate(b.updated_at)}
Aucun résultat
Aucun résultat
- `; - tableEl.querySelectorAll("th[data-sort]").forEach((th) => { + `; + + const tableEl = document.getElementById("b-table"); + tableEl.querySelectorAll("[data-sort]").forEach((th) => { th.addEventListener("click", () => { const key = th.dataset.sort; if (s.sort === key) s.dir = s.dir === "asc" ? "desc" : "asc"; @@ -489,260 +631,443 @@ async function loadBands() { loadBands(); }); }); + // Les lignes sont activables au clavier (role=button + tabindex), pas + // seulement à la souris. tableEl.querySelectorAll("tr[data-ma-id]").forEach((tr) => { - tr.addEventListener("click", () => openBandModal(Number(tr.dataset.maId))); + const open = () => openBandModal(Number(tr.dataset.maId)); + tr.addEventListener("click", open); + tr.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(); } + }); }); - const totalPages = Math.max(1, Math.ceil(s.total / s.pageSize)); - document.getElementById("b-pager").innerHTML = ` - - Page ${s.page} / ${totalPages} (${s.total.toLocaleString("fr-FR")} bands) - - `; - document.getElementById("b-prev")?.addEventListener("click", () => { s.page--; loadBands(); }); - document.getElementById("b-next")?.addEventListener("click", () => { s.page++; loadBands(); }); + renderPager("b-pager", s, loadBands); } catch (e) { - document.getElementById("b-table").innerHTML = `
Erreur : ${esc(e.message)}
`; + document.getElementById("b-table").innerHTML = errorBox(e); } } -// Lignes de conflit champ-par-champ (crawler_pending vs valeur actuelle), -// réutilisées par le modal band. -function conflictRowsHtml(band) { - const pending = band.crawler_pending || {}; - return Object.entries(pending).map(([field, crawlerVal]) => { - const myVal = band[field] ?? "—"; - return ` - ${esc(field)} - ${esc(String(myVal))} - ${esc(String(crawlerVal))} - - - - - `; - }).join(""); +/** Pagination partagée par les trois listes. */ +function renderPager(elId, s, reload) { + const totalPages = Math.max(1, Math.ceil(s.total / s.pageSize)); + const el = document.getElementById(elId); + if (!el) return; + el.innerHTML = ` + + Page ${s.page} / ${totalPages} — ${fmtNum(s.total)} résultat(s) + `; + el.onclick = (e) => { + const btn = e.target.closest("[data-page]"); + if (!btn || btn.disabled) return; + s.page += btn.dataset.page === "next" ? 1 : -1; + reload(); + }; } -async function openBandModal(maId) { - let band, locations = [], llmCalls = []; - try { - const r = await api(`/admin/api/bands/${maId}`); - band = r.item; - locations = r.locations || []; - llmCalls = r.llm || []; - } catch (e) { - alert(`Erreur : ${e.message}`); - return; - } - // ---- Provenance & debug (lecture seule) ---- - const lockedFields = (() => { - const lf = band.locked_fields; - if (!lf) return []; - if (Array.isArray(lf)) return lf; - if (typeof lf === "object") return Object.keys(lf).filter(k => lf[k]); - try { const p = JSON.parse(lf); return Array.isArray(p) ? p : Object.keys(p); } catch { return []; } - })(); - const srcRow = (label, val) => `
${esc(label)}${val}
`; +// ================================================================== +// LOCALISATIONS — « qu'est-ce qui coince dans le géocodage ? » +// ================================================================== +const LOCATION_FILTERS = [ + { value: "error,llm_needed", label: "À débloquer" }, + { value: "error", label: "En erreur" }, + { value: "llm_needed", label: "Attente LLM" }, + { value: "queued,processing", label: "En file" }, + { value: "manual", label: "Manuel" }, + { value: "done,country_only", label: "Résolues" }, + { value: "", label: "Toutes" }, +]; - const conflictRows = conflictRowsHtml(band); - const conflictHtml = conflictRows ? ` -
- ⚠️ Conflits en attente -

- Champs verrouillés manuellement pour lesquels le crawler a trouvé une valeur différente. -

-
- - ${conflictRows} -
ChampMa valeur (verrouillée)Valeur Metal ArchivesAction
-
` : ""; +async function renderLocations() { + const s = state.locations; + // Permet aux alertes du Pilotage de pointer directement sur un statut. + const fromHash = new URLSearchParams((location.hash.split("?")[1] || "")); + if (fromHash.get("status") !== null) { s.status = fromHash.get("status"); s.page = 1; } - const locRowsHtml = locations.length ? locations.map(l => { - const coords = (l.lat != null && l.lon != null) ? `${Number(l.lat).toFixed(3)}, ${Number(l.lon).toFixed(3)}` : "—"; - const conf = l.geocode_confidence != null ? Number(l.geocode_confidence).toFixed(2) : "—"; - const tries = `${l.geocode_tries_geo || 0}g/${l.geocode_tries_llm || 0}l`; - const err = l.geocode_error ? `
${esc(l.geocode_error)}
` : ""; - return ` - ${l.step_order}${l.step_label ? ` (${esc(l.step_label)})` : ""} - ${esc(l.location_raw)}${err} - ${esc(l.geocode_status)} - ${esc(l.geocode_provider || "—")} - ${conf} - ${coords} - ${tries} - ${esc(l.geocode_query || "—")} - `; - }).join("") : `Aucune localisation dans band_locations`; - - const llmHtml = llmCalls.length ? llmCalls.map(c => { - const res = c.is_null ? `city=null` : `${esc(c.parsed_city || "?")} (${esc(c.parsed_country || "?")})`; - const cost = c.cost_usd != null ? `$${Number(c.cost_usd).toFixed(6)}` : "—"; - return `
- ${esc(c.model)} · ${esc(c.location_raw || "")} → ${res} · ${c.tokens_in || 0}+${c.tokens_out || 0}tok · ${cost} · ${fmtDate(c.created_at)} -
PROMPT:\n${esc(c.prompt || "")}\n\nRESPONSE:\n${esc(c.response || "")}
-
`; - }).join("") : `
Aucun appel LLM enregistré pour ce groupe.
`; - - const provenanceHtml = ` -
- 🔎 Provenance & géocodage (lecture seule) - -
-
Metal Archives (crawl)
- ${srcRow("enrichi", band.enriched ? "oui" : "non")} - ${srcRow("crawled_at", fmtDate(band.crawled_at))} - ${srcRow("MA créé / modifié", `${fmtDate(band.ma_created_at)} / ${fmtDate(band.ma_modified_at)}`)} - ${srcRow("champs verrouillés (manuel)", lockedFields.length ? esc(lockedFields.join(", ")) : "—")} -
- -
-
Géocodage (point du groupe)
- ${srcRow("provider", esc(band.geocode_provider || "—"))} - ${srcRow("query", esc(band.geocode_query || "—"))} - ${srcRow("geocoded_at", fmtDate(band.geocoded_at))} - ${band.geocode_error ? srcRow("erreur", `${esc(band.geocode_error)}`) : ""} -
- -
-
Localisations (band_locations)
-
- - - - - ${locRowsHtml} -
StepBrutStatutProviderConfCoordsEssaisQuery
-
-
- -
-
Appels LLM (Groq)
- ${llmHtml} -
-
`; - - const backdrop = document.createElement("div"); - backdrop.className = "modal-backdrop"; - backdrop.innerHTML = ` -
- × -

${esc(band.name)} #${band.ma_id}

- - - - - - - - - - ${conflictHtml} - ${provenanceHtml} - -
- - -
+ content().innerHTML = ` +
+

Localisations

+
+

+ Une ligne par lieu à géocoder. C'est ici qu'on débloque un lieu précis, + sans relancer des milliers d'appels facturés. +

+ +
+ + + +
+ +
+ ${LOCATION_FILTERS.map((f) => ``).join("")} +
+ +
Chargement…
+
`; - document.body.appendChild(backdrop); - const close = () => backdrop.remove(); - backdrop.querySelector(".modal-close").addEventListener("click", close); - backdrop.addEventListener("click", (e) => { if (e.target === backdrop) close(); }); - backdrop.querySelector("#m-cancel").addEventListener("click", close); - const conflictBody = backdrop.querySelector("#m-conflict-body"); - if (conflictBody) { - conflictBody.addEventListener("click", async (e) => { - const btn = e.target.closest("[data-conflict-action]"); - if (!btn) return; - const { conflictAction, field } = btn.dataset; - btn.disabled = true; - try { - await api(`/admin/api/bands/${maId}/resolve-conflict`, { - method: "POST", - body: JSON.stringify({ field, action: conflictAction }), - }); - close(); - openBandModal(maId); - } catch (err) { alert(err.message); btn.disabled = false; } - }); - } + const apply = () => { + s.q = document.getElementById("l-q").value.trim(); + s.country = document.getElementById("l-country").value.trim(); + s.page = 1; + loadLocations(); + }; + document.getElementById("l-search").addEventListener("click", apply); + document.getElementById("l-q").addEventListener("keydown", (e) => { if (e.key === "Enter") apply(); }); - backdrop.querySelector("#m-save").addEventListener("click", async () => { - const errEl = backdrop.querySelector("#m-error"); - errEl.textContent = ""; - const payload = { - name: backdrop.querySelector("#m-name").value.trim() || null, - country: backdrop.querySelector("#m-country").value.trim() || null, - status: backdrop.querySelector("#m-status").value.trim() || null, - genre: backdrop.querySelector("#m-genre").value.trim() || null, - location_text: backdrop.querySelector("#m-location_text").value.trim() || null, - themes: backdrop.querySelector("#m-themes").value.trim() || null, - formed_year: backdrop.querySelector("#m-formed_year").value ? Number(backdrop.querySelector("#m-formed_year").value) : null, - lat: backdrop.querySelector("#m-lat").value ? Number(backdrop.querySelector("#m-lat").value) : null, - lon: backdrop.querySelector("#m-lon").value ? Number(backdrop.querySelector("#m-lon").value) : null, + document.querySelector(".chips").addEventListener("click", (e) => { + const chip = e.target.closest("[data-status]"); + if (!chip) return; + s.status = chip.dataset.status; + s.page = 1; + renderLocations(); + }); + + await loadLocations(); +} + +async function loadLocations() { + const s = state.locations; + const params = new URLSearchParams({ page: s.page, pageSize: s.pageSize }); + if (s.status) params.set("status", s.status); + if (s.q) params.set("q", s.q); + if (s.country) params.set("country", s.country); + + try { + const r = await api(`/admin/api/locations?${params}`); + s.total = r.total; + document.getElementById("l-count").textContent = `${fmtNum(r.total)} localisation(s)`; + + document.getElementById("l-table").innerHTML = ` + + + + + + + ${r.items.map((l) => ` + + + + + + + + + `).join("") || ``} + +
GroupeLieu brutStatutCoordonnéesEssaisDernière erreurActions
+ +
${esc(l.country || "")}${l.step_label ? ` · ${esc(l.step_label)}` : ""}
+ 		${esc(l.location_raw)}${statusBadge(l.geocode_status)}${l.lat != null && l.lon != null ? `${Number(l.lat).toFixed(4)}, ${Number(l.lon).toFixed(4)}` : "—"} +
${esc(l.geocode_provider || "")}${l.geocode_confidence != null ? ` · ${Number(l.geocode_confidence).toFixed(2)}` : ""}
+ 		${l.geocode_tries_geo || 0} géo · ${l.geocode_tries_llm || 0} LLM${esc(l.geocode_error || "—")} + + +
Aucune localisation pour ce filtre
`; + + document.getElementById("l-table").onclick = (e) => { + const band = e.target.closest("[data-open-band]"); + if (band) return openBandModal(Number(band.dataset.openBand)); + const rq = e.target.closest("[data-requeue]"); + if (rq) return requeueLocation(Number(rq.dataset.requeue), rq); + const sc = e.target.closest("[data-setcoords]"); + if (sc) { + const id = Number(sc.dataset.setcoords); + return openCoordsModal(r.items.find((x) => x.id === id)); + } }; + + renderPager("l-pager", s, loadLocations); + } catch (e) { + document.getElementById("l-table").innerHTML = errorBox(e); + } +} + +async function requeueLocation(id, btn) { + btn.disabled = true; + try { + await api(`/admin/api/locations/${id}/requeue`, { method: "POST", body: "{}" }); + await loadLocations(); + } catch (e) { + alert(e.message); + btn.disabled = false; + } +} + +function openCoordsModal(loc) { + if (!loc) return; + const body = ` +

+ Saisir les coordonnées à la main pour ${esc(loc.location_raw)} + (${esc(loc.band_name || "#" + loc.ma_id)}). Le lieu sera marqué comme résolu + par « admin » et ne repassera plus par le géocodeur. +

+ + + +
+ + +
`; + + const modal = openModal(`Coordonnées — ${esc(loc.location_raw)}`, body); + modal.querySelector("#c-save").addEventListener("click", async () => { + const errEl = modal.querySelector("#c-error"); + errEl.textContent = ""; try { - await api(`/admin/api/bands/${maId}`, { method: "PATCH", body: JSON.stringify(payload) }); - close(); - loadBands(); + await api(`/admin/api/locations/${loc.id}`, { + method: "PATCH", + body: JSON.stringify({ + lat: modal.querySelector("#c-lat").value, + lon: modal.querySelector("#c-lon").value, + }), + }); + closeModal(modal); + await loadLocations(); } catch (e) { errEl.textContent = e.message; } }); } -// ------------------------------------------------------------------ -// Activité — liste unifiée (crawl_run + admin_audit_log), cliquable → détail + logs -// ------------------------------------------------------------------ +// ================================================================== +// Modales — ouverture, fermeture, piège à focus +// ================================================================== +let lastFocused = null; + +function openModal(title, bodyHtml, extraClass = "") { + lastFocused = document.activeElement; + const backdrop = document.createElement("div"); + backdrop.className = "modal-backdrop"; + backdrop.innerHTML = ` + `; + document.body.appendChild(backdrop); + + backdrop.addEventListener("click", (e) => { + if (e.target === backdrop || e.target.closest("[data-close]")) closeModal(backdrop); + }); + // Échap ferme, Tab reste enfermé dans la modale : sans ça le focus repartait + // derrière le voile, invisible. + backdrop.addEventListener("keydown", (e) => { + if (e.key === "Escape") { closeModal(backdrop); return; } + if (e.key !== "Tab") return; + const focusables = backdrop.querySelectorAll( + 'button, [href], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])'); + if (!focusables.length) return; + const first = focusables[0]; + const last = focusables[focusables.length - 1]; + if (e.shiftKey && document.activeElement === first) { e.preventDefault(); last.focus(); } + else if (!e.shiftKey && document.activeElement === last) { e.preventDefault(); first.focus(); } + }); + + const target = backdrop.querySelector("input, button:not(.modal-close)"); + (target || backdrop.querySelector(".modal-close")).focus(); + return backdrop; +} + +function closeModal(backdrop) { + backdrop.remove(); + if (lastFocused && document.contains(lastFocused)) lastFocused.focus(); +} + +// ================================================================== +// Modal groupe (édition + provenance) +// ================================================================== +function conflictRowsHtml(band) { + const pending = band.crawler_pending || {}; + return Object.entries(pending).map(([field, crawlerVal]) => ` + + ${esc(field)} + ${esc(String(band[field] ?? "—"))} + ${esc(String(crawlerVal))} + + + + + `).join(""); +} + +async function openBandModal(maId) { + let band, locations = [], llmCalls = []; + try { + const r = await api(`/admin/api/bands/${maId}`); + band = r.item; locations = r.locations || []; llmCalls = r.llm || []; + } catch (e) { + alert(e.message); + return; + } + + const lockedFields = (() => { + const lf = band.locked_fields; + if (!lf) return []; + if (Array.isArray(lf)) return lf; + if (typeof lf === "object") return Object.keys(lf).filter((k) => lf[k]); + try { const p = JSON.parse(lf); return Array.isArray(p) ? p : Object.keys(p); } catch { return []; } + })(); + + const conflictRows = conflictRowsHtml(band); + const fields = [ + ["name", "Nom", "text"], ["country", "Pays", "text"], ["status", "Statut", "text"], + ["genre", "Genre", "text"], ["formed_year", "Année de formation", "number"], + ["location_text", "Localisation (texte)", "text"], ["themes", "Thèmes", "text"], + ["lat", "Latitude", "number"], ["lon", "Longitude", "number"], + ]; + + const body = ` + ${conflictRows ? ` +
+

⚠️ Conflits en attente d'arbitrage

+

Champs verrouillés pour lesquels Metal Archives propose une autre valeur.

+
+ + ${conflictRows} +
ChampValeur actuelleMetal ArchivesAction
+
` : ""} + +
+

Fiche

+
+ ${fields.map(([k, label, type]) => ` + `).join("")} +
+

+ Modifier un champ le verrouille : le crawler ne l'écrasera plus. + Saisir des coordonnées crée aussi un point manuel prioritaire sur la carte. +

+
+ +
+ Provenance et géocodage +
+
Enrichi${band.enriched ? "oui" : "non"}
+
Dernier crawl${fmtDate(band.crawled_at)}
+
MA créé / modifié${fmtDate(band.ma_created_at)} / ${fmtDate(band.ma_modified_at)}
+
Champs verrouillés${lockedFields.length ? esc(lockedFields.join(", ")) : "—"}
+
Point principal${esc(band.geocode_provider || "—")} · ${fmtDate(band.geocoded_at)}
+
+ +

Localisations (${locations.length})

+
+ + + ${locations.map((l) => ` + + + + + + + `).join("") || ``} + +
ÉtapeLieu brutStatutProviderConf.Coordonnées
${l.step_order}${l.step_label ? ` (${esc(l.step_label)})` : ""}${esc(l.location_raw)}${l.geocode_error ? `
${esc(l.geocode_error)}
` : ""}		${statusBadge(l.geocode_status)}${esc(l.geocode_provider || "—")}${l.geocode_confidence != null ? Number(l.geocode_confidence).toFixed(2) : "—"}${l.lat != null ? `${Number(l.lat).toFixed(3)}, ${Number(l.lon).toFixed(3)}` : "—"}
Aucune localisation
+ +

Appels LLM (${llmCalls.length})

+ ${llmCalls.map((c) => ` +
+ ${esc(c.model)} · ${esc(c.location_raw || "")} → ${c.is_null ? "aucun résultat" : esc(c.parsed_city || "?")} · ${c.cost_usd != null ? `$${Number(c.cost_usd).toFixed(6)}` : "—"} + 
PROMPT:\n${esc(c.prompt || "")}\n\nRÉPONSE:\n${esc(c.response || "")}
+
`).join("") || `

Aucun appel LLM pour ce groupe.

`} +
+ + +
+ + +
`; + + const modal = openModal(`${band.name} — #${band.ma_id}`, body, "modal-wide"); + + const conflictBody = modal.querySelector("#m-conflict-body"); + conflictBody?.addEventListener("click", async (e) => { + const btn = e.target.closest("[data-conflict-action]"); + if (!btn) return; + btn.disabled = true; + try { + await api(`/admin/api/bands/${maId}/resolve-conflict`, { + method: "POST", + body: JSON.stringify({ field: btn.dataset.field, action: btn.dataset.conflictAction }), + }); + closeModal(modal); + openBandModal(maId); + } catch (err) { alert(err.message); btn.disabled = false; } + }); + + modal.querySelector("#m-save").addEventListener("click", async () => { + const errEl = modal.querySelector("#m-error"); + errEl.textContent = ""; + const val = (k) => modal.querySelector(`#m-${k}`).value.trim(); + const num = (k) => (val(k) === "" ? null : Number(val(k))); + const payload = { + name: val("name") || null, country: val("country") || null, + status: val("status") || null, genre: val("genre") || null, + location_text: val("location_text") || null, themes: val("themes") || null, + formed_year: num("formed_year"), lat: num("lat"), lon: num("lon"), + }; + try { + await api(`/admin/api/bands/${maId}`, { method: "PATCH", body: JSON.stringify(payload) }); + closeModal(modal); + if (state.view === "bands") loadBands(); + else if (state.view === "locations") loadLocations(); + } catch (e) { + errEl.textContent = e.message; + } + }); +} + +// ================================================================== +// JOURNAL — « que s'est-il passé ? » +// ================================================================== async function renderActivity() { const s = state.activity; content().innerHTML = ` -
- - - - Auto-refresh 15s +
+

Journal

+ Actualisation auto toutes les 15 s +
+
+ + + + +
Chargement…
`; - document.getElementById("a-apply").addEventListener("click", () => { - s.type = document.getElementById("a-type").value; - s.status = document.getElementById("a-status").value; - s.page = 1; - loadActivity(); + + document.querySelector(".chips").addEventListener("click", (e) => { + const t = e.target.closest("[data-atype]"); + const st = e.target.closest("[data-astatus]"); + if (t) { s.type = t.dataset.atype; s.page = 1; renderActivity(); } + else if (st) { s.status = s.status === st.dataset.astatus ? "" : st.dataset.astatus; s.page = 1; renderActivity(); } }); + await loadActivity(); - if (state.overviewTimer) clearInterval(state.overviewTimer); - state.overviewTimer = setInterval(async () => { + clearTimer(); + state.timer = setInterval(async () => { await loadActivity(); - const el = document.getElementById("a-refresh-status"); - if (el) el.textContent = `Actualisé ${new Date().toLocaleTimeString("fr-FR")}`; + const el = document.getElementById("a-refresh"); + if (el) el.textContent = `Actualisé à ${new Date().toLocaleTimeString("fr-FR")}`; }, 15000); } function activitySummary(row) { - if (!row) return "—"; - const sum = row.summary || {}; - if (row.type === "run") { + const sum = row?.summary || {}; + if (row?.type === "run") { const parts = []; - if (sum.bands_seen != null) parts.push(`${sum.bands_seen} vus`); - if (sum.bands_new) parts.push(`${sum.bands_new} nouveaux`); - if (sum.bands_updated) parts.push(`${sum.bands_updated} MAJ`); - if (sum.bands_enriched) parts.push(`${sum.bands_enriched} enrichis`); - if (sum.error) parts.push(`erreur: ${sum.error}`); + if (sum.bands_seen != null) parts.push(`${fmtNum(sum.bands_seen)} vus`); + if (sum.bands_new) parts.push(`${fmtNum(sum.bands_new)} nouveaux`); + if (sum.bands_updated) parts.push(`${fmtNum(sum.bands_updated)} MAJ`); + if (sum.bands_enriched) parts.push(`${fmtNum(sum.bands_enriched)} enrichis`); + if (sum.error) parts.push(`erreur : ${sum.error}`); return parts.join(" · ") || "—"; } return `${esc(sum.target_table || "")} #${sum.target_id ?? ""}`; @@ -758,350 +1083,181 @@ async function loadActivity() { s.total = r.total; document.getElementById("a-table").innerHTML = ` - + - ${r.items.map((x) => ` - - - + ${r.items.map((x, i) => ` + + + - - - `).join("") || ``} + + `).join("") || ``} -
DateTypeSous-typeStatutActeurRésumé
DateTypeDétailStatutAuteurRésumé
${fmtDate(x.ts)}${x.type === "run" ? "Run" : "Admin"}
${fmtDate(x.ts)}${x.type === "run" ? "Traitement" : "Admin"} ${esc(x.subtype)} ${statusBadge(x.status)} ${esc(x.actor || "—")}${activitySummary(x)}
Aucune activité
${activitySummary(x)}
Aucune activité
- `; - document.getElementById("a-table").querySelectorAll("tr[data-id]").forEach((tr, index) => { - const row = r.items[index]; - tr.addEventListener("click", () => openActivityModal(tr.dataset.type, Number(tr.dataset.id), row)); + `; + + document.getElementById("a-table").querySelectorAll("tr[data-idx]").forEach((tr) => { + const row = r.items[Number(tr.dataset.idx)]; + const open = () => openActivityModal(row); + tr.addEventListener("click", open); + tr.addEventListener("keydown", (e) => { + if (e.key === "Enter" || e.key === " ") { e.preventDefault(); open(); } + }); }); - const totalPages = Math.max(1, Math.ceil(s.total / s.pageSize)); - document.getElementById("a-pager").innerHTML = ` - - Page ${s.page} / ${totalPages} (${s.total.toLocaleString("fr-FR")}) - - `; - document.getElementById("a-prev")?.addEventListener("click", () => { s.page--; loadActivity(); }); - document.getElementById("a-next")?.addEventListener("click", () => { s.page++; loadActivity(); }); + renderPager("a-pager", s, loadActivity); } catch (e) { - document.getElementById("a-table").innerHTML = `
Erreur : ${esc(e.message)}
`; + document.getElementById("a-table").innerHTML = errorBox(e); } } -async function openActivityModal(type, id, row) { - const backdrop = document.createElement("div"); - backdrop.className = "modal-backdrop"; +async function openActivityModal(row) { + const sum = row?.summary || {}; + const isRun = row?.type === "run"; + const body = isRun + ? `
+ ${statusBadge(row.status)} · démarré ${fmtDate(row.ts)} · terminé ${fmtDate(row.finished_at)} + ${sum.countries ? ` · pays : ${esc((sum.countries || []).join(", "))}` : ""} +
+

${activitySummary(row)}

+ ${row.status === "running" ? `` : ""} +

Journal détaillé

+
Chargement…
` + : `
${fmtDate(row.ts)} · ${esc(row.actor || "")} · ${esc(row.subtype || "")}
+

Cible : ${esc(sum.target_table || "")} #${sum.target_id ?? ""}

+
+

Avant

${esc(JSON.stringify(sum.before, null, 2))}
+

Après

${esc(JSON.stringify(sum.after, null, 2))}
+
`; - let bodyHtml; - if (type === "run") { - const sum = row?.summary || {}; - bodyHtml = ` -
- ${statusBadge(row?.status)} · démarré ${fmtDate(row?.ts)} · terminé ${fmtDate(row?.finished_at)} - ${sum.countries ? ` · pays: ${esc((sum.countries||[]).join(", "))}` : ""} -
-
${activitySummary(row)}
- ${row?.status === "running" ? `` : ""} -

Logs

-
Chargement…
- `; - } else { - const sum = row?.summary || {}; - bodyHtml = ` -
${fmtDate(row?.ts)} · ${esc(row?.actor || "")} · ${esc(row?.subtype || "")}
-
Cible : ${esc(sum.target_table || "")} #${sum.target_id ?? ""}
-
-
-
Avant
- 
${esc(JSON.stringify(sum.before, null, 2))}
-
-
-
Après
- 
${esc(JSON.stringify(sum.after, null, 2))}
-
-
- `; - } + const modal = openModal( + isRun ? `Traitement #${row.id} — ${esc(row.subtype || "")}` : `Action admin #${row.id}`, + body, "modal-wide"); - backdrop.innerHTML = ` -
- × -

${type === "run" ? `Run #${id} — ${esc(row?.subtype || "")}` : `Action admin #${id}`}

- ${bodyHtml} -
- `; - document.body.appendChild(backdrop); - const close = () => backdrop.remove(); - backdrop.querySelector(".modal-close").addEventListener("click", close); - backdrop.addEventListener("click", (e) => { if (e.target === backdrop) close(); }); + modal.querySelector("#am-cancel")?.addEventListener("click", async (e) => { + if (!confirm(`Demander l'arrêt du traitement #${row.id} ?`)) return; + e.target.disabled = true; + try { await api(`/admin/api/crawl-runs/${row.id}/cancel`, { method: "POST", body: "{}" }); closeModal(modal); loadActivity(); } + catch (err) { alert(err.message); } + }); - if (type === "run") { + if (isRun) { try { - const logs = await api(`/admin/api/logs?run_id=${id}&pageSize=200`); - const logsEl = backdrop.querySelector("#act-logs"); - if (logsEl) logsEl.innerHTML = logs.items.map(x => { - const lvlCls = x.level === "error" ? "err" : x.level === "warning" ? "warn" : "muted"; - return `
- ${fmtDate(x.created_at)} - ${esc(x.level)} - ${esc(x.message)} -
`; - }).join("") || `
Aucun log pour ce run
`; + const logs = await api(`/admin/api/logs?run_id=${row.id}&pageSize=200`); + const el = modal.querySelector("#act-logs"); + if (el) { + el.innerHTML = logs.items.map((x) => ` +
+ ${fmtDate(x.created_at)} + ${esc(x.level)} + ${esc(x.message)} +
`).join("") || emptyRow("Aucun log pour ce traitement"); + } } catch (e) { - const logsEl = backdrop.querySelector("#act-logs"); - if (logsEl) logsEl.innerHTML = `
Erreur : ${esc(e.message)}
`; + const el = modal.querySelector("#act-logs"); + if (el) el.innerHTML = errorBox(e); } } } -// ------------------------------------------------------------------ -// Actions — toutes les commandes possibles, groupées et vérifiées -// ------------------------------------------------------------------ -async function renderActions() { - content().innerHTML = ` -
- -
-

🕷 Crawl

-

Consommés par le crawler dans sa prochaine itération (~1 min).

-
- - - -
-
-
- -
-

🗺 Géocodage

-

L'enqueue tourne aussi automatiquement en tâche de fond (rattrapage). Statistiques dans Vue d'ensemble.

-
- - - - -
-
-
- -
-

🧹 Maintenance

-
- -
-
-
- -
-

⚠️ Zone dangereuse — tout recommencer

-

- À utiliser si le géocodage est corrompu. « Reset complet » remet toutes les - localisations en queue et efface leurs coordonnées (cache réutilisé quand - possible). « Purger cache Nominatim » supprime les vieux géocodages de - l'ancien pipeline pour forcer un re-géocodage Geoapify frais. -

-
- - -
-
-
- -
- -
-

Checkpoints crawler (lecture seule)

-
Chargement…
-
- `; - - // Crawl - document.querySelectorAll("[data-job]").forEach((btn) => { - btn.addEventListener("click", async () => { - const job_type = btn.dataset.job; - btn.disabled = true; - const fb = document.getElementById("job-feedback"); - fb.textContent = "Envoi…"; fb.style.color = "var(--muted)"; - try { - const r = await api("/admin/api/job-triggers", { method: "POST", body: JSON.stringify({ job_type }) }); - fb.textContent = `✓ Job #${r.id} créé — le crawler le consommera sous ~1 min (visible dans Activité).`; - fb.style.color = "var(--ok)"; - } catch (e) { - fb.textContent = `Erreur: ${e.message}`; fb.style.color = "var(--err)"; - } finally { btn.disabled = false; } - }); - }); - - // Géocodage — actions simples - const makeLocAction = (btnId, fbId, url, body, confirmMsg, successMsg) => { - document.getElementById(btnId).addEventListener("click", async () => { - if (confirmMsg && !confirm(confirmMsg)) return; - const btn = document.getElementById(btnId); - btn.disabled = true; - const fb = document.getElementById(fbId); - fb.textContent = "En cours…"; fb.style.color = "var(--muted)"; - try { - const r = await api(url, { method: "POST", body: JSON.stringify(body || {}) }); - fb.textContent = successMsg ? successMsg(r) : `✓ ${r.count} entrée(s) modifiée(s).`; - fb.style.color = "var(--ok)"; - } catch (e) { - fb.textContent = `Erreur: ${e.message}`; fb.style.color = "var(--err)"; - } finally { btn.disabled = false; } - }); - }; - - document.getElementById("loc-enqueue").addEventListener("click", async () => { - const btn = document.getElementById("loc-enqueue"); - btn.disabled = true; - const fb = document.getElementById("geo-feedback"); - fb.textContent = "Job envoyé, le daemon va démarrer l'enqueue (peut prendre quelques secondes)…"; - fb.style.color = "var(--muted)"; - try { - await api("/admin/api/job-triggers", { method: "POST", body: JSON.stringify({ job_type: "geocoder_enqueue" }) }); - fb.textContent = "✓ Job geocoder_enqueue créé — suivre sa progression dans Activité."; - fb.style.color = "var(--ok)"; - } catch (e) { - fb.textContent = `Erreur: ${e.message}`; fb.style.color = "var(--err)"; - } finally { btn.disabled = false; } - }); - - makeLocAction("loc-reset-errors", "geo-feedback", "/admin/api/locations/reset-errors", {}, null); - makeLocAction("loc-reset-llm", "geo-feedback", "/admin/api/locations/reset-llm", {}, "Remettre en queue les entrées llm_needed et manual ?"); - makeLocAction("loc-requeue-all", "geo-feedback", "/admin/api/locations/requeue-all", { include_done: true }, "Re-queue TOUTES les band_locations (erreurs + LLM + manual + done) ?"); - - // Zone dangereuse - makeLocAction("loc-reset-all", "danger-feedback", "/admin/api/locations/reset-all", {}, - "⚠️ RESET COMPLET : remettre TOUTES les localisations en queue et effacer leurs coordonnées ? Le worker va tout re-géocoder (cache réutilisé quand possible)."); - makeLocAction("cache-purge-nominatim", "danger-feedback", "/admin/api/geocode-cache/purge-nominatim", {}, - "⚠️ Supprimer toutes les entrées de cache Nominatim (ancien pipeline) ? Ces lieux seront re-géocodés via Geoapify (coûte des appels API)."); - - // Maintenance - document.getElementById("cmd-cleanup").addEventListener("click", async () => { - const btn = document.getElementById("cmd-cleanup"); - btn.disabled = true; - const fb = document.getElementById("maintenance-feedback"); - fb.textContent = "Nettoyage…"; fb.style.color = "var(--muted)"; - try { - const r = await api("/admin/api/crawl-runs/cleanup", { method: "POST", body: JSON.stringify({ older_than_minutes: 30 }) }); - fb.textContent = `✓ ${r.cleaned} run(s) annulé(s).`; - fb.style.color = "var(--ok)"; - } catch (e) { - fb.textContent = `Erreur: ${e.message}`; fb.style.color = "var(--err)"; - } finally { btn.disabled = false; } - }); - - // Checkpoints (lecture seule) - try { - const r = await api("/admin/api/crawl-checkpoints"); - document.getElementById("checkpoints-wrap").innerHTML = ` - - - - ${r.items.map((x) => ``).join("") || ``} - -
CléValeurMis à jour
${esc(x.key)}${esc(x.value || "—")}${fmtDate(x.updated_at)}
Aucun checkpoint
- `; - } catch (e) { - document.getElementById("checkpoints-wrap").innerHTML = `
Erreur : ${esc(e.message)}
`; - } -} - -// ------------------------------------------------------------------ -// LLM — debug des appels Groq (désambiguïsation géocodage) -// ------------------------------------------------------------------ +// ================================================================== +// LLM & COÛTS +// ================================================================== async function renderLLM() { content().innerHTML = ` -
- - + - - - + +
-

- Chaque appel Groq est mis en cache (clé = modèle + pays + lieu) et relié au groupe déclencheur. - Déplie une ligne pour voir le prompt exact et la réponse brute du modèle. -

Chargement…
`; - if (!state.llm) state.llm = { page: 1 }; + document.getElementById("llm-apply").addEventListener("click", () => { state.llm.page = 1; loadLLM(); }); - // Délégation attachée une seule fois sur le conteneur persistant. - document.getElementById("llm-list").addEventListener("click", (e) => { - const det = e.target.closest(".llm-detail"); - if (det) { - const row = document.querySelector(`.llm-detail-row[data-id="${det.dataset.id}"]`); - if (row) row.style.display = row.style.display === "none" ? "" : "none"; - return; - } - const bandLink = e.target.closest(".llm-band"); - if (bandLink) { e.preventDefault(); openBandModal(Number(bandLink.dataset.ma)); } + document.getElementById("llm-q").addEventListener("keydown", (e) => { + if (e.key === "Enter") { state.llm.page = 1; loadLLM(); } }); + document.getElementById("llm-list").addEventListener("click", (e) => { + const band = e.target.closest("[data-open-band]"); + if (band) openBandModal(Number(band.dataset.openBand)); + }); + + loadLLMSummary(); await loadLLM(); } +async function loadLLMSummary() { + try { + const geo = await api("/admin/api/geocoding"); + const c = geo.llm_cache || {}; + const models = geo.llm_models || []; + document.getElementById("llm-summary").innerHTML = [ + healthCard("Coût total", `$${Number(c.total_cost_usd || 0).toFixed(4)}`, "cumul Groq"), + healthCard("Appels", fmtNum(c.n), `${fmtNum(c.n_null)} sans résultat`), + healthCard("Cache géocodage", fmtNum(geo.cache_size), "lieux déjà résolus"), + ...models.slice(0, 2).map((m) => + healthCard(m.model, fmtNum(m.n), `$${Number(m.cost || 0).toFixed(4)}`)), + ].join(""); + } catch (e) { + document.getElementById("llm-summary").innerHTML = errorBox(e); + } +} + async function loadLLM() { const q = document.getElementById("llm-q")?.value.trim() || ""; const model = document.getElementById("llm-model")?.value || ""; const onlyNull = document.getElementById("llm-null")?.checked ? "1" : ""; - const page = state.llm?.page || 1; + const page = state.llm.page || 1; const params = new URLSearchParams({ page: String(page), pageSize: "50" }); if (q) params.set("q", q); if (model) params.set("model", model); if (onlyNull) params.set("only_null", "1"); + try { - const r = await api(`/admin/api/llm?${params.toString()}`); - const st = document.getElementById("llm-status"); - if (st) st.textContent = `${r.total.toLocaleString("fr-FR")} appel(s) LLM`; - const rows = (r.items || []).map((c) => { - const res = c.is_null - ? `null` - : `${esc(c.parsed_city || "?")} (${esc(c.parsed_country || "?")})`; - const cost = c.cost_usd != null ? `$${Number(c.cost_usd).toFixed(6)}` : "—"; - const band = c.ma_id - ? `${esc(c.band_name || ("#" + c.ma_id))}` - : "—"; - return ` - ${fmtDate(c.created_at)} - ${band} - ${esc(c.model)} - ${esc(c.location_raw || "—")}${c.country ? ` [${esc(c.country)}]` : ""} - ${res} - ${(c.tokens_in || 0)}+${(c.tokens_out || 0)} - ${cost} - - - -
PROMPT:\n${esc(c.prompt || "")}\n\nRESPONSE:\n${esc(c.response || "")}
- `; - }).join(""); - document.getElementById("llm-list").innerHTML = rows - ? `${rows}
DateGroupeModèleLieu (brut)ExtraitTokensCoût
` - : `
Aucun appel LLM.
`; - const totalPages = Math.max(1, Math.ceil(r.total / 50)); - document.getElementById("llm-pager").innerHTML = ` - - Page ${page} / ${totalPages} - - `; - document.getElementById("llm-prev")?.addEventListener("click", () => { state.llm.page = page - 1; loadLLM(); }); - document.getElementById("llm-next")?.addEventListener("click", () => { state.llm.page = page + 1; loadLLM(); }); + const r = await api(`/admin/api/llm?${params}`); + document.getElementById("llm-status").textContent = `${fmtNum(r.total)} appel(s)`; + + document.getElementById("llm-list").innerHTML = r.items.length ? ` + + + + ${r.items.map((c) => ` + + + + + + + + + + `).join("")} + +
DateGroupeModèleLieuRésultatTokensCoût
${fmtDate(c.created_at)}${c.ma_id ? `` : "—"}${esc(c.model)}${esc(c.location_raw || "—")}${c.country ? ` [${esc(c.country)}]` : ""}${c.is_null ? 'aucun' : `${esc(c.parsed_city || "?")} (${esc(c.parsed_country || "?")})`}${(c.tokens_in || 0)}+${(c.tokens_out || 0)}${c.cost_usd != null ? `$${Number(c.cost_usd).toFixed(6)}` : "—"}
+
Prompt et réponse + 
PROMPT:\n${esc(c.prompt || "")}\n\nRÉPONSE:\n${esc(c.response || "")}
+
+
` : emptyRow("Aucun appel LLM"); + + const s = { page, pageSize: 50, total: r.total }; + renderPager("llm-pager", s, () => { state.llm.page = s.page; loadLLM(); }); } catch (e) { - document.getElementById("llm-list").innerHTML = `
Erreur : ${esc(e.message)}
`; + document.getElementById("llm-list").innerHTML = errorBox(e); } } -// ------------------------------------------------------------------ -// Boot // ------------------------------------------------------------------ checkSession(); diff --git a/apps/admin/site/index.html b/apps/admin/site/index.html index a7a51f7..98921e1 100644 --- a/apps/admin/site/index.html +++ b/apps/admin/site/index.html @@ -29,12 +29,12 @@