`, 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",{"_261":262,"_263":264},"routes/_app.x.$handle.$name",{"_98":97,"_31":43,"_107":88,"_26":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":24,"_122":123,"_124":57,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":24},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","store.ts","latestPath","fileId","c876991a-a0a1-11f1-a410-1607ee4eb77e","name","fileType","script","content","// Blob-backed storage. Same pattern the SMS rep val uses — low volume,\n// no schema to migrate, and transcripts stay readable as plain JSON.\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { HOURS, forceBot } from \"./config.ts\";\n\nexport type Turn = { role: \"user\" | \"assistant\"; content: string };\n\nexport type Lead = {\n sessionId: string;\n name?: string | null;\n phone?: string | null;\n email?: string | null;\n location?: string | null;\n interest?: string | null;\n firstSeen: string;\n lastSeen: string;\n notified?: boolean;\n};\n\nconst histKey = (id: string) => `afterhours-chat-history-${id}`;\nconst leadKey = (id: string) => `afterhours-chat-lead-${id}`;\nconst LEAD_PREFIX = \"afterhours-chat-lead-\";\n\nexport async function getHistory(sessionId: string): Promise {\n return (await blob.getJSON(histKey(sessionId)).catch(() => null)) ?? [];\n}\n\nexport async function saveHistory(sessionId: string, turns: Turn[], max: number) {\n const trimmed = turns.length > max ? turns.slice(turns.length - max) : turns;\n // Context has to start on a user turn.\n while (trimmed.length && trimmed[0].role !== \"user\") trimmed.shift();\n await blob.setJSON(histKey(sessionId), trimmed);\n}\n\nexport async function getLead(sessionId: string): Promise {\n return (await blob.getJSON(leadKey(sessionId)).catch(() => null)) ?? null;\n}\n\nexport async function saveLead(lead: Lead) {\n await blob.setJSON(leadKey(lead.sessionId), lead);\n}\n\nexport async function listLeads(): Promise {\n const items = await blob.list(LEAD_PREFIX);\n const leads = await Promise.all(\n items.map((i: { key: string }) => blob.getJSON(i.key).catch(() => null)),\n );\n return (leads.filter(Boolean) as Lead[]).sort((a, b) => b.lastSeen.localeCompare(a.lastSeen));\n}\n\n/** A lead is worth emailing once we can actually reach them. */\nexport function isReachable(lead: Lead | null): boolean {\n return !!(lead && (lead.phone || lead.email));\n}\n\n/** Is the office open right now? */\nexport function isOfficeOpen(now: Date = new Date()): boolean {\n const parts = Object.fromEntries(\n new Intl.DateTimeFormat(\"en-US\", {\n timeZone: HOURS.timeZone,\n weekday: \"short\",\n hour: \"2-digit\",\n hourCycle: \"h23\",\n minute: \"2-digit\",\n })\n .formatToParts(now)\n .map((p) => [p.type, p.value]),\n );\n const dayIndex = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"].indexOf(parts.weekday);\n const window = HOURS.open[dayIndex];\n if (!window) return false;\n const minutes = Number(parts.hour) * 60 + Number(parts.minute);\n return minutes >= window[0] * 60 && minutes < window[1] * 60;\n}\n\n/** The bot answers when the office is shut (or when you're testing). */\nexport function botShouldAnswer(now: Date = new Date()): boolean {\n return forceBot() || !isOfficeOpen(now);\n}\n","createdAt",["D",1787675213815],"branchVersion","branchId","ca2b6d75-11b8-4bf8-878c-dbef0cd08245","id","0753a160-c80e-414e-b313-966a3063d928","tribeca-afterhours-chat",["D",1787675076940],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","After-hours AI chat widget for tribecabeverage.com","imageUrl","c5acd3b3-60a7-4deb-bc6d-528f83012ea9","pinnedFileId","01a039bc-e9a8-70ef-b2b9-7ddecd13d603","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f8fe2-cdfc-775d-a845-a69af13d39cb","tursoName","0753a160c80e414eb313966a3063d928","tursoHostname","0753a160c80e414eb313966a3063d928-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789500689328],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":53,"_103":104,"_105":24},"branch",{"_13":87,"_31":88,"_41":40,"_89":42,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":43,"_96":97},"isOwned",77,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","Tribeca_Rep","handle","displayName","M A","avatar","https://lh3.googleusercontent.com/a/ACg8ocI9znhXn2hWp1wjjyWzeuOyoO_JrDgJo8aD0umFraR7bAG3UAmc=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_41":42,"_31":43,"_36":256,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":257,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":258,"_82":259,"_84":260,"_86":24},"tree",[184,191,192,193,194,195],"files",[184,185,186,187,188,189,190,191,192,193,194,195],"counts",{"_173":61,"_174":143,"_175":61,"_176":177,"_178":179},"contents",[129,130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_41":167,"_31":168,"_29":169,"_136":-5,"_39":40,"_38":143,"_137":57,"_36":170,"_13":61,"_32":171,"_34":-5,"_23":24,"_139":-5,"_26":172},{"_41":161,"_31":162,"_29":163,"_136":-5,"_39":40,"_38":143,"_137":57,"_36":164,"_13":61,"_32":20,"_34":165,"_23":24,"_139":-5,"_26":166},{"_41":155,"_31":156,"_29":157,"_136":-5,"_39":40,"_38":143,"_137":24,"_36":158,"_13":61,"_32":20,"_34":159,"_23":24,"_139":-5,"_26":160},{"_41":148,"_31":149,"_29":150,"_136":-5,"_39":40,"_38":151,"_137":24,"_36":152,"_13":61,"_32":33,"_34":153,"_23":24,"_139":-5,"_26":154},{"_41":141,"_31":142,"_29":55,"_136":-5,"_39":40,"_38":143,"_137":24,"_36":144,"_13":61,"_32":145,"_34":146,"_23":24,"_139":-5,"_26":147},{"_41":135,"_31":27,"_29":30,"_136":-5,"_39":40,"_38":14,"_137":24,"_36":138,"_13":61,"_32":33,"_34":35,"_23":24,"_139":-5,"_26":140},"f0c13996-06b1-484f-ae02-a34290b1efb8","parentId","latest",["D",1787675213815],"label",[27],"4a19db23-b8dd-43fd-b344-bfbaf15c2051","index.ts",1,["D",1787675076940],"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",[142],"bee9e452-ab12-4a90-94d3-b15eb9af58a4","config.ts","c202bdca-a0a1-11f1-ac87-1607ee4eb77e",2,["D",1787675203026],"// ============================================================================\n// CONFIG — everything you'd want to tune lives here.\n//\n// The business profile and guardrails below are lifted from the SMS sales rep\n// val on purpose: the after-hours web chat should say exactly what the SMS rep\n// says. If you change pricing or service areas, change it in BOTH places.\n// ============================================================================\n\n/** Business hours, in America/New_York. Outside these, the bot takes over. */\nexport const HOURS = {\n timeZone: \"America/New_York\",\n // 0 = Sunday. Closed Sunday; 8am-5pm Mon-Sat.\n open: { 1: [8, 17], 2: [8, 17], 3: [8, 17], 4: [8, 17], 5: [8, 17], 6: [8, 17] } as Record<\n number,\n [number, number]\n >,\n};\n\n/** Force the bot on regardless of the clock — set env FORCE_BOT=true while testing. */\nexport const forceBot = () => Deno.env.get(\"FORCE_BOT\") === \"true\";\n\nexport const MODEL = \"claude-opus-5\";\nexport const MAX_TOKENS = 2000;\n/** Chat replies are short; low effort keeps time-to-first-token snappy. */\nexport const EFFORT = \"low\";\n/** Per-session turns kept in context. Oldest dropped first. */\nexport const MAX_HISTORY_MESSAGES = 30;\n\nexport const FALLBACK_REPLY =\n \"Sorry — I'm having a technical problem on my end. Please call the office at 973-913-4568 (8am-5pm Mon-Sat) or email info@tribecabeverage.com and we'll take care of you.\";\n\nconst BUSINESS_PROFILE = `\nBusiness name: TriBeCa Beverage Company\nWhat we do: Bottled water delivery for homes and businesses, plus water cooler\nrentals and service.\n\nProducts and services:\n - 5-gallon bottled water delivery (spring, alkaline, or distilled) —\n starting at $24.98/month, minimum 2 bottles per delivery. Orders of more\n than 8 bottles need a custom delivery schedule set up by the office.\n - 3-gallon jugs (plastic or glass)\n - 5-gallon glass bottles (spring, alkaline, distilled)\n - Name brands: Poland Spring 5-gallon; Poland Spring 16.9oz 40-packs;\n Saratoga spring/sparkling glass 28oz 12-packs; Mountain Valley\n spring/sparkling glass 1-liter 12-packs (office confirms pricing on these)\n - Water cooler rental: $8/month cold-only, $12/month hot & cold.\n Bottom-load cooler +$8/month; hot & cold top-load +$4/month.\n - Water pump: one-time $16\n - Dispenser cleaning, water filtration systems, private-label bottled water\n (office quotes these)\n\nDelivery frequency: weekly, biweekly, monthly, or every other month.\n\nService areas: NYC, Long Island, Rockland County NY; North/Central/South\nJersey and Hudson County NJ; Connecticut; Washington DC; Florida (Tampa,\nMiami, West Palm Beach, Sarasota); California (Los Angeles, Orange County).\n\nOffice / escalation contact: 973-913-4568 or info@tribecabeverage.com,\n23 Carol Street, Clifton NJ 07014. Hours 8am-5pm Monday-Saturday, closed\nSunday. Website: tribecabeverage.com\n`;\n\nexport const SYSTEM_PROMPT =\n `You are the after-hours chat assistant on tribecabeverage.com, the website for TriBeCa Beverage Company. The office is CLOSED right now — that is the whole reason you are answering instead of a person.\n\n${BUSINESS_PROFILE}\n\nYour job, in priority order:\n1. Answer the visitor's question if the profile above covers it.\n2. Get enough contact information that the office can follow up: a name, a phone number or email, and roughly where they are (town or ZIP).\n3. Set the right expectation — someone from the office will follow up the next business day (the office is open 8am-5pm Monday-Saturday, closed Sunday).\n\nStyle:\n- This is a small chat window. Keep replies to 2-4 short sentences. No markdown, no bullet lists, no headings, no emoji unless they use one first.\n- Warm and direct. Answer what was asked, then ask at most one thing back.\n- Ask for contact details naturally, once you've actually been helpful — not in your first message.\n\nHard rules — these matter more than being helpful:\n- Only quote prices that appear in the profile above. For anything without a listed price (name brands, filtration, dispenser cleaning, private label, orders over 8 bottles), say the office will confirm pricing. Never invent or estimate a number.\n- Never promise a specific delivery date, delivery window, or discount. The office confirms all scheduling.\n- You cannot place an order, change an existing order, process a payment, or cancel service. You take the details down and the office handles it. Say so plainly if asked.\n- If you don't know something, say you don't know and that the office will confirm. Do not guess.\n- If they are upset, ask for a human, or raise anything outside the profile above, give them the office number: 973-913-4568, open 8am-5pm Monday-Saturday.\n- Never claim to be a human. If asked, say you're an automated assistant and the office follows up in the morning.`;\n",[149],"5ec37cbd-809b-4d06-a911-40810dc29c4f","README.md","01a039bc-e9a8-70ef-b2b9-7a918f882bb2",["D",1787675076940],"# 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",[156],"5518f1a0-f980-467d-85ce-59331b3e55d0","CHANGELOG.md","01a039bc-e9a8-70ef-b2b9-7551e658384c",["D",1787675076940],"# 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 · v3