\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",[],[271,278],[271],{"_108":286,"_99":287,"_164":288,"_166":-5,"_167":149,"_168":289,"_170":171,"_110":290,"_104":33,"_173":291,"_175":292,"_176":22,"_177":-5,"_178":293,"_102":294},"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",[],[287],{"_108":296,"_99":297,"_164":298,"_166":-5,"_167":149,"_168":299,"_170":22,"_110":300,"_104":229,"_173":301,"_175":302,"_176":22,"_177":-5,"_178":303,"_102":304},"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",[],[297],"files",[161,180,191,198,208,215,225,232,241,250,259,269,276,285,295],"counts",{"_309":33,"_310":169,"_311":33,"_312":313,"_316":317},"pulls","branches","forks","envVars",{"_314":33,"_315":33},"count","emptyCount","connections",{"_314":33,"_318":33},"unfilledCount","contents",[],{"_108":199,"_99":200,"_164":201,"_166":194,"_167":149,"_168":202,"_170":171,"_110":322,"_104":33,"_173":186,"_175":204,"_176":22,"_177":-5,"_102":323},["D",1774396262971],[193,200],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_97":98,"_99":100,"_101":45,"_104":105,"_102":103,"_106":332,"_159":337,"_305":398,"_291":399,"_319":402,"_403":-5,"_404":-5,"_405":-5,"_406":-5,"_407":408,"_312":-5},{"_108":109,"_99":100,"_110":333,"_112":-5,"_113":22,"_114":115,"_116":117,"_118":-5,"_14":119,"_120":-5,"_121":22,"_122":-5,"_123":-5,"_124":33,"_16":125,"_126":-5,"_127":-5,"_128":-5,"_129":130,"_131":130,"_132":133,"_134":133,"_135":133,"_136":130,"_137":130,"_23":334,"_141":335,"_146":336,"_158":22},["D",1774395967725],{"_97":98,"_139":140},{"_97":98,"_143":140,"_14":119,"_144":145},{"_104":148,"_99":45,"_108":149,"_150":109,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":-5,"_156":100,"_157":98},[338,346,354,362,382,390,394],{"_108":162,"_99":163,"_164":165,"_166":-5,"_167":149,"_168":169,"_170":171,"_110":339,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":340,"_102":345},["D",1774395979606],[341],{"_108":181,"_99":182,"_164":183,"_166":165,"_167":149,"_168":184,"_170":22,"_110":342,"_104":33,"_173":186,"_175":187,"_176":22,"_177":-5,"_178":343,"_102":344},["D",1774396207706],[],[163,182],[163],{"_108":192,"_99":193,"_164":194,"_166":-5,"_167":149,"_168":195,"_170":171,"_110":347,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":348,"_102":353},["D",1774396030221],[349],{"_108":199,"_99":200,"_164":201,"_166":194,"_167":149,"_168":202,"_170":171,"_110":350,"_104":33,"_173":186,"_175":204,"_176":22,"_177":-5,"_178":351,"_102":352},["D",1774396262971],[],[193,200],[193],{"_108":209,"_99":210,"_164":211,"_166":-5,"_167":149,"_168":212,"_170":171,"_110":355,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":356,"_102":361},["D",1774395976131],[357],{"_108":216,"_99":217,"_164":218,"_166":211,"_167":149,"_168":219,"_170":171,"_110":358,"_104":33,"_173":186,"_175":221,"_176":22,"_177":-5,"_178":359,"_102":360},["D",1774396179991],[],[210,217],[210],{"_108":226,"_99":227,"_164":228,"_166":-5,"_167":149,"_168":229,"_170":171,"_110":363,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":364,"_102":381},["D",1774395971862],[365,369,373,377],{"_108":233,"_99":234,"_164":235,"_166":228,"_167":149,"_168":236,"_170":22,"_110":366,"_104":33,"_173":186,"_175":238,"_176":22,"_177":-5,"_178":367,"_102":368},["D",1774396134255],[],[227,234],{"_108":242,"_99":243,"_164":244,"_166":228,"_167":149,"_168":245,"_170":22,"_110":370,"_104":33,"_173":186,"_175":247,"_176":22,"_177":-5,"_178":371,"_102":372},["D",1774396073750],[],[227,243],{"_108":251,"_99":252,"_164":253,"_166":228,"_167":149,"_168":254,"_170":22,"_110":374,"_104":33,"_173":186,"_175":256,"_176":22,"_177":-5,"_178":375,"_102":376},["D",1774396104932],[],[227,252],{"_108":260,"_99":261,"_164":262,"_166":228,"_167":149,"_168":263,"_170":22,"_110":378,"_104":33,"_173":186,"_175":265,"_176":22,"_177":-5,"_178":379,"_102":380},["D",1774396151301],[],[227,261],[227],{"_108":270,"_99":271,"_164":272,"_166":-5,"_167":149,"_168":273,"_170":171,"_110":383,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":384,"_102":389},["D",1774396033959],[385],{"_108":277,"_99":278,"_164":279,"_166":272,"_167":149,"_168":105,"_170":22,"_110":386,"_104":229,"_173":186,"_175":281,"_176":22,"_177":-5,"_178":387,"_102":388},["D",1774396966498],[],[271,278],[271],{"_108":286,"_99":287,"_164":288,"_166":-5,"_167":149,"_168":289,"_170":171,"_110":391,"_104":33,"_173":291,"_175":292,"_176":22,"_177":-5,"_178":392,"_102":393},["D",1774396288191],[],[287],{"_108":296,"_99":297,"_164":298,"_166":-5,"_167":149,"_168":299,"_170":22,"_110":395,"_104":229,"_173":301,"_175":302,"_176":22,"_177":-5,"_178":396,"_102":397},["D",1774396809922],[],[297],[338,341,346,349,354,357,362,365,369,373,377,382,385,390,394],{"_108":199,"_99":200,"_164":201,"_166":194,"_167":149,"_168":202,"_170":171,"_110":400,"_104":33,"_173":186,"_175":204,"_176":22,"_177":-5,"_102":401},["D",1774396262971],[193,200],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]
</article></body></html>