`, 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",{"_240":241,"_242":243},"routes/_app.x.$handle.$name",{"_99":98,"_32":45,"_108":89,"_27":109,"_13":14,"_110":-5,"_11":111,"_112":113,"_114":115,"_116":117,"_118":119,"_20":-5,"_120":-5,"_121":-5,"_122":25,"_123":124,"_125":58,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","index.ts","latestPath","fileId","01a0a371-d220-7530-921c-233c3ba43b0c","name","fileType","http","content","/**\n * Mock clinic EHR/PM backend for the Vapi patient-access voice agent.\n *\n * Seeded to mirror the demo data observed on Phreesia's public VoiceAI demo line\n * (+1 929-255-3132, \"Park Avenue Clinic\") across 13 research calls on 2026-09-14,\n * so the two agents can be demoed against the same facts.\n *\n * The point of this backend is the finding from those calls: Phreesia's demo\n * resolves ONLY scheduling. Billing, test results, records, referrals, prior\n * auth and appointment lookup all collapse to \"I can take a message.\"\n * Every endpoint here RESOLVES instead of deferring.\n *\n * Every response carries an `instruction` field written for the model, not the\n * caller. The agent is told (in its prompt) never to read those aloud.\n */\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// ---------------------------------------------------------------- seed data\nconst LOCATIONS = [\n { id: \"downtown\", name: \"Downtown office\", address: \"1010 Main Street, Chicago, Illinois 60601\" },\n { id: \"northside\", name: \"North Side Clinic\", address: \"3498 Jefferson Street, Chicago, Illinois 60614\" },\n { id: \"westloop\", name: \"West Loop Center\", address: \"200 Lake Street, Chicago, Illinois 60661\" },\n];\n\nconst PROVIDERS = [\n { id: \"covington\", name: \"Doctor Josh Covington\", specialty: \"Internal medicine\", acceptingNew: true, locations: [\"downtown\", \"westloop\"] },\n { id: \"cunningham\", name: \"Doctor Jason Cunningham\", specialty: \"Family medicine\", acceptingNew: false, locations: [\"downtown\"] },\n { id: \"hart\", name: \"Doctor Amelia Hart\", specialty: \"Family medicine\", acceptingNew: true, locations: [\"downtown\", \"northside\"] },\n];\n\n// One seeded patient. dob is the verification factor.\nconst PATIENTS: Record = {\n \"jordan-avery\": {\n patientId: \"jordan-avery\",\n firstName: \"Jordan\", lastName: \"Avery\",\n dob: \"1980-01-12\",\n phone: \"+13125550142\",\n usualProvider: \"covington\",\n usualLocation: \"downtown\",\n balanceCents: 4285,\n balanceDetail: \"Office visit on August 3rd 2026, after insurance. Patient responsibility toward deductible.\",\n insurance: { payer: \"Blue Cross Blue Shield PPO\", memberId: \"XZG884210277\", deductibleMetCents: 61500, deductibleTotalCents: 150000, copayCents: 3000 },\n appointments: [\n { id: \"apt-8841\", when: \"2026-09-22T14:30:00-05:00\", spoken: \"Tuesday September 22nd at 2:30 in the afternoon\",\n providerId: \"covington\", locationId: \"downtown\", type: \"Follow-up visit\", status: \"scheduled\" },\n ],\n medications: [\n { name: \"lisinopril\", strength: \"10 mg\", sig: \"once daily\", refillsLeft: 2, prescriberId: \"covington\",\n pharmacy: \"CVS on Main Street, Chicago\", lastFilled: \"2026-08-14\", controlled: false },\n { name: \"atorvastatin\", strength: \"20 mg\", sig: \"once daily at bedtime\", refillsLeft: 0, prescriberId: \"covington\",\n pharmacy: \"CVS on Main Street, Chicago\", lastFilled: \"2026-06-02\", controlled: false },\n ],\n results: [\n { id: \"lab-3321\", panel: \"Lipid panel\", collected: \"2026-09-08\", status: \"ready_released\",\n releasedToPatient: true, summary: \"Reviewed by Doctor Covington and released. No action needed.\", abnormal: false },\n { id: \"lab-3322\", panel: \"Basic metabolic panel\", collected: \"2026-09-11\", status: \"pending_provider_review\",\n releasedToPatient: false, summary: null, abnormal: null },\n ],\n referrals: [\n { id: \"ref-114\", specialty: \"Orthopedics\", status: \"authorized\", authNumber: \"A-77213\",\n note: \"Authorized through December 31st 2026. Six visits.\" },\n ],\n priorAuths: [\n { id: \"pa-556\", medication: \"atorvastatin 20 mg\", status: \"approved\", decidedOn: \"2026-08-20\" },\n { id: \"pa-557\", medication: \"semaglutide\", status: \"pending_payer\", submittedOn: \"2026-09-05\",\n note: \"Submitted to Blue Cross on September 5th. Payer decision typically ten to fourteen business days.\" },\n ],\n },\n};\n\n// Slots the scheduler can offer. Kept small and deterministic for demos.\nconst SLOTS = [\n { id: \"s1\", spoken: \"Tuesday September 15th at 1 in the afternoon\", iso: \"2026-09-15T13:00:00-05:00\", providerId: \"covington\", locationId: \"downtown\", partOfDay: \"afternoon\" },\n { id: \"s2\", spoken: \"Tuesday September 15th at 3:30 in the afternoon\", iso: \"2026-09-15T15:30:00-05:00\", providerId: \"hart\", locationId: \"downtown\", partOfDay: \"afternoon\" },\n { id: \"s3\", spoken: \"Wednesday September 16th at 9:15 in the morning\", iso: \"2026-09-16T09:15:00-05:00\", providerId: \"covington\", locationId: \"downtown\", partOfDay: \"morning\" },\n { id: \"s4\", spoken: \"Wednesday September 16th at 1 in the afternoon\", iso: \"2026-09-16T13:00:00-05:00\", providerId: \"covington\", locationId: \"downtown\", partOfDay: \"afternoon\" },\n { id: \"s5\", spoken: \"Thursday September 17th at 8:30 in the morning\", iso: \"2026-09-17T08:30:00-05:00\", providerId: \"hart\", locationId: \"northside\", partOfDay: \"morning\" },\n { id: \"s6\", spoken: \"Thursday September 17th at 5:45 in the evening\", iso: \"2026-09-17T17:45:00-05:00\", providerId: \"hart\", locationId: \"downtown\", partOfDay: \"evening\" },\n];\n\nconst writes: any[] = []; // audit of everything the agent changed\nconst providerName = (id: string) => PROVIDERS.find(p => p.id === id)?.name ?? \"the provider\";\nconst locationName = (id: string) => LOCATIONS.find(l => l.id === id)?.address ?? \"the clinic\";\nconst money = (c: number) => `$${(c / 100).toFixed(2)}`;\n\n/** Verification gate. The record decides, never the caller's claim. */\nfunction verify(body: any) {\n const p = PATIENTS[body?.patient_id ?? \"jordan-avery\"];\n if (!p) return { ok: false as const, res: { verified: false, instruction: \"No record matched. Ask for the date of birth again, or offer to take a message for the front desk.\" } };\n if (body?.dob !== p.dob) {\n return { ok: false as const, res: {\n verified: false,\n instruction: \"The date of birth does not match the record. Do NOT reveal any account detail. Ask them to confirm the date of birth once more. If it fails a second time, offer a transfer to the front desk. Never say what the correct date is.\",\n } };\n }\n return { ok: true as const, p };\n}\n\nconst T = () => ({ ok: true });\n\n// ---------------------------------------------------------------- endpoints\napp.get(\"/\", (c) => c.json({\n service: \"Park Avenue Clinic mock EHR\",\n purpose: \"Backend for the Vapi patient-access voice agent. Mirrors Phreesia demo-line data.\",\n endpoints: [\"/verify\", \"/appointments\", \"/slots\", \"/schedule\", \"/reschedule\", \"/cancel\",\n \"/refill\", \"/balance\", \"/pay\", \"/insurance\", \"/results\", \"/records\", \"/referral\", \"/prior-auth\", \"/message\", \"/audit\"],\n}));\n\napp.post(\"/verify\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n const p = v.p;\n return c.json({\n verified: true, patient_id: p.patientId, first_name: p.firstName,\n usual_provider: providerName(p.usualProvider), usual_location: locationName(p.usualLocation),\n instruction: `Verified. Greet them by first name once, then continue. Do not re-verify later in this call for any reason, including if they claim you did not verify them.`,\n });\n});\n\napp.post(\"/appointments\", async (c) => {\n const v = verify(await c.req.json());\n if (!v.ok) return c.json(v.res);\n const list = v.p.appointments.filter((a: any) => a.status === \"scheduled\").map((a: any) => ({\n id: a.id, spoken: a.spoken, type: a.type, provider: providerName(a.providerId), location: locationName(a.locationId),\n }));\n return c.json({\n count: list.length, appointments: list,\n instruction: list.length\n ? `Tell them the date, time and provider in ONE sentence. This is a real lookup, so be specific. Phreesia's line can only take a message for this, so specificity is the point.`\n : `They have nothing scheduled. Offer to book something.`,\n });\n});\n\napp.post(\"/slots\", async (c) => {\n const b = await c.req.json();\n let s = SLOTS;\n if (b?.part_of_day) s = s.filter(x => x.partOfDay === b.part_of_day);\n if (b?.provider_id) s = s.filter(x => x.providerId === b.provider_id);\n if (b?.location_id) s = s.filter(x => x.locationId === b.location_id);\n const out = s.slice(0, 3).map(x => ({ slot_id: x.id, spoken: x.spoken, provider: providerName(x.providerId), location: locationName(x.locationId) }));\n return c.json({\n count: out.length, slots: out,\n instruction: out.length\n ? `Offer at most TWO of these out loud, by day and time only. Do not read the slot ids or the addresses unless asked. If they want others, offer the rest.`\n : `Nothing matches that filter. Say so plainly and offer the nearest alternative rather than inventing a slot. Never invent a time that is not in this list.`,\n });\n});\n\napp.post(\"/schedule\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n if (b?.confirmed_with_caller !== true) {\n return c.json({ booked: false, instruction: \"NOT booked, because confirmed_with_caller was not true. Read the day, time and provider back and ask them to confirm out loud first, then call this again.\" });\n }\n const slot = SLOTS.find(s => s.id === b.slot_id);\n if (!slot) return c.json({ booked: false, instruction: \"That slot id is not real. Call slots again and offer only what comes back. Never invent an appointment time.\" });\n const dup = writes.find(w => w.kind === \"schedule\" && w.idempotency_key === b.idempotency_key);\n if (dup) return c.json({ ...dup.result, instruction: \"Already booked earlier in this call under the same request. Do NOT book a second one. Just confirm the existing booking.\" });\n const result = { booked: true, confirmation: \"PAC-\" + slot.id.toUpperCase() + \"-8841\", spoken: slot.spoken,\n provider: providerName(slot.providerId), location: locationName(slot.locationId) };\n writes.push({ kind: \"schedule\", idempotency_key: b.idempotency_key, at: new Date().toISOString(), result });\n return c.json({ ...result, instruction: `Booked. Confirm the day, time and provider in one sentence. Offer a text confirmation. Then ask whether there is anything else, do NOT end the call on your own.` });\n});\n\napp.post(\"/reschedule\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n if (b?.confirmed_with_caller !== true) return c.json({ rescheduled: false, instruction: \"NOT rescheduled. Confirm the new day and time out loud with them first.\" });\n const slot = SLOTS.find(s => s.id === b.slot_id);\n if (!slot) return c.json({ rescheduled: false, instruction: \"Unknown slot. Offer only slots returned by the slots tool.\" });\n writes.push({ kind: \"reschedule\", at: new Date().toISOString(), to: slot.id });\n return c.json({ rescheduled: true, spoken: slot.spoken, provider: providerName(slot.providerId),\n instruction: `Moved. Say the new day and time once. Their old appointment is released. Then ask if there is anything else.` });\n});\n\napp.post(\"/cancel\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n if (b?.confirmed_with_caller !== true) {\n return c.json({ cancelled: false, instruction: \"NOT cancelled. Cancelling is hard to undo, so ask them plainly to confirm they want it cancelled, and offer rescheduling instead. Then call again.\" });\n }\n writes.push({ kind: \"cancel\", at: new Date().toISOString(), appointment_id: b.appointment_id });\n return c.json({ cancelled: true, fee: null,\n instruction: `Cancelled, no fee since it is more than 24 hours out. Offer to rebook now. Do NOT end the call just because the task finished, ask if there is anything else first.` });\n});\n\napp.post(\"/refill\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n const med = v.p.medications.find((m: any) => m.name.toLowerCase() === String(b?.medication ?? \"\").toLowerCase());\n if (!med) {\n return c.json({ found: false, on_file: v.p.medications.map((m: any) => `${m.name} ${m.strength}`),\n instruction: `That medication is not on their chart. Tell them what IS on file and ask which one they meant. Phreesia's line cannot see the chart at all, so naming their actual medications is the differentiator here.` });\n }\n if (b?.confirmed_with_caller !== true) {\n return c.json({ found: true, medication: `${med.name} ${med.strength}`, refills_left: med.refillsLeft, pharmacy: med.pharmacy,\n instruction: `Do not send it yet. Tell them the strength, how many refills are left and which pharmacy it goes to, then ask if they want it sent. Call again with confirmed_with_caller true once they say yes.` });\n }\n if (med.refillsLeft <= 0) {\n writes.push({ kind: \"refill_request_to_prescriber\", at: new Date().toISOString(), med: med.name });\n return c.json({ sent: false, needs_prescriber: true, prescriber: providerName(med.prescriberId),\n instruction: `No refills left, so this needs the prescriber. Say that plainly, say you have sent the request to ${providerName(med.prescriberId)}, and that the pharmacy usually hears back within two business days. Do not promise a specific time.` });\n }\n writes.push({ kind: \"refill\", at: new Date().toISOString(), med: med.name, to: b.pharmacy ?? med.pharmacy });\n return c.json({ sent: true, medication: `${med.name} ${med.strength}`, pharmacy: b.pharmacy ?? med.pharmacy, refills_left_after: med.refillsLeft - 1,\n instruction: `Sent to the pharmacy. Say which pharmacy and that it is usually ready in about two hours. Then ask if there is anything else.` });\n});\n\napp.post(\"/balance\", async (c) => {\n const v = verify(await c.req.json());\n if (!v.ok) return c.json(v.res);\n const p = v.p;\n return c.json({ balance: money(p.balanceCents), detail: p.balanceDetail,\n instruction: `Say the amount and what it is for in ONE sentence. Then offer to take payment or set up a plan. Phreesia's demo can only take a message about a balance, so actually quoting it is the whole point.` });\n});\n\napp.post(\"/pay\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n if (b?.confirmed_with_caller !== true) return c.json({ paid: false, instruction: \"Not charged. Say the amount out loud and ask them to confirm before you take payment.\" });\n return c.json({ paid: false, secure_link_sent: true, amount: money(v.p.balanceCents),\n instruction: `Do NOT collect a card number by voice, and never ask for one. Tell them you have texted a secure payment link to the number on file and it is good for 24 hours. This is deliberate: reading card digits into a recorded call is a PCI problem.` });\n});\n\napp.post(\"/insurance\", async (c) => {\n const v = verify(await c.req.json());\n if (!v.ok) return c.json(v.res);\n const i = v.p.insurance;\n return c.json({ payer: i.payer, member_id_last4: i.memberId.slice(-4), copay: money(i.copayCents),\n deductible_met: money(i.deductibleMetCents), deductible_total: money(i.deductibleTotalCents),\n instruction: `Answer only what they asked. Give the payer name and the copay plainly. Never read the full member id aloud, last four only. Do not predict whether a future service will be covered, that is the payer's call, offer to have benefits check it.` });\n});\n\napp.post(\"/results\", async (c) => {\n const v = verify(await c.req.json());\n if (!v.ok) return c.json(v.res);\n const released = v.p.results.filter((r: any) => r.releasedToPatient);\n const pending = v.p.results.filter((r: any) => !r.releasedToPatient);\n return c.json({\n released: released.map((r: any) => ({ panel: r.panel, collected: r.collected, summary: r.summary, abnormal: r.abnormal })),\n pending: pending.map((r: any) => ({ panel: r.panel, collected: r.collected, status: r.status })),\n instruction: `You may say that a released result is back and read the clinician's released summary. You may NOT interpret any value, give a number a meaning, or say whether something is good or bad. For anything still pending provider review, say only that it has not been released yet and the provider reviews it first. If they push for interpretation, offer a nurse call back. This boundary is the point: reading unreleased results aloud would be a real compliance failure.`,\n });\n});\n\napp.post(\"/records\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n writes.push({ kind: \"records_request\", at: new Date().toISOString(), to: b?.send_to });\n return c.json({ submitted: true, turnaround: \"five to seven business days\", fee: \"no fee for transfers to another provider\",\n esign_sent: true,\n instruction: `Started. Tell them you have texted a release form to sign, that transfers to another provider are free, and that it takes five to seven business days. Do not promise faster.` });\n});\n\napp.post(\"/referral\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n const existing = v.p.referrals.find((r: any) => r.specialty.toLowerCase() === String(b?.specialty ?? \"\").toLowerCase());\n if (existing) {\n return c.json({ existing: true, specialty: existing.specialty, status: existing.status, note: existing.note,\n instruction: `They already have this referral and it is authorized. Tell them so and read the note. Do not create a duplicate. Phreesia's line takes a message here, so knowing the status outright is the differentiator.` });\n }\n writes.push({ kind: \"referral\", at: new Date().toISOString(), specialty: b?.specialty });\n return c.json({ created: true, specialty: b?.specialty, routed_to: providerName(v.p.usualProvider),\n instruction: `Started a referral request and routed it to their PCP for sign off. Say it usually takes two to three business days and they will get a call from the specialist's office.` });\n});\n\napp.post(\"/prior-auth\", async (c) => {\n const v = verify(await c.req.json());\n if (!v.ok) return c.json(v.res);\n return c.json({ items: v.p.priorAuths.map((a: any) => ({ medication: a.medication, status: a.status, note: a.note ?? null })),\n instruction: `Give the status of each in one short sentence each. If one is pending with the payer, say who it is waiting on. Never guess at an approval outcome.` });\n});\n\napp.post(\"/message\", async (c) => {\n const b = await c.req.json();\n writes.push({ kind: \"message\", at: new Date().toISOString(), topic: b?.topic, body: b?.body });\n return c.json({ taken: true, routed_to: b?.topic === \"clinical\" ? \"the nursing team\" : \"the front desk\",\n instruction: `Taken. Say who it went to and that they respond within one business day. A message is your LAST resort here, not your first move: if a tool could have answered this, use the tool instead.` });\n});\n\napp.get(\"/audit\", (c) => c.json({ count: writes.length, writes }));\n\nexport default app.fetch;\n","/**\n * Mock clinic EHR/PM backend for the Vapi patient-access voice agent.\n *\n * Seeded to mirror the demo data observed on Phreesia's public VoiceAI demo line\n * (+1 929-255-3132, \"Park Avenue Clinic\") across 13 research calls on 2026-09-14,\n * so the two agents can be demoed against the same facts.\n *\n * The point of this backend is the finding from those calls: Phreesia's demo\n * resolves ONLY scheduling. Billing, test results, records, referrals, prior\n * auth and appointment lookup all collapse to \"I can take a message.\"\n * Every endpoint here RESOLVES instead of deferring.\n *\n * Every response carries an `instruction` field written for the model, not the\n * caller. The agent is told (in its prompt) never to read those aloud.\n */\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\napp.onError((err) => Promise.reject(err));\n\n// ---------------------------------------------------------------- seed data\nconst LOCATIONS = [\n { id: \"downtown\", name: \"Downtown office\", address: \"1010 Main Street, Chicago, Illinois 60601\" },\n { id: \"northside\", name: \"North Side Clinic\", address: \"3498 Jefferson Street, Chicago, Illinois 60614\" },\n { id: \"westloop\", name: \"West Loop Center\", address: \"200 Lake Street, Chicago, Illinois 60661\" },\n];\n\nconst PROVIDERS = [\n { id: \"covington\", name: \"Doctor Josh Covington\", specialty: \"Internal medicine\", acceptingNew: true, locations: [\"downtown\", \"westloop\"] },\n { id: \"cunningham\", name: \"Doctor Jason Cunningham\", specialty: \"Family medicine\", acceptingNew: false, locations: [\"downtown\"] },\n { id: \"hart\", name: \"Doctor Amelia Hart\", specialty: \"Family medicine\", acceptingNew: true, locations: [\"downtown\", \"northside\"] },\n];\n\n// One seeded patient. dob is the verification factor.\nconst PATIENTS: Record = {\n \"jordan-avery\": {\n patientId: \"jordan-avery\",\n firstName: \"Jordan\", lastName: \"Avery\",\n dob: \"1980-01-12\",\n phone: \"+13125550142\",\n usualProvider: \"covington\",\n usualLocation: \"downtown\",\n balanceCents: 4285,\n balanceDetail: \"Office visit on August 3rd 2026, after insurance. Patient responsibility toward deductible.\",\n insurance: { payer: \"Blue Cross Blue Shield PPO\", memberId: \"XZG884210277\", deductibleMetCents: 61500, deductibleTotalCents: 150000, copayCents: 3000 },\n appointments: [\n { id: \"apt-8841\", when: \"2026-09-22T14:30:00-05:00\", spoken: \"Tuesday September 22nd at 2:30 in the afternoon\",\n providerId: \"covington\", locationId: \"downtown\", type: \"Follow-up visit\", status: \"scheduled\" },\n ],\n medications: [\n { name: \"lisinopril\", strength: \"10 mg\", sig: \"once daily\", refillsLeft: 2, prescriberId: \"covington\",\n pharmacy: \"CVS on Main Street, Chicago\", lastFilled: \"2026-08-14\", controlled: false },\n { name: \"atorvastatin\", strength: \"20 mg\", sig: \"once daily at bedtime\", refillsLeft: 0, prescriberId: \"covington\",\n pharmacy: \"CVS on Main Street, Chicago\", lastFilled: \"2026-06-02\", controlled: false },\n ],\n results: [\n { id: \"lab-3321\", panel: \"Lipid panel\", collected: \"2026-09-08\", status: \"ready_released\",\n releasedToPatient: true, summary: \"Reviewed by Doctor Covington and released. No action needed.\", abnormal: false },\n { id: \"lab-3322\", panel: \"Basic metabolic panel\", collected: \"2026-09-11\", status: \"pending_provider_review\",\n releasedToPatient: false, summary: null, abnormal: null },\n ],\n referrals: [\n { id: \"ref-114\", specialty: \"Orthopedics\", status: \"authorized\", authNumber: \"A-77213\",\n note: \"Authorized through December 31st 2026. Six visits.\" },\n ],\n priorAuths: [\n { id: \"pa-556\", medication: \"atorvastatin 20 mg\", status: \"approved\", decidedOn: \"2026-08-20\" },\n { id: \"pa-557\", medication: \"semaglutide\", status: \"pending_payer\", submittedOn: \"2026-09-05\",\n note: \"Submitted to Blue Cross on September 5th. Payer decision typically ten to fourteen business days.\" },\n ],\n },\n};\n\n// Slots the scheduler can offer. Kept small and deterministic for demos.\nconst SLOTS = [\n { id: \"s1\", spoken: \"Tuesday September 15th at 1 in the afternoon\", iso: \"2026-09-15T13:00:00-05:00\", providerId: \"covington\", locationId: \"downtown\", partOfDay: \"afternoon\" },\n { id: \"s2\", spoken: \"Tuesday September 15th at 3:30 in the afternoon\", iso: \"2026-09-15T15:30:00-05:00\", providerId: \"hart\", locationId: \"downtown\", partOfDay: \"afternoon\" },\n { id: \"s3\", spoken: \"Wednesday September 16th at 9:15 in the morning\", iso: \"2026-09-16T09:15:00-05:00\", providerId: \"covington\", locationId: \"downtown\", partOfDay: \"morning\" },\n { id: \"s4\", spoken: \"Wednesday September 16th at 1 in the afternoon\", iso: \"2026-09-16T13:00:00-05:00\", providerId: \"covington\", locationId: \"downtown\", partOfDay: \"afternoon\" },\n { id: \"s5\", spoken: \"Thursday September 17th at 8:30 in the morning\", iso: \"2026-09-17T08:30:00-05:00\", providerId: \"hart\", locationId: \"northside\", partOfDay: \"morning\" },\n { id: \"s6\", spoken: \"Thursday September 17th at 5:45 in the evening\", iso: \"2026-09-17T17:45:00-05:00\", providerId: \"hart\", locationId: \"downtown\", partOfDay: \"evening\" },\n];\n\nconst writes: any[] = []; // audit of everything the agent changed\nconst providerName = (id: string) => PROVIDERS.find(p => p.id === id)?.name ?? \"the provider\";\nconst locationName = (id: string) => LOCATIONS.find(l => l.id === id)?.address ?? \"the clinic\";\nconst money = (c: number) => `$${(c / 100).toFixed(2)}`;\n\n/** Verification gate. The record decides, never the caller's claim. */\nfunction verify(body: any) {\n const p = PATIENTS[body?.patient_id ?? \"jordan-avery\"];\n if (!p) return { ok: false as const, res: { verified: false, instruction: \"No record matched. Ask for the date of birth again, or offer to take a message for the front desk.\" } };\n if (body?.dob !== p.dob) {\n return { ok: false as const, res: {\n verified: false,\n instruction: \"The date of birth does not match the record. Do NOT reveal any account detail. Ask them to confirm the date of birth once more. If it fails a second time, offer a transfer to the front desk. Never say what the correct date is.\",\n } };\n }\n return { ok: true as const, p };\n}\n\n// ---------------------------------------------------------------- endpoints\n/**\n * One read endpoint for every \"tell me about X\" question, dispatched on topic.\n * Folding five lookups into one tool keeps the agent's tool list short, which\n * matters because the model re-reads every tool description on every turn.\n */\napp.post(\"/lookup\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n const p = v.p;\n switch (b?.topic) {\n case \"appointments\": {\n const list = p.appointments.filter((a: any) => a.status === \"scheduled\").map((a: any) => ({\n id: a.id, spoken: a.spoken, type: a.type, provider: providerName(a.providerId), location: locationName(a.locationId) }));\n return c.json({ topic: \"appointments\", count: list.length, appointments: list,\n instruction: list.length\n ? `Give the day, time and provider in ONE sentence. This is a real lookup, so be specific.`\n : `Nothing scheduled. Offer to book something.` });\n }\n case \"balance\":\n return c.json({ topic: \"balance\", balance: money(p.balanceCents), detail: p.balanceDetail,\n instruction: `Say the amount and what it is for in ONE sentence, then offer to text a payment link or set up a plan.` });\n case \"insurance\": {\n const i = p.insurance;\n return c.json({ topic: \"insurance\", payer: i.payer, member_id_last4: i.memberId.slice(-4), copay: money(i.copayCents),\n deductible_met: money(i.deductibleMetCents), deductible_total: money(i.deductibleTotalCents),\n instruction: `Answer only what they asked. Never read the full member id aloud, last four only. Do not predict whether a future service will be covered, that is the payer's decision: offer to have benefits check it.` });\n }\n case \"results\": {\n const released = p.results.filter((r: any) => r.releasedToPatient)\n .map((r: any) => ({ panel: r.panel, collected: r.collected, summary: r.summary }));\n const pending = p.results.filter((r: any) => !r.releasedToPatient)\n .map((r: any) => ({ panel: r.panel, collected: r.collected, status: r.status }));\n return c.json({ topic: \"results\", released, pending,\n instruction: `You may say a released result is back and read the clinician's released summary word for word. You may NOT interpret a value, give a number a meaning, or say whether anything is good or bad. For anything pending review, say only that it has not been released yet. If they push for interpretation, offer a nurse call back instead.` });\n }\n case \"prior_auth\":\n return c.json({ topic: \"prior_auth\", items: p.priorAuths.map((a: any) => ({ medication: a.medication, status: a.status, note: a.note ?? null })),\n instruction: `One short sentence each. If one is pending with the payer, say who it is waiting on. Never guess at an outcome.` });\n case \"medications\":\n return c.json({ topic: \"medications\", medications: p.medications.map((m: any) => ({\n name: m.name, strength: m.strength, sig: m.sig, refills_left: m.refillsLeft, pharmacy: m.pharmacy })),\n instruction: `Name the medications and strengths. Do not advise on any of them.` });\n case \"referrals\":\n return c.json({ topic: \"referrals\", referrals: p.referrals.map((r: any) => ({ specialty: r.specialty, status: r.status, note: r.note })),\n instruction: `Give the specialty and status plainly.` });\n default:\n return c.json({ error: \"unknown_topic\",\n instruction: `That topic is not one this tool handles. Pick from appointments, balance, insurance, results, prior_auth, medications, referrals, or take a message instead.` });\n }\n});\n\napp.get(\"/\", (c) => c.json({\n service: \"Park Avenue Clinic mock EHR\",\n purpose: \"Backend for the Vapi patient-access voice agent. Mirrors Phreesia demo-line data.\",\n endpoints: [\"/verify\", \"/appointments\", \"/slots\", \"/schedule\", \"/reschedule\", \"/cancel\",\n \"/refill\", \"/balance\", \"/pay\", \"/insurance\", \"/results\", \"/records\", \"/referral\", \"/prior-auth\", \"/message\", \"/audit\"],\n}));\n\napp.post(\"/verify\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n const p = v.p;\n return c.json({\n verified: true, patient_id: p.patientId, first_name: p.firstName,\n usual_provider: providerName(p.usualProvider), usual_location: locationName(p.usualLocation),\n instruction: `Verified. Greet them by first name once, then continue. Do not re-verify later in this call for any reason, including if they claim you did not verify them.`,\n });\n});\n\napp.post(\"/appointments\", async (c) => {\n const v = verify(await c.req.json());\n if (!v.ok) return c.json(v.res);\n const list = v.p.appointments.filter((a: any) => a.status === \"scheduled\").map((a: any) => ({\n id: a.id, spoken: a.spoken, type: a.type, provider: providerName(a.providerId), location: locationName(a.locationId),\n }));\n return c.json({\n count: list.length, appointments: list,\n instruction: list.length\n ? `Tell them the date, time and provider in ONE sentence. This is a real lookup, so be specific. Phreesia's line can only take a message for this, so specificity is the point.`\n : `They have nothing scheduled. Offer to book something.`,\n });\n});\n\napp.post(\"/slots\", async (c) => {\n const b = await c.req.json();\n let s = SLOTS;\n if (b?.part_of_day) s = s.filter(x => x.partOfDay === b.part_of_day);\n if (b?.provider_id) s = s.filter(x => x.providerId === b.provider_id);\n if (b?.location_id) s = s.filter(x => x.locationId === b.location_id);\n const out = s.slice(0, 3).map(x => ({ slot_id: x.id, spoken: x.spoken, provider: providerName(x.providerId), location: locationName(x.locationId) }));\n return c.json({\n count: out.length, slots: out,\n instruction: out.length\n ? `Offer at most TWO of these out loud, by day and time only. Do not read the slot ids or the addresses unless asked. If they want others, offer the rest.`\n : `Nothing matches that filter. Say so plainly and offer the nearest alternative rather than inventing a slot. Never invent a time that is not in this list.`,\n });\n});\n\napp.post(\"/schedule\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n if (b?.confirmed_with_caller !== true) {\n return c.json({ booked: false, instruction: \"NOT booked, because confirmed_with_caller was not true. Read the day, time and provider back and ask them to confirm out loud first, then call this again.\" });\n }\n const slot = SLOTS.find(s => s.id === b.slot_id);\n if (!slot) return c.json({ booked: false, instruction: \"That slot id is not real. Call slots again and offer only what comes back. Never invent an appointment time.\" });\n const dup = writes.find(w => w.kind === \"schedule\" && w.idempotency_key === b.idempotency_key);\n if (dup) return c.json({ ...dup.result, instruction: \"Already booked earlier in this call under the same request. Do NOT book a second one. Just confirm the existing booking.\" });\n const result = { booked: true, confirmation: \"PAC-\" + slot.id.toUpperCase() + \"-8841\", spoken: slot.spoken,\n provider: providerName(slot.providerId), location: locationName(slot.locationId) };\n writes.push({ kind: \"schedule\", idempotency_key: b.idempotency_key, at: new Date().toISOString(), result });\n return c.json({ ...result, instruction: `Booked. Confirm the day, time and provider in one sentence. Offer a text confirmation. Then ask whether there is anything else, do NOT end the call on your own.` });\n});\n\napp.post(\"/reschedule\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n if (b?.confirmed_with_caller !== true) return c.json({ rescheduled: false, instruction: \"NOT rescheduled. Confirm the new day and time out loud with them first.\" });\n const slot = SLOTS.find(s => s.id === b.slot_id);\n if (!slot) return c.json({ rescheduled: false, instruction: \"Unknown slot. Offer only slots returned by the slots tool.\" });\n writes.push({ kind: \"reschedule\", at: new Date().toISOString(), to: slot.id });\n return c.json({ rescheduled: true, spoken: slot.spoken, provider: providerName(slot.providerId),\n instruction: `Moved. Say the new day and time once. Their old appointment is released. Then ask if there is anything else.` });\n});\n\napp.post(\"/cancel\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n if (b?.confirmed_with_caller !== true) {\n return c.json({ cancelled: false, instruction: \"NOT cancelled. Cancelling is hard to undo, so ask them plainly to confirm they want it cancelled, and offer rescheduling instead. Then call again.\" });\n }\n writes.push({ kind: \"cancel\", at: new Date().toISOString(), appointment_id: b.appointment_id });\n return c.json({ cancelled: true, fee: null,\n instruction: `Cancelled, no fee since it is more than 24 hours out. Offer to rebook now. Do NOT end the call just because the task finished, ask if there is anything else first.` });\n});\n\napp.post(\"/refill\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n const med = v.p.medications.find((m: any) => m.name.toLowerCase() === String(b?.medication ?? \"\").toLowerCase());\n if (!med) {\n return c.json({ found: false, on_file: v.p.medications.map((m: any) => `${m.name} ${m.strength}`),\n instruction: `That medication is not on their chart. Tell them what IS on file and ask which one they meant. Phreesia's line cannot see the chart at all, so naming their actual medications is the differentiator here.` });\n }\n if (b?.confirmed_with_caller !== true) {\n return c.json({ found: true, medication: `${med.name} ${med.strength}`, refills_left: med.refillsLeft, pharmacy: med.pharmacy,\n instruction: `Do not send it yet. Tell them the strength, how many refills are left and which pharmacy it goes to, then ask if they want it sent. Call again with confirmed_with_caller true once they say yes.` });\n }\n if (med.refillsLeft <= 0) {\n writes.push({ kind: \"refill_request_to_prescriber\", at: new Date().toISOString(), med: med.name });\n return c.json({ sent: false, needs_prescriber: true, prescriber: providerName(med.prescriberId),\n instruction: `No refills left, so this needs the prescriber. Say that plainly, say you have sent the request to ${providerName(med.prescriberId)}, and that the pharmacy usually hears back within two business days. Do not promise a specific time.` });\n }\n writes.push({ kind: \"refill\", at: new Date().toISOString(), med: med.name, to: b.pharmacy ?? med.pharmacy });\n return c.json({ sent: true, medication: `${med.name} ${med.strength}`, pharmacy: b.pharmacy ?? med.pharmacy, refills_left_after: med.refillsLeft - 1,\n instruction: `Sent to the pharmacy. Say which pharmacy and that it is usually ready in about two hours. Then ask if there is anything else.` });\n});\n\napp.post(\"/balance\", async (c) => {\n const v = verify(await c.req.json());\n if (!v.ok) return c.json(v.res);\n const p = v.p;\n return c.json({ balance: money(p.balanceCents), detail: p.balanceDetail,\n instruction: `Say the amount and what it is for in ONE sentence. Then offer to take payment or set up a plan. Phreesia's demo can only take a message about a balance, so actually quoting it is the whole point.` });\n});\n\napp.post(\"/pay\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n if (b?.confirmed_with_caller !== true) return c.json({ paid: false, instruction: \"Not charged. Say the amount out loud and ask them to confirm before you take payment.\" });\n return c.json({ paid: false, secure_link_sent: true, amount: money(v.p.balanceCents),\n instruction: `Do NOT collect a card number by voice, and never ask for one. Tell them you have texted a secure payment link to the number on file and it is good for 24 hours. This is deliberate: reading card digits into a recorded call is a PCI problem.` });\n});\n\napp.post(\"/insurance\", async (c) => {\n const v = verify(await c.req.json());\n if (!v.ok) return c.json(v.res);\n const i = v.p.insurance;\n return c.json({ payer: i.payer, member_id_last4: i.memberId.slice(-4), copay: money(i.copayCents),\n deductible_met: money(i.deductibleMetCents), deductible_total: money(i.deductibleTotalCents),\n instruction: `Answer only what they asked. Give the payer name and the copay plainly. Never read the full member id aloud, last four only. Do not predict whether a future service will be covered, that is the payer's call, offer to have benefits check it.` });\n});\n\napp.post(\"/results\", async (c) => {\n const v = verify(await c.req.json());\n if (!v.ok) return c.json(v.res);\n const released = v.p.results.filter((r: any) => r.releasedToPatient);\n const pending = v.p.results.filter((r: any) => !r.releasedToPatient);\n return c.json({\n released: released.map((r: any) => ({ panel: r.panel, collected: r.collected, summary: r.summary, abnormal: r.abnormal })),\n pending: pending.map((r: any) => ({ panel: r.panel, collected: r.collected, status: r.status })),\n instruction: `You may say that a released result is back and read the clinician's released summary. You may NOT interpret any value, give a number a meaning, or say whether something is good or bad. For anything still pending provider review, say only that it has not been released yet and the provider reviews it first. If they push for interpretation, offer a nurse call back. This boundary is the point: reading unreleased results aloud would be a real compliance failure.`,\n });\n});\n\napp.post(\"/records\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n writes.push({ kind: \"records_request\", at: new Date().toISOString(), to: b?.send_to });\n return c.json({ submitted: true, turnaround: \"five to seven business days\", fee: \"no fee for transfers to another provider\",\n esign_sent: true,\n instruction: `Started. Tell them you have texted a release form to sign, that transfers to another provider are free, and that it takes five to seven business days. Do not promise faster.` });\n});\n\napp.post(\"/referral\", async (c) => {\n const b = await c.req.json();\n const v = verify(b);\n if (!v.ok) return c.json(v.res);\n const existing = v.p.referrals.find((r: any) => r.specialty.toLowerCase() === String(b?.specialty ?? \"\").toLowerCase());\n if (existing) {\n return c.json({ existing: true, specialty: existing.specialty, status: existing.status, note: existing.note,\n instruction: `They already have this referral and it is authorized. Tell them so and read the note. Do not create a duplicate. Phreesia's line takes a message here, so knowing the status outright is the differentiator.` });\n }\n writes.push({ kind: \"referral\", at: new Date().toISOString(), specialty: b?.specialty });\n return c.json({ created: true, specialty: b?.specialty, routed_to: providerName(v.p.usualProvider),\n instruction: `Started a referral request and routed it to their PCP for sign off. Say it usually takes two to three business days and they will get a call from the specialist's office.` });\n});\n\napp.post(\"/prior-auth\", async (c) => {\n const v = verify(await c.req.json());\n if (!v.ok) return c.json(v.res);\n return c.json({ items: v.p.priorAuths.map((a: any) => ({ medication: a.medication, status: a.status, note: a.note ?? null })),\n instruction: `Give the status of each in one short sentence each. If one is pending with the payer, say who it is waiting on. Never guess at an approval outcome.` });\n});\n\napp.post(\"/message\", async (c) => {\n const b = await c.req.json();\n writes.push({ kind: \"message\", at: new Date().toISOString(), topic: b?.topic, body: b?.body });\n return c.json({ taken: true, routed_to: b?.topic === \"clinical\" ? \"the nursing team\" : \"the front desk\",\n instruction: `Taken. Say who it went to and that they respond within one business day. A message is your LAST resort here, not your first move: if a tool could have answered this, use the tool instead.` });\n});\n\napp.get(\"/audit\", (c) => c.json({ count: writes.length, writes }));\n\nexport default app.fetch;\n","createdAt",["D",1789448673393],"branchVersion","branchId","62138252-5ca6-4385-8bb0-fa358d8b5ae2","id","c2a37813-b2cf-441e-8b0f-2d54cdcc4ad6","parkave-clinic-backend",["D",1789448540653],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Mock clinic EHR backend for the Vapi patient-access voice agent","imageUrl","bf54ad56-9f09-4238-93ec-5919acfb30c0","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019f8bc4-813e-715b-b5bf-1cb41e84f338","tursoName","c2a37813b2cf441e8b0f2d54cdcc4ad6","tursoHostname","c2a37813b2cf441e8b0f2d54cdcc4ad6-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789536037138],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_99":98,"_107":103},"org",{"_99":98,"_100":101,"_102":103,"_18":55,"_104":105,"_106":25},"branch",{"_13":88,"_32":89,"_43":42,"_90":44,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":45,"_97":98},"isOwned",23,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","gerardroy","handle","displayName","Gerard Roy","avatar","https://lh3.googleusercontent.com/a/ACg8ocIAPCi5IrLmWavYqxP-lUqAvz0-SYQhvB7c5IAuwONv5alSFg=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":235,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":66,"_67":68,"_69":236,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":237,"_83":238,"_85":239,"_87":25},"tree",[170,177,178,179],"files",[170,171,172,173,174,175,176,177,178,179],"counts",{"_160":62,"_161":144,"_162":62,"_163":164,"_165":166},"contents",[130,131,132,133],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":154,"_32":155,"_30":156,"_135":-5,"_41":42,"_40":144,"_136":58,"_38":157,"_13":62,"_33":158,"_35":-5,"_24":25,"_139":-5,"_27":159},{"_43":148,"_32":149,"_30":150,"_135":-5,"_41":42,"_40":144,"_136":58,"_38":151,"_13":62,"_33":20,"_35":152,"_24":25,"_139":-5,"_27":153},{"_43":141,"_32":142,"_30":143,"_135":-5,"_41":42,"_40":144,"_136":58,"_38":145,"_13":62,"_33":20,"_35":146,"_24":25,"_139":-5,"_27":147},{"_43":134,"_32":28,"_30":31,"_135":-5,"_41":42,"_40":14,"_136":25,"_38":137,"_13":138,"_33":34,"_35":37,"_24":25,"_139":-5,"_27":140},"8902d1e8-b6d2-4ba7-80fb-2780d41a8bbc","parentId","latest",["D",1789448673393],2,"label",[28],"9787af19-5cdc-4899-8399-ad0ccd105ba1","README.md","01a0a371-d220-7530-921c-1c2f2df526b6",1,["D",1789448540653],"# 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",[142],"9482f420-fb7d-4cb4-be4a-92d57fe9ff8d","CHANGELOG.md","01a0a371-d220-7530-921c-1835a0ea39f8",["D",1789448540653],"# 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