`, 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",{"_253":254,"_255":256},"routes/_app.x.$handle.$name",{"_104":103,"_37":49,"_112":94,"_32":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_26":-5,"_124":-5,"_125":-5,"_126":30,"_127":128,"_129":63,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_47":48,"_37":49,"_42":50,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":30},"version",2,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","ce93c0a2-e3c2-43d6-9d21-f44d7f3124e7","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":39,"_40":41,"_42":43,"_44":14,"_45":46,"_29":30},"previous","deleted",false,"deletedHere","path","store.ts","latestPath","fileId","112e2018-a0cc-11f1-b57b-1607ee4eb77e","name","fileType","script","content","// Shared types + SQLite persistence for AIVoice.\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\n// ---- Types ---------------------------------------------------------------\n\nexport type Role = \"verbal\" | \"nonverbal\" | \"system\";\n\nexport interface Profile {\n name: string;\n /** Numeric age — used to enforce age-appropriate language. */\n age: number;\n /** How deeply the voice reflects the real person: basic | moderate | deep */\n closeness: string;\n /** Personality traits, comma separated. */\n personality: string;\n /** Likes & interests. */\n likes: string;\n /** Free-form background — the more detailed, the better the responses. */\n about: string;\n /** Active LLM provider: mock | openai | deepseek | openrouter | ollama | anthropic | gemini */\n provider: string;\n /** Override model name (optional). */\n model: string;\n /** Enabled conversational directions. */\n directions: string[];\n}\n\nexport interface ConversationMessage {\n role: Role;\n content: string;\n direction?: string;\n created_at: string;\n}\n\nexport interface ResponseOption {\n text: string;\n direction: string;\n}\n\nexport const DEFAULT_PROFILE: Profile = {\n name: \"My person\",\n age: 16,\n closeness: \"moderate\",\n personality: \"\",\n likes: \"\",\n about: \"\",\n provider: \"mock\",\n model: \"\",\n directions: [\"agreeable\", \"neutral\", \"disagree\", \"interest\", \"smalltalk\", \"influential\"],\n};\n\n// ---- Schema --------------------------------------------------------------\n\nconst SCHEMA = `\nCREATE TABLE IF NOT EXISTS profile (\n id INTEGER PRIMARY KEY CHECK (id = 1),\n name TEXT NOT NULL DEFAULT 'My person',\n age INTEGER NOT NULL DEFAULT 16,\n closeness TEXT NOT NULL DEFAULT 'moderate',\n personality TEXT NOT NULL DEFAULT '',\n likes TEXT NOT NULL DEFAULT '',\n about TEXT NOT NULL DEFAULT '',\n provider TEXT NOT NULL DEFAULT 'mock',\n model TEXT NOT NULL DEFAULT '',\n directions TEXT NOT NULL DEFAULT '[\"agreeable\",\"neutral\",\"disagree\",\"interest\",\"smalltalk\",\"influential\"]',\n updated_at TEXT NOT NULL\n);\nCREATE TABLE IF NOT EXISTS messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n role TEXT NOT NULL,\n content TEXT NOT NULL,\n direction TEXT,\n created_at TEXT NOT NULL\n);\nCREATE TABLE IF NOT EXISTS pending_options (\n id INTEGER PRIMARY KEY CHECK (id = 1),\n options TEXT NOT NULL DEFAULT '[]'\n);\n`;\n\nawait sqlite.execute(SCHEMA);\n\n// ---- Profile helpers -----------------------------------------------------\n\nfunction rowToProfile(row: Record): Profile {\n let directions: string[] = [\"agreeable\", \"neutral\", \"disagree\", \"interest\", \"smalltalk\", \"influential\"];\n try {\n directions = JSON.parse(String(row.directions ?? \"\"));\n } catch {\n /* keep default */\n }\n return {\n name: String(row.name ?? \"My person\"),\n age: Number(row.age ?? 16),\n closeness: String(row.closeness ?? \"moderate\"),\n personality: String(row.personality ?? \"\"),\n likes: String(row.likes ?? \"\"),\n about: String(row.about ?? \"\"),\n provider: String(row.provider ?? \"mock\"),\n model: String(row.model ?? \"\"),\n directions: Array.isArray(directions) ? directions : DEFAULT_PROFILE.directions,\n };\n}\n\nexport async function getProfile(): Promise {\n const res = await sqlite.execute(\"SELECT * FROM profile WHERE id = 1\");\n if (res.rows.length === 0) return { ...DEFAULT_PROFILE };\n return rowToProfile(res.rows[0] as Record);\n}\n\nexport async function saveProfile(p: Profile): Promise {\n const clean: Profile = { ...DEFAULT_PROFILE, ...p };\n await sqlite.execute({\n sql: `INSERT INTO profile (id, name, age, closeness, personality, likes, about, provider, model, directions, updated_at)\n VALUES (1, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)\n ON CONFLICT(id) DO UPDATE SET\n name = excluded.name,\n age = excluded.age,\n closeness = excluded.closeness,\n personality = excluded.personality,\n likes = excluded.likes,\n about = excluded.about,\n provider = excluded.provider,\n model = excluded.model,\n directions = excluded.directions,\n updated_at = excluded.updated_at`,\n args: [\n clean.name,\n clean.age,\n clean.closeness,\n clean.personality,\n clean.likes,\n clean.about,\n clean.provider,\n clean.model,\n JSON.stringify(clean.directions),\n new Date().toISOString(),\n ],\n });\n return clean;\n}\n\n// ---- Conversation helpers ------------------------------------------------\n\nexport async function getMessages(): Promise {\n const res = await sqlite.execute(\n \"SELECT role, content, direction, created_at FROM messages ORDER BY id ASC\"\n );\n return (res.rows as Record[]).map((r) => ({\n role: r.role as Role,\n content: String(r.content),\n direction: r.direction ? String(r.direction) : undefined,\n created_at: String(r.created_at),\n }));\n}\n\nexport async function addMessage(\n role: Role,\n content: string,\n direction?: string\n): Promise {\n await sqlite.execute({\n sql: \"INSERT INTO messages (role, content, direction, created_at) VALUES (?, ?, ?, ?)\",\n args: [role, content, direction ?? null, new Date().toISOString()],\n });\n}\n\nexport async function clearConversation(): Promise {\n await sqlite.batch([\n { sql: \"DELETE FROM messages\" },\n { sql: \"UPDATE pending_options SET options = '[]' WHERE id = 1\" },\n ]);\n}\n\n// ---- Pending options (generated, awaiting the nonverbal person's choice) ----\n\nexport async function getOptions(): Promise {\n const res = await sqlite.execute(\"SELECT options FROM pending_options WHERE id = 1\");\n if (res.rows.length === 0) return [];\n try {\n const parsed = JSON.parse(String(res.rows[0].options ?? \"[]\"));\n return Array.isArray(parsed) ? parsed : [];\n } catch {\n return [];\n }\n}\n\nexport async function setOptions(options: ResponseOption[]): Promise {\n await sqlite.execute({\n sql: `INSERT INTO pending_options (id, options) VALUES (1, ?)\n ON CONFLICT(id) DO UPDATE SET options = excluded.options`,\n args: [JSON.stringify(options)],\n });\n}\n","createdAt",["D",1787693374523],"branchVersion","branchId","0ceb3d21-355e-41d6-9f73-906865528d07","id","4cd30b09-d38e-41cd-b789-c1f169cbe601","aivoice",["D",1787693351550],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","AI assistive conversation helper for nonverbal people","imageUrl","81651da5-a1fb-4f69-b30b-fee2e4ecff8a","pinnedFileId","01a03ad3-c356-71dc-85a7-dc2115d28764","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","fa84786a-b3f0-4ac8-8017-55421c1fdcb4","tursoName","4cd30b09d38e41cdb789c1f169cbe601","tursoHostname","4cd30b09d38e41cdb789c1f169cbe601-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789525843977],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_104":103,"_111":107},"org",{"_104":103,"_105":-5,"_106":107,"_19":59,"_108":109,"_110":30},"branch",{"_13":93,"_37":94,"_47":46,"_95":48,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":49,"_102":103},"isOwned",21,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","fame144","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJyMEVwbjZpZFM0QTE4UW1EWFJuTmhRM1o1VyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_47":48,"_37":49,"_42":248,"_51":-5,"_52":30,"_53":54,"_55":54,"_56":57,"_58":-5,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":249,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":250,"_88":251,"_90":252,"_92":30},"tree",[180,187,188,189,190],"files",[180,181,182,183,184,185,186,187,188,189,190],"counts",{"_170":67,"_171":147,"_172":67,"_173":174,"_175":176},"contents",[134,135,136,137,138],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_47":164,"_37":165,"_35":166,"_140":-5,"_45":46,"_44":147,"_141":63,"_42":167,"_13":67,"_38":168,"_40":-5,"_29":30,"_143":-5,"_32":169},{"_47":158,"_37":159,"_35":160,"_140":-5,"_45":46,"_44":147,"_141":63,"_42":161,"_13":67,"_38":26,"_40":162,"_29":30,"_143":-5,"_32":163},{"_47":152,"_37":153,"_35":154,"_140":-5,"_45":46,"_44":147,"_141":30,"_42":155,"_13":67,"_38":26,"_40":156,"_29":30,"_143":-5,"_32":157},{"_47":145,"_37":146,"_35":61,"_140":-5,"_45":46,"_44":147,"_141":30,"_42":148,"_13":67,"_38":149,"_40":150,"_29":30,"_143":49,"_32":151},{"_47":139,"_37":33,"_35":36,"_140":-5,"_45":46,"_44":14,"_141":30,"_42":142,"_13":67,"_38":39,"_40":41,"_29":30,"_143":-5,"_32":144},"2ce4cbbf-107e-40c2-b1d1-3689ec24a653","parentId","latest",["D",1787693374523],"label",[33],"1b13ff82-cd5d-4bcb-af80-b219c0b96169","index.ts",1,["D",1787693351550],"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n",[146],"9d107ba9-f7c8-48e9-9403-c1ad8d914be2","README.md","01a03ad3-c356-71dc-85a7-da8e66574d2a",["D",1787693351550],"# 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",[153],"c3a08dd4-dc02-4659-bde8-7a1bba74d775","CHANGELOG.md","01a03ad3-c356-71dc-85a7-d4277687c825",["D",1787693351550],"# 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 · v2