[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_400":401,"_402":403},"routes/_app.x.$handle.$name",{"_94":93,"_31":44,"_102":84,"_26":103,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":24,"_117":118,"_119":120,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_31":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":24,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":24},"version",43,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","ui/inference.ts","latestPath","fileId","e23f58f4-282a-11f1-9c39-42dde27851f2","name","inference.ts","fileType","script","content","/**\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(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`

inference \\u00B7 no weight updates

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","createdAt",["D",1774430007464],"branchVersion","branchId","a0faf3a2-27db-11f1-89a2-42dde27851f2","id","a0fa6194-27db-11f1-89a2-42dde27851f2","microgpt",["D",1774395967725],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Online learning micro-GPT: byte-level decoder transformer","imageUrl","21f2e37e-8066-4730-9dc7-d27cf8d3c9f3","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","0630d977-f678-453e-926c-52043293f59f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_94":93,"_101":97},"org",{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":24},"branch",{"_13":83,"_31":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"isOwned",52,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","c15r","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb2RJNlc1czZ1NlpZRmoxdGJ2eFVNNVhmeTYifQ","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_42":43,"_31":44,"_37":396,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":24,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":397,"_78":398,"_80":399,"_82":24},"tree",[191,198,201,203,209,216,217],"files",[191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217],"counts",{"_181":60,"_182":178,"_183":60,"_184":185,"_186":187},"contents",[125,126,127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_42":175,"_31":176,"_29":177,"_135":-5,"_40":41,"_39":178,"_137":120,"_37":179,"_13":60,"_33":156,"_35":-5,"_23":24,"_142":-5,"_26":180},{"_42":169,"_31":170,"_29":171,"_135":-5,"_40":41,"_39":172,"_137":120,"_37":173,"_13":60,"_33":156,"_35":-5,"_23":24,"_142":-5,"_26":174},{"_42":164,"_31":165,"_29":166,"_135":-5,"_40":41,"_39":139,"_137":120,"_37":167,"_13":60,"_33":156,"_35":-5,"_23":24,"_142":-5,"_26":168},{"_42":158,"_31":159,"_29":160,"_135":-5,"_40":41,"_39":161,"_137":120,"_37":162,"_13":60,"_33":156,"_35":-5,"_23":24,"_142":-5,"_26":163},{"_42":151,"_31":152,"_29":153,"_135":-5,"_40":41,"_39":154,"_137":120,"_37":155,"_13":60,"_33":156,"_35":-5,"_23":24,"_142":-5,"_26":157},{"_42":144,"_31":145,"_29":146,"_135":-5,"_40":41,"_39":147,"_137":120,"_37":148,"_13":60,"_33":20,"_35":149,"_23":24,"_142":-5,"_26":150},{"_42":132,"_31":133,"_29":134,"_135":-5,"_40":41,"_39":136,"_137":120,"_37":138,"_13":139,"_33":140,"_35":141,"_23":24,"_142":-5,"_26":143},"ddb8fe72-2828-11f1-a452-42dde27851f2","main.ts","d4913e8c-27dc-11f1-a47b-42dde27851f2","parentId",38,"latest",["D",1774429140871],2,"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}","label",[133],"5ffea7e4-27dc-11f1-b2a5-42dde27851f2","README.md","5ffea92e-27dc-11f1-b2a5-42dde27851f2",13,["D",1774396288191],"# μ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",[145],"c8760412-27db-11f1-8e32-42dde27851f2","ui","c8760584-27db-11f1-8e32-42dde27851f2",5,["D",1774396033959],"directory",[152],"a3727a6a-27db-11f1-918a-42dde27851f2","model","a3727b82-27db-11f1-918a-42dde27851f2",1,["D",1774395971862],[159],"a5fddaa4-27db-11f1-8e98-42dde27851f2","mechanisms","a5fddb58-27db-11f1-8e98-42dde27851f2",["D",1774395976131],[165],"c63bb62e-27db-11f1-b2b9-42dde27851f2","engine","c63bb728-27db-11f1-b2b9-42dde27851f2",4,["D",1774396030221],[170],"a80fc690-27db-11f1-948c-42dde27851f2","corpus","a80fc780-27db-11f1-948c-42dde27851f2",3,["D",1774395979606],[176],"pulls","branches","forks","envVars",{"_188":60,"_190":60},"connections",{"_188":60,"_189":60},"count","unfilledCount","emptyCount",{"_42":175,"_31":176,"_29":177,"_135":-5,"_40":41,"_39":178,"_137":120,"_37":393,"_13":60,"_33":156,"_35":-5,"_23":24,"_142":-5,"_219":394,"_26":395},{"_42":385,"_31":386,"_29":387,"_135":177,"_40":41,"_39":388,"_137":120,"_37":389,"_13":139,"_33":34,"_35":390,"_23":24,"_142":-5,"_219":391,"_26":392},{"_42":377,"_31":378,"_29":379,"_135":177,"_40":41,"_39":380,"_137":120,"_37":381,"_13":60,"_33":34,"_35":382,"_23":24,"_142":-5,"_219":383,"_26":384},{"_42":369,"_31":370,"_29":371,"_135":177,"_40":41,"_39":372,"_137":120,"_37":373,"_13":139,"_33":34,"_35":374,"_23":24,"_142":-5,"_219":375,"_26":376},{"_42":361,"_31":362,"_29":363,"_135":177,"_40":41,"_39":364,"_137":120,"_37":365,"_13":60,"_33":34,"_35":366,"_23":24,"_142":-5,"_219":367,"_26":368},{"_42":353,"_31":354,"_29":355,"_135":177,"_40":41,"_39":356,"_137":120,"_37":357,"_13":60,"_33":34,"_35":358,"_23":24,"_142":-5,"_219":359,"_26":360},{"_42":345,"_31":346,"_29":347,"_135":177,"_40":41,"_39":348,"_137":120,"_37":349,"_13":60,"_33":34,"_35":350,"_23":24,"_142":-5,"_219":351,"_26":352},{"_42":169,"_31":170,"_29":171,"_135":-5,"_40":41,"_39":172,"_137":120,"_37":342,"_13":60,"_33":156,"_35":-5,"_23":24,"_142":-5,"_219":343,"_26":344},{"_42":334,"_31":335,"_29":336,"_135":171,"_40":41,"_39":337,"_137":120,"_37":338,"_13":60,"_33":34,"_35":339,"_23":24,"_142":-5,"_219":340,"_26":341},{"_42":326,"_31":327,"_29":328,"_135":171,"_40":41,"_39":329,"_137":120,"_37":330,"_13":60,"_33":34,"_35":331,"_23":24,"_142":-5,"_219":332,"_26":333},{"_42":164,"_31":165,"_29":166,"_135":-5,"_40":41,"_39":139,"_137":120,"_37":323,"_13":60,"_33":156,"_35":-5,"_23":24,"_142":-5,"_219":324,"_26":325},{"_42":315,"_31":316,"_29":317,"_135":166,"_40":41,"_39":318,"_137":120,"_37":319,"_13":60,"_33":34,"_35":320,"_23":24,"_142":-5,"_219":321,"_26":322},{"_42":158,"_31":159,"_29":160,"_135":-5,"_40":41,"_39":161,"_137":120,"_37":312,"_13":60,"_33":156,"_35":-5,"_23":24,"_142":-5,"_219":313,"_26":314},{"_42":304,"_31":305,"_29":306,"_135":160,"_40":41,"_39":307,"_137":120,"_37":308,"_13":139,"_33":34,"_35":309,"_23":24,"_142":-5,"_219":310,"_26":311},{"_42":296,"_31":297,"_29":298,"_135":160,"_40":41,"_39":299,"_137":120,"_37":300,"_13":60,"_33":34,"_35":301,"_23":24,"_142":-5,"_219":302,"_26":303},{"_42":288,"_31":289,"_29":290,"_135":160,"_40":41,"_39":291,"_137":120,"_37":292,"_13":178,"_33":34,"_35":293,"_23":24,"_142":-5,"_219":294,"_26":295},{"_42":280,"_31":281,"_29":282,"_135":160,"_40":41,"_39":283,"_137":120,"_37":284,"_13":139,"_33":34,"_35":285,"_23":24,"_142":-5,"_219":286,"_26":287},{"_42":272,"_31":273,"_29":274,"_135":160,"_40":41,"_39":275,"_137":120,"_37":276,"_13":139,"_33":34,"_35":277,"_23":24,"_142":-5,"_219":278,"_26":279},{"_42":151,"_31":152,"_29":153,"_135":-5,"_40":41,"_39":154,"_137":120,"_37":269,"_13":60,"_33":156,"_35":-5,"_23":24,"_142":-5,"_219":270,"_26":271},{"_42":261,"_31":262,"_29":263,"_135":153,"_40":41,"_39":264,"_137":24,"_37":265,"_13":161,"_33":34,"_35":266,"_23":24,"_142":-5,"_219":267,"_26":268},{"_42":257,"_31":32,"_29":30,"_135":153,"_40":41,"_39":14,"_137":24,"_37":258,"_13":60,"_33":34,"_35":36,"_23":24,"_142":-5,"_219":259,"_26":260},{"_42":249,"_31":250,"_29":251,"_135":153,"_40":41,"_39":252,"_137":120,"_37":253,"_13":60,"_33":34,"_35":254,"_23":24,"_142":-5,"_219":255,"_26":256},{"_42":241,"_31":242,"_29":243,"_135":153,"_40":41,"_39":244,"_137":120,"_37":245,"_13":60,"_33":34,"_35":246,"_23":24,"_142":-5,"_219":247,"_26":248},{"_42":233,"_31":234,"_29":235,"_135":153,"_40":41,"_39":236,"_137":120,"_37":237,"_13":60,"_33":34,"_35":238,"_23":24,"_142":-5,"_219":239,"_26":240},{"_42":225,"_31":226,"_29":227,"_135":153,"_40":41,"_39":228,"_137":120,"_37":229,"_13":60,"_33":34,"_35":230,"_23":24,"_142":-5,"_219":231,"_26":232},{"_42":144,"_31":145,"_29":146,"_135":-5,"_40":41,"_39":147,"_137":120,"_37":222,"_13":60,"_33":20,"_35":149,"_23":24,"_142":-5,"_219":223,"_26":224},{"_42":132,"_31":133,"_29":134,"_135":-5,"_40":41,"_39":136,"_137":120,"_37":218,"_13":139,"_33":140,"_35":141,"_23":24,"_142":-5,"_219":220,"_26":221},["D",1774429140871],"children",[],[133],["D",1774396288191],[],[145],"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",[],[152,226],"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",[],[152,234],"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",[],[152,242],"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",[],[152,250],"e23f5822-282a-11f1-9c39-42dde27851f2",["D",1774430007464],[],[152,32],"f44cd820-27dd-11f1-bef5-42dde27851f2","app.ts","75a42140-27dd-11f1-a332-42dde27851f2",17,["D",1774396966498],"/**\n * ui/app.ts — Client-side application\n *\n * Loaded as ES module in the browser via esm.town.\n * Imports model/mechanisms/corpus from sibling modules via relative paths.\n * Uses preact + htm from CDN (no build step).\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\nimport {\n  D, N_HEAD, HD, MLP_HID, CTX, VS, BOS, N_LAYER,\n  createModel, createGrads, countParams, sampleFrom, topK, tokStr,\n} from \"../model/core.ts\";\nimport { forward } from \"../model/forward.ts\";\nimport { backward } from \"../model/backward.ts\";\nimport { sgdStep, clipGrads } from \"../model/optim.ts\";\nimport {\n  ReplayBuffer, shouldUpdate, adaptLR,\n  createAdaptiveLRState, createStats,\n} from \"../mechanisms/index.ts\";\nimport {\n  buildCorpus, getPhaseAt, createDefaultPhases,\n} from \"../corpus/phases.ts\";\n\nconst html = htm.bind(h);\n\n// ═══════════════════════════════════════════════════════════════════\n// UI COMPONENTS\n// ═══════════════════════════════════════════════════════════════════\n\nfunction LossCurve(props: any) {\n  const { history, boundaries, width, height, hoverStep, onHover, totalCorpus, epoch } = props;\n  if (history.length < 2) {\n    return h(\"div\", { style: { width, height, display: \"flex\", alignItems: \"center\", justifyContent: \"center\", color: \"#333\", fontSize: 11 } }, \"awaiting data\\u2026\");\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); 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  let ema = pts[0].loss;\n  const sm = pts.map((p: any) => { ema = .015 * p.loss + .985 * ema; return { ...p, smooth: ema }; });\n  const pad = { t: 8, b: 18, l: 34, r: 8 };\n  const pw = width - pad.l - pad.r, ph = height - pad.t - pad.b;\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 xS = (s: number) => pad.l + (s / (total - 1 || 1)) * pw;\n  const yS = (v: number) => pad.t + (1 - (v - yMin) / yR) * ph;\n\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  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  const line = sm.map((p: any) => xS(p.step) + \",\" + yS(Math.max(yMin, Math.min(yMax, p.smooth)))).join(\" \");\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  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    const s = Math.round(((mx - pad.l) / pw) * (total - 1));\n    onHover(Math.max(0, Math.min(total - 1, s)));\n  };\n\n  return html`\n    <svg width=${width} height=${height} style=\"display:block;cursor:crosshair\"\n      onMouseMove=${onMove} onMouseLeave=${() => onHover(null)}>\n      ${bands.map((b: any, i: number) => html`<rect key=${i} x=${b.x1} y=${pad.t} width=${Math.max(0, b.x2 - b.x1)} height=${ph} fill=${b.color} opacity=\".05\"/>`)}\n      ${yTicks.map((v: number) => html`<g key=${v}><line x1=${pad.l} x2=${width - pad.r} y1=${yS(v)} y2=${yS(v)} stroke=\"#141420\"/><text x=${pad.l - 3} y=${yS(v) + 3} text-anchor=\"end\" fill=\"#333\" font-size=\"8\">${v.toFixed(1)}</text></g>`)}\n      ${epochLines.map((ex: number, i: number) => html`<line key=${i} x1=${ex} x2=${ex} y1=${pad.t} y2=${pad.t + ph} stroke=\"#444\" stroke-dasharray=\"3,3\" opacity=\".5\"/>`)}\n      <polyline points=${line} fill=\"none\" stroke=\"#f59e0b\" stroke-width=\"2\" stroke-linejoin=\"round\" opacity=\".85\"/>\n      ${hx !== null && html`<line x1=${hx} x2=${hx} y1=${pad.t} y2=${pad.t + ph} stroke=\"#e2e8f0\" opacity=\".25\"/>`}\n      <circle cx=${xS(last.step)} cy=${yS(Math.max(yMin, Math.min(yMax, last.smooth)))} r=\"3\" fill=\"#f59e0b\"/>\n    </svg>`;\n}\n\nfunction 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) + \")\" : 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`<span key=${start + i} title=${\"step \" + h.step + \" | \" + h.loss.toFixed(2) + \"b\" + (h.skipped ? \" [SKIP]\" : \"\") + (h.replayed ? \" [+REPLAY]\" : \"\")} style=${{ background: bg, borderBottom: bdr, color: s > .7 ? \"#fca5a5\" : s > .3 ? \"#fcd34d\" : \"#bbf7d0\", cursor: \"default\" }}>${tokStr(h.targetId)}</span>`;\n    })}\n  </div>`;\n}\n\nfunction 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\nfunction 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\nfunction 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\nfunction InferencePanel({ modelRef }: any) {\n  const [text, setText] = useState(\"\");\n  const [results, setResults] = useState<any>(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`<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} onInput=${(e: any) => 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",[],[152,262],["D",1774396033959],[210,211,212,213,214,215],[152],"61c80d84-27e3-11f1-aa23-42dde27851f2","optim.ts","0e669b1c-27dc-11f1-8a40-42dde27851f2",36,["D",1774399297660],"/**\n * model/optim.ts — SGD and gradient clipping\n * Works with any model size by iterating actual layer arrays.\n */\nimport { type ModelParams, type ModelGrads } from \"./core.ts\";\n\nconst LAYER_KEYS = [\"gn_a\",\"Wq\",\"Wk\",\"Wv\",\"Wo\",\"gn_m\",\"W1\",\"b1\",\"W2\",\"b2\"] as const;\n\nfunction upd(a: any[], b: any[], lr: number) {\n  if (Array.isArray(a[0]) || (a[0] && a[0].length !== undefined)) {\n    for (let i = 0; i < a.length; i++) for (let j = 0; j < a[i].length; j++) {\n      a[i][j] -= lr * b[i][j]; b[i][j] = 0;\n    }\n  } else {\n    for (let i = 0; i < a.length; i++) { a[i] -= lr * b[i]; b[i] = 0; }\n  }\n}\n\nexport function sgdStep(p: ModelParams, g: ModelGrads, lr: number): void {\n  upd(p.te, g.te as any, lr);\n  upd(p.pe, g.pe as any, lr);\n  for (let l = 0; l < p.layers.length; l++) {\n    const ly = p.layers[l] as any, gl = g.layers[l] as any;\n    for (const k of LAYER_KEYS) upd(ly[k], gl[k], lr);\n  }\n  upd(p.gn_f as any, g.gn_f as any, lr);\n  upd(p.lm_head, g.lm_head as any, lr);\n  upd(p.b_out as any, g.b_out as any, lr);\n}\n\nfunction accum(v: any[], norm: { v: number }) {\n  if (Array.isArray(v[0]) || (v[0] && v[0].length !== undefined)) {\n    for (const r of v) for (let i = 0; i < r.length; i++) norm.v += r[i] * r[i];\n  } else {\n    for (let i = 0; i < v.length; i++) norm.v += v[i] * v[i];\n  }\n}\n\nfunction scale(v: any[], s: number) {\n  if (Array.isArray(v[0]) || (v[0] && v[0].length !== undefined)) {\n    for (const r of v) for (let i = 0; i < r.length; i++) r[i] *= s;\n  } else {\n    for (let i = 0; i < v.length; i++) v[i] *= s;\n  }\n}\n\nexport function clipGrads(g: ModelGrads, maxNorm: number): number {\n  const norm = { v: 0 };\n  accum(g.te as any, norm); accum(g.pe as any, norm);\n  for (const gl of g.layers) for (const k of LAYER_KEYS) accum((gl as any)[k], norm);\n  accum(g.gn_f as any, norm); accum(g.lm_head as any, norm); accum(g.b_out as any, norm);\n\n  const n = Math.sqrt(norm.v);\n  if (n > maxNorm) {\n    const s = maxNorm / n;\n    scale(g.te as any, s); scale(g.pe as any, s);\n    for (const gl of g.layers) for (const k of LAYER_KEYS) scale((gl as any)[k], s);\n    scale(g.gn_f as any, s); scale(g.lm_head as any, s); scale(g.b_out as any, s);\n  }\n  return n;\n}\n",[],[159,273],"481ae3fc-27e3-11f1-9891-42dde27851f2","forward.ts","f2c3666a-27db-11f1-9ee9-42dde27851f2",34,["D",1774399254573],"/**\n * model/forward.ts — Full causal self-attention forward pass\n *\n * Reads all dimensions from p.cfg (the config snapshot stored in the model).\n * This means the same code works for any model size.\n */\nimport { rmsnorm, type ModelParams, type ForwardCache } from \"./core.ts\";\n\nexport function forward(p: ModelParams, tokens: number[]): ForwardCache {\n  const { D, N_HEAD, HD, MLP_HID, N_LAYER, VS } = p.cfg;\n  const T = tokens.length;\n  const cache: ForwardCache = {\n    tokens: [...tokens], T,\n    x_layer_in: [], layer_caches: [],\n    x_final: [], fn: { y: [], rms: 0, x_in: [] },\n    z: [], logits: [], probs: [], last_attn: [],\n  };\n\n  // Embeddings: tok + pos\n  const x0: number[][] = [];\n  for (let t = 0; t < T; t++) {\n    const e = new Array(D);\n    for (let j = 0; j < D; j++) e[j] = p.te[tokens[t]][j] + p.pe[t][j];\n    x0.push(e);\n  }\n  let x = x0.map(e => [...e]);\n  cache.x_layer_in = [x0];\n\n  for (let l = 0; l < N_LAYER; l++) {\n    const ly = p.layers[l];\n    const lc: any = {};\n\n    // Attention pre-norm\n    lc.norm_a = [];\n    const u: number[][] = [];\n    for (let t = 0; t < T; t++) {\n      const nr = rmsnorm(x[t], ly.gn_a);\n      lc.norm_a.push({ rms: nr.rms, x_in: [...x[t]] });\n      u.push(nr.y);\n    }\n\n    // QKV projections\n    const Q: number[][] = [], K: number[][] = [], V: number[][] = [];\n    for (let t = 0; t < T; t++) {\n      const q = new Array(D).fill(0), k = new Array(D).fill(0), v = new Array(D).fill(0);\n      for (let j = 0; j < D; j++) for (let m = 0; m < D; m++) {\n        q[j] += u[t][m] * ly.Wq[m][j];\n        k[j] += u[t][m] * ly.Wk[m][j];\n        v[j] += u[t][m] * ly.Wv[m][j];\n      }\n      Q.push(q); K.push(k); V.push(v);\n    }\n    lc.u = u; lc.Q = Q; lc.K = K; lc.V = V;\n\n    // Multi-head causal self-attention\n    const aw: number[][][] = [], ao: number[][] = [];\n    for (let t = 0; t < T; t++) {\n      const aw_t: number[][] = [];\n      const o_t = new Array(D).fill(0);\n      for (let h = 0; h < N_HEAD; h++) {\n        const ho = h * HD;\n        const scores = new Array(t + 1);\n        let maxS = -Infinity;\n        for (let s = 0; s <= t; s++) {\n          let sc = 0;\n          for (let d = 0; d < HD; d++) sc += Q[t][ho + d] * K[s][ho + d];\n          sc /= Math.sqrt(HD);\n          scores[s] = sc;\n          if (sc > maxS) maxS = sc;\n        }\n        let sumE = 0;\n        const attn = new Array(t + 1);\n        for (let s = 0; s <= t; s++) { attn[s] = Math.exp(scores[s] - maxS); sumE += attn[s]; }\n        for (let s = 0; s <= t; s++) attn[s] /= sumE;\n        aw_t.push(attn);\n        for (let d = 0; d < HD; d++) {\n          let acc = 0;\n          for (let s = 0; s <= t; s++) acc += attn[s] * V[s][ho + d];\n          o_t[ho + d] = acc;\n        }\n      }\n      aw.push(aw_t); ao.push(o_t);\n    }\n    lc.attn_weights = aw; lc.attn_out = ao;\n\n    // Output projection + residual\n    const x_mid: number[][] = [];\n    for (let t = 0; t < T; t++) {\n      const proj = new Array(D).fill(0);\n      for (let j = 0; j < D; j++) for (let m = 0; m < D; m++) proj[j] += ao[t][m] * ly.Wo[m][j];\n      const xm = new Array(D);\n      for (let j = 0; j < D; j++) xm[j] = x[t][j] + proj[j];\n      x_mid.push(xm);\n    }\n\n    // MLP pre-norm\n    lc.norm_m = [];\n    const m: number[][] = [];\n    for (let t = 0; t < T; t++) {\n      const nr = rmsnorm(x_mid[t], ly.gn_m);\n      lc.norm_m.push({ rms: nr.rms, x_in: [...x_mid[t]] });\n      m.push(nr.y);\n    }\n    lc.m = m;\n\n    // MLP: D → MLP_HID (ReLU) → D + residual\n    lc.h_pre = []; lc.h = [];\n    const x_out: number[][] = [];\n    for (let t = 0; t < T; t++) {\n      const hp = new Array(MLP_HID).fill(0);\n      for (let j = 0; j < MLP_HID; j++) {\n        for (let k = 0; k < D; k++) hp[j] += m[t][k] * ly.W1[k][j];\n        hp[j] += ly.b1[j];\n      }\n      const h = hp.map((x: number) => x > 0 ? x : 0);\n      const r = new Array(D).fill(0);\n      for (let j = 0; j < D; j++) {\n        for (let k = 0; k < MLP_HID; k++) r[j] += h[k] * ly.W2[k][j];\n        r[j] += ly.b2[j];\n      }\n      lc.h_pre.push(hp); lc.h.push(h);\n      const xo = new Array(D);\n      for (let j = 0; j < D; j++) xo[j] = x_mid[t][j] + r[j];\n      x_out.push(xo);\n    }\n\n    lc.x_mid = x_mid;\n    cache.layer_caches.push(lc);\n    x = x_out;\n    if (l < N_LAYER - 1) cache.x_layer_in.push(x.map(e => [...e]));\n  }\n\n  cache.x_final = x;\n\n  // Final norm → lm_head → softmax\n  const fn = rmsnorm(x[T - 1], p.gn_f);\n  cache.fn = { y: fn.y, rms: fn.rms, x_in: [...x[T - 1]] };\n\n  const logits = new Array(VS).fill(0);\n  for (let i = 0; i < VS; i++) {\n    for (let j = 0; j < D; j++) logits[i] += fn.y[j] * p.lm_head[j][i];\n    logits[i] += p.b_out[i];\n  }\n  const maxL = Math.max(...logits);\n  const expL = logits.map((l: number) => Math.exp(l - maxL));\n  const sumL = expL.reduce((a: number, b: number) => a + b, 0);\n  cache.probs = expL.map((e: number) => e / sumL);\n  cache.z = fn.y;\n  cache.logits = logits;\n  cache.last_attn = cache.layer_caches[N_LAYER - 1].attn_weights[T - 1];\n\n  return cache;\n}\n",[],[159,281],"1b4f0f42-2829-11f1-a8e6-42dde27851f2","core.ts","e02e60a4-27db-11f1-9b54-42dde27851f2",39,["D",1774429244198],"/**\n * model/core.ts — Types, init, RMSNorm, sampling\n *\n * Uses a mutable `cfg` object so the UI can change architecture\n * dimensions before model creation. Import cfg, mutate it, then\n * call createModel().\n */\nimport { type ModelConfig, defaultConfig } from \"./config.ts\";\n\n// Mutable global config — the UI updates this before calling createModel()\nexport const cfg: ModelConfig = defaultConfig();\n\nexport { type ModelConfig } from \"./config.ts\";\nexport { defaultConfig, resolveConfig, estimateParams, PRESETS } from \"./config.ts\";\n\n// ── Types ─────────────────────────────────────────────────────────\nexport interface LayerParams {\n  gn_a: number[];\n  Wq: number[][]; Wk: number[][]; Wv: number[][]; Wo: number[][];\n  gn_m: number[];\n  W1: number[][]; b1: number[];\n  W2: number[][]; b2: number[];\n}\n\nexport interface ModelParams {\n  te: number[][]; pe: number[][];\n  layers: LayerParams[];\n  gn_f: number[];\n  lm_head: number[][]; b_out: number[];\n  /** Snapshot of config at creation time */\n  cfg: ModelConfig;\n}\n\nexport interface LayerGrads {\n  gn_a: Float64Array;\n  Wq: Float64Array[]; Wk: Float64Array[]; Wv: Float64Array[]; Wo: Float64Array[];\n  gn_m: Float64Array;\n  W1: Float64Array[]; b1: Float64Array;\n  W2: Float64Array[]; b2: Float64Array;\n}\n\nexport interface ModelGrads {\n  te: Float64Array[]; pe: Float64Array[];\n  layers: LayerGrads[];\n  gn_f: Float64Array;\n  lm_head: Float64Array[]; b_out: Float64Array;\n}\n\nexport interface ForwardCache {\n  tokens: number[];\n  T: number;\n  x_layer_in: number[][][];\n  layer_caches: LayerCache[];\n  x_final: number[][];\n  fn: { y: number[]; rms: number; x_in: number[] };\n  z: number[];\n  logits: number[];\n  probs: number[];\n  last_attn: number[][];\n}\n\nexport interface LayerCache {\n  norm_a: { rms: number; x_in: number[] }[];\n  u: number[][];\n  Q: number[][]; K: number[][]; V: number[][];\n  attn_weights: number[][][];\n  attn_out: number[][];\n  x_mid: number[][];\n  norm_m: { rms: number; x_in: number[] }[];\n  m: number[][];\n  h_pre: number[][];\n  h: number[][];\n}\n\n// ── Init utilities ────────────────────────────────────────────────\nexport function randn(): number {\n  let u = 0, v = 0;\n  while (!u) u = Math.random();\n  while (!v) v = Math.random();\n  return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * v);\n}\n\nexport function mat(r: number, c: number, s = 0.02): number[][] {\n  return Array.from({ length: r }, () => Array.from({ length: c }, () => randn() * s));\n}\n\nexport function zmat(r: number, c: number): Float64Array[] {\n  return Array.from({ length: r }, () => new Float64Array(c));\n}\n\nexport function zvec(n: number): Float64Array {\n  return new Float64Array(n);\n}\n\n// ── Model creation (reads from cfg) ───────────────────────────────\nexport function createModel(): ModelParams {\n  const c = cfg;\n  const p: ModelParams = {\n    te: mat(c.VS, c.D),\n    pe: mat(c.CTX, c.D, 0.01),\n    layers: [],\n    gn_f: Array.from({ length: c.D }, () => 1),\n    lm_head: mat(c.D, c.VS, 0.02),\n    b_out: Array(c.VS).fill(0),\n    cfg: { ...c }, // snapshot\n  };\n  for (let l = 0; l < c.N_LAYER; l++) {\n    p.layers.push({\n      gn_a: Array.from({ length: c.D }, () => 1),\n      Wq: mat(c.D, c.D), Wk: mat(c.D, c.D), Wv: mat(c.D, c.D),\n      Wo: mat(c.D, c.D, 0.02 / Math.sqrt(c.N_LAYER)),\n      gn_m: Array.from({ length: c.D }, () => 1),\n      W1: mat(c.D, c.MLP_HID), b1: Array(c.MLP_HID).fill(0),\n      W2: mat(c.MLP_HID, c.D, 0.02 / Math.sqrt(c.N_LAYER)),\n      b2: Array(c.D).fill(0),\n    });\n  }\n  return p;\n}\n\nexport function createGrads(p: ModelParams): ModelGrads {\n  const c = p.cfg;\n  return {\n    te: zmat(c.VS, c.D), pe: zmat(c.CTX, c.D),\n    layers: p.layers.map(() => ({\n      gn_a: zvec(c.D),\n      Wq: zmat(c.D, c.D), Wk: zmat(c.D, c.D),\n      Wv: zmat(c.D, c.D), Wo: zmat(c.D, c.D),\n      gn_m: zvec(c.D),\n      W1: zmat(c.D, c.MLP_HID), b1: zvec(c.MLP_HID),\n      W2: zmat(c.MLP_HID, c.D), b2: zvec(c.D),\n    })),\n    gn_f: zvec(c.D),\n    lm_head: zmat(c.D, c.VS),\n    b_out: zvec(c.VS),\n  };\n}\n\nexport function countParams(p: ModelParams): number {\n  let n = 0;\n  const count = (v: any[]) => {\n    if (Array.isArray(v[0]) || v[0]?.length !== undefined) {\n      for (const r of v) n += r.length;\n    } else n += v.length;\n  };\n  count(p.te); count(p.pe);\n  for (const ly of p.layers) {\n    for (const k of [\"gn_a\",\"Wq\",\"Wk\",\"Wv\",\"Wo\",\"gn_m\",\"W1\",\"b1\",\"W2\",\"b2\"] as const) {\n      count(ly[k] as any[]);\n    }\n  }\n  count(p.gn_f); count(p.lm_head); count(p.b_out);\n  return n;\n}\n\n// ── RMSNorm ───────────────────────────────────────────────────────\nexport function rmsnorm(x: number[], gain: number[]): { y: number[]; rms: number } {\n  const n = x.length;\n  let ss = 0;\n  for (let i = 0; i < n; i++) ss += x[i] * x[i];\n  const rms = Math.sqrt(ss / n + 1e-8);\n  const y = new Array(n);\n  for (let i = 0; i < n; i++) y[i] = gain[i] * x[i] / rms;\n  return { y, rms };\n}\n\nexport function rmsnormBwd(\n  dy: number[], x: number[], gain: number[], rms: number\n): { dx: number[]; dgain: number[] } {\n  const n = x.length;\n  const dx = new Array(n), dgain = new Array(n);\n  let dot = 0;\n  for (let i = 0; i < n; i++) {\n    const xh = x[i] / rms;\n    dot += dy[i] * gain[i] * xh;\n  }\n  const md = dot / n;\n  for (let i = 0; i < n; i++) {\n    const xh = x[i] / rms;\n    dgain[i] = dy[i] * xh;\n    dx[i] = (dy[i] * gain[i] - xh * md) / rms;\n  }\n  return { dx, dgain };\n}\n\n// ── Sampling & display ────────────────────────────────────────────\nexport function sampleFrom(probs: number[]): number {\n  let r = Math.random(), c = 0;\n  for (let i = 0; i < probs.length; i++) {\n    c += probs[i];\n    if (r < c) return i;\n  }\n  return probs.length - 1;\n}\n\nexport function topK(probs: number[], k = 8) {\n  return probs.map((p, i) => ({ id: i, p })).sort((a, b) => b.p - a.p).slice(0, k);\n}\n\nexport function tokStr(id: number): string {\n  if (id === 256) return \"\\u27E8B\\u27E9\";\n  if (id === 10) return \"\\u23CE\";\n  if (id === 32) return \"\\u2423\";\n  if (id === 9) return \"\\u21E5\";\n  if (id < 32 || id === 127) return \"\\u2039\" + id + \"\\u203A\";\n  return String.fromCharCode(id);\n}\n\n\n// ── Convenience re-exports for backward compat ────────────────────\n// These read from the mutable cfg at import time.\n// After changing cfg, re-import or access cfg directly.\nexport const D = cfg.D;\nexport const N_HEAD = cfg.N_HEAD;\nexport const HD = cfg.HD;\nexport const MLP_HID = cfg.MLP_HID;\nexport const CTX = cfg.CTX;\nexport const VS = cfg.VS;\nexport const BOS = cfg.BOS;\nexport const N_LAYER = cfg.N_LAYER;\nexport const EPS = cfg.EPS;\n",[],[159,289],"d059575e-27e2-11f1-8335-42dde27851f2","config.ts","d0595826-27e2-11f1-8335-42dde27851f2",26,["D",1774399053673],"/**\n * model/config.ts — Mutable model hyperparameters\n *\n * Extracted from core.ts so the UI can modify architecture dimensions\n * before model creation. Config is a plain object — change it, then\n * call createModel() to get a model with those dimensions.\n *\n * The key insight from TinyStories: a single-layer, 4-head, 64d model\n * can learn coherent English if the data distribution is simple enough.\n * These defaults are deliberately tiny for interactive browser use.\n */\n\nexport interface ModelConfig {\n  D: number;        // embedding / residual stream width\n  N_HEAD: number;   // attention heads\n  HD: number;       // per-head dimension (derived: D / N_HEAD)\n  MLP_HID: number;  // MLP hidden dimension (typically 4 * D)\n  CTX: number;      // context window (positions)\n  VS: number;       // vocabulary size (257 = 256 bytes + BOS)\n  BOS: number;      // beginning-of-sequence token id\n  N_LAYER: number;  // number of decoder blocks\n  EPS: number;      // RMSNorm epsilon\n}\n\n/** Default config: 1-layer, 4-head, 16d — ~7K params */\nexport function defaultConfig(): ModelConfig {\n  const D = 16;\n  const N_HEAD = 4;\n  return {\n    D,\n    N_HEAD,\n    HD: D / N_HEAD,\n    MLP_HID: 4 * D,\n    CTX: 12,\n    VS: 257,\n    BOS: 256,\n    N_LAYER: 1,\n    EPS: 1e-8,\n  };\n}\n\n/**\n * Validate and derive computed fields.\n * Call after user changes D, N_HEAD, etc.\n */\nexport function resolveConfig(partial: Partial<ModelConfig>): ModelConfig {\n  const base = defaultConfig();\n  const c = { ...base, ...partial };\n  // Derive dependent fields\n  c.HD = Math.floor(c.D / c.N_HEAD);\n  if (c.HD < 1) c.HD = 1;\n  c.D = c.HD * c.N_HEAD; // snap D to multiple of N_HEAD\n  c.MLP_HID = 4 * c.D;\n  c.VS = 257;\n  c.BOS = 256;\n  return c;\n}\n\n/**\n * Estimate parameter count without creating the model.\n */\nexport function estimateParams(c: ModelConfig): number {\n  const { D, VS, CTX, N_LAYER, MLP_HID } = c;\n  const embed = VS * D + CTX * D;                    // te + pe\n  const perLayer = D                                  // gn_a\n    + D * D * 4                                       // Wq, Wk, Wv, Wo\n    + D                                               // gn_m\n    + D * MLP_HID + MLP_HID                           // W1, b1\n    + MLP_HID * D + D;                                // W2, b2\n  const head = D + D * VS + VS;                       // gn_f, lm_head, b_out\n  return embed + N_LAYER * perLayer + head;\n}\n\n/** Preset configs for quick selection */\nexport const PRESETS: Record<string, Partial<ModelConfig>> = {\n  \"nano (7K)\":   { D: 16, N_HEAD: 4, N_LAYER: 1, CTX: 12 },\n  \"micro (30K)\": { D: 32, N_HEAD: 4, N_LAYER: 1, CTX: 16 },\n  \"small (60K)\": { D: 32, N_HEAD: 4, N_LAYER: 2, CTX: 24 },\n  \"med (120K)\":  { D: 48, N_HEAD: 6, N_LAYER: 2, CTX: 32 },\n};\n",[],[159,297],"589f2030-27e3-11f1-8571-42dde27851f2","backward.ts","043dba6c-27dc-11f1-9cf4-42dde27851f2",35,["D",1774399282298],"/**\n * model/backward.ts — Full backward pass through causal decoder block\n *\n * Reads dimensions from p.cfg. Same code works for any model size.\n */\nimport { rmsnormBwd, type ModelParams, type ModelGrads, type ForwardCache } from \"./core.ts\";\n\nexport function backward(p: ModelParams, g: ModelGrads, cache: ForwardCache, target: number): number {\n  const { D, N_HEAD, HD, MLP_HID, VS, N_LAYER } = p.cfg;\n  const { T, probs, z } = cache;\n  const loss = -Math.log(Math.max(probs[target], 1e-10));\n\n  const dl = probs.map((pr, i) => pr - (i === target ? 1 : 0));\n\n  // d_z, d_lm_head, d_b_out\n  const dz = new Array(D).fill(0);\n  for (let j = 0; j < D; j++) {\n    for (let i = 0; i < VS; i++) {\n      g.lm_head[j][i] += z[j] * dl[i];\n      dz[j] += dl[i] * p.lm_head[j][i];\n    }\n  }\n  for (let i = 0; i < VS; i++) g.b_out[i] += dl[i];\n\n  const { dx: dxf, dgain: dgf } = rmsnormBwd(dz, cache.fn.x_in, p.gn_f, cache.fn.rms);\n  for (let j = 0; j < D; j++) g.gn_f[j] += dgf[j];\n\n  const dx = Array.from({ length: T }, () => new Array(D).fill(0));\n  for (let j = 0; j < D; j++) dx[T - 1][j] = dxf[j];\n\n  for (let l = N_LAYER - 1; l >= 0; l--) {\n    const ly = p.layers[l], gl = g.layers[l], lc = cache.layer_caches[l];\n\n    // MLP residual backward\n    const dxm = Array.from({ length: T }, (_, t) => [...dx[t]]);\n    for (let t = 0; t < T; t++) {\n      const dr = [...dx[t]];\n      const dh = new Array(MLP_HID).fill(0);\n      for (let k = 0; k < MLP_HID; k++) for (let j = 0; j < D; j++) {\n        gl.W2[k][j] += lc.h[t][k] * dr[j]; dh[k] += dr[j] * ly.W2[k][j];\n      }\n      for (let j = 0; j < D; j++) gl.b2[j] += dr[j];\n      const dhp = dh.map((d: number, k: number) => lc.h_pre[t][k] > 0 ? d : 0);\n      for (let j = 0; j < MLP_HID; j++) gl.b1[j] += dhp[j];\n      const dm = new Array(D).fill(0);\n      for (let k = 0; k < D; k++) for (let j = 0; j < MLP_HID; j++) {\n        gl.W1[k][j] += lc.m[t][k] * dhp[j]; dm[k] += dhp[j] * ly.W1[k][j];\n      }\n      const { dx: dn, dgain: dg } = rmsnormBwd(dm, lc.norm_m[t].x_in, ly.gn_m, lc.norm_m[t].rms);\n      for (let j = 0; j < D; j++) { gl.gn_m[j] += dg[j]; dxm[t][j] += dn[j]; }\n    }\n\n    // Attention residual backward\n    const dxi = Array.from({ length: T }, (_, t) => [...dxm[t]]);\n    const dao = Array.from({ length: T }, () => new Array(D).fill(0));\n    for (let t = 0; t < T; t++) for (let m = 0; m < D; m++) for (let j = 0; j < D; j++) {\n      gl.Wo[m][j] += lc.attn_out[t][m] * dxm[t][j];\n      dao[t][m] += dxm[t][j] * ly.Wo[m][j];\n    }\n\n    // Multi-head attention backward\n    const dQ = Array.from({ length: T }, () => new Array(D).fill(0));\n    const dK = Array.from({ length: T }, () => new Array(D).fill(0));\n    const dV = Array.from({ length: T }, () => new Array(D).fill(0));\n    for (let t = 0; t < T; t++) for (let h = 0; h < N_HEAD; h++) {\n      const ho = h * HD, attn = lc.attn_weights[t][h];\n      const da = new Array(t + 1).fill(0);\n      for (let s = 0; s <= t; s++) for (let d = 0; d < HD; d++) {\n        da[s] += dao[t][ho + d] * lc.V[s][ho + d];\n        dV[s][ho + d] += attn[s] * dao[t][ho + d];\n      }\n      let dot = 0;\n      for (let s = 0; s <= t; s++) dot += attn[s] * da[s];\n      const scale = 1 / Math.sqrt(HD);\n      for (let s = 0; s <= t; s++) {\n        const ds = attn[s] * (da[s] - dot);\n        for (let d = 0; d < HD; d++) {\n          dQ[t][ho + d] += ds * lc.K[s][ho + d] * scale;\n          dK[s][ho + d] += ds * lc.Q[t][ho + d] * scale;\n        }\n      }\n    }\n\n    // QKV projection backward\n    const du = Array.from({ length: T }, () => new Array(D).fill(0));\n    for (let t = 0; t < T; t++) for (let m = 0; m < D; m++) for (let j = 0; j < D; j++) {\n      gl.Wq[m][j] += lc.u[t][m] * dQ[t][j]; du[t][m] += dQ[t][j] * ly.Wq[m][j];\n      gl.Wk[m][j] += lc.u[t][m] * dK[t][j]; du[t][m] += dK[t][j] * ly.Wk[m][j];\n      gl.Wv[m][j] += lc.u[t][m] * dV[t][j]; du[t][m] += dV[t][j] * ly.Wv[m][j];\n    }\n\n    // Attention pre-norm backward\n    for (let t = 0; t < T; t++) {\n      const { dx: dn, dgain: dg } = rmsnormBwd(du[t], lc.norm_a[t].x_in, ly.gn_a, lc.norm_a[t].rms);\n      for (let j = 0; j < D; j++) { gl.gn_a[j] += dg[j]; dxi[t][j] += dn[j]; }\n    }\n    for (let t = 0; t < T; t++) for (let j = 0; j < D; j++) dx[t][j] = dxi[t][j];\n  }\n\n  // Embedding gradients\n  const toks = cache.tokens;\n  for (let t = 0; t < T; t++) for (let j = 0; j < D; j++) {\n    g.te[toks[t]][j] += dx[t][j]; g.pe[t][j] += dx[t][j];\n  }\n  return loss;\n}\n",[],[159,305],["D",1774395971862],[204,205,206,207,208],[159],"1fba45ee-27dc-11f1-bfd1-42dde27851f2","index.ts","1fba4724-27dc-11f1-bfd1-42dde27851f2",10,["D",1774396179991],"/**\n * mechanisms/index.ts — Research-backed online learning mechanisms\n *\n * Each mechanism is toggleable and self-contained. They modify the\n * update decision in the training loop without touching the model.\n *\n * 1. Selective-Backprop:  Skip updates on low-loss tokens (save compute)\n * 2. ReplayBuffer:        Reservoir sampling + prioritised replay (stability)\n * 3. Adaptive LR:         Dual-EMA shift detection → LR boost (plasticity)\n */\n\n// ═══════════════════════════════════════════════════════════════════════\n// Selective-Backprop (Jiang et al. 2019)\n// Only backprop when loss exceeds threshold — spend compute where wrong\n// ═══════════════════════════════════════════════════════════════════════\nexport interface SelectiveBackpropConfig {\n  enabled: boolean;\n  threshold: number; // bits — skip if loss < threshold\n}\n\nexport function shouldUpdate(\n  lossBits: number,\n  config: SelectiveBackpropConfig,\n): boolean {\n  if (!config.enabled) return true;\n  return lossBits >= config.threshold;\n}\n\n// ═══════════════════════════════════════════════════════════════════════\n// Experience Replay — reservoir sampling + prioritised retrieval\n// Breaks strict prequential but best stability-plasticity tradeoff\n// ═══════════════════════════════════════════════════════════════════════\nexport interface ReplayEntry {\n  window: number[];\n  target: number;\n  loss: number;\n}\n\nexport class ReplayBuffer {\n  private buf: ReplayEntry[] = [];\n  private n = 0;\n\n  constructor(public capacity: number) {}\n\n  add(window: number[], target: number, loss: number): void {\n    this.n++;\n    if (this.buf.length < this.capacity) {\n      this.buf.push({ window: [...window], target, loss });\n    } else {\n      // Reservoir sampling: uniform coverage of stream\n      const j = Math.floor(Math.random() * this.n);\n      if (j < this.capacity) {\n        this.buf[j] = { window: [...window], target, loss };\n      }\n    }\n  }\n\n  /**\n   * Sample proportional to stored loss (surprisal priority).\n   * High-loss examples are replayed more often.\n   */\n  samplePrioritised(k: number): ReplayEntry[] {\n    if (this.buf.length === 0) return [];\n    const total = this.buf.reduce((s, e) => s + e.loss, 0);\n    const samples: ReplayEntry[] = [];\n    for (let i = 0; i < Math.min(k, this.buf.length); i++) {\n      let r = Math.random() * total, cum = 0;\n      for (const entry of this.buf) {\n        cum += entry.loss;\n        if (r < cum) { samples.push(entry); break; }\n      }\n    }\n    return samples;\n  }\n\n  get size(): number { return this.buf.length; }\n\n  clear(): void {\n    this.buf = [];\n    this.n = 0;\n  }\n}\n\n// ═══════════════════════════════════════════════════════════════════════\n// Adaptive LR — dual EMA shift detection\n// Fast EMA tracks recent loss, slow EMA tracks trend.\n// When fast/slow > ratio → distribution shift → boost LR\n// ═══════════════════════════════════════════════════════════════════════\nexport interface AdaptiveLRState {\n  slow: number;  // slow EMA of loss\n  fast: number;  // fast EMA of loss\n  effectiveLR: number;\n}\n\nexport interface AdaptiveLRConfig {\n  enabled: boolean;\n  slowAlpha: number;  // e.g. 0.005\n  fastAlpha: number;  // e.g. 0.05\n  boostRatio: number; // e.g. 1.5 — trigger when fast/slow > this\n  boostFactor: number; // e.g. 3.0 — multiply LR by this during shift\n}\n\nexport function createAdaptiveLRState(initialLoss = 5.5): AdaptiveLRState {\n  return { slow: initialLoss, fast: initialLoss, effectiveLR: 0 };\n}\n\nexport function adaptLR(\n  baseLR: number,\n  lossBits: number,\n  state: AdaptiveLRState,\n  config: AdaptiveLRConfig,\n): number {\n  if (!config.enabled) {\n    state.effectiveLR = baseLR;\n    return baseLR;\n  }\n\n  state.slow = config.slowAlpha * lossBits + (1 - config.slowAlpha) * state.slow;\n  state.fast = config.fastAlpha * lossBits + (1 - config.fastAlpha) * state.fast;\n\n  const ratio = state.fast / (state.slow + 1e-8);\n  const lr = ratio > config.boostRatio ? baseLR * config.boostFactor : baseLR;\n  state.effectiveLR = lr;\n  return lr;\n}\n\n// ═══════════════════════════════════════════════════════════════════════\n// Mechanism stats — counters for UI display\n// ═══════════════════════════════════════════════════════════════════════\nexport interface MechanismStats {\n  updates: number;\n  skips: number;\n  replays: number;\n  clips: number;\n  lrBoosts: number;\n}\n\nexport function createStats(): MechanismStats {\n  return { updates: 0, skips: 0, replays: 0, clips: 0, lrBoosts: 0 };\n}\n",[],[165,316],["D",1774395976131],[202],[165],"50f8f236-27dc-11f1-bdcd-42dde27851f2","loop.ts","50f8f33a-27dc-11f1-bdcd-42dde27851f2",12,["D",1774396262971],"/**\n * engine/loop.ts — Online training loop\n *\n * Implements the prequential protocol: predict → observe → update.\n * Coordinates model, mechanisms, and corpus into a single observation step.\n */\nimport { CTX, BOS, sampleFrom, topK, type ModelParams, type ModelGrads, type ForwardCache } from \"../model/core.ts\";\nimport { forward } from \"../model/forward.ts\";\nimport { backward } from \"../model/backward.ts\";\nimport { sgdStep, clipGrads } from \"../model/optim.ts\";\nimport {\n  shouldUpdate,\n  adaptLR,\n  type SelectiveBackpropConfig,\n  type ReplayBuffer,\n  type AdaptiveLRState,\n  type AdaptiveLRConfig,\n  type MechanismStats,\n} from \"../mechanisms/index.ts\";\nimport { getPhaseAt, type Corpus, type PhaseBoundary } from \"../corpus/phases.ts\";\n\nexport interface HistoryEntry {\n  step: number;\n  targetId: number;\n  predicted: number;\n  loss: number;       // bits\n  pCorrect: number;\n  entropy: number;\n  phase: number;\n  skipped: boolean;\n  replayed: boolean;\n  topk: { id: number; p: number }[] | null;\n  attn: number[][] | null;\n}\n\nexport interface TrainingState {\n  model: ModelParams;\n  grads: ModelGrads;\n  context: number[];\n  step: number;\n  bytePos: number;\n  epoch: number;\n  cumBits: number;\n  history: HistoryEntry[];\n}\n\nexport interface LoopConfig {\n  lr: number;\n  chunkK: number;\n  loop: boolean;\n  selBackprop: SelectiveBackpropConfig;\n  replay: { enabled: boolean; k: number };\n  adaptiveLR: AdaptiveLRConfig;\n  gradClip: { enabled: boolean; maxNorm: number };\n}\n\n/**\n * Process a batch of tokens through the prequential loop.\n * Returns true if reached end of corpus (and not looping).\n */\nexport function processTokens(\n  state: TrainingState,\n  corpus: Corpus,\n  config: LoopConfig,\n  replayBuf: ReplayBuffer,\n  adaptiveLRState: AdaptiveLRState,\n  stats: MechanismStats,\n  count: number,\n  isLastOfBatch: (processed: number, count: number) => boolean = (p, c) => p === c - 1,\n): boolean {\n  const { model: p, grads: g, context: ctx } = state;\n  let processed = 0;\n\n  while (processed < count) {\n    // Epoch wrap\n    if (state.bytePos >= corpus.total) {\n      if (config.loop) {\n        state.bytePos = 0;\n        state.epoch++;\n      } else {\n        return true; // done\n      }\n    }\n\n    const targetId = corpus.bytes[state.bytePos];\n    const phaseIdx = getPhaseAt(corpus.boundaries, state.bytePos);\n    const tokens = ctx.slice(-CTX);\n\n    // Forward pass (prediction)\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(\n      (s, pr) => s + (pr > 1e-10 ? pr * Math.log2(pr) : 0), 0\n    );\n\n    state.step++;\n    state.cumBits += lossBits;\n\n    // Compute effective LR\n    const effectiveLR = adaptLR(config.lr, lossBits, adaptiveLRState, config.adaptiveLR);\n    if (config.adaptiveLR.enabled && effectiveLR > config.lr) stats.lrBoosts++;\n\n    // Decide whether to update\n    let skipped = false;\n    let replayed = false;\n    const readyForUpdate = state.step % config.chunkK === 0;\n\n    if (readyForUpdate) {\n      if (!shouldUpdate(lossBits, config.selBackprop)) {\n        skipped = true;\n        stats.skips++;\n      } else {\n        backward(p, g, cache, targetId);\n        stats.updates++;\n\n        // Replay\n        if (config.replay.enabled && replayBuf.size > 0) {\n          const samples = replayBuf.samplePrioritised(config.replay.k);\n          for (const s of samples) {\n            const rCache = forward(p, s.window);\n            backward(p, g, rCache, s.target);\n          }\n          if (samples.length > 0) { replayed = true; stats.replays++; }\n        }\n\n        // Gradient clipping\n        if (config.gradClip.enabled) {\n          const norm = clipGrads(g, config.gradClip.maxNorm);\n          if (norm > config.gradClip.maxNorm) stats.clips++;\n        }\n\n        sgdStep(p, g, effectiveLR);\n      }\n    }\n\n    // Store in replay buffer\n    if (config.replay.enabled) {\n      replayBuf.add(tokens, targetId, lossBits);\n    }\n\n    // Record history\n    const last = isLastOfBatch(processed, count);\n    state.history.push({\n      step: state.step, 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    // Advance context\n    ctx.push(targetId);\n    if (ctx.length > CTX) ctx.splice(0, ctx.length - CTX);\n    state.bytePos++;\n    processed++;\n  }\n\n  return false; // not done\n}\n",[],[170,327],"0b883318-27e3-11f1-b236-42dde27851f2","analytics.ts","0b88341c-27e3-11f1-b236-42dde27851f2",31,["D",1774399152965],"/**\n * engine/analytics.ts — Loss curve analysis\n *\n * Windowed slope (\"learning rate\" in the information-theoretic sense):\n * how fast is the model compressing? A negative slope means learning\n * is happening. The magnitude tells you how fast. A slope near zero\n * means the model has saturated at this data/capacity combination.\n *\n * Research context:\n * - The loss curve of an online learner is a compression curve.\n *   Cumulative BPB is literally the code length per symbol.\n * - Shannon's source coding theorem gives the floor: entropy of the\n *   source. The gap between model BPB and source entropy = model's\n *   remaining ignorance.\n * - The slope at any point is the instantaneous \"compression gain.\"\n *   Steep negative = rapid learning. Flat = saturated or stuck.\n *   Positive = forgetting (distribution shift, or instability).\n *\n * What windowed slope tells you:\n * - Sustained negative slope → model is still learning useful patterns\n * - Slope flattening → approaching capacity limit (for this data/model)\n * - Sharp positive spike → distribution shift (phase transition)\n * - Slope recovery after spike → adaptation to new distribution\n * - Slope getting less negative each epoch → diminishing returns\n *\n * The \"angle\" metaphor: if you drew a tangent line at any point on\n * the loss curve, the angle below horizontal = learning speed.\n * Horizontal = no learning. Tilting up = forgetting.\n */\n\nexport interface SlopeWindow {\n  startStep: number;\n  endStep: number;\n  slope: number;       // bits/byte per step (negative = improving)\n  meanLoss: number;    // average loss in window\n  phase: number;       // dominant phase in window\n}\n\n/**\n * Compute windowed slopes from history.\n * Returns one SlopeWindow per window of `windowSize` entries,\n * stepping by `stride` entries.\n *\n * Slope is computed by linear regression over the window.\n */\nexport function computeSlopes(\n  history: { loss: number; phase: number }[],\n  windowSize: number = 50,\n  stride: number = 25,\n): SlopeWindow[] {\n  const results: SlopeWindow[] = [];\n  if (history.length < windowSize) return results;\n\n  for (let start = 0; start + windowSize <= history.length; start += stride) {\n    const window = history.slice(start, start + windowSize);\n    const n = window.length;\n\n    // Linear regression: slope of loss vs position\n    let sumX = 0, sumY = 0, sumXY = 0, sumXX = 0;\n    for (let i = 0; i < n; i++) {\n      sumX += i;\n      sumY += window[i].loss;\n      sumXY += i * window[i].loss;\n      sumXX += i * i;\n    }\n    const slope = (n * sumXY - sumX * sumY) / (n * sumXX - sumX * sumX);\n    const meanLoss = sumY / n;\n\n    // Dominant phase: mode\n    const phaseCounts: Record<number, number> = {};\n    for (const h of window) phaseCounts[h.phase] = (phaseCounts[h.phase] || 0) + 1;\n    let maxCount = 0, dominantPhase = 0;\n    for (const [p, c] of Object.entries(phaseCounts)) {\n      if (c > maxCount) { maxCount = c; dominantPhase = parseInt(p); }\n    }\n\n    results.push({\n      startStep: start,\n      endStep: start + windowSize - 1,\n      slope,\n      meanLoss,\n      phase: dominantPhase,\n    });\n  }\n\n  return results;\n}\n\n/**\n * Detect distribution shifts: points where slope changes sign\n * from negative to positive (learning → forgetting).\n */\nexport function detectShifts(slopes: SlopeWindow[]): number[] {\n  const shifts: number[] = [];\n  for (let i = 1; i < slopes.length; i++) {\n    if (slopes[i - 1].slope < -0.001 && slopes[i].slope > 0.001) {\n      shifts.push(slopes[i].startStep);\n    }\n  }\n  return shifts;\n}\n\n/**\n * Interpret slope for UI display.\n */\nexport function interpretSlope(slope: number): {\n  label: string;\n  color: string;\n  description: string;\n} {\n  if (slope < -0.01) return {\n    label: \"learning fast\",\n    color: \"#4ade80\",\n    description: \"Model is rapidly improving its compression of this data.\",\n  };\n  if (slope < -0.002) return {\n    label: \"learning\",\n    color: \"#86efac\",\n    description: \"Model is steadily improving. Patterns are being captured.\",\n  };\n  if (slope < 0.002) return {\n    label: \"plateau\",\n    color: \"#fcd34d\",\n    description: \"Model has roughly saturated on current data/capacity.\",\n  };\n  if (slope < 0.01) return {\n    label: \"drifting\",\n    color: \"#fca5a5\",\n    description: \"Loss is increasing slightly. Possible distribution shift.\",\n  };\n  return {\n    label: \"forgetting\",\n    color: \"#ef4444\",\n    description: \"Loss rising sharply. Distribution shift or instability.\",\n  };\n}\n",[],[170,335],["D",1774396030221],[199,200],[170],"db25fc78-27e2-11f1-b51f-42dde27851f2","stories.ts","db25fd2c-27e2-11f1-b51f-42dde27851f2",27,["D",1774399071788],"/**\n * corpus/stories.ts — TinyStories-inspired simple narratives\n *\n * From Eldan & Li (2023): tiny models learn coherent English when the\n * training distribution uses simple vocabulary (3-4 year old level),\n * short sentences, clear narrative arcs, and high repetition of\n * common patterns. The key is matching data complexity to model capacity.\n *\n * These are hand-written in that spirit — short, repetitive structure,\n * limited vocabulary, lots of \"the X did Y\" patterns that a 12-token\n * context window can actually capture.\n */\n\nexport const STORIES_TEXT = `The cat sat on the mat. The cat was happy. The dog came in. The dog saw the cat. The cat ran away. The dog sat on the mat. The dog was happy too.\n\nThe girl had a red ball. She went to the park. She threw the ball. The ball went far. She ran to get the ball. She threw it again. She had fun at the park.\n\nThe boy was sad. He lost his toy. He looked in his room. He looked in the box. He found his toy. The boy was happy. He played with his toy all day.\n\nThe bird sat in the tree. The bird sang a song. The cat heard the song. The cat looked up. The bird flew away. The cat sat down. The bird came back and sang again.\n\nThe sun came up. The day was warm. The girl went out. She saw a dog. The dog was small. She gave the dog some food. The dog was happy. The girl was happy too.\n\nThe boy had a hat. The hat was blue. The wind came. The hat flew away. The boy ran after his hat. He got his hat back. He put it on his head.\n\nIt was time to eat. The girl sat down. She had some bread. She had some milk. The food was good. She ate it all. She was not hungry now.\n\nThe cat and the dog were friends. They played in the yard. The cat ran fast. The dog ran fast too. They were tired. They sat down to rest. They were happy friends.\n\nThe boy went to the lake. He saw a fish. The fish was big. He tried to catch the fish. The fish swam away. The boy tried again. This time he got the fish.\n\nThe girl found a flower. The flower was red. She gave it to her mom. Her mom was happy. She put the flower in a cup. The flower was pretty in the cup.`;\n\nexport const STORIES_PHASE = {\n  name: \"Simple stories\",\n  color: \"#34d399\",\n};\n",[],[176,346],"88ae0170-27e2-11f1-8c2a-42dde27851f2","simple-stories.ts","88ae024c-27e2-11f1-8c2a-42dde27851f2",22,["D",1774398933428],"/** corpus/simple-stories.ts — TinyStories-informed training data (Eldan & Li 2023) */\nexport const SIMPLE_STORIES = `Once there was a little cat named Tom. Tom liked to play in the garden. Every day Tom would run and jump in the grass. He was a happy cat.\n\nOne day Tom saw a big red ball. He wanted to play with the ball. He ran to the ball and pushed it with his nose. The ball rolled away. Tom ran after the ball. He pushed it again and again. Tom was very happy.\n\nThen it started to rain. Tom did not like the rain. He ran back to the house. He sat by the window and watched the rain fall. When the rain stopped Tom went back to the garden to play with his ball.\n\nOnce there was a little girl named Lily. Lily had a small dog named Max. Max was brown and white. Lily and Max liked to go to the park.\n\nAt the park Lily would throw a stick. Max would run and get the stick. He would bring it back to Lily. Then Lily would throw the stick again. They did this many times.\n\nOne day Max found a big puddle. He jumped in the puddle. The water went everywhere. Lily got wet. She laughed and laughed. Then Max shook his body and more water went on Lily. They were both wet but they were happy.\n\nOnce there was a boy named Sam. Sam had a red toy car. He liked to push the car on the floor. The car would go fast. Sam would say zoom zoom.\n\nSam took his car to school. He showed his car to his friend Ben. Ben said it is a nice car. Can I play with it. Sam said yes you can play with it. They took turns pushing the car.\n\nAfter school Sam and Ben went to the park. They pushed the car down the hill. The car went very fast. It went all the way to the tree. Sam and Ben ran to get it. They pushed it down the hill again and again.\n\nOnce there was a small bird. The bird was blue. It lived in a tall tree. Every morning the bird would sing a song. The song was pretty.\n\nOne day the bird flew to a new tree. In the new tree there was another bird. The other bird was yellow. The blue bird sang its song. The yellow bird sang too. They sang together. It was a very pretty song.\n\nThen more birds came. A red bird came. A green bird came. All the birds sang together in the tree. The tree was full of birds and songs. It was the best day.`;\n",[],[176,354],"8bf2e6ca-27e2-11f1-bda3-42dde27851f2","repetitive.ts","8bf2e7b0-27e2-11f1-bda3-42dde27851f2",23,["D",1774398938916],"/** corpus/repetitive.ts — Pattern data for fast-collapse demo */\nexport const REPETITIVE = `the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. the cat sat on the mat. `;\n",[],[176,362],"117bc3de-27e3-11f1-878e-42dde27851f2","phases.ts","30053d3c-27dc-11f1-b87c-42dde27851f2",32,["D",1774399162941],"/**\n * corpus/phases.ts — Corpus management\n *\n * Imports text from separate corpus files and assembles into phases.\n * TinyStories-informed default: lead with simple stories that match\n * the model's capacity, then progressively harder distributions.\n */\nimport { SIMPLE_STORIES } from \"./simple-stories.ts\";\nimport { STORIES_TEXT } from \"./stories.ts\";\nimport { ENGLISH_TEXT } from \"./english.ts\";\nimport { JAVASCRIPT } from \"./code.ts\";\nimport { REPETITIVE } from \"./repetitive.ts\";\n\nexport interface Phase {\n  name: string; color: string; text: string;\n  enabled: boolean; id: number; builtIn: boolean;\n}\nexport interface PhaseBoundary {\n  start: number; end: number; name: string; color: string;\n}\nexport interface Corpus {\n  bytes: number[]; boundaries: PhaseBoundary[]; total: number;\n}\n\nexport const DEFAULT_PHASES: Omit<Phase, \"enabled\" | \"id\" | \"builtIn\">[] = [\n  { name: \"Simple stories\", color: \"#34d399\", text: SIMPLE_STORIES },\n  { name: \"More stories\", color: \"#4ade80\", text: STORIES_TEXT },\n  { name: \"English prose\", color: \"#38bdf8\", text: ENGLISH_TEXT },\n  { name: \"JavaScript\", color: \"#f59e0b\", text: JAVASCRIPT },\n  { name: \"Repetitive\", color: \"#c084fc\", text: REPETITIVE },\n];\n\nexport function buildCorpus(phases: Phase[]): Corpus {\n  const active = phases.filter(ph => ph.enabled);\n  const bytes: number[] = [], boundaries: PhaseBoundary[] = [];\n  let offset = 0;\n  for (const phase of active) {\n    const encoded = new TextEncoder().encode(phase.text);\n    boundaries.push({ start: offset, end: offset + encoded.length, name: phase.name, color: phase.color });\n    for (const b of encoded) bytes.push(b);\n    offset += encoded.length;\n  }\n  return { bytes, boundaries, total: bytes.length };\n}\n\nexport function getPhaseAt(boundaries: PhaseBoundary[], pos: number): number {\n  for (let i = 0; i < boundaries.length; i++) {\n    if (pos >= boundaries[i].start && pos < boundaries[i].end) return i;\n  }\n  return boundaries.length - 1;\n}\n\nexport function createDefaultPhases(): Phase[] {\n  return DEFAULT_PHASES.map((ph, i) => ({ ...ph, enabled: true, id: i, builtIn: true }));\n}\n",[],[176,370],"e0026ad8-27e2-11f1-b00f-42dde27851f2","english.ts","e0026ba0-27e2-11f1-b00f-42dde27851f2",28,["D",1774399079948],"/**\n * corpus/english.ts — English prose (proverbs, sayings)\n */\nexport const ENGLISH_TEXT = `The quick brown fox jumps over the lazy dog. A stitch in time saves nine. All that glitters is not gold. The pen is mightier than the sword. Actions speak louder than words. Fortune favours the bold. Every cloud has a silver lining. Birds of a feather flock together. When in Rome, do as the Romans do. A journey of a thousand miles begins with a single step. Still waters run deep. The early bird catches the worm. Too many cooks spoil the broth. Necessity is the mother of invention. Rome was not built in a day. Where there is a will there is a way. The grass is always greener on the other side. Honesty is the best policy in life and in love. Practice makes perfect and patience makes progress. Knowledge is power and power is responsibility. The best things in life are free. A friend in need is a friend indeed. Experience is the best teacher of all. Time and tide wait for no man.`;\n\nexport const ENGLISH_PHASE = {\n  name: \"English prose\",\n  color: \"#4ade80\",\n};\n",[],[176,378],"f86be018-27e2-11f1-88c6-42dde27851f2","code.ts","900d39b8-27e2-11f1-b433-42dde27851f2",30,["D",1774399120894],"/**\n * corpus/code.ts — JavaScript code samples\n */\nexport const JAVASCRIPT = `function fibonacci(n) {\n  if (n <= 1) return n;\n  let a = 0, b = 1;\n  for (let i = 2; i <= n; i++) {\n    let temp = a + b;\n    a = b; b = temp;\n  }\n  return b;\n}\nfunction isPrime(n) {\n  if (n < 2) return false;\n  for (let i = 2; i * i <= n; i++) {\n    if (n % i === 0) return false;\n  }\n  return true;\n}\nfunction mergeSort(arr) {\n  if (arr.length <= 1) return arr;\n  const mid = Math.floor(arr.length / 2);\n  return merge(mergeSort(arr.slice(0, mid)), mergeSort(arr.slice(mid)));\n}\nfunction merge(left, right) {\n  const result = []; let i = 0, j = 0;\n  while (i < left.length && j < right.length) {\n    if (left[i] <= right[j]) result.push(left[i++]);\n    else result.push(right[j++]);\n  }\n  return result.concat(left.slice(i)).concat(right.slice(j));\n}\nconsole.log(mergeSort([3, 1, 4, 1, 5, 9, 2, 6]));\n`;\n",[],[176,386],["D",1774395979606],[192,193,194,195,196,197],[176],["D",1774395967725],{"_94":93,"_101":97},{"_94":93,"_95":-5,"_96":97,"_18":54,"_98":99,"_100":24},{"_13":83,"_31":84,"_42":41,"_85":43,"_86":-5,"_87":-5,"_88":-5,"_89":-5,"_90":-5,"_91":44,"_92":93},"ctx",{"_76":-5,"_122":433,"_434":435,"_436":437,"_438":24,"_439":24,"_440":24,"_441":120,"_442":-5,"_443":-7,"_444":-7,"_445":60,"_446":24,"_447":24,"_448":-5,"_449":24,"_450":24,"_451":24,"_452":-5},"ENV",{"_404":405,"_406":407,"_408":84,"_409":410,"_411":412,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424,"_425":426,"_427":428,"_429":430,"_431":432},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]
</article></body></html>

Diff · v43