\n ${vis.map((h: any, i: number) => {\n const s = Math.min(h.loss / 5.5, 1);\n const bg = s > .7 ? \"rgba(239,68,68,\" + (s * .3) + \")\" : s > .3 ? \"rgba(245,158,11,\" + (s * .3) + \")\" : \"rgba(74,222,128,\" + (0.15 + 0.2 * (1 - s)) + \")\";\n const bdr = h.skipped ? \"1px solid rgba(100,100,255,.3)\" : h.replayed ? \"1px solid rgba(200,130,250,.4)\" : \"none\";\n return html` .7 ? \"#fca5a5\" : s > .3 ? \"#fcd34d\" : \"#bbf7d0\", cursor: \"default\" }}>${tokStr(h.targetId)}`;\n })}\n

`;\n}\n\nfunction Toggle({ label, checked, onChange, color = \"#4ade80\", hint }: any) {\n return html`\n

\n ${label}\n ${hint && html`${hint}`}\n `;\n}\n\nfunction Section({ title, children, defaultOpen = false }: any) {\n const [open, setOpen] = useState(defaultOpen);\n return html`

setOpen(!open)} style=${{ cursor: \"pointer\", display: \"flex\", alignItems: \"center\", gap: 5, fontSize: 9, color: \"#555\", letterSpacing: \".08em\", textTransform: \"uppercase\", userSelect: \"none\" }}>\n \\u25B8\n ${title}\n

\n ${open && html`

${children}

`}\n

`;\n}\n\nfunction TopKBars({ items, targetId }: any) {\n if (!items) return null;\n const mx = items[0]?.p || 1;\n return html`

\n ${items.map(({ id, p }: any) => html`\n

${tokStr(id)}

${(p * 100).toFixed(1)}%

`)}\n

`;\n}\n\nfunction InferencePanel({ modelRef }: any) {\n const [text, setText] = useState(\"\");\n const [results, setResults] = useState(null);\n const run = () => {\n const p = modelRef.current;\n if (!p || !text) return;\n const bytes = new TextEncoder().encode(text);\n const ctx = [BOS, ...Array.from(bytes)];\n const perChar: any[] = []; let totalBits = 0;\n for (let i = 1; i < ctx.length; i++) {\n const w = ctx.slice(Math.max(0, i - CTX + 1), i + 1).slice(0, -1);\n if (!w.length) w.push(BOS);\n const cache = forward(p, w);\n const t = ctx[i];\n const loss = -Math.log(Math.max(cache.probs[t], 1e-10)) / Math.LN2;\n totalBits += loss;\n perChar.push({ id: t, loss, pCorrect: cache.probs[t], topk: topK(cache.probs) });\n }\n const ghostCtx = [...ctx]; let ghost = \"\";\n for (let i = 0; i < 40; i++) {\n const w = ghostCtx.slice(-CTX);\n const cache = forward(p, w);\n let best = 0; for (let j = 1; j < VS; j++) if (cache.probs[j] > cache.probs[best]) best = j;\n if (best === BOS) break; ghost += tokStr(best); ghostCtx.push(best);\n }\n setResults({ perChar, totalBits, avgBPB: totalBits / Math.max(1, perChar.length), ghost });\n };\n return html`

inference \\u00B7 no weight updates

setText(e.target.value)} onKeyDown=${(e: any) => { if (e.key === \"Enter\" && !e.shiftKey) { e.preventDefault(); run(); } }}\n        placeholder=\"type to probe\\u2026\" style=${{ flex: 1, height: 40, background: \"#0a0a12\", border: \"1px solid #1a1a2e\", color: \"#c9d1d9\", padding: 6, borderRadius: 4, fontSize: 10, resize: \"vertical\", outline: \"none\" }}/>\n      <button class=\"btn\" onClick=${run} disabled=${!text} style=${{ color: text ? \"#63b3ed\" : \"#333\" }}>predict</button>\n    </div>\n    ${results && html`<div>\n      <div style=${{ fontSize: 9, color: \"#888\", marginBottom: 4 }}>${results.perChar.length}B \\u00B7 <span style=${{ color: \"#f59e0b\", fontWeight: 600 }}>${results.avgBPB.toFixed(2)}</span> bpb</div>\n      <div style=${{ fontSize: 12, lineHeight: 1.7, wordBreak: \"break-all\", marginBottom: 6 }}>\n        ${results.perChar.map((ch: any, i: number) => {\n          const s = Math.min(ch.loss / 5.5, 1);\n          const bg = s > .7 ? \"rgba(239,68,68,\" + (s * .3) + \")\" : s > .3 ? \"rgba(245,158,11,\" + (s * .3) + \")\" : \"rgba(74,222,128,\" + (0.15 + 0.2 * (1 - s)) + \")\";\n          return html`<span key=${i} title=${ch.loss.toFixed(2) + \"b\"} style=${{ background: bg, color: s > .7 ? \"#fca5a5\" : s > .3 ? \"#fcd34d\" : \"#bbf7d0\" }}>${tokStr(ch.id)}</span>`;\n        })}\n      </div>\n      ${results.ghost && html`<div><span class=\"sm up\" style=${{ marginRight: 4 }}>completion\\u2192</span><span style=${{ fontSize: 11, color: \"#2a2a3e\", fontStyle: \"italic\" }}>${results.ghost}</span></div>`}\n    </div>`}\n  </div>`;\n}\n\n// ═══════════════════════════════════════════════════════════════════\n// MAIN APP\n// ═══════════════════════════════════════════════════════════════════\n\nfunction App() {\n  const modelRef = useRef<any>(null);\n  const gradRef = useRef<any>(null);\n  const ctxRef = useRef([BOS]);\n  const histRef = useRef<any[]>([]);\n  const stepRef = useRef(0);\n  const byteRef = useRef(0);\n  const cumBitsRef = useRef(0);\n  const epochRef = useRef(0);\n  const timerRef = useRef<any>(null);\n  const replayRef = useRef(new ReplayBuffer(64));\n  const alrStateRef = useRef(createAdaptiveLRState());\n  const statsRef = useRef(createStats());\n\n  const [phases, setPhases] = useState(createDefaultPhases);\n  const [customText, setCustomText] = useState(\"\");\n  const [showSyllabus, setShowSyllabus] = useState(false);\n  const corpus = useMemo(() => buildCorpus(phases), [phases]);\n  const [, tick] = useState(0);\n  const [running, setRunning] = useState(false);\n  const [speed, setSpeed] = useState(80);\n  const [lr, setLr] = useState(.005);\n  const [chunkK, setChunkK] = useState(1);\n  const [loop, setLoop] = useState(true);\n  const [hoverStep, setHoverStep] = useState<number | null>(null);\n  const [mode, setMode] = useState(\"train\");\n  const [selBP, setSelBP] = useState(false);\n  const [selTau, setSelTau] = useState(3.0);\n  const [replay, setReplay] = useState(false);\n  const [replayK, setReplayK] = useState(2);\n  const [aLR, setALR] = useState(false);\n  const [gClip, setGClip] = useState(false);\n  const [clipN, setClipN] = useState(1.0);\n\n  useEffect(() => {\n    modelRef.current = createModel();\n    gradRef.current = createGrads(modelRef.current);\n  }, []);\n  useEffect(() => { const t = setTimeout(() => setRunning(true), 500); return () => clearTimeout(t); }, []);\n\n  const process = useCallback((count: number) => {\n    const p = modelRef.current, g = gradRef.current;\n    if (!p || !g || corpus.total === 0) return;\n    const ctx = ctxRef.current, rbuf = replayRef.current, st = statsRef.current;\n    const alrS = alrStateRef.current;\n    let processed = 0;\n    while (processed < count) {\n      if (byteRef.current >= corpus.total) {\n        if (loop) { byteRef.current = 0; epochRef.current++; } else { setRunning(false); return; }\n      }\n      const targetId = corpus.bytes[byteRef.current];\n      const phaseIdx = getPhaseAt(corpus.boundaries, byteRef.current);\n      const tokens = ctx.slice(-CTX);\n      const cache = forward(p, tokens);\n      const predicted = sampleFrom(cache.probs);\n      const lossNats = -Math.log(Math.max(cache.probs[targetId], 1e-10));\n      const lossBits = lossNats / Math.LN2;\n      const entropy = -cache.probs.reduce((s: number, pr: number) => s + (pr > 1e-10 ? pr * Math.log2(pr) : 0), 0);\n\n      stepRef.current++; cumBitsRef.current += lossBits;\n\n      const effLR = adaptLR(lr, lossBits, alrS, { enabled: aLR, slowAlpha: .005, fastAlpha: .05, boostRatio: 1.5, boostFactor: 3 });\n      if (aLR && effLR > lr) st.lrBoosts++;\n\n      let skipped = false, replayed = false;\n      if (stepRef.current % chunkK === 0) {\n        if (selBP && !shouldUpdate(lossBits, { enabled: true, threshold: selTau })) {\n          skipped = true; st.skips++;\n        } else {\n          backward(p, g, cache, targetId); st.updates++;\n          if (replay && rbuf.size > 0) {\n            const samples = rbuf.samplePrioritised(replayK);\n            for (const s of samples) { const rc = forward(p, s.window); backward(p, g, rc, s.target); }\n            if (samples.length > 0) { replayed = true; st.replays++; }\n          }\n          if (gClip) { const n = clipGrads(g, clipN); if (n > clipN) st.clips++; }\n          sgdStep(p, g, effLR);\n        }\n      }\n      if (replay) rbuf.add(tokens, targetId, lossBits);\n\n      const last = processed === count - 1;\n      histRef.current.push({\n        step: stepRef.current, targetId, predicted, loss: lossBits,\n        pCorrect: cache.probs[targetId], entropy, phase: phaseIdx,\n        skipped, replayed,\n        topk: last ? topK(cache.probs) : null,\n        attn: last ? cache.last_attn : null,\n      });\n\n      ctx.push(targetId); if (ctx.length > CTX) ctx.splice(0, ctx.length - CTX);\n      byteRef.current++; processed++;\n    }\n  }, [lr, chunkK, corpus, loop, selBP, selTau, replay, replayK, aLR, gClip, clipN]);\n\n  useEffect(() => {\n    if (timerRef.current) clearInterval(timerRef.current);\n    if (!running || mode !== \"train\") return;\n    timerRef.current = setInterval(() => { process(Math.max(1, Math.floor(speed / 4))); tick((n: number) => n + 1); }, 50);\n    return () => { if (timerRef.current) clearInterval(timerRef.current); };\n  }, [running, speed, process, mode]);\n\n  const reset = useCallback(() => {\n    setRunning(false);\n    modelRef.current = createModel(); gradRef.current = createGrads(modelRef.current);\n    ctxRef.current = [BOS]; histRef.current = []; stepRef.current = 0;\n    byteRef.current = 0; cumBitsRef.current = 0; epochRef.current = 0;\n    replayRef.current = new ReplayBuffer(64);\n    alrStateRef.current = createAdaptiveLRState();\n    statsRef.current = createStats();\n    setHoverStep(null); tick((n: number) => n + 1);\n  }, []);\n\n  const hist = histRef.current;\n  const step = stepRef.current;\n  const epoch = epochRef.current;\n  const cumBPB = step > 0 ? cumBitsRef.current / step : 0;\n  const recentBPB = hist.length > 50 ? hist.slice(-100).reduce((s: number, h: any) => s + h.loss, 0) / Math.min(100, hist.length) : cumBPB;\n  const currentPhase = step > 0 ? getPhaseAt(corpus.boundaries, Math.max(0, byteRef.current - 1)) : 0;\n  const posInEpoch = corpus.total > 0 ? ((byteRef.current / corpus.total) * 100).toFixed(0) : \"0\";\n  const paramCount = useMemo(() => modelRef.current ? countParams(modelRef.current) : 0, []);\n  const streamStart = hoverStep !== null ? Math.max(0, hoverStep - 80) : Math.max(0, hist.length - 160);\n  const lastFull = hist.length > 0 ? hist[hist.length - 1] : null;\n  const st = statsRef.current;\n  const [cw, setCw] = useState(600);\n  const containerRef = useRef<any>(null);\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n    const ro = new ResizeObserver((e: any) => { for (const x of e) setCw(x.contentRect.width); });\n    ro.observe(el); return () => ro.disconnect();\n  }, []);\n\n  return html`<div ref=${containerRef} style=${{ minHeight: \"100vh\" }}>\n    \n    <div class=\"pad bdr row\" style=${{ justifyContent: \"space-between\" }}>\n      <div class=\"row\">\n        <h1 style=${{ fontSize: 16, fontWeight: 600, letterSpacing: \"-.02em\", fontFamily: \"'Newsreader',Georgia,serif\" }}>\\u00B5GPT</h1>\n        <span class=\"sm up\">${paramCount.toLocaleString()} params</span>\n        ${running && mode === \"train\" && html`<span style=${{ fontSize: 8, color: \"#f59e0b\", animation: \"pulse 1.5s ease infinite\" }}>\\u25CF</span>`}\n      </div>\n      <div class=\"row\" style=${{ gap: 10 }}>\n        <div><span class=\"sm\">EPOCH </span><span style=${{ fontSize: 13, fontWeight: 600 }}>${epoch}</span><span class=\"sm\"> \\u00B7 ${posInEpoch}%</span></div>\n        <div><span class=\"sm\">STEP </span><span style=${{ fontSize: 13, fontWeight: 600 }}>${step.toLocaleString()}</span></div>\n        <div><span class=\"sm\">BPB </span><span style=${{ fontSize: 13, fontWeight: 600, color: recentBPB > 5 ? \"#fca5a5\" : recentBPB > 3 ? \"#fcd34d\" : \"#4ade80\" }}>${recentBPB.toFixed(2)}</span></div>\n      </div>\n    </div>\n\n    \n    <div class=\"pad bdr\" style=${{ paddingTop: 6, paddingBottom: 2 }}>\n      <div class=\"row\" style=${{ justifyContent: \"space-between\", marginBottom: 2 }}>\n        <span class=\"sm up\">compression curve</span>\n        <div class=\"row\" style=${{ gap: 6 }}>${corpus.boundaries.map((b: any, i: number) => html`<div key=${i} class=\"row\" style=${{ gap: 2, opacity: currentPhase === i ? 1 : .3, transition: \"opacity .3s\" }}><div style=${{ width: 5, height: 5, borderRadius: \"50%\", background: b.color }}/><span style=${{ fontSize: 7, color: b.color }}>${b.name}</span></div>`)}</div>\n      </div>\n      <${LossCurve} history=${hist} boundaries=${corpus.boundaries} width=${Math.max(300, cw - 24)} height=${140} hoverStep=${hoverStep} onHover=${setHoverStep} totalCorpus=${corpus.total} epoch=${epoch}/>\n    </div>\n\n    \n    <div class=\"pad bdr row\" style=${{ paddingTop: 5, paddingBottom: 5 }}>\n      <div style=${{ display: \"flex\", border: \"1px solid #1e1e30\", borderRadius: 4, overflow: \"hidden\" }}>\n        ${[\"train\", \"infer\"].map((m: string) => html`<button key=${m} onClick=${() => { setMode(m); if (m === \"infer\") setRunning(false); }} style=${{ background: mode === m ? \"#1e1e30\" : \"transparent\", border: \"none\", color: mode === m ? \"#e2e8f0\" : \"#555\", padding: \"2px 8px\", fontSize: 8, textTransform: \"uppercase\" }}>${m}</button>`)}\n      </div>\n      ${mode === \"train\" && html`<${Fragment}>\n        <button class=\"btn\" onClick=${() => setRunning(!running)} style=${{ color: running ? \"#fcd34d\" : \"#4ade80\" }}>${running ? \"\\u23F8\" : \"\\u25B6\"}</button>\n        <button class=\"btn\" onClick=${reset} style=${{ color: \"#777\" }}>\\u21BA</button>\n        <label style=${{ display: \"flex\", alignItems: \"center\", gap: 2, fontSize: 7, color: \"#555\", cursor: \"pointer\" }}><input type=\"checkbox\" checked=${loop} onChange=${(e: any) => setLoop(e.target.checked)} style=${{ accentColor: \"#4ade80\", width: 10, height: 10 }}/>loop</label>\n        <div class=\"row\" style=${{ gap: 2 }}><span class=\"sm\">SPD</span><input type=\"range\" min=\"4\" max=\"600\" value=${speed} onInput=${(e: any) => setSpeed(+e.target.value)} style=${{ width: 50 }}/></div>\n      </${Fragment}>`}\n      <div class=\"row\" style=${{ gap: 2 }}><span class=\"sm\">LR</span><input type=\"range\" min=\".001\" max=\".03\" step=\".001\" value=${lr} onInput=${(e: any) => setLr(+e.target.value)} style=${{ width: 40 }}/><span class=\"sm\">${lr.toFixed(3)}</span></div>\n      <div class=\"row\" style=${{ gap: 2 }}><span class=\"sm\">K</span><select value=${chunkK} onChange=${(e: any) => setChunkK(+e.target.value)} style=${{ background: \"#141420\", border: \"1px solid #1e1e30\", color: \"#888\", padding: \"0 2px\", borderRadius: 3, fontSize: 8 }}>${[1, 2, 4, 8, 16].map((k: number) => html`<option key=${k} value=${k}>${k}</option>`)}</select></div>\n      <button class=\"btn\" onClick=${() => setShowSyllabus(!showSyllabus)} style=${{ color: showSyllabus ? \"#e2e8f0\" : \"#555\", background: showSyllabus ? \"#1e1e30\" : \"#141420\", marginLeft: \"auto\", fontSize: 7 }}>syllabus</button>\n    </div>\n\n    \n    <div class=\"pad bdr row\" style=${{ background: \"#0b0b12\", gap: 12 }}>\n      <span class=\"sm up\" style=${{ letterSpacing: \".1em\" }}>mechanisms</span>\n      <${Toggle} label=\"sel-backprop\" checked=${selBP} onChange=${() => setSelBP(!selBP)} color=\"#63b3ed\" hint=${selBP ? \"\\u03C4=\" + selTau.toFixed(1) + \"b\" : null}/>\n      ${selBP && html`<input type=\"range\" min=\"1\" max=\"6\" step=\".5\" value=${selTau} onInput=${(e: any) => setSelTau(+e.target.value)} style=${{ width: 40 }}/>`}\n      <${Toggle} label=\"replay\" checked=${replay} onChange=${() => setReplay(!replay)} color=\"#c084fc\" hint=${replay ? replayRef.current.size + \"/64\" : null}/>\n      <${Toggle} label=\"adapt-lr\" checked=${aLR} onChange=${() => setALR(!aLR)} color=\"#fbbf24\"/>\n      <${Toggle} label=\"grad-clip\" checked=${gClip} onChange=${() => setGClip(!gClip)} color=\"#f472b6\"/>\n      ${gClip && html`<input type=\"range\" min=\".1\" max=\"5\" step=\".1\" value=${clipN} onInput=${(e: any) => setClipN(+e.target.value)} style=${{ width: 30 }}/>`}\n    </div>\n    ${(selBP || replay || aLR || gClip) && html`<div class=\"pad bdr\" style=${{ paddingTop: 3, paddingBottom: 3, fontSize: 8, color: \"#444\", display: \"flex\", gap: 12 }}>\n      ${selBP && html`<span>updates: <span style=${{ color: \"#63b3ed\" }}>${st.updates}</span> \\u00B7 skip: <span style=${{ color: \"#555\" }}>${st.skips}</span></span>`}\n      ${replay && html`<span>replay: <span style=${{ color: \"#c084fc\" }}>${st.replays}</span> \\u00B7 buf: ${replayRef.current.size}/64</span>`}\n      ${aLR && html`<span>lr-boost: <span style=${{ color: \"#fbbf24\" }}>${st.lrBoosts}</span></span>`}\n      ${gClip && html`<span>clips: <span style=${{ color: \"#f472b6\" }}>${st.clips}</span></span>`}\n    </div>`}\n\n    \n    ${showSyllabus && html`<div class=\"pad bdr\" style=${{ background: \"#0c0c14\" }}>\n      <div class=\"sm\" style=${{ marginBottom: 4 }}>toggle phases \\u00B7 add custom \\u00B7 changes at epoch boundary or reset</div>\n      ${phases.map((ph: any) => html`<div key=${ph.id} class=\"row\" style=${{ marginBottom: 3 }}>\n        <label class=\"row\" style=${{ flex: 1, cursor: \"pointer\" }}>\n          <input type=\"checkbox\" checked=${ph.enabled} onChange=${() => setPhases((prev: any) => prev.map((p: any) => p.id === ph.id ? { ...p, enabled: !p.enabled } : p))} style=${{ accentColor: ph.color, width: 10, height: 10 }}/>\n          <div style=${{ width: 6, height: 6, borderRadius: \"50%\", background: ph.color, opacity: ph.enabled ? 1 : .3 }}/>\n          <span style=${{ fontSize: 9, color: ph.enabled ? \"#ccc\" : \"#555\" }}>${ph.name}</span>\n          <span class=\"sm\">${new TextEncoder().encode(ph.text).length}B</span>\n        </label>\n        ${!ph.builtIn && html`<button onClick=${() => setPhases((prev: any) => prev.filter((p: any) => p.id !== ph.id))} style=${{ background: \"none\", border: \"none\", color: \"#555\", fontSize: 9, cursor: \"pointer\" }}>\\u2715</button>`}\n      </div>`)}\n      <div class=\"row\" style=${{ marginTop: 4 }}>\n        <textarea value=${customText} onInput=${(e: any) => setCustomText(e.target.value)} placeholder=\"custom text\\u2026\" style=${{ flex: 1, height: 32, background: \"#09090b\", border: \"1px solid #1a1a2e\", color: \"#c9d1d9\", padding: 4, borderRadius: 4, fontSize: 9, resize: \"vertical\", outline: \"none\" }}/>\n        <button class=\"btn\" disabled=${!customText.trim()} onClick=${() => { if (!customText.trim()) return; setPhases((prev: any) => [...prev, { name: \"Custom \" + (prev.filter((p: any) => !p.builtIn).length + 1), color: [\"#f472b6\", \"#a78bfa\", \"#34d399\", \"#fbbf24\", \"#60a5fa\"][prev.length % 5], text: customText.trim(), enabled: true, id: Date.now(), builtIn: false }]); setCustomText(\"\"); }} style=${{ color: customText.trim() ? \"#4ade80\" : \"#333\" }}>+ add</button>\n      </div>\n    </div>`}\n\n    \n    <div style=${{ display: \"flex\", flexWrap: \"wrap\" }}>\n      <div style=${{ flex: \"1 1 400px\", padding: \"8px 16px\", borderRight: \"1px solid #141420\", minWidth: 260 }}>\n        ${mode === \"train\" ? html`<div>\n          <div class=\"sm up\" style=${{ marginBottom: 3 }}>observation stream ${hoverStep !== null ? html`<span style=${{ color: \"#555\" }}> \\u00B7 ~step ${streamStart}</span>` : \"\"}</div>\n          <div style=${{ maxHeight: 200, overflowY: \"auto\", padding: \"2px 0\" }}><${PredStream} history=${hist} start=${streamStart} count=${160}/></div>\n          ${hist.length === 0 && html`<div style=${{ fontSize: 9, color: \"#333\", fontStyle: \"italic\" }}>waiting\\u2026</div>`}\n        </div>` : html`<${InferencePanel} modelRef=${modelRef}/>`}\n      </div>\n      <div style=${{ flex: \"0 0 250px\", minWidth: 230, padding: \"8px 12px\", overflowY: \"auto\", maxHeight: 360 }}>\n        <${Section} title=\"last prediction\" defaultOpen=${true}>\n          ${lastFull ? html`<div>\n            <div style=${{ fontSize: 8, color: \"#777\", marginBottom: 2 }}>\n              <span style=${{ color: corpus.boundaries[lastFull.phase]?.color || \"#999\" }}>${corpus.boundaries[lastFull.phase]?.name}</span>\n              ${\" \\u00B7 \"}<span style=${{ color: \"#4ade80\", fontWeight: 600 }}>${tokStr(lastFull.targetId)}</span>\n              ${\" \\u00B7 \"}${lastFull.loss.toFixed(2)}b\n              ${lastFull.skipped ? html`<span style=${{ color: \"#63b3ed\" }}> [SKIP]</span>` : \"\"}\n              ${lastFull.replayed ? html`<span style=${{ color: \"#c084fc\" }}> [+REPLAY]</span>` : \"\"}\n            </div>\n            ${lastFull.topk && html`<${TopKBars} items=${lastFull.topk} targetId=${lastFull.targetId}/>`}\n          </div>` : html`<div class=\"sm\">\\u2014</div>`}\n        </${Section}>\n        <${Section} title=\"phase stats\">\n          ${corpus.boundaries.map((b: any, i: number) => {\n            const ph = hist.filter((h: any) => h.phase === i);\n            if (!ph.length) return null;\n            const avg = ph.reduce((s: number, h: any) => s + h.loss, 0) / ph.length;\n            const last50 = ph.slice(-50);\n            const al = last50.length > 10 ? last50.reduce((s: number, h: any) => s + h.loss, 0) / last50.length : null;\n            return html`<div key=${i} style=${{ marginBottom: 2 }}><div style=${{ fontSize: 8, color: b.color }}>${b.name}</div><div style=${{ fontSize: 7, color: \"#555\", paddingLeft: 6 }}>${ph.length}B \\u00B7 avg ${avg.toFixed(2)}b${al !== null ? \" \\u00B7 recent \" + al.toFixed(2) : \"\"}</div></div>`;\n          })}\n        </${Section}>\n        <${Section} title=\"architecture\">\n          <div style=${{ fontSize: 8, color: \"#666\", lineHeight: 1.6 }}>\n            <div>embed ${VS}\\u2192${D} \\u00B7 ctx ${CTX}</div>\n            <div>${N_LAYER}\\u00D7 rmsnorm\\u2192${N_HEAD}h attn (d_h=${HD}) +res</div>\n            <div>\\u2192rmsnorm\\u2192ffn ${D}\\u2192${MLP_HID}\\u2192${D} +res</div>\n            <div>\\u2192rmsnorm\\u2192lm_head [${D},${VS}]</div>\n          </div>\n        </${Section}>\n      </div>\n    </div>\n\n    <div class=\"pad\" style=${{ borderTop: \"1px solid #141420\", fontSize: 7, color: \"#1e1e30\", display: \"flex\", justifyContent: \"space-between\", flexWrap: \"wrap\" }}>\n      <span>prequential: predict\\u2192observe\\u2192update(K=${chunkK})</span>\n      <span>d=${D} \\u00B7 ${N_HEAD}h\\u00D7${HD}d \\u00B7 mlp=${MLP_HID} \\u00B7 ctx=${CTX} \\u00B7 v=${VS}</span>\n    </div>\n  </div>`;\n}\n\n// ═══════════════════════════════════════════════════════════════════\n// MOUNT\n// ═══════════════════════════════════════════════════════════════════\nrender(html`<${App}/>`, document.getElementById(\"root\")!);\n",[],[333,340],{"_107":348,"_99":349,"_163":350,"_165":334,"_166":148,"_167":147,"_169":170,"_109":351,"_104":33,"_172":186,"_174":352,"_175":22,"_176":-5,"_177":353,"_102":354},"6bb1227c-27e3-11f1-a583-42dde27851f2","preact.ts","6bb12330-27e3-11f1-a583-42dde27851f2",["D",1774399314293],"/**\n * ui/preact.ts — Shared preact + htm setup for all UI files\n *\n * Browser caches modules, so multiple files importing this\n * all get the same preact instance.\n */\nimport { h, render, Fragment } from \"https://esm.sh/preact@10.25.4\";\nimport { useState, useRef, useEffect, useCallback, useMemo } from \"https://esm.sh/preact@10.25.4/hooks\";\nimport htm from \"https://esm.sh/htm@3.1.1\";\n\nconst html = htm.bind(h);\n\nexport { h, render, Fragment, useState, useRef, useEffect, useCallback, useMemo, html };\n",[],[333,349],[333],{"_107":357,"_99":358,"_163":359,"_165":-5,"_166":148,"_167":360,"_169":170,"_109":361,"_104":33,"_172":362,"_174":363,"_175":22,"_176":-5,"_177":364,"_102":365},"5ffea7e4-27dc-11f1-b2a5-42dde27851f2","README.md","5ffea92e-27dc-11f1-b2a5-42dde27851f2",13,["D",1774396288191],"file","# μGPT — Online Learning Micro-GPT\n\nA faithful minimal decoder-only transformer trained online under the prequential protocol. Byte-level, from scratch, in front of you.\n\n## Architecture\n\n```\nmodel/\n  core.ts       Config, types, init, RMSNorm, sampling utilities\n  forward.ts    Full causal self-attention forward pass (all positions)\n  backward.ts   Full backward pass through causal decoder block\n  optim.ts      SGD + gradient clipping\n\nmechanisms/\n  index.ts      Toggleable research-backed mechanisms:\n                - Selective-Backprop (skip easy tokens)\n                - Experience Replay (reservoir + priority)\n                - Adaptive LR (dual-EMA shift detection)\n\ncorpus/\n  phases.ts     Training data phases, corpus builder, boundary tracking\n\nengine/\n  loop.ts       Prequential training loop coordinating model + mechanisms\n\nui/\n  app.ts        (TODO) Interactive frontend — currently inline in main.ts\n\nmain.ts         HTTP entry point serving the interactive page\n```\n\n## Model\n\nDecoder-only transformer. 1 layer, 4 heads × 4d, MLP 16→64→16, separate lm_head.\nPre-norm (RMSNorm), residual stream, ~7K parameters. Byte vocabulary (257 = 256 + BOS).\n\nThe forward pass computes hidden states for **all positions** with causal masking.\nThe backward pass propagates gradients through the **entire sequence** in the block.\nThis is what makes it a faithful GPT, not just \"attention LM.\"\n\n## Protocol\n\nPrequential: predict → observe → update. Loss is recorded **before** the update.\nEvery byte is both evaluation and curriculum. No train/test split.\n\n## Mechanisms\n\nFrom the online/continual learning literature:\n\n| Mechanism | Paper | What it does | Strict online? |\n|---|---|---|---|\n| Selective-Backprop | Jiang et al. 2019 | Skip updates when loss < τ | Yes |\n| Experience Replay | Reservoir sampling | Replay past windows weighted by loss | No |\n| Adaptive LR | Dynamic eval literature | Boost LR on distribution shift | Yes |\n| Gradient Clipping | Standard practice | Cap gradient norm for stability | Yes |\n\n## Next steps\n\n- [ ] TinyStories integration for capacity-aligned training data\n- [ ] Client-side ES module imports from val files (eliminate duplication)\n- [ ] Web worker for training loop (unblock UI thread)\n- [ ] kNN/continuous cache mechanism (non-parametric memory)\n- [ ] Multi-layer support with depth controls\n- [ ] Configurable model dimensions in UI\n",[],[358],{"_107":367,"_99":368,"_163":369,"_165":-5,"_166":148,"_167":370,"_169":170,"_109":371,"_104":282,"_172":372,"_174":373,"_175":22,"_176":-5,"_177":374,"_102":375},"96f9dd9e-27dd-11f1-832c-42dde27851f2","main.ts","d4913e8c-27dc-11f1-a47b-42dde27851f2",16,["D",1774396809922],"http","/**\n * main.ts — HTTP entry point\n *\n * Serves a thin HTML shell. All application logic lives in ui/app.ts,\n * loaded as an ES module via esm.town. Model, mechanisms, and corpus\n * are imported by ui/app.ts via relative paths that esm.town resolves.\n */\n\nexport default function(req: Request): Response {\n  const html = `<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>μGPT — Online Learning Transformer</title>\n<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n<link href=\"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Newsreader:ital,wght@0,300;0,400;0,600;1,300;1,400&display=swap\" rel=\"stylesheet\"/>\n<style>\n*{box-sizing:border-box;margin:0;padding:0}\nbody{background:#09090b;color:#e2e8f0;font-family:'JetBrains Mono','Fira Code','SF Mono',ui-monospace,monospace;font-size:12px}\n::selection{background:rgba(99,179,237,.3)}\n::-webkit-scrollbar{width:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#333;border-radius:4px}\ninput[type=range]{-webkit-appearance:none;height:3px;background:#1a1a2e;border-radius:2px;outline:none;vertical-align:middle}\ninput[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:10px;height:10px;background:#e2e8f0;border-radius:50%;cursor:pointer}\nbutton{font-family:inherit;cursor:pointer}\nselect,textarea{font-family:inherit}\n@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}\n.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}\n.bdr{border-bottom:1px solid #141420}\n.pad{padding:8px 16px}\n.sm{font-size:8px;color:#444}\n.up{text-transform:uppercase;letter-spacing:.08em}\n.btn{background:#141420;border:1px solid #1e1e30;border-radius:4px;padding:3px 10px;font-size:9px}\n.toggle{width:26px;height:14px;border-radius:7px;position:relative;transition:background .2s;border:1px solid #2a2a3e;display:inline-block;vertical-align:middle;cursor:pointer}\n.toggle .thumb{width:10px;height:10px;border-radius:5px;background:#e2e8f0;position:absolute;top:1px;transition:left .2s}\n</style>\n</head>\n<body>\n<div id=\"root\"></div>\n<script type=\"module\" src=\"https://esm.town/v/c15r/microgpt/ui/app.ts\"></script>\n</body>\n</html>`;\n\n  return new Response(html, {\n    headers: { \"content-type\": \"text/html; charset=utf-8\" },\n  });\n}\n",[],[368],"files",[160,179,190,199,208,217,226,236,243,252,262,268,278,285,294,303,312,321,331,338,347,356,366],"counts",{"_380":33,"_381":185,"_382":33,"_383":384,"_387":388},"pulls","branches","forks","envVars",{"_385":33,"_386":33},"count","emptyCount","connections",{"_385":33,"_389":33},"unfilledCount","contents",[],{"_107":200,"_99":201,"_163":202,"_165":164,"_166":148,"_167":203,"_169":170,"_109":393,"_104":185,"_172":186,"_174":205,"_175":22,"_176":-5,"_102":394},["D",1774399162941],[162,201],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.history_.$",{"_97":98,"_99":100,"_101":45,"_102":103,"_105":403,"_362":408,"_411":412,"_425":426,"_431":33,"_432":33,"_433":22},{"_107":108,"_99":100,"_109":404,"_111":-5,"_112":22,"_113":114,"_115":116,"_117":-5,"_14":118,"_119":-5,"_120":22,"_121":-5,"_122":-5,"_123":33,"_16":124,"_125":-5,"_126":-5,"_127":-5,"_128":129,"_130":129,"_131":132,"_133":132,"_134":132,"_135":129,"_136":129,"_23":405,"_140":406,"_145":407,"_157":22},["D",1774395967725],{"_97":98,"_138":139},{"_97":98,"_142":139,"_14":118,"_143":144},{"_104":147,"_99":45,"_107":148,"_149":108,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":100,"_156":98},{"_107":200,"_99":201,"_163":202,"_165":164,"_166":148,"_167":203,"_169":170,"_109":409,"_104":185,"_172":186,"_174":205,"_175":22,"_176":-5,"_102":410},["D",1774399162941],[162,201],"history",[413,415,420],{"_107":200,"_166":148,"_163":202,"_99":201,"_174":205,"_172":186,"_104":185,"_165":164,"_109":414,"_167":203,"_176":-5},["D",1774399162941],{"_107":416,"_166":148,"_163":202,"_99":201,"_174":417,"_172":186,"_104":282,"_165":164,"_109":418,"_167":419,"_176":-5},"96694cfc-27e2-11f1-bb54-42dde27851f2","/**\n * corpus/phases.ts — Corpus management with TinyStories-informed defaults\n */\nimport { SIMPLE_STORIES } from \"./simple-stories.ts\";\nimport { REPETITIVE } from \"./repetitive.ts\";\nimport { JAVASCRIPT } from \"./code.ts\";\n\nexport interface Phase { name: string; color: string; text: string; enabled: boolean; id: number; builtIn: boolean; }\nexport interface PhaseBoundary { start: number; end: number; name: string; color: string; }\nexport interface Corpus { bytes: number[]; boundaries: PhaseBoundary[]; total: number; }\n\nexport const DEFAULT_PHASES: Omit<Phase, \"enabled\" | \"id\" | \"builtIn\">[] = [\n  { name: \"Simple stories\", color: \"#4ade80\", text: SIMPLE_STORIES },\n  { name: \"JavaScript\", color: \"#f59e0b\", text: JAVASCRIPT },\n  { name: \"Repetitive\", color: \"#c084fc\", text: REPETITIVE },\n  { name: \"Stories II\", color: \"#38bdf8\", text: SIMPLE_STORIES },\n];\n\nexport function buildCorpus(phases: Phase[]): Corpus {\n  const active = phases.filter(ph => ph.enabled);\n  const bytes: number[] = [], boundaries: PhaseBoundary[] = [];\n  let offset = 0;\n  for (const phase of active) {\n    const encoded = new TextEncoder().encode(phase.text);\n    boundaries.push({ start: offset, end: offset + encoded.length, name: phase.name, color: phase.color });\n    for (const b of encoded) bytes.push(b);\n    offset += encoded.length;\n  }\n  return { bytes, boundaries, total: bytes.length };\n}\n\nexport function getPhaseAt(boundaries: PhaseBoundary[], pos: number): number {\n  for (let i = 0; i < boundaries.length; i++) if (pos >= boundaries[i].start && pos < boundaries[i].end) return i;\n  return boundaries.length - 1;\n}\n\nexport function createDefaultPhases(): Phase[] {\n  return DEFAULT_PHASES.map((ph, i) => ({ ...ph, enabled: true, id: i, builtIn: true }));\n}\n",["D",1774398956466],25,{"_107":421,"_166":148,"_163":202,"_99":201,"_174":422,"_172":186,"_104":33,"_165":164,"_109":423,"_167":424,"_176":-5},"30053c38-27dc-11f1-b87c-42dde27851f2","/**\n * corpus/phases.ts — Training corpus management\n *\n * Phases are named text segments with colors for visualization.\n * The corpus builder concatenates enabled phases into a byte stream\n * with boundary markers for phase-transition tracking.\n *\n * Currently uses hand-crafted samples. Future: TinyStories integration\n * for capacity-aligned training data (Eldan & Li, 2023).\n */\n\nexport interface Phase {\n  name: string;\n  color: string;\n  text: string;\n  enabled: boolean;\n  id: number;\n  builtIn: boolean;\n}\n\nexport interface PhaseBoundary {\n  start: number;\n  end: number;\n  name: string;\n  color: string;\n}\n\nexport interface Corpus {\n  bytes: number[];\n  boundaries: PhaseBoundary[];\n  total: number;\n}\n\nexport const DEFAULT_PHASES: Omit<Phase, \"enabled\" | \"id\" | \"builtIn\">[] = [\n  {\n    name: \"English prose\",\n    color: \"#4ade80\",\n    text: `The quick brown fox jumps over the lazy dog. A stitch in time saves nine. All that glitters is not gold. The pen is mightier than the sword. Actions speak louder than words. Fortune favours the bold. Every cloud has a silver lining. Birds of a feather flock together. When in Rome, do as the Romans do. A journey of a thousand miles begins with a single step. Still waters run deep. The early bird catches the worm. Too many cooks spoil the broth. Necessity is the mother of invention. Rome was not built in a day. Where there is a will there is a way. The grass is always greener on the other side. Honesty is the best policy in life and in love. Practice makes perfect and patience makes progress. Knowledge is power and power is responsibility. The best things in life are free. A friend in need is a friend indeed. Experience is the best teacher of all. Time and tide wait for no man.`,\n  },\n  {\n    name: \"JavaScript\",\n    color: \"#f59e0b\",\n    text: `function fibonacci(n) {\\n  if (n <= 1) return n;\\n  let a = 0, b = 1;\\n  for (let i = 2; i <= n; i++) {\\n    let temp = a + b;\\n    a = b; b = temp;\\n  }\\n  return b;\\n}\\nfunction isPrime(n) {\\n  if (n < 2) return false;\\n  for (let i = 2; i * i <= n; i++) {\\n    if (n % i === 0) return false;\\n  }\\n  return true;\\n}\\nfunction mergeSort(arr) {\\n  if (arr.length <= 1) return arr;\\n  const mid = Math.floor(arr.length / 2);\\n  return merge(mergeSort(arr.slice(0, mid)), mergeSort(arr.slice(mid)));\\n}\\nfunction merge(left, right) {\\n  const result = []; let i = 0, j = 0;\\n  while (i < left.length && j < right.length) {\\n    if (left[i] <= right[j]) result.push(left[i++]);\\n    else result.push(right[j++]);\\n  }\\n  return result.concat(left.slice(i)).concat(right.slice(j));\\n}\\nconsole.log(mergeSort([3, 1, 4, 1, 5, 9, 2, 6]));\\n`,\n  },\n  {\n    name: \"repetitive\",\n    color: \"#c084fc\",\n    text: \"the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. \",\n  },\n  {\n    name: \"Shakespeare\",\n    color: \"#fb7185\",\n    text: `To be, or not to be, that is the question: whether tis nobler in the mind to suffer the slings and arrows of outrageous fortune, or to take arms against a sea of troubles, and by opposing end them. To die, to sleep, no more, and by a sleep to say we end the heartache and the thousand natural shocks that flesh is heir to. Tis a consummation devoutly to be wished. To die, to sleep. To sleep, perchance to dream. Aye, there is the rub, for in that sleep of death what dreams may come when we have shuffled off this mortal coil must give us pause.`,\n  },\n  {\n    name: \"Prose II\",\n    color: \"#38bdf8\",\n    text: `The sun rose slowly over the distant hills and cast long shadows across the valley below. A gentle breeze stirred the leaves of the old oak trees that lined the road. The morning was quiet and still, broken only by the sound of birdsong and the distant murmur of the river. In the village square, the baker had already opened his shop and the warm smell of fresh bread drifted through the narrow streets. Children would soon be running to school, their laughter echoing off the stone walls. The old church bell rang eight times, marking the hour. Farmers were already in the fields, tending to their crops. It was a day like any other in this small and peaceful corner of the world.`,\n  },\n];\n\n/**\n * Build a byte-stream corpus from enabled phases.\n * Returns the bytes and boundary markers for phase-transition tracking.\n */\nexport function buildCorpus(phases: Phase[]): Corpus {\n  const active = phases.filter(ph => ph.enabled);\n  const bytes: number[] = [];\n  const boundaries: PhaseBoundary[] = [];\n  let offset = 0;\n\n  for (const phase of active) {\n    const encoded = new TextEncoder().encode(phase.text);\n    boundaries.push({\n      start: offset,\n      end: offset + encoded.length,\n      name: phase.name,\n      color: phase.color,\n    });\n    for (const b of encoded) bytes.push(b);\n    offset += encoded.length;\n  }\n\n  return { bytes, boundaries, total: bytes.length };\n}\n\n/**\n * Find which phase a given byte position falls in.\n */\nexport function getPhaseAt(boundaries: PhaseBoundary[], pos: number): number {\n  for (let i = 0; i < boundaries.length; i++) {\n    if (pos >= boundaries[i].start && pos < boundaries[i].end) return i;\n  }\n  return boundaries.length - 1;\n}\n\n/**\n * Create initial Phase array from defaults.\n */\nexport function createDefaultPhases(): Phase[] {\n  return DEFAULT_PHASES.map((ph, i) => ({\n    ...ph,\n    enabled: true,\n    id: i,\n    builtIn: true,\n  }));\n}\n",["D",1774396207706],11,"versions",[427,429,430],{"_362":413,"_428":415},"previous",{"_362":415,"_428":420},{"_362":420,"_428":-5},"versionNumber","page","hasNext","actionData","errors"]
</article></body></html>

c15r

microgpt

History for phases.ts