\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","deleted","label",[179,160],"ui","permalink","https://www.val.town/x/c15r/microgpt/code/ui/app.ts","extension","actionData","errors"]
</article></body></html>