`, 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",{"_263":264,"_265":266},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_198":-5,"_20":199,"_22":200,"_201":202,"_203":204,"_26":205,"_24":206,"_207":-5,"_208":-5,"_209":66,"_210":211,"_212":60,"_213":-5,"_214":-5,"_215":216},"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","dominikmurasicki","name","marlenka","branchName","main","version","path","README.md","project",{"_33":140,"_13":14,"_44":141,"_142":-5,"_143":66,"_144":145,"_146":145,"_147":148,"_149":-5,"_150":151,"_152":57,"_153":60,"_154":-5,"_155":-5,"_156":42,"_157":158,"_159":160,"_161":162,"_163":164,"_165":-5,"_166":167,"_168":167,"_169":170,"_171":170,"_172":170,"_173":167,"_174":167,"_175":176,"_177":178,"_179":180,"_181":66},"tree",[50,51,52,53,54],"file",{"_33":34,"_35":36,"_37":38,"_13":19,"_39":40,"_41":24,"_17":42,"_43":-5,"_44":45,"_46":47,"_48":-5,"_18":49},"contents",[],"upstream","pull","ahead","behind","envVars","id","6e6d52f6-52dd-4756-b1c8-1f4161c387d2","branchId","809e46e6-0e44-43fc-9e41-5e7fa4810485","fileId","01a05cfa-f041-726f-9bb7-b0a756b5c2bb","content","# 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","fileType",0,"parentId","createdAt",["D",1788266344374],"branchVersion",1,"label",[19],{"_33":91,"_13":92,"_37":93,"_43":-5,"_35":36,"_46":47,"_59":60,"_44":94,"_17":42,"_41":95,"_39":-5,"_65":66,"_48":-5,"_68":96,"_18":97},{"_33":84,"_13":85,"_37":86,"_43":-5,"_35":36,"_46":47,"_59":60,"_44":87,"_17":42,"_41":24,"_39":88,"_65":66,"_48":-5,"_68":89,"_18":90},{"_33":34,"_13":19,"_37":38,"_43":-5,"_35":36,"_46":47,"_59":60,"_44":81,"_17":42,"_41":24,"_39":40,"_65":66,"_48":-5,"_68":82,"_18":83},{"_33":71,"_13":72,"_37":73,"_43":-5,"_35":36,"_46":74,"_59":60,"_44":75,"_17":76,"_41":77,"_39":78,"_65":66,"_48":-5,"_68":79,"_18":80},{"_33":55,"_13":56,"_37":57,"_43":-5,"_35":36,"_46":58,"_59":60,"_44":61,"_17":62,"_41":63,"_39":64,"_65":66,"_48":67,"_68":69,"_18":70},"f4221557-db32-4922-8f46-fd4455034185","index.ts","01a05cfa-f041-726f-9bb7-b53f02988ce7",8,"latest",true,["D",1788267373939],2,"http","/**\n * Serwer aplikacji. Trzy zadania:\n * GET / strona z galeria\n * GET /api/photos lista zdjec z ocenami, jako JSON\n * GET /photo/:id pojedynczy obrazek, prosto z magazynu\n *\n * Zdjec nie wystawiamy jako plikow statycznych, bo nie leza na dysku.\n * Val Town nie ma dysku; siedza w magazynie blobow i ta sciezka je stamtad\n * wyciaga i oddaje przegladarce z wlasciwym typem zawartosci.\n */\n\nimport { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\n\n// Powloka HTML, nigdy nie cache'owana.\napp.get(\"/\", (c) => c.html(Root()));\n\n// Pliki frontendu pod adresami z numerem wersji, cache'owane na zawsze.\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// Podglad zrodla.\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n/**\n * Lista zdjec z ocenami, najnowsze pierwsze.\n *\n * Klucze zawieraja znacznik czasu, wiec sortowanie malejaco po nazwie\n * daje kolejnosc od najnowszego. Zadnej bazy danych do tego nie potrzeba.\n */\napp.get(\"/api/photos\", async (c) => {\n const wpisy = await blob.list(\"meta:\");\n const posortowane = wpisy.sort((a, b) => b.key.localeCompare(a.key));\n\n const zdjecia = [];\n for (const wpis of posortowane) {\n const opis = await blob.getJSON(wpis.key);\n if (opis) zdjecia.push(opis);\n }\n\n return c.json(zdjecia);\n});\n\n/**\n * Pojedynczy obrazek.\n *\n * Typ zawartosci bierzemy z zapisanego opisu, a nie zgadujemy z rozszerzenia.\n * Naglowek cache jest agresywny, bo obrazek pod danym identyfikatorem\n * nigdy sie nie zmienia: nowe zdjecie dostaje nowy identyfikator.\n */\napp.get(\"/photo/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n const odpowiedz = await blob.get(`foto:${id}`);\n const bajty = await odpowiedz.arrayBuffer();\n const opis: any = await blob.getJSON(`meta:${id}`);\n\n return new Response(bajty, {\n headers: {\n \"Content-Type\": opis?.typ ?? \"image/jpeg\",\n \"Cache-Control\": \"public, max-age=31536000, immutable\",\n },\n });\n } catch {\n return c.notFound();\n }\n});\n\n/**\n * Zdjecie naglowkowe (portret Marlenki).\n *\n * Lezy w magazynie pod stalym kluczem \"hero\", a nie wsrod przyslanych zdjec.\n * Dzieki temu sprzatanie starych wpisow (ktore patrzy tylko na klucze\n * z przedrostkiem \"meta:\") nigdy go nie skasuje.\n */\napp.get(\"/hero.jpg\", async (c) => {\n try {\n const odpowiedz = await blob.get(\"hero\");\n const bajty = await odpowiedz.arrayBuffer();\n return new Response(bajty, {\n headers: {\n \"Content-Type\": \"image/jpeg\",\n \"Cache-Control\": \"public, max-age=86400\",\n },\n });\n } catch {\n return c.notFound();\n }\n});\n\n// Bez tej linii kazdy blad zamienia sie w gole \"Internal Server Error\"\n// i tracisz caly slad stosu w logach.\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","deleted",false,"marlenka-galeria","children",[],[56],"1b8c36fe-3f26-4a35-a55f-6990585cfe37","email.ts","eb00bad6-a602-11f1-a11e-1607ee4eb77e",17,["D",1788268989512],7,"email","/**\n * Odbiornik poczty. Uruchamia sie, gdy ktos wysle maila na adres tego vala.\n *\n * Co robi po kolei:\n * 1. wyciaga z maila pierwszy zalacznik bedacy obrazkiem\n * 2. ZAPISUJE zdjecie do magazynu (musi byc pierwsze, patrz nizej)\n * 3. pyta Claude, czy to czarny kot, podajac ADRES zdjecia\n * 4. dopisuje ocene do zapisanego wpisu\n * 5. kasuje najstarsze wpisy, zeby zmiescic sie w limicie\n *\n * Adresu email tego vala NIE wpisujemy tu recznie. Nadaje go platforma\n * i odczytuje sie go z API (pole links.email).\n */\n\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport Anthropic from \"npm:@anthropic-ai/sdk\";\n\n/**\n * MODEL. To jedno miejsce, w ktorym sie go zmienia.\n *\n * Wczesniej: \"claude-opus-5\". Zmienione na Haiku 2026-09-01, bo rozpoznanie\n * czarnego kota nie wymaga najmocniejszego modelu, a roznica w cenie jest\n * pieciokrotna na wejsciu (5 USD kontra 1 USD za milion tokenow).\n *\n * UWAGA, pulapka: parametr output_config.effort DZIALA na Opus, a na Haiku 4.5\n * zwraca blad. Zmiana modelu wymagala wiec usuniecia tego parametru z wywolania\n * nizej. Model to nie jest pojedyncza wartosc do podmiany; zmiana modelu moze\n * pociagac zmiane dozwolonych parametrow.\n *\n * Drugi zysk, mniej oczywisty: Haiku pracuje w standardowym trybie\n * rozdzielczosci (do 1568 tokenow wizualnych na obraz), a Opus 5 w wysokim\n * (do 4784). Przy zdjeciach z telefonu to kolejne kilkukrotne zmniejszenie\n * liczby tokenow, niezaleznie od stawki.\n */\nconst MODEL = \"claude-haiku-4-5\";\n\n/**\n * Adres publiczny tej aplikacji.\n *\n * Potrzebny, bo od 2026-09-01 nie wysylamy modelowi zdjecia w tresci zadania,\n * tylko podajemy jego ADRES, a Anthropic pobiera je sam. Adres musi byc\n * osiagalny z internetu, wiec nie moze to byc sciezka relatywna.\n *\n * Wartosc pochodzi z wlasnej subdomeny ustawionej dla pliku index.ts.\n * Gdyby subdomena kiedys sie zmienila, to jedyna linia do poprawienia.\n */\nconst ADRES_BAZOWY = \"https://marlenka-galeria.val.run\";\n\n/**\n * Darmowy plan Val Town daje 10 MB magazynu na CALE konto.\n *\n * Pierwsza wersja trzymala szesc najnowszych zdjec. Test na realnych plikach\n * (2026-09-01) pokazal, ze to zla miara: cztery zdjecia z telefonu zajely\n * 6,9 MB, wiec szosc przekroczylaby limit. Zdjecia roznia sie rozmiarem\n * kilkukrotnie, wiec liczymy BAJTY, nie sztuki.\n */\nconst LIMIT_BAJTOW = 7 * 1024 * 1024;\n\n/**\n * Dodatkowo twardy limit sztuk (2026-09-01, na zyczenie).\n *\n * Dwa warunki naraz, bo kazdy sam w sobie jest niewystarczajacy: cztery duze\n * zdjecia z telefonu (4 x 2,8 MB) przekroczylyby limit konta, a cztery male\n * zmiescilyby sie z zapasem. Obowiazuje ten warunek, ktory zadziala pierwszy.\n */\nconst MAKS_ZDJEC = 4;\n\n/**\n * Formaty obrazow obslugiwane przez model.\n * Zrodlo: https://platform.claude.com/docs/en/build-with-claude/vision\n * Cytat: \"Claude supports JPEG, PNG, GIF, and WebP images\".\n *\n * Dwie rzeczy stad, o ktorych warto wiedziec:\n * - iPhone domyslnie wysyla HEIC, ktorego na tej liscie nie ma\n * - animacje nie sa obslugiwane, z GIF-a brany jest tylko pierwszy kadr\n */\nconst FORMATY_DLA_AI = [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/webp\"];\n\nexport default async function (e: Email) {\n console.log(`Mail od ${e.from}, temat: ${e.subject ?? \"(brak)\"}`);\n console.log(`Zalacznikow: ${e.attachments?.length ?? 0}`);\n\n const zalaczniki = e.attachments ?? [];\n const obrazek = zalaczniki.find((p) => (p.type ?? \"\").startsWith(\"image/\"));\n\n if (!obrazek) {\n // Glosno, nie po cichu. Bez tego wpisu w logach nie wiedzialbys,\n // czy mail nie doszedl, czy doszedl bez zdjecia.\n console.log(\"Brak zalacznika bedacego obrazkiem. Nic nie zapisuje.\");\n return;\n }\n\n const bajty = new Uint8Array(await obrazek.arrayBuffer());\n const id = Date.now().toString();\n console.log(`Obrazek: ${obrazek.name}, typ ${obrazek.type}, ${bajty.length} bajtow`);\n\n // ---------------------------------------------------------------------------\n // KOLEJNOSC ZMIENIONA 2026-09-01, i to jest istotne.\n //\n // Wczesniej: ocena, potem zapis. Teraz odwrotnie, bo model dostaje ADRES\n // zdjecia, a nie samo zdjecie. Zeby adres cokolwiek zwracal, plik musi\n // juz lezec w magazynie.\n //\n // Opis (meta) zapisujemy razem z plikiem, jeszcze przed ocena, z dwoch powodow:\n // 1. trasa /photo/:id bierze z niego typ zawartosci, wiec bez niego PNG\n // zostalby podany jako JPEG\n // 2. zdjecie pojawia sie w galerii od razu, z informacja, ze ocena trwa,\n // zamiast wisiec niewidoczne przez kilka sekund\n // ---------------------------------------------------------------------------\n const opisBazowy = {\n id,\n od: e.from,\n temat: e.subject ?? \"\",\n nazwaPliku: obrazek.name,\n typ: obrazek.type,\n rozmiar: bajty.length,\n kiedy: new Date().toISOString(),\n };\n\n await blob.set(`foto:${id}`, bajty);\n await blob.setJSON(`meta:${id}`, {\n ...opisBazowy,\n czarny_kot: false,\n co_widac: \"\",\n komentarz: \"Oceniam zdjecie...\",\n });\n\n const ocena = FORMATY_DLA_AI.includes(obrazek.type)\n ? await ocenZdjecie(`${ADRES_BAZOWY}/photo/${id}`)\n : {\n czarny_kot: false,\n co_widac: `Format ${obrazek.type} nie jest obslugiwany przez model`,\n komentarz:\n \"Nie umiem ocenic tego formatu. Wyslij jako JPEG albo PNG (iPhone: ustawienia aparatu, format Najbardziej zgodny).\",\n };\n\n // Nadpisujemy opis pelna ocena. Ten sam klucz, wiec galeria po prostu\n // pokaze nowa tresc przy najblizszym odswiezeniu.\n await blob.setJSON(`meta:${id}`, { ...opisBazowy, ...ocena });\n\n console.log(`Zapisano ${id}. Werdykt: czarny kot = ${ocena.czarny_kot}`);\n console.log(`Komentarz: ${ocena.komentarz}`);\n\n await zwolnijMiejsce();\n}\n\n/**\n * Pyta model o zdjecie i zwraca ustrukturyzowana ocene.\n *\n * ZMIANA 2026-09-01: przyjmuje ADRES zdjecia, nie jego bajty.\n *\n * Wczesniej zamienialismy plik na base64 i wysylali w tresci zadania, co przy\n * zdjeciu 2,8 MB oznaczalo okolo 3,8 MB przesylanych danych za kazda ocene\n * (base64 rozdyma dane o mniej wiecej jedna trzecia). Teraz wysylamy jeden\n * krotki adres, a Anthropic pobiera plik sam.\n *\n * Warunek: adres musi byc publicznie osiagalny. U nas jest, bo trasa\n * /photo/:id jest otwarta. Gdyby aplikacja byla za logowaniem, ta droga\n * nie zadzialalaby i trzeba by wrocic do base64 albo uzyc Files API.\n * Zrodlo: https://platform.claude.com/docs/en/build-with-claude/vision\n */\nasync function ocenZdjecie(adresZdjecia: string) {\n const klucz = Deno.env.get(\"ANTHROPIC_API_KEY\");\n if (!klucz) {\n return {\n czarny_kot: false,\n co_widac: \"Brak klucza API\",\n komentarz: \"Nie ustawiono ANTHROPIC_API_KEY w zmiennych srodowiskowych vala.\",\n };\n }\n\n const client = new Anthropic({ apiKey: klucz });\n\n try {\n const odpowiedz = await client.messages.create({\n model: MODEL,\n max_tokens: 1024,\n // Zadnego output_config.effort: ten parametr dziala na modelach Opus,\n // a na Haiku 4.5 konczy sie bledem. Patrz komentarz przy stalej MODEL.\n system:\n \"Ogladasz zdjecia przyslane do galerii kota o imieniu Marlenka. \" +\n \"Marlenka jest CZARNYM kotem. \" +\n \"Odpowiadasz wylacznie obiektem JSON z polami: \" +\n \"czarny_kot (true/false), co_widac (krotki opis po polsku), \" +\n \"komentarz (jedno zdanie po polsku). \" +\n \"Jesli na zdjeciu jest CZARNY kot, komentarz ma brzmiec doslownie: \" +\n \"\\\"O jaka piekna Marlenka!\\\". \" +\n \"Jesli to kot, ale INNEGO koloru niz czarny, komentarz ma brzmiec doslownie: \" +\n \"\\\"Co to za podrabianiec!!\\\". \" +\n \"Jesli to w ogole nie kot, powiedz zartobliwie, co widzisz. \" +\n \"Zadnego tekstu poza obiektem JSON.\",\n messages: [\n {\n role: \"user\",\n content: [\n // Obraz PRZED tekstem. Dokumentacja mowi wprost, ze Claude radzi\n // sobie lepiej w tej kolejnosci niz odwrotnej.\n { type: \"image\", source: { type: \"url\", url: adresZdjecia } },\n { type: \"text\", text: \"Czy to czarny kot? Odpowiedz obiektem JSON.\" },\n ],\n },\n ],\n });\n\n const tekst = odpowiedz.content\n .filter((b: any) => b.type === \"text\")\n .map((b: any) => b.text)\n .join(\"\")\n .trim();\n\n // Model poproszony o czysty JSON zwykle go daje, ale zabezpieczamy sie\n // na wypadek otoczenia go markdownem.\n const wyciety = tekst.replace(/^```(?:json)?/i, \"\").replace(/```$/, \"\").trim();\n const wynik = JSON.parse(wyciety);\n\n return {\n czarny_kot: Boolean(wynik.czarny_kot),\n co_widac: String(wynik.co_widac ?? \"\"),\n komentarz: String(wynik.komentarz ?? \"\"),\n };\n } catch (blad) {\n // Blad zapisujemy jako tresc oceny, zeby byl widoczny na stronie.\n // Cicha porazka wygladalaby jak zdjecie bez komentarza i szukalbys\n // przyczyny w zlym miejscu.\n console.error(\"Blad przy ocenie:\", blad);\n return {\n czarny_kot: false,\n co_widac: \"Nie udalo sie ocenic\",\n komentarz: `Blad po stronie AI: ${String(blad).slice(0, 200)}`,\n };\n }\n}\n\n/**\n * Trzyma najnowsze zdjecia do wyczerpania budzetu bajtow, starsze kasuje.\n *\n * Listujemy klucze \"foto:\", bo tylko one niosa realny rozmiar (opisy w JSON\n * waza tyle, co nic). Klucze zawieraja znacznik czasu, wiec sortowanie po\n * nazwie malejaco daje kolejnosc od najnowszego.\n *\n * Zdjecie naglowkowe ma klucz \"hero\", bez przedrostka, wiec ta funkcja\n * nigdy go nie dotknie. To nie przypadek, tylko powod, dla ktorego\n * przedrostki w kluczach maja sens.\n */\nasync function zwolnijMiejsce() {\n const zdjecia = await blob.list(\"foto:\");\n const najnowszeNajpierw = zdjecia.sort((a, b) => b.key.localeCompare(a.key));\n\n let suma = 0;\n const doUsuniecia: typeof najnowszeNajpierw = [];\n\n najnowszeNajpierw.forEach((wpis, indeks) => {\n suma += wpis.size;\n const zaDuzoSztuk = indeks >= MAKS_ZDJEC;\n const zaDuzoBajtow = suma > LIMIT_BAJTOW;\n if (zaDuzoSztuk || zaDuzoBajtow) doUsuniecia.push(wpis);\n });\n\n if (doUsuniecia.length === 0) {\n console.log(\n `Magazyn: ${najnowszeNajpierw.length}/${MAKS_ZDJEC} zdjec, ` +\n `${(suma / 1048576).toFixed(1)} MB, mieszczymy sie w limicie.`,\n );\n return;\n }\n\n for (const wpis of doUsuniecia) {\n const id = wpis.key.replace(\"foto:\", \"\");\n await blob.delete(wpis.key);\n try {\n await blob.delete(`meta:${id}`);\n } catch {\n // Brak opisu przy istniejacym pliku to nie powod do przerywania.\n }\n console.log(\n `Usunieto ${id} (${(wpis.size / 1048576).toFixed(1)} MB), zeby zmiescic sie w limicie.`,\n );\n }\n}\n",[],[72],["D",1788266344374],[],[19],"60338e85-0b1a-4f06-ac0c-a0aac3e324f9","CHANGELOG.md","01a05cfa-f041-726f-9bb7-ac96b5df0968",["D",1788266344374],"# 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