`, 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",{"_249":250,"_251":252},"routes/_app.x.$handle.$name",{"_100":99,"_32":45,"_109":90,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":-5,"_122":-5,"_123":25,"_124":125,"_126":59,"_127":-5,"_128":-5,"_129":130},"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":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":25},"version",15,"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","email.ts","latestPath","fileId","eb00bad6-a602-11f1-a11e-1607ee4eb77e","name","fileType","email","content","/**\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. pyta Claude, czy to czarny kot, i prosi o komentarz\n * 3. zapisuje zdjecie i ocene w magazynie plikow\n * 4. kasuje najstarsze wpisy, zeby zmiescic sie w limicie darmowego planu\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 * 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 *\n * 7 MB, a nie 10, zeby zostawic zapas na zdjecie naglowkowe i na to,\n * ze nowy plik zapisujemy PRZED sprzataniem.\n */\nconst LIMIT_BAJTOW = 7 * 1024 * 1024;\n\n/**\n * Claude przyjmuje tylko te formaty obrazow. Wazne w praktyce: iPhone\n * domyslnie wysyla HEIC, ktorego na tej liscie nie ma. Takie zdjecie\n * i tak zapiszemy, ale bez oceny, z jawna informacja dlaczego.\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 console.log(`Obrazek: ${obrazek.name}, typ ${obrazek.type}, ${bajty.length} bajtow`);\n\n const ocena = FORMATY_DLA_AI.includes(obrazek.type)\n ? await ocenZdjecie(bajty, obrazek.type)\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 const id = Date.now().toString();\n\n // Zdjecie jako surowe bajty, opis osobno jako JSON. Dwa klucze,\n // wspolny przyrostek, dzieki czemu latwo je potem sparowac.\n await blob.set(`foto:${id}`, bajty);\n await blob.setJSON(`meta:${id}`, {\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 ...ocena,\n });\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 Claude o zdjecie i zwraca ustrukturyzowana ocene.\n *\n * Uzywamy wymuszonego formatu odpowiedzi zamiast prosic o JSON w tresci\n * polecenia. Roznica jest istotna: przy zwyklej prosbie model czasem doda\n * zdanie wstepu i parsowanie sie wywroci. Wymuszony format gwarantuje\n * ksztalt, wiec kod nizej nie musi zgadywac.\n */\nasync function ocenZdjecie(bajty: Uint8Array, typ: 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: \"claude-opus-5\",\n max_tokens: 1024,\n // effort low, bo to prosta klasyfikacja. Domyslne ustawienie jest\n // wyzsze i kosztowaloby wiecej bez zysku na tym zadaniu.\n output_config: { effort: \"low\" },\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 {\n type: \"image\",\n source: { type: \"base64\", media_type: typ as any, data: doBase64(bajty) },\n },\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 * Zamienia bajty na base64.\n *\n * Naiwna wersja (btoa(String.fromCharCode(...bajty))) przewraca sie na\n * wiekszych plikach, bo przekazanie miliona argumentow do funkcji przepelnia\n * stos. Dlatego przerabiamy porcjami.\n */\nfunction doBase64(bajty: Uint8Array): string {\n let tekst = \"\";\n const PORCJA = 0x8000;\n for (let i = 0; i < bajty.length; i += PORCJA) {\n tekst += String.fromCharCode(...bajty.subarray(i, i + PORCJA));\n }\n return btoa(tekst);\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 for (const wpis of najnowszeNajpierw) {\n suma += wpis.size;\n if (suma > LIMIT_BAJTOW) doUsuniecia.push(wpis);\n }\n\n if (doUsuniecia.length === 0) {\n console.log(`Magazyn: ${(suma / 1048576).toFixed(1)} MB, mieszczymy sie w limicie.`);\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","/**\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 * 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 for (const wpis of najnowszeNajpierw) {\n suma += wpis.size;\n if (suma > LIMIT_BAJTOW) doUsuniecia.push(wpis);\n }\n\n if (doUsuniecia.length === 0) {\n console.log(`Magazyn: ${(suma / 1048576).toFixed(1)} MB, mieszczymy sie w limicie.`);\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","createdAt",["D",1788268962198],"branchVersion","branchId","809e46e6-0e44-43fc-9e41-5e7fa4810485","id","e4d13f93-d252-4c55-a21a-6bd2d097e784","marlenka",["D",1788266344374],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Galeria zdjec kotow z mejla, oceniana przez Claude","imageUrl","68182d7f-e015-4c52-be93-35158f503cd7","pinnedFileId","01a05cfa-f041-726f-9bb7-b53f02988ce7","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a05cef-3c1e-72a8-bfe8-2fddf7c0fce2","tursoName","e4d13f93d2524c55a21a6bd2d097e784","tursoHostname","e4d13f93d2524c55a21a6bd2d097e784-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789480235853],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_100":99,"_108":104},"org",{"_100":99,"_101":102,"_103":104,"_18":55,"_105":106,"_107":25},"branch",{"_13":89,"_32":90,"_43":42,"_91":44,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":45,"_98":99},"isOwned",18,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dominikmurasicki","handle","displayName","Dominik Murasicki","avatar","https://lh3.googleusercontent.com/a/ACg8ocIXcqRXtSdrlKoCSThAVgKUT87vrUycop4YyjLeW9JuAsvG8E80=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":244,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":57,"_58":59,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":245,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":246,"_84":247,"_86":248,"_88":25},"tree",[181,187,188,189,190],"files",[181,182,183,184,185,186,187,188,189,190],"counts",{"_171":63,"_172":155,"_173":63,"_174":175,"_176":177},"contents",[131,132,133,134,135],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":165,"_32":166,"_30":167,"_138":-5,"_41":42,"_40":155,"_140":59,"_38":168,"_13":63,"_33":169,"_35":-5,"_24":25,"_145":-5,"_27":170},{"_43":159,"_32":160,"_30":161,"_138":-5,"_41":42,"_40":155,"_140":59,"_38":162,"_13":63,"_33":20,"_35":163,"_24":25,"_145":-5,"_27":164},{"_43":152,"_32":153,"_30":154,"_138":-5,"_41":42,"_40":155,"_140":59,"_38":156,"_13":63,"_33":20,"_35":157,"_24":25,"_145":-5,"_27":158},{"_43":148,"_32":28,"_30":31,"_138":-5,"_41":42,"_40":14,"_140":25,"_38":149,"_13":150,"_33":34,"_35":37,"_24":25,"_145":-5,"_27":151},{"_43":136,"_32":137,"_30":57,"_138":-5,"_41":42,"_40":139,"_140":59,"_38":141,"_13":142,"_33":143,"_35":144,"_24":25,"_145":146,"_27":147},"f4221557-db32-4922-8f46-fd4455034185","index.ts","parentId",8,"latest",["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","label","marlenka-galeria",[137],"c19298b0-0de8-4782-9dc9-f03639677500",["D",1788268962198],5,[28],"6e6d52f6-52dd-4756-b1c8-1f4161c387d2","README.md","01a05cfa-f041-726f-9bb7-b0a756b5c2bb",1,["D",1788266344374],"# 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",[153],"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

Diff · v15