[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_283":284,"_285":286},"routes/_app.x.$handle.$name",{"_107":106,"_38":52,"_115":97,"_33":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":-5,"_128":-5,"_129":31,"_130":131,"_132":66,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":90,"_91":92,"_93":94,"_95":31},"version",8,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","ce93c0a2-e3c2-43d6-9d21-f44d7f3124e7","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","01a03ad3-c356-71dc-85a7-bafd7ff2637c","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// ---- Client-side types (mirror of the server contract) ----------------/\ninterface Profile {\n name: string;\n age: number;\n closeness: string;\n personality: string;\n likes: string;\n about: string;\n provider: string;\n model: string;\n directions: string[];\n}\ninterface Message {\n role: \"verbal\" | \"nonverbal\" | \"system\";\n content: string;\n direction?: string;\n created_at: string;\n}\ninterface Option {\n text: string;\n direction: string;\n}\ninterface Provider {\n id: string;\n name: string;\n configured: boolean;\n model: string;\n}\ninterface State {\n profile: Profile;\n messages: Message[];\n options: Option[];\n providers: Provider[];\n}\n\nconst DIRECTIONS = [\n { id: \"agreeable\", label: \"Agree\", emoji: \"😊\" },\n { id: \"neutral\", label: \"Neutral\", emoji: \"😐\" },\n { id: \"disagree\", label: \"Honest\", emoji: \"🗣️\" },\n { id: \"interest\", label: \"Curious\", emoji: \"🧐\" },\n { id: \"smalltalk\", label: \"Keep it light\", emoji: \"💬\" },\n { id: \"influential\", label: \"Opinion\", emoji: \"🎯\" },\n];\nconst dirEmoji = (id: string) => DIRECTIONS.find((d) => d.id === id)?.emoji ?? \"💬\";\nconst dirLabel = (id: string) => DIRECTIONS.find((d) => d.id === id)?.label ?? id;\n\nconst CLOSENESS = [\n { id: \"basic\", label: \"Basic — plain, short responses\" },\n { id: \"moderate\", label: \"Moderate — a bit of personality\" },\n { id: \"deep\", label: \"Deep — richly personal, detailed\" },\n];\n\nasync function post(url: string, body: unknown) {\n const r = await fetch(url, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body),\n });\n return r.json();\n}\n\n// ---- Small presentational bits ----------------------------------------/\n\nfunction Bubble({ m }: { m: Message }) {\n const mine = m.role === \"nonverbal\";\n return (\n

\n \n {mine && m.direction && (\n

\n {dirEmoji(m.direction)} spoken via “{dirLabel(m.direction)}”\n

\n )}\n {m.content}\n

\n \n );\n}\n\n// ---- Main app ---------------------------------------------------------/\n\nexport function App() {\n const [state, setState] = useState(null);\n const [tab, setTab] = useState<\"chat\" | \"profile\">(\"chat\");\n const [verbalText, setVerbalText] = useState(\"\");\n const [typedText, setTypedText] = useState(\"\");\n const [busy, setBusy] = useState(false);\n const [savedMsg, setSavedMsg] = useState(\"\");\n const scrollRef = useRef(null);\n\n async function load() {\n const r = await fetch(\"/api/state\");\n setState(await r.json());\n }\n useEffect(() => {\n load().catch(console.error);\n }, []);\n useEffect(() => {\n scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight });\n }, [state?.messages.length, state?.options.length]);\n\n async function respond() {\n if (!verbalText.trim() || busy) return;\n setBusy(true);\n try {\n const res = await post(\"/api/respond\", { text: verbalText });\n setState((s) => (s ? { ...s, messages: res.messages, options: res.options } : s));\n setVerbalText(\"\");\n } finally {\n setBusy(false);\n }\n }\n async function choose(option: Option) {\n if (busy) return;\n setBusy(true);\n try {\n const res = await post(\"/api/choose\", { option });\n setState((s) => (s ? { ...s, messages: res.messages, options: res.options } : s));\n } finally {\n setBusy(false);\n }\n }\n async function typeReply() {\n if (!typedText.trim() || busy) return;\n setBusy(true);\n try {\n const res = await post(\"/api/type\", { text: typedText });\n setState((s) => (s ? { ...s, messages: res.messages, options: res.options } : s));\n setTypedText(\"\");\n } finally {\n setBusy(false);\n }\n }\n async function reset() {\n const res = await post(\"/api/reset\", {});\n setState((s) => (s ? { ...s, messages: res.messages, options: res.options } : s));\n }\n\n async function saveProfile() {\n if (!state) return;\n const res = await post(\"/api/profile\", state.profile);\n setState((s) => (s ? { ...s, profile: res.profile, providers: res.providers } : s));\n setSavedMsg(\"Profile saved ✓\");\n setTimeout(() => setSavedMsg(\"\"), 2500);\n }\n\n if (!state) {\n return (\n

\n Loading…\n

\n );\n }\n const p = state.profile;\n const activeProvider = state.providers.find((x) => x.id === p.provider);\n\n return (\n

\n {/* Header */}\n

🗣️ AIVoice

an assistive conversation voice

\n \n {p.name || \"Profile\"} · age {p.age}\n \n \n {activeProvider?.name ?? p.provider}\n \n

\n\n {/* Tabs */}\n

\n {([\"chat\", \"profile\"] as const).map((t) => (\n setTab(t)}\n className={`px-4 py-2 rounded-t-lg text-sm font-medium cursor-pointer ${\n tab === t ? \"bg-indigo-600 text-white\" : \"text-gray-600 hover:bg-gray-100\"\n }`}\n >\n {t === \"chat\" ? \"💬 Conversation\" : \"🪪 Profile & Setup\"}\n \n ))}\n

\n\n {tab === \"chat\" ? (\n <>\n {/* Messages */}\n

\n {state.messages.length === 0 && (\n

\n Say something as the verbal partner, and the person picks how to answer.\n

\n )}\n {state.messages.map((m, i) => (\n \n ))}\n

\n\n {/* Response options */}\n {state.options.length > 0 && (\n

\n How would you like to answer? (tap one)\n

\n {state.options.map((o, i) => (\n choose(o)}\n disabled={busy}\n className=\"text-left rounded-xl border-2 border-emerald-200 bg-emerald-50 hover:border-emerald-500 hover:bg-emerald-100 px-4 py-3 disabled:opacity-50 transition-colors cursor-pointer\"\n >\n

\n {dirEmoji(o.direction)} {dirLabel(o.direction)}\n

{o.text}

\n \n ))}\n

\n )}\n\n {/* Verbal partner input */}\n

\n \n The verbal partner says…\n \n

\n setVerbalText(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && respond()}\n placeholder=\"Type what the other person just said\"\n className=\"flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400\"\n />\n \n {busy ? \"Listening…\" : \"🎧 Listen → choices\"}\n \n

\n\n {/* Custom typed reply + reset */}\n

\n \n Or type a reply for the person (trusted person)\n \n

\n setTypedText(e.target.value)}\n onKeyDown={(e) => e.key === \"Enter\" && typeReply()}\n placeholder=\"e.g. Tell them I'm excited to see that movie\"\n className=\"flex-1 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-emerald-400\"\n />\n \n Send\n \n

\n \n Clear conversation\n \n

\n \n ) : (\n <>\n {/* Profile editor */}\n

\n \n set(\"name\", e.target.value)} />\n \n \n set(\"age\", Number(e.target.value) || 1)}\n />\n \n

\n\n \n \n \n\n \n set(\"personality\", e.target.value)} />\n \n\n \n set(\"likes\", e.target.value)} />\n \n\n \n set(\"about\", e.target.value)}\n />\n \n\n \n \n

\n {activeProvider?.model && `Default model: ${activeProvider.model}`} The built-in demo needs no key;\n a real provider makes responses specific to your profile.\n

\n \n\n \n

\n {DIRECTIONS.map((d) => {\n const on = p.directions.includes(d.id);\n return (\n {\n const next = on ? p.directions.filter((x) => x !== d.id) : [...p.directions, d.id];\n set(\"directions\", next);\n }}\n className={`px-3 py-1.5 rounded-full text-xs border-2 cursor-pointer transition-colors ${\n on\n ? \"border-indigo-500 bg-indigo-50 text-indigo-700\"\n : \"border-gray-300 bg-white text-gray-400\"\n }`}\n >\n {d.emoji} {d.label}\n \n );\n })}\n

\n \n\n

\n \n Save profile\n \n {savedMsg && {savedMsg}}\n

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

\n );\n\n // local helper needs to be defined inside component scope\n function set(key: keyof Profile, value: unknown) {\n setState((s) =>\n s\n ? {\n ...s,\n profile: { ...s.profile, [key]: value },\n }\n : s\n );\n }\n}\n\nconst inputCls =\n \"w-full border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400\";\n\nfunction Field({ label, hint, children }: { label: string; hint?: string; children: ReactNode }) {\n return (\n

\n {label}\n {children}\n {hint &&

{hint}

}\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ReactNode } from \"https://esm.sh/react@18.2.0\";\n\n// ---- Client-side types (mirror of the server contract) ----------------/\ninterface Profile {\n name: string;\n age: number;\n closeness: string;\n personality: string;\n likes: string;\n about: string;\n provider: string;\n model: string;\n directions: string[];\n}\ninterface Message {\n role: \"verbal\" | \"nonverbal\" | \"system\";\n content: string;\n direction?: string;\n created_at: string;\n}\ninterface Option {\n text: string;\n direction: string;\n}\ninterface Provider {\n id: string;\n name: string;\n configured: boolean;\n model: string;\n}\ninterface State {\n profile: Profile;\n messages: Message[];\n options: Option[];\n providers: Provider[];\n}\n\nconst DIRECTIONS = [\n { id: \"agreeable\", label: \"Agree\", emoji: \"😊\" },\n { id: \"neutral\", label: \"Neutral\", emoji: \"😐\" },\n { id: \"disagree\", label: \"Honest\", emoji: \"🗣️\" },\n { id: \"interest\", label: \"Curious\", emoji: \"🧐\" },\n { id: \"smalltalk\", label: \"Keep it light\", emoji: \"💬\" },\n { id: \"influential\", label: \"Opinion\", emoji: \"🎯\" },\n];\nconst dirEmoji = (id: string) => DIRECTIONS.find((d) => d.id === id)?.emoji ?? \"💬\";\nconst dirLabel = (id: string) => DIRECTIONS.find((d) => d.id === id)?.label ?? id;\n\nconst CLOSENESS = [\n { id: \"basic\", label: \"Basic — plain, short responses\" },\n { id: \"moderate\", label: \"Moderate — a bit of personality\" },\n { id: \"deep\", label: \"Deep — richly personal, detailed\" },\n];\n\nasync function post(url: string, body: unknown) {\n const r = await fetch(url, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(body),\n });\n return r.json();\n}\n\n// ---- Small presentational bits ----------------------------------------/\n\nfunction Bubble({ m }: { m: Message }) {\n const mine = m.role === \"nonverbal\";\n return (\n

\n \n {mine && m.direction && (\n

\n {dirEmoji(m.direction)} spoken via “{dirLabel(m.direction)}”\n

\n )}\n {m.content}\n

\n Loading…\n

\n );\n }\n const p = state.profile;\n const activeProvider = state.providers.find((x) => x.id === p.provider);\n\n return (\n

\n {/* Header */}\n

🗣️ AIVoice

an assistive conversation voice

\n \n {p.name || \"Profile\"} · age {p.age}\n \n \n {activeProvider?.name ?? p.provider}\n \n

\n\n {/* Tabs */}\n

\n\n {tab === \"chat\" ? (\n <>\n {/* Messages */}\n

\n {state.messages.length === 0 && (\n

\n Say something as the verbal partner, and the person picks how to answer.\n

\n )}\n {state.messages.map((m, i) => (\n \n ))}\n

\n\n {/* Response options */}\n {state.options.length > 0 && (\n

\n How would you like to answer? (tap one)\n

\n {dirEmoji(o.direction)} {dirLabel(o.direction)}\n

{o.text}

\n \n ))}\n

\n )}\n\n {/* Verbal partner input */}\n

\n \n The verbal partner says…\n \n

\n\n {/* Custom typed reply + reset */}\n

\n \n Or type a reply for the person (trusted person)\n \n

\n \n Clear conversation\n \n

\n \n ) : (\n <>\n {/* Profile editor */}\n

\n \n set(\"name\", e.target.value)} />\n \n \n set(\"age\", Number(e.target.value) || 1)}\n />\n \n

\n\n \n \n \n\n \n set(\"personality\", e.target.value)} />\n \n\n \n set(\"likes\", e.target.value)} />\n \n\n \n set(\"about\", e.target.value)}\n />\n \n\n \n \n

\n {activeProvider?.model && `Default model: ${activeProvider.model}`} The built-in demo needs no key;\n a real provider makes responses specific to your profile.\n

\n \n\n \n

\n \n\n

\n \n Save profile\n \n {savedMsg && {savedMsg}}\n

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

\n {label}\n {children}\n {hint &&

{hint}

}\n

\n );\n}\n","createdAt",["D",1787693447888],"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",{"_107":106,"_114":110},"org",{"_107":106,"_108":-5,"_109":110,"_19":62,"_111":112,"_113":31},"branch",{"_13":96,"_38":97,"_50":49,"_98":51,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":52,"_105":106},"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",{"_50":51,"_38":52,"_45":278,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":279,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":280,"_91":281,"_93":282,"_95":31},"tree",[204,211,212,213,214,215,216],"files",[204,205,206,207,208,209,210,211,212,213,214,215,216],"counts",{"_194":70,"_195":172,"_196":70,"_197":198,"_199":200},"contents",[137,138,139,140,141,142,143],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_50":188,"_38":189,"_36":190,"_147":-5,"_48":49,"_47":172,"_149":66,"_45":191,"_13":70,"_40":192,"_42":-5,"_30":31,"_152":-5,"_33":193},{"_50":182,"_38":183,"_36":184,"_147":-5,"_48":49,"_47":172,"_149":66,"_45":185,"_13":70,"_40":26,"_42":186,"_30":31,"_152":-5,"_33":187},{"_50":176,"_38":177,"_36":178,"_147":-5,"_48":49,"_47":172,"_149":31,"_45":179,"_13":70,"_40":26,"_42":180,"_30":31,"_152":-5,"_33":181},{"_50":168,"_38":169,"_36":64,"_147":-5,"_48":49,"_47":170,"_149":66,"_45":171,"_13":172,"_40":173,"_42":174,"_30":31,"_152":52,"_33":175},{"_50":161,"_38":162,"_36":163,"_147":-5,"_48":49,"_47":164,"_149":66,"_45":165,"_13":70,"_40":41,"_42":166,"_30":31,"_152":-5,"_33":167},{"_50":154,"_38":155,"_36":156,"_147":-5,"_48":49,"_47":157,"_149":66,"_45":158,"_13":70,"_40":41,"_42":159,"_30":31,"_152":-5,"_33":160},{"_50":144,"_38":145,"_36":146,"_147":-5,"_48":49,"_47":148,"_149":31,"_45":150,"_13":70,"_40":41,"_42":151,"_30":31,"_152":-5,"_33":153},"2ce4cbbf-107e-40c2-b1d1-3689ec24a653","store.ts","112e2018-a0cc-11f1-b57b-1607ee4eb77e","parentId",2,"latest",["D",1787693374523],"// 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","label",[145],"6edaf2ce-8fc0-481e-b68c-85270fbb4baa","prompts.ts","1b119916-a0cc-11f1-be76-1607ee4eb77e",3,["D",1787693391300],"// Prompt construction + the conversational \"direction\" taxonomy.\n//\n// Human talk is largely made of predictable moves: agreeing, staying neutral,\n// pushing back, showing interest, keeping it light, or steering. We model a\n// response as choosing one of these directions, and the nonverbal person\n// simply picks the move that matches what they actually want to say.\nimport type { ConversationMessage, Profile, ResponseOption } from \"./store.ts\";\n\nexport interface Direction {\n id: string;\n label: string;\n emoji: string;\n hint: string;\n}\n\n// The conversational directions a response option can embody.\nexport const DIRECTIONS: Direction[] = [\n { id: \"agreeable\", label: \"Agree\", emoji: \"😊\", hint: \"warm agreement with what was said\" },\n { id: \"neutral\", label: \"Neutral\", emoji: \"😐\", hint: \"plain, balanced, no strong position\" },\n { id: \"disagree\", label: \"Honest\", emoji: \"🗣️\", hint: \"gentle disagreement or a differing view\" },\n { id: \"interest\", label: \"Curious\", emoji: \"🧐\", hint: \"asks a follow-up, shows genuine interest\" },\n { id: \"smalltalk\", label: \"Keep it light\", emoji: \"💬\", hint: \"keeps the chat going conversation for the sake of it\" },\n { id: \"influential\", label: \"Opinion\", emoji: \"🎯\", hint: \"shares a view or gently steers the topic\" },\n];\n\nexport function directionLabel(id: string): string {\n return DIRECTIONS.find((d) => d.id === id)?.label ?? id;\n}\n\n// Work out which \"age band\" the person is in, to scope the mock generator and\n// to make the age-appropriate rule explicit in the prompt.\nexport function ageBand(age: number): string {\n if (age <= 5) return \"a young child (~5 or under): very simple words, short sentences, concrete topics only\";\n if (age <= 9) return \"a child (~6-9): friendly, simple sentences, age-appropriate everyday topics\";\n if (age <= 12) return \"a pre-teen (~10-12): casual, a bit more curious, school/play/friend topics\";\n if (age <= 17) return \"a teenager (~13-17): casual and natural, pop culture and friend-level topics, but still age-appropriate\";\n return \"an adult (18+): mature, natural adult speech, comfortable with adult topics\";\n}\n\nexport function profileSummary(p: Profile): string {\n return [\n `- Name: ${p.name || \"not set\"}`,\n `- Age: ${p.age || \"not set\"} (treat this person as ${ageBand(p.age)})`,\n `- Closeness setting: ${p.closeness} (how deeply the voice should reflect the real person: basic = plain, deep = richly personal)`,\n `- Personality traits: ${p.personality || \"not set\"}`,\n `- Likes & interests: ${p.likes || \"not set\"}`,\n `- About this person: ${p.about || \"not set\"}`,\n ].join(\"\\n\");\n}\n\n// Age-appropriateness is a HARD boundary. It must override everything else,\n// even the personal-description text, so a caregiver writing a detailed entry\n// for a 6-year-old never yields adult language.\nconst AGE_RULE = `AGE-APPROPRIATENESS (STRICT, NON-NEGOTIABLE):\nThe person's age is the #1 constraint. Every option must use vocabulary,\nsentence structure, and topics that a person of that exact age would naturally\nuse. A 20-year-old's options must sound like a real 20-year-old speaking;\na 6-year-old's options must sound like a 6-year-old. NEVER use language above\nthe person's age even if the conversation partner is older or the topic seems\nadult — keep the RESPONSE at the person's developmental level.`;\n\n// System prompt that both the mock and real-LLM generators follow.\nexport function buildSystemPrompt(p: Profile): string {\n return `You generate the VOICE of a person who cannot speak out loud, so they can take part in a conversation by choosing from a few options you write.\n\nHere is the person's profile:\n${profileSummary(p)}\n\n${AGE_RULE}\n\nWrite every option the way THIS person would actually say it — reflecting their\nlikes, personality, background, and closeness setting — while keeping the words\nnatural and specifically age-appropriate. Do not be flowery or poetically over\nthe top; short, real-sounding speech.`;\n}\n\n// The user-facing instruction asking for a JSON array of options.\nexport function buildOptionsPrompt(\n conversation: ConversationMessage[],\n latest: ConversationMessage,\n enabledDirections: string[]\n): string {\n const dirs = DIRECTIONS.filter((d) => enabledDirections.includes(d.id));\n const dirSpec = dirs\n .map((d) => ` - \"${d.id}\" = ${d.hint}`)\n .join(\"\\n\");\n\n const history = conversation.length\n ? conversation\n .slice(0, -1)\n .map((m) => {\n const who = m.role === \"verbal\" ? \"Verbal partner\" : m.role === \"nonverbal\" ? \"The person (nonverbal)\" : \"System\";\n return `${who}: ${m.content}`;\n })\n .join(\"\\n\")\n : \"(no prior conversation)\";\n\n return `The conversation so far:\n${history}\n\nThe verbal partner just said:\n\"${latest.content}\"\n\nWrite exactly N response options that ${latest.content ? \"the nonverbal person could reply with\" : \"\"}. Each option should be a different conversational move, one for each direction below (choose exactly one option per listed direction):\n\n${dirSpec}\n\nReturn ONLY a JSON array of objects, each { \"text\": \"...\", \"direction\": \"\", \"label\": \"\" }. No commentary, no markdown fences. Make each option a distinct, natural-sounding response in that direction. Keep every option age-appropriate.`;\n}\n\n// Minimal mock generator — lets the whole app be tested with no API key and\n// gives useful canned options so the UI flows. Uses age band to keep them\n// roughly age-appropriate.\nexport function mockOptions(\n conversation: ConversationMessage[],\n latest: ConversationMessage,\n profile: Profile\n): ResponseOption[] {\n const band = ageBand(profile.age).split(\":\")[0];\n const lastVerbals = conversation.filter((m) => m.role === \"verbal\").slice(-3);\n const topicHint = latest.content.trim().slice(0, 60) || \"what they said\";\n const interest = profile.likes?.trim() ? profile.likes.trim().split(\",\")[0].trim() : \"their interests\";\n const name = profile.name;\n\n const t = (adult: string, young: string) =>\n profile.age <= 12 ? young : adult;\n\n const options: ResponseOption[] = [\n {\n direction: \"agreeable\",\n text: t(\n `Yeah, I get that. That makes sense to me.`,\n `Yeah, I think that's right too.`\n ),\n },\n {\n direction: \"neutral\",\n text: t(\n `Hmm, I hadn't thought of it quite like that. There's a lot to consider.`,\n `Hmm, I never thought of it like that before.`\n ),\n },\n {\n direction: \"interest\",\n text: t(\n `That's interesting — what made you think about it that way?`,\n `Oh, why do you think that?`\n ),\n },\n {\n direction: \"smalltalk\",\n text: t(\n `Right. Speaking of which, did you catch anything new about ${interest} lately?`,\n `Cool. Hey, do you know about ${interest}?`\n ),\n },\n {\n direction: \"influential\",\n text: t(\n `I actually see it a bit differently — I'd probably lean the other way, because of ${interest}.`,\n `I think maybe it's the other way. ${interest} is better.`\n ),\n },\n ];\n\n // Keep only enabled directions, then dedupe/limit to 5.\n const enabled = profile.directions;\n return options.filter((o) => enabled.includes(o.direction)).slice(0, 5);\n}\n",[155],"a96c7049-bef2-4c1e-9a60-3cb6e7cd94f1","llm.ts","2289f54e-a0cc-11f1-b57b-1607ee4eb77e",4,["D",1787693403827],"// LLM provider abstraction. Generates response options for the nonverbal\n// person, supporting: mock (no key), OpenAI, DeepSeek, OpenRouter, Ollama\n// (local), Anthropic, and Gemini. OpenAI/DeepSeek/OpenRouter/Ollama/Gemini\n// all speak the OpenAI Chat Completions wire format (Gemini exposes one too),\n// so they share one code path; Anthropic uses its own API.\nimport type { ConversationMessage, Profile, ResponseOption } from \"./store.ts\";\nimport { buildOptionsPrompt, buildSystemPrompt, mockOptions } from \"./prompts.ts\";\n\nexport interface ProviderInfo {\n id: string;\n name: string;\n configured: boolean;\n model: string;\n}\n\nexport function listProviders(): ProviderInfo[] {\n const defs = [\n { id: \"mock\", name: \"Built-in demo (no key needed)\", configured: true, model: \"\" },\n { id: \"openai\", name: \"OpenAI\", configured: !!Deno.env.get(\"OPENAI_API_KEY\"), model: Deno.env.get(\"OPENAI_MODEL\") || \"gpt-4o-mini\" },\n { id: \"deepseek\", name: \"DeepSeek\", configured: !!Deno.env.get(\"DEEPSEEK_API_KEY\"), model: Deno.env.get(\"DEEPSEEK_MODEL\") || \"deepseek-chat\" },\n { id: \"openrouter\", name: \"OpenRouter\", configured: !!Deno.env.get(\"OPENROUTER_API_KEY\"), model: Deno.env.get(\"OPENROUTER_MODEL\") || \"openai/gpt-4o-mini\" },\n { id: \"ollama\", name: \"Ollama (local)\", configured: true, model: Deno.env.get(\"OLLAMA_MODEL\") || \"llama3.2\" },\n { id: \"anthropic\", name: \"Anthropic\", configured: !!Deno.env.get(\"ANTHROPIC_API_KEY\"), model: Deno.env.get(\"ANTHROPIC_MODEL\") || \"claude-3-5-haiku-latest\" },\n { id: \"gemini\", name: \"Google Gemini\", configured: !!Deno.env.get(\"GEMINI_API_KEY\"), model: Deno.env.get(\"GEMINI_MODEL\") || \"gemini-1.5-flash\" },\n ];\n return defs;\n}\n\n// Generate response options for the latest verbal message.\nexport async function generateOptions(\n conversation: ConversationMessage[],\n latest: ConversationMessage,\n profile: Profile\n): Promise {\n if (profile.provider === \"mock\") {\n return mockOptions(conversation, latest, profile);\n }\n try {\n const options = await callProvider(conversation, latest, profile);\n return sanitize(options);\n } catch (err) {\n console.error(\"LLM provider failed\", profile.provider, err);\n // Fall back to mock so the conversation never hard-stops.\n return mockOptions(conversation, latest, profile);\n }\n}\n\nfunction sanitize(raw: unknown): ResponseOption[] {\n if (!Array.isArray(raw)) return [];\n const out: ResponseOption[] = [];\n for (const item of raw) {\n if (item && typeof item.text === \"string\" && item.text.trim()) {\n out.push({\n text: item.text.trim(),\n direction: typeof item.direction === \"string\" ? item.direction : \"neutral\",\n });\n }\n }\n return out.slice(0, 6);\n}\n\nasync function callProvider(\n conversation: ConversationMessage[],\n latest: ConversationMessage,\n profile: Profile\n): Promise {\n const system = buildSystemPrompt(profile);\n const user = buildOptionsPrompt(conversation, latest, profile.directions);\n\n if (profile.provider === \"anthropic\") {\n return callAnthropic(system, user, profile);\n }\n return callOpenAICompat(system, user, profile);\n}\n\nasync function callOpenAICompat(\n system: string,\n user: string,\n profile: Profile\n): Promise {\n const p = oaConfig(profile.provider);\n const res = await fetch(`${p.baseURL}/chat/completions`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n ...(p.key ? { Authorization: `Bearer ${p.key}` } : {}),\n },\n body: JSON.stringify({\n model: p.model,\n temperature: 0.8,\n response_format: { type: \"json_object\" },\n messages: [\n { role: \"system\", content: system },\n { role: \"user\", content: user },\n ],\n }),\n });\n if (!res.ok) {\n const text = await res.text();\n throw new Error(`${profile.provider} HTTP ${res.status}: ${text.slice(0, 300)}`);\n }\n const data = await res.json();\n const content = data?.choices?.[0]?.message?.content ?? \"\";\n return extractJsonArray(content);\n}\n\nfunction oaConfig(provider: string): { baseURL: string; key?: string; model: string } {\n switch (provider) {\n case \"openai\":\n return {\n baseURL: Deno.env.get(\"OPENAI_BASE_URL\") || \"https://api.openai.com/v1\",\n key: Deno.env.get(\"OPENAI_API_KEY\"),\n model: Deno.env.get(\"OPENAI_MODEL\") || \"gpt-4o-mini\",\n };\n case \"deepseek\":\n return {\n baseURL: \"https://api.deepseek.com/v1\",\n key: Deno.env.get(\"DEEPSEEK_API_KEY\"),\n model: Deno.env.get(\"DEEPSEEK_MODEL\") || \"deepseek-chat\",\n };\n case \"openrouter\":\n return {\n baseURL: Deno.env.get(\"OPENROUTER_BASE_URL\") || \"https://openrouter.ai/api/v1\",\n key: Deno.env.get(\"OPENROUTER_API_KEY\"),\n model: Deno.env.get(\"OPENROUTER_MODEL\") || \"openai/gpt-4o-mini\",\n };\n case \"ollama\":\n // Reach Ollama through a tunnel/public URL if it is not on localhost.\n return {\n baseURL: Deno.env.get(\"OLLAMA_BASE_URL\") || \"http://localhost:11434/v1\",\n model: Deno.env.get(\"OLLAMA_MODEL\") || \"llama3.2\",\n };\n case \"gemini\":\n default:\n return {\n baseURL:\n Deno.env.get(\"GEMINI_BASE_URL\") ||\n \"https://generativelanguage.googleapis.com/v1beta/openai\",\n key: Deno.env.get(\"GEMINI_API_KEY\"),\n model: Deno.env.get(\"GEMINI_MODEL\") || \"gemini-1.5-flash\",\n };\n }\n}\n\nasync function callAnthropic(system: string, user: string, profile: Profile): Promise {\n const key = Deno.env.get(\"ANTHROPIC_API_KEY\");\n const model = profile.model || Deno.env.get(\"ANTHROPIC_MODEL\") || \"claude-3-5-haiku-latest\";\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\": key || \"\",\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model,\n max_tokens: 1000,\n system,\n messages: [{ role: \"user\", content: user }],\n }),\n });\n if (!res.ok) {\n const text = await res.text();\n throw new Error(`anthropic HTTP ${res.status}: ${text.slice(0, 300)}`);\n }\n const data = await res.json();\n const content = (data?.content ?? [])\n .filter((b: { type: string }) => b.type === \"text\")\n .map((b: { text: string }) => b.text)\n .join(\"\\n\");\n return extractJsonArray(content);\n}\n\n// Pull the first JSON array out of a model's text reply (models sometimes wrap\n// JSON in prose or fences despite the instruction).\nfunction extractJsonArray(text: string): unknown {\n const fence = text.match(/```(?:json)?\\s*([\\s\\S]*?)```/);\n const candidate = fence ? fence[1] : text;\n try {\n const trimmed = candidate.trim();\n const start = trimmed.indexOf(\"[\");\n const end = trimmed.lastIndexOf(\"]\");\n if (start !== -1 && end > start) {\n return JSON.parse(trimmed.slice(start, end + 1));\n }\n return JSON.parse(trimmed);\n } catch {\n return [];\n }\n}\n",[162],"e58c1693-9955-4141-bfa6-5b3814295126","index.ts",5,["D",1787693409589],1,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport {\n addMessage,\n clearConversation,\n getMessages,\n getOptions,\n getProfile,\n saveProfile,\n setOptions,\n} from \"./store.ts\";\nimport { generateOptions, listProviders } from \"./llm.ts\";\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// ---- API ---------------------------------------------------------------\n\n// Everything the UI needs on load.\napp.get(\"/api/state\", async (c) =>\n c.json({\n profile: await getProfile(),\n messages: await getMessages(),\n options: await getOptions(),\n providers: listProviders(),\n })\n);\n\n// Save the profile. Returns the saved profile and provider list.\napp.post(\"/api/profile\", async (c) => {\n const body = await c.req.json().catch(() => ({}));\n const saved = await saveProfile(body);\n return c.json({ profile: saved, providers: listProviders() });\n});\n\n// A new thing the verbal partner said. Store it, generate options the\n// nonverbal person can reply with.\napp.post(\"/api/respond\", async (c) => {\n const body = await c.req.json().catch(() => ({}));\n const text = String(body.text ?? \"\").trim();\n if (!text) return c.json({ error: \"empty message\" }, 400);\n\n const profile = await getProfile();\n await addMessage(\"verbal\", text);\n const messages = await getMessages();\n const latest = messages[messages.length - 1];\n const options = await generateOptions(messages, latest, profile);\n await setOptions(options);\n return c.json({ messages, options });\n});\n\n// The nonverbal person chose one of the options — speak it for them.\napp.post(\"/api/choose\", async (c) => {\n const body = await c.req.json().catch(() => ({}));\n const option = body.option;\n if (!option || typeof option.text !== \"string\" || !option.text.trim()) {\n return c.json({ error: \"no option\" }, 400);\n }\n await addMessage(\"nonverbal\", option.text.trim(), option.direction || \"neutral\");\n await setOptions([]);\n return c.json({ messages: await getMessages(), options: [] });\n});\n\n// The trusted person types a custom reply on the nonverbal person's behalf.\napp.post(\"/api/type\", async (c) => {\n const body = await c.req.json().catch(() => ({}));\n const text = String(body.text ?? \"\").trim();\n if (!text) return c.json({ error: \"empty message\" }, 400);\n await addMessage(\"nonverbal\", text, \"typed\");\n await setOptions([]);\n return c.json({ messages: await getMessages(), options: [] });\n});\n\napp.post(\"/api/reset\", async (c) => {\n await clearConversation();\n return c.json({ messages: await getMessages(), options: [] });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\nexport default app.fetch;\n",[169],"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",[177],"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 · v8