// Article detail page — News Oh,Ye! const { useState: useStateA, useMemo: useMemoA, useEffect: useEffectA } = React; // Format an ISO-8601 timestamp as "Apr 24, 2026". Returns "" on bad input // so callers can safely conditionally render. function formatDate(iso) { if (!iso) return ''; const d = new Date(iso); if (isNaN(d.getTime())) return ''; return d.toLocaleDateString('en-US', { month:'short', day:'numeric', year:'numeric' }); } function ArticlePage({ articleId, onBack, onComplete, progress, setProgress }) { const baseArticle = ARTICLES.find(a => a.id === articleId) || ARTICLES[0]; // Resume at the tab the user was last on for this article (issue #2). // Whitelist against the known stage ids so a stale localStorage value // (from a future renamed/removed stage) can't strand the reader on a // tab whose detail won't render. const _validTabs = ['read', 'analyze', 'quiz', 'discuss']; const _savedAP = (progress && progress.articleProgress && progress.articleProgress[articleId]) || null; const _savedTab = _savedAP && _savedAP.lastTab; const _resumeTab = (_savedTab && _validTabs.includes(_savedTab)) ? _savedTab : 'read'; const [tab, setTab] = useStateA(_resumeTab); // tabsVisited covers what's been opened — used by the stepper UI to color // already-seen tabs. Hydrate from saved steps so the dots stay filled // when returning to an article mid-flow. const _initVisited = { read: true }; for (const s of (_savedAP && _savedAP.steps) || []) _initVisited[s] = true; if (_resumeTab) _initVisited[_resumeTab] = true; const [tabsVisited, setTabsVisited] = useStateA(_initVisited); const [detail, setDetail] = useStateA(null); const [detailError, setDetailError] = useStateA(null); // Lazy-fetch v1 detail payload for this article. Chinese cards (noDetail) are // routed away before reaching this page, so we only fetch English variants. useEffectA(() => { if (!baseArticle || baseArticle.noDetail) { setDetail(null); return; } let cancelled = false; setDetail(null); setDetailError(null); const payloadLevel = baseArticle.level === 'Sprout' ? 'easy' : 'middle'; // Archive mode (baseArticle.archiveDate set) fetches from Supabase dated // prefix; today's content stays local. const detailBase = baseArticle.archiveDate ? `${window.ARCHIVE_BASE}/${baseArticle.archiveDate}/article_payloads` : 'article_payloads'; const url = `${detailBase}/payload_${baseArticle.storyId}/${payloadLevel}.json`; fetch(url) .then(r => r.ok ? r.json() : Promise.reject(new Error(`HTTP ${r.status}`))) .then(d => { if (cancelled) return; // Map v1 field shapes to the prototype's expected shape. // v1 detail pattern: full body lives in `summary`; `background_read` is // supplementary context (for the Analyze tab), not the body. const bgRead = Array.isArray(d.background_read) ? d.background_read.join('\n\n') : (typeof d.background_read === 'string' ? d.background_read : ''); const mapped = { body: d.summary || '', // FULL regenerated article body summary: d.summary || baseArticle.summary, backgroundRead: bgRead, // shown on Analyze tab whyItMatters: d.why_it_matters || '', keywords: (d.keywords || []).map(k => ({ term: k.term, def: k.explanation })), quiz: (d.questions || []).map(q => { const idx = q.options.findIndex(opt => opt === q.correct_answer); return { q: q.question, options: q.options, a: Math.max(0, idx) }; }), discussion: (d.perspectives || []).map(p => `${p.perspective}: ${p.description}`), articleStructure: Array.isArray(d.Article_Structure) ? d.Article_Structure : [], }; setDetail(mapped); }) .catch(e => { if (!cancelled) { console.warn('[article] detail fetch failed', url, e); setDetailError(e); } }); return () => { cancelled = true; }; }, [articleId]); // Merged article object: prefer detail fields when loaded, fall back to the // listing-level stub so the title block + header render even before detail // arrives. const article = useMemoA(() => { const d = detail || {}; return { ...baseArticle, summary: d.summary || baseArticle.summary, body: d.body || '', backgroundRead: d.backgroundRead || '', whyItMatters: d.whyItMatters || '', keywords: d.keywords || [], quiz: d.quiz || [], discussion: d.discussion || [], articleStructure: d.articleStructure || [], }; }, [articleId, detail]); // Per-step progress: each step contributes its weight (from // SITE_CONFIG.stepWeights) to the daily counter. Idempotent — // finishing the same step twice doesn't double-count. Daily goal: // storiesPerDay × sum(stepWeights) = SITE_CONFIG.dailyGoalMinutes // (kidsnews defaults: 3 × (2+1+2+2) = 21) const STEP_IDS = ['read', 'analyze', 'quiz', 'discuss']; const STEP_WEIGHTS = (window.SITE_CONFIG && window.SITE_CONFIG.stepWeights) || { read:1, analyze:1, quiz:1, discuss:1 }; const bumpStep = (stageId) => { setProgress(p => { const ap = p.articleProgress || {}; // Defensive: legacy localStorage entries are bare numbers // (0/25/.../100). Spreading a primitive silently drops fields, so // treat anything non-object as a fresh slate. const raw = ap[article.id]; const cur = (raw && typeof raw === 'object') ? raw : { steps: [], lastTab: 'read' }; const curSteps = cur.steps || []; if (curSteps.includes(stageId)) return p; // already counted const newSteps = [...curSteps, stageId]; const fullyDone = STEP_IDS.every(s => newSteps.includes(s)); const newAP = { ...cur, steps: newSteps }; const weight = STEP_WEIGHTS[stageId] || 1; const next = { ...p }; if (fullyDone && !p.readToday.includes(article.id)) { next.readToday = [...p.readToday, article.id]; } next.articleProgress = { ...ap, [article.id]: newAP }; next.minutesToday = (p.minutesToday || 0) + weight; return next; }); }; const [expandedKw, setExpandedKw] = useStateA(null); const [quizIdx, setQuizIdx] = useStateA(0); const [quizAns, setQuizAns] = useStateA([]); const [quizShow, setQuizShow] = useStateA(false); const [confetti, setConfetti] = useStateA(false); const stages = [ { id:'read', label:'Read & Words', emoji:'📖' }, { id:'analyze', label:'Background', emoji:'🔍' }, { id:'quiz', label:'Quiz', emoji:'🎯' }, { id:'discuss', label:'Think', emoji:'💭' }, ]; const catColor = getCatColor(article.category); // Build paragraphs for the Read tab from detail.body (preferred) or a // sentence-grouped fallback over the summary while detail is loading. const paragraphs = useMemoA(() => { const text = article.body || article.summary || ''; if (article.body) { // Detail body has explicit paragraph breaks ("\n\n") we can honor. const paras = text.split(/\n\n+/).map(s => s.trim()).filter(Boolean); if (paras.length > 0) return paras; } // Fallback: group sentences into 3-sentence paragraphs (prototype behavior). const sentences = text.split(/(?<=\.)\s+/); const groups = []; for (let i=0; i { setTab(id); setTabsVisited(v => ({...v, [id]: true})); // Persist last-visited tab so re-opening the article resumes here. setProgress(p => { const ap = p.articleProgress || {}; const raw = ap[article.id]; const cur = (raw && typeof raw === 'object') ? raw : { steps: [], lastTab: 'read' }; if (cur.lastTab === id) return p; return { ...p, articleProgress: { ...ap, [article.id]: { ...cur, lastTab: id } } }; }); }; // Block tabs until detail is loaded. Header/title block still render so the // user gets feedback while the payload arrives. const detailReady = !!detail; return (
{/* ——— Top bar ——— */}
{window.SITE_CONFIG?.brand || '21 minutes every day'}
{stages.map((s, i) => { const curAP = (progress.articleProgress || {})[article.id] || null; const doneSteps = (curAP && curAP.steps) || []; const stepDone = doneSteps.includes(s.id); return ( {i < stages.length-1 &&
} ); })}
{/* ——— Title block ——— */}

{article.title}

📰 {article.source}· ⏱ {article.readMins} min read {article.minedAt && (<> · 🗞 Mined {formatDate(article.minedAt)} )}
📷 {article.source}
{/* ——— TABS CONTENT ——— */} {!detailReady && !detailError && (
📡
Loading the full story…
Fetching keywords, quiz, and background.
)} {detailError && (
⚠️
Couldn't load this story.
Try again in a moment.
)} {detailReady && tab === 'read' && ( { bumpStep('read'); switchTab('analyze'); }} /> )} {detailReady && tab === 'analyze' && ( { bumpStep('analyze'); switchTab('quiz'); }} /> )} {detailReady && tab === 'quiz' && ( { bumpStep('quiz'); setConfetti(true); setTimeout(()=>setConfetti(false), 1800); switchTab('discuss'); }} /> )} {detailReady && tab === 'discuss' && ( { bumpStep('discuss'); onComplete(); }} /> )}
{confetti && }
); } // ——— Highlight keywords in a text string ——— // Matches base terms AND common English inflections (ban → banned, fine → fined). // The base term is captured as group 1 so we can look up the definition even // when the matched text is an inflected form like "banned". function highlightText(text, keywords, catColor) { if (!keywords || !keywords.length) return [text]; const termMap = {}; keywords.forEach(k => { termMap[k.term.toLowerCase()] = k; }); // Sort longer-first so multi-word terms ("prediction market") win over // single-word subsets ("prediction"). const terms = keywords.map(k => k.term).sort((a, b) => b.length - a.length); const SUFFIX = '(?:s|es|ed|d|ing|ning|ned|ting|ted|er|ers)?'; const alt = terms.map(t => t.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')).join('|'); const pattern = new RegExp(`\\b(${alt})${SUFFIX}\\b`, 'gi'); const result = []; let last = 0, m, idx = 0; while ((m = pattern.exec(text)) !== null) { if (m.index > last) result.push(text.substring(last, m.index)); const base = (m[1] || '').toLowerCase(); // captured base term const kw = termMap[base]; result.push(); last = m.index + m[0].length; } if (last < text.length) result.push(text.substring(last)); return result; } function KwTip({ text, def, color }) { const [show, setShow] = useStateA(false); return ( setShow(true)} onMouseLeave={()=>setShow(false)}> {text} {show && ( {text}: {def} )} ); } // ——————— PRINTABLE PDF DOWNLOAD ——————— // PDFs are pre-generated by the daily pipeline (pipeline/pdf_export.py) // and shipped in the daily zip + per-day flat upload to Supabase. The // button is just an pointing to the right path. No // client-side rendering needed — fast, no extra dependencies, archived // alongside the rest of the daily content. function pdfUrlForArticle(article) { const lvl = article.level === 'Tree' ? 'middle' : 'easy'; const filename = `${article.storyId}-${lvl}.pdf`; // Today's PDF lives in the deploy bundle (same origin); past days come // from the dated Supabase prefix. if (article.archiveDate) { return `${window.ARCHIVE_BASE}/${article.archiveDate}/article_pdfs/${filename}`; } return `article_pdfs/${filename}`; } // ——————— READ & WORDS TAB (combined) ——————— function ReadAndWordsTab({ article, paragraphs, expanded, setExpanded, onFinish }) { const catColor = getCatColor(article.category); const [gameOpen, setGameOpen] = useStateA(false); return (
📖

The Story

📥 Download PDF
Hover the colored words!
{paragraphs.map((p, i) => (

{i === 0 && {p[0]}} {highlightText(i === 0 ? p.substring(1) : p, article.keywords, catColor)}

))}
✓ I read it! Next: Background →
{gameOpen && setGameOpen(false)}/>}
); } function WordMatchGame({ keywords, catColor, onClose }) { // Shuffle definitions once per open so user matches term → meaning. const shuffledDefs = useMemoA(() => { const defs = keywords.map((k, i) => ({ def: k.def, idx: i })); for (let i = defs.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [defs[i], defs[j]] = [defs[j], defs[i]]; } return defs; }, [keywords]); const [picks, setPicks] = useStateA(Array(keywords.length).fill('')); const [checked, setChecked] = useStateA(false); const correct = picks.filter((p, i) => String(p) === String(i)).length; const total = keywords.length; const stars = Math.round((correct / Math.max(total,1)) * 5); return (
e.stopPropagation()} style={{ background:'#fff', borderRadius:22, padding:'26px 28px', maxWidth:560, width:'100%', maxHeight:'90vh', overflowY:'auto', boxShadow:'0 20px 60px rgba(27,18,48,0.3)', }}>
🎮

Match the meanings

Pick the right meaning for each word.

{keywords.map((kw, i) => { const isRight = checked && String(picks[i]) === String(i); const isWrong = checked && picks[i] !== '' && String(picks[i]) !== String(i); return (
{kw.term}
); })}
{checked ? (
{'⭐'.repeat(stars)}{'☆'.repeat(5 - stars)}
{correct} / {total} correct {correct === total ? '🎉' : ''}
) : (
)}
); } // Pronounce text using the browser's built-in Web Speech API. Cancels any // in-flight utterance so rapid taps don't queue up. en-US voice, slowed // slightly for kid clarity. No-op if the browser doesn't support it // (safe gracefully — speak() called on a missing API just returns). function speakWord(text) { if (!('speechSynthesis' in window)) return; try { window.speechSynthesis.cancel(); const u = new SpeechSynthesisUtterance(String(text || '')); u.lang = 'en-US'; u.rate = 0.9; u.pitch = 1.0; window.speechSynthesis.speak(u); } catch (e) { // Some embeds (iframes, restricted contexts) throw — ignore } } function KeywordCard({ kw, idx, expanded, onToggle }) { const palette = [ {bg:'#ffece8', c:'#ff6b5b'}, {bg:'#e0f6f3', c:'#17b3a6'}, {bg:'#eee5ff', c:'#9061f9'}, {bg:'#fff4c2', c:'#c9931f'}, {bg:'#ffe4ef', c:'#ff6ba0'}, ][idx % 5]; const onSpeak = (e) => { e.stopPropagation(); speakWord(kw.term); }; return (
{/* Outer = div role=button to avoid invalid
{expanded &&
{kw.def}
} {!expanded &&
Tap to reveal →
}
); } // ——————— ANALYZE TAB (Background + Structure, with article reference) ——————— function AnalyzeTab({ article, paragraphs, onNext }) { const [articleOpen, setArticleOpen] = useStateA(false); const catColor = getCatColor(article.category); const isTree = article.level === 'Tree'; // Background paragraphs: prefer payload's background_read (deeper at middle, // simpler at easy). Fall back to a generic intro sentence only if missing. const bgParagraphs = (article.backgroundRead || '').trim() ? article.backgroundRead.split(/\n\n+/).map(s => s.trim()).filter(Boolean) : [`This story comes from ${article.source}, a ${article.category === 'Science' ? 'science source' : 'news source'} that covers stories for kids. When you read, think about WHO is doing something, WHAT is happening, WHERE it takes place, and WHY it matters.`]; // Easy level: parse WHO/WHAT/WHERE/WHY into a 5W grid. // Tree level: render Article_Structure as a nested mind-tree preserving // leading-whitespace + └─/├─ indentation from the payload. let structureBlock = null; if (isTree) { structureBlock = (
{(article.articleStructure || []).map((line, i) => { const raw = typeof line === 'string' ? line : String(line); const m = raw.match(/^(\s*)(.*)$/); const indent = m ? m[1].length : 0; const text = m ? m[2] : raw; // Split "LABEL: rest" so label can be bolded const lm = text.match(/^([A-Z][A-Z \/]*[A-Z]|[A-Z][a-z]+):\s*(.*)$/); return (
{lm ? ( {lm[1]} : {highlightText(lm[2], article.keywords, catColor)} ) : ( {highlightText(text, article.keywords, catColor)} )}
); })}
); } else { const structure = {}; for (const line of (article.articleStructure || [])) { const m = typeof line === 'string' ? line.match(/^\s*([A-Za-z]+)\s*:\s*(.*)$/) : null; if (m) structure[m[1].toUpperCase()] = m[2].trim(); } const who = structure.WHO || (article.title.split(' ').slice(0, 3).join(' ') + '…'); const what = structure.WHAT || ((article.summary || '').split('.')[0] + '.'); const where = structure.WHERE || (article.category === 'Science' ? 'In labs, field studies, or around the world' : 'Mentioned in the story'); const why = structure.WHY || `It matters because it affects ${article.category === 'Science' ? 'how we understand the world' : 'people, animals, or the planet'}.`; structureBlock = (
); } return (
{/* Left: Background */}
🧭

Background you need

{bgParagraphs.map((p, i) => (

{highlightText(p, article.keywords, catColor)}

))}
{/* Right: Structure (5W for easy, mind-tree for middle) */}
🔍

Break it down

{structureBlock}
{/* Full-width: Article reference collapsible */}
{articleOpen && (
{paragraphs.map((p, i) => (

{highlightText(p, article.keywords, catColor)}

))}
)}
Ready for the quiz →
); } function WRow({ label, emoji, value }) { return (
{emoji}
{label}
{value}
); } // ——————— QUIZ TAB (split view with article reference) ——————— function QuizTab({ article, paragraphs, quizIdx, setQuizIdx, quizAns, setQuizAns, quizShow, setQuizShow, onFinish }) { const q = article.quiz[quizIdx]; const done = quizAns.length === article.quiz.length && quizAns.every(a => a !== undefined); const correct = quizAns.filter((a,i) => a === article.quiz[i].a).length; const catColor = getCatColor(article.category); if (done) { return (
🎉

{correct === article.quiz.length ? 'Perfect!' : correct >= article.quiz.length/2 ? 'Nice work!' : 'Good try!'}

You got {correct} out of {article.quiz.length} right.

⭐ +{article.xp} XP earned!
{ setQuizAns([]); setQuizIdx(0); setQuizShow(false);}} style={{boxShadow:'0 4px 0 rgba(0,0,0,0.08)', border:'2px solid #f0e8d8'}}>🔁 Try again Next: Think time →
); } return (
{/* Left: article reference (scrollable, sticky) */}
📖
Look back at the story
{paragraphs.map((p, i) => (

{highlightText(p, article.keywords, catColor)}

))}
{/* Right: quiz */}
🎯

Quick quiz

Q {quizIdx+1}/{article.quiz.length}

{q.q}

{q.options.map((opt, i) => { const picked = quizShow && quizAns[quizIdx] === i; const isRight = quizShow && i === q.a; const isWrong = quizShow && picked && i !== q.a; return ( ); })}
{quizShow && (
{ setQuizShow(false); setQuizIdx(quizIdx+1); }}> {quizIdx+1 < article.quiz.length ? 'Next question →' : 'See results →'}
)}
); } // ——————— DISCUSS TAB ——————— const MIN_WORDS = 20; function countWords(s) { return (s || '').trim().split(/\s+/).filter(Boolean).length; } // Render rewrite text with **kid-contributed** bold spans highlighted. function RewriteText({ text }) { if (!text) return null; const parts = text.split(/(\*\*[^*]+\*\*)/g); return ( <>{parts.map((p, i) => { const m = p.match(/^\*\*([^*]+)\*\*$/); if (m) return {m[1]}; return {p}; })} ); } function ScorePills({ scores, color = '#9061f9' }) { if (!scores) return null; return (
{['clarity','evidence','voice','depth'].map(k => ( {k}: {scores[k] ?? '–'}/5 ))}
); } // Side-by-side comparison: kid's draft (Round N) vs coach's polish. // Used both for the "current round" panel and for collapsed history rows. function RoundCompare({ round, n, total, defaultOpen = true }) { const [open, setOpen] = useStateA(defaultOpen); return (
{open && ( <>
What you wrote

{round.userText}

{countWords(round.userText)} words
Coach's polish

💬 {round.aiResult?.feedback}

)}
); } function DiscussTab({ article, paragraphs, onDone }) { // Restore iteration history for THIS article — survives reloads. // Shape: { rounds: [{userText, aiResult, at}], currentDraft, savedFinal } const draftKey = `ohye_response_${article.storyId}_${article.level || 'unk'}`; const ss = window.safeStorage; const initial = (ss && ss.getJSON(draftKey)) || {}; const [rounds, setRounds] = useStateA(initial.rounds || []); const [currentDraft, setCurrentDraft] = useStateA(initial.currentDraft || ''); const [aiState, setAiState] = useStateA('idle'); // 'idle' | 'loading' | 'error' const [aiError, setAiError] = useStateA(null); const [savedFinal, setSavedFinal] = useStateA(!!initial.savedFinal); const [articleOpen, setArticleOpen] = useStateA(false); const catColor = getCatColor(article.category); // Persist on every change so a reload preserves all rounds + current draft. useEffectA(() => { if (!ss) return; ss.setJSON(draftKey, { rounds, currentDraft, savedFinal }); }, [rounds, currentDraft, savedFinal]); const wordCount = countWords(currentDraft); const meetsMin = wordCount >= MIN_WORDS; const lastRound = rounds.length > 0 ? rounds[rounds.length - 1] : null; // Don't let user pay for an AI call on the IDENTICAL text they just submitted const sameAsLast = lastRound && currentDraft.trim() === lastRound.userText.trim(); const onGetFeedback = async () => { if (!meetsMin || aiState === 'loading' || sameAsLast) return; setAiState('loading'); setAiError(null); const res = await window.fetchAIFeedback({ text: currentDraft, articleId: article.id, articleTitle: article.title, articleSummary: (article.summary || '').slice(0, 1500), // Send the full article body so the coach knows what the kid is // responding TO and can check evidence-from-text. Edge Function // caps at 6KB on its side as a safety guard. articleBody: (article.body || '').slice(0, 6000), level: article.level, }); if (res.error) { setAiError(res.error); setAiState('error'); } else { setRounds([...rounds, { userText: currentDraft, aiResult: res, at: new Date().toISOString() }]); setAiState('idle'); // Keep currentDraft populated so the kid sees the side-by-side // immediately. They can then edit it, or click "Use polished". } }; const onUsePolished = () => { if (lastRound?.aiResult?.rewrite) { setCurrentDraft(lastRound.aiResult.rewrite.replace(/\*\*/g, '')); } }; const onSaveFinal = () => setSavedFinal(true); const onUnlock = () => setSavedFinal(false); const onResetAll = () => { if (confirm('Start over? Your saved drafts and coach feedback will be cleared.')) { setRounds([]); setCurrentDraft(''); setSavedFinal(false); } }; // Action-button label depends on iteration state const isFirstRound = rounds.length === 0; const feedbackBtnLabel = aiState === 'loading' ? '✨ Thinking…' : isFirstRound ? '✨ Get AI feedback' : `✨ Get feedback again (round ${rounds.length + 1})`; return (
💭

Think & share

{rounds.length > 0 && ( {rounds.length} {rounds.length === 1 ? 'round' : 'rounds'} with the coach )}
{article.discussion.map((d, i) => (
{d}
))} {/* Round history — older rounds collapsed by default */} {rounds.length > 1 && rounds.slice(0, -1).map((r, i) => ( ))} {/* Latest round — always expanded */} {lastRound && ( )} {/* Current draft — for NEXT round */} {!savedFinal && ( <>