`, 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",{"_336":337,"_338":339},"routes/_app.x.$handle.$name",{"_105":104,"_37":50,"_113":95,"_32":114,"_13":14,"_115":-5,"_11":116,"_117":118,"_119":120,"_121":122,"_123":124,"_26":-5,"_125":-5,"_126":-5,"_127":30,"_128":129,"_130":64,"_131":-5,"_132":-5,"_133":134},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":30},"version",85,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","8e71fd32-685b-4cd6-a0ab-4ac6b77a849e","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","lib/lastfm.ts","latestPath","fileId","dad3dac8-9e53-11f1-9263-1607ee4eb77e","name","lastfm.ts","fileType","script","content","/**\n * Last.fm API client (read-only, needs just an API key, no OAuth).\n * Used for discovery: similar-artist graph, genre/mood tags, listener counts\n * (obscurity signal), and top tracks. Spotify search maps Last.fm tracks to\n * real Spotify track URIs so they can be written to a Spotify playlist.\n */\nconst API_KEY = Deno.env.get(\"LASTFM_API_KEY\") ?? \"\";\nconst BASE = \"https://ws.audioscrobbler.com/2.0/\";\n\ninterface LfResult {\n error?: number;\n message?: string;\n [k: string]: unknown;\n}\n\nasync function lf(params: Record): Promise {\n const p = new URLSearchParams({ api_key: API_KEY, format: \"json\", ...params });\n const res = await fetch(`${BASE}?${p.toString()}`);\n if (!res.ok) throw new Error(`Last.fm HTTP ${res.status}`);\n const j = (await res.json()) as LfResult;\n if (j.error) throw new Error(`Last.fm ${j.error}: ${j.message ?? \"error\"}`);\n return j;\n}\n\nexport interface LfImage {\n size: string;\n url: string;\n}\n\n/** `artist.getSimilar` — the Last.fm similar-artist graph with a real match score. */\nexport async function getSimilar(\n artist: string,\n limit = 30,\n): Promise<{ similar: { name: string; match: number; image: LfImage[] }[]; tags: string[] }> {\n const j = await lf({ method: \"artist.getSimilar\", artist, limit: String(limit), autocorrect: \"1\" });\n const list = j.similarartists?.similarartist ?? [];\n const similar = (list as { name?: string; match?: string; image?: LfImage[] }[])\n .map((s) => ({\n name: s.name ?? \"\",\n match: parseFloat(s.match ?? \"0\") || 0,\n image: s.image ?? [],\n }))\n .filter((s) => s.name);\n const tags = (j.similarartists?.tags?.tag ?? []).map((t: { name?: string }) => t.name ?? \"\");\n return { similar, tags };\n}\n\n/** `artist.getTopTags` — the genre/mood tags that act as our \"genres\". */\nexport async function getTopTags(artist: string): Promise {\n const j = await lf({ method: \"artist.getTopTags\", artist, autocorrect: \"1\" });\n return (j.toptags?.tag ?? []).map((t: { name?: string }) => t.name ?? \"\").slice(0, 8);\n}\n\n/** `artist.getInfo` — listener count (obscurity signal) + image + url. */\nexport async function getInfo(\n artist: string,\n): Promise<{ listeners: number; playcount: number; url: string; image: LfImage[] }> {\n const j = await lf({ method: \"artist.getInfo\", artist, autocorrect: \"1\", lang: \"en\" });\n const stats = j.artist?.stats ?? {};\n return {\n listeners: parseInt(stats.listeners ?? \"0\", 10) || 0,\n playcount: parseInt(stats.playcount ?? \"0\", 10) || 0,\n url: j.artist?.url ?? \"\",\n image: j.artist?.image ?? [],\n };\n}\n\n/** `artist.getTopTracks` — an artist's most-played tracks. */\nexport async function getTopTracks(artist: string, limit = 5): Promise<{ name: string; playcount: number }[]> {\n const j = await lf({ method: \"artist.getTopTracks\", artist, limit: String(limit), autocorrect: \"1\" });\n return (j.toptracks?.track ?? [])\n .map((t: { name?: string; playcount?: string }) => ({\n name: t.name ?? \"\",\n playcount: parseInt(t.playcount ?? \"0\", 10) || 0,\n }))\n .filter((t: { name: string }) => t.name);\n}\n\n/** Best-looking image url from a Last.fm image array (extralarge > large > medium). */\nexport function bestImage(images: LfImage[]): string | undefined {\n for (const s of [\"extralarge\", \"large\", \"medium\"]) {\n const hit = images.find((i) => i.size === s && i.url);\n if (hit) return hit.url;\n }\n return undefined;\n}\n","createdAt",["D",1787421841591],"branchVersion","branchId","dc1f9fe4-aa8c-400d-87f3-9d22e6847153","id","f8c773d7-7a4a-4d5b-84e7-ccf2b3929d80","discovery-radar",["D",1787417498284],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Spotify discovery with taste radar + weekly playlist refresh","imageUrl","e6d51557-2988-4ce3-bf61-63d827903a6c","pinnedFileId","01a02a62-92f6-771d-907a-be2483e744c9","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","3ebf4d50-fe40-465b-915c-bd543c8a8608","tursoName","f8c773d77a4a4d5b84e7ccf2b3929d80","tursoHostname","f8c773d77a4a4d5b84e7ccf2b3929d80-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789502486629],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_112":108},"org",{"_105":104,"_106":-5,"_107":108,"_19":60,"_109":110,"_111":30},"branch",{"_13":94,"_37":95,"_48":47,"_96":49,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":-5,"_102":50,"_103":104},"isOwned",90,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","test_account_001","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJabHpKOGNWSmhqcWduM3VVV0xTUGlicVprayJ9","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":331,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":332,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":333,"_89":334,"_91":335,"_93":30},"tree",[196,198,207,212,213,214],"files",[196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214],"counts",{"_185":68,"_186":163,"_187":68,"_188":189,"_190":191},"contents",[135,136,137,138,139,140],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_48":179,"_37":180,"_35":181,"_143":-5,"_46":47,"_45":182,"_145":64,"_43":183,"_13":68,"_39":172,"_41":-5,"_29":30,"_150":-5,"_32":184},{"_48":174,"_37":175,"_35":176,"_143":-5,"_46":47,"_45":163,"_145":64,"_43":177,"_13":68,"_39":172,"_41":-5,"_29":30,"_150":-5,"_32":178},{"_48":167,"_37":168,"_35":169,"_143":-5,"_46":47,"_45":170,"_145":64,"_43":171,"_13":68,"_39":172,"_41":-5,"_29":30,"_150":-5,"_32":173},{"_48":160,"_37":161,"_35":162,"_143":-5,"_46":47,"_45":163,"_145":64,"_43":164,"_13":68,"_39":26,"_41":165,"_29":30,"_150":-5,"_32":166},{"_48":152,"_37":153,"_35":154,"_143":-5,"_46":47,"_45":155,"_145":30,"_43":156,"_13":157,"_39":26,"_41":158,"_29":30,"_150":-5,"_32":159},{"_48":141,"_37":142,"_35":62,"_143":-5,"_46":47,"_45":144,"_145":64,"_43":146,"_13":147,"_39":148,"_41":149,"_29":30,"_150":50,"_32":151},"106246c6-5eb1-49a8-896e-0671d8647c82","index.ts","parentId",70,"latest",["D",1787421190662],10,"http","import { serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Context, Hono } from \"npm:hono\";\nimport { getCookie, setCookie } from \"npm:hono/cookie\";\nimport { Root } from \"./frontend/root.tsx\";\nimport { StoredUser, getUser, init, upsertUser } from \"./lib/db.ts\";\nimport { authorizeUrl, exchangeCode } from \"./lib/spotify.ts\";\nimport { computeProfile, discover, updateDiscoveryPlaylist } from \"./lib/taste.ts\";\n\nawait init();\n\nconst app = new Hono();\nconst COOKIE = \"discovery_radar_user\";\n\nasync function getSessionUser(c: Context): Promise {\n const id = getCookie(c, COOKIE);\n return id ? getUser(id) : null;\n}\n\n// Serve the (never-cached) HTML shell at the root\napp.get(\"/\", (c) => c.html(Root()));\n\n// Serve frontend files, cached immutably\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\n\n// ---- Spotify OAuth ----\napp.get(\"/auth/login\", (c) => {\n const state = crypto.randomUUID();\n setCookie(c, \"discovery_radar_state\", state, { path: \"/\", httpOnly: true, sameSite: \"Lax\" });\n return c.redirect(authorizeUrl(state));\n});\n\napp.get(\"/auth/callback\", async (c) => {\n const code = c.req.query(\"code\");\n if (!code) return c.text(\"Missing authorization code\", 400);\n try {\n const tokens = await exchangeCode(code);\n const me = await (await fetch(\"https://api.spotify.com/v1/me\", {\n headers: { authorization: `Bearer ${tokens.access_token}` },\n })).json();\n await upsertUser({\n spotifyId: me.id,\n displayName: me.display_name ?? \"Spotify user\",\n accessToken: tokens.access_token,\n refreshToken: tokens.refresh_token ?? \"\",\n expiresAt: Date.now() + tokens.expires_in * 1000,\n });\n setCookie(c, COOKIE, me.id, {\n path: \"/\",\n httpOnly: true,\n sameSite: \"Lax\",\n maxAge: 60 * 60 * 24 * 30,\n });\n return c.redirect(\"/\");\n } catch (e) {\n console.error(\"callback failed\", e);\n return c.text(\"Spotify auth failed: \" + (e as Error).message, 500);\n }\n});\n\napp.post(\"/auth/logout\", (c) => {\n setCookie(c, COOKIE, \"\", { path: \"/\", httpOnly: true, sameSite: \"Lax\", maxAge: 0 });\n return c.redirect(\"/\");\n});\n\n// ---- API ----\napp.get(\"/api/me\", async (c) => {\n const u = await getSessionUser(c);\n return c.json(u ? { connected: true, displayName: u.displayName } : { connected: false });\n});\n\napp.get(\"/api/profile\", async (c) => {\n const u = await getSessionUser(c);\n if (!u) return c.json({ error: \"unauthorized\" }, 401);\n return c.json({ profile: await computeProfile(u) });\n});\n\napp.get(\"/api/discover\", async (c) => {\n const u = await getSessionUser(c);\n if (!u) return c.json({ error: \"unauthorized\" }, 401);\n const profile = await computeProfile(u);\n const obscurity = parseFloat(c.req.query(\"obscurity\") ?? \"\");\n const genre = c.req.query(\"genre\");\n const seed = parseFloat(c.req.query(\"seed\") ?? \"\");\n const picks = await discover(u, profile, {\n obscurity: Number.isFinite(obscurity) ? obscurity : undefined,\n genres: genre ? [genre] : undefined,\n seed: Number.isFinite(seed) ? seed : undefined,\n });\n return c.json({ profile, genres: profile.map((a) => a.label), picks });\n});\n\napp.post(\"/api/save\", async (c) => {\n const u = await getSessionUser(c);\n if (!u) return c.json({ error: \"unauthorized\" }, 401);\n try {\n const body = await c.req.json<{ trackUris: string[] }>();\n const playlistId = await updateDiscoveryPlaylist(u, body.trackUris ?? []);\n return c.json({ ok: true, playlistId });\n } catch (e) {\n const msg = (e as Error).message || \"save failed\";\n console.error(\"save failed:\", e);\n return c.json(\n { ok: false, error: \"Spotify blocked playlist access: \" + msg },\n 502,\n );\n }\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[142],"3f3b0743-c3c9-408e-bb21-1acefa75e8a1","README.md","01a02a62-92f6-771d-907a-b81da57860c2",39,["D",1787419507333],4,"# 🎧 Discovery Radar\n\nA personal Spotify discovery app that breaks you out of the same 50 artists.\n\nIt computes **your sound profile** (a radar chart of the genres that dominate\nyour library), then digs deep into those genres to surface **under-discovered**\nacts — showing how closely each one's genres line up with yours, with a\n30-second preview so you can audition in the browser. Save your picks to a\nSpotify playlist, or let the weekly cron refresh it so it never goes stale.\n\n## How it works\n\n```mermaid\ngraph LR\n Browser -->|\"Connect Spotify\"| Hono[\"index.ts
(Hono + OAuth)\"]\n Hono -->|stores tokens| DB[(SQLite)]\n Hono -->|computeProfile + discover| SP[\"Spotify API\"]\n SP -->|top artists + genre search| Hono\n Hono -->|radar data + picks| React[\"React app
(radar charts)\"]\n Cron[\"cron/refresh.ts
(weekly)\"] -->|refresh playlist| SP\n```\n\n- `index.ts` — Hono server: Spotify OAuth, session cookie, `/api/me`,\n `/api/profile`, `/api/discover`, `/api/save`.\n- `lib/spotify.ts` — OAuth (authorization-code flow) + authed API client with\n token refresh.\n- `lib/taste.ts` — taste profile, related-artist discovery, playlist writer.\n- `lib/db.ts` — SQLite storage for per-user Spotify tokens.\n- `frontend/` — React app with an SVG radar-chart component\n (`RadarChart.tsx`) that overlays each candidate's sound on yours.\n- `cron/refresh.ts` — weekly job that refreshes each user's \"Discovery Radar\"\n playlist (Sundays 12:00 UTC).\n\n## Setup\n\n1. Create a Spotify app at\n (Dashboard → Create app).\n2. Add this as a **Redirect URI** in the app's settings:\n `https://discovery-radar.val.run/auth/callback`\n3. Set the two env vars below.\n\n👉 Add SPOTIFY_CLIENT_ID here: https://www.val.town/x/test_account_001/discovery-radar/environment-variables?key=SPOTIFY_CLIENT_ID\n\n👉 Add SPOTIFY_CLIENT_SECRET here: https://www.val.town/x/test_account_001/discovery-radar/environment-variables?key=SPOTIFY_CLIENT_SECRET\n\n`SPOTIFY_REDIRECT_URI` is optional — it defaults to the callback URL above.\n\n4. Open the app, hit **Connect Spotify**, and authorize. Your taste profile and\n a grid of under-discovered artists appear. Hit **Save top picks** to write\n them to a private \"Discovery Radar\" playlist.\n\n## Notes\n\n- **Discovery uses only `/me/top` + `/v1/search`.** Spotify currently 403/404s\n the richer endpoints (related-artists, audio-features, browse, and even the\n recommendations engine) for new/unreviewed apps. So the radar is built from\n genre tags, and discovery is genre-search paged deep enough to reach small\n acts. This is by design and resilient, not a limitation you need to fix.\n- The under-discovered filter keeps artists with popularity between ~5 and 45.\n- The weekly cron refreshes the playlist for every connected user.\n- **Save-to-playlist needs the `playlist-modify-*` scopes on the user's token.**\n If \"Save\" errors with \"Spotify blocked playlist access\", the granted token is\n missing those scopes — disconnect and click Connect Spotify again to re-consent.\n- Tokens are stored per Spotify user in the val's SQLite DB and refreshed\n automatically.\n",[153],"4fe8db74-919d-4686-9be5-883aad74c74f","CHANGELOG.md","01a02a62-92f6-771d-907a-b61ebd4f10fe",1,["D",1787417498284],"# 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 · v85