// Panel Challenges — Salle d'examen Jarvis // Deux modes : Théorie (quiz à choix) et Pratique (exercices évalués) // États : hub (liste) → quiz/exercise (passage) → résultat const { useState: useStateChal, useMemo: useMemoChal, useEffect: useEffectChal } = React; // ───────────────────────────────────────────────────────── // Jarvis client (évaluation pratique) // ───────────────────────────────────────────────────────── function jarvisGatewayCandidatesChal(){ const list = []; const isHTTPS = typeof location !== "undefined" && location.protocol === "https:"; let tunnel = null; try { tunnel = window.PROFILE_DATA?._values?.jarvis_tunnel_url || null; } catch {} if (!isHTTPS) list.push("http://localhost:8765"); if (tunnel) list.push(String(tunnel).replace(/\/+$/, "")); if (isHTTPS) list.push("http://localhost:8765"); // visible mixed-content failure return list; } async function callJarvisEvaluate(ch, answer){ const body = { challenge_id: /^[0-9a-f-]{36}$/i.test(ch.id || "") ? ch.id : null, title: ch.title || "", brief: ch.brief || "", constraints: Array.isArray(ch.constraints) ? ch.constraints : [], eval_criteria: ch.eval_criteria || "", answer, }; const candidates = jarvisGatewayCandidatesChal(); let lastErr = null; for (const base of candidates) { try { const ctrl = new AbortController(); const t = setTimeout(() => ctrl.abort(), 120000); const r = await fetch(base + "/evaluate-challenge", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), signal: ctrl.signal, }); clearTimeout(t); if (!r.ok) { lastErr = new Error("HTTP " + r.status); continue; } return await r.json(); } catch (e) { lastErr = e; } } throw lastErr || new Error("Jarvis injoignable"); } async function persistChallengeAttempt(ch, result){ if (!window.sb || !window.SUPABASE_URL) return null; const payload = { challenge_ref: ch.id, challenge_source: ch.id && /^[0-9a-f-]{36}$/i.test(ch.id) ? "db" : "fake", mode: result.mode, axis: ch.axis || null, title: ch.title || null, difficulty: ch.difficulty || null, score_percent: Math.max(0, Math.min(100, Math.round(Number(result.score || 0)))), xp_earned: result.score >= 70 ? Math.round(Number(ch.xp || 0) * (result.score / 100)) : 0, answers: result.mode === "theory" ? { answers: result.answers, correct: result.correctCount, total: result.total } : { answer: result.answer, evaluation: result.evaluation }, }; const url = `${window.SUPABASE_URL}/rest/v1/challenge_attempts`; try { const rows = await window.sb.postJSON(url, payload); try { window.track && window.track("challenge_completed", { ref: ch.id, mode: result.mode, score: payload.score_percent }); } catch {} return Array.isArray(rows) && rows[0] ? rows[0] : { ...payload, completed_at: new Date().toISOString() }; } catch (e) { console.error("[challenges] persist failed", e); return null; } } // Bump skill_radar.score on the targeted axis si c'est la 1ère fois que // l'utilisateur passe ce challenge à ≥70%. Retries après succès = pas de double bump. async function bumpSkillRadar(ch, score, priorAttempts){ if (!ch || !ch.axis || !window.sb || !window.SUPABASE_URL) return null; if (Number(score) < 70) return null; const alreadyPassed = (priorAttempts || []).some(a => a.challenge_ref === ch.id && Number(a.score_percent || 0) >= 70 ); if (alreadyPassed) return null; const base = `${window.SUPABASE_URL}/rest/v1/skill_radar`; try { // Read current row (score + history) const rows = await window.sb.fetchJSON(`${base}?axis=eq.${encodeURIComponent(ch.axis)}&select=id,score,history&limit=1`); if (!rows || !rows[0]) return null; const row = rows[0]; const reward = Number(ch.score_reward || 0.5); const newScore = Math.min(5, Number(row.score || 0) + reward); let history = row.history; if (typeof history === "string") { try { history = JSON.parse(history); } catch { history = []; } } if (!Array.isArray(history)) history = []; history = [...history, { date: new Date().toISOString().slice(0, 10), score: newScore, reason: `challenge "${ch.title || ch.id}" (+${reward})`, }]; const r = await window.sb.patchJSON(`${base}?id=eq.${row.id}`, { score: newScore, history, last_assessed: new Date().toISOString().slice(0, 10), }); if (!r.ok) throw new Error("patch " + r.status); try { window.track && window.track("skill_radar_bumped", { axis: ch.axis, reward, new_score: newScore }); } catch {} // Mise à jour optimiste du radar côté front pour re-render immédiat const appr = window.APPRENTISSAGE_DATA; if (appr && appr.radar && Array.isArray(appr.radar.axes)) { const ax = appr.radar.axes.find(a => (a.axis || a.id) === ch.axis); if (ax) { const displayScore = Math.round(newScore * 20); // 0-5 → 0-100 ax.score = displayScore; ax.gap = displayScore < 50; } } return { newScore, reward }; } catch (e) { console.error("[challenges] skill_radar bump failed", e); return null; } } function PanelChallenges({ data, onNavigate }) { const c = window.CHALLENGES_DATA; const [mode, setMode] = useStateChal("theory"); // "theory" | "practice" const [filter, setFilter] = useStateChal("open"); // "open" | "recommended" | "all" | "done" const [active, setActive] = useStateChal(null); // challenge in progress const [completed, setCompleted] = useStateChal(null); // challenge just completed const [axisFilter, setAxisFilter] = useStateChal(null); // axis id prefilled from radar // Bump to force re-render after applyAttemptsToChallenges mutates CHALLENGES_DATA. const [revision, setRevision] = useStateChal(0); // Consume axis prefill stashed by panel-radar's "Défi cet axe" CTA. // The prefill is single-use — cleared after consumption. useEffectChal(() => { try { const axis = localStorage.getItem("challenges-prefill-axis"); if (axis) { localStorage.removeItem("challenges-prefill-axis"); setAxisFilter(axis); } } catch {} }, []); const recordAttempt = async (result) => { const priorAttempts = c._attempts || []; const saved = await persistChallengeAttempt(result.challenge, result); const attempt = saved || { challenge_ref: result.challenge.id, score_percent: Math.round(result.score || 0), xp_earned: result.score >= 70 ? Math.round(Number(result.challenge.xp || 0) * (result.score / 100)) : 0, completed_at: new Date().toISOString(), mode: result.mode, axis: result.challenge.axis, }; const dl = window.cockpitDataLoader; if (dl && dl.applyAttemptsToChallenges) { c._attempts = [attempt, ...priorAttempts]; dl.applyAttemptsToChallenges(c, c._attempts); setRevision(r => r + 1); } // Bump du radar sur 1er succès ≥70% (best-effort, non-bloquant) bumpSkillRadar(result.challenge, result.score, priorAttempts).then(bump => { if (bump) setRevision(r => r + 1); }); setCompleted(result); }; const list = mode === "theory" ? c.theory : c.practice; const filtered = useMemoChal(() => { let l = list; if (axisFilter) l = l.filter(x => x.axis === axisFilter); if (filter === "all") return l; if (filter === "recommended") return l.filter(x => x.status === "recommended" || x.status === "open"); return l.filter(x => x.status === filter); }, [list, filter, axisFilter]); const recommended = list.filter(x => x.status === "recommended"); const openCount = list.filter(x => x.status === "open" || x.status === "recommended").length; const doneCount = list.filter(x => x.status === "done").length; // Weakest axis derived from the current radar state. Counts the open // challenges on that axis across both modes so the stats card doesn't // lie when there's no actual challenge targeting the gap. const weakestAxis = (() => { const axes = window.APPRENTISSAGE_DATA?.radar?.axes || []; if (!axes.length) return null; return [...axes].sort((a, b) => a.score - b.score)[0]; })(); const weakestOpenCount = weakestAxis ? [...(c.theory || []), ...(c.practice || [])].filter( ch => ch.axis === weakestAxis.id && ch.status !== "done" ).length : 0; // ─── Flow states ─────────────────── if (active && mode === "theory") { return setActive(null)} onComplete={(r) => { setActive(null); recordAttempt(r); }} />; } if (active && mode === "practice") { return setActive(null)} onComplete={(r) => { setActive(null); recordAttempt(r); }} />; } if (completed) { return setCompleted(null)} onRetry={() => { setActive(completed.challenge); setCompleted(null); }} onNavigate={onNavigate} />; } // ─── HUB ─────────────────────────── return (
{/* Hero */}
Apprentissage · Challenges · Salle d'examen

Ce que tu sais vraiment,
Jarvis va te le demander.

Pas de case à cocher, pas de tâche à confirmer. Tu te lances, tu réponds, Jarvis juge. Deux modes : théorie pour tester tes connaissances, pratique pour construire quelque chose et le faire évaluer.

{/* Stats bar */}
{c.stats.total_taken}
Challenges passés
{c.stats.avg_score}%
Score moyen
{c.stats.total_xp}
XP accumulés
{c.streak.current}j
Streak · record {c.streak.best}j
Axe à travailler
{weakestAxis ? ( <>
{weakestAxis.label}
{weakestAxis.score}/100 · {weakestOpenCount > 0 ? `${weakestOpenCount} challenge${weakestOpenCount > 1 ? "s" : ""} ciblé${weakestOpenCount > 1 ? "s" : ""}` : "aucun challenge ciblé"}
) : ( <>
—
Radar non initialisé
)}
{/* Mode switcher — big tabs */}
{/* Recommended banner */} {recommended.length > 0 && (
Recommandé cette semaine

Jarvis te suggère {recommended.length} challenge{recommended.length > 1 ? "s" : ""} pour bouger ton radar

{recommended.slice(0, 2).map(r => ( ))}
)} {/* Filters */}
Statut
{/* Cards list */}
{filtered.length === 0 && (
{list.length === 0 ? `Aucun challenge ${mode === "theory" ? "théorie" : "pratique"} généré pour cette semaine. Le pipeline hebdomadaire tourne chaque dimanche soir (22h UTC).` : axisFilter ? `Aucun challenge ${mode === "theory" ? "théorie" : "pratique"} sur cet axe. Change d'axe dans la sidebar du radar ou enlève le filtre.` : filter === "done" ? "Tu n'as encore réussi aucun challenge. Commence par un ouvert." : "Aucun challenge pour ce filtre — essaye un autre statut."}
)} {filtered.map(ch => ( setActive(ch)} /> ))}
); } // ───────────────────────────────────────────────────────── // Challenge Card // ───────────────────────────────────────────────────────── function ChallengeCard({ challenge: ch, mode, onStart }) { const diffClass = ch.difficulty === "Expert" ? "is-expert" : ch.difficulty === "Moyen" ? "is-med" : "is-easy"; const isDone = ch.status === "done"; const isReco = ch.status === "recommended"; return (
{ch.axis_label}
{isReco && Recommandé} {isDone && Réussi · {ch.score}%}

{ch.title}

{ch.teaser || ch.brief}

{ch.difficulty} · {ch.duration_min} min · +{ch.xp} XP
Impact radar {ch.impact_axis} {isDone ? ( ) : ( )}
); } // ───────────────────────────────────────────────────────── // Theory Quiz — flow de passage // ───────────────────────────────────────────────────────── function TheoryQuiz({ challenge: ch, onBack, onComplete }) { const questions = ch.questions || []; const [idx, setIdx] = useStateChal(0); const [answers, setAnswers] = useStateChal([]); // [{chosen, correct}] const [chosen, setChosen] = useStateChal(null); const [submitted, setSubmitted] = useStateChal(false); // Fallback si pas de questions dans les données if (questions.length === 0) { return (
Challenge

Ce challenge est en cours d'écriture

Jarvis prépare les questions. Reviens bientôt.

); } const total = questions.length; const q = questions[idx]; const handleSubmit = () => { if (chosen === null) return; setSubmitted(true); }; const handleNext = () => { const newAnswers = [...answers, { chosen, correct: chosen === q.correct }]; setAnswers(newAnswers); setChosen(null); setSubmitted(false); if (idx + 1 >= total) { const correctCount = newAnswers.filter(a => a.correct).length; const score = Math.round((correctCount / total) * 100); onComplete({ challenge: ch, score, correctCount, total, mode: "theory", answers: newAnswers }); } else { setIdx(idx + 1); } }; return (
{/* Top bar */}
{ch.axis_label} · {ch.title}
Question {idx + 1} / {total}
{/* Progress dots */}
{questions.map((_, i) => ( ))}
{/* Question */}
Question {idx + 1}

{q.q}

{q.options.map((opt, i) => { const isChosen = chosen === i; const isCorrect = submitted && i === q.correct; const isWrong = submitted && isChosen && i !== q.correct; return ( ); })}
{/* Feedback */} {submitted && (
{chosen === q.correct ? "Correct" : "Pas tout à fait"}

{q.explain}

)} {/* CTA */}
{!submitted ? ( ) : ( )}
); } // ───────────────────────────────────────────────────────── // Practice Exercise — flow // ───────────────────────────────────────────────────────── function PracticeExercise({ challenge: ch, onBack, onComplete }) { const [answer, setAnswer] = useStateChal(""); const [submitted, setSubmitted] = useStateChal(false); const [evaluating, setEvaluating] = useStateChal(false); const [evaluation, setEvaluation] = useStateChal(null); const handleSubmit = async () => { if (answer.trim().length < 20) return; setSubmitted(true); setEvaluating(true); const wordCount = answer.trim().split(/\s+/).length; try { const r = await callJarvisEvaluate(ch, answer); // r.scores = {clarte, specificite, rigueur, completude} const s = r.scores || {}; setEvaluation({ score: r.avg ?? 0, scores: { axis1: s.clarte ?? 0, axis2: s.specificite ?? 0, axis3: s.rigueur ?? 0, axis4: s.completude ?? 0, }, wordCount, feedback: r.feedback || "", strengths: r.strengths || [], improvements: r.improvements || [], source: "jarvis", }); } catch (err) { console.warn("[challenges] Jarvis eval failed, fallback heuristique", err); // Fallback heuristique si Jarvis injoignable (LM Studio off, tunnel down, etc.) const hasStructure = /\n\n|\n-|\n\d\./.test(answer); const baseScore = Math.min(80, 45 + Math.floor(wordCount / 5) + (hasStructure ? 10 : 0)); setEvaluation({ score: baseScore, scores: { axis1: baseScore, axis2: baseScore, axis3: baseScore, axis4: baseScore }, wordCount, feedback: "Jarvis est hors ligne — score heuristique basé sur longueur et structure. Relance start_jarvis.bat pour une vraie évaluation.", strengths: [], improvements: [], source: "heuristic", }); } finally { setEvaluating(false); } }; const handleDone = () => { onComplete({ challenge: ch, score: evaluation.score, mode: "practice", answer, evaluation }); }; return (
{ch.axis_label} · {ch.title}
Mode pratique · {ch.duration_min} min estimées
{/* Left : brief */} {/* Right : editor + submit */}
{!submitted ? ( <>

Ta réponse

{answer.trim().split(/\s+/).filter(Boolean).length} mots