`, 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",{"_298":299,"_300":301},"routes/_app.x.$handle.$name",{"_105":104,"_32":46,"_114":91,"_27":37,"_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":60,"_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",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":55,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",33,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/tabs.tsx","latestPath","fileId","580ad3dc-aa59-11f1-a235-1607ee4eb77e","name","tabs.tsx","fileType","script","content","","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useRef, forwardRef } from \"https://esm.sh/react@18.2.0\";\nimport { T, PROOF, proofLabel, api, fileToBase64, fmt, Label, Btn, Field, Area, Panel, Stat } from \"./ui.tsx\";\n\n// frontend/components/tabs.tsx — everything outside the weekly review flow.\n\n// ───────────────────────────────────────────────────────── lock\n\nfunction Lock({ onIn }: any) {\n const [pin, setPin] = useState(\"\");\n const [err, setErr] = useState(null);\n async function go() {\n try { await api(\"/login\", { pin }); onIn(); }\n catch { setErr(\"wrong pin\"); }\n }\n return (\n

\n register\n setPin(e.target.value)}\n onKeyDown={(e: any) => e.key === \"Enter\" && go()} />\n

Unlock

\n {err &&

{err}

}\n

\n );\n}\n\n// ───────────────────────────────────────────────────────── active\n\nfunction ActiveItem({ item, onDone }: any) {\n const [busy, setBusy] = useState(false);\n const [verdict, setVerdict] = useState(null);\n const [note, setNote] = useState(\"\");\n const [pending, setPending] = useState(null);\n const file = useRef(null);\n\n async function send(image: string, withNote?: string) {\n setBusy(true);\n try {\n const r = await api(\"/verify\", { id: item.id, image, media_type: \"image/jpeg\", note: withNote });\n setVerdict(r);\n if (r.verdict === \"accept\") { setPending(null); onDone(); }\n } catch (e: any) {\n setVerdict({ verdict: \"reject\", message: e.message });\n }\n setBusy(false);\n }\n\n async function pick(e: any) {\n const f = e.target.files?.[0];\n if (!f) return;\n setBusy(true);\n const b64 = await fileToBase64(f);\n setPending(b64);\n await send(b64);\n }\n\n if (item.verified) {\n return (\n \n

{item.title}

\n verified\n

\n \n );\n }\n\n return (\n \n

{item.title}

\n {item.frozen_proof}\n

\n\n {verdict && verdict.verdict !== \"accept\" && (\n

{verdict.message}

\n )}\n\n {verdict?.verdict === \"unclear\" && pending && (\n

\n setNote(e.target.value)}\n placeholder=\"Explain it in one line — logged as an appeal.\" />\n

\n send(pending, note.trim())}>\n {busy ? \"…\" : \"Appeal\"}\n \n

\n )}\n\n \n

\n file.current?.click()}>\n {busy ? \"checking…\" : verdict ? \"Try another photo\" : \"Submit proof\"}\n \n

\n \n );\n}\n\nfunction Active({ onChanged }: any) {\n const [data, setData] = useState(null);\n\n async function load() {\n try { setData(await api(\"/active\")); } catch {}\n }\n useEffect(() => { load(); }, []);\n\n if (!data) {\n return

loading…

;\n }\n\n if (!data.items.length) {\n return (\n

\n this week\n

\n Nothing committed yet. Run the review to pick what you're on the hook for.\n

\n );\n }\n\n const left = data.items.filter((i: any) => !i.verified).length;\n return (\n

\n \n {data.overdue ? data.week + \" · overdue\" : data.upcoming ? data.week + \" · starts monday\" : \"this week\"}\n {\" · \"}{left ? left + \" outstanding\" : \"all clear\"}\n \n {data.overdue && (\n

\n This week never got closed. Finish what you can, then run the review —\n anything verified before you close still counts.\n

\n )}\n {data.items.map((i: any) => (\n { load(); onChanged?.(); }} />\n ))}\n

\n Submit proof when you do the thing, not on Sunday. Verified items can't be undone.\n

\n );\n}\n\n// ───────────────────────────────────────────────────────── capture\n\nfunction Capture({ state, reload }: any) {\n const [text, setText] = useState(\"\");\n const [recent, setRecent] = useState([]);\n const [busy, setBusy] = useState(false);\n const [open, setOpen] = useState(false);\n const [err, setErr] = useState(null);\n const ref = useRef(null);\n\n const pending = state?.inbox_pending ?? [];\n const filed = state?.backlog ?? [];\n const total = pending.length + filed.length;\n\n async function drop() {\n const raw = text.trim();\n if (!raw || busy) return;\n setBusy(true); setErr(null);\n try {\n await api(\"/inbox\", { raw, source: \"web\" });\n const lines = raw.split(\"\\n\").map((l) => l.trim()).filter(Boolean);\n setText(\"\");\n setRecent((r) => [...lines, ...r].slice(0, 3));\n ref.current?.focus();\n reload?.();\n } catch (e: any) { setErr(e.message); }\n setBusy(false);\n }\n\n return (\n

\n capture · one per line\n setText(e.target.value)}\n onKeyDown={(e: any) => { if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey)) drop(); }} />\n

\n \n {busy ? \"…\" : \"Drop it in\"}\n \n

\n {err &&

{err}

}\n {recent.length > 0 && (\n

\n just captured\n {recent.map((r, i) => (\n

{r}

\n ))}\n

\n )}\n\n {/* Collapsed by default so the default experience stays a bare box —\n read-only, with no edit or delete, so it can't become a place to\n tinker instead of capturing. */}\n

\n \n\n {open && (\n

\n {pending.length > 0 && (\n <>\n not filed yet · {pending.length}\n {pending.map((p: any) => (\n

{p.raw}

\n ))}\n

\n \n )}\n {filed.length > 0 && (\n <>\n filed · {filed.length}\n {filed.map((b: any) => (\n

\n \n {b.title}\n \n \n {b.age_weeks}w{b.mention_count > 0 ? \" · said \" + b.mention_count + \"x\" : \"\"}\n \n

\n ))}\n \n )}\n {total === 0 && (\n

Nothing yet.

\n )}\n

\n\n

\n Each line becomes its own item. Nothing to organise here — it all gets\n sorted in Sunday's review.\n

\n );\n}\n\n// ───────────────────────────────────────────────────────── yap\n\nfunction Yap() {\n const [text, setText] = useState(\"\");\n const [result, setResult] = useState(null);\n const [card, setCard] = useState(null);\n const [busy, setBusy] = useState(false);\n const [listening, setListening] = useState(false);\n const [err, setErr] = useState(null);\n const rec = useRef(null);\n\n const words = text.trim() ? text.trim().split(/\\s+/).length : 0;\n\n // Typing (and your phone's own dictation) is the primary path; the mic is a\n // convenience that appends into the same box, so nothing depends on it.\n function toggleMic() {\n const SR = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;\n if (!SR) { setErr(\"This browser has no built-in dictation — use your keyboard's mic key.\"); return; }\n if (listening) { rec.current?.stop(); setListening(false); return; }\n const r = new SR();\n r.continuous = true; r.interimResults = false; r.lang = \"en-NZ\";\n r.onresult = (e: any) => {\n let add = \"\";\n for (let i = e.resultIndex; i < e.results.length; i++) {\n if (e.results[i].isFinal) add += e.results[i][0].transcript + \" \";\n }\n if (add) setText((t) => (t ? t + \" \" : \"\") + add.trim());\n };\n r.onerror = () => setListening(false);\n r.onend = () => setListening(false);\n rec.current = r; r.start(); setListening(true);\n }\n\n async function save() {\n setBusy(true); setErr(null);\n try {\n const r = await api(\"/notes\", { text: text.trim(), source: listening ? \"dictation\" : \"typed\" });\n setResult(r); setText(\"\");\n const cr = await api(\"/notes/card\");\n setCard(cr.card);\n } catch (e: any) { setErr(e.message); }\n setBusy(false);\n }\n\n if (card) {\n return (\n

\n day complete\n

\n {card.passable\n ? \"Screenshot this for Vouch.\"\n : \"Too short to count — keep talking and save again.\"}\n

\n \n

\n Yap\n {fmt(card.created_at)}\n

\n {card.summary}\n

\n \n {card.word_count} words\n \n \n {card.week_count}/{card.target} this week · {card.total} total\n \n

\n \n {result && (\n

\n {result.created} new to inbox · {result.matched} matched existing\n

\n )}\n

\n { setCard(null); setResult(null); }}>New note\n

\n );\n }\n\n return (\n

\n yap · {words} words\n setText(e.target.value)}\n placeholder=\"Talk about anything. Only explicit intentions get pulled out — the rest just stays on the record.\" />\n

\n \n {busy ? \"reading…\" : \"Save\"}\n \n \n {listening ? \"Stop dictating\" : \"Dictate\"}\n \n

\n {err &&

{err}

}\n

\n {YAP_MIN} words or more counts toward the weekly goal. Things you mention\n repeatedly get counted against the item, not duplicated.\n

\n );\n}\n\nconst YAP_MIN = 150;\n\n// ───────────────────────────────────────────────────────── loopholes\n\nfunction Loopholes({ onChanged }: any) {\n const [d, setD] = useState(null);\n const [text, setText] = useState(\"\");\n const [busy, setBusy] = useState(false);\n const [just, setJust] = useState(null);\n const [err, setErr] = useState(null);\n\n async function load() {\n try { setD(await api(\"/loopholes\")); } catch {}\n }\n useEffect(() => { load(); }, []);\n\n if (!d) {\n return

loading…

;\n }\n\n const outstanding = d.open.filter((l: any) => !l.verified);\n\n return (\n

\n {outstanding.length > 0 && (\n

\n open · {outstanding.length} — the week can't clear until these close\n {outstanding.map((l: any) => (\n \n

{l.title}

\n \n {l.state === \"required\" ? \"this week\" : \"next week\"}\n \n

\n {l.frozen_proof}\n

\n \n ))}\n

\n Submit proof for these on the Active tab, same as anything else.\n

\n )}\n\n {just && (\n \n {just.required_now ? \"added to this week\" : \"mandatory next week\"}\n

{just.title}

\n {just.proof_description}\n

\n \n )}\n\n raise a loophole\n setText(e.target.value)}\n placeholder=\"I entered a Beeminder datapoint for a gym session I didn't do\" />\n

\n {\n setBusy(true); setErr(null);\n try {\n const r = await api(\"/loopholes/raise\", { text: text.trim() });\n setJust(r); setText(\"\"); await load(); onChanged?.();\n } catch (e: any) { setErr(e.message); }\n setBusy(false);\n }}>{busy ? \"…\" : \"Raise it\"}\n

\n {err &&

{err}

}\n

\n Anything raised here becomes required for the running week. Say it anyway —\n a system whose numbers are lying is worth less than a week of convenience.\n

\n\n {d.closed.length > 0 && (\n

\n closed · {d.closed.length}\n {d.closed.map((l: any) => (\n

\n \n {l.title}\n \n \n {l.verified_at ? new Date(l.verified_at).toLocaleDateString(\"en-NZ\") : \"done\"}\n \n

\n ))}\n

\n )}\n

\n );\n}\n\n// ───────────────────────────────────────────────────────── build\n\nfunction Drift({ d }: any) {\n if (!d) return null;\n return (\n

\n drift · last 8 weeks\n = 4 && d.weeks_cleared / d.weeks_closed < 0.5 ? T.owed : T.ink} />\n \n d.proof_submissions / 3 ? T.owed : T.ink} />\n 6 && d.capture_days_28d <= 3 ? T.owed : T.ink} />\n \n \n \n

\n );\n}\n\nfunction Build() {\n const [s, setS] = useState(null);\n const [idea, setIdea] = useState(\"\");\n const [mode, setMode] = useState<\"idle\" | \"review\">(\"idle\");\n const [verdict, setVerdict] = useState<\"pass\" | \"commit\">(\"pass\");\n const [pick, setPick] = useState(null);\n const [proof, setProof] = useState(\"\");\n const [note, setNote] = useState(\"\");\n const [shipNote, setShipNote] = useState(\"\");\n const [card, setCard] = useState(null);\n const [busy, setBusy] = useState(false);\n const [err, setErr] = useState(null);\n\n async function load() {\n try { setS(await api(\"/build/state\")); } catch {}\n }\n useEffect(() => { load(); }, []);\n\n if (!s) {\n return

loading…

;\n }\n\n if (card) {\n return (\n

\n improvement review · proof\n

\n Screenshot this for Vouch.\n

\n \n

\n Improvement review\n {fmt(card.reviewed_at)}\n

\n {card.verdict === \"commit\" ? \"Committed: \" + card.committed : \"Passed\"}\n

\n {card.note}\n

\n \n \n \n

\n = 4 ? T.owed : T.faint,\n }}>\n {card.consecutive_passes\n ? \"passed \" + card.consecutive_passes + \" in a row\"\n : \"review \" + card.cycle_count}\n \n {card.session}\n

\n \n

\n { setCard(null); setMode(\"idle\"); load(); }}>Done\n

\n );\n }\n\n if (mode === \"review\") {\n return (\n

\n \n\n verdict\n

\n setVerdict(\"pass\")}\n style={{ padding: \"7px 11px\", fontSize: 13 }}>Nothing this cycle\n setVerdict(\"commit\")}\n style={{ padding: \"7px 11px\", fontSize: 13 }}>Commit to one\n

\n\n {verdict === \"commit\" && (\n <>\n which one\n {s.ideas.length === 0 && (\n

\n No ideas queued. Add one below first.\n

\n )}\n {s.ideas.map((i: any) => (\n

setPick(i.id)} style={{\n display: \"flex\", gap: 12, padding: \"10px 0\",\n borderBottom: \"1px solid \" + T.line, cursor: \"pointer\",\n }}>\n

\n {i.text}\n

\n ))}\n

\n what the screenshot shows when it's done\n setProof(e.target.value)}\n placeholder=\"a before/after photo passing that previously got rejected\" />\n

\n \n )}\n\n {verdict === \"pass\" ? \"why nothing\" : \"why this one\"}\n setNote(e.target.value)}\n placeholder=\"friction's fine, rejections down to zero, nothing worth touching\" />\n\n {err &&

{err}

}\n\n

\n {\n setBusy(true); setErr(null);\n try {\n await api(\"/build/review\", {\n verdict, note: note.trim(), idea_id: pick, proof_description: proof.trim(),\n });\n const r = await api(\"/build/card\");\n setCard(r.card); setNote(\"\"); setProof(\"\"); setPick(null);\n } catch (e: any) { setErr(e.message); }\n setBusy(false);\n }}>{busy ? \"…\" : \"Finish review\"}\n setMode(\"idle\")}>Back\n

\n );\n }\n\n return (\n

\n {s.outstanding && (\n \n outstanding — blocks the next review\n

\n {s.outstanding.text}\n

\n {s.outstanding.proof_description}\n

\n setShipNote(e.target.value)}\n placeholder=\"one line on what changed\" />\n

\n {\n setBusy(true);\n await api(\"/build/ship\", { id: s.outstanding.id, note: shipNote.trim() });\n setShipNote(\"\"); await load(); setBusy(false);\n }}>Mark shipped\n

\n \n )}\n\n idea\n setIdea(e.target.value)}\n placeholder=\"verifier too strict on before/after items\" />\n

\n {\n setBusy(true);\n await api(\"/build/ideas\", { text: idea.trim() });\n setIdea(\"\"); await load(); setBusy(false);\n }}>Queue it\n

\n\n {s.ideas.length > 0 && (\n

\n queued · {s.ideas.length}\n {s.ideas.map((i: any) => (\n

\n {i.text}\n \n

\n ))}\n

\n )}\n\n

\n setMode(\"review\")}>\n {s.due ? \"Run the improvement review\" : \"Review early\"}\n \n

\n {s.last_reviewed_at\n ? \"last \" + new Date(s.last_reviewed_at).toLocaleDateString(\"en-NZ\") +\n (s.consecutive_passes ? \" · passed \" + s.consecutive_passes + \" in a row\" : \"\")\n : \"never reviewed\"}\n

\n );\n}\n\nexport { Lock, Active, Capture, Yap, Loopholes, Build };\n","createdAt",["D",1788744263797],"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",{"_105":104,"_113":109},"org",{"_105":104,"_106":107,"_108":109,"_18":56,"_110":111,"_112":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":94,"_95":96,"_97":51,"_98":99,"_100":101,"_102":46,"_103":104},"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",{"_44":45,"_32":46,"_39":293,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":-5,"_54":55,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":294,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":295,"_85":296,"_87":297,"_89":25},"tree",[200,210,211,212,213],"files",[200,201,202,203,204,205,206,207,208,209,210,211,212,213],"counts",{"_190":64,"_191":174,"_192":64,"_193":194,"_195":196},"contents",[147,148,149,150,151],"upstreamProject",{"_44":99,"_32":143,"_53":144,"_54":55,"_50":51,"_83":145},"upstreamBranch",{"_44":94,"_39":137,"_138":139,"_32":91,"_92":99,"_13":96,"_93":-5,"_95":-5,"_140":141,"_48":-5,"_89":25,"_50":51,"_103":142,"_65":101,"_102":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",{"_105":142,"_113":146},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789527599&sig=c0420a404df732002c03eca9bce405b755065f984097bbe146cb490e828e28ea",{"_44":184,"_32":185,"_30":186,"_154":-5,"_42":43,"_41":174,"_156":60,"_39":187,"_13":64,"_34":188,"_36":-5,"_24":25,"_161":-5,"_27":189},{"_44":178,"_32":179,"_30":180,"_154":-5,"_42":43,"_41":174,"_156":60,"_39":181,"_13":64,"_34":20,"_36":182,"_24":25,"_161":-5,"_27":183},{"_44":171,"_32":172,"_30":173,"_154":-5,"_42":43,"_41":174,"_156":60,"_39":175,"_13":64,"_34":20,"_36":176,"_24":25,"_161":-5,"_27":177},{"_44":163,"_32":164,"_30":165,"_154":-5,"_42":43,"_41":166,"_156":25,"_39":167,"_13":168,"_34":35,"_36":169,"_24":25,"_161":-5,"_27":170},{"_44":152,"_32":153,"_30":58,"_154":-5,"_42":43,"_41":155,"_156":60,"_39":157,"_13":158,"_34":159,"_36":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],"02db73e5-3ef0-4c6c-9bd6-f63287c6d9fe","api.ts","0b87d8ac-8c63-11f1-850c-1607ee4eb77e",20,["D",1788741132182],8,"// 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 YAP_MIN_WORDS = 150; // below this a note can't count toward the goal\nconst YAPS_PER_WEEK = 2; // the floor, not a target\nconst BUILD_CYCLE_DAYS = 14; // how often you look at the system itself\nconst DRIFT_WINDOW_DAYS = 56; // how far back the numbers read — longer, or it's noise\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 `CREATE TABLE IF NOT EXISTS notes (\n id TEXT PRIMARY KEY, created_at TEXT NOT NULL, source TEXT NOT NULL,\n text TEXT NOT NULL, word_count INTEGER NOT NULL, summary TEXT)`,\n `CREATE TABLE IF NOT EXISTS note_mentions (\n note_id TEXT NOT NULL, backlog_id TEXT NOT NULL,\n PRIMARY KEY (note_id, backlog_id))`,\n `CREATE TABLE IF NOT EXISTS ideas (\n id TEXT PRIMARY KEY, created_at TEXT NOT NULL, text TEXT NOT NULL,\n status TEXT NOT NULL DEFAULT 'open', proof_description TEXT,\n committed_at TEXT, shipped_at TEXT, shipped_note TEXT)`,\n `CREATE TABLE IF NOT EXISTS build_cycles (\n id TEXT PRIMARY KEY, reviewed_at TEXT NOT NULL, verdict TEXT NOT NULL,\n note TEXT, idea_id TEXT, card_session TEXT NOT NULL)`,\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 \"mention_count INTEGER NOT NULL DEFAULT 0\",\n \"last_mentioned_at TEXT\",\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\n// Weeks must roll over at the user's Sunday midnight, not UTC's — otherwise a\n// NZ week ends around midday Monday.\nfunction nzNow(): Date {\n return new Date(\n new Date().toLocaleString(\"en-US\", { timeZone: \"Pacific/Auckland\" }),\n );\n}\n\nconst isSunday = () => nzNow().getDay() === 0;\n\nfunction isoWeek(d = nzNow()): string {\n const t = new Date(Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()));\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 = nzNow();\n d.setDate(d.getDate() + 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, when } = 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 // Default is the week starting Monday. \"now\" opens the current week instead,\n // but only once — otherwise you could reopen mid-week and swap out an item\n // you were about to miss.\n const week = when === \"now\" ? isoWeek() : nextIsoWeek();\n if (when === \"now\") {\n const existing = await rows(`SELECT iso_week FROM weeks WHERE iso_week=?`, [\n week,\n ]);\n if (existing.length) {\n return c.json({ error: \"this week is already open\" }, 409);\n }\n }\n\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.\n// Adding to a live week is safe in a way that removing never would be: it only\n// ever increases what you owe, so there's no version of this that gets you off\n// the hook for something you were about to miss.\napi.post(\"/week/add\", async (c) => {\n const { items } = await c.req.json();\n if (!Array.isArray(items) || !items.length) {\n return c.json({ error: \"nothing to add\" }, 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 = isoWeek();\n const found = await rows(`SELECT * FROM weeks WHERE iso_week=?`, [week]);\n if (!found.length) {\n return c.json({ error: \"no week running — commit one first\" }, 404);\n }\n if (found[0].cleared !== null) {\n return c.json({ error: \"this week is already closed\" }, 409);\n }\n\n const existing: string[] = JSON.parse(found[0].required_json);\n const fresh = items.filter((i: any) => !existing.includes(i.id));\n if (!fresh.length) {\n return c.json({ error: \"already required this week\" }, 400);\n }\n\n const batch: any[] = [{\n sql: `UPDATE weeks SET required_json=? WHERE iso_week=?`,\n args: [JSON.stringify([...existing, ...fresh.map((f: any) => f.id)]), week],\n }];\n for (const it of fresh) {\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({\n ok: true,\n added: fresh.length,\n total: existing.length + fresh.length,\n });\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 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\n // Closing a week that's still running is only allowed once everything is\n // verified — otherwise a Wednesday review would bank failures for items you\n // still had four days to finish.\n if (week === isoWeek() && !cleared && !isSunday()) {\n return c.json({\n error: failed.length + \" still outstanding — the week isn't over yet\",\n }, 409);\n }\n\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\n// Follows the OPEN week, not the calendar week. A week stays open until it is\n// closed at review, so items committed in W36 must stay visible and completable\n// in W37 — otherwise rolling over the calendar hides work you still intend to do.\napi.get(\"/active\", async (c) => {\n const week = isoWeek();\n const weeks = await rows(\n `SELECT * FROM weeks WHERE cleared IS NULL ORDER BY iso_week ASC LIMIT 1`,\n );\n if (!weeks.length) return c.json({ week, items: [], open: false });\n\n const openWeek = weeks[0].iso_week;\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: openWeek,\n current_week: week,\n open: true,\n overdue: openWeek < week,\n upcoming: openWeek > week,\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 === openWeek,\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 // Credit the open week, not today's. The deadline that matters is when the\n // week gets closed at review; being late to close already costs the weekly\n // review goal, so it doesn't need punishing twice.\n const openWeeks = await rows(\n `SELECT iso_week FROM weeks WHERE cleared IS NULL ORDER BY iso_week ASC LIMIT 1`,\n );\n const week = openWeeks[0]?.iso_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 // A week committed for next Monday is not \"open\" — otherwise running the\n // review twice would offer to close a week that hasn't started.\n const open = weeks.find((w) => w.cleared === null && w.iso_week <= week) ??\n null;\n let canClose = false;\n if (open) {\n const ids: string[] = JSON.parse(open.required_json);\n const done = enriched.filter((b) =>\n ids.includes(b.id) && b.done_week === open.iso_week\n ).length;\n canClose = open.iso_week < week || isSunday() || done === ids.length;\n }\n\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: open,\n can_close: canClose,\n committed_next: weeks.find((w) =>\n w.cleared === null && w.iso_week > week\n ) ?? 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 // Display-only on the weekly card so a committed improvement can't sit\n // invisible for a fortnight. Deliberately not counted — the moment system\n // work affects cleared weeks, that number stops describing real-world output.\n const buildOutstanding = await rows(\n `SELECT text FROM ideas WHERE status='committed' LIMIT 1`,\n );\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 build_outstanding: buildOutstanding[0]?.text ?? null,\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, mention_count FROM backlog WHERE state='backlog'\n ORDER BY mention_count DESC, first_captured_at ASC LIMIT 5`,\n );\n const notes = await rows(\n `SELECT created_at, summary FROM notes WHERE summary IS NOT NULL\n ORDER BY created_at DESC LIMIT 6`,\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 (s.mention_count ? \", talked about \" + s.mention_count + \"x\" : \"\") +\n \")\"\n ).join(\"; \")\n : null,\n notes.length\n ? \"What they've been talking about lately:\\n\" +\n notes.map((n) =>\n new Date(n.created_at).toISOString().slice(0, 10) + \" — \" +\n n.summary\n ).join(\"\\n\")\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. An item they keep talking about but never choose is the strongest material you have; so is anything their recent notes contradict. 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\n// ───────────────────────────────────────────────────────── loopholes\n\n// A loophole raised here is mandatory for the running week, unlike the softer\n// pass-3 interrogation where only the worst confession is forced. The reasoning:\n// deliberately opening this tab means naming a live corruption of the system's\n// own numbers, and a system whose numbers are lying is worth more than a week\n// of convenience.\napi.post(\"/loopholes/raise\", async (c) => {\n const b = await c.req.json();\n const text = String(b.text ?? \"\").trim();\n if (text.length < 8) return c.json({ error: \"describe the loophole\" }, 400);\n\n let title = String(b.title ?? \"\").trim();\n let ptype = PROOF_TYPES.includes(b.proof_type)\n ? b.proof_type\n : \"artifact_photo\";\n let desc = String(b.proof_description ?? \"\").trim();\n\n if (!title || desc.length < 10) {\n const out = await claude(\n 'Someone has confessed a way they are cheating their own accountability system. Turn it into ONE concrete closure action that can be photographed, doable in a single sitting. Prefer structural fixes that remove the ability to cheat over promises to behave. Reply with JSON only: {\"title\":\"...\",\"proof_type\":\"before_after|timelapse|artifact_photo|acquisition_photo\",\"proof_description\":\"what the photo must show\"}. Write proof_description permissively — real wording and app names differ from expectations.',\n \"The loophole: \" + text,\n );\n try {\n const p = parseJson(out);\n title = title || p.title;\n ptype = PROOF_TYPES.includes(p.proof_type) ? p.proof_type : ptype;\n desc = desc.length >= 10 ? desc : p.proof_description;\n } catch { /* fall through to the raw confession */ }\n }\n if (!title) title = \"Close: \" + text.slice(0, 60);\n if (!desc || desc.length < 10) {\n desc = \"photo or screenshot showing the loophole is closed\";\n }\n\n const id = nid();\n const week = isoWeek();\n const openWeeks = await rows(\n `SELECT * FROM weeks WHERE cleared IS NULL ORDER BY iso_week ASC LIMIT 1`,\n );\n const running = openWeeks[0] ?? null;\n\n const batch: any[] = [{\n sql: `INSERT INTO backlog\n (id, title, proof_type, proof_description, first_captured_at, fuse_weeks, origin,\n frozen_proof, state, forced_until_week)\n VALUES (?, ?, ?, ?, ?, ?, 'loophole', ?, ?, ?)`,\n args: [\n id,\n title,\n ptype,\n desc,\n now(),\n AGE_FUSE_LOOPHOLE,\n desc,\n running ? \"required\" : \"backlog\",\n nextIsoWeek(),\n ],\n }];\n\n if (running) {\n const ids: string[] = JSON.parse(running.required_json);\n batch.push({\n sql: `UPDATE weeks SET required_json=? WHERE iso_week=?`,\n args: [JSON.stringify([...ids, id]), running.iso_week],\n });\n }\n await sqlite.batch(batch);\n\n return c.json({\n ok: true,\n id,\n title,\n proof_description: desc,\n required_now: !!running,\n week: running ? running.iso_week : week,\n });\n});\n\napi.get(\"/loopholes\", async (c) => {\n const openItems = await rows(\n `SELECT * FROM backlog WHERE origin='loophole' AND state IN ('backlog','required')\n ORDER BY first_captured_at DESC`,\n );\n const closed = await rows(\n `SELECT * FROM backlog WHERE origin='loophole' AND state='done'\n ORDER BY verified_at DESC LIMIT 15`,\n );\n const openWeeks = await rows(\n `SELECT iso_week FROM weeks WHERE cleared IS NULL ORDER BY iso_week ASC LIMIT 1`,\n );\n const openWeek = openWeeks[0]?.iso_week ?? null;\n\n return c.json({\n open_week: openWeek,\n open: openItems.map((b) => ({\n id: b.id,\n title: b.title,\n frozen_proof: b.frozen_proof || b.proof_description,\n state: b.state,\n fail_count: b.fail_count,\n verified: !!openWeek && b.done_week === openWeek,\n age_weeks: weeksSince(b.first_captured_at),\n })),\n closed: closed.map((b) => ({\n id: b.id,\n title: b.title,\n verified_at: b.verified_at,\n })),\n closed_total: closed.length,\n });\n});\n\n// ───────────────────────────────────────────────────────── notes\n\n// Extraction deliberately matches against what's already tracked instead of\n// always creating new items. A thing mentioned eleven times and never chosen is\n// the sharpest signal the system can produce, and it only exists if repeats\n// increment a counter rather than piling up as duplicates.\napi.post(\"/notes\", async (c) => {\n const b = await c.req.json();\n const text = String(b.text ?? \"\").trim();\n if (text.length < 20) return c.json({ error: \"too short\" }, 400);\n const words = text.split(/\\s+/).filter(Boolean).length;\n const source = b.source === \"dictation\" ? \"dictation\" : \"typed\";\n\n const open = await rows(\n `SELECT id, title FROM backlog WHERE state IN ('backlog','required')`,\n );\n const pending = await rows(\n `SELECT id, raw FROM inbox WHERE status='pending'`,\n );\n const known = [\n ...open.map((o) => ({ id: o.id, label: o.title })),\n ...pending.map((p) => ({ id: \"inbox:\" + p.id, label: p.raw })),\n ];\n\n const out = await claude(\n 'You read a personal voice-note transcript and pull out ONLY explicit intentions — things the speaker says they should, need, want, or keep meaning to do. Ignore observations, feelings, context and musings entirely; under-extracting is much better than over-extracting, because every extra item costs them time in a weekly review. Match each intention against the existing items given, by meaning rather than wording. Reply with JSON only: {\"summary\":\"one sentence on what this note was about\",\"intentions\":[{\"text\":\"the intention, phrased as an action\",\"matches_id\":\"\"}]}',\n \"Existing tracked items:\\n\" +\n (known.length\n ? known.map((k) => k.id + \" :: \" + k.label).join(\"\\n\")\n : \"(none)\") +\n \"\\n\\nTranscript:\\n\" + text,\n );\n\n let parsed: any;\n try {\n parsed = parseJson(out);\n } catch {\n parsed = { summary: null, intentions: [] };\n }\n\n const noteId = nid();\n const batch: any[] = [{\n sql: `INSERT INTO notes (id, created_at, source, text, word_count, summary)\n VALUES (?, ?, ?, ?, ?, ?)`,\n args: [noteId, now(), source, text, words, parsed.summary ?? null],\n }];\n\n let matched = 0, created = 0;\n const base = Date.now();\n for (const it of (parsed.intentions ?? [])) {\n const m = it.matches_id;\n if (m && !String(m).startsWith(\"inbox:\") && open.some((o) => o.id === m)) {\n matched++;\n batch.push({\n sql:\n `UPDATE backlog SET mention_count = mention_count + 1, last_mentioned_at = ?\n WHERE id = ?`,\n args: [now(), m],\n });\n batch.push({\n sql:\n `INSERT OR IGNORE INTO note_mentions (note_id, backlog_id) VALUES (?, ?)`,\n args: [noteId, m],\n });\n } else if (m && String(m).startsWith(\"inbox:\")) {\n matched++; // already waiting in the inbox — don't duplicate it\n } else if (it.text) {\n created++;\n batch.push({\n sql:\n `INSERT INTO inbox (id, captured_at, source, raw) VALUES (?, ?, ?, ?)`,\n args: [\n nid(),\n new Date(base + created).toISOString(),\n \"voice\",\n String(it.text).trim(),\n ],\n });\n }\n }\n await sqlite.batch(batch);\n\n return c.json({\n ok: true,\n id: noteId,\n word_count: words,\n summary: parsed.summary,\n matched,\n created,\n counts_toward_goal: words >= YAP_MIN_WORDS,\n });\n});\n\n// Day-complete page for Vouch. Only renders as passable once the note is\n// substantial — otherwise \"uh, testing\" would clear the goal and the mention\n// counts, which are the valuable part, would fill with filler.\napi.get(\"/notes/card\", async (c) => {\n const week = isoWeek();\n const recent = await rows(\n `SELECT * FROM notes ORDER BY created_at DESC LIMIT 20`,\n );\n if (!recent.length) return c.json({ card: null });\n\n const latest = recent[0];\n const since = new Date(nzNow());\n since.setDate(since.getDate() - 7);\n const thisWeek = recent.filter((n) => new Date(n.created_at) >= since);\n\n return c.json({\n card: {\n created_at: latest.created_at,\n word_count: latest.word_count,\n summary: latest.summary,\n week_count: thisWeek.length,\n target: YAPS_PER_WEEK,\n total: recent.length,\n passable: latest.word_count >= YAP_MIN_WORDS,\n week,\n },\n });\n});\n\napi.get(\"/notes/recent\", async (c) => {\n const recent = await rows(\n `SELECT id, created_at, word_count, summary FROM notes ORDER BY created_at DESC LIMIT 10`,\n );\n return c.json({ notes: recent });\n});\n\n// ───────────────────────────────────────────────────────── build track\n\n// Kept in its own tables, not in the backlog. That's what makes system work\n// structurally invisible to the cleared-weeks metric — not a filter someone has\n// to remember to apply, but a different place entirely.\n\nasync function drift() {\n const cutoff = new Date(Date.now() - DRIFT_WINDOW_DAYS * 86400000)\n .toISOString();\n const monthAgo = new Date(Date.now() - 28 * 86400000).toISOString();\n\n const weeks = await rows(\n `SELECT cleared FROM weeks WHERE cleared IS NOT NULL ORDER BY iso_week DESC LIMIT 8`,\n );\n const proofs = await rows(\n `SELECT verdict, appealed FROM proofs WHERE submitted_at >= ?`,\n [cutoff],\n );\n const captures = await rows(\n `SELECT captured_at FROM inbox WHERE captured_at >= ?`,\n [monthAgo],\n );\n const notes = await rows(`SELECT id FROM notes WHERE created_at >= ?`, [\n monthAgo,\n ]);\n const backlog = await rows(\n `SELECT first_captured_at FROM backlog WHERE state IN ('backlog','required')`,\n );\n const killed = await rows(`SELECT id FROM backlog WHERE killed_at >= ?`, [\n cutoff,\n ]);\n\n // Captures spread across many days means the letterbox is being used as\n // intended; captures bunched onto a couple of days means friction is pushing\n // you into batching them at review time.\n const days = new Set(captures.map((c) => String(c.captured_at).slice(0, 10)));\n\n return {\n weeks_closed: weeks.length,\n weeks_cleared: weeks.filter((w) => w.cleared).length,\n proof_submissions: proofs.length,\n rejections: proofs.filter((p) => p.verdict === \"reject\").length,\n appeals: proofs.filter((p) => p.appealed).length,\n captures_28d: captures.length,\n capture_days_28d: days.size,\n yaps_28d: notes.length,\n backlog_size: backlog.length,\n backlog_oldest_weeks: backlog.length\n ? Math.max(...backlog.map((b) => weeksSince(b.first_captured_at)))\n : 0,\n killed_recently: killed.length,\n };\n}\n\napi.post(\"/build/ideas\", async (c) => {\n const { text } = await c.req.json();\n const lines = String(text ?? \"\").split(\"\\n\").map((l) => l.trim()).filter(\n Boolean,\n );\n if (!lines.length) return c.json({ error: \"empty\" }, 400);\n const base = Date.now();\n await sqlite.batch(lines.map((t, i) => ({\n sql: `INSERT INTO ideas (id, created_at, text) VALUES (?, ?, ?)`,\n args: [nid(), new Date(base + i).toISOString(), t],\n })));\n return c.json({ ok: true, count: lines.length });\n});\n\napi.post(\"/build/ideas/drop\", async (c) => {\n const { id } = await c.req.json();\n await sqlite.execute({\n sql: `UPDATE ideas SET status='dropped' WHERE id=? AND status='open'`,\n args: [id],\n });\n return c.json({ ok: true });\n});\n\napi.get(\"/build/state\", async (c) => {\n const ideas = await rows(\n `SELECT * FROM ideas WHERE status IN ('open','committed') ORDER BY created_at ASC`,\n );\n const cycles = await rows(\n `SELECT * FROM build_cycles ORDER BY reviewed_at DESC LIMIT 20`,\n );\n\n const outstanding = ideas.find((i) => i.status === \"committed\") ?? null;\n const last = cycles[0] ?? null;\n const dueAt = last\n ? new Date(\n new Date(last.reviewed_at).getTime() + BUILD_CYCLE_DAYS * 86400000,\n ).toISOString()\n : null;\n\n let passes = 0;\n for (const cy of cycles) {\n if (cy.verdict === \"pass\") passes++;\n else break;\n }\n\n return c.json({\n ideas: ideas.filter((i) => i.status === \"open\"),\n outstanding,\n last_reviewed_at: last?.reviewed_at ?? null,\n due_at: dueAt,\n due: !dueAt || new Date(dueAt) <= new Date(),\n consecutive_passes: passes,\n cycle_count: cycles.length,\n drift: await drift(),\n });\n});\n\napi.post(\"/build/ship\", async (c) => {\n const { id, note } = await c.req.json();\n const found = await rows(`SELECT * FROM ideas WHERE id=?`, [id]);\n if (!found.length) return c.json({ error: \"not found\" }, 404);\n await sqlite.execute({\n sql:\n `UPDATE ideas SET status='shipped', shipped_at=?, shipped_note=? WHERE id=?`,\n args: [now(), String(note ?? \"\").trim() || null, id],\n });\n return c.json({ ok: true });\n});\n\n// Engagement is mandatory, committing is not. \"Nothing worth changing\" passes —\n// but it has to be a stated verdict rather than a shrug, because looking at\n// numbers that might say you're declining is the part that gets avoided.\napi.post(\"/build/review\", async (c) => {\n const { verdict, note, idea_id, proof_description } = await c.req.json();\n const reason = String(note ?? \"\").trim();\n if (reason.length < 10) return c.json({ error: \"say why, in one line\" }, 400);\n\n const committed = await rows(\n `SELECT * FROM ideas WHERE status='committed' LIMIT 1`,\n );\n if (committed.length) {\n return c.json({\n error: 'ship \"' + committed[0].text + \"\\\" first — it's still outstanding\",\n }, 409);\n }\n\n const batch: any[] = [];\n let ideaId: string | null = null;\n\n if (verdict === \"commit\") {\n if (!idea_id) return c.json({ error: \"pick an idea\" }, 400);\n if (String(proof_description ?? \"\").trim().length < 10) {\n return c.json({\n error: \"describe what the screenshot shows when it's done\",\n }, 400);\n }\n ideaId = idea_id;\n batch.push({\n sql:\n `UPDATE ideas SET status='committed', committed_at=?, proof_description=? WHERE id=?`,\n args: [now(), String(proof_description).trim(), idea_id],\n });\n }\n\n const session = crypto.randomUUID().slice(0, 4);\n batch.push({\n sql:\n `INSERT INTO build_cycles (id, reviewed_at, verdict, note, idea_id, card_session)\n VALUES (?, ?, ?, ?, ?, ?)`,\n args: [\n nid(),\n now(),\n verdict === \"commit\" ? \"commit\" : \"pass\",\n reason,\n ideaId,\n session,\n ],\n });\n await sqlite.batch(batch);\n return c.json({ ok: true, card_session: session });\n});\n\napi.get(\"/build/card\", async (c) => {\n const cycles = await rows(\n `SELECT * FROM build_cycles ORDER BY reviewed_at DESC LIMIT 20`,\n );\n if (!cycles.length) return c.json({ card: null });\n const last = cycles[0];\n\n let passes = 0;\n for (const cy of cycles) {\n if (cy.verdict === \"pass\") passes++;\n else break;\n }\n\n let committedText: string | null = null;\n if (last.idea_id) {\n const i = await rows(`SELECT text FROM ideas WHERE id=?`, [last.idea_id]);\n committedText = i[0]?.text ?? null;\n }\n\n return c.json({\n card: {\n reviewed_at: last.reviewed_at,\n verdict: last.verdict,\n note: last.note,\n committed: committedText,\n consecutive_passes: passes,\n cycle_count: cycles.length,\n session: last.card_session,\n drift: await drift(),\n },\n });\n});\n\nexport default api;",[164],"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",[172],"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 · v33