[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_268":269,"_270":271},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_202":-5,"_20":203,"_22":204,"_205":206,"_207":208,"_26":209,"_24":210,"_211":-5,"_212":-5,"_213":52,"_214":215,"_216":43,"_217":-5,"_218":-5,"_219":220},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","Tribeca_Rep","name","tribeca-afterhours-chat","branchName","main","version","path","lookup.ts","project",{"_33":144,"_13":14,"_44":145,"_146":-5,"_147":52,"_148":149,"_150":149,"_151":152,"_153":-5,"_154":155,"_156":88,"_157":43,"_158":-5,"_159":-5,"_160":126,"_161":162,"_163":164,"_165":166,"_167":168,"_169":-5,"_170":171,"_172":171,"_173":174,"_175":174,"_176":174,"_177":171,"_178":171,"_179":180,"_181":182,"_183":184,"_185":52},"tree",[55,56,57,58,59,60,61,62,63],"file",{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":45,"_17":46,"_47":48,"_49":50,"_51":52,"_53":-5,"_18":54},"contents",[],"upstream","pull","ahead","behind","envVars","id","0b96325a-7a0b-4df1-8b4d-caf8c04d20b5","fileId","25eee1b4-a0cb-11f1-a949-1607ee4eb77e","parentId","branchId","ca2b6d75-11b8-4bf8-878c-dbef0cd08245","branchVersion",45,"latest",true,"createdAt",["D",1787693674712],4,"fileType","script","content","// Deterministic account identification.\n//\n// Every inbound message is scanned in CODE for a phone number or email before\n// the model is called. If one is found, the Salesforce lookup runs and the\n// result is injected into the model's context as fact.\n//\n// The model never decides whether to look someone up, and never decides what\n// their delivery date is — it only relays what it was handed. This exists\n// because the alternative (letting the model call a tool when it judges it\n// appropriate) was tested against tawk's Apollo agent and it both failed to\n// call the tool and invented a delivery date instead.\n\nconst EMAIL_RE = /[\\w.+-]+@[\\w-]+\\.[\\w.-]+/;\nconst PHONE_RE = /(?:\\+?1[\\s.-]?)?\$?\\d{3}\$?[\\s.-]?\\d{3}[\\s.-]?\\d{4}/;\n\nexport type Contact = { email: string | null; phone: string | null };\n\nexport function scrapeContact(text: string): Contact {\n const email = text.match(EMAIL_RE)?.[0] ?? null;\n const raw = text.match(PHONE_RE)?.[0] ?? null;\n return { email, phone: raw ? normalizePhone(raw) : null };\n}\n\nfunction normalizePhone(raw: string): string | null {\n const d = raw.replace(/\\D/g, \"\");\n const ten = d.length === 11 && d.startsWith(\"1\") ? d.slice(1) : d;\n return ten.length === 10 ? ten : null;\n}\n\nexport type AccountResult = {\n found: boolean;\n account_name?: string;\n next_delivery_date?: string | null;\n message: string;\n /** Set when the lookup itself failed, as opposed to finding nothing. */\n errored?: boolean;\n /** Set when only an email was supplied — accounts match on phone only. */\n needs_phone?: boolean;\n /** Set when the identifier matched several accounts; never guess between them. */\n ambiguous?: boolean;\n};\n\n/**\n * Ask the shared lookup service (tribeca-apollo) about this contact.\n * That endpoint owns the SOQL and returns a deliberately thin shape — account\n * name and delivery date only, never addresses or other contacts.\n */\nexport async function lookupAccount(c: Contact): Promise {\n if (!c.email && !c.phone) return null;\n\n const base = Deno.env.get(\"ACCOUNT_LOOKUP_URL\") ?? \"https://tribeca-apollo.val.run/account-lookup\";\n const key = Deno.env.get(\"APOLLO_TOOL_KEY\");\n if (!key) {\n console.error(\"APOLLO_TOOL_KEY not set — skipping account lookup\");\n return { found: false, message: \"lookup unavailable\", errored: true };\n }\n\n const url = new URL(base);\n if (c.phone) url.searchParams.set(\"phone\", c.phone);\n if (c.email) url.searchParams.set(\"email\", c.email);\n\n try {\n const res = await fetch(url, { headers: { \"x-api-key\": key } });\n if (!res.ok) {\n console.error(`Account lookup returned ${res.status}`);\n return { found: false, message: \"lookup unavailable\", errored: true };\n }\n return await res.json();\n } catch (err) {\n console.error(\"Account lookup failed:\", err);\n return { found: false, message: \"lookup unavailable\", errored: true };\n }\n}\n\n/**\n * Turn a lookup result into a context block for the model.\n *\n * Both branches are explicit on purpose. Saying nothing when no account matched\n * is what lets a model fill the silence with an invented delivery date.\n */\nexport function accountContext(r: AccountResult | null): string {\n if (!r) return \"\";\n if (r.errored) {\n return `\nACCOUNT LOOKUP: temporarily unavailable.\nTell the visitor you cannot check the account right now and the office will follow up. Do NOT state any delivery date.`;\n }\n if (r.ambiguous) {\n // \"We found you more than once\" is a different statement from \"we have no\n // record of you\". Telling an existing customer the latter is worse than\n // saying nothing.\n return `\nACCOUNT LOOKUP RESULT: that phone number appears on more than one account.\nTell the visitor their number is on more than one account and the office will confirm which one is theirs.\nDo NOT pick one. Do NOT say you could not find them. Do NOT state or estimate a delivery date.`;\n }\n if (r.needs_phone) {\n // Accounts are only matchable by phone — Salesforce permissions expose no\n // email field to this integration user.\n return `\nACCOUNT LOOKUP: an email address alone cannot identify an account.\nAsk the visitor for the phone number on their account so it can be looked up.\nDo NOT state or estimate a delivery date. Do NOT say a delivery is scheduled.`;\n }\n if (!r.found) {\n return `\nACCOUNT LOOKUP RESULT: no account matched the details this visitor gave.\nTell them you could not find an account with those details and the office will check other records.\nDo NOT state or estimate a delivery date. Do NOT say a delivery is scheduled.`;\n }\n return `\nACCOUNT LOOKUP RESULT: verified from our records.\n- Account name: ${r.account_name ?? \"(unknown)\"}\n- Next scheduled delivery: ${r.next_delivery_date ?? \"none currently scheduled\"}\nUse ONLY these facts when discussing this visitor's account. Do not add, estimate, or embellish.\nIf the next delivery is \"none currently scheduled\", say no delivery is currently scheduled and the office can arrange one.`;\n}\n","deleted",false,"label",[19],{"_33":130,"_13":131,"_35":132,"_37":-5,"_38":39,"_40":79,"_42":43,"_44":133,"_17":126,"_47":134,"_49":-5,"_51":52,"_53":-5,"_71":135,"_18":136},{"_33":122,"_13":123,"_35":124,"_37":-5,"_38":39,"_40":79,"_42":43,"_44":125,"_17":126,"_47":24,"_49":127,"_51":52,"_53":-5,"_71":128,"_18":129},{"_33":114,"_13":115,"_35":116,"_37":-5,"_38":39,"_40":117,"_42":43,"_44":118,"_17":110,"_47":24,"_49":119,"_51":52,"_53":-5,"_71":120,"_18":121},{"_33":105,"_13":106,"_35":107,"_37":-5,"_38":39,"_40":108,"_42":43,"_44":109,"_17":110,"_47":48,"_49":111,"_51":52,"_53":-5,"_71":112,"_18":113},{"_33":96,"_13":97,"_35":98,"_37":-5,"_38":39,"_40":99,"_42":43,"_44":100,"_17":101,"_47":48,"_49":102,"_51":52,"_53":-5,"_71":103,"_18":104},{"_33":86,"_13":87,"_35":88,"_37":-5,"_38":39,"_40":89,"_42":43,"_44":90,"_17":91,"_47":92,"_49":93,"_51":52,"_53":-5,"_71":94,"_18":95},{"_33":34,"_13":19,"_35":36,"_37":-5,"_38":39,"_40":41,"_42":43,"_44":83,"_17":46,"_47":48,"_49":50,"_51":52,"_53":-5,"_71":84,"_18":85},{"_33":74,"_13":75,"_35":76,"_37":-5,"_38":39,"_40":77,"_42":43,"_44":78,"_17":79,"_47":48,"_49":80,"_51":52,"_53":-5,"_71":81,"_18":82},{"_33":64,"_13":65,"_35":66,"_37":-5,"_38":39,"_40":67,"_42":43,"_44":68,"_17":69,"_47":48,"_49":70,"_51":52,"_53":-5,"_71":72,"_18":73},"317aefb1-fd6e-414b-b510-5e556948c205","widget.ts","fe38147a-a0a1-11f1-88e9-1607ee4eb77e",7,["D",1787675329407],2,"// The embeddable widget, served as plain JS from GET /widget.js.\n// __BASE__ is replaced with this val's origin at serve time so the script works\n// no matter which page embeds it.\n//\n// Kept in a shadow root on purpose: WordPress themes and their plugins throw a\n// lot of global CSS around, and this has to survive all of it.\nexport const WIDGET_JS = String.raw`\n(function () {\n if (window.__tribecaAfterHours) return;\n window.__tribecaAfterHours = true;\n\n var BASE = \"__BASE__\";\n var PREVIEW = __PREVIEW__;\n var GREETING =\n \"Hi! The office is closed right now, but I can answer questions about water delivery and cooler rentals — and make sure someone follows up with you in the morning. What can I help with?\";\n\n if (PREVIEW) {\n init();\n } else {\n fetch(BASE + \"/api/status\")\n .then(function (r) { return r.json(); })\n .then(function (s) { if (s && s.bot) init(); })\n .catch(function () { /* val unreachable: show nothing, leave the page alone */ });\n }\n\n function init() {\n var sessionId = null;\n try {\n sessionId = localStorage.getItem(\"tribeca-chat-session\");\n if (!sessionId) {\n sessionId = (crypto.randomUUID && crypto.randomUUID()) ||\n String(Date.now()) + Math.random().toString(16).slice(2);\n localStorage.setItem(\"tribeca-chat-session\", sessionId);\n }\n } catch (e) {\n sessionId = String(Date.now()) + Math.random().toString(16).slice(2);\n }\n\n var host = document.createElement(\"div\");\n host.style.cssText = \"position:fixed;bottom:0;right:0;z-index:2147483000;\";\n document.body.appendChild(host);\n var root = host.attachShadow({ mode: \"open\" });\n\n var style = document.createElement(\"style\");\n style.textContent = [\n \":host,*{box-sizing:border-box}\",\n \".bubble{position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;\",\n \"background:#0b6ab0;border:none;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.28);\",\n \"display:flex;align-items:center;justify-content:center;transition:transform .15s}\",\n \".bubble:hover{transform:scale(1.06)}\",\n \".bubble svg{width:26px;height:26px;fill:#fff}\",\n \".panel{position:fixed;bottom:20px;right:20px;width:360px;max-width:calc(100vw - 24px);\",\n \"height:520px;max-height:calc(100vh - 40px);background:#fff;border-radius:12px;display:none;\",\n \"flex-direction:column;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3);\",\n \"font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}\",\n \".panel.open{display:flex}\",\n \".hd{background:#0b6ab0;color:#fff;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}\",\n \".hd h3{margin:0;font-size:15px;font-weight:600}\",\n \".hd p{margin:2px 0 0;font-size:12px;opacity:.85}\",\n \".x{background:none;border:none;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 4px}\",\n \".msgs{flex:1;overflow-y:auto;padding:16px;background:#f6f8fa}\",\n \".m{margin-bottom:12px;display:flex}\",\n \".m.u{justify-content:flex-end}\",\n \".b{max-width:82%;padding:9px 13px;border-radius:14px;font-size:14px;line-height:1.45;white-space:pre-wrap;word-wrap:break-word}\",\n \".m.a .b{background:#fff;color:#1a1a1a;border:1px solid #e3e8ee;border-bottom-left-radius:4px}\",\n \".m.u .b{background:#0b6ab0;color:#fff;border-bottom-right-radius:4px}\",\n \".dots span{display:inline-block;width:6px;height:6px;margin-right:3px;border-radius:50%;\",\n \"background:#9aa5b1;animation:bl 1.2s infinite}\",\n \".dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}\",\n \"@keyframes bl{0%,60%,100%{opacity:.3}30%{opacity:1}}\",\n \".ft{border-top:1px solid #e3e8ee;padding:10px;display:flex;gap:8px;background:#fff}\",\n \".ft textarea{flex:1;resize:none;border:1px solid #d5dce4;border-radius:8px;padding:9px 11px;\",\n \"font-size:14px;font-family:inherit;height:38px;max-height:96px;outline:none}\",\n \".ft textarea:focus{border-color:#0b6ab0}\",\n \".ft button{background:#0b6ab0;color:#fff;border:none;border-radius:8px;padding:0 15px;\",\n \"font-size:14px;font-weight:500;cursor:pointer}\",\n \".ft button:disabled{background:#a9bccd;cursor:default}\",\n \".note{font-size:11px;color:#8a94a0;text-align:center;padding:0 10px 8px;background:#fff}\",\n ].join(\"\");\n root.appendChild(style);\n\n var wrap = document.createElement(\"div\");\n wrap.innerHTML = [\n '\",\n '

',\n '

TriBeCa Beverage

Office closed — automated assistant

',\n '

',\n \"

\",\n '

Answers are automated and may be wrong. The office confirms all pricing and scheduling.

',\n \"

\",\n ].join(\"\");\n root.appendChild(wrap);\n\n var bubble = root.querySelector(\".bubble\");\n var panel = root.querySelector(\".panel\");\n var msgs = root.querySelector(\".msgs\");\n var input = root.querySelector(\"textarea\");\n var send = root.querySelector(\".send\");\n var closeBtn = root.querySelector(\".x\");\n var busy = false;\n var started = false;\n\n function add(role, text) {\n var m = document.createElement(\"div\");\n m.className = \"m \" + (role === \"user\" ? \"u\" : \"a\");\n var b = document.createElement(\"div\");\n b.className = \"b\";\n b.textContent = text;\n m.appendChild(b);\n msgs.appendChild(m);\n msgs.scrollTop = msgs.scrollHeight;\n return b;\n }\n\n function open() {\n panel.classList.add(\"open\");\n bubble.style.display = \"none\";\n if (!started) { started = true; add(\"assistant\", GREETING); }\n input.focus();\n }\n function close() { panel.classList.remove(\"open\"); bubble.style.display = \"flex\"; }\n\n bubble.addEventListener(\"click\", open);\n closeBtn.addEventListener(\"click\", close);\n input.addEventListener(\"keydown\", function (e) {\n if (e.key === \"Enter\" && !e.shiftKey) { e.preventDefault(); submit(); }\n });\n input.addEventListener(\"input\", function () {\n input.style.height = \"38px\";\n input.style.height = Math.min(input.scrollHeight, 96) + \"px\";\n });\n send.addEventListener(\"click\", submit);\n\n function submit() {\n var text = input.value.trim();\n if (!text || busy) return;\n input.value = \"\";\n input.style.height = \"38px\";\n add(\"user\", text);\n busy = true;\n send.disabled = true;\n\n var typing = document.createElement(\"div\");\n typing.className = \"m a\";\n typing.innerHTML = '

';\n msgs.appendChild(typing);\n msgs.scrollTop = msgs.scrollHeight;\n\n var bubbleEl = null;\n var acc = \"\";\n function ensureBubble() {\n if (!bubbleEl) { typing.remove(); bubbleEl = add(\"assistant\", \"\"); }\n return bubbleEl;\n }\n\n fetch(BASE + \"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ sessionId: sessionId, message: text }),\n })\n .then(function (res) {\n if (!res.ok || !res.body) throw new Error(\"bad response\");\n var reader = res.body.getReader();\n var dec = new TextDecoder();\n var buf = \"\";\n function pump() {\n return reader.read().then(function (r) {\n if (r.done) return;\n buf += dec.decode(r.value, { stream: true });\n var parts = buf.split(\"\\n\\n\");\n buf = parts.pop();\n parts.forEach(function (chunk) {\n var line = chunk.split(\"\\n\").find(function (l) { return l.indexOf(\"data: \") === 0; });\n if (!line) return;\n var payload;\n try { payload = JSON.parse(line.slice(6)); } catch (e) { return; }\n if (payload.t) { acc += payload.t; ensureBubble().textContent = acc; msgs.scrollTop = msgs.scrollHeight; }\n if (payload.error) { ensureBubble().textContent = payload.error; }\n });\n return pump();\n });\n }\n return pump();\n })\n .catch(function () {\n ensureBubble().textContent =\n \"Sorry — I couldn't reach our system. Please call 973-913-4568 (8am‑5pm Mon‑Sat) or email info@tribecabeverage.com.\";\n })\n .then(function () {\n if (typing.parentNode) typing.remove();\n busy = false;\n send.disabled = false;\n input.focus();\n });\n }\n }\n})();\n`;\n","children",[],[65],"e52decdb-a38a-4aa7-95fb-2488c7342f56","store.ts","c876991a-a0a1-11f1-a410-1607ee4eb77e",37,["D",1787693000930],1,"// 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\n/** Cached account identification, so we look a visitor up once per session. */\nexport type SessionAccount = {\n found: boolean;\n account_name?: string;\n next_delivery_date?: string | null;\n message: string;\n errored?: boolean;\n identifiedAt: string;\n};\n\nconst acctKey = (id: string) => `afterhours-chat-account-${id}`;\n\nexport async function getSessionAccount(sessionId: string): Promise {\n return (await blob.getJSON(acctKey(sessionId)).catch(() => null)) ?? null;\n}\n\nexport async function saveSessionAccount(sessionId: string, a: SessionAccount) {\n await blob.setJSON(acctKey(sessionId), a);\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",[],[75],["D",1787693674712],[],[19],"35f772bb-d3d6-4d7d-9d6c-85cccc04740f","index.ts","01a039bc-e9a8-70ef-b2b9-7ddecd13d603",43,["D",1787693369106],14,"http","// After-hours AI chat for tribecabeverage.com\n//\n// tawk.to keeps the daytime. When the office is closed this answers instead,\n// captures a lead, and emails it to the office. It does NOT touch tawk.to —\n// the two never run at the same time because the widget only renders when\n// /api/status says the office is shut.\n//\n// Routes:\n// GET / install instructions + live preview of the widget\n// GET /widget.js the embeddable script (add ?preview=1 to force it open)\n// GET /api/status { open, bot } — the widget asks before rendering\n// POST /api/chat { sessionId, message } -> SSE stream of reply deltas\n// GET /leads?key= captured leads + transcripts (needs LEADS_KEY)\n//\n// Env vars (Val Town sidebar > Environment Variables):\n// GEMINI_API_KEY required — from aistudio.google.com/apikey\n// LEADS_KEY required to view /leads (it's PII; no key = no page)\n// NOTIFY_EMAIL optional — where lead emails go; defaults to val owner\n// FORCE_BOT optional — \"true\" makes the bot answer around the clock\nimport { parseVal } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { FALLBACK_REPLY, forceBot, MAX_HISTORY_MESSAGES } from \"./config.ts\";\nimport { extractLead, looksLikeContactInfo, replyChunks } from \"./agent.ts\";\nimport {\n botShouldAnswer,\n getHistory,\n getSessionAccount,\n isOfficeOpen,\n listLeads,\n saveHistory,\n saveSessionAccount,\n type Turn,\n} from \"./store.ts\";\nimport { accountContext, lookupAccount, scrapeContact } from \"./lookup.ts\";\nimport { WIDGET_JS } from \"./widget.ts\";\n\nconst app = new Hono();\n\nconst CORS = {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n \"Access-Control-Allow-Methods\": \"GET, POST, OPTIONS\",\n};\n\napp.options(\"/api/*\", (c) => new Response(null, { status: 204, headers: CORS }));\n\n// ---------------------------------------------------------------- status\napp.get(\"/api/status\", (c) =>\n new Response(JSON.stringify({ open: isOfficeOpen(), bot: botShouldAnswer() }), {\n headers: { ...CORS, \"Content-Type\": \"application/json\", \"Cache-Control\": \"no-store\" },\n }));\n\n// ---------------------------------------------------------------- widget\napp.get(\"/widget.js\", (c) => {\n const base = new URL(c.req.url).origin;\n const preview = c.req.query(\"preview\") === \"1\";\n const js = WIDGET_JS\n .replaceAll(\"__BASE__\", base)\n .replaceAll(\"__PREVIEW__\", String(preview));\n return new Response(js, {\n headers: {\n ...CORS,\n \"Content-Type\": \"application/javascript; charset=utf-8\",\n // Short cache: you'll be tweaking copy, and a stale widget is confusing.\n \"Cache-Control\": \"public, max-age=300\",\n },\n });\n});\n\n// ---------------------------------------------------------------- chat\napp.post(\"/api/chat\", async (c) => {\n let body: { sessionId?: string; message?: string };\n try {\n body = await c.req.json();\n } catch {\n return new Response(\"Bad JSON\", { status: 400, headers: CORS });\n }\n\n const sessionId = (body.sessionId ?? \"\").slice(0, 100);\n const message = (body.message ?? \"\").trim().slice(0, 2000);\n if (!sessionId || !message) return new Response(\"Missing sessionId or message\", { status: 400, headers: CORS });\n\n // Don't let the bot talk over a human who's on shift.\n if (!botShouldAnswer()) {\n return sse((send) => {\n send({ t: \"Our office is open right now — please use the chat at the bottom of the page and someone will be right with you.\" });\n });\n }\n\n const history: Turn[] = await getHistory(sessionId);\n history.push({ role: \"user\", content: message });\n\n // ---- deterministic account identification, BEFORE the model is called ----\n // Scan this message in code. If it carries a phone or email and we haven't\n // already identified this session, resolve the account now and hand the model\n // the answer as fact. The model never chooses whether this happens.\n let account = await getSessionAccount(sessionId);\n const contact = scrapeContact(message);\n const hasIdentifier = !!(contact.email || contact.phone);\n // Retry whenever this message carries an identifier and we have not yet\n // positively matched. The visitor who gives an email first and a phone\n // second must get looked up on the second message — caching any non-match\n // would skip the lookup at exactly the moment it would have succeeded.\n if (hasIdentifier && !account?.found) {\n const result = await lookupAccount(contact);\n if (result) {\n account = { ...result, identifiedAt: new Date().toISOString() };\n await saveSessionAccount(sessionId, account);\n console.log(\n `account scan: phone=${!!contact.phone} email=${!!contact.email} matched=${result.found} errored=${!!result.errored}`,\n );\n }\n }\n const context = accountContext(account);\n\n const encoder = new TextEncoder();\n const stream = new ReadableStream({\n async start(controller) {\n const push = (obj: unknown) =>\n controller.enqueue(encoder.encode(`data: ${JSON.stringify(obj)}\\n\\n`));\n let text = \"\";\n try {\n for await (const chunk of replyChunks(history, context)) {\n text += chunk;\n push({ t: chunk });\n }\n } catch (err) {\n console.error(\"Model call failed:\", err);\n if (!text) push({ error: FALLBACK_REPLY });\n }\n\n if (text) {\n history.push({ role: \"assistant\", content: text });\n await saveHistory(sessionId, history, MAX_HISTORY_MESSAGES);\n }\n // Extraction must finish BEFORE we signal done and close the stream.\n // Anything awaited after the response body is complete can be torn down\n // mid-flight by the runtime — silently, with no error to log.\n // The visitor is already reading the reply while this runs; the only\n // cost is that the send button re-enables a beat later.\n if (text && looksLikeContactInfo(message)) {\n try {\n await extractLead(sessionId, history);\n } catch (err) {\n console.error(\"Lead extraction failed:\", err);\n }\n }\n\n push({ done: true });\n controller.close();\n },\n });\n\n return new Response(stream, {\n headers: {\n ...CORS,\n \"Content-Type\": \"text/event-stream; charset=utf-8\",\n \"Cache-Control\": \"no-cache, no-transform\",\n \"X-Accel-Buffering\": \"no\",\n },\n });\n});\n\nfunction sse(fill: (send: (obj: unknown) => void) => void): Response {\n const encoder = new TextEncoder();\n const stream = new ReadableStream({\n start(controller) {\n fill((obj) => controller.enqueue(encoder.encode(`data: ${JSON.stringify(obj)}\\n\\n`)));\n controller.enqueue(encoder.encode(`data: ${JSON.stringify({ done: true })}\\n\\n`));\n controller.close();\n },\n });\n return new Response(stream, {\n headers: { ...CORS, \"Content-Type\": \"text/event-stream; charset=utf-8\", \"Cache-Control\": \"no-cache\" },\n });\n}\n\n// ---------------------------------------------------------------- leads\napp.get(\"/leads\", async (c) => {\n const expected = Deno.env.get(\"LEADS_KEY\");\n if (!expected) {\n return c.text(\n \"Set a LEADS_KEY environment variable on this val, then visit /leads?key=YOUR_KEY.\\n\" +\n \"This page shows customer names, phone numbers, and chat transcripts, so it stays closed until you do.\",\n 503,\n );\n }\n if (c.req.query(\"key\") !== expected) return c.text(\"Not found\", 404);\n\n const leads = await listLeads();\n const esc = (s: unknown) =>\n String(s ?? \"-\").replace(/[&<>]/g, (m) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\" }[m]!));\n const rows = leads.map((l) =>\n \"\" +\n [l.lastSeen.replace(\"T\", \" \").slice(0, 16), l.name, l.phone, l.email, l.location, l.interest,\n l.notified ? \"sent\" : \"-\"]\n .map((v) => `${esc(v)}`).join(\"\") +\n \"\"\n ).join(\"\");\n\n return c.html(\n `After-hours leads\n\n

After-hours chat leads (${leads.length})

\n${\n leads.length\n ? `${rows}

Last seen	Name	Phone	Email	Location	Wants	Emailed

`\n : `

Nothing captured yet.

`\n }`,\n );\n});\n\n// ---------------------------------------------------------------- home\napp.get(\"/\", (c) => {\n const base = new URL(c.req.url).origin;\n const open = isOfficeOpen();\n // A testing override that's silently on is a footgun — say so loudly.\n const forced = forceBot();\n return c.html(\n `Tribeca after-hours chat\n\n\n

After-hours chat widget

Answers on tribecabeverage.com when the office is closed. The live widget is in the corner of this page →

\n${\n forced\n ? `

FORCE_BOT is on. The bot will answer during business hours too, on top of tawk.to. Fine for testing — set FORCE_BOT to false in this val's Environment Variables before you leave the widget live on the site.

`\n : \"\"\n }\n

Office right now: ${\n open ? \"OPEN — tawk.to handles it\" : \"CLOSED — bot answers\"\n }${forced ? ` bot forced on` : \"\"}

\n\n

Install

Paste this once into the site footer (WordPress: Appearance → Theme File Editor, or a \"custom HTML/scripts\" plugin):

<script src=\"${base}/widget.js\" defer></script>

It leaves tawk.to completely alone — the bubble only renders when the office is closed, so the two never appear together.

\n\n

Before it works

GEMINI_API_KEY — from aistudio.google.com/apikey. Add it here.
LEADS_KEY — any random string; then /leads?key=… shows what's been captured.
NOTIFY_EMAIL — optional; where lead emails go. Unset means they go to the val owner.
FORCE_BOT=true — optional; makes the bot answer during business hours too, for testing.

\n\n

Hours

8am–5pm Mon–Sat, closed Sunday, America/New_York — same as the SMS rep. Change them in config.ts.

View source

\n`,\n );\n});\n\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n",[],[87],"81103ddb-8efe-464f-b029-a5daa9d619ae","config.ts","c202bdca-a0a1-11f1-ac87-1607ee4eb77e",77,["D",1788812364851],28,"// ============================================================================\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\n/** Same model the SMS sales rep uses, so both bots behave alike. */\nexport const MODEL = \"gemini-3.5-flash\";\n/** Chat replies are 2-4 sentences; this is a ceiling, not a target. */\nexport const MAX_OUTPUT_TOKENS = 800;\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\n// Pricing and service areas come from ONE shared module, not a copy pasted\n// here. The copy this replaced was missing Orlando and Lakeland/Polk County,\n// so this widget was telling website visitors we do not serve towns the phone\n// bot was actively selling to.\n//\n// Do not paste a price into this file. Edit tribeca-profile.\n// The ?v= is load-bearing: Val Town caches a remote module by URL, so without\n// it this widget keeps quoting the old prices after tribeca-profile changes,\n// with nothing in any log. Bump it whenever PROFILE_VERSION changes.\nimport { BUSINESS_PROFILE } from \"https://esm.town/v/Tribeca_Rep/tribeca-profile/profile.ts?v=2026-09-07d\";\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 BREAK A LISTED PRICE INTO INVENTED COMPONENTS. The profile gives whole figures — glass is \"$69.99 for 1 bottle first order, $39.99 after\" with delivery included, not itemized separately. If asked how a total breaks down and the profile doesn't spell out the components, quote the total only and say the office can walk through exactly how it's built. Do not reconstruct a plausible-looking split (e.g. guessing a per-bottle water price and a delivery fee that add up to the right total) — a real bot did this and invented every number in the breakdown despite the total being right.\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",[],[97],"047ee83e-1525-4e45-836c-187a2c1c0576","agent.ts","df287cfa-a0a1-11f1-afef-1607ee4eb77e",68,["D",1788751538099],3,"// Gemini-backed reply + lead extraction.\n//\n// Matches the SDK, model, and call shape already proven in\n// tribeca-sms-sales-rep and tribeca-outbound-sales-call, so there's one Gemini\n// pattern across the account rather than two.\n//\n// replyChunks() is deliberately provider-neutral (an async iterable of text) —\n// swapping providers later means rewriting this file and nothing else.\nimport { GoogleGenerativeAI, SchemaType } from \"npm:@google/generative-ai\";\nimport { email } from \"https://esm.town/v/std/email\";\nimport { MAX_OUTPUT_TOKENS, MODEL, SYSTEM_PROMPT } from \"./config.ts\";\nimport { getLead, isReachable, type Lead, saveLead, type Turn } from \"./store.ts\";\n\nfunction genAI(): GoogleGenerativeAI {\n const key = Deno.env.get(\"GEMINI_API_KEY\");\n if (!key) throw new Error(\"GEMINI_API_KEY is not set on this val\");\n return new GoogleGenerativeAI(key);\n}\n\n/** Our neutral Turn[] -> Gemini's {role, parts} contents. */\nfunction toContents(history: Turn[]) {\n return history.map((t) => ({\n role: t.role === \"assistant\" ? \"model\" : \"user\",\n parts: [{ text: t.content }],\n }));\n}\n\n/**\n * Stream the assistant's reply as plain text chunks.\n *\n * `accountContext` is verified fact resolved in code before this is called —\n * appended to the system instruction so the model relays it rather than\n * deciding for itself whether to look anything up.\n */\nexport async function* replyChunks(history: Turn[], accountContext = \"\"): AsyncGenerator {\n const model = genAI().getGenerativeModel({\n model: MODEL,\n systemInstruction: accountContext ? `${SYSTEM_PROMPT}\\n${accountContext}` : SYSTEM_PROMPT,\n generationConfig: { maxOutputTokens: MAX_OUTPUT_TOKENS },\n });\n const result = await model.generateContentStream({ contents: toContents(history) });\n for await (const chunk of result.stream) {\n const text = chunk.text();\n if (text) yield text;\n }\n}\n\n// Every field is a plain string — Gemini fills \"\" when the visitor hasn't said\n// it. Avoids leaning on nullable-schema support, which varies by SDK version.\nconst LEAD_SCHEMA = {\n type: SchemaType.OBJECT,\n properties: {\n name: { type: SchemaType.STRING, description: \"Visitor's name, or \\\"\\\" if not given\" },\n phone: { type: SchemaType.STRING, description: \"Phone number, or \\\"\\\"\" },\n email: { type: SchemaType.STRING, description: \"Email address, or \\\"\\\"\" },\n location: { type: SchemaType.STRING, description: \"Town, city, or ZIP, or \\\"\\\"\" },\n interest: {\n type: SchemaType.STRING,\n description: \"One short line on what they want (product, quantity, cooler, problem), or \\\"\\\"\",\n },\n },\n required: [\"name\", \"phone\", \"email\", \"location\", \"interest\"],\n};\n\n/** Worth running an extraction pass? Cheap gate so we don't bill a call per turn. */\nexport function looksLikeContactInfo(text: string): boolean {\n return /\\d{3}|@|\\bzip\\b|\\bcall me\\b|\\bemail\\b|\\bmy name is\\b/i.test(text);\n}\n\nconst clean = (v: unknown): string | null => {\n const s = typeof v === \"string\" ? v.trim() : \"\";\n return s && s !== \"-\" ? s : null;\n};\n\n/**\n * Pull contact details out of the transcript and merge them into the stored\n * lead. Never clears a field we already have — visitors correct themselves, but\n * a later turn that simply doesn't mention the phone shouldn't erase it.\n */\nexport async function extractLead(sessionId: string, history: Turn[]): Promise {\n const transcript = history\n .map((t) => `${t.role === \"user\" ? \"Visitor\" : \"Assistant\"}: ${t.content}`)\n .join(\"\\n\");\n\n const model = genAI().getGenerativeModel({\n model: MODEL,\n systemInstruction:\n \"Extract the visitor's contact details from a website chat transcript. Only record what the visitor actually said — never guess, infer, or invent. Use an empty string for anything they did not give.\",\n generationConfig: {\n responseMimeType: \"application/json\",\n responseSchema: LEAD_SCHEMA,\n },\n });\n\n const result = await model.generateContent(transcript);\n let found: Record;\n try {\n found = JSON.parse(result.response.text());\n } catch (err) {\n console.error(\"Lead JSON did not parse:\", err, result.response.text()?.slice(0, 300));\n return null;\n }\n\n const now = new Date().toISOString();\n const existing = await getLead(sessionId);\n const merged: Lead = {\n sessionId,\n name: clean(found.name) ?? existing?.name ?? null,\n phone: clean(found.phone) ?? existing?.phone ?? null,\n email: clean(found.email) ?? existing?.email ?? null,\n location: clean(found.location) ?? existing?.location ?? null,\n interest: clean(found.interest) ?? existing?.interest ?? null,\n firstSeen: existing?.firstSeen ?? now,\n lastSeen: now,\n notified: existing?.notified ?? false,\n };\n await saveLead(merged);\n\n // Email the office the first time we can actually reach this person.\n if (!merged.notified && isReachable(merged)) {\n try {\n await notifyOffice(merged, transcript);\n merged.notified = true;\n await saveLead(merged);\n } catch (err) {\n // Leave notified=false so the next turn retries the send.\n console.error(\"Lead notification email failed:\", err);\n }\n }\n return merged;\n}\n\n// DELIVERY GOES THROUGH tribeca-sms-6466812965-email-relay WHEN OFFICE_RELAY_KEY\n// IS SET, NOT PLAIN std/email. std/email on this account's current (free) Val\n// Town plan can only deliver to the val owner's own inbox — confirmed live\n// 9/5/2026 on the site-chat val, which had the identical bug: NOTIFY_EMAIL was\n// never set here either, so every after-hours lead was landing in the owner's\n// inbox instead of info@tribecabeverage.com. The relay val already has a\n// working, verified SendGrid setup, so this calls its /notify endpoint instead\n// of duplicating that credential onto a second val. Falls back to std/email\n// (val owner's inbox) if the relay key or the call itself is ever missing —\n// never drops the lead notification silently.\nasync function notifyOffice(lead: Lead, transcript: string) {\n const line = (label: string, v?: string | null) => `${label}: ${v || \"-\"}`;\n const subject = `After-hours web chat lead — ${lead.name || lead.phone || lead.email || \"unknown\"}`;\n const text = [\n \"Someone chatted with the after-hours assistant on tribecabeverage.com.\",\n \"\",\n line(\"Name\", lead.name),\n line(\"Phone\", lead.phone),\n line(\"Email\", lead.email),\n line(\"Location\", lead.location),\n line(\"Wants\", lead.interest),\n line(\"Started\", lead.firstSeen),\n \"\",\n \"--- transcript ---\",\n transcript,\n ].join(\"\\n\");\n\n const relayKey = Deno.env.get(\"OFFICE_RELAY_KEY\");\n if (relayKey) {\n const res = await fetch(\"https://tribeca-sms-relay-6466812965.val.run/notify\", {\n method: \"POST\",\n headers: { \"x-api-key\": relayKey, \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ subject, text, replyTo: lead.email || undefined }),\n signal: AbortSignal.timeout(8000),\n });\n if (!res.ok) {\n const detail = await res.text().catch(() => \"\");\n throw new Error(`notify relay ${res.status}: ${detail.slice(0, 300)}`);\n }\n return;\n }\n\n const to = Deno.env.get(\"NOTIFY_EMAIL\"); // unset -> std/email defaults to the val owner\n await email({ ...(to ? { to } : {}), subject, text });\n}\n",[],[106],"606b0fc8-ea55-4ac1-a601-f4375616f529","README.md","01a039bc-e9a8-70ef-b2b9-7a918f882bb2",26,["D",1787679596334],"# After-hours chat — tribecabeverage.com\n\nA Claude-powered chat widget that answers on the website **only when the office\nis closed**. tawk.to keeps business hours; this takes the night shift, captures\na lead, and emails it to the office.\n\n## Why this exists instead of a tawk.to bot\n\ntawk.to has no supported API for pushing an agent message into a live chat —\nits REST API is beta, gated behind an access request, and shaped for admin and\nreporting (properties, tickets, stats), not conversation. So an AI answering\ninside the tawk widget isn't buildable. Rather than migrate the whole live-chat\nsetup off a tool that works, this covers the hours tawk.to isn't staffed and\nleaves the daytime alone.\n\n## How it fits together\n\n```\nvisitor -> widget.js (shadow DOM, on tribecabeverage.com)\n | GET /api/status -- renders only if the office is closed\n | POST /api/chat -- SSE stream of reply deltas\n v\n index.ts (Hono)\n |-- agent.ts Gemini reply + lead extraction\n |-- store.ts blob-backed transcripts and leads\n +-- config.ts hours, model, business profile, guardrails\n```\n\nThe two chat widgets can never appear at the same time: `widget.js` asks\n`/api/status` before it renders anything, and `/api/chat` refuses to answer\nduring business hours even if something calls it directly.\n\n## Install\n\n```html\n\n```\n\nDrop that in the site footer. Nothing about the tawk.to embed changes.\n\n## Environment variables\n\n| Key | Required | What it does |\n| --- | --- | --- |\n| `GEMINI_API_KEY` | yes | From aistudio.google.com/apikey. Without it every chat returns the fallback message with the office phone number. |\n| `LEADS_KEY` | to view leads | Any random string. `/leads?key=...` then shows captured leads. The page stays closed until this is set — it holds customer PII. |\n| `NOTIFY_EMAIL` | no | Where lead emails go. Unset means the val owner. |\n| `FORCE_BOT` | no | `\"true\"` makes the bot answer around the clock. Testing only — the home page shows a warning banner while it's on. |\n\n## Business profile\n\n`config.ts` holds the products, pricing, service areas, and guardrails, copied\nfrom `Tribeca_Rep/tribeca-sms-sales-rep` so both bots say the same things.\n**Change pricing in both places.** The guardrails are the important part: no\ninvented prices, no promised delivery dates, no orders taken, escalate to\n973-913-4568.\n\n## Not built yet\n\n- **Salesforce lookups.** `tribeca-salesforce-agent` could let the bot answer\n \"when is my next delivery\" for existing customers. Needs `SALESFORCE_AGENT_URL`\n and `SALESFORCE_AGENT_KEY` copied over and a tool wired into `agent.ts`.\n- **Live handoff.** There is none by design — if someone needs a human, the bot\n gives them the office number and the office follows up in the morning.\n",[],[115],"5518f1a0-f980-467d-85ce-59331b3e55d0","CHANGELOG.md","01a039bc-e9a8-70ef-b2b9-7551e658384c",["D",1787675076940],0,"# 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