`, 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",{"_258":259,"_260":261},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":91,"_27":105,"_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":60,"_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",{"_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",70,"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/App.tsx","latestPath","fileId","01a09ba5-f0ae-76c6-beab-4a86dd501ad9","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n// hls.js ładujemy tylko dla stacji HLS (Trójka) i tylko tam, gdzie przeglądarka\n// nie gra HLS natywnie (Safari / iOS grają same).\nconst HLS_JS = \"https://esm.sh/hls.js@1.5.20\";\n\n// Ile czekamy bez postępu odtwarzania, zanim połączymy się od nowa\nconst STALL_MS = 10_000;\nconst CONNECT_MS = 15_000;\nconst MAX_ATTEMPTS = 6;\n\ntype Station = {\n id: string;\n name: string;\n desc: string;\n short: string;\n accent: string; // kolor akcentu (hex) — aplikowany subtelnie\n logo: string | null;\n logoV?: string | null; // wersja logo — zmienia się razem ze źródłem, omija cache przeglądarki\n bg?: string | null; // kolor tła kafelka (gdy logo np. białe wymaga tła)\n src?: string | null; // bezpośredni adres HTTPS strumienia (null → tylko przez proxy)\n hls?: boolean;\n};\n\ntype Status = \"idle\" | \"connecting\" | \"playing\" | \"buffering\" | \"paused\";\n\nconst STATUS_LABEL: Record = {\n idle: \"\",\n connecting: \"łączenie…\",\n playing: \"na żywo\",\n buffering: \"buforowanie…\",\n paused: \"pauza\",\n};\n\n// Pulsujące „słupki” jako wskaźnik odtwarzania.\nfunction Bars() {\n return (\n \n {[0, 1, 2].map((i) => (\n \n ))}\n \n );\n}\n\nexport function App() {\n const [stations, setStations] = useState([]);\n const [activeId, setActiveId] = useState(null);\n const [status, setStatus] = useState(\"idle\");\n const [error, setError] = useState(null);\n const [failedLogos, setFailedLogos] = useState>(new Set());\n const audioRef = useRef(null);\n\n // Stan połączenia trzymamy w refach — zdarzenia

Diff · v70