`, 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",{"_284":285,"_286":287},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":-5,"_124":25,"_125":126,"_127":60,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":72,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":25},"version",17,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/FlightsPanel.tsx","latestPath","fileId","18949b22-abba-11f1-a383-1607ee4eb77e","name","FlightsPanel.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Flight {\n date: string;\n destination: \"JFK\" | \"LGA\";\n price: number;\n airline: string;\n nonstop: boolean;\n refundable: boolean;\n}\n\nexport function FlightsPanel() {\n const [flights, setFlights] = useState(null);\n const [live, setLive] = useState(false);\n const [destJFK, setDestJFK] = useState(true);\n const [destLGA, setDestLGA] = useState(true);\n const [tripType, setTripType] = useState<\"roundtrip\" | \"oneway\">(\"roundtrip\");\n const [nonstopOnly, setNonstopOnly] = useState(true);\n const [deltaOnly, setDeltaOnly] = useState(true);\n\n useEffect(() => {\n fetch(\"/api/flights\")\n .then((r) => r.json())\n .then((data) => {\n setFlights(data.flights);\n setLive(data.live);\n });\n }, []);\n\n if (!flights) return

Loading flights…

;\n\n const filtered = flights\n .filter((f) => (f.destination === \"JFK\" && destJFK) || (f.destination === \"LGA\" && destLGA))\n .filter((f) => !nonstopOnly || f.nonstop)\n .filter((f) => !deltaOnly || f.airline === \"Delta\")\n .sort((a, b) => a.date.localeCompare(b.date) || a.price - b.price);\n\n const cheapestPrice = filtered.length ? Math.min(...filtered.map((f) => f.price)) : null;\n\n return (\n

\n {!live && (\n

\n Sample data — no live flight API is connected yet.\n

\n )}\n\n {/* From / To, like a normal flight search */}\n

From

MSY

\n →\n

\n \n setDestJFK(e.target.checked)} /> JFK\n \n \n setDestLGA(e.target.checked)} /> LGA\n \n

\n\n

\n setTripType(\"roundtrip\")}\n >\n Round trip\n \n setTripType(\"oneway\")}\n >\n One way\n \n

\n \n setNonstopOnly(e.target.checked)} />\n Nonstop only\n \n \n setDeltaOnly(e.target.checked)} />\n Delta only\n \n

\n\n {tripType === \"roundtrip\" && (\n

\n Round-trip pairing (which Tuesday back, how long the trip is) isn't wired up yet — see the plan in README.md. Showing one-way Tuesday departures below.\n

\n )}\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {filtered.map((f) => (\n \n \n \n \n \n \n \n \n ))}\n \n

Tuesday	Into	Airline	Nonstop	Refundable	Price
{f.date}	{f.destination}	{f.airline}	{f.nonstop ? \"Yes\" : \"No\"}	{f.refundable ? \"Yes\" : \"No\"}	${f.price}{f.price === cheapestPrice ? \" ← cheapest\" : \"\"}

\n {filtered.length === 0 &&

No flights match these filters.

}\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Flight {\n date: string;\n destination: \"JFK\" | \"LGA\";\n price: number;\n airline: string;\n nonstop: boolean;\n refundable: boolean;\n}\n\nexport function FlightsPanel() {\n const [flights, setFlights] = useState(null);\n const [live, setLive] = useState(false);\n const [destJFK, setDestJFK] = useState(true);\n const [destLGA, setDestLGA] = useState(true);\n const [tripType, setTripType] = useState<\"roundtrip\" | \"oneway\">(\"roundtrip\");\n const [returnDate, setReturnDate] = useState(\"\");\n const [nonstopOnly, setNonstopOnly] = useState(true);\n const [deltaOnly, setDeltaOnly] = useState(true);\n\n useEffect(() => {\n fetch(\"/api/flights\")\n .then((r) => r.json())\n .then((data) => {\n setFlights(data.flights);\n setLive(data.live);\n });\n }, []);\n\n if (!flights) return

Loading flights…

\n {!live && (\n

\n Sample data — no live flight API is connected yet.\n

\n )}\n\n {/* From / To, like a normal flight search */}\n

From

MSY

\n →\n

\n \n setDestJFK(e.target.checked)} /> JFK\n \n \n setDestLGA(e.target.checked)} /> LGA\n \n

\n\n

\n setTripType(\"roundtrip\")}\n >\n Round trip\n \n setTripType(\"oneway\")}\n >\n One way\n \n

\n {tripType === \"roundtrip\" && (\n \n Return\n setReturnDate(e.target.value)}\n />\n \n )}\n \n setNonstopOnly(e.target.checked)} />\n Nonstop only\n \n \n setDeltaOnly(e.target.checked)} />\n Delta only\n \n

\n\n {tripType === \"roundtrip\" && (\n

\n Return-flight pricing isn't connected yet (needs the live API — see README.md). The table below still shows one-way Tuesday departure prices.\n

\n )}\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n {filtered.map((f) => (\n \n \n \n \n \n \n \n \n ))}\n \n

Tuesday	Into	Airline	Nonstop	Refundable	Price
{f.date}	{f.destination}	{f.airline}	{f.nonstop ? \"Yes\" : \"No\"}	{f.refundable ? \"Yes\" : \"No\"}	${f.price}{f.price === cheapestPrice ? \" ← cheapest\" : \"\"}

\n {filtered.length === 0 &&

No flights match these filters.

}\n

\n );\n}\n","createdAt",["D",1788896273301],"branchVersion","branchId","a2d83106-fb23-4e34-a53f-3748660d2df7","id","873d437b-aa07-4a6d-a8ae-cf25fc6517b4","nyc-flight-hotel-finder",["D",1788894971818],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Tuesday Delta fares + NYC boutique hotel finder","imageUrl","051b2cc5-9320-44ef-88e7-826bfa8daa60","pinnedFileId","01a08273-08cb-70b7-9190-4d3348710ba0","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019ee5b5-1072-70b4-8a0f-c844ad002ea1","tursoName","873d437baa074a6da8aecf25fc6517b4","tursoHostname","873d437baa074a6da8aecf25fc6517b4-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789502486629],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":90,"_32":91,"_44":43,"_92":45,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":46,"_99":100},"isOwned",34,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","unlikelyarchivist","handle","displayName","Eryn Montgomery","avatar","https://lh3.googleusercontent.com/a/ACg8ocJEkHIy674nn2OrWifP7cPPXWj2A5ftzagptlIz_AXo3OPt_A=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":279,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":68,"_69":70,"_71":280,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":281,"_85":282,"_87":283,"_89":25},"tree",[191,193,201,202,203,204],"files",[191,192,193,194,195,196,197,198,199,200,201,202,203,204],"counts",{"_181":64,"_182":161,"_183":64,"_184":185,"_186":187},"contents",[132,133,134,135,136,137],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":176,"_32":177,"_30":178,"_140":-5,"_42":43,"_41":144,"_142":60,"_39":179,"_13":64,"_34":174,"_36":-5,"_24":25,"_147":-5,"_27":180},{"_44":170,"_32":171,"_30":172,"_140":-5,"_42":43,"_41":161,"_142":60,"_39":173,"_13":64,"_34":174,"_36":-5,"_24":25,"_147":-5,"_27":175},{"_44":164,"_32":165,"_30":166,"_140":-5,"_42":43,"_41":161,"_142":60,"_39":167,"_13":64,"_34":20,"_36":168,"_24":25,"_147":-5,"_27":169},{"_44":156,"_32":157,"_30":158,"_140":-5,"_42":43,"_41":159,"_142":25,"_39":160,"_13":161,"_34":20,"_36":162,"_24":25,"_147":-5,"_27":163},{"_44":149,"_32":150,"_30":151,"_140":-5,"_42":43,"_41":152,"_142":25,"_39":153,"_13":64,"_34":35,"_36":154,"_24":25,"_147":-5,"_27":155},{"_44":138,"_32":139,"_30":58,"_140":-5,"_42":43,"_41":141,"_142":25,"_39":143,"_13":144,"_34":145,"_36":146,"_24":25,"_147":-5,"_27":148},"bcf72fac-d2ff-4197-801f-414291d65e17","index.ts","parentId",13,"latest",["D",1788896076984],2,"http","import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { getFlights } from \"./flights.ts\";\nimport { CURATED_HOTELS } from \"./data/hotels.ts\";\n\nconst app = new Hono();\n\n// Serve the (never-cached) HTML shell at the root /\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files at the version-addressed URLs Root() stamps, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// iOS \"Add to Home Screen\" manifest\napp.get(\"/manifest.webmanifest\", (c) =>\n c.json({\n name: \"NYC Trip Finder\",\n short_name: \"Trip Finder\",\n start_url: \"/\",\n display: \"standalone\",\n background_color: \"#ffffff\",\n theme_color: \"#ffffff\",\n icons: [],\n }));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\napp.get(\"/api/flights\", async (c) => {\n try {\n const flights = await getFlights();\n return c.json({ flights, live: !!Deno.env.get(\"AMADEUS_API_KEY\") });\n } catch (err) {\n return c.json({ flights: [], live: false, error: String(err) }, 200);\n }\n});\n\napp.get(\"/api/hotels\", (c) => c.json({ hotels: CURATED_HOTELS }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[139],"b3b8c42b-2c1a-42a3-875d-0620553c0c9a","flights.ts","fcb5f78e-abb9-11f1-ba48-1607ee4eb77e",3,["D",1788895072216],"// Flight search. Currently returns mock data — no flight API key is\n// configured yet (see README for how to add one for $0/mo on Amadeus).\n// getFlights() is the single function the API route calls; swap its body\n// for a real Amadeus Flight Offers Search call and nothing else changes.\n\nexport interface FlightOption {\n date: string; // ISO date, always a Tuesday\n destination: \"JFK\" | \"LGA\";\n price: number;\n airline: string;\n nonstop: boolean;\n refundable: boolean;\n}\n\nconst DESTINATIONS = [\"JFK\", \"LGA\"] as const;\n\nfunction nextNTuesdays(n: number): string[] {\n const dates: string[] = [];\n const d = new Date();\n d.setUTCHours(0, 0, 0, 0);\n while (d.getUTCDay() !== 2) d.setUTCDate(d.getUTCDate() + 1); // 2 = Tuesday\n for (let i = 0; i < n; i++) {\n dates.push(new Date(d).toISOString().slice(0, 10));\n d.setUTCDate(d.getUTCDate() + 7);\n }\n return dates;\n}\n\n// Deterministic pseudo-random price so mock data is stable across requests.\nfunction mockPrice(seed: string): number {\n let h = 0;\n for (let i = 0; i < seed.length; i++) h = (h * 31 + seed.charCodeAt(i)) >>> 0;\n return 140 + (h % 220); // $140–$360\n}\n\nexport async function getFlights(): Promise {\n const apiKey = Deno.env.get(\"AMADEUS_API_KEY\");\n if (!apiKey) {\n // MOCK MODE — no live data source configured.\n const flights: FlightOption[] = [];\n for (const date of nextNTuesdays(8)) {\n for (const destination of DESTINATIONS) {\n const seed = `${date}-${destination}`;\n flights.push({\n date,\n destination,\n price: mockPrice(seed),\n airline: mockPrice(seed + \"air\") % 3 === 0 ? \"JetBlue\" : \"Delta\",\n nonstop: mockPrice(seed + \"ns\") % 4 !== 0,\n refundable: mockPrice(seed + \"rf\") % 2 === 0,\n });\n }\n }\n return flights;\n }\n\n // TODO: real Amadeus Flight Offers Search call, filtered MSY -> JFK/LGA,\n // Tuesday departures, nonstop, Delta preferred. Fare rules / refundability\n // requires a follow-up call to the Flight Offers Price endpoint per offer.\n throw new Error(\"Live flight API not implemented yet\");\n}\n",[150],"f4585b40-4461-457b-91a6-1826e46dd27a","README.md","01a08273-08cb-70b7-9190-4871f7cd3cc2",11,["D",1788895186402],1,"# NYC Trip Finder\n\nFlight + hotel finder for one specific trip pattern: flying out of MSY on\nTuesdays into JFK or LGA (nonstop, Delta preferred, cheapest refundable\nfare), and boutique/4-star hotels under $350/night in SoHo, Nolita, Lower\nEast Side, Chelsea, or Greenwich Village.\n\nBuilt for one person's use, not a general-purpose app.\n\n## Current state\n\n- **Hotels tab**: real, hand-curated list in [`data/hotels.ts`](/data/hotels.ts) —\n free hotel-search APIs don't reliably return room square footage or\n \"boutique\" status, so this is a seed list from a Sept 2026 web search.\n Prices are \"from\" rates, not live. Refresh periodically and before booking.\n- **Flights tab**: **mock data** ([`flights.ts`](/flights.ts)) — no flight\n API key is configured yet. The UI, filters, and \"cheapest\" highlighting\n all work against fake prices so the wireframe can be reviewed before\n wiring in something real.\n\n## Going live on flights ($0/mo)\n\n1. Create a free account at [Amadeus for Developers](https://developers.amadeus.com/register)\n and make a \"Self-Service\" app — the free tier includes Flight Offers\n Search (2,000 calls/month).\n2. 👉 Add the key here: https://www.val.town/x/unlikelyarchivist/nyc-flight-hotel-finder/environment-variables?key=AMADEUS_API_KEY\n3. Replace the `throw` in `getFlights()` in [`flights.ts`](/flights.ts) with\n a real Flight Offers Search call (MSY → JFK/LGA, Tuesday departures).\n Refundability isn't in the base search response — it needs a follow-up\n call to the Flight Offers *Price* endpoint per offer, which costs extra\n quota, so budget for that before turning it on for every row.\n\nKnown limits of the free tier: Amadeus's free/test data can be thinner or\nslightly stale compared to what you'd see on Google Flights or Delta.com —\ntreat this as a \"which days look cheap\" signal, not a bookable price.\n\n## JFK vs LGA — which is better for MSY?\n\nWorth showing both rather than picking one:\n\n- **LGA** is Delta's home domestic hub in NYC — it usually has more Delta\n departures/day and connects to more of the network, so it's often the\n cheaper, more frequent nonstop option for domestic city pairs like MSY.\n- **JFK** is Delta's international/long-haul hub — still serves MSY\n nonstop, but with fewer daily frequencies; can occasionally undercut LGA\n on price depending on the week.\n\nSince price and nonstop availability swap back and forth week to week, the\napp queries both and lets the destination filter narrow it down, rather\nthan hard-coding one.\n\n## v2 ideas (not built)\n\n- Configurable origin airport (currently hardcoded to MSY)\n- Configurable destination city (currently hardcoded to JFK/LGA)\n- Alerts — folded into a combined morning-brief automation across this app\n and the client-appointment-tracker app once both exist\n- Live hotel pricing (would need a paid API or manual periodic refresh of\n `data/hotels.ts`)\n\n## File structure\n\n```\nindex.ts ← Hono backend: serves frontend + /api/flights + /api/hotels\nflights.ts ← Flight data source (mock; swap for Amadeus)\ndata/hotels.ts ← Curated hotel list\nfrontend/\n root.tsx ← HTML shell\n index.tsx ← React entrypoint\n components/\n App.tsx ← Tab layout (Flights / Hotels)\n FlightsPanel.tsx ← Flights tab UI\n HotelsPanel.tsx ← Hotels tab UI\n```\n\nTemplate updates and upgrade paths for existing remixes: [CHANGELOG.md](/CHANGELOG.md)\n",[157],"f3cde05a-882d-45c0-9e98-9c86f951c40d","CHANGELOG.md","01a08273-08cb-70b7-9190-443b3ac049cf",["D",1788894971818],"# 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 · v17