{view === "home" && (
!ready
// Home's real numbers (streak, what's due, whether today is
// done) aren't in yet -- showing Home itself here would mean
// showing fabricated defaults ("Start here", an empty week)
// as if they were real, for the brief moment before the
// actual data lands and replaces them. This keeps the same
// shape (so nothing jumps once the real Home takes over) but
// says plainly that it is still loading, rather than showing
// guessed content.
?
: !data.onboarded
? { update((n) => { n.onboarded = true; }); setView("drill"); }}
onSkip={() => update((n) => { n.onboarded = true; })}
/>
:
)}
{view === "drill" && }
{view === "sentences" && }
{view === "roleplay" && }
{view === "memory" && { if (p) setLessonOf(p); setView(v); }} />}
{view === "settings" && setView("home")} user={user} onLogout={onLogout} />}
{view === "library" && setView("home")} />}
{view === "weekly" && setView("home")} />}
{view === "lesson" && setView(lessonOf ? "memory" : "weekly")} />}
{view === "catchup" && setView("weekly")} />}
{view === "deck" && setView("home")} />}
);
}
// Placeholder shown in Home's spot for the brief moment before the
// account's real data has loaded. Same overall shape as the real Home
// (week strip + hero card) so nothing shifts around once it is replaced,
// but it never shows a made-up streak, due count or "Start here" -- those
// would look like real answers for a beat, which is exactly the flash of
// wrong information this replaces.
function HomeSkeleton() {
return (
Loading…
Fetching your progress.
);
}
function Home({ data, vocab, go, weakest, weakCount, update, ready }) {
const [peek, setPeek] = useState(null);
const [help, setHelp] = useState(false);
const now = Date.now();
// Targets for the once-only coach-mark tour below -- a plain DOM ref per
// element it points at, looked up by the same key the tour steps use.
const exercisesRef = useRef(null);
const cardsTabRef = useRef(null);
const catchupTabRef = useRef(null);
const progressTabRef = useRef(null);
const addTabRef = useRef(null);
// useMemo here (not a plain object literal) so this has the same identity
// across Home's own re-renders -- otherwise Tour's effect below would see
// a "new" targets object on every Home re-render and needlessly re-measure
// and re-scroll, even mid-step.
const tourTargets = useMemo(
() => ({ exercises: exercisesRef, cards: cardsTabRef, catchup: catchupTabRef, progress: progressTabRef, add: addTabRef }),
[]
);
const due = useMemo(() => {
let n = 0;
for (const key in data.mem) if (dueIn(data.mem[key], data.want, now) <= 0) n++;
return n;
}, [data.mem, data.want]);
const fresh = Object.keys(data.mem).length === 0;
const log = (data.log && data.log[today()]) || {};
const didDrill = (log.drill || 0) >= 5;
const didSentences = (log.sentences || 0) >= 3;
const didRoleplay = (() => {
const l = data.log || {};
for (let i = 0; i < 7; i++) {
const d = new Date(); d.setDate(d.getDate() - i);
if ((l[localDay(d)] || {}).roleplay) return true; // once in seven days is enough
}
return false;
})();
const headline = fresh ? "Start here" : didDrill ? "Today is done" : due ? `${due} cards` : "Nothing due";
const sayso = fresh
? "Ten cards, about four minutes. Then again tomorrow: the spacing is where the effect comes from."
: didDrill ? "The drill is in. Anything below is optional, and tomorrow beats more today."
: due ? "About four minutes, then you are finished for today."
: "Nothing has come due yet. Try a set of sentences, or come back tomorrow.";
/* The top slot is not reserved for the drill: once that is in, whatever
is next moves up. Every exercise gets to be the main one. */
const step = !didDrill && (due || fresh)
? { n: 1, name: "Drill", when: "every day", go: "drill", label: "Start",
head: fresh ? "Start here" : `${due} due`,
note: fresh ? "Ten cards, about four minutes. Then again tomorrow."
: `${due} of your cards are ready for review. A round takes ten of them, about four minutes.` }
: !didSentences
? { n: 2, name: "Sentence forge", when: "every other day", go: "sentences", label: "Build sentences",
head: "Your turn to build", note: weakest ? `Eight sentences, weighted towards ${weakest}.` : "Eight sentences from the words you already have." }
: !didRoleplay
? { n: 3, name: "Roleplay", when: "weekly", go: "roleplay", label: "Start a scene",
head: "Try it for real", note: "One conversation in Indonesian. Mistakes come at the end, not during." }
: { n: 1, name: "Drill", when: "every day", go: "drill", label: "One more round",
head: "All done", note: "Everything for today is in. Coming back tomorrow beats doing more now." };
return (
Daily. One round, then stop. If it says nothing is due, believe it and close the app.
Two or three times a week. Sentence forge after the drill. That is where single words turn into sentences.
Once a week. Roleplay, best the evening before your lesson, so the mistakes are fresh.
Whenever you have new words. Add them under Add words, or load a fresh Anki export there.
Doing five rounds today does not replace five days. New words only settle once you have recalled them right on three
separate days, so spreading it out is the whole point.
)}
);
}
// The five stops of the once-only home tour, in order. Each `key` must match
// a key in the `targets` object Home passes to .
const TOUR_STEPS = [
{ key: "exercises", text: "Three exercises live here: Drill for fast recall, Sentence forge to build full sentences, and Roleplay for a real conversation. Whichever is due comes up top, the other two wait just below." },
{ key: "cards", text: "Cards: every word and sentence you have learned so far, browsable any time." },
{ key: "catchup", text: "Catch up: the words giving you the most trouble, grouped for a quick, focused review." },
{ key: "progress", text: "Progress: your stats and streaks over time." },
{ key: "add", text: "Add: type in a new word or phrase whenever you want to learn one." },
];
// A short, once-per-account coach-mark walkthrough: one real UI element
// highlighted at a time (a "spotlight" cut into a dimmed backdrop, done
// with the classic giant-box-shadow trick, no measuring library needed),
// with a small caption underneath. Shown the very first time Home appears
// with a "toured" flag not yet set -- see the "toured" flag next to
// "onboarded" above -- whether the learner just finished their first
// session or skipped straight here, and never again after that.
function Tour({ steps, targets, onDone }) {
const [i, setI] = useState(0);
const [box, setBox] = useState(null);
// useLayoutEffect, not useEffect: it runs before the browser paints, so
// the very first frame Home is shown in already has the dimmed backdrop
// and the spotlight in place -- no beat where the plain, undimmed Home
// flashes before the tour "pops in" on top of it. Scrolling is only ever
// triggered (and only re-measured afterwards) when the target genuinely
// is not fully on screen yet, which in practice is rare on this short a
// page, so most steps never need it at all.
useLayoutEffect(() => {
const ref = targets[steps[i].key];
const el = ref && ref.current;
if (!el) { setI((n) => n + 1); return; } // that step's element is not on screen right now, skip it rather than getting stuck
const measure = () => {
const r = el.getBoundingClientRect();
setBox({ top: r.top - 8, left: r.left - 8, width: r.width + 16, height: r.height + 16 });
};
measure();
const r = el.getBoundingClientRect();
const fullyVisible = r.top >= 0 && r.bottom <= window.innerHeight;
window.addEventListener("resize", measure);
if (fullyVisible) return () => window.removeEventListener("resize", measure);
el.scrollIntoView({ block: "center", behavior: "smooth" });
const t = setTimeout(measure, 280); // one correction, after the smooth scroll has settled
return () => { clearTimeout(t); window.removeEventListener("resize", measure); };
}, [i, steps, targets]);
if (!box) return null;
const last = i === steps.length - 1;
const roomBelow = window.innerHeight - (box.top + box.height) > 170;
const cardStyle = roomBelow ? { top: box.top + box.height + 14 } : { top: Math.max(14, box.top - 158) };
return (
{steps[i].text}
{steps.map((_, d) => )}
);
}
/* One set, one 24 grid, stroke 2, round caps, curves rather than straight
edges so the icons share the hand of the illustrations and the roundness
of the type. */
const UI_ICONS = {
cards: ["M4 8q0-2 2-2h9q2 0 2 2v9q0 2-2 2H6q-2 0-2-2Z", "M8 5q1-1 2-1h8q2 0 2 2v9"],
target: ["M12 3q9 0 9 9t-9 9q-9 0-9-9", "M12 8q4 0 4 4t-4 4q-4 0-4-4", "M12 12 21 4"],
chart: ["M4 20q0-5 0-7", "M10 20q0-10 0-14", "M16 20q0-7 0-9", "M3 20q9 1 18 0"],
plus: ["M12 5q0 7 0 14", "M5 12q7 0 14 0"],
lines: ["M4 6q8-1 16 0", "M4 12q6-1 12 0", "M4 18q9-1 14 0"],
speech: ["M5 17q-1-6 3-9 5-4 10 0 3 3 1 8-6 2-14 1Z", "M9 20q3 1 6 0"],
back: ["M14 6q-4 3-6 6 2 3 6 6"],
right: ["M10 6q4 3 6 6-2 3-6 6"],
check: ["M5 12q3 1 5 5 3-8 9-11"],
gear: ["M12 9q3 0 3 3t-3 3q-3 0-3-3t3-3", "M12 3q1 0 1 2 2 .5 3 2 2-1 2.5 0t-1 2.5q.5 1.5 0 3 1.5.5 1 2.5t-2.5 0q-1 1.5-3 2 0 2-1 2t-1-2q-2-.5-3-2-2 1-2.5 0t1-2.5q-.5-1.5 0-3-1.5-.5-1-2.5t2.5 0q1-1.5 3-2 0-2 1-2"],
};
const Icon = ({ name, size = 24, style }) => (
);
const ICONS = {
bowl: (
),
scooter: (
),
fruit: (
),
house: (
),
plant: (
),
};
const TONE_BG = { bowl: "var(--canvas)", scooter: "var(--canvas)", fruit: "var(--canvas)", house: "var(--canvas)", plant: "var(--canvas)" };
const Tile = ({ ic, n, d, on, badge, quiet }) => (
);
const PRAISE = ["Bagus.", "Straight through.", "That one is sticking.", "Clean.", "Mantap."];
// a hand-drawn rule under every screen title, same line quality as the motifs
const Rule = () => (
);
// Shown once, the very first time a brand-new account opens the app (see
// the "onboarded" flag on the progress blob, set true the moment either
// button below is pressed, and set true at signup already for the admin
// account migrating in real history -- see api/auth/signup.js).
function Onboarding({ vocab, onStart, onSkip }) {
const sample = (vocab || []).slice(0, 4);
return (
Welcome!
We've loaded a small set of starter cards for you, real beginner phrases to get you talking right away.
{sample.length > 0 && (
A few of your starter cards
{sample.map((c, i) => (
{c.id}{c.en}
))}
)}
How this works, in short
You'll mostly be asked to produce Indonesian, not just recognise it, that's what actually sticks.
Cards you get wrong come back sooner, cards you know well come back later.
Everything saves automatically to your account, on every device.
);
}
const Back = ({ to = "Home", on }) => (
);
const Chevron = () => ;
/* The picture language: fourteen motifs from Indonesia, drawn with loose
curves rather than straight edges, so it feels handmade rather than
generated. Same palette everywhere, one light source, layered depth. */
const sun = (x, y, r) => ;
const birds = (x, y) => (
);
const MOTIFS = [
{sun(272, 30, 16)}
{birds(210, 26)}
,
{sun(58, 28, 14)}
{birds(96, 30)}
,
{sun(172, 24, 13)}
,
,
,
{sun(48, 28, 15)}
{[108, 148, 188, 228, 268].map((x, i) => (
))}
,
{sun(252, 32, 16)}
{birds(104, 28)}
,
{sun(280, 26, 14)}
{birds(60, 32)}
,
,
{sun(62, 30, 15)}
,
{sun(268, 30, 15)}
{birds(150, 30)}
,
,
{sun(50, 26, 13)}
,
{sun(272, 34, 17)}
{birds(76, 30)}
,
];
const Scene = () => {
const d = new Date();
const i = Math.floor((d - new Date(d.getFullYear(), 0, 0)) / 864e5) % MOTIFS.length;
return (
);
};
const WEEK = ["M", "T", "W", "T", "F", "S", "S"];
const Week = ({ days, justDone, small }) => {
const set = new Set(days || []);
const now = new Date();
const dow = (now.getDay() + 6) % 7; // Monday = 0
const monday = new Date(now); monday.setDate(now.getDate() - dow);
return (
{WEEK.map((l, i) => {
const d = new Date(monday); d.setDate(monday.getDate() + i);
const k = localDay(d);
const isToday = i === dow;
const done = set.has(k) || (isToday && justDone);
const s = isToday ? (done ? "todaydone" : "today") : done ? "done" : "";
return (
{done && }
{l}
);
})}
);
};
const Pips = ({ results, total, at }) => (
{Array.from({ length: total }).map((_, i) => (
))}
{Math.min(at + 1, total)} of {total}{results.filter((r) => r.ok).length} right
);
function Drill({ data, vocab, commit, saveHook, saveAlt, saveConfusion, weakWords, preset, back }) {
const [queue, setQueue] = useState(() => (preset && preset.length ? preset : buildSession(vocab, data.mem, data.want, Date.now(), ROUND, weakWords || [], data.recog ?? 0.15, data.conf || {}, data.words || {}, data.nudge || {})));
const [fixed, setFixed] = useState(false);
const [results, setResults] = useState([]);
const [val, setVal] = useState("");
const [res, setRes] = useState(null);
const [hook, setHook] = useState(null);
const [hookBusy, setHookBusy] = useState(false);
const [checking, setChecking] = useState(false);
const [slow, setSlow] = useState(false);
const shownAt = useRef(0);
const [at, setAt] = useState(0);
const ref = useRef(null);
const t0 = useRef(Date.now());
// Deliberately no autofocus here: re-focusing the input on every new card
// reopens the iOS keyboard (and its accessory bar) each time, which reads
// as a distracting flicker. Tapping in, like Sentence forge, is one extra
// tap per card but keeps the keyboard calm between cards.
useEffect(() => { t0.current = Date.now(); }, [at, res]);
const next = () => { setRes(null); setVal(""); setHook(null); setFixed(false); setAt((n) => n + 1); };
// Enter moves on, but only once the verdict has actually been on screen.
// A held key or a double tap can no longer skip it.
useEffect(() => {
if (!res) return;
const onKey = (e) => {
if (e.key !== "Enter" || e.repeat) return;
if (Date.now() - shownAt.current < 600) { e.preventDefault(); return; }
e.preventDefault();
next();
};
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [res]);
if (!queue.length)
return (
Your whole deck is in memory and nothing is due. Run the sentence forge instead, or come back tomorrow.
);
if (at >= queue.length) return ;
const item = queue[at];
const cloze = item.dir === "cloze";
const cue = cloze ? item.gap.prompt : item.dir === "en2id" ? item.card.en : item.card.id;
const sol = cloze ? item.gap.answer : item.dir === "en2id" ? item.card.id : item.card.en;
const first = !item.st; // never seen: this turn is a pretest, guessing is the point
const R = item.st ? Math.round(nowR(item.st, Date.now()) * 100) : null;
const lapses = item.st ? item.st.l || 0 : 0;
const saved = data.hooks && data.hooks[item.card.id];
const settle = async (verdictIn) => {
if (res || checking) return; // one answer per card, one check at a time
const ms = Date.now() - t0.current;
let verdict = verdictIn;
let altNote = "";
// your own accepted phrasings from earlier rounds count immediately
const known = (data.alts && data.alts[item.card.id]) || [];
if (verdict === "no" && known.some((k) => canonKey(k) === canonKey(val))) verdict = "alt";
// otherwise ask whether it is simply another correct way to say it
if (verdict === "no" && val.trim().length > 0 && item.dir !== "id2en") {
setChecking(true);
setSlow(false);
const slowTimer = setTimeout(() => setSlow(true), 4000);
try {
const t = await ask(
"You judge whether a learner's Indonesian is an acceptable way to say the same thing. Reply with JSON only.",
[{ role: "user", content:
`Meaning to express: "${item.dir === "en2id" ? item.card.en : item.card.id}"\n` +
`The flashcard's wording: "${cloze ? item.card.id : item.card.id}"\n` +
`Expected here: "${sol}"\nLearner wrote: "${val.trim()}"\n\n` +
"Accept it if it is natural Indonesian that expresses the same thing, even with different word order, a contraction like namamu for nama kamu, or a synonym. " +
"aku/saya, kamu/Anda, gak/nggak/tidak, udah/sudah, gimana/bagaimana, mau/ingin, cuma/hanya are always interchangeable and never a mistake. " +
"If his version is acceptable Indonesian, ok must be true even when another wording would be more idiomatic: put that nuance in the note instead. " +
"Reject it only if it means something different or is not grammatical. " +
"JSON: {\"ok\":true|false,\"note\":\"one short line in English: if ok, how it differs in nuance or register from the card; if not ok, what his version actually means\"}" }]
);
const j = parseJSON(t);
if (j && j.ok) { verdict = "alt"; saveAlt(item.card.id, val.trim()); }
if (j && j.note) altNote = j.note;
} catch (e) {
altNote = "Could not reach Claude just now, so this was judged on the card text alone.";
verdict = verdictIn;
} finally {
clearTimeout(slowTimer);
setChecking(false);
setSlow(false);
}
}
const grade = gradeOf(verdict === "alt" ? "yes" : verdict, ms, sol.length);
const ok = grade > 1;
const nextState = review(item.st, grade, Date.now(), item.prior);
nextState.cr = item.st ? item.st.cr || 0 : 0;
if (ok) nextState.cr = Math.min(3, nextState.cr + (item.st && item.st.cd === today() ? 0 : 1));
shownAt.current = Date.now();
setRes({ verdict, delay: schedInt(nextState, data.want), first, altNote: undash(altNote) });
setFixed(false);
const cls = ok ? null : classifyMiss(val.trim(), sol);
const kind = ok ? null : verdict === "typo" ? "typo"
: !val.trim() ? "vocab"
: cls.misplaced.length && !cls.missing.length ? "order"
: cls.missing.length ? "vocab" : "choice";
setResults([...results, { ok, cue, mine: val.trim(), sol: verdict === "alt" ? val.trim() : sol, first, kind }]);
setHook(null);
commit({
id: item.card.id, dir: item.dir, grade, mode: "drill",
tags: first ? [] : item.card.tags,
entry: ok || first ? null : {
mode: "drill", q: cue, mine: val.trim(), correct: sol, prior: item.prior,
// the reading direction has an English answer, which has no place in the word stats
...(item.dir === "id2en"
? { missing: [], misplaced: [], missed: [], hit: [] }
: { ...classifyMiss(val.trim(), sol), missed: classifyMiss(val.trim(), sol).missing, hit: hitWords(val.trim(), sol) }),
},
});
// a wrong answer that is another card from his deck: note the confusion
if (!ok && val.trim()) {
const k = canonKey(val);
const hit = vocab.find((c) => canonKey(c.id) === k || canonKey(c.en) === k);
if (hit && canonKey(hit.id) !== canonKey(sol)) saveConfusion(item.card.id, hit.id);
}
// missed items come back later in the same session, not immediately
if (!ok && !first) {
setQueue((q) => {
const copy = [...q];
const pos = at + 5 <= copy.length ? at + 5 : copy.length; // never sooner than four items later
copy.splice(pos, 0, { ...item, again: true });
return copy;
});
}
};
const getHook = async () => {
setHookBusy(true);
try {
const t = await ask(
"You write keyword mnemonics for a German speaker learning Indonesian. One or two sentences, concrete and vivid, English. No preamble.",
[{ role: "user", content: `Indonesian: "${item.card.id}" means "${item.card.en}". Give one keyword mnemonic that links the sound of the Indonesian to the meaning. Keep it under 25 words.` }]
);
if (t) { setHook(undash(t)); saveHook(item.card.id, undash(t)); }
} catch (e) {}
setHookBusy(false);
};
const wrong = res && (res.verdict === "no" || res.verdict === "skip");
// if he typed another card from his own deck, say what that one means
const mistaken = (() => {
if (!wrong || !val.trim()) return null;
const k = canonKey(val);
const hit = vocab.find((c) => canonKey(c.id) === k || canonKey(c.en) === k);
return hit && canonKey(hit.id) !== canonKey(sol) ? hit : null;
})();
return (
Drill
Items the scheduler chose. Enter checks, Enter again moves on.
{first ? "Guess first, then learn it" : cloze ? "Fill the gap" : item.dir === "en2id" ? "Say it in Indonesian" : "What does this mean"}{first ? "new" : item.again ? "again" : item.kind === "early" ? "ahead of schedule"
: (data.conf && (data.conf[item.card.id] || []).length) ? "easy to mix up" : ""}
{cloze ? "One Indonesian word is missing. Type only that word." : first ? "Guess, even if you have no idea, then press Enter." : "Type your answer, then press Enter."}
);
}
const PRAISE_BIG = ["Mantap", "Bagus sekali", "Keren", "Sip", "Oke banget"];
function Summary({ results, back, again, label, days }) {
const right = results.filter((r) => r.ok).length;
const misses = results.filter((r) => !r.ok);
const rate = results.length ? right / results.length : 0;
const word = rate === 1 ? "Sempurna" : rate >= 0.7 ? PRAISE_BIG[right % PRAISE_BIG.length] : rate >= 0.4 ? "Lumayan" : "Besok lagi";
const fresh = results.filter((r) => r.first).length;
const repeats = results.filter((r) => !r.ok && !r.first).length;
const kinds = results.filter((r) => !r.ok && r.kind).reduce((a, r) => ({ ...a, [r.kind]: (a[r.kind] || 0) + 1 }), {});
const top = Object.entries(kinds).sort((a, b) => b[1] - a[1])[0];
const KIND_LINE = {
vocab: (n) => `${n} of them failed on a word you did not have. That is vocabulary, so the drill is the place to fix it.`,
choice: (n) => `${n} times you reached for a real word that does not fit there. That is word choice, not memory.`,
order: (n) => `In ${n} of them you had every word and put them in the wrong order. Your vocabulary is fine, the structure is not.`,
affix: (n) => `${n} slipped on a prefix or suffix. The stems are there, the affixes are not.`,
typo: (n) => `${n} were spelling slips. You knew them.`,
};
const diagnosis = top && KIND_LINE[top[0]] ? KIND_LINE[top[0]](top[1]) : null;
const line =
rate === 1 ? "Every single one. All of these move further out now."
: rate >= 0.7 && fresh ? `Solid, and ${fresh} of them you had never seen before.`
: rate >= 0.7 ? "Solid round. The ones you had come back later, the rest sooner."
: rate >= 0.4 && repeats ? `${repeats} of these you had seen before, so they stay on short intervals.`
: rate >= 0.4 ? "Middling. Half of this comes back within a day."
: fresh >= results.length / 2 ? "Mostly new material, so a low score here means nothing yet."
: "Rough one. This was material you had already seen, so it all comes back tomorrow.";
return (
{word}
{right} of {results.length} right. {line}
{diagnosis &&
{diagnosis}
}
{misses.length > 0 &&
Coming back soon
}
{misses.map((m, i) => (
{m.sol}
{m.cue}{m.mine ? ` · you had ${m.mine}` : " · skipped"}{m.why ? ` · ${undash(m.why)}` : ""}
))}
);
}
function Sentences({ data, vocab, commit, weakest, weakWords, strongWords, recentRate, rememberSeen, learnWord, previewWord, saveWord, nudgeDue, back }) {
const [batch, setBatch] = useState([]);
const [at, setAt] = useState(0);
const [results, setResults] = useState([]);
const [val, setVal] = useState("");
const [res, setRes] = useState(null);
const [busy, setBusy] = useState(false);
const [fail, setFail] = useState("");
const list = useMemo(() => wordlist(vocab), [vocab]);
const known = useMemo(() => deckWords(vocab), [vocab]);
const [fixed, setFixed] = useState(false);
const [newWords, setNewWords] = useState({});
const [previews, setPreviews] = useState({});
const [hint, setHint] = useState(false);
const weakSet = useMemo(() => new Set((weakWords || []).map((w) => w.k)), [weakWords]);
// The hint used to just show whatever word list the sentence-writing
// call separately put in "focus" -- but that field was free text from
// the same generation, and it could drift from the actual answer (a
// hint word that never even appears in "it should be"). Deriving it
// straight from the real answer makes that impossible: every hint
// word is guaranteed to be a word he actually needs to write, and the
// words he's weakest on are surfaced first.
const hintWordsFor = (id) => {
const toks = Array.from(new Set(canonTokens(id || "").map(canonWord))).filter((w) => w.length > 2 && known.has(w));
const weak = toks.filter((w) => weakSet.has(w));
const rest = toks.filter((w) => !weakSet.has(w));
// toks are internal matching keys (aku/saya both become "1sg", sudah/udah
// become "perf") so they must go back through showWord before they're
// shown to him, the same way the rest of the app never lets him see
// those keys directly.
return [...weak, ...rest].slice(0, 3).map((w) => showWord(w, data.register));
};
const casual = (data.register || "casual") === "casual";
const REGISTER = casual
? "Write the model answers in casual spoken Indonesian, the register he needs with his Indonesian partner: aku and kamu rather than saya and Anda, gak or nggak rather than tidak, udah rather than sudah, gimana rather than bagaimana."
: "Write the model answers in standard polite Indonesian: saya, Anda, tidak, sudah.";
const load = async () => {
setBusy(true); setFail(""); setBatch([]); setResults([]); setAt(0); setRes(null); setVal(""); setHint(false); setNewWords({}); setPreviews({});
try {
const recent = (data.seen || []).slice(-40);
const SETTINGS = ["at home", "at a warung", "on the phone", "at the market", "meeting friends",
"travelling", "at work", "making plans", "in the evening", "asking for help", "in a shop", "on a bad day"];
const pick = SETTINGS[Math.floor(Math.random() * SETTINGS.length)];
const weakList = (weakWords || []).filter((w) => (w.w || 0) >= (w.o || 0)).map((w) => w.k).join(", ");
const orderList = (weakWords || []).filter((w) => (w.o || 0) > (w.w || 0)).map((w) => w.k).join(", ");
// How hard to lean on the weak pattern below. This used to scale all
// the way down to one sentence when the recent rate was low, which
// backfired: easing off the very pattern he's worst at let the rate
// recover through avoidance rather than through actually getting
// better at it, which then swung the count back up, which crashed the
// rate again -- the difficulty was oscillating on a metric it was
// itself allowed to distort, and never at any point trained the real
// weakness. So this never drops the count below the floor: it only
// ever holds steady or scales up. What the rate is allowed to ease
// is the surrounding load, below (`strained`), never the confrontation
// with the actual weak pattern itself.
const weakestCount = !recentRate ? 4 : recentRate.rate >= 0.7 ? 5 : recentRate.rate >= 0.45 ? 4 : 3;
const strained = !!recentRate && recentRate.rate < 0.45;
// Same cached vocabulary block Roleplay uses (see vocabSystemBlock):
// identical wording here means this can hit the same prompt-cache
// entry a Roleplay session already warmed up, or vice versa.
const t = await ask(
[
vocabSystemBlock(list),
{ type: "text", text: "You write translation drills for a German learner of Indonesian at A2 level." + levelNote(recentRate) + " Write the English cues in plain, modern, everyday English, never an archaic or formal word like \"whereto\" or \"wherefrom\", write it as ordinary separate words instead, such as \"where to\" or \"where from\". Never use dashes of any kind, use commas or full stops. Reply with JSON only, no preamble, no markdown." },
],
[{ role: "user", content:
REGISTER +
(weakest ? `\n\nWeakest grammar pattern right now: ${weakest}. At least ${weakestCount} sentences must force it, spread across the set rather than clustered together.` : "") +
(weakList ? `\n\nWords he keeps getting wrong inside sentences: ${weakList}. Work as many of these in as you can, one or two per sentence, in new contexts.` : "") +
(orderList ? `\n\nWords he knows but keeps putting in the wrong position: ${orderList}. Build sentences where their position actually matters.` : "") +
((strongWords || []).length ? `\n\nWords he already produces reliably, fine as filler but do not make them the point: ${(strongWords || []).join(", ")}.` : "") +
(strained ? `\n\nHe has been finding practice hard lately, so outside the sentences forcing ${weakest || "the weak pattern"} above, keep things short and built mostly from words and patterns he already handles well, and never stack the weak-word or word-order issues above into the same sentence as the weakest pattern, one hard thing at a time.` : "") +
`\n\nThis set should be set ${pick}. Write 8 fresh English sentences for him to translate into Indonesian, different from anything obvious. Use only words from the vocabulary list, ${strained ? "keep difficulty gentle and even rather than escalating" : "difficulty rising"}, vary the pattern.` +
(recent.length ? `\n\nDo not repeat or lightly reword any of these, he had them recently:\n${recent.join("\n")}` : "") +
`\n\nSeed ${Math.floor(Math.random() * 100000)}. JSON array: [{\"en\":\"English sentence\",\"id\":\"Indonesian answer\"}]` }]
);
const j = parseJSON(t);
if (!Array.isArray(j) || !j.length) throw new Error();
setBatch(j.map((x) => ({ ...x, en: plainEnglish(undash(x.en)), id: undash(x.id) })));
rememberSeen(j.map((x) => x.en).filter(Boolean));
} catch (e) { setFail("The sentences did not come through. Try again."); }
setBusy(false);
};
useEffect(() => { load(); }, []);
// As soon as an answer is judged, quietly look up what any brand-new
// word actually means -- so the "+ word" chip below can show its
// meaning right away instead of only after he commits to adding it.
// Declared before the "batch finished" early return below on purpose:
// a hook after a conditional return fires on some renders and not
// others, which breaks React's hook-call order the moment that
// condition first turns true -- exactly when a set ends -- and takes
// the whole screen down blank.
useEffect(() => {
const cur = batch[at];
if (!res || !previewWord || !cur) return;
outsideDeck(res.correct || cur.id, known).forEach((w) => {
if (previews[w] !== undefined) return;
setPreviews((s) => ({ ...s, [w]: "busy" }));
previewWord(w, res.correct || cur.id).then((j) => {
setPreviews((s) => ({ ...s, [w]: j || null }));
});
});
}, [res]);
if (batch.length && at >= batch.length) return ;
const task = batch[at];
const finish = (ok, correct, note, kind) => {
const mine = val.trim();
const hintWords = hint ? hintWordsFor(task.id) : [];
setFixed(false);
const cls = ok ? { missing: [], misplaced: [] } : classifyMiss(mine, correct);
// A word he was never taught is not a mistake he could have avoided --
// it's the app teaching him something new. Never blame his weak-word
// or pattern stats for a word he had no way to know yet: strip it out
// of the real "missed" signal, and if that new word is the *only*
// thing wrong, treat the whole answer as a win worth celebrating
// rather than a miss (see the "New word ahead" verdict below).
const newInAnswer = new Set(outsideDeck(correct, known).map(bare));
const missed = cls.missing.filter((w) => !newInAnswer.has(bare(w)));
const misplaced = cls.misplaced;
const onlyNewWord = !ok && cls.missing.length > 0 && cls.missing.every((w) => newInAnswer.has(bare(w))) && !misplaced.length;
const hit = hitWords(mine, correct);
const guessed = kind || (ok ? null : misplaced.length && !missed.length ? "order" : missed.length ? "vocab" : "choice");
setRes({ ok, correct, note, mine, onlyNewWord });
setResults([...results, { ok: ok || onlyNewWord, onlyNewWord, cue: task.en, mine, sol: correct, why: note, kind: guessed }]);
commit({
id: null, dir: null, grade: ok ? (hint ? 2 : 3) : onlyNewWord ? 2 : 1, mode: "sentences", tags: tagsOf(task.id),
entry: { mode: "sentences", q: task.en, mine, correct, note: note || "", missed, misplaced, hit, hinted: hintWords, silent: ok || onlyNewWord },
});
if (nudgeDue) nudgeDue([...missed, ...misplaced]);
};
const check = async () => {
if (!val.trim() || busy) return;
if (judge(val, task.id) === "yes") { finish(true, task.id, "", null); return; }
setBusy(true);
try {
const t = await ask("You correct Indonesian for a German learner. Direct and concise in English, but fair: say what he got right before what's wrong, never only the negative. Never use dashes of any kind, use commas or full stops. Reply with JSON only.",
[{ role: "user", content:
`Task: translate "${task.en}" into Indonesian.\nModel answer: "${task.id}"\nLearner wrote: "${val.trim()}"\n\n` +
"Treat register variants as fully correct, never as mistakes: aku = saya, kamu = Anda, gak = nggak = tidak, udah = sudah, gimana = bagaimana, mau = ingin, cuma = hanya. " +
"If his sentence is acceptable Indonesian for the task, ok must be true even when the model answer is phrased differently or sounds more idiomatic. Put that nuance in the note. " +
(casual ? "He is learning for casual conversation with his Indonesian partner, so prefer the casual form in your corrected version. " : "") +
"Accept equivalent phrasings and small typos as correct. " +
"JSON: {\"ok\":true|false,\"correct\":\"best Indonesian version\",\"wrong\":[\"the exact words he got wrong\"]," +
"\"kind\":\"one of vocab, choice, order, affix, typo: vocab if a word he needed is missing entirely, choice if he used a real word that is wrong here, order if the words are right but in the wrong position, affix if only a prefix or suffix is wrong, typo for a misspelling\"," +
"\"note\":\"one or two short sentences, warm but plain: first name what he got right if most of it was right (say so explicitly, e.g. most of that was right, or the structure was spot on), then the actual mistake. If every wrong word is really just a typo (kind is typo, or the wrong word is one or two letters off from a word he clearly knows), say plainly that it was just a typo rather than describing it as a language mistake.\"}" }]);
const j = parseJSON(t) || { ok: false, correct: task.id, note: "" };
finish(!!j.ok, undash(j.correct || task.id), undash(j.note || ""), j.kind);
} catch (e) {
finish(false, task.id, "Could not reach Claude just now, so this was compared with the model answer only.");
} finally { setBusy(false); }
};
return (
Sentence forge
{weakest ? `Weighted towards ${weakest}, the pattern you miss most.` : `Built from your ${vocab.length} cards, nothing foreign inside.`}
{res.onlyNewWord ? "New word ahead" : res.ok ? (hint ? "Right, with the hint" : "Right") : "Not quite"}
{!res.ok && res.mine && (
You wrote
)}
{res.ok ? "Model answer" : "It should be"}
{res.onlyNewWord ? (
Everything else was exactly right. {outsideDeck(res.correct || task.id, known).join(", ")} just isn't in your deck yet, add it below and it's yours next time.
);
}
const SCENES = [
{ k: "W", ic: "bowl", t: "Warung", d: "Order food, ask what is in it", s: "You run a warung in Yogyakarta. The learner wants to order." },
{ k: "G", ic: "scooter", t: "Grab ride", d: "Destination, traffic, small talk", s: "You are a Grab driver picking the learner up." },
{ k: "P", ic: "fruit", t: "Market", d: "Buy something, haggle a little", s: "You sell fruit at the pasar. The learner buys and haggles." },
{ k: "K", ic: "house", t: "Meeting the family", d: "Where you are from, work, food", s: "Your name is Tante Rina, the aunt of the learner's partner, meeting him for the first time. Introduce yourself by name first, then ask politely about one thing at a time: origin, work, age, food." },
{ k: "T", ic: "plant", t: "Neighbour", d: "Morning chat outside the house", s: "You are the neighbour running into the learner outside in the morning." },
];
function Roleplay({ vocab, commit, recentRate, nudgeDue, back }) {
const [scene, setScene] = useState(null);
const [msgs, setMsgs] = useState([]);
const [val, setVal] = useState("");
const [busy, setBusy] = useState(false);
const [review2, setReview2] = useState(null);
const [fail, setFail] = useState("");
const [mode, setMode] = useState("text");
const [speakScene, setSpeakScene] = useState(null);
const list = useMemo(() => wordlist(vocab), [vocab]);
const known = useMemo(() => deckWords(vocab), [vocab]);
// A different random length each time, so scenes don't all wrap up at
// exactly the same point -- set fresh in start() below.
const targetTurnsRef = useRef(6);
const turns = msgs.filter((m) => m.role === "user").length;
useEffect(() => {
if (scene && turns >= targetTurnsRef.current && !review2 && !busy) closeAndEvaluate(); // enough said, wrap it up
}, [scene, turns, review2, busy]);
// The vocabulary block is split out into its own cached content block (see
// vocabSystemBlock above) so repeated turns in this same conversation,
// and even a later Sentence forge session, can reuse it from Anthropic's
// prompt cache instead of paying full price to reprocess it every time.
const system = scene
? [
vocabSystemBlock(list),
{ type: "text", text: scene.s + " Speak Indonesian only, at most two short sentences per turn, A2 level." + levelNote(recentRate) + " Prefer words from the vocabulary list, stay in character even if the learner makes mistakes or writes English, and never correct anything during the conversation." },
]
: "";
const start = async (sc) => {
setScene(sc); setBusy(true); setReview2(null); setMsgs([]); setFail("");
targetTurnsRef.current = 4 + Math.floor(Math.random() * 7); // 4 to 10 turns
try {
const t = await ask(sc.s + " Speak Indonesian only, at most two short sentences, A2 level." + levelNote(recentRate),
[{ role: "user", content: "Open the conversation naturally: if your character would give their name, introduce yourself in one short line first, then ask exactly one simple, clearly-formed question. Never ask a question that does not make sense, such as asking your own name." }]);
setMsgs([{ role: "assistant", content: t }]);
} catch (e) {
setFail("Could not start the scene. Check your connection and try again.");
setScene(null);
} finally { setBusy(false); }
};
const send = async () => {
if (!val.trim() || busy) return;
const hist = [...msgs, { role: "user", content: val.trim() }];
setMsgs(hist); setVal(""); setBusy(true); setFail("");
try {
const t = await ask(system, hist);
setMsgs([...hist, { role: "assistant", content: t }]);
} catch (e) {
setFail("That reply did not come through. Try sending again.");
} finally { setBusy(false); }
};
// Takes an explicit message list rather than always reading `msgs` from
// state, so closeAndEvaluate() below can hand it the just-added closing
// line straight away -- setMsgs() alone wouldn't be visible here yet in
// the same tick, since React batches the update.
const evaluate = async (finalMsgs) => {
if (busy) return;
setBusy(true); setFail("");
const list = finalMsgs || msgs;
const script = list.map((m) => (m.role === "user" ? "LEARNER: " : "CHARACTER: ") + m.content).join("\n");
let t = "";
try {
t = await ask("You review a roleplay for a German learner of Indonesian. Direct, concrete, in English. Never use dashes of any kind. Reply with JSON only.",
[{ role: "user", content: script +
"\n\nReview only the learner's lines. Treat aku/saya, gak/tidak, udah/sudah, cuma/hanya as fully correct. JSON: " +
"{\"good\":[{\"line\":\"something he got right\",\"why\":\"what was good about it, one short line\"}]," +
"\"nearly\":[{\"mine\":\"his line\",\"better\":\"how a native would say it\",\"why\":\"one line, understandable but not natural\"}]," +
"\"slips\":[{\"mine\":\"his line\",\"correct\":\"fixed\",\"note\":\"one line why it is wrong\"}]," +
"\"pattern\":\"the one thing to work on, one sentence\"}" }]);
} catch (e) {
setFail("The review did not come through. Try again.");
setBusy(false);
return;
}
const j = parseJSON(t) || { good: [], nearly: [], slips: [], pattern: "" };
setReview2(j);
commit({ id: null, dir: null, grade: 3, mode: "roleplay", tags: [] });
// Good lines used to only bump the session-happened counter above.
// They are also free evidence of which deck words and patterns he
// already produces correctly on his own, unprompted -- the same kind
// of positive signal Drill/Sentence forge give, which roleplay was
// missing entirely (only its failures ever reached data.pat/data.words).
(j.good || []).forEach((g) => {
const hit = goodLineHits(g.line, known);
commit({ id: null, dir: null, grade: 3, mode: "roleplay", tags: tagsOf(g.line || ""),
entry: hit.length ? { mode: "roleplay", hit } : undefined });
});
// "Nearly" is understandable but not native -- a softer miss than a
// slip, so it counts as a hint-level grade rather than a full wrong,
// but still reports which words were the actual problem.
(j.nearly || []).forEach((f) => {
const { missed, misplaced, hit } = roleplayDiff(f.mine, f.better);
commit({ id: null, dir: null, grade: 2, mode: "roleplay", tags: tagsOf(f.better || ""),
entry: { mode: "roleplay", q: scene.t, mine: f.mine, correct: f.better, note: f.why || "", missed, misplaced, hit } });
if (nudgeDue) nudgeDue([...missed, ...misplaced]);
});
(j.slips || []).forEach((f) => {
const { missed, misplaced, hit } = roleplayDiff(f.mine, f.correct);
commit({ id: null, dir: null, grade: 1, mode: "roleplay", tags: tagsOf(f.correct || ""),
entry: { mode: "roleplay", q: scene.t, mine: f.mine, correct: f.correct, note: f.note || "", missed, misplaced, hit } });
if (nudgeDue) nudgeDue([...missed, ...misplaced]);
});
setBusy(false);
};
// Instead of cutting the scene off the moment the turn count is reached,
// ask the character for one real goodbye line first (a stage direction,
// never shown as if the learner said it), then review the transcript
// including that closing line. finalMsgs is threaded through explicitly
// to evaluate() rather than relying on state, since setMsgs() here would
// not be visible in `msgs` until the next render.
const closeAndEvaluate = async () => {
if (busy) return;
setBusy(true); setFail("");
try {
const t = await ask(system,
[...msgs, { role: "user", content: "(Stage direction, not spoken by the learner: bring this conversation to a natural close now, with a short, friendly goodbye in character.)" }]);
const finalMsgs = [...msgs, { role: "assistant", content: t }];
setMsgs(finalMsgs);
await evaluate(finalMsgs);
} catch (e) {
setFail("Could not close the scene. Try again.");
setBusy(false);
}
};
if (speakScene)
return setSpeakScene(null)} commit={commit} known={known} nudgeDue={nudgeDue} />;
if (!scene)
return (
Roleplay
Indonesian only. Slips are collected, shown at the end, and fed back into the pattern scores.
);
}
/* ---------------- Speak: live voice roleplay ----------------
Same scenes and characters as the typed Roleplay above, but the reply
is spoken instead of typed. Talks to Google's Gemini Live API directly
from the browser over a WebSocket: our own /api/live-token mints a
short-lived, constrained token (model + character + no tools baked in
server-side, see that file's comments) so the long-lived Gemini key
never reaches the browser, then the mic audio streams up and the
model's voice streams back down on that one connection. No new backend
dependency beyond the one token-minting call. */
function pcm16FromFloat32(float32, inRate, outRate) {
let src = float32;
if (inRate !== outRate) {
const ratio = inRate / outRate;
const outLen = Math.max(1, Math.round(float32.length / ratio));
const resampled = new Float32Array(outLen);
for (let i = 0; i < outLen; i++) {
const at = i * ratio;
const i0 = Math.floor(at), i1 = Math.min(i0 + 1, float32.length - 1);
const frac = at - i0;
resampled[i] = float32[i0] * (1 - frac) + float32[i1] * frac;
}
src = resampled;
}
const int16 = new Int16Array(src.length);
for (let i = 0; i < src.length; i++) {
const s = Math.max(-1, Math.min(1, src[i]));
int16[i] = s < 0 ? s * 0x8000 : s * 0x7fff;
}
return int16;
}
function b64FromInt16(int16) {
const bytes = new Uint8Array(int16.buffer);
let bin = "";
for (let i = 0; i < bytes.length; i++) bin += String.fromCharCode(bytes[i]);
return btoa(bin);
}
function int16FromB64(b64) {
const bin = atob(b64);
const bytes = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
return new Int16Array(bytes.buffer);
}
const LIVE_IN_RATE = 16000;
const LIVE_OUT_RATE = 24000;
const LIVE_FADE_S = 0.006; // short fade at each audio chunk's edges, to stop the clicking between chunks
// A fixed session length felt mechanical (always the same number of turns).
// The model is never told a number now -- it decides for itself when the
// scene feels done, based on how the conversation actually develops. This
// range is only used to pick a fresh random safety-net threshold each
// session, for the rare case where it runs on much longer than that.
const END_AFTER_TURNS_MIN = 4;
const END_AFTER_TURNS_MAX = 10;
function Speak({ scene, back, commit, known, nudgeDue }) {
const deckKnown = known || new Set();
const [state, setState] = useState("idle"); // idle | connecting | live | error
const [fail, setFail] = useState("");
const [turns, setTurns] = useState([]); // [{ role: "user" | "model", text }]
const [review, setReview] = useState(null);
const [busy, setBusy] = useState(false); // grading the finished conversation
const wsRef = useRef(null);
const micCtxRef = useRef(null);
const playCtxRef = useRef(null);
const streamRef = useRef(null);
const procRef = useRef(null);
const nextPlayAt = useRef(0);
const activeSrcs = useRef([]);
const primedRef = useRef(false);
const modelTurnsRef = useRef(0); // counts the character's completed replies, to decide when to auto-end
const endAfterTurnsRef = useRef(END_AFTER_TURNS_MIN); // this session's random safety-net threshold, set fresh in start()
const wrapupSentRef = useRef(false); // true once we've nudged the character to close, so we end on the *next* turn rather than mid-goodbye
const turnsRef = useRef([]); // mirrors `turns`, so late callbacks (setTimeout, ws.onmessage) always see the latest transcript rather than the stale one from when they were created
// Closes the mic/socket/audio without touching component state — used both
// by a plain abandon (Back button, unmount) and as the first step of
// finish() below, which goes on to grade the conversation.
const teardown = () => {
try { wsRef.current && wsRef.current.close(); } catch (e) {}
wsRef.current = null;
try { procRef.current && procRef.current.disconnect(); } catch (e) {}
procRef.current = null;
try { streamRef.current && streamRef.current.getTracks().forEach((t) => t.stop()); } catch (e) {}
streamRef.current = null;
try { micCtxRef.current && micCtxRef.current.close(); } catch (e) {}
micCtxRef.current = null;
activeSrcs.current.forEach((s) => { try { s.stop(); } catch (e) {} });
activeSrcs.current = [];
try { playCtxRef.current && playCtxRef.current.close(); } catch (e) {}
playCtxRef.current = null;
primedRef.current = false;
};
const stop = () => { teardown(); setState("idle"); };
useEffect(() => () => teardown(), []);
// Appends to the last bubble if the same speaker is still talking, otherwise
// starts a new one — that's what turns the raw transcript stream into a
// proper back-and-forth thread instead of one run-on paragraph.
const say = (role, text) => {
if (!text) return;
const ts = turnsRef.current;
const next = ts.length && ts[ts.length - 1].role === role
? [...ts.slice(0, -1), { role, text: ts[ts.length - 1].text + text }]
: [...ts, { role, text }];
turnsRef.current = next;
setTurns(next);
};
// Same grading call the typed "Type it" mode uses, just fed the voice
// transcript instead of the typed messages. Runs once the conversation is
// over (either the turn count says the character has had its goodbye, or
// the learner tapped stop by hand).
const gradeAndFinish = async (said) => {
const lines = said.filter((t) => t.role === "user");
if (lines.length === 0) return; // nothing was actually said, nothing to review
setBusy(true); setFail("");
const script = said.map((t) => (t.role === "user" ? "LEARNER: " : "CHARACTER: ") + t.text).join("\n");
try {
const t = await ask("You review a roleplay for a German learner of Indonesian. Direct, concrete, in English. Never use dashes of any kind. Reply with JSON only.",
[{ role: "user", content: script +
"\n\nReview only the learner's lines. Treat aku/saya, gak/tidak, udah/sudah, cuma/hanya as fully correct. The learner's lines came from speech recognition, so ignore capitalization, punctuation, and small spelling slips that are clearly just transcription noise rather than language mistakes. JSON: " +
"{\"good\":[{\"line\":\"something he got right\",\"why\":\"what was good about it, one short line\"}]," +
"\"nearly\":[{\"mine\":\"his line\",\"better\":\"how a native would say it\",\"why\":\"one line, understandable but not natural\"}]," +
"\"slips\":[{\"mine\":\"his line\",\"correct\":\"fixed\",\"note\":\"one line why it is wrong\"}]," +
"\"pattern\":\"the one thing to work on, one sentence\"}" }]);
const j = parseJSON(t) || { good: [], nearly: [], slips: [], pattern: "" };
setReview(j);
commit({ id: null, dir: null, grade: 3, mode: "roleplay", tags: [] });
// Same word/pattern-level signals the typed Roleplay now records (see
// its evaluate()): good lines credit the deck words he used correctly,
// "nearly" is a softer miss than a slip, both report which words were
// actually the problem instead of only feeding data.pat.
(j.good || []).forEach((g) => {
const hit = goodLineHits(g.line, deckKnown);
commit({ id: null, dir: null, grade: 3, mode: "roleplay", tags: tagsOf(g.line || ""),
entry: hit.length ? { mode: "roleplay", hit } : undefined });
});
(j.nearly || []).forEach((f) => {
const { missed, misplaced, hit } = roleplayDiff(f.mine, f.better);
commit({ id: null, dir: null, grade: 2, mode: "roleplay", tags: tagsOf(f.better || ""),
entry: { mode: "roleplay", q: scene.t, mine: f.mine, correct: f.better, note: f.why || "", missed, misplaced, hit } });
if (nudgeDue) nudgeDue([...missed, ...misplaced]);
});
(j.slips || []).forEach((f) => {
const { missed, misplaced, hit } = roleplayDiff(f.mine, f.correct);
commit({ id: null, dir: null, grade: 1, mode: "roleplay", tags: tagsOf(f.correct || ""),
entry: { mode: "roleplay", q: scene.t, mine: f.mine, correct: f.correct, note: f.note || "", missed, misplaced, hit } });
if (nudgeDue) nudgeDue([...missed, ...misplaced]);
});
} catch (e) {
setFail("The review did not come through, but nice work practicing out loud.");
} finally { setBusy(false); }
};
// Ends the live session (by hand, or because the character just said
// goodbye) and hands the transcript over for review.
const finish = () => {
const said = turnsRef.current;
teardown();
setState("idle");
gradeAndFinish(said);
};
const playChunk = (b64) => {
const ctx = playCtxRef.current;
if (!ctx) return;
const int16 = int16FromB64(b64);
const float32 = new Float32Array(int16.length);
for (let i = 0; i < int16.length; i++) float32[i] = int16[i] / 32768;
const buf = ctx.createBuffer(1, float32.length, LIVE_OUT_RATE);
buf.getChannelData(0).set(float32);
const src = ctx.createBufferSource();
src.buffer = buf;
// Each chunk arrives as a separate, independently-decoded buffer, so the
// sample values at its start/end almost never line up with the chunk
// played before or after it — that little jump is the clicking. A very
// short fade in/out on every chunk's gain smooths those seams out
// without being audible as a fade over a normal-length utterance.
const gain = ctx.createGain();
src.connect(gain); gain.connect(ctx.destination);
const startAt = Math.max(ctx.currentTime, nextPlayAt.current);
const dur = buf.duration;
const fade = Math.min(LIVE_FADE_S, dur / 2);
gain.gain.setValueAtTime(0, startAt);
gain.gain.linearRampToValueAtTime(1, startAt + fade);
gain.gain.setValueAtTime(1, Math.max(startAt + fade, startAt + dur - fade));
gain.gain.linearRampToValueAtTime(0, startAt + dur);
src.start(startAt);
nextPlayAt.current = startAt + dur;
activeSrcs.current.push(src);
src.onended = () => { activeSrcs.current = activeSrcs.current.filter((s) => s !== src); };
};
const start = async () => {
setState("connecting"); setFail(""); setTurns([]); turnsRef.current = []; setReview(null); modelTurnsRef.current = 0; wrapupSentRef.current = false;
// No fixed turn count is told to the model any more -- it should judge
// for itself when the scene feels done, based on how the conversation
// actually goes and how much the learner has said, so the variability
// comes across as organic rather than a hidden countdown. The random
// number below is never mentioned to the model at all: it is purely our
// own safety net for a session that runs unusually long, and it picks a
// fresh value each time so that safety net itself doesn't land on the
// same turn every session.
endAfterTurnsRef.current = END_AFTER_TURNS_MIN + Math.floor(Math.random() * (END_AFTER_TURNS_MAX - END_AFTER_TURNS_MIN + 1));
try {
const system = scene.s +
" Speak Indonesian only, at most two short sentences per turn, A2 level." +
" Use only the simplest, most common everyday words a true beginner already knows (greetings, numbers, basic verbs like mau, ada, boleh, bisa, suka); avoid rare, formal, or literary vocabulary, and keep sentences short and guessable from context." +
" You speak first: open the roleplay yourself before the learner says anything. If your character would give their name, introduce yourself in one short line first, then ask exactly one simple, clearly-formed question; never ask a question that does not make sense, such as asking your own name." +
" Don't aim for a fixed number of exchanges: judge for yourself, from how the conversation is actually going and how engaged the learner seems, when the scene feels naturally complete, then bring it to a close yourself with a short, friendly goodbye in character and do not start a new topic after that. A quieter exchange can wrap up sooner; a livelier one can run on longer." +
" Stay in character even if the learner makes mistakes or switches to English, and never correct anything during the conversation.";
const r = await fetch("/api/live-token", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ system }),
});
if (r.status === 401) { onAuthFailure(); return; }
const d = await r.json();
if (!r.ok || !d.name) throw new Error((d && d.error) || "Could not start the voice session.");
const stream = await navigator.mediaDevices.getUserMedia({ audio: { channelCount: 1, echoCancellation: true, noiseSuppression: true } });
streamRef.current = stream;
const ws = new WebSocket("wss://generativelanguage.googleapis.com/ws/google.ai.generativelanguage.v1beta.GenerativeService.BidiGenerateContentConstrained?access_token=" + encodeURIComponent(d.name));
wsRef.current = ws;
ws.onopen = () => {
// This setup message is meant to be fully overridden by the token
// minted in api/live-token.js (that's the point of a constrained
// token). In practice the transcription language still leaked
// through as auto-detect from this client-side message alone
// (showing up as e.g. Korean characters for the learner's actual
// Indonesian speech), so languageCodes is repeated here too, to
// match the server-side token exactly rather than relying on the
// override.
ws.send(JSON.stringify({
setup: {
model: d.model || "models/gemini-3.8-live",
generationConfig: { responseModalities: ["AUDIO"], speechConfig: { languageCode: "id-ID" } },
systemInstruction: { parts: [{ text: system }] },
inputAudioTranscription: { languageCodes: ["id-ID"] },
outputAudioTranscription: { languageCodes: ["id-ID"] },
},
}));
const AC = window.AudioContext || window.webkitAudioContext;
const micCtx = new AC();
micCtxRef.current = micCtx;
const playCtx = new AC({ sampleRate: LIVE_OUT_RATE });
playCtxRef.current = playCtx;
nextPlayAt.current = 0;
const source = micCtx.createMediaStreamSource(stream);
const proc = micCtx.createScriptProcessor(4096, 1, 1);
procRef.current = proc;
const mute = micCtx.createGain(); mute.gain.value = 0;
source.connect(proc); proc.connect(mute); mute.connect(micCtx.destination);
proc.onaudioprocess = (e) => {
if (!wsRef.current || wsRef.current.readyState !== 1) return;
const int16 = pcm16FromFloat32(e.inputBuffer.getChannelData(0), micCtx.sampleRate, LIVE_IN_RATE);
wsRef.current.send(JSON.stringify({ realtimeInput: { audio: { data: b64FromInt16(int16), mimeType: "audio/pcm;rate=16000" } } }));
};
setState("live");
};
ws.onmessage = async (ev) => {
let msg;
try { msg = JSON.parse(typeof ev.data === "string" ? ev.data : await ev.data.text()); } catch (e) { return; }
// Once the server confirms our setup, nudge it to speak first: a
// short stage-direction sent as a normal text turn (never spoken
// aloud, never transcribed, so it can't show up as a fake line from
// the learner) rather than waiting silently for the mic.
if (msg.setupComplete && !primedRef.current) {
primedRef.current = true;
ws.send(JSON.stringify({
clientContent: {
turns: [{ role: "user", parts: [{ text: "(Stage direction, not spoken by the learner: begin the roleplay now with your character's opening line, in Indonesian.)" }] }],
turnComplete: true,
},
}));
}
const sc = msg.serverContent;
if (!sc) return;
if (sc.interrupted) {
activeSrcs.current.forEach((s) => { try { s.stop(); } catch (e) {} });
activeSrcs.current = [];
nextPlayAt.current = playCtxRef.current ? playCtxRef.current.currentTime : 0;
}
(sc.modelTurn && sc.modelTurn.parts || []).forEach((p) => {
if (p.inlineData && p.inlineData.data) playChunk(p.inlineData.data);
});
if (sc.inputTranscription && sc.inputTranscription.text) say("user", sc.inputTranscription.text);
if (sc.outputTranscription && sc.outputTranscription.text) say("model", sc.outputTranscription.text);
// turnComplete marks the end of one of the character's replies. The
// model is never told a turn number, so it should normally close
// the scene on its own; this is just the safety net for when it
// runs on well past this session's random threshold. Rather than
// cutting the audio off mid-conversation, the first time we cross
// the threshold we nudge the character (a silent stage direction,
// same trick used to prime it to speak first) to wrap up now, and
// only actually end on the reply that follows -- so the learner
// always hears a real goodbye rather than an abrupt stop.
if (sc.turnComplete) {
modelTurnsRef.current += 1;
if (modelTurnsRef.current >= endAfterTurnsRef.current) {
if (!wrapupSentRef.current) {
wrapupSentRef.current = true;
ws.send(JSON.stringify({
clientContent: {
turns: [{ role: "user", parts: [{ text: "(Stage direction, not spoken by the learner: bring this conversation to a natural close now, with a short, friendly goodbye in character, in Indonesian.)" }] }],
turnComplete: true,
},
}));
} else {
const ctx = playCtxRef.current;
const remain = ctx ? Math.max(0, nextPlayAt.current - ctx.currentTime) : 0;
setTimeout(finish, remain * 1000 + 400);
}
}
}
};
ws.onerror = () => setFail("The voice connection dropped. Try starting again.");
ws.onclose = () => { if (wsRef.current) setState("idle"); };
} catch (e) {
setFail((e && e.message) || "Could not start the voice session.");
setState("error");
stop();
}
};
return (
{ teardown(); setState("idle"); back(); }} />
{scene.t}
{!review && (
Talk it out loud, in Indonesian. The scene wraps up on its own after a few exchanges, or tap stop for your review any time.
{busy && "Reviewing your conversation…"}
{!busy && state === "idle" && "Tap to start"}
{!busy && state === "connecting" && "Connecting…"}
{!busy && state === "live" && "Listening, tap to stop and get your review"}
{!busy && state === "error" && "Tap to try again"}
);
}
const STAGE_INFO = {
fresh: {
label: "Never seen",
text: "Hasn't come up yet. The first time it does, its very first pace gets set from how well you get it then.",
},
settling: {
label: "Settling in",
text: "Answered right, but not yet on three separate days. Comes back every day or two on purpose, one correct day at a time, until it's earned a longer break.",
},
holding: {
label: "Come back in days",
text: "Past the settling-in stage. Next review lands somewhere between a few days and three weeks out, and grows a bit further each time you get it right.",
},
solid: {
label: "Come back in weeks",
text: "The gap has grown past three weeks, sometimes months. These are the ones you've properly got, only checked in on now and then.",
},
};
// A small, honest line chart: one point per day of data.history's recall
// average. Single hue, no numeric y-axis -- the "words mastered" number
// next to it anchors the story, hover/drag reveals exact values, and
// "Show as list" gives a plain-table equivalent for anyone who'd rather
// not read a chart (or can't see color well).
function HistoryChart({ points }) {
const [hover, setHover] = useState(null);
const [table, setTable] = useState(false);
const W = 300, H = 90, PAD = 7;
const n = points.length;
const xAt = (i) => (n <= 1 ? W / 2 : (i / (n - 1)) * W);
const yAt = (r) => PAD + (1 - Math.max(0, Math.min(1, r))) * (H - PAD * 2);
const path = points.map((p, i) => `${i ? "L" : "M"}${xAt(i).toFixed(1)},${yAt(p.r).toFixed(1)}`).join(" ");
const area = `${path} L${xAt(n - 1).toFixed(1)},${H} L${xAt(0).toFixed(1)},${H} Z`;
const onMove = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const cx = e.touches ? e.touches[0].clientX : e.clientX;
const x = (cx - rect.left) / Math.max(1, rect.width);
setHover(Math.max(0, Math.min(n - 1, Math.round(x * (n - 1)))));
};
if (table) {
return (
);
}
function Memory({ data, vocab, weakWords, weakest, back, persist, go }) {
const now = Date.now();
const [stageSel, setStageSel] = useState(null);
const toggleStage = (tone) => setStageSel((cur) => (cur === tone ? null : tone));
const retention = (() => {
const keys = Object.keys(data.mem);
if (!keys.length) return 0;
return keys.reduce((a, k) => a + nowR(data.mem[k], now), 0) / keys.length;
})();
const stages = (() => {
const s = { fresh: 0, settling: 0, holding: 0, solid: 0 };
const seen = new Set();
vocab.forEach((c) => {
const st = data.mem[c.id + "|en2id"] || data.mem[c.id + "|id2en"];
seen.add(c.id);
if (!st) { s.fresh++; return; }
const iv = schedInt(st, data.want);
if ((st.cr || 0) < 3) s.settling++;
else if (iv < 21) s.holding++;
else s.solid++;
});
return s;
})();
const activity = (() => {
const out = [];
const l = data.log || {};
for (let i = 13; i >= 0; i--) {
const d = new Date(); d.setDate(d.getDate() - i);
const day = l[localDay(d)] || {};
out.push((day.drill || 0) + (day.sentences || 0) + (day.roleplay || 0));
}
return out;
})();
const weekAnswers = activity.slice(-7).reduce((a, b) => a + b, 0);
const hintsWeek = (() => {
const l = data.log || {};
let n = 0;
for (let i = 0; i < 7; i++) { const d = new Date(); d.setDate(d.getDate() - i); n += (l[localDay(d)] || {}).hints || 0; }
return n;
})();
const dueNow = Object.keys(data.mem).filter((k) => dueIn(data.mem[k], data.want, now) <= 0).length;
const window7 = (from, to) => {
const acc = {};
const l = data.patLog || {};
for (let i = from; i < to; i++) {
const d = new Date(); d.setDate(d.getDate() - i);
const day = l[localDay(d)] || {};
Object.entries(day).forEach(([k, v]) => {
const e = acc[k] || { c: 0, w: 0 };
e.c += v.c || 0; e.w += v.w || 0;
acc[k] = e;
});
}
return acc;
};
const recent = window7(0, 7), earlier = window7(7, 14);
const pats = Object.entries(data.pat)
.map(([k, v]) => {
const n = (v.c || 0) + (v.w || 0);
const r = recent[k], e = earlier[k];
const rRate = r && r.c + r.w >= 3 ? r.w / (r.c + r.w) : null;
const eRate = e && e.c + e.w >= 3 ? e.w / (e.c + e.w) : null;
const trend = rRate !== null && eRate !== null ? rRate - eRate : null;
return { k, ...v, n, rate: (v.w || 0) / Math.max(1, n), thin: n < 5, trend };
})
.filter((p) => p.n >= 2)
.sort((a, b) => (a.thin - b.thin) || (b.w - a.w) || (b.rate - a.rate));
const hardest = Object.entries(data.mem)
.map(([k, v]) => ({ k: k.split("|")[0], dir: k.split("|")[1], ...v }))
.filter((h) => (h.l || 0) > 0 || (h.d || 0) >= 6)
.sort((a, b) => (b.l || 0) - (a.l || 0) || (b.d || 0) - (a.d || 0))
.slice(0, 8);
return (
Memory
{vocab.length} cards in your deck, {Object.keys(data.mem).length} of their directions being scheduled.
How far along your {vocab.length} cards are
{/* One glance at where the whole deck stands: a stacked bar, left
to right, from never touched to fully graduated. Same four
stages and colors as the tiles below, just as a proportion of
the deck instead of raw counts. Hover (mouse) or tap (touch)
either the bar segment or its tile to see what that stage
means and when its cards come back. */}
{stageSel ? (
<>{STAGE_INFO[stageSel].label}. {STAGE_INFO[stageSel].text}
) : (
<>Hover or tap a stage above to see what it means and when those cards come back.
)}
{(() => {
const hist = data.history || [];
const enough = hist.length >= 3;
// Same cr>=3 bar as the "holding"+"solid" tiles above -- one
// number for "mastered", never two that could quietly disagree.
const masteredNow = stages.holding + stages.solid;
const first = hist[0];
if (!enough) {
return (
Words mastered over time
Words mastered right now{masteredNow}
Started tracking today. Check back in a few days to see how this grows.
{steady
? <>And your recall held steady around {Math.round(rNow * 100)}% the whole time, so this growth isn't coming at the cost of forgetting older words.
: rNow > rThen
? <>Your recall climbed too, from {Math.round(rThen * 100)}% to {Math.round(rNow * 100)}%, you're keeping up with reviews better than when tracking started.
: <>Your recall dipped from {Math.round(rThen * 100)}% to {Math.round(rNow * 100)}% while that grew, a sign reviews might be piling up faster than you're clearing them.}
{weakest && first.w && weakest !== first.w && (
Your weakest pattern has moved on since tracking started: it was {first.w}, now it's {weakest}.
)}
);
})()}
Last two weeks
{activity.map((n, i) => (
))}
14 days agotoday
Answers this week{weekAnswers}
Days practised{data.days.length}
Due right now{dueNow}
Hints used this week{hintsWeek}
{pats.length > 0 && (
Patterns you miss most
{pats[0] && !pats[0].thin && (
Your most expensive pattern is {pats[0].k}, {pats[0].w} mistakes out of {pats[0].n} tries.
)}
{pats.map((p) => (
))}
Ranked by how many mistakes each one actually cost you. The bold number is how often it goes wrong when it comes up. Tap one for a short lesson.
{Math.round((data.recog ?? 0.15) * 100)}% of each round is Indonesian to English. The rest is production, which is what
carries over to speaking. Turn this up if you find yourself lost reading messages.
How you want to sound
Casual gives you aku, kamu, gak, udah, gimana, which is how you would talk to your partner and her friends.
Polite gives you saya, Anda, tidak, sudah. Either way both count as correct when you answer, this only decides
which version the app writes back at you.
what actually happened{Math.round((data.cal.hit / data.cal.n) * 100)}%
Measured over {data.cal.n} reviews. If the second number sits well below the first, the default parameters are too optimistic
for you and the target above should come up. Well above, and you are reviewing more often than you need to.
Higher means cards come back sooner and you forget less, at the cost of more reviews. Going from 90 to 95 roughly doubles the
workload for a few points of recall, so 85 to 90 is where most people sit.
What is running under this
FSRS-6, the scheduler Anki ships by default, with its published parameters. Every item carries a stability and a difficulty,
and the next review lands when predicted recall drops to the target above. On top of that:
grades are measured from what you type and how long you took, so there is no self-rating to fool.
A new item inherits difficulty from cards sharing its words instead of starting blind.
Every card is tagged with the grammar it uses, and the sentence forge aims at whichever tag you miss most.
A new item stays on short intervals until you have recalled it correctly on three separate days, which is worth
far more than three correct answers inside one session. First contact with a card is a guess, not a presentation,
because guessing wrong and then seeing the answer beats simply being shown it.
And a missed item returns later in the same session rather than immediately.
The mix leans towards production: English to Indonesian first, gap-filling inside your own sentences second,
Indonesian to English last and only once the other direction holds. Producing a word is harder than recognising
it, and it carries over to recognition, while the reverse barely happens.
);
}
function Backup({ data, vocab, persist }) {
const [paste, setPaste] = useState("");
const [msg, setMsg] = useState("");
const [copyMsg, setCopyMsg] = useState("");
const payload = useMemo(() => JSON.stringify({ v: 1, when: Date.now(), vocab, data }), [data, vocab]);
// Manual tap-select-all-copy on a long single-line blob is unreliable on
// phone browsers (selection and the copy gesture can grab less than the
// whole field, silently). The Clipboard API copies the exact string in
// one call, no selection involved, so it is the primary path here; the
// textarea and its onFocus select() stay as a fallback for browsers
// without clipboard permission.
const copyPayload = async () => {
setCopyMsg("");
try {
if (!navigator.clipboard || !navigator.clipboard.writeText) throw new Error();
await navigator.clipboard.writeText(payload);
setCopyMsg("Copied.");
} catch (e) {
setCopyMsg("Could not copy automatically. Tap into the box, select all, then copy by hand.");
}
};
const pasteFromClipboard = async () => {
setMsg("");
try {
if (!navigator.clipboard || !navigator.clipboard.readText) throw new Error();
const t = await navigator.clipboard.readText();
if (t) setPaste(t);
} catch (e) {
setMsg("Could not read the clipboard automatically. Paste into the box by hand.");
}
};
const restore = () => {
setMsg("");
try {
// defensive: strip anything a phone keyboard or copy step left
// outside the braces, same tolerant read a JSON parser downstream would do
let raw = paste.trim();
const start = raw.indexOf("{");
const end = raw.lastIndexOf("}");
if (start >= 0 && end >= start) raw = raw.slice(start, end + 1);
const inc = JSON.parse(raw);
const incData = inc.data || inc;
if (!incData || !incData.mem) throw new Error();
const merged = mergeState(data, incData);
persist(merged);
const gained = Object.keys(merged.mem).length - Object.keys(data.mem || {}).length;
setMsg(`Restored. ${Object.keys(merged.mem).length} memories now${gained > 0 ? `, ${gained} came from the backup` : ", nothing was lost"}.`);
setPaste("");
} catch (e) { setMsg("That does not look like a backup. Paste the whole block, from the first brace to the last."); }
};
return (
Your progress as text
Progress belongs to this published app. Before you switch to a new version, tap Copy, then open the new one and
tap Paste. Restoring merges, it never throws away newer progress. Copy and Paste beat selecting the text by
hand, especially on a phone.