`, 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",{"_272":273,"_274":275},"routes/_app.x.$handle.$name",{"_105":104,"_32":46,"_114":91,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_20":-5,"_126":127,"_128":129,"_130":25,"_131":132,"_133":60,"_134":-5,"_135":-5,"_136":137},"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",11,"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/App.tsx","latestPath","fileId","019fb508-534b-72f8-ae6b-548fbea71bed","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/App.tsx — capture + weekly review.\n// Talks to /api/* on the same origin, so no CORS and no token to paste.\n// Pragma, React specifier and named export all match frontend/index.tsx.\n\nimport {\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\nconst T = {\n bg: \"#131614\",\n panel: \"#1B1F1D\",\n panel2: \"#232825\",\n line: \"#2E3431\",\n ink: \"#E4E8E5\",\n dim: \"#8D9691\",\n faint: \"#5C6561\",\n owed: \"#D9A03C\",\n clear: \"#5FB09B\",\n kill: \"#B4685C\",\n mono: \"ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace\",\n sans: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif\",\n};\n\nconst PROOF = [\n { v: \"before_after\", label: \"before / after\" },\n { v: \"timelapse\", label: \"timelapse\" },\n { v: \"artifact_photo\", label: \"photo of the result\" },\n { v: \"acquisition_photo\", label: \"photo of the thing\" },\n];\nconst proofLabel = (v: string) => PROOF.find((p) => p.v === v)?.label ?? v;\n\nasync function api(path: string, body?: any) {\n const res = await fetch(\"/api\" + path, {\n method: body ? \"POST\" : \"GET\",\n headers: { \"Content-Type\": \"application/json\" },\n body: body ? JSON.stringify(body) : undefined,\n });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) throw new Error(data.error || \"request failed\");\n return data;\n}\n\nconst fmt = (iso?: string) =>\n new Date(iso ?? Date.now()).toLocaleString(\"en-NZ\", {\n day: \"numeric\",\n month: \"short\",\n year: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n\n// ───────────────────────────────────────────────────────── primitives\n\nconst Label = ({ children }: any) => (\n \n {children}\n \n);\n\nfunction Btn({ children, onClick, tone = \"quiet\", disabled, style }: any) {\n const t: any = {\n quiet: { bg: \"transparent\", fg: T.dim, bd: T.line },\n solid: { bg: T.ink, fg: T.bg, bd: T.ink },\n owed: { bg: \"transparent\", fg: T.owed, bd: \"#4A3E22\" },\n kill: { bg: \"transparent\", fg: T.kill, bd: \"#4A2E29\" },\n }[tone];\n return (\n \n {children}\n \n );\n}\n\nconst Field = (p: any) => (\n \n);\n\nconst Area = forwardRef((p: any, ref: any) => (\n \n));\n\nconst Panel = ({ children, style }: any) => (\n \n {children}\n \n);\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 {\n await api(\"/login\", { pin });\n onIn();\n } catch {\n setErr(\"wrong pin\");\n }\n }\n return (\n

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

\n Unlock\n

\n {err && (\n \n {err}\n

\n )}\n

\n );\n}\n\n// ───────────────────────────────────────────────────────── capture\n\nfunction Capture() {\n const [text, setText] = useState(\"\");\n const [recent, setRecent] = useState([]);\n const [busy, setBusy] = useState(false);\n const [err, setErr] = useState(null);\n const ref = useRef(null);\n\n async function drop() {\n const raw = text.trim();\n if (!raw || busy) return;\n setBusy(true);\n setErr(null);\n try {\n await api(\"/inbox\", { raw, source: \"web\" });\n setText(\"\");\n setRecent((r) => [raw, ...r].slice(0, 3));\n ref.current?.focus();\n } catch (e: any) {\n setErr(e.message);\n }\n setBusy(false);\n }\n\n return (\n

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

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

\n {err && (\n \n {err}\n

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

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

\n ))}\n

\n )}\n\n \n Nothing to organise here. It all gets sorted in Sunday's review.\n

\n );\n}\n\n// ───────────────────────────────────────────────────────── passes\n\nfunction PassClose({ state, next }: any) {\n const open = state.open_week;\n const ids: string[] = JSON.parse(open.required_json);\n const items = ids.map((i) => state.backlog.find((b: any) => b.id === i))\n .filter(Boolean);\n const [done, setDone] = useState([]);\n const [busy, setBusy] = useState(false);\n\n return (\n

\n pass 1 — last week's verdict\n {items.length === 0 && (\n

\n Nothing required.\n

\n )}\n {items.map((it: any) => {\n const on = done.includes(it.id);\n return (\n \n

\n \n setDone((d) =>\n on ? d.filter((x) => x !== it.id) : [...d, it.id]\n )}\n style={{\n flexShrink: 0,\n width: 26,\n height: 26,\n borderRadius: 5,\n marginTop: 1,\n border: \"1px solid \" + (on ? T.clear : T.line),\n background: on ? T.clear : \"transparent\",\n color: T.bg,\n cursor: \"pointer\",\n fontSize: 14,\n }}\n >\n {on ? \"✓\" : \"\"}\n \n

\n \n {it.title}\n

\n \n {it.proof_description}\n

\n \n );\n })}\n \n Only tick what you have proof for. Anything unticked becomes mandatory\n next week.\n

\n {\n setBusy(true);\n const v = await api(\"/week/close\", { iso_week: open.iso_week, done });\n next({ verdict: v });\n }}\n >\n {busy ? \"…\" : \"Close the week\"}\n \n

\n );\n}\n\nfunction PassInbox({ state, next, reload }: any) {\n const [queue, setQueue] = useState(state.inbox_pending);\n const [title, setTitle] = useState(\"\");\n const [ptype, setPtype] = useState(\"artifact_photo\");\n const [pdesc, setPdesc] = useState(\"\");\n const [busy, setBusy] = useState(false);\n const [think, setThink] = useState(false);\n const cur = queue[0];\n\n useEffect(() => {\n setTitle(cur ? cur.raw : \"\");\n setPdesc(\"\");\n setPtype(\"artifact_photo\");\n }, [cur?.id]);\n\n if (!cur) {\n return (\n

\n pass 2 — inbox\n \n Inbox empty.\n

\n {\n await reload();\n next({});\n }}\n >\n Continue\n \n

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

\n pass 2 — inbox · {queue.length} left\n \n \n {cur.raw}\n

\n \n captured {new Date(cur.captured_at).toLocaleDateString(\"en-NZ\")}\n

\n \n\n one action\n setTitle(e.target.value)} />\n

\n proof type\n \n {PROOF.map((p) => (\n setPtype(p.v)}\n style={{ padding: \"7px 11px\", fontSize: 13 }}\n >\n {p.label}\n \n ))}\n

\n what must the photo show\n setPdesc(e.target.value)}\n placeholder=\"screenshot of the sent message, timestamp visible\"\n />\n\n

\n {\n setBusy(true);\n try {\n await api(\"/backlog\", {\n from_inbox: [cur.id],\n title: title.trim(),\n proof_type: ptype,\n proof_description: pdesc.trim(),\n });\n setQueue((q) => q.slice(1));\n } catch (e: any) {\n alert(e.message);\n }\n setBusy(false);\n }}\n >\n File it\n \n {\n setThink(true);\n try {\n const p = await api(\"/ai/promote\", { raw: cur.raw });\n if (p.title) setTitle(p.title);\n if (p.proof_type) setPtype(p.proof_type);\n if (p.proof_description) setPdesc(p.proof_description);\n } catch {}\n setThink(false);\n }}\n >\n {think ? \"…\" : \"Suggest\"}\n \n {\n setBusy(true);\n await api(\"/inbox/discard\", { ids: [cur.id] });\n setQueue((q) => q.slice(1));\n setBusy(false);\n }}\n >\n Bin it\n \n

\n {pdesc.trim().length < 10 && (\n \n No describable photo means it isn't an action yet. Shrink it until you\n can name the image.\n

\n )}\n

\n );\n}\n\nfunction PassLoopholes({ state, next, reload }: any) {\n const [qs, setQs] = useState(null);\n const [answers, setAnswers] = useState(\"\");\n const [props, setProps] = useState(null);\n const [busy, setBusy] = useState(false);\n\n return (\n

\n pass 3 — loopholes\n {!qs && (\n <>\n \n Where did your laziness find a way round the system this week?\n

\n {\n setBusy(true);\n const r = await api(\"/ai/interrogate\", {\n commitments: state.backlog.map((b: any) => b.title).join(\n \"; \",\n ),\n });\n setQs(r.questions);\n setBusy(false);\n }}\n >\n {busy ? \"…\" : \"Interrogate me\"}\n \n next({})}>Skip\n

\n \n )}\n {qs && !props && (\n <>\n {qs.map((q, i) => (\n \n {q}\n

\n ))}\n

\n setAnswers(e.target.value)}\n placeholder=\"Answer honestly. Nobody else reads this.\"\n />\n

\n {\n setBusy(true);\n const r = await api(\"/ai/interrogate\", {\n questions: qs,\n answers,\n });\n setProps(r.proposals || []);\n setBusy(false);\n }}\n >\n {busy ? \"…\" : \"Turn into actions\"}\n \n next({})}>Skip\n

\n \n )}\n {props && (\n <>\n {props.length === 0 && (\n

\n Nothing to file.\n

\n )}\n {props.map((p, i) => (\n \n \n {p.title}\n

\n \n {proofLabel(p.proof_type)} — {p.proof_description}\n

\n \n ))}\n

\n {\n setBusy(true);\n for (const p of props) {\n try {\n await api(\"/backlog\", {\n from_inbox: [],\n title: p.title,\n proof_type: p.proof_type,\n proof_description: p.proof_description,\n });\n } catch {}\n }\n await reload();\n next({});\n setBusy(false);\n }}\n >\n {busy ? \"…\" : \"File these\"}\n \n

\n \n )}\n

\n );\n}\n\nfunction PassAged({ state, next, reload }: any) {\n const aged = state.backlog.filter((b: any) =>\n b.needs_decision && !b.mandatory\n );\n const [forced, setForced] = useState([]);\n const [busy, setBusy] = useState(false);\n\n if (aged.length === 0) {\n return (\n

\n pass 4 — carried too long\n \n Nothing older than six weeks.\n

\n next({ forced: [] })}>Continue\n

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

\n pass 4 — carried too long\n \n Require it this week or kill it. A seventh week isn't an option.\n

\n {aged.map((b: any) => (\n \n \n \n {b.title}\n

\n \n {b.age_weeks}w\n \n

\n \n setForced((f) =>\n f.includes(b.id) ? f.filter((x) => x !== b.id) : [...f, b.id]\n )}\n >\n Require\n \n {\n setBusy(true);\n try {\n await api(\"/backlog/kill\", { id: b.id });\n await reload();\n } catch (e: any) {\n alert(e.message);\n }\n setBusy(false);\n }}\n >\n Kill\n \n

\n \n ))}\n

\n next({ forced })}>\n Continue\n \n

\n );\n}\n\nfunction PassCommit({ state, next, preselect }: any) {\n const mandatory = state.backlog.filter((b: any) => b.mandatory).map((\n b: any,\n ) => b.id);\n const [picked, setPicked] = useState([\n ...new Set([...mandatory, ...(preselect || [])]),\n ] as string[]);\n const [busy, setBusy] = useState(false);\n\n return (\n

\n pass 5 — commit\n \n Pick what you're on the hook for. Minimum one. Mandatory items can't be\n dropped.\n

\n {state.backlog.map((b: any) => {\n const on = picked.includes(b.id);\n const locked = mandatory.includes(b.id);\n return (\n {\n if (locked) return;\n setPicked((p) => on ? p.filter((x) => x !== b.id) : [...p, b.id]);\n }}\n style={{\n display: \"flex\",\n gap: 12,\n padding: \"12px 0\",\n borderBottom: \"1px solid \" + T.line,\n cursor: locked ? \"default\" : \"pointer\",\n }}\n >\n \n {on ? \"✓\" : \"\"}\n

\n \n {b.title}\n

\n \n {b.age_weeks}w · {proofLabel(b.proof_type)}\n {locked ? \" · mandatory\" : \"\"}\n {b.fail_count > 0 ? \" · failed \" + b.fail_count + \"x\" : \"\"}\n

\n \n );\n })}\n

\n {\n setBusy(true);\n try {\n await api(\"/week\", { required: picked });\n next({});\n } catch (e: any) {\n alert(e.message);\n }\n setBusy(false);\n }}\n >\n {busy ? \"…\" : \"Commit \" + picked.length}\n \n

\n \n );\n}\n\nfunction CardView({ card }: any) {\n if (!card) return null;\n return (\n

\n proof\n \n Screenshot this and submit it to Vouch.\n

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

\n \n {card.cleared === null\n ? \"first review — no prior week\"\n : card.cleared\n ? \"last week cleared\"\n : card.failed_count + \" missed · now mandatory\"}\n \n

\n required · {card.week}\n {card.required.map((r: any, i: number) => (\n

\n \n {i + 1}\n \n

\n \n {r.title}\n

\n \n {r.proof_description}\n

\n ))}\n

\n \n \n backlog {card.backlog_count}\n {card.oldest_weeks ? \" · oldest \" + card.oldest_weeks + \"w\" : \"\"}\n \n \n {card.session}\n \n \n \n \n );\n}\n\n// ───────────────────────────────────────────────────────── review shell\n\nfunction Review({ state, reload }: any) {\n const [step, setStep] = useState(0);\n const [acc, setAcc] = useState({});\n const [card, setCard] = useState(null);\n const [loadedCard, setLoadedCard] = useState(undefined);\n\n useEffect(() => {\n api(\"/card\").then((r) => setLoadedCard(r.card)).catch(() =>\n setLoadedCard(null)\n );\n }, []);\n\n const steps: string[] = [];\n if (state.open_week) steps.push(\"close\");\n steps.push(\"inbox\", \"loopholes\", \"aged\", \"commit\");\n\n async function advance(data: any) {\n const merged = { ...acc, ...data };\n setAcc(merged);\n if (step + 1 >= steps.length) {\n const r = await api(\"/card\");\n setCard(r.card);\n } else {\n setStep(step + 1);\n }\n }\n\n const shown = card ?? (step === 0 && loadedCard ? loadedCard : null);\n\n if (shown) {\n return (\n

\n \n

\n {\n await reload();\n setCard(null);\n setLoadedCard(null);\n setStep(0);\n setAcc({});\n }}\n >\n Run a new review\n \n

\n );\n }\n\n const name = steps[step];\n return (\n

\n {steps.map((s, i) => (\n \n ))}\n

\n {name === \"close\" && }\n {name === \"inbox\" && (\n \n )}\n {name === \"loopholes\" && (\n \n )}\n {name === \"aged\" && (\n \n )}\n {name === \"commit\" && (\n \n )}\n

\n );\n}\n\n// ───────────────────────────────────────────────────────── app\n\nexport function App() {\n const [locked, setLocked] = useState(null);\n const [tab, setTab] = useState(\"capture\");\n const [state, setState] = useState(null);\n\n async function reload() {\n try {\n setState(await api(\"/state\"));\n setLocked(false);\n } catch {\n setLocked(true);\n }\n }\n useEffect(() => {\n reload();\n }, []);\n\n if (locked === null) {\n return

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

\n \n

\n );\n }\n\n const owed = state ? state.mandatory_next_week.length : 0;\n const pending = state ? state.inbox_pending.length : 0;\n\n return (\n

\n \n \n {state?.current_week ?? \"—\"}\n \n \n {owed ? \"owed \" + owed : \"nothing owed\"}\n \n

\n\n

\n {[[\"capture\", \"Capture\", null], [\"review\", \"Review\", pending || null]]\n .map(\n ([k, label, badge]: any) => (\n {\n setTab(k);\n if (k === \"review\") reload();\n }}\n style={{\n flex: 1,\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n borderBottom: \"2px solid \" +\n (tab === k ? T.ink : \"transparent\"),\n color: tab === k ? T.ink : T.faint,\n padding: \"12px 0\",\n fontFamily: T.sans,\n fontSize: 14,\n }}\n >\n {label}\n {badge ? \" \" + badge : \"\"}\n \n ),\n )}\n

\n\n {tab === \"capture\" && }\n {tab === \"review\" && (state\n ? \n : (\n \n loading…\n

\n ))}\n

\n );\n}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// frontend/components/App.tsx — the register.\n// Three tabs: Active (home), Capture, Review. Same-origin /api, PIN cookie.\n\nimport {\n forwardRef,\n useEffect,\n useRef,\n useState,\n} from \"https://esm.sh/react@18.2.0\";\n\nconst T = {\n bg: \"#131614\",\n panel: \"#1B1F1D\",\n panel2: \"#232825\",\n line: \"#2E3431\",\n ink: \"#E4E8E5\",\n dim: \"#8D9691\",\n faint: \"#5C6561\",\n owed: \"#D9A03C\",\n clear: \"#5FB09B\",\n kill: \"#B4685C\",\n mono: \"ui-monospace, 'SF Mono', SFMono-Regular, Menlo, monospace\",\n sans: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif\",\n};\n\nconst PROOF = [\n { v: \"before_after\", label: \"before / after\" },\n { v: \"timelapse\", label: \"timelapse\" },\n { v: \"artifact_photo\", label: \"photo of the result\" },\n { v: \"acquisition_photo\", label: \"photo of the thing\" },\n];\nconst proofLabel = (v: string) => PROOF.find((p) => p.v === v)?.label ?? v;\n\nasync function api(path: string, body?: any) {\n const res = await fetch(\"/api\" + path, {\n method: body ? \"POST\" : \"GET\",\n headers: { \"Content-Type\": \"application/json\" },\n body: body ? JSON.stringify(body) : undefined,\n });\n const data = await res.json().catch(() => ({}));\n if (!res.ok) throw new Error(data.error || \"request failed\");\n return data;\n}\n\n// Phone photos are several megabytes; downscale before sending or the request\n// is slow enough that you'll stop bothering to submit proof.\nasync function fileToBase64(file: File, max = 1024): Promise {\n const bitmap = await createImageBitmap(file);\n const scale = Math.min(1, max / Math.max(bitmap.width, bitmap.height));\n const canvas = document.createElement(\"canvas\");\n canvas.width = Math.round(bitmap.width * scale);\n canvas.height = Math.round(bitmap.height * scale);\n canvas.getContext(\"2d\")!.drawImage(bitmap, 0, 0, canvas.width, canvas.height);\n return canvas.toDataURL(\"image/jpeg\", 0.82).split(\",\")[1];\n}\n\nconst fmt = (iso?: string) =>\n new Date(iso ?? Date.now()).toLocaleString(\"en-NZ\", {\n day: \"numeric\",\n month: \"short\",\n year: \"numeric\",\n hour: \"2-digit\",\n minute: \"2-digit\",\n });\n\n// ───────────────────────────────────────────────────────── primitives\n\nconst Label = ({ children }: any) => (\n \n {children}\n \n);\n\nfunction Btn({ children, onClick, tone = \"quiet\", disabled, style }: any) {\n const t: any = {\n quiet: { bg: \"transparent\", fg: T.dim, bd: T.line },\n solid: { bg: T.ink, fg: T.bg, bd: T.ink },\n owed: { bg: \"transparent\", fg: T.owed, bd: \"#4A3E22\" },\n kill: { bg: \"transparent\", fg: T.kill, bd: \"#4A2E29\" },\n }[tone];\n return (\n \n {children}\n \n );\n}\n\nconst Field = (p: any) => (\n \n);\n\nconst Area = forwardRef((p: any, ref: any) => (\n \n));\n\nconst Panel = ({ children, style }: any) => (\n \n {children}\n \n);\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 {\n await api(\"/login\", { pin });\n onIn();\n } catch {\n setErr(\"wrong pin\");\n }\n }\n return (\n

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

\n Unlock\n

\n {err && (\n \n {err}\n

\n )}\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\", {\n id: item.id,\n image,\n media_type: \"image/jpeg\",\n note: withNote,\n });\n setVerdict(r);\n if (r.verdict === \"accept\") {\n setPending(null);\n onDone();\n }\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 \n \n {item.title}\n

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

\n {item.title}\n

\n \n {item.frozen_proof}\n

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

\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

\n send(pending, note.trim())}\n >\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 {\n setData(await api(\"/active\"));\n } catch {}\n }\n useEffect(() => {\n load();\n }, []);\n\n if (!data) {\n return (\n \n loading…\n

\n );\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\n for.\n

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

\n this week · {left ? left + \" outstanding\" : \"all clear\"}\n {data.items.map((i: any) => (\n {\n load();\n onChanged?.();\n }}\n />\n ))}\n \n Submit proof when you do the thing, not on Sunday. Verified items can't\n be undone.\n

\n );\n}\n\n// ───────────────────────────────────────────────────────── capture\n\nfunction Capture() {\n const [text, setText] = useState(\"\");\n const [recent, setRecent] = useState([]);\n const [busy, setBusy] = useState(false);\n const [err, setErr] = useState(null);\n const ref = useRef(null);\n\n async function drop() {\n const raw = text.trim();\n if (!raw || busy) return;\n setBusy(true);\n 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 } catch (e: any) {\n setErr(e.message);\n }\n setBusy(false);\n }\n\n return (\n

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

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

\n {err && (\n \n {err}\n

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

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

\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 pass 1 — verdict\n \n Read-only. These were verified live during the week.\n

\n {items.map((it: any) => (\n \n \n {it.title}\n \n \n {it.done_week === state.current_week ? \"verified\" : \"missed\"}\n \n

\n ))}\n

\n {\n setBusy(true);\n const v = await api(\"/week/close\", { iso_week: open.iso_week });\n next({ verdict: v });\n }}\n >\n {busy ? \"…\" : \"Close the week\"}\n \n

\n \n );\n}\n\nfunction PassInbox({ state, next, reload }: any) {\n const [queue, setQueue] = useState(state.inbox_pending);\n const [title, setTitle] = useState(\"\");\n const [ptype, setPtype] = useState(\"artifact_photo\");\n const [pdesc, setPdesc] = useState(\"\");\n const [busy, setBusy] = useState(false);\n const [think, setThink] = useState(false);\n const cur = queue[0];\n\n useEffect(() => {\n setTitle(cur ? cur.raw : \"\");\n setPdesc(\"\");\n setPtype(\"artifact_photo\");\n }, [cur?.id]);\n\n if (!cur) {\n return (\n

\n pass 2 — inbox\n \n Inbox empty.\n

\n {\n await reload();\n next({});\n }}\n >\n Continue\n \n

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

\n pass 2 — inbox · {queue.length} left\n \n \n {cur.raw}\n

\n \n captured {new Date(cur.captured_at).toLocaleDateString(\"en-NZ\")}\n

\n \n\n one action\n setTitle(e.target.value)} />\n

\n proof type\n \n {PROOF.map((p) => (\n setPtype(p.v)}\n style={{ padding: \"7px 11px\", fontSize: 13 }}\n >\n {p.label}\n \n ))}\n

\n what the photo shows\n setPdesc(e.target.value)}\n placeholder=\"a booking confirmation from the gym\"\n />\n\n

\n {pdesc.trim().length < 10 && (\n \n No describable photo means it isn't an action yet. Shrink it until you\n can name the image.\n

\n )}\n

\n );\n}\n\n// Confession must never be expensive, or you'll start confessing one small\n// thing a week. Only the worst becomes mandatory; the rest get a short fuse.\nfunction PassLoopholes({ next, reload }: any) {\n const [qs, setQs] = useState(null);\n const [answers, setAnswers] = useState(\"\");\n const [props, setProps] = useState(null);\n const [worst, setWorst] = useState(0);\n const [busy, setBusy] = useState(false);\n\n return (\n

\n pass 3 — loopholes\n {!qs && (\n <>\n \n Where did your laziness find a way round the system this week?\n

\n {\n setBusy(true);\n const r = await api(\"/ai/interrogate\", {});\n setQs(r.questions);\n setBusy(false);\n }}\n >\n {busy ? \"…\" : \"Interrogate me\"}\n \n next({})}>Skip\n

\n \n )}\n\n {qs && !props && (\n <>\n {qs.map((q, i) => (\n \n {q}\n

\n ))}\n

\n setAnswers(e.target.value)}\n placeholder=\"Answer honestly. Confessing more costs you nothing.\"\n />\n

\n \n )}\n\n {props && (\n <>\n \n Pick the worst one. That closes next week, guaranteed. The rest go\n to the backlog on a two-week fuse.\n

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

\n \n {p.title}\n

\n \n {proofLabel(p.proof_type)} — {p.proof_description}\n

\n ))}\n

\n {\n setBusy(true);\n const forced: string[] = [];\n for (let i = 0; i < props.length; i++) {\n try {\n const r = await api(\"/backlog\", {\n from_inbox: [],\n title: props[i].title,\n proof_type: props[i].proof_type,\n proof_description: props[i].proof_description,\n origin: \"loophole\",\n });\n if (i === worst) forced.push(r.id);\n } catch {}\n }\n await reload();\n next({ forced });\n setBusy(false);\n }}\n >\n {busy ? \"…\" : \"File these\"}\n \n

\n \n )}\n

\n );\n}\n\nfunction PassAged({ state, next, reload }: any) {\n const flagged = state.backlog.filter(\n (b: any) => (b.needs_decision || b.needs_reshape) && !b.mandatory,\n );\n const [forced, setForced] = useState([]);\n const [editing, setEditing] = useState(null);\n const [t, setT] = useState(\"\");\n const [d, setD] = useState(\"\");\n const [busy, setBusy] = useState(false);\n\n if (!flagged.length) {\n return (\n

\n pass 4 — forced decisions\n \n Nothing overdue or repeatedly failed.\n

\n next({})}>Continue\n

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

\n pass 4 — forced decisions\n \n Carried too long, or failed three times. Require it, reshape it, or kill\n it.\n

\n {flagged.map((b: any) => (\n \n \n \n {b.title}\n

\n \n {b.needs_reshape\n ? \"failed \" + b.fail_count + \"x\"\n : b.age_weeks + \"w\"}\n \n

\n\n {editing === b.id\n ? (\n

\n setT(e.target.value)}\n placeholder=\"smaller title\"\n />\n

\n setD(e.target.value)}\n placeholder=\"what the photo shows\"\n />\n

\n {\n setBusy(true);\n await api(\"/backlog/reshape\", {\n id: b.id,\n title: t,\n proof_description: d,\n });\n await reload();\n setEditing(null);\n setBusy(false);\n }}\n >\n Save\n \n setEditing(null)}\n >\n Cancel\n \n

\n )\n : (\n \n \n setForced((f) =>\n f.includes(b.id)\n ? f.filter((x) => x !== b.id)\n : [...f, b.id]\n )}\n >\n Require\n \n {\n setEditing(b.id);\n setT(b.title);\n setD(b.proof_description);\n }}\n >\n Reshape\n \n {\n setBusy(true);\n try {\n await api(\"/backlog/kill\", { id: b.id });\n await reload();\n } catch (e: any) {\n alert(e.message);\n }\n setBusy(false);\n }}\n >\n Kill\n \n

\n )}\n \n ))}\n

\n next({ forced })}>\n Continue\n \n

\n \n );\n}\n\n// Commit. The proof description is refined and frozen here — frozen so it can't\n// be loosened later to fit whatever photo you happened to take.\nfunction PassCommit({ state, next, locked }: any) {\n const mandatory = [\n ...state.backlog.filter((b: any) => b.mandatory).map((b: any) => b.id),\n ...(locked || []),\n ];\n const [picked, setPicked] = useState(\n [...new Set(mandatory)] as string[],\n );\n const [proofs, setProofs] = useState(() => {\n const o: any = {};\n for (const b of state.backlog) o[b.id] = b.proof_description;\n return o;\n });\n const [busyId, setBusyId] = useState(null);\n const [busy, setBusy] = useState(false);\n const [err, setErr] = useState(null);\n\n return (\n

\n pass 5 — commit\n \n Minimum one. Write each proof line as loosely as you can while it still\n means you did it — it's frozen once you commit.\n

\n\n {state.backlog.map((b: any) => {\n const on = picked.includes(b.id);\n const isLocked = mandatory.includes(b.id);\n return (\n \n {\n if (isLocked) return;\n setPicked((p) =>\n on ? p.filter((x) => x !== b.id) : [...p, b.id]\n );\n }}\n style={{\n display: \"flex\",\n gap: 12,\n cursor: isLocked ? \"default\" : \"pointer\",\n }}\n >\n \n {on ? \"✓\" : \"\"}\n

\n \n {b.title}\n

\n \n {b.age_weeks}w · {proofLabel(b.proof_type)}\n {isLocked ? \" · mandatory\" : \"\"}\n {b.fail_count > 0 ? \" · failed \" + b.fail_count + \"x\" : \"\"}\n

\n \n\n {on && (\n

\n \n setProofs({ ...proofs, [b.id]: e.target.value })}\n />\n

\n {\n setBusyId(b.id);\n try {\n const r = await api(\"/ai/freeze\", {\n title: b.title,\n proof_description: proofs[b.id],\n });\n setProofs((p: any) => ({\n ...p,\n [b.id]: r.frozen_proof,\n }));\n } catch {}\n setBusyId(null);\n }}\n >\n {busyId === b.id ? \"…\" : \"Loosen it\"}\n \n

\n )}\n \n );\n })}\n\n {err && (\n \n {err}\n

\n )}\n

\n {\n setBusy(true);\n setErr(null);\n try {\n await api(\"/week\", {\n items: picked.map((id) => ({ id, frozen_proof: proofs[id] })),\n });\n next({});\n } catch (e: any) {\n setErr(e.message);\n }\n setBusy(false);\n }}\n >\n {busy ? \"…\" : \"Commit \" + picked.length}\n \n

\n \n );\n}\n\nfunction CardView({ card }: any) {\n if (!card) return null;\n return (\n

\n proof\n \n Screenshot this and submit it to Vouch.\n

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

\n \n \n {card.cleared === null\n ? \"first review — no prior week\"\n : card.cleared\n ? \"last week cleared\"\n : card.failed_count + \" missed · now mandatory\"}\n \n \n {card.cleared_count}/{card.closed_count} weeks\n \n \n

\n required · {card.week}\n {card.required.map((r: any, i: number) => (\n

\n \n {i + 1}\n \n

\n \n {r.title}\n

\n \n {r.frozen_proof}\n

\n ))}\n

\n \n \n backlog {card.backlog_count}\n {card.oldest_weeks ? \" · oldest \" + card.oldest_weeks + \"w\" : \"\"}\n \n \n {card.session}\n \n \n \n \n );\n}\n\n// ───────────────────────────────────────────────────────── review\n\nfunction Review({ state, reload }: any) {\n const [step, setStep] = useState(0);\n const [acc, setAcc] = useState({});\n const [card, setCard] = useState(undefined);\n\n useEffect(() => {\n api(\"/card\").then((r) => setCard(r.card)).catch(() => setCard(null));\n }, []);\n\n const steps: string[] = [];\n if (state.open_week) steps.push(\"close\");\n steps.push(\"inbox\", \"loopholes\", \"aged\", \"commit\");\n\n async function advance(data: any) {\n const merged = { ...acc, ...data };\n setAcc(merged);\n if (steps[step] === \"commit\") {\n const r = await api(\"/card\");\n setCard(r.card);\n } else {\n setStep(step + 1);\n }\n }\n\n if (card) {\n return (\n

\n \n

\n {\n await reload();\n setCard(null);\n setStep(0);\n setAcc({});\n }}\n >\n Run a new review\n \n

\n );\n }\n\n const name = steps[step];\n return (\n

\n {steps.map((s, i) => (\n \n ))}\n

\n {name === \"close\" && }\n {name === \"inbox\" && (\n \n )}\n {name === \"loopholes\" && }\n {name === \"aged\" && (\n \n )}\n {name === \"commit\" && (\n \n )}\n

\n );\n}\n\n// ───────────────────────────────────────────────────────── app\n\nexport function App() {\n const [locked, setLocked] = useState(null);\n const [tab, setTab] = useState(\"active\");\n const [state, setState] = useState(null);\n\n async function reload() {\n try {\n setState(await api(\"/state\"));\n setLocked(false);\n } catch {\n setLocked(true);\n }\n }\n useEffect(() => {\n reload();\n }, []);\n\n if (locked === null) {\n return

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

\n \n

\n );\n }\n\n const owed = state ? state.mandatory_next_week.length : 0;\n const pending = state ? state.inbox_pending.length : 0;\n\n return (\n

\n \n \n {state?.current_week ?? \"—\"}\n \n \n {state\n ? state.cleared_count + \"/\" + state.closed_count + \" weeks\"\n : \"\"}\n \n \n {owed ? \"owed \" + owed : \"nothing owed\"}\n \n

\n\n

\n {[[\"active\", \"Active\", null], [\"capture\", \"Capture\", null], [\n \"review\",\n \"Review\",\n pending || null,\n ]]\n .map(([k, label, badge]: any) => (\n {\n setTab(k);\n reload();\n }}\n style={{\n flex: 1,\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n borderBottom: \"2px solid \" +\n (tab === k ? T.ink : \"transparent\"),\n color: tab === k ? T.ink : T.faint,\n padding: \"12px 0\",\n fontFamily: T.sans,\n fontSize: 14,\n }}\n >\n {label}\n {badge ? \" \" + badge : \"\"}\n \n ))}\n

\n\n {tab === \"active\" && }\n {tab === \"capture\" && }\n {tab === \"review\" && (state\n ? \n : (\n \n loading…\n

\n ))}\n

\n );\n}","createdAt",["D",1785456005845],"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=1789545599&sig=91cfcc631bd9f3dd8274549c04838d172adf2572755982193460d49bfd04bd62","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":267,"_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":268,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":269,"_85":270,"_87":271,"_89":25},"tree",[201,208,209,210,211],"files",[201,202,203,204,205,206,207,208,209,210,211],"counts",{"_191":64,"_192":175,"_193":64,"_194":195,"_196":197},"contents",[148,149,150,151,152],"upstreamProject",{"_44":99,"_32":144,"_53":145,"_54":55,"_50":51,"_83":146},"upstreamBranch",{"_44":94,"_39":138,"_139":140,"_32":91,"_92":99,"_13":96,"_93":-5,"_95":-5,"_141":142,"_48":-5,"_89":25,"_50":51,"_103":143,"_65":101,"_102":144},"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":143,"_113":147},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789545599&sig=2316df07e67031dd48e537f6ce0c4c14b92716fed790ec83ecf27974cc65aa31",{"_44":185,"_32":186,"_30":187,"_155":-5,"_42":43,"_41":175,"_157":60,"_39":188,"_13":64,"_34":189,"_36":-5,"_24":25,"_162":-5,"_27":190},{"_44":179,"_32":180,"_30":181,"_155":-5,"_42":43,"_41":175,"_157":60,"_39":182,"_13":64,"_34":20,"_36":183,"_24":25,"_162":-5,"_27":184},{"_44":172,"_32":173,"_30":174,"_155":-5,"_42":43,"_41":175,"_157":60,"_39":176,"_13":64,"_34":20,"_36":177,"_24":25,"_162":-5,"_27":178},{"_44":164,"_32":165,"_30":166,"_155":-5,"_42":43,"_41":167,"_157":25,"_39":168,"_13":169,"_34":35,"_36":170,"_24":25,"_162":-5,"_27":171},{"_44":153,"_32":154,"_30":58,"_155":-5,"_42":43,"_41":156,"_157":60,"_39":158,"_13":159,"_34":160,"_36":161,"_24":25,"_162":-5,"_27":163},"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",[154],"4246685f-300a-4f95-a2d7-16bce9b3e993","api.ts","0b87d8ac-8c63-11f1-850c-1607ee4eb77e",10,["D",1785455984025],4,"// 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;",[165],"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",[173],"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 · v11