\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",[],[334,341],{"_108":349,"_99":350,"_164":351,"_166":335,"_167":149,"_168":105,"_170":22,"_110":352,"_104":33,"_173":187,"_175":353,"_176":22,"_177":-5,"_178":354,"_102":355},"e23f5822-282a-11f1-9c39-42dde27851f2","inference.ts","e23f58f4-282a-11f1-9c39-42dde27851f2",["D",1774430007464],"/**\n * ui/inference.ts — Inference panel (probe without weight updates)\n */\nimport { html, useState } from \"./preact.ts\";\nimport { VS, BOS, CTX, tokStr, topK } from \"../model/core.ts\";\nimport { forward } from \"../model/forward.ts\";\n\nexport function InferencePanel({ modelRef }: any) {\n  const [text, setText] = useState(\"\");\n  const [results, setResults] = useState<any>(null);\n\n  const run = () => {\n    const p = modelRef.current;\n    if (!p || !text) return;\n    const bytes = new TextEncoder().encode(text);\n    const ctxW = p.cfg.CTX;\n    const ctx = [BOS, ...Array.from(bytes)];\n    const perChar: any[] = [];\n    let totalBits = 0;\n    for (let i = 1; i < ctx.length; i++) {\n      const w = ctx.slice(Math.max(0, i - ctxW + 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    // Ghost completion\n    const ghostCtx = [...ctx];\n    let ghost = \"\";\n    for (let i = 0; i < 40; i++) {\n      const w = ghostCtx.slice(-ctxW);\n      const cache = forward(p, w);\n      let best = 0;\n      for (let j = 1; j < VS; j++) if (cache.probs[j] > cache.probs[best]) best = j;\n      if (best === BOS) break;\n      ghost += tokStr(best);\n      ghostCtx.push(best);\n    }\n    setResults({ perChar, totalBits, avgBPB: totalBits / Math.max(1, perChar.length), ghost });\n  };\n\n  return html`<div>\n    <div class=\"sm up\" style=${{ marginBottom: 4 }}>inference \\u00B7 no weight updates</div>\n    <div class=\"row\" style=${{ marginBottom: 6 }}>\n      <textarea value=${text}\n        onInput=${(e: any) => setText(e.target.value)}\n        onKeyDown=${(e: any) => { if (e.key === \"Enter\" && !e.shiftKey) { e.preventDefault(); run(); } }}\n        placeholder=\"type to probe\\u2026\"\n        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",[],[334,350],{"_108":357,"_99":358,"_164":359,"_166":335,"_167":149,"_168":360,"_170":171,"_110":361,"_104":33,"_173":187,"_175":362,"_176":22,"_177":-5,"_178":363,"_102":364},"ccd3c69e-282a-11f1-be27-42dde27851f2","loss-curve.ts","ccd3c770-282a-11f1-be27-42dde27851f2",41,["D",1774429971526],"/**\n * ui/loss-curve.ts — Compression curve with telescoping x-axis\n *\n * X-axis telescopes: recent data gets more pixels, old data compresses.\n * This keeps early epochs visible but gives most space to recent training.\n * Uses a sqrt transform: x_screen = sqrt(step/total) * width\n */\nimport { h } from \"./preact.ts\";\n\nexport function LossCurve(props: any) {\n  const { history, boundaries, width, height, hoverStep, onHover, totalCorpus, epoch } = props;\n  if (history.length < 2) {\n    return h(\"div\", {\n      style: { width, height, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: \"#333\", fontSize: 11 }\n    }, \"awaiting data\\u2026\");\n  }\n\n  const total = history.length;\n  const bs = Math.max(1, Math.floor(total / Math.min(total, 700)));\n  const pts: any[] = [];\n  for (let i = 0; i < total; i += bs) {\n    const end = Math.min(i + bs, total);\n    let sum = 0, cnt = 0;\n    for (let j = i; j < end; j++) { sum += history[j].loss; cnt++; }\n    pts.push({ step: i + Math.floor(cnt / 2), loss: sum / cnt, phase: history[i].phase });\n  }\n\n  // EMA smoothing\n  let ema = pts[0].loss;\n  const sm = pts.map((p: any) => { ema = .015 * p.loss + .985 * ema; return { ...p, smooth: ema }; });\n\n  const pad = { t: 8, b: 22, l: 34, r: 8 };\n  const pw = width - pad.l - pad.r;\n  const ph = height - pad.t - pad.b;\n\n  // Y axis\n  const yMax = Math.min(8, Math.max(...sm.map((p: any) => p.smooth)) * 1.15);\n  const yMin = Math.max(0, Math.min(...sm.map((p: any) => p.smooth)) * .8);\n  const yR = yMax - yMin || 1;\n  const yS = (v: number) => pad.t + (1 - (v - yMin) / yR) * ph;\n\n  // X axis — sqrt telescoping: recent gets more space\n  const xRaw = (s: number) => s / (total - 1 || 1); // 0..1\n  const xTele = (s: number) => Math.sqrt(xRaw(s));   // compressed old, expanded recent\n  const xS = (s: number) => pad.l + xTele(s) * pw;\n\n  // Phase bands\n  const bands: any[] = [];\n  if (boundaries.length > 0 && totalCorpus > 0) {\n    for (let e = 0; e <= epoch; e++) {\n      const off = e * totalCorpus;\n      for (const b of boundaries) {\n        const s = off + b.start, en = off + b.end;\n        if (s < total) bands.push({ x1: xS(s), x2: xS(Math.min(en, total)), color: b.color });\n      }\n    }\n  }\n\n  // Epoch dividers\n  const epochLines: number[] = [];\n  if (totalCorpus > 0) {\n    for (let e = 1; e <= epoch; e++) {\n      const pos = e * totalCorpus;\n      if (pos < total) epochLines.push(xS(pos));\n    }\n  }\n\n  // Smoothed line\n  const line = sm.map((p: any) =>\n    xS(p.step) + \",\" + yS(Math.max(yMin, Math.min(yMax, p.smooth)))\n  ).join(\" \");\n\n  // Y ticks\n  const yTicks: number[] = [];\n  const ySt = yR < 2 ? .5 : yR < 4 ? 1 : 2;\n  for (let v = Math.ceil(yMin / ySt) * ySt; v <= yMax; v += ySt) yTicks.push(v);\n\n  // X ticks — show step numbers at regular screen intervals\n  const xTicks: { x: number; label: string }[] = [];\n  const numXTicks = Math.min(6, Math.floor(pw / 60));\n  for (let i = 0; i <= numXTicks; i++) {\n    const screenFrac = i / numXTicks;\n    // Invert sqrt: step = screenFrac^2 * total\n    const stepNum = Math.round(screenFrac * screenFrac * (total - 1));\n    xTicks.push({ x: pad.l + screenFrac * pw, label: stepNum >= 1000 ? (stepNum / 1000).toFixed(1) + \"k\" : String(stepNum) });\n  }\n\n  const hx = hoverStep !== null ? xS(hoverStep) : null;\n  const last = sm[sm.length - 1];\n\n  const onMove = (e: any) => {\n    const r = e.currentTarget.getBoundingClientRect();\n    const mx = e.clientX - r.left;\n    // Invert: screenFrac = (mx - pad.l) / pw, step = screenFrac^2 * (total-1)\n    const screenFrac = Math.max(0, Math.min(1, (mx - pad.l) / pw));\n    const s = Math.round(screenFrac * screenFrac * (total - 1));\n    onHover(Math.max(0, Math.min(total - 1, s)));\n  };\n\n  // Build SVG children manually with h() to avoid template issues\n  const children: any[] = [];\n\n  // Phase bands\n  for (let i = 0; i < bands.length; i++) {\n    const b = bands[i];\n    children.push(h(\"rect\", { key: \"b\" + i, x: b.x1, y: pad.t, width: Math.max(0, b.x2 - b.x1), height: ph, fill: b.color, opacity: \".05\" }));\n  }\n\n  // Y grid + labels\n  for (const v of yTicks) {\n    children.push(h(\"line\", { key: \"yg\" + v, x1: pad.l, x2: width - pad.r, y1: yS(v), y2: yS(v), stroke: \"#141420\" }));\n    children.push(h(\"text\", { key: \"yl\" + v, x: pad.l - 3, y: yS(v) + 3, \"text-anchor\": \"end\", fill: \"#333\", \"font-size\": \"8\" }, v.toFixed(1)));\n  }\n\n  // X tick labels\n  for (const xt of xTicks) {\n    children.push(h(\"text\", { key: \"xl\" + xt.label, x: xt.x, y: pad.t + ph + 12, \"text-anchor\": \"middle\", fill: \"#333\", \"font-size\": \"7\" }, xt.label));\n  }\n\n  // Epoch dividers\n  for (let i = 0; i < epochLines.length; i++) {\n    children.push(h(\"line\", { key: \"ep\" + i, x1: epochLines[i], x2: epochLines[i], y1: pad.t, y2: pad.t + ph, stroke: \"#444\", \"stroke-dasharray\": \"3,3\", opacity: \".5\" }));\n  }\n\n  // Smoothed line\n  children.push(h(\"polyline\", { key: \"line\", points: line, fill: \"none\", stroke: \"#f59e0b\", \"stroke-width\": \"2\", \"stroke-linejoin\": \"round\", opacity: \".85\" }));\n\n  // Hover line\n  if (hx !== null) {\n    children.push(h(\"line\", { key: \"hover\", x1: hx, x2: hx, y1: pad.t, y2: pad.t + ph, stroke: \"#e2e8f0\", opacity: \".25\" }));\n  }\n\n  // Endpoint dot\n  children.push(h(\"circle\", {\n    key: \"dot\",\n    cx: xS(last.step),\n    cy: yS(Math.max(yMin, Math.min(yMax, last.smooth))),\n    r: \"3\", fill: \"#f59e0b\"\n  }));\n\n  return h(\"svg\", {\n    width, height,\n    style: \"display:block;cursor:crosshair\",\n    onMouseMove: onMove,\n    onMouseLeave: () => onHover(null),\n  }, ...children);\n}\n",[],[334,358],{"_108":366,"_99":367,"_164":368,"_166":335,"_167":149,"_168":369,"_170":171,"_110":370,"_104":33,"_173":187,"_175":371,"_176":22,"_177":-5,"_178":372,"_102":373},"6bb1227c-27e3-11f1-a583-42dde27851f2","preact.ts","6bb12330-27e3-11f1-a583-42dde27851f2",37,["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",[],[334,367],{"_108":375,"_99":376,"_164":377,"_166":335,"_167":149,"_168":378,"_170":171,"_110":379,"_104":33,"_173":187,"_175":380,"_176":22,"_177":-5,"_178":381,"_102":382},"d4b802d0-282a-11f1-9c39-42dde27851f2","pred-stream.ts","d4b80384-282a-11f1-9c39-42dde27851f2",42,["D",1774429984768],"/**\n * ui/pred-stream.ts — Observation stream display\n */\nimport { html } from \"./preact.ts\";\nimport { tokStr } from \"../model/core.ts\";\n\nexport function PredStream({ history, start, count }: any) {\n  const vis = history.slice(start, start + count);\n  if (!vis.length) return null;\n  return html`<div style=${{ fontFamily: \"'JetBrains Mono',monospace\", fontSize: 12, lineHeight: 1.7, wordBreak: \"break-all\" }}>\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) + \")\"\n        : s > .3 ? \"rgba(245,158,11,\" + (s * .3) + \")\"\n        : \"rgba(74,222,128,\" + (0.15 + 0.2 * (1 - s)) + \")\";\n      const bdr = h.skipped ? \"1px solid rgba(100,100,255,.3)\"\n        : h.replayed ? \"1px solid rgba(200,130,250,.4)\" : \"none\";\n      return html`<span key=${start + i}\n        title=${\"step \" + h.step + \" | \" + h.loss.toFixed(2) + \"b\" + (h.skipped ? \" [SKIP]\" : \"\") + (h.replayed ? \" [+REPLAY]\" : \"\")}\n        style=${{ background: bg, borderBottom: bdr, color: s > .7 ? \"#fca5a5\" : s > .3 ? \"#fcd34d\" : \"#bbf7d0\", cursor: \"default\" }}>${tokStr(h.targetId)}</span>`;\n    })}\n  </div>`;\n}\n",[],[334,376],{"_108":384,"_99":385,"_164":386,"_166":335,"_167":149,"_168":387,"_170":171,"_110":388,"_104":33,"_173":187,"_175":389,"_176":22,"_177":-5,"_178":390,"_102":391},"b7557ff6-282a-11f1-91e7-42dde27851f2","widgets.ts","b755810e-282a-11f1-91e7-42dde27851f2",40,["D",1774429935465],"/**\n * ui/widgets.ts — Small reusable UI components\n */\nimport { html, useState } from \"./preact.ts\";\nimport { tokStr } from \"../model/core.ts\";\n\nexport function Toggle({ label, checked, onChange, color = \"#4ade80\", hint }: any) {\n  return html`<label style=${{ display: \"flex\", alignItems: \"center\", gap: 5, cursor: \"pointer\", fontSize: 9, color: checked ? color : \"#444\" }}>\n    <div class=\"toggle\" style=${{ background: checked ? color : \"#1e1e30\" }} onClick=${onChange}>\n      <div class=\"thumb\" style=${{ left: checked ? \"14px\" : \"1px\" }}/>\n    </div>\n    <span>${label}</span>\n    ${hint && html`<span style=${{ fontSize: 7, color: \"#333\", fontStyle: \"italic\" }}>${hint}</span>`}\n  </label>`;\n}\n\nexport function Section({ title, children, defaultOpen = false }: any) {\n  const [open, setOpen] = useState(defaultOpen);\n  return html`<div style=${{ borderTop: \"1px solid #141420\", paddingTop: 6, marginTop: 6 }}>\n    <div onClick=${() => setOpen(!open)} style=${{ cursor: \"pointer\", display: \"flex\", alignItems: \"center\", gap: 5, fontSize: 9, color: \"#555\", letterSpacing: \".08em\", textTransform: \"uppercase\", userSelect: \"none\" }}>\n      <span style=${{ transform: open ? \"rotate(90deg)\" : \"none\", transition: \"transform .15s\", display: \"inline-block\", fontSize: 8 }}>\\u25B8</span>\n      ${title}\n    </div>\n    ${open && html`<div style=${{ marginTop: 6 }}>${children}</div>`}\n  </div>`;\n}\n\nexport function TopKBars({ items, targetId }: any) {\n  if (!items) return null;\n  const mx = items[0]?.p || 1;\n  return html`<div style=${{ display: \"flex\", flexDirection: \"column\", gap: 2 }}>\n    ${items.map(({ id, p }: any) => html`\n      <div key=${id} style=${{ display: \"flex\", alignItems: \"center\", gap: 4, height: 14 }}>\n        <div style=${{ width: 24, textAlign: \"right\", fontSize: 9, color: id === targetId ? \"#4ade80\" : \"#777\", fontWeight: id === targetId ? 700 : 400 }}>${tokStr(id)}</div>\n        <div style=${{ flex: 1, height: 8, background: \"#111\", borderRadius: 2, overflow: \"hidden\" }}>\n          <div style=${{ width: (p / mx * 100) + \"%\", height: \"100%\", background: id === targetId ? \"#4ade80\" : \"#3b82f6\", borderRadius: 2, opacity: id === targetId ? 1 : .4 }}/>\n        </div>\n        <div style=${{ width: 32, fontSize: 8, color: \"#555\", textAlign: \"right\" }}>${(p * 100).toFixed(1)}%</div>\n      </div>`)}\n  </div>`;\n}\n",[],[334,385],[334],{"_108":394,"_99":395,"_164":396,"_166":-5,"_167":149,"_168":397,"_170":171,"_110":398,"_104":33,"_173":399,"_175":400,"_176":22,"_177":-5,"_178":401,"_102":402},"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",[],[395],{"_108":404,"_99":405,"_164":406,"_166":-5,"_167":149,"_168":407,"_170":171,"_110":408,"_104":186,"_173":409,"_175":410,"_176":22,"_177":-5,"_178":411,"_102":412},"ddb8fe72-2828-11f1-a452-42dde27851f2","main.ts","d4913e8c-27dc-11f1-a47b-42dde27851f2",38,["D",1774429140871],"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<script src=\"https://cdn.jsdelivr.net/npm/eruda\"></script>\n<script>eruda.init();</script>\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}",[],[405],"files",[161,180,191,200,209,218,227,237,244,253,263,269,279,286,295,304,313,322,332,339,348,356,365,374,383,393,403],"counts",{"_417":33,"_418":169,"_419":33,"_420":421,"_424":425},"pulls","branches","forks","envVars",{"_422":33,"_423":33},"count","emptyCount","connections",{"_422":33,"_426":33},"unfilledCount","contents",[],{"_108":245,"_99":246,"_164":247,"_166":240,"_167":149,"_168":248,"_170":171,"_110":430,"_104":33,"_173":187,"_175":250,"_176":22,"_177":-5,"_102":431},["D",1774399152965],[239,246],"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":440,"_159":445,"_413":554,"_399":555,"_427":558,"_559":-5,"_560":-5,"_561":-5,"_562":-5,"_563":564,"_420":-5},{"_108":109,"_99":100,"_110":441,"_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":442,"_141":443,"_146":444,"_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},[446,474,486,494,518,546,550],{"_108":162,"_99":163,"_164":165,"_166":-5,"_167":149,"_168":169,"_170":171,"_110":447,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":448,"_102":473},["D",1774395979606],[449,453,457,461,465,469],{"_108":181,"_99":182,"_164":183,"_166":165,"_167":149,"_168":184,"_170":171,"_110":450,"_104":186,"_173":187,"_175":188,"_176":22,"_177":-5,"_178":451,"_102":452},["D",1774399120894],[],[163,182],{"_108":192,"_99":193,"_164":194,"_166":165,"_167":149,"_168":195,"_170":171,"_110":454,"_104":33,"_173":187,"_175":197,"_176":22,"_177":-5,"_178":455,"_102":456},["D",1774399079948],[],[163,193],{"_108":201,"_99":202,"_164":203,"_166":165,"_167":149,"_168":204,"_170":171,"_110":458,"_104":186,"_173":187,"_175":206,"_176":22,"_177":-5,"_178":459,"_102":460},["D",1774399162941],[],[163,202],{"_108":210,"_99":211,"_164":212,"_166":165,"_167":149,"_168":213,"_170":171,"_110":462,"_104":33,"_173":187,"_175":215,"_176":22,"_177":-5,"_178":463,"_102":464},["D",1774398938916],[],[163,211],{"_108":219,"_99":220,"_164":221,"_166":165,"_167":149,"_168":222,"_170":171,"_110":466,"_104":33,"_173":187,"_175":224,"_176":22,"_177":-5,"_178":467,"_102":468},["D",1774398933428],[],[163,220],{"_108":228,"_99":229,"_164":230,"_166":165,"_167":149,"_168":231,"_170":171,"_110":470,"_104":33,"_173":187,"_175":233,"_176":22,"_177":-5,"_178":471,"_102":472},["D",1774399071788],[],[163,229],[163],{"_108":238,"_99":239,"_164":240,"_166":-5,"_167":149,"_168":241,"_170":171,"_110":475,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":476,"_102":485},["D",1774396030221],[477,481],{"_108":245,"_99":246,"_164":247,"_166":240,"_167":149,"_168":248,"_170":171,"_110":478,"_104":33,"_173":187,"_175":250,"_176":22,"_177":-5,"_178":479,"_102":480},["D",1774399152965],[],[239,246],{"_108":254,"_99":255,"_164":256,"_166":240,"_167":149,"_168":257,"_170":171,"_110":482,"_104":33,"_173":187,"_175":259,"_176":22,"_177":-5,"_178":483,"_102":484},["D",1774396262971],[],[239,255],[239],{"_108":264,"_99":265,"_164":266,"_166":-5,"_167":149,"_168":186,"_170":171,"_110":487,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":488,"_102":493},["D",1774395976131],[489],{"_108":270,"_99":271,"_164":272,"_166":266,"_167":149,"_168":273,"_170":171,"_110":490,"_104":33,"_173":187,"_175":275,"_176":22,"_177":-5,"_178":491,"_102":492},["D",1774396179991],[],[265,271],[265],{"_108":280,"_99":281,"_164":282,"_166":-5,"_167":149,"_168":283,"_170":171,"_110":495,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":496,"_102":517},["D",1774395971862],[497,501,505,509,513],{"_108":287,"_99":288,"_164":289,"_166":282,"_167":149,"_168":290,"_170":171,"_110":498,"_104":186,"_173":187,"_175":292,"_176":22,"_177":-5,"_178":499,"_102":500},["D",1774399282298],[],[281,288],{"_108":296,"_99":297,"_164":298,"_166":282,"_167":149,"_168":299,"_170":171,"_110":502,"_104":33,"_173":187,"_175":301,"_176":22,"_177":-5,"_178":503,"_102":504},["D",1774399053673],[],[281,297],{"_108":305,"_99":306,"_164":307,"_166":282,"_167":149,"_168":308,"_170":171,"_110":506,"_104":169,"_173":187,"_175":310,"_176":22,"_177":-5,"_178":507,"_102":508},["D",1774429244198],[],[281,306],{"_108":314,"_99":315,"_164":316,"_166":282,"_167":149,"_168":317,"_170":171,"_110":510,"_104":186,"_173":187,"_175":319,"_176":22,"_177":-5,"_178":511,"_102":512},["D",1774399254573],[],[281,315],{"_108":323,"_99":324,"_164":325,"_166":282,"_167":149,"_168":326,"_170":171,"_110":514,"_104":186,"_173":187,"_175":328,"_176":22,"_177":-5,"_178":515,"_102":516},["D",1774399297660],[],[281,324],[281],{"_108":333,"_99":334,"_164":335,"_166":-5,"_167":149,"_168":336,"_170":171,"_110":519,"_104":33,"_173":174,"_175":-5,"_176":22,"_177":-5,"_178":520,"_102":545},["D",1774396033959],[521,525,529,533,537,541],{"_108":340,"_99":341,"_164":342,"_166":335,"_167":149,"_168":343,"_170":22,"_110":522,"_104":283,"_173":187,"_175":345,"_176":22,"_177":-5,"_178":523,"_102":524},["D",1774396966498],[],[334,341],{"_108":349,"_99":350,"_164":351,"_166":335,"_167":149,"_168":105,"_170":22,"_110":526,"_104":33,"_173":187,"_175":353,"_176":22,"_177":-5,"_178":527,"_102":528},["D",1774430007464],[],[334,350],{"_108":357,"_99":358,"_164":359,"_166":335,"_167":149,"_168":360,"_170":171,"_110":530,"_104":33,"_173":187,"_175":362,"_176":22,"_177":-5,"_178":531,"_102":532},["D",1774429971526],[],[334,358],{"_108":366,"_99":367,"_164":368,"_166":335,"_167":149,"_168":369,"_170":171,"_110":534,"_104":33,"_173":187,"_175":371,"_176":22,"_177":-5,"_178":535,"_102":536},["D",1774399314293],[],[334,367],{"_108":375,"_99":376,"_164":377,"_166":335,"_167":149,"_168":378,"_170":171,"_110":538,"_104":33,"_173":187,"_175":380,"_176":22,"_177":-5,"_178":539,"_102":540},["D",1774429984768],[],[334,376],{"_108":384,"_99":385,"_164":386,"_166":335,"_167":149,"_168":387,"_170":171,"_110":542,"_104":33,"_173":187,"_175":389,"_176":22,"_177":-5,"_178":543,"_102":544},["D",1774429935465],[],[334,385],[334],{"_108":394,"_99":395,"_164":396,"_166":-5,"_167":149,"_168":397,"_170":171,"_110":547,"_104":33,"_173":399,"_175":400,"_176":22,"_177":-5,"_178":548,"_102":549},["D",1774396288191],[],[395],{"_108":404,"_99":405,"_164":406,"_166":-5,"_167":149,"_168":407,"_170":171,"_110":551,"_104":186,"_173":409,"_175":410,"_176":22,"_177":-5,"_178":552,"_102":553},["D",1774429140871],[],[405],[446,449,453,457,461,465,469,474,477,481,486,489,494,497,501,505,509,513,518,521,525,529,533,537,541,546,550],{"_108":245,"_167":149,"_164":247,"_99":246,"_175":250,"_173":187,"_104":33,"_166":240,"_110":556,"_168":248,"_177":-5,"_102":557},["D",1774399152965],[239,246],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]
</article></body></html>