`, 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",{"_270":271,"_272":273},"routes/_app.x.$handle.$name",{"_104":103,"_32":45,"_113":90,"_27":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_20":-5,"_125":126,"_127":128,"_129":25,"_130":131,"_132":59,"_133":-5,"_134":-5,"_135":136},"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",10,"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;","// api.ts — the register: capture, backlog, live proof verification, weekly review.\n// Mounted into the template's index.ts with: app.route(\"/api\", api)\n//\n// Env vars: REGISTER_PIN, ANTHROPIC_API_KEY\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_FUSE_DEFAULT = 6; // weeks before an item forces a decision\nconst AGE_FUSE_LOOPHOLE = 2; // loophole closures burn faster\nconst RESHAPE_AT_FAILS = 3; // repeated failure means the item is misshapen\nconst PROOF_TYPES = [\n \"before_after\",\n \"timelapse\",\n \"artifact_photo\",\n \"acquisition_photo\",\n];\n\n// ───────────────────────────────────────────────────────── schema\n\nlet ready = false;\n\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 `CREATE TABLE IF NOT EXISTS proofs (\n id TEXT PRIMARY KEY, backlog_id TEXT NOT NULL, iso_week TEXT NOT NULL,\n submitted_at TEXT NOT NULL, verdict TEXT NOT NULL,\n appealed INTEGER NOT NULL DEFAULT 0, note TEXT, message TEXT)`,\n ]);\n // Columns added after the first deploy. SQLite has no IF NOT EXISTS for\n // columns, so each is attempted and its \"duplicate column\" error ignored.\n for (\n const col of [\n \"frozen_proof TEXT\",\n \"verified_at TEXT\",\n \"done_week TEXT\",\n \"appeal_count INTEGER NOT NULL DEFAULT 0\",\n \"fuse_weeks INTEGER NOT NULL DEFAULT 6\",\n \"origin TEXT NOT NULL DEFAULT 'capture'\",\n ]\n ) {\n try {\n await sqlite.execute(`ALTER TABLE backlog ADD COLUMN ${col}`);\n } catch { /* exists */ }\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\nconst inList = (n: number) => Array(n).fill(\"?\").join(\",\");\n\nasync function anthropic(body: any) {\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 ...body,\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\nconst claude = (system: string, prompt: string) =>\n anthropic({ system, messages: [{ role: \"user\", content: prompt }] });\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// ───────────────────────────────────────────────────────── auth\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\n\n// The only endpoint with no constraint beyond non-empty text — every gate lives\n// at promotion, so nothing slows down an 11pm thought. Newlines split (explicit\n// intent); commas don't, since \"milk, eggs and bread\" is one errand.\napi.post(\"/inbox\", async (c) => {\n const b = await c.req.json();\n const source = [\"web\", \"voice\", \"shortcut\", \"review\"].includes(b.source)\n ? b.source\n : \"web\";\n const lines = String(b.raw ?? \"\").split(\"\\n\").map((l) => l.trim()).filter(\n Boolean,\n );\n if (!lines.length) return c.json({ error: \"empty\" }, 400);\n\n const base = Date.now();\n const entries = lines.map((raw, i) => ({\n id: nid(),\n captured_at: new Date(base + i).toISOString(),\n source,\n raw,\n }));\n await sqlite.batch(entries.map((e) => ({\n sql: `INSERT INTO inbox (id, captured_at, source, raw) VALUES (?, ?, ?, ?)`,\n args: [e.id, e.captured_at, e.source, e.raw],\n })));\n return c.json({ ok: true, count: entries.length });\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 inList(ids.length)\n })`,\n args: ids,\n });\n return c.json({ ok: true });\n});\n\n// ───────────────────────────────────────────────────────── backlog\n\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 const origin = b.origin === \"loophole\" ? \"loophole\" : \"capture\";\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: no describable photo means 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 (${inList(from.length)})\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: `INSERT INTO backlog\n (id, title, proof_type, proof_description, first_captured_at, fuse_weeks, origin)\n VALUES (?, ?, ?, ?, ?, ?, ?)`,\n args: [\n id,\n title,\n b.proof_type,\n desc,\n firstCaptured,\n origin === \"loophole\" ? AGE_FUSE_LOOPHOLE : AGE_FUSE_DEFAULT,\n origin,\n ],\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\n// Three failures usually means the item is too big, not that you're lazy.\n// Reshaping resets the fail count; the age clock deliberately survives.\napi.post(\"/backlog/reshape\", async (c) => {\n const { id, title, proof_description } = await c.req.json();\n if (\n !String(title ?? \"\").trim() ||\n String(proof_description ?? \"\").trim().length < 10\n ) {\n return c.json(\n { error: \"needs a smaller title and a describable proof\" },\n 400,\n );\n }\n await sqlite.execute({\n sql:\n `UPDATE backlog SET title=?, proof_description=?, fail_count=0 WHERE id=?`,\n args: [String(title).trim(), String(proof_description).trim(), id],\n });\n return c.json({ ok: true });\n});\n\n// ───────────────────────────────────────────────────────── week\n\n// Commit. Each item freezes the proof description it will be judged against,\n// frozen so it can't be loosened later to fit whatever photo you happened to\n// take. The appeal flow is the release valve instead.\napi.post(\"/week\", async (c) => {\n const { items } = await c.req.json();\n if (!Array.isArray(items) || items.length < 1) {\n return c.json({ error: \"commit at least one item\" }, 400);\n }\n for (const it of items) {\n if (!it.id || String(it.frozen_proof ?? \"\").trim().length < 10) {\n return c.json(\n { error: \"every item needs a frozen proof description\" },\n 400,\n );\n }\n }\n\n const week = nextIsoWeek();\n const session = crypto.randomUUID().slice(0, 4);\n const ids = items.map((i: any) => i.id);\n\n const batch: any[] = [{\n sql:\n `INSERT OR REPLACE INTO weeks (iso_week, reviewed_at, required_json, card_session)\n VALUES (?, ?, ?, ?)`,\n args: [week, now(), JSON.stringify(ids), session],\n }];\n for (const it of items) {\n batch.push({\n sql:\n `UPDATE backlog SET state='required', frozen_proof=?, verified_at=NULL,\n done_week=NULL WHERE id=?`,\n args: [String(it.frozen_proof).trim(), it.id],\n });\n }\n await sqlite.batch(batch);\n return c.json({ ok: true, iso_week: week, card_session: session });\n});\n\n// Close is a report, not a judgement — items were verified live during the\n// week, so nothing here is self-reported.\napi.post(\"/week/close\", async (c) => {\n const b = await c.req.json();\n const week = String(b.iso_week ?? isoWeek());\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 if (found[0].cleared !== null) {\n return c.json({ ok: true, already: true, cleared: !!found[0].cleared });\n }\n\n const required: string[] = JSON.parse(found[0].required_json);\n const items = required.length\n ? await rows(\n `SELECT * FROM backlog WHERE id IN (${inList(required.length)})`,\n required,\n )\n : [];\n const done = items.filter((i) => i.done_week === week).map((i) => i.id);\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 inList(done.length)\n })`,\n args: done,\n });\n }\n // Failures roll forward as mandatory, so a bad week makes the next one\n // heavier rather than leaving the rest of this week unstaked.\n for (const f of failed) {\n batch.push({\n sql: `UPDATE backlog SET state='backlog', fail_count=fail_count+1,\n forced_until_week=?, frozen_proof=NULL WHERE id=?`,\n args: [purgatory, f],\n });\n }\n await sqlite.batch(batch);\n return c.json({\n ok: true,\n cleared,\n award_vouch_point: cleared,\n failed,\n done,\n });\n});\n\n// ───────────────────────────────────────────────────────── verification\n\napi.get(\"/active\", async (c) => {\n const week = isoWeek();\n const weeks = await rows(`SELECT * FROM weeks WHERE iso_week=?`, [week]);\n if (!weeks.length) return c.json({ week, items: [], open: false });\n\n const ids: string[] = JSON.parse(weeks[0].required_json);\n const items = ids.length\n ? await rows(\n `SELECT * FROM backlog WHERE id IN (${inList(ids.length)})`,\n ids,\n )\n : [];\n return c.json({\n week,\n open: weeks[0].cleared === null,\n items: items.map((i) => ({\n id: i.id,\n title: i.title,\n frozen_proof: i.frozen_proof,\n proof_type: i.proof_type,\n verified: i.done_week === week,\n verified_at: i.verified_at,\n appeal_count: i.appeal_count,\n })),\n });\n});\n\n// Vision check, framed permissively on purpose: a false accept only fools you,\n// and you know it. A false reject costs money and your trust in the whole\n// system, so the asymmetry is deliberate.\napi.post(\"/verify\", async (c) => {\n const { id, image, media_type, note } = await c.req.json();\n const week = isoWeek();\n const found = await rows(`SELECT * FROM backlog WHERE id=?`, [id]);\n if (!found.length) return c.json({ error: \"not found\" }, 404);\n const item = found[0];\n if (item.state !== \"required\") {\n return c.json({ error: \"not active this week\" }, 409);\n }\n if (!image) return c.json({ error: \"no image\" }, 400);\n\n const out = await anthropic({\n system:\n 'You verify that a task was completed, from a photo. Accept if the image is CONSISTENT with having done it — accept variants, near-matches, different naming, and partial views. Class names, product names and wording routinely differ from what was written in advance; that alone is never grounds for rejection. Reject ONLY if the image is clearly unrelated to the task, or clearly shows it was not done. If you are unsure, or one detail conflicts, return unclear with a single specific question rather than rejecting. False rejections are far more costly than false acceptances. Reply with JSON only: {\"verdict\":\"accept|unclear|reject\",\"message\":\"one short sentence\"}',\n messages: [{\n role: \"user\",\n content: [\n {\n type: \"image\",\n source: {\n type: \"base64\",\n media_type: media_type || \"image/jpeg\",\n data: image,\n },\n },\n {\n type: \"text\",\n text: \"Task: \" + item.title +\n \"\\nProof required: \" +\n (item.frozen_proof || item.proof_description) +\n (note ? \"\\n\\nTheir explanation of this image: \" + note : \"\"),\n },\n ],\n }],\n });\n\n let parsed: any;\n try {\n parsed = parseJson(out);\n } catch {\n parsed = {\n verdict: \"unclear\",\n message: \"Couldn't read that one — try again?\",\n };\n }\n\n const appealed = note ? 1 : 0;\n const batch: any[] = [{\n sql:\n `INSERT INTO proofs (id, backlog_id, iso_week, submitted_at, verdict, appealed, note, message)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [\n nid(),\n id,\n week,\n now(),\n parsed.verdict,\n appealed,\n note ?? null,\n parsed.message ?? null,\n ],\n }];\n if (parsed.verdict === \"accept\") {\n batch.push({\n sql:\n `UPDATE backlog SET verified_at=?, done_week=?, appeal_count=appeal_count+? WHERE id=?`,\n args: [now(), week, appealed, id],\n });\n }\n await sqlite.batch(batch);\n return c.json({ verdict: parsed.verdict, message: parsed.message });\n});\n\n// ───────────────────────────────────────────────────────── state\n\napi.get(\"/state\", async (c) => {\n const week = isoWeek();\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 8`,\n );\n\n const enriched = backlog.map((b) => {\n const age = weeksSince(b.first_captured_at);\n return {\n ...b,\n age_weeks: age,\n needs_decision: age >= (b.fuse_weeks ?? AGE_FUSE_DEFAULT),\n needs_reshape: b.fail_count >= RESHAPE_AT_FAILS,\n mandatory: !!b.forced_until_week && b.forced_until_week >= week,\n };\n });\n\n const closed = weeks.filter((w) => w.cleared !== null);\n return c.json({\n current_week: week,\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 cleared_count: closed.filter((w) => w.cleared).length,\n closed_count: closed.length,\n });\n});\n\napi.get(\"/card\", async (c) => {\n const weeks = await rows(\n `SELECT * FROM weeks ORDER BY iso_week DESC LIMIT 8`,\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, frozen_proof FROM backlog WHERE id IN (${\n inList(ids.length)\n })`,\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 const closed = weeks.filter((w) => w.cleared !== 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 cleared_count: closed.filter((w) => w.cleared).length,\n closed_count: closed.length,\n },\n });\n});\n\n// ───────────────────────────────────────────────────────── ai\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: {\"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. Write the proof_description as PERMISSIVELY as possible while still meaning the task was done — real names, class titles and wording routinely differ from what was written in advance, so allow for that explicitly.',\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/freeze\", async (c) => {\n const { title, proof_description } = await c.req.json();\n const out = await claude(\n 'Rewrite a proof requirement to be as permissive as possible while still meaning the task was genuinely done. Anticipate that real-world names, class titles, product names and wording will differ from what was written in advance, and allow for it explicitly. Reply with JSON only: {\"frozen_proof\":\"...\"}. One sentence.',\n \"Task: \" + title + \"\\nDraft proof requirement: \" + proof_description,\n );\n try {\n return c.json(parseJson(out));\n } catch {\n return c.json({ frozen_proof: proof_description });\n }\n});\n\n// The interrogation runs on evidence the system has collected — appeals used,\n// items missed, items quietly passed over — not on a generic prompt.\napi.post(\"/ai/interrogate\", async (c) => {\n const { answers, questions } = await c.req.json();\n\n if (!answers) {\n const appeals = await rows(\n `SELECT b.title, p.note FROM proofs p JOIN backlog b ON b.id = p.backlog_id\n WHERE p.appealed = 1 ORDER BY p.submitted_at DESC LIMIT 5`,\n );\n const failing = await rows(\n `SELECT title, fail_count FROM backlog WHERE fail_count > 0\n ORDER BY fail_count DESC LIMIT 5`,\n );\n const stale = await rows(\n `SELECT title, first_captured_at FROM backlog WHERE state='backlog'\n ORDER BY first_captured_at ASC LIMIT 5`,\n );\n\n const evidence = [\n appeals.length\n ? \"Talked the verifier into accepting: \" +\n appeals.map((a) => a.title + \" (\" + (a.note ?? \"\") + \")\").join(\"; \")\n : null,\n failing.length\n ? \"Committed then missed: \" +\n failing.map((f) => f.title + \" x\" + f.fail_count).join(\"; \")\n : null,\n stale.length\n ? \"Sitting untouched in the backlog: \" +\n stale.map((s) =>\n s.title + \" (\" + weeksSince(s.first_captured_at) + \"w)\"\n ).join(\"; \")\n : null,\n ].filter(Boolean).join(\"\\n\");\n\n const out = await claude(\n \"You interrogate someone about how they have been dodging their own commitment system. Use the evidence given to ask exactly three short, pointed, specific questions — quote their actual items rather than speaking generally. If the evidence is thin, ask about what they have avoided choosing, and why. No preamble, no numbering, one question per line. Direct rather than gentle.\",\n \"Evidence from their register:\\n\" + (evidence || \"No history yet.\") +\n \"\\n\\nA 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\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, ordered with the MOST DAMAGING loophole first. Write each proof_description permissively. Maximum four.',\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",1785455984025],"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=1789527599&sig=0d894086c0af42ecb01197039479c0fffb55aba894accf0a0e78adbfe9ad755c","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",1789474235934],"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":265,"_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":266,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":267,"_84":268,"_86":269,"_88":25},"tree",[196,203,204,205,206],"files",[196,197,198,199,200,201,202,203,204,205,206],"counts",{"_186":63,"_187":170,"_188":63,"_189":190,"_191":192},"contents",[147,148,149,150,151],"upstreamProject",{"_43":98,"_32":143,"_52":144,"_53":54,"_49":50,"_82":145},"upstreamBranch",{"_43":93,"_38":137,"_138":139,"_32":90,"_91":98,"_13":95,"_92":-5,"_94":-5,"_140":141,"_47":-5,"_88":25,"_49":50,"_102":142,"_64":100,"_101":143},"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":142,"_112":146},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789527599&sig=c0420a404df732002c03eca9bce405b755065f984097bbe146cb490e828e28ea",{"_43":180,"_32":181,"_30":182,"_154":-5,"_41":42,"_40":170,"_156":59,"_38":183,"_13":63,"_33":184,"_35":-5,"_24":25,"_161":-5,"_27":185},{"_43":174,"_32":175,"_30":176,"_154":-5,"_41":42,"_40":170,"_156":59,"_38":177,"_13":63,"_33":20,"_35":178,"_24":25,"_161":-5,"_27":179},{"_43":167,"_32":168,"_30":169,"_154":-5,"_41":42,"_40":170,"_156":59,"_38":171,"_13":63,"_33":20,"_35":172,"_24":25,"_161":-5,"_27":173},{"_43":163,"_32":28,"_30":31,"_154":-5,"_41":42,"_40":14,"_156":25,"_38":164,"_13":165,"_33":34,"_35":37,"_24":25,"_161":-5,"_27":166},{"_43":152,"_32":153,"_30":57,"_154":-5,"_41":42,"_40":155,"_156":59,"_38":157,"_13":158,"_33":159,"_35":160,"_24":25,"_161":-5,"_27":162},"9368fe7b-2b17-44ce-94c5-66d20c575044","index.ts","parentId",6,"latest",["D",1785449322682],2,"http","import {\n parseVal,\n serveImmutableFile,\n} from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport api from \"./api.ts\";\n\nconst app = new Hono();\napp.route(\"/api\", api);\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;","label",[153],"4246685f-300a-4f95-a2d7-16bce9b3e993",["D",1785455984025],4,[28],"61a5ee95-de07-479e-af80-d53a114ac8db","README.md","019fb508-534b-72f8-ae6b-77805693e0dc",1,["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",[168],"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 · v10