`, 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

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_266":267,"_268":269},"routes/_app.x.$handle.$name",{"_104":103,"_32":45,"_113":90,"_27":36,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":125,"_126":127,"_128":25,"_129":130,"_131":59,"_132":-5,"_133":-5,"_134":135},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":54,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",4,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","api.ts","latestPath","fileId","0b87d8ac-8c63-11f1-850c-1607ee4eb77e","name","fileType","script","content","","// api.ts — the register: capture, backlog, weekly review, Claude proxy.\n// Mounted into the template's index.ts with: app.route(\"/api\", api)\n//\n// Env vars needed on the val:\n// REGISTER_PIN short PIN, typed once per device\n// ANTHROPIC_API_KEY powers the Suggest / Interrogate buttons\n\nimport { Hono } from \"npm:hono\";\nimport { getCookie, setCookie } from \"npm:hono/cookie\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nconst PIN = Deno.env.get(\"REGISTER_PIN\");\nconst AGE_THRESHOLD_WEEKS = 6;\nconst PROOF_TYPES = [\n \"before_after\",\n \"timelapse\",\n \"artifact_photo\",\n \"acquisition_photo\",\n];\n\n// ───────────────────────────────────────────────────────── schema\n\nlet ready = false;\nasync function init() {\n if (ready) return;\n await sqlite.batch([\n `CREATE TABLE IF NOT EXISTS inbox (\n id TEXT PRIMARY KEY, captured_at TEXT NOT NULL, source TEXT NOT NULL,\n raw TEXT NOT NULL, status TEXT NOT NULL DEFAULT 'pending', promoted_to TEXT)`,\n `CREATE TABLE IF NOT EXISTS backlog (\n id TEXT PRIMARY KEY, title TEXT NOT NULL, proof_type TEXT NOT NULL,\n proof_description TEXT NOT NULL, state TEXT NOT NULL DEFAULT 'backlog',\n fail_count INTEGER NOT NULL DEFAULT 0, first_captured_at TEXT NOT NULL,\n forced_until_week TEXT, killed_at TEXT)`,\n `CREATE TABLE IF NOT EXISTS backlog_inbox (\n backlog_id TEXT NOT NULL, inbox_id TEXT NOT NULL,\n PRIMARY KEY (backlog_id, inbox_id))`,\n `CREATE TABLE IF NOT EXISTS weeks (\n iso_week TEXT PRIMARY KEY, reviewed_at TEXT NOT NULL, required_json TEXT NOT NULL,\n cleared INTEGER, closed_at TEXT, card_session TEXT NOT NULL, verdict_json TEXT)`,\n ]);\n ready = true;\n}\n\n// ───────────────────────────────────────────────────────── helpers\n\nconst nid = () => crypto.randomUUID().slice(0, 8);\nconst now = () => new Date().toISOString();\n\nfunction isoWeek(d = new Date()): string {\n const t = new Date(\n Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), d.getUTCDate()),\n );\n const day = t.getUTCDay() || 7;\n t.setUTCDate(t.getUTCDate() + 4 - day);\n const start = new Date(Date.UTC(t.getUTCFullYear(), 0, 1));\n const week = Math.ceil(((t.getTime() - start.getTime()) / 86400000 + 1) / 7);\n return `${t.getUTCFullYear()}-W${String(week).padStart(2, \"0\")}`;\n}\n\nfunction nextIsoWeek(): string {\n const d = new Date();\n d.setUTCDate(d.getUTCDate() + 7);\n return isoWeek(d);\n}\n\nconst weeksSince = (iso: string) =>\n Math.floor((Date.now() - new Date(iso).getTime()) / (7 * 86400000));\n\nasync function rows(sql: string, args: unknown[] = []) {\n const r = await sqlite.execute({ sql, args });\n return r.rows.map((row) =>\n Object.fromEntries(r.columns.map((c, i) => [c, (row as any)[i]]))\n ) as Record[];\n}\n\nasync function claude(system: string, prompt: string) {\n const res = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"content-type\": \"application/json\",\n \"x-api-key\": Deno.env.get(\"ANTHROPIC_API_KEY\") ?? \"\",\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: \"claude-sonnet-4-6\",\n max_tokens: 1000,\n system,\n messages: [{ role: \"user\", content: prompt }],\n }),\n });\n const data = await res.json();\n return (data.content ?? [])\n .filter((b: any) => b.type === \"text\")\n .map((b: any) => b.text)\n .join(\"\\n\");\n}\n\nfunction parseJson(text: string) {\n const clean = text.replace(/```json/g, \"\").replace(/```/g, \"\").trim();\n const at = [clean.indexOf(\"[\"), clean.indexOf(\"{\")].filter((i) => i >= 0);\n return JSON.parse(clean.slice(Math.min(...at)));\n}\n\n// ───────────────────────────────────────────────────────── routes\n\nconst api = new Hono();\n\napi.post(\"/login\", async (c) => {\n const { pin } = await c.req.json().catch(() => ({}));\n if (!PIN || String(pin) !== PIN) return c.json({ error: \"wrong pin\" }, 401);\n setCookie(c, \"register\", PIN, {\n httpOnly: true,\n secure: true,\n sameSite: \"Lax\",\n maxAge: 60 * 60 * 24 * 365,\n });\n return c.json({ ok: true });\n});\n\napi.use(\"*\", async (c, next) => {\n if (c.req.path.endsWith(\"/login\")) return next();\n if (!PIN || getCookie(c, \"register\") !== PIN) {\n return c.json({ error: \"locked\" }, 401);\n }\n await init();\n return next();\n});\n\n// Capture. Deliberately the only endpoint with no constraint beyond non-empty\n// text — every gate lives at promotion, so nothing slows down an 11pm thought.\napi.post(\"/inbox\", async (c) => {\n const b = await c.req.json();\n const raw = String(b.raw ?? \"\").trim();\n if (!raw) return c.json({ error: \"empty\" }, 400);\n const entry = {\n id: nid(),\n captured_at: now(),\n source: [\"web\", \"voice\", \"shortcut\", \"review\"].includes(b.source)\n ? b.source\n : \"web\",\n raw,\n };\n await sqlite.execute({\n sql: `INSERT INTO inbox (id, captured_at, source, raw) VALUES (?, ?, ?, ?)`,\n args: [entry.id, entry.captured_at, entry.source, entry.raw],\n });\n return c.json({ ok: true, ...entry });\n});\n\napi.post(\"/inbox/discard\", async (c) => {\n const { ids } = await c.req.json();\n if (!Array.isArray(ids) || !ids.length) {\n return c.json({ error: \"no ids\" }, 400);\n }\n await sqlite.execute({\n sql: `UPDATE inbox SET status='discarded' WHERE id IN (${\n ids.map(() => \"?\").join(\",\")\n })`,\n args: ids,\n });\n return c.json({ ok: true });\n});\n\n// Promotion: raw scraps become one action carrying a proof contract.\napi.post(\"/backlog\", async (c) => {\n const b = await c.req.json();\n const from: string[] = Array.isArray(b.from_inbox) ? b.from_inbox : [];\n const title = String(b.title ?? \"\").trim();\n const desc = String(b.proof_description ?? \"\").trim();\n\n if (!title) return c.json({ error: \"title required\" }, 400);\n if (!PROOF_TYPES.includes(b.proof_type)) {\n return c.json({ error: \"bad proof_type\" }, 400);\n }\n // The vagueness gate: if no photo can be described, it isn't an action yet.\n if (desc.length < 10) {\n return c.json({ error: \"proof_description too vague\" }, 400);\n }\n\n let firstCaptured = now();\n if (from.length) {\n const linked = await rows(\n `SELECT captured_at FROM inbox WHERE id IN (${\n from.map(() => \"?\").join(\",\")\n })\n ORDER BY captured_at ASC LIMIT 1`,\n from,\n );\n // Age clock reads the earliest linked capture, so re-promoting an item\n // cannot launder how long it has actually been carried.\n if (linked.length) firstCaptured = linked[0].captured_at;\n }\n\n const id = nid();\n const batch: any[] = [{\n sql:\n `INSERT INTO backlog (id, title, proof_type, proof_description, first_captured_at)\n VALUES (?, ?, ?, ?, ?)`,\n args: [id, title, b.proof_type, desc, firstCaptured],\n }];\n for (const inboxId of from) {\n batch.push({\n sql:\n `INSERT OR IGNORE INTO backlog_inbox (backlog_id, inbox_id) VALUES (?, ?)`,\n args: [id, inboxId],\n });\n batch.push({\n sql: `UPDATE inbox SET status='promoted', promoted_to=? WHERE id=?`,\n args: [id, inboxId],\n });\n }\n await sqlite.batch(batch);\n return c.json({ ok: true, id });\n});\n\n// Kill, with purgatory. An item that failed while required owes one more forced\n// week, otherwise the rollover threat is escapable by simply deleting it.\napi.post(\"/backlog/kill\", async (c) => {\n const { id } = await c.req.json();\n const found = await rows(`SELECT * FROM backlog WHERE id=?`, [id]);\n if (!found.length) return c.json({ error: \"not found\" }, 404);\n if (found[0].forced_until_week && found[0].forced_until_week >= isoWeek()) {\n return c.json(\n { error: \"in purgatory until \" + found[0].forced_until_week },\n 409,\n );\n }\n await sqlite.execute({\n sql: `UPDATE backlog SET state='killed', killed_at=? WHERE id=?`,\n args: [now(), id],\n });\n return c.json({ ok: true });\n});\n\napi.post(\"/week\", async (c) => {\n const { required } = await c.req.json();\n if (!Array.isArray(required) || required.length < 1) {\n return c.json({ error: \"at least one required item\" }, 400);\n }\n const week = nextIsoWeek();\n const session = crypto.randomUUID().slice(0, 4);\n await sqlite.batch([\n {\n sql:\n `INSERT OR REPLACE INTO weeks (iso_week, reviewed_at, required_json, card_session)\n VALUES (?, ?, ?, ?)`,\n args: [week, now(), JSON.stringify(required), session],\n },\n {\n sql: `UPDATE backlog SET state='required'\n WHERE id IN (${required.map(() => \"?\").join(\",\")})`,\n args: required,\n },\n ]);\n return c.json({ ok: true, iso_week: week, card_session: session });\n});\n\napi.post(\"/week/close\", async (c) => {\n const b = await c.req.json();\n const week = String(b.iso_week ?? isoWeek());\n const done: string[] = Array.isArray(b.done) ? b.done : [];\n const found = await rows(`SELECT * FROM weeks WHERE iso_week=?`, [week]);\n if (!found.length) return c.json({ error: \"no such week\" }, 404);\n\n const required: string[] = JSON.parse(found[0].required_json);\n const failed = required.filter((r) => !done.includes(r));\n const cleared = failed.length === 0;\n const purgatory = nextIsoWeek();\n\n const batch: any[] = [{\n sql:\n `UPDATE weeks SET cleared=?, closed_at=?, verdict_json=? WHERE iso_week=?`,\n args: [cleared ? 1 : 0, now(), JSON.stringify({ done, failed }), week],\n }];\n if (done.length) {\n batch.push({\n sql: `UPDATE backlog SET state='done' WHERE id IN (${\n done.map(() => \"?\").join(\",\")\n })`,\n args: done,\n });\n }\n // Failures roll forward as mandatory, so a bad week makes the next one heavier\n // rather than letting the rest of the week go unstaked.\n for (const f of failed) {\n batch.push({\n sql:\n `UPDATE backlog SET state='backlog', fail_count=fail_count+1, forced_until_week=?\n WHERE id=?`,\n args: [purgatory, f],\n });\n }\n await sqlite.batch(batch);\n return c.json({ ok: true, cleared, award_vouch_point: cleared, failed });\n});\n\napi.get(\"/state\", async (c) => {\n const pending = await rows(\n `SELECT * FROM inbox WHERE status='pending' ORDER BY captured_at ASC`,\n );\n const backlog = await rows(\n `SELECT * FROM backlog WHERE state IN ('backlog','required')\n ORDER BY first_captured_at ASC`,\n );\n const weeks = await rows(\n `SELECT * FROM weeks ORDER BY iso_week DESC LIMIT 3`,\n );\n\n const enriched = backlog.map((b) => ({\n ...b,\n age_weeks: weeksSince(b.first_captured_at),\n needs_decision: weeksSince(b.first_captured_at) >= AGE_THRESHOLD_WEEKS,\n mandatory: !!b.forced_until_week && b.forced_until_week >= isoWeek(),\n }));\n\n return c.json({\n current_week: isoWeek(),\n inbox_pending: pending,\n backlog: enriched,\n mandatory_next_week: enriched.filter((b) => b.mandatory).map((b) => b.id),\n open_week: weeks.find((w) => w.cleared === null) ?? null,\n last_closed_week: weeks.find((w) => w.cleared !== null) ?? null,\n });\n});\n\n// The card is rebuilt from the database rather than stored in the browser, so\n// it can be re-screenshotted any time without drifting.\napi.get(\"/card\", async (c) => {\n const weeks = await rows(\n `SELECT * FROM weeks ORDER BY iso_week DESC LIMIT 3`,\n );\n const open = weeks.find((w) => w.cleared === null);\n if (!open) return c.json({ card: null });\n\n const ids: string[] = JSON.parse(open.required_json);\n const items = ids.length\n ? await rows(\n `SELECT title, proof_description FROM backlog\n WHERE id IN (${ids.map(() => \"?\").join(\",\")})`,\n ids,\n )\n : [];\n const backlog = await rows(\n `SELECT first_captured_at FROM backlog WHERE state='backlog'`,\n );\n const prev = weeks.find((w) => w.cleared !== null);\n const verdict = prev?.verdict_json ? JSON.parse(prev.verdict_json) : null;\n\n return c.json({\n card: {\n week: open.iso_week,\n session: open.card_session,\n reviewed_at: open.reviewed_at,\n required: items,\n backlog_count: backlog.length,\n oldest_weeks: backlog.length\n ? Math.max(...backlog.map((b) => weeksSince(b.first_captured_at)))\n : 0,\n cleared: prev ? !!prev.cleared : null,\n failed_count: verdict ? verdict.failed.length : 0,\n },\n });\n});\n\napi.post(\"/ai/promote\", async (c) => {\n const { raw } = await c.req.json();\n const out = await claude(\n 'You convert a vague captured note into ONE concrete physical action that can be photographed. Reply with JSON only, no prose: {\"title\":\"...\",\"proof_type\":\"before_after|timelapse|artifact_photo|acquisition_photo\",\"proof_description\":\"what the photo must show\"}. The title must be doable in a single sitting. If the note is really a multi-step project, make the title only its first step.',\n \"Captured note: \" + String(raw ?? \"\"),\n );\n try {\n return c.json(parseJson(out));\n } catch {\n return c.json({ error: \"could not parse\" }, 502);\n }\n});\n\napi.post(\"/ai/interrogate\", async (c) => {\n const { commitments, answers, questions } = await c.req.json();\n if (!answers) {\n const out = await claude(\n \"You interrogate someone about how they have been dodging their own commitment system. Ask exactly three short, pointed, specific questions likely to surface a loophole they are currently using. No preamble, no numbering, one question per line. Be direct rather than gentle.\",\n \"Their current commitments: \" + (commitments || \"none yet\") +\n \". A known past loophole: they blocked YouTube on their laptop, then started watching it on their phone instead.\",\n );\n return c.json({\n questions: out.split(\"\\n\").filter((l: string) => l.trim()).slice(0, 3),\n });\n }\n const out = await claude(\n 'Turn confessed loopholes into concrete closure actions that can be photographed. Reply with JSON only: an array of {\"title\":\"...\",\"proof_type\":\"before_after|timelapse|artifact_photo|acquisition_photo\",\"proof_description\":\"...\"}. One action per loophole, each doable in a single sitting. Maximum three.',\n \"Questions asked:\\n\" + (questions || []).join(\"\\n\") +\n \"\\n\\nTheir answers:\\n\" + answers,\n );\n try {\n return c.json({ proposals: parseJson(out) });\n } catch {\n return c.json({ proposals: [] });\n }\n});\n\nexport default api;","createdAt",["D",1785449270982],"branchVersion","branchId","77aeb2e4-2684-499f-b0b5-734576b3c68b","id","90ca6794-83fb-4ed4-bc24-63ae1b4c882d","Register",["D",1785448649481],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789581599&sig=be8c9241dcaf80ae72eff5d4763f3300ec6426a8bddc365a5efaae5f85e4dee1","ac016058-4dff-4268-a58d-c6377cb09a13","pinnedFileId","019fb508-534b-72f8-ae6b-7b2519b376d1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f1fab-a2bc-73b7-aa9b-5a23f068d628","tursoName","90ca679483fb4ed4bc2463ae1b4c882d","tursoHostname","90ca679483fb4ed4bc2463ae1b4c882d-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789561254403],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_112":108},"org",{"_104":103,"_105":106,"_107":108,"_18":55,"_109":110,"_111":25},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":93,"_94":95,"_96":50,"_97":98,"_99":100,"_101":45,"_102":103},"isOwned",37,"main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",91,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","wakawaka1","handle","displayName","waka waka","avatar","https://lh3.googleusercontent.com/a/ACg8ocIfPhdrpGDjFrYHrMnU190pz133j3MwBQZnU7s6gdFpOCob2Q=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":261,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":-5,"_53":54,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":262,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":263,"_84":264,"_86":265,"_88":25},"tree",[193,200,201,202,203],"files",[193,194,195,196,197,198,199,200,201,202,203],"counts",{"_183":63,"_184":154,"_185":63,"_186":187,"_188":189},"contents",[146,147,148,149,150],"upstreamProject",{"_43":98,"_32":142,"_52":143,"_53":54,"_49":50,"_82":144},"upstreamBranch",{"_43":93,"_38":136,"_137":138,"_32":90,"_91":98,"_13":95,"_92":-5,"_94":-5,"_139":140,"_47":-5,"_88":25,"_49":50,"_102":141,"_64":100,"_101":142},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_104":141,"_112":145},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789581599&sig=bed85510764f48a9de82762af4b4ce99c525d0ab75e5b57f327c71a53e183d4a",{"_43":177,"_32":178,"_30":179,"_153":-5,"_41":42,"_40":154,"_155":59,"_38":180,"_13":63,"_33":181,"_35":-5,"_24":25,"_159":-5,"_27":182},{"_43":171,"_32":172,"_30":173,"_153":-5,"_41":42,"_40":154,"_155":59,"_38":174,"_13":63,"_33":20,"_35":175,"_24":25,"_159":-5,"_27":176},{"_43":165,"_32":166,"_30":167,"_153":-5,"_41":42,"_40":154,"_155":59,"_38":168,"_13":63,"_33":20,"_35":169,"_24":25,"_159":-5,"_27":170},{"_43":161,"_32":28,"_30":31,"_153":-5,"_41":42,"_40":14,"_155":25,"_38":162,"_13":163,"_33":34,"_35":37,"_24":25,"_159":-5,"_27":164},{"_43":151,"_32":152,"_30":57,"_153":-5,"_41":42,"_40":154,"_155":25,"_38":156,"_13":63,"_33":157,"_35":158,"_24":25,"_159":-5,"_27":160},"f3ee24aa-b2ca-4233-9e1b-c17db62b78fc","index.ts","parentId",1,"latest",["D",1785448649481],"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","label",[152],"5f9bb269-10d5-4499-8f5b-cd4b8eb9412c",["D",1785449270982],2,[28],"61a5ee95-de07-479e-af80-d53a114ac8db","README.md","019fb508-534b-72f8-ae6b-77805693e0dc",["D",1785448649481],"# 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",[166],"0a3f50aa-4135-40be-80cf-fe9d9a6f3138","CHANGELOG.md","019fb508-534b-72f8-ae6b-70d7a94155bc",["D",1785448649481],"# 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

Diff · v4