`, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[194,96,77],"8b52f64f-1f33-448b-9d3a-034695ed5477",["D",1786740647080],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { DATA } from \"../data.ts\";\n\nconst COLORS:any = {\n \"gpt-5.6-luna\":\"#8cf6ff\",\n \"gpt-5.6-sol\":\"#b98cff\",\n \"gpt-5.6-terra\":\"#ffcf70\",\n \"gpt-5.5\":\"#ff8fc9\",\n \"codex-auto-review\":\"#8b96aa\",\n \"LifeOS\":\"#76f2c8\",\n \"spotipipe\":\"#b98cff\",\n \"miscellaneous\":\"#ffcf70\",\n};\n\nconst modelName = (m:string) => ({\n \"gpt-5.6-luna\":\"GPT-5.6 Luna\",\n \"gpt-5.6-sol\":\"GPT-5.6 Sol\",\n \"gpt-5.6-terra\":\"GPT-5.6 Terra\",\n \"gpt-5.5\":\"GPT-5.5\",\n \"codex-auto-review\":\"Auto-review\",\n}[m] || m);\n\nconst fmtTokens=(n:number, dec=1)=>{\n if(n>=1e9) return `${(n/1e9).toFixed(dec)}B`;\n if(n>=1e6) return `${(n/1e6).toFixed(dec)}M`;\n if(n>=1e3) return `${(n/1e3).toFixed(dec)}K`;\n return `${Math.round(n)}`;\n};\nconst money=(n:number,c=\"CHF\")=> c===\"CHF\" ? `CHF ${n.toLocaleString(\"en-CH\",{maximumFractionDigits:2,minimumFractionDigits:2})}` : `$${n.toLocaleString(\"en-US\",{maximumFractionDigits:2,minimumFractionDigits:2})}`;\nconst pct=(a:number,b:number)=>b?`${(a/b*100).toFixed(1)}%`:\"0%\";\nconst dateLabel=(s:string)=>new Date(s+\"T12:00:00\").toLocaleDateString(\"en-GB\",{day:\"numeric\",month:\"short\"});\nconst fullDate=(s:string)=>new Date(s+\"T12:00:00\").toLocaleDateString(\"en-GB\",{weekday:\"long\",day:\"numeric\",month:\"long\",year:\"numeric\"});\n\nfunction useView(project:string){\n return useMemo(()=>{\n const all=project===\"All\";\n const pDaily:any = {};\n DATA.dailyProjects.forEach((r:any)=>{\n if(all || r.project_label===project){\n pDaily[r.date] ||= {tokens:0,usd:0,chf:0};\n pDaily[r.date].tokens += r.total_tokens;\n pDaily[r.date].usd += r.cost_usd;\n pDaily[r.date].chf += r.cost_chf;\n }\n });\n const totalTokens=Object.values(pDaily).reduce((a:number,b:any)=>a+b.tokens,0);\n const totalUsd=Object.values(pDaily).reduce((a:number,b:any)=>a+b.usd,0);\n const totalChf=Object.values(pDaily).reduce((a:number,b:any)=>a+b.chf,0);\n return {pDaily,totalTokens,totalUsd,totalChf};\n },[project]);\n}\n\nfunction Heatmap({project}:{project:string}){\n const [metric,setMetric]=useState<\"tokens\"|\"chf\"|\"usd\">(\"tokens\");\n const {pDaily}=useView(project);\n const [hover,setHover]=useState(null);\n const start=new Date(\"2026-07-01T12:00:00\");\n const end=new Date(\"2026-08-31T12:00:00\");\n const days:any[]=[];\n for(let d=new Date(start);d<=end;d.setDate(d.getDate()+1)){\n const key=d.toISOString().slice(0,10);\n days.push({date:key, dow:d.getDay(), ...pDaily[key]});\n }\n const vals=days.map((d:any)=>metric===\"tokens\"?(d.tokens||0):metric===\"usd\"?(d.usd||0):(d.chf||0));\n const max=Math.max(...vals,1);\n const firstOffset=(start.getDay()+6)%7;\n const cells=[...Array(firstOffset).fill(null),...days];\n const weeks=Math.ceil(cells.length/7);\n const dayByDate:any={}; DATA.daily.forEach((d:any)=>dayByDate[d.date]=d);\n return

ACTIVITY FIELD

Daily intensity

\n {([\"tokens\",\"chf\",\"usd\"] as const).map(x=>)}\n

JulAug

\n {Array.from({length:weeks},(_,w)=>Array.from({length:7},(_,r)=>{\n const idx=w*7+r, d=cells[idx];\n if(!d) return

;\n const v=metric===\"tokens\"?(d.tokens||0):metric===\"usd\"?(d.usd||0):(d.chf||0);\n const t=v?Math.pow(v/max,.58):0;\n const alpha=v?0.16+0.84*t:0.035;\n const glow=v?`0 0 ${2+12*t}px rgba(123,218,255,${0.05+0.17*t})`:\"none\";\n return

QuietIntense

\n {hover &&
\n {fullDate(hover.d.date)}\n {hover.d.tokens ? <>\n {metric===\"tokens\"?fmtTokens(hover.d.tokens):metric===\"usd\"?money(hover.d.usd,\"USD\"):money(hover.d.chf,\"CHF\")}\n
Tokens{fmtTokens(hover.d.tokens,2)}
\n
Equivalent{money(hover.d.chf,\"CHF\")}
\n {project===\"All\" && dayByDate[hover.d.date] && <>\n
\n
Cached input{fmtTokens(dayByDate[hover.d.date].cached_input_tokens)}
\n
Uncached{fmtTokens(dayByDate[hover.d.date].uncached_input_tokens)}
\n
Output{fmtTokens(dayByDate[hover.d.date].output_tokens)}
\n
Reasoning{fmtTokens(dayByDate[hover.d.date].reasoning_output_tokens)}
\n }\n : No local Codex activity}\n
}\n

\n}\n\nfunction Sparkline({project}:{project:string}){\n const {pDaily}=useView(project);\n const dates=DATA.daily.map((d:any)=>d.date);\n const vals=dates.map((d:string)=>pDaily[d]?.chf||0);\n const cum:number[]=[]; vals.reduce((a:number,v:number,i:number)=>(cum[i]=a+v,a+v),0);\n const max=Math.max(...cum,1), W=900,H=220,P=12;\n const pts=cum.map((v,i)=>`${P+i*(W-2*P)/(cum.length-1)},${H-P-v/max*(H-2*P)}`).join(\" \");\n const lunaX=P+dates.findIndex((d:string)=>d>=\"2026-08-03\")*(W-2*P)/(dates.length-1);\n return
\n
COST TRAJECTORY
Cumulative equivalent spend
{money(cum.at(-1)||0,\"CHF\")}
\n \n
{dateLabel(dates[0])}{dateLabel(dates[Math.floor(dates.length/2)])}{dateLabel(dates.at(-1)!)}
\n
\n}\n\nfunction Breakdown({project}:{project:string}){\n const all=project===\"All\";\n const base:any[] = all ? Array.from(DATA.models as any) : Array.from(DATA.projectModels as any).filter((r:any)=>r.project_label===project);\n const rows:any[]=[];\n base.forEach((r:any)=>{\n const key=`${r.model}__${r.reasoning_effort}`;\n const ex=rows.find(x=>x.key===key);\n if(ex){ex.total_tokens+=r.total_tokens;ex.cost_usd+=r.cost_usd;ex.cost_chf+=r.cost_chf}\n else rows.push({key,...r});\n });\n rows.sort((a,b)=>b.total_tokens-a.total_tokens);\n const total=rows.reduce((a,r)=>a+r.total_tokens,0);\n return
\n
MODEL SPECTRUM
Where the tokens went
\n
\n {rows.map(r=>
\n
{modelName(r.model)}{r.reasoning_effort}{fmtTokens(r.total_tokens)}
\n
\n
{pct(r.total_tokens,total)} of tokens{money(r.cost_chf,\"CHF\")}
\n
)}\n
\n
\n}\n\nfunction ProjectCards({project,setProject}:{project:string,setProject:(x:string)=>void}){\n const total=(DATA.projects as any[]).reduce((a:any,r:any)=>a+r.total_tokens,0);\n return
\n
PROJECT ORBITS
Local work attribution
\n
\n {Array.from(DATA.projects as any).sort((a:any,b:any)=>b.total_tokens-a.total_tokens).map((p:any)=>)}\n
\n
Project attribution is based on Codex working-folder labels. The export resolved folders, not Git identities.
\n
\n}\n\nexport function App(){\n const [project,setProject]=useState(\"All\");\n const view=useView(project);\n const totals:any=DATA.totals;\n const all=project===\"All\";\n const tokens=all?totals.tokens:view.totalTokens;\n const chf=all?totals.chf:view.totalChf;\n const usd=all?totals.usd:view.totalUsd;\n const cacheRate=pct(totals.cached,totals.input);\n const avoided=(totals.nocacheUsd-totals.usd)*DATA.meta.fxUsdChf;\n const projLabel=project===\"All\"?\"MAC MINI // LOCAL ARCHIVE\":`PROJECT // ${project===\"spotipipe\"?\"SPOTIPIPE\":project.toUpperCase()}`;\n return
\n \n
\n
\n
CODEX OBSERVATORYSNAPSHOT · {DATA.meta.snapshot} · ZÜRICH
\n
{projLabel}
{fmtTokens(tokens,3)} tokens
under observation.
\n
A local telemetry portrait of model usage, project gravity and token-equivalent cost.
\n
\n \n \n \n \n
\n
\n\n
\n
01
THE FIELDHover the calendar. Switch the gravity.
{!all&&}
\n \n \n\n
\n \n \n
\n\n
\n
CACHE DIVIDEND{money(avoided,\"CHF\")}
Estimated token-equivalent cost avoided versus treating every input token as uncached.
\n
MODEL ECONOMICS49.2% tokens
Luna carries almost half of local token volume, while its current-rate equivalent cost is dramatically lighter than Sol.
\n
THE QUIET REVIEWER{fmtTokens(383612316)}
Auto-review tokens · about {money(206.031501*DATA.meta.fxUsdChf,\"CHF\")} equivalent at GPT-5.4 rates.
\n
\n\n
\n
PEAK TOKENS316.9M14 Aug · {money(67.241488*DATA.meta.fxUsdChf,\"CHF\")}
\n
PEAK COST{money(251.752423*DATA.meta.fxUsdChf,\"CHF\")}15 Jul · 289.2M tokens
\n
CURRENT STREAK14 days1 Aug → 14 Aug
\n
LOCAL COVERAGE38 days8 Jul → 14 Aug
\n
\n\n
\n
CODEX OBSERVATORY / v1Mac mini local telemetry · Europe/Zurich
\n
Costs are token-equivalent estimates, not an invoice. Standard mode only. USD→CHF snapshot: {DATA.meta.fxUsdChf}. Pricing rates are embedded as of 14 Aug 2026.
\n
\n
\n
\n}\n\nfunction Metric({label,value,sub}:{label:string,value:string,sub:string}){return
{label}{value}{sub}
}\n\nconst CSS = `\n:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;background:#06070a;color:#eef2f8;font-synthesis:none}\n*{box-sizing:border-box} body{margin:0;background:#06070a;overflow-x:hidden} button{font:inherit;color:inherit}\n.app{min-height:100vh;position:relative;isolation:isolate;background:radial-gradient(70% 45% at 25% 0%,rgba(68,57,120,.19),transparent 72%),radial-gradient(55% 35% at 82% 10%,rgba(31,112,118,.16),transparent 70%),linear-gradient(180deg,#08090d 0%,#050608 100%)}\n.noise{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.14;background-image:url(\"data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E\");mix-blend-mode:soft-light}\n.aurora{position:fixed;width:52vw;height:52vw;border-radius:50%;filter:blur(110px);opacity:.09;z-index:-2;pointer-events:none;animation:drift 28s ease-in-out infinite alternate}.a1{background:#7d62ff;left:-14vw;top:18vh}.a2{background:#47e0cf;right:-20vw;top:44vh;animation-delay:-11s;animation-duration:37s}@keyframes drift{to{transform:translate(10vw,-7vh) scale(1.13)}}@media(prefers-reduced-motion:reduce){.aurora{animation:none}}\n.hero{min-height:660px;padding:28px clamp(24px,6vw,90px) 52px;display:flex;flex-direction:column;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.08);position:relative}.topline{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.16em;color:#737b8c;text-transform:uppercase}.signal{display:flex;align-items:center;gap:9px}.signal i{width:6px;height:6px;border-radius:50%;background:#78f2c9;box-shadow:0 0 14px #78f2c9;animation:blink 3.2s ease infinite}@keyframes blink{50%{opacity:.38}}\n.hero-copy{max-width:980px;margin-top:80px}.kicker,.eyebrow{font-size:11px;letter-spacing:.19em;color:#8690a2;text-transform:uppercase}.hero h1{font-size:clamp(58px,8.4vw,126px);line-height:.84;letter-spacing:-.068em;margin:18px 0 24px;font-weight:520}.hero h1 span{background:linear-gradient(100deg,#f4f6ff 10%,#a8d9ff 48%,#85f1d7 90%);-webkit-background-clip:text;color:transparent;text-shadow:0 0 42px rgba(119,194,255,.12)}.hero-copy p{color:#8d95a5;max-width:620px;font-size:16px;line-height:1.6}.hero-metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.1);margin-top:65px}.metric{padding:22px 22px 4px 0;border-right:1px solid rgba(255,255,255,.07)}.metric:not(:first-child){padding-left:22px}.metric span,.metric small{display:block;color:#70798b;font-size:11px;text-transform:uppercase;letter-spacing:.08em}.metric strong{font-size:25px;font-weight:500;letter-spacing:-.03em;display:block;margin:8px 0}\nmain{padding:0 clamp(24px,6vw,90px) 60px;max-width:1600px;margin:auto}.section-title{display:flex;align-items:center;gap:14px;padding:70px 0 24px}.section-title>span{font:11px ui-monospace;color:#5d6676;border:1px solid #2b2f38;border-radius:50%;width:30px;height:30px;display:grid;place-items:center}.section-title div{display:flex;flex-direction:column;gap:3px}.section-title b{font-size:12px;letter-spacing:.13em}.section-title small{color:#646d7d}.filter-pill{margin-left:auto;background:rgba(134,117,255,.12);border:1px solid rgba(151,137,255,.35);padding:8px 12px;border-radius:99px;color:#c9c3ff;cursor:pointer}\n.panel{background:linear-gradient(180deg,rgba(18,20,27,.78),rgba(10,11,16,.78));border:1px solid rgba(255,255,255,.075);border-radius:20px;padding:26px;backdrop-filter:blur(20px);box-shadow:0 30px 80px rgba(0,0,0,.2);position:relative;overflow:hidden}.panel:before{content:\"\";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.025),transparent 33%);pointer-events:none}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}.panel h2{font-weight:460;font-size:23px;letter-spacing:-.03em;margin:7px 0 0}.seg{display:flex;padding:3px;background:#0a0c11;border:1px solid rgba(255,255,255,.08);border-radius:10px}.seg button,.tiny{border:0;background:transparent;color:#707a8c;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:11px}.seg button.active,.tiny.active{background:#1c2029;color:#fff;box-shadow:0 0 20px rgba(130,160,255,.08)}\n.heat-panel{min-height:390px}.heat-wrap{margin-top:42px}.month-labels{display:grid;grid-template-columns:1fr 1fr;color:#687183;font-size:11px;margin:0 0 10px 3px}.heat-grid{display:grid;grid-template-rows:repeat(7,1fr);grid-auto-flow:column;gap:6px;width:100%}.heat-cell{aspect-ratio:1;border:0;border-radius:4px;min-width:7px;transition:transform .15s ease,filter .15s ease;cursor:crosshair;padding:0}.heat-cell:hover{transform:scale(1.22);filter:brightness(1.5);z-index:2}.heat-cell.empty{opacity:0;pointer-events:none}.heat-legend{display:flex;justify-content:flex-end;align-items:center;gap:5px;color:#596273;font-size:10px;margin-top:13px}.heat-legend i{width:8px;height:8px;border-radius:2px;background:#6bbcff}.heat-legend i:nth-of-type(1){opacity:.12}.heat-legend i:nth-of-type(2){opacity:.3}.heat-legend i:nth-of-type(3){opacity:.5}.heat-legend i:nth-of-type(4){opacity:.72}.heat-legend i:nth-of-type(5){opacity:1}\n.tooltip{position:fixed;z-index:100;width:275px;background:rgba(11,13,18,.96);border:1px solid rgba(255,255,255,.13);border-radius:13px;padding:14px 15px;box-shadow:0 18px 60px rgba(0,0,0,.55);pointer-events:none;backdrop-filter:blur(16px)}.tooltip>b{font-size:12px;color:#a5adbb}.tooltip>strong{display:block;font-size:23px;margin:7px 0 12px}.tooltip em{display:block;color:#596273;margin-top:9px}.tt-row{display:flex;justify-content:space-between;font-size:11px;color:#7d8697;margin-top:5px}.tt-row span:last-child{color:#c5ccd6}.tt-rule{height:1px;background:#252933;margin:9px 0}\n.curve{margin-top:18px}.big-inline{font-size:24px;letter-spacing:-.04em;color:#dce5f2}.curve svg{width:100%;height:220px;margin-top:30px;overflow:visible}.curve-labels{display:flex;justify-content:space-between;color:#596273;font-size:10px}.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;margin-top:18px}.bar-list{margin-top:26px;display:flex;flex-direction:column;gap:18px}.bar-meta{display:grid;grid-template-columns:10px 1fr auto auto;align-items:center;gap:8px}.dot{width:7px;height:7px;border-radius:50%;box-shadow:0 0 12px currentColor}.bar-meta b{font-size:12px;font-weight:520}.bar-meta small{color:#687183;text-transform:uppercase;font-size:9px;letter-spacing:.1em}.bar-meta em{font-style:normal;font-size:12px;color:#cbd2dd}.bar-track{height:5px;background:#11141b;border-radius:9px;margin:7px 0 5px;overflow:hidden}.bar-track i{display:block;height:100%;border-radius:9px}.bar-foot{display:flex;justify-content:space-between;color:#596273;font-size:10px}\n.project-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:25px}.project-card{min-height:145px;text-align:left;border:1px solid rgba(255,255,255,.075);background:#0a0c11;border-radius:14px;padding:16px;cursor:pointer;transition:.2s ease}.project-card:hover,.project-card.selected{border-color:rgba(159,147,255,.42);background:#10131b;transform:translateY(-2px)}.project-card span,.project-card strong,.project-card small{display:block}.project-card span{font-size:12px;color:#929aaa;margin-top:17px}.project-card strong{font-size:27px;letter-spacing:-.04em;margin-top:4px}.project-card small{font-size:10px;color:#5f6879;margin-top:5px}.project-orb{width:19px;height:19px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 4%,var(--orb) 25%,color-mix(in srgb,var(--orb),#000 50%) 70%);box-shadow:0 0 25px color-mix(in srgb,var(--orb),transparent 40%)}.footnote{font-size:10px;color:#525b6b;line-height:1.5;margin:16px 2px 0}\n.insights{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:18px;margin-top:18px}.insight{min-height:260px;border-radius:20px;padding:28px;border:1px solid rgba(255,255,255,.08);position:relative;overflow:hidden;background:#0b0d12}.insight strong{display:block;font-size:44px;letter-spacing:-.055em;margin-top:40px;font-weight:520}.insight strong small{font-size:14px;color:#677082;letter-spacing:0}.insight p{font-size:12px;line-height:1.65;color:#737c8d;max-width:360px}.cache{background:radial-gradient(circle at 78% 30%,rgba(76,242,193,.13),transparent 37%),#0b0d12}.contrast{background:radial-gradient(circle at 80% 20%,rgba(158,125,255,.15),transparent 42%),#0b0d12}.reviewer{background:radial-gradient(circle at 80% 20%,rgba(130,150,175,.11),transparent 42%),#0b0d12}.pulse-ring{position:absolute;width:150px;height:150px;border:1px solid rgba(112,255,210,.16);border-radius:50%;right:-25px;top:-35px;box-shadow:0 0 50px rgba(112,255,210,.08);animation:ring 6s ease-in-out infinite}@keyframes ring{50%{transform:scale(1.16);opacity:.45}}\n.records{margin-top:18px;border-top:1px solid rgba(255,255,255,.09);border-bottom:1px solid rgba(255,255,255,.09);display:grid;grid-template-columns:repeat(4,1fr)}.records>div{padding:30px 22px 30px 0;border-right:1px solid rgba(255,255,255,.07)}.records>div:not(:first-child){padding-left:22px}.records span,.records small{display:block;color:#60697a;font-size:10px;letter-spacing:.1em}.records strong{font-size:25px;font-weight:480;display:block;margin:8px 0}footer{display:flex;justify-content:space-between;gap:30px;padding:40px 0 0;color:#525b6b;font-size:10px;line-height:1.5}footer div{display:flex;flex-direction:column}footer p{max-width:600px;text-align:right;margin:0}\n@media(max-width:900px){.hero{min-height:600px}.hero-metrics,.records{grid-template-columns:1fr 1fr}.two-col,.insights{grid-template-columns:1fr}.heat-grid{gap:4px}.project-grid{grid-template-columns:1fr 1fr}.records>div:nth-child(2){border-right:0}.metric:nth-child(2){border-right:0}.topline span:last-child{display:none}}@media(max-width:560px){.hero{padding-left:20px;padding-right:20px}.hero h1{font-size:54px}.hero-metrics{grid-template-columns:1fr 1fr}.metric{padding:14px 10px 8px 0}.metric:not(:first-child){padding-left:10px}.metric strong{font-size:19px}main{padding-left:14px;padding-right:14px}.panel{padding:18px;border-radius:16px}.panel-head{flex-direction:column}.heat-grid{gap:3px}.project-grid{grid-template-columns:1fr}.insight{min-height:220px}.records{grid-template-columns:1fr 1fr}.records>div{padding:20px 10px}.records>div:not(:first-child){padding-left:10px}footer{flex-direction:column}footer p{text-align:left}.tooltip{width:245px}.seg{align-self:flex-end}}\n`;\n",[194,96,88],"pulls","branches","forks","envVars",{"_84":26,"_214":26},"connections",{"_84":26,"_213":26},"unfilledCount","emptyCount",{"_34":296,"_13":194,"_75":189,"_44":-5,"_36":37,"_191":41,"_198":24,"_38":297,"_40":26,"_78":97,"_188":-5,"_80":30,"_192":-5,"_232":298,"_17":299},{"_34":187,"_13":96,"_75":95,"_44":189,"_36":37,"_191":41,"_198":24,"_38":293,"_40":26,"_78":97,"_188":-5,"_80":30,"_192":-5,"_232":294,"_17":295},{"_34":202,"_13":88,"_75":87,"_44":95,"_36":37,"_191":85,"_198":24,"_38":290,"_40":41,"_78":79,"_188":204,"_80":30,"_192":-5,"_232":291,"_17":292},{"_34":197,"_13":77,"_75":76,"_44":95,"_36":37,"_191":41,"_198":24,"_38":287,"_40":26,"_78":79,"_188":200,"_80":30,"_192":-5,"_232":288,"_17":289},{"_34":279,"_13":280,"_75":281,"_44":189,"_36":37,"_191":282,"_198":24,"_38":283,"_40":26,"_78":79,"_188":284,"_80":30,"_192":-5,"_232":285,"_17":286},{"_34":272,"_13":273,"_75":274,"_44":189,"_36":37,"_191":41,"_198":24,"_38":275,"_40":26,"_78":21,"_188":276,"_80":30,"_192":-5,"_232":277,"_17":278},{"_34":264,"_13":265,"_75":266,"_44":189,"_36":37,"_191":267,"_198":24,"_38":268,"_40":41,"_78":79,"_188":269,"_80":30,"_192":-5,"_232":270,"_17":271},{"_34":256,"_13":257,"_75":258,"_44":189,"_36":37,"_191":259,"_198":24,"_38":260,"_40":26,"_78":79,"_188":261,"_80":30,"_192":-5,"_232":262,"_17":263},{"_34":249,"_13":250,"_75":251,"_44":189,"_36":37,"_191":137,"_198":24,"_38":252,"_40":41,"_78":79,"_188":253,"_80":30,"_192":-5,"_232":254,"_17":255},{"_34":242,"_13":243,"_75":244,"_44":-5,"_36":37,"_191":41,"_198":24,"_38":245,"_40":26,"_78":21,"_188":246,"_80":30,"_192":-5,"_232":247,"_17":248},{"_34":235,"_13":236,"_75":237,"_44":-5,"_36":37,"_191":41,"_198":24,"_38":238,"_40":26,"_78":21,"_188":239,"_80":30,"_192":-5,"_232":240,"_17":241},{"_34":227,"_13":228,"_75":110,"_44":-5,"_36":37,"_191":41,"_198":24,"_38":229,"_40":26,"_78":230,"_188":231,"_80":30,"_192":-5,"_232":233,"_17":234},"f38b1f46-f456-42f3-94c6-31bb80f28736","index.ts",["D",1786740461737],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[228],"8bbac4e8-1bfa-4882-b45a-326feda06fd7","README.md","01a00207-d0f6-73ab-b6be-eb967388788c",["D",1786740461737],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"root.tsx\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n root.tsx ← HTML shell (stamps immutable asset URLs)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/root.tsx`** is the HTML shell — it loads Twind and stamps\n immutable asset URLs for the favicon and React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[],[236],"fa4465ef-438f-49ef-8cc1-911e4b85aef9","CHANGELOG.md","01a00207-d0f6-73ab-b6be-e448eadfa7c2",["D",1786740461737],"# Changelog\n\n## 2026-07-30 — Immutable asset caching\n\nFrontend files are now served at version-addressed URLs\n(`/__immutable/45/frontend/index.tsx`) with\n`Cache-Control: public, max-age=31536000, immutable`, so repeat visits load the\nwhole client graph from the browser cache — roughly 3× faster (~665ms → ~157ms\nmeasured). Publishing your val bumps its version, which changes every URL, so\ncaches invalidate automatically. Old-version URLs return 404 after a publish\n(like Next.js build assets); a reload picks up the new version.\n\nWhat changed in the template:\n\n- `frontend/index.html` → [`frontend/root.tsx`](/frontend/root.tsx): the HTML\n shell is now JSX and stamps asset URLs with `immutableFileUrl()`\n- [`index.ts`](/index.ts): serves `Root()` at `/`, and one\n `app.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path))` route\n serves all frontend files\n\n### Upgrading an existing remix\n\nYour copy of this template doesn't update automatically. Two options:\n\n**Minimal (most of the benefit):** point both routes at `serveImmutableFile` —\nyour existing bare URLs redirect into versioned space, the new route serves\nthem, and the whole module graph gets cached (costs one redirect per page view):\n\n```ts\nimport { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\n\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/frontend/**/*\", (c) => serveImmutableFile(c.req.path)); // was serveFile\n```\n\n**Full upgrade (also removes the redirect):** three self-contained steps —\nno other files needed. Adjust the ``, favicon, and body of `Root()` to\nmatch your app's existing `index.html`, and stamp anything else your shell\nreferences directly (images, css) with `immutableFileUrl()`.\n\n1. Create `frontend/root.tsx`:\n\n```tsx\n/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"<!DOCTYPE html>\")}\n <html lang=\"en\">\n <head>\n <meta charSet=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>React Hono Val Town Starter\n

History · components