`, 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",{"_329":330,"_331":332},"routes/_app.x.$handle.$name",{"_107":106,"_38":52,"_115":97,"_33":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":-5,"_128":-5,"_129":31,"_130":131,"_132":66,"_133":-5,"_134":-5,"_135":136},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_50":51,"_38":52,"_45":53,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":78,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":90,"_91":92,"_93":94,"_95":31},"version",29,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","71c87668-dc4c-4f68-958b-6202757e56fd","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":39,"_40":41,"_42":44,"_45":46,"_47":14,"_48":49,"_30":31},"previous",{"_36":37,"_38":39,"_40":41,"_42":43},"deleted",false,"deletedHere","path","lib/taste.ts","latestPath","fileId","003ed61e-9e4a-11f1-acfa-1607ee4eb77e","name","taste.ts","fileType","script","content","import { StoredUser } from \"./db.ts\";\nimport { api } from \"./spotify.ts\";\n\n/**\n * A radar profile is a list of named axes (0..1), built from **genres**.\n * Spotify's richer endpoints (audio-features, related-artists, browse,\n * recommendations) 403/404 for unreviewed apps, but artist objects returned by\n * /me/top and /v1/search carry genre tags, images and popularity — so those two\n * endpoints are the backbone. \"Your sound\" = the genres that dominate your\n * library; discovery = search within those genres, paged deep enough to find\n * the small acts the algorithm ignores.\n */\nexport interface Axis {\n label: string;\n value: number; // 0..1\n}\n\nexport type Profile = Axis[];\n\nexport interface DiscoveredArtist {\n id: string;\n name: string;\n images: { url: string }[];\n popularity: number;\n genres: string[];\n previewUrl: string | null;\n trackName: string;\n trackUri: string;\n match: number; // 0..1 genre overlap with the user's profile\n radar: Profile; // this artist's genre-shape against your core genres\n}\n\ninterface ArtistLike {\n id: string;\n name: string;\n images: { url: string }[];\n popularity: number;\n genres: string[];\n}\n\ninterface Track {\n id: string;\n uri: string;\n name: string;\n preview_url: string | null;\n}\n\n/**\n * The genres that dominate your library, normalized to 0..1 so the top genre\n * sits at 1.0. Six axes keeps the radar readable.\n */\nexport async function computeProfile(user: StoredUser): Promise {\n const top = await api<{ items: ArtistLike[] }>(\n user,\n \"me/top/artists?time_range=medium_term&limit=30\",\n );\n const counts = new Map();\n for (const a of top.items) {\n for (const g of a.genres ?? []) counts.set(g, (counts.get(g) ?? 0) + 1);\n }\n const ranked = [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 6);\n const max = ranked.length ? ranked[0][1] : 1;\n return ranked.map(([label, count]) => ({ label, value: count / max }));\n}\n\n/**\n * Discover under-discovered artists in your core genres. Search each top genre\n * across several deep page offsets (smaller acts sit far back), then filter by\n * popularity and score genre overlap with your profile.\n */\nexport async function discover(user: StoredUser, profile: Profile): Promise {\n const top = await api<{ items: { id: string }[] }>(\n user,\n \"me/top/artists?time_range=medium_term&limit=20\",\n );\n const knownTop = new Set(top.items.map((a) => a.id));\n\n // 1. Collect candidates by searching each core genre at deep offsets.\n const genres = profile.map((a) => a.label).slice(0, 3);\n const offsets = [0, 100, 200, 300];\n const pool = new Map();\n for (const g of genres) {\n for (const offset of offsets) {\n try {\n const res = await api<{ artists: { items: ArtistLike[] } }>(\n user,\n `search?q=${encodeURIComponent(`genre:\"${g}\"`)}&type=artist&limit=50&offset=${offset}`,\n );\n for (const a of res.artists.items) if (!pool.has(a.id)) pool.set(a.id, a);\n } catch {\n // keep whatever we already have; don't let one page sink the tour\n }\n }\n }\n\n // 2. Under-discovered filter (skip the algorithm's darlings).\n const candidates = [...pool.values()]\n .filter((a) => !knownTop.has(a.id))\n .filter((a) => a.popularity > 5 && a.popularity <= 45)\n .sort((a, b) => a.popularity - b.popularity)\n .slice(0, 12);\n\n // 3. Attach a representative track to each via search, then score.\n const total = profile.reduce((s, a) => s + a.value, 0) || 1;\n const results: DiscoveredArtist[] = [];\n for (const art of candidates) {\n let track: Track | null = null;\n try {\n const res = await api<{ tracks: { items: Track[] } }>(\n user,\n `search?q=${encodeURIComponent(`artist:\"${art.name}\"`)}&type=track&limit=1&market=US`,\n );\n track = res.tracks.items?.[0] ?? null;\n } catch {\n // no preview available; skip\n }\n if (!track) continue;\n\n const has = (g: string) => art.genres.includes(g);\n const radar: Profile = profile.map((a) => ({\n label: a.label,\n value: has(a.label) ? a.value : 0,\n }));\n const hit = profile.reduce((s, a) => s + (has(a.label) ? a.value : 0), 0);\n results.push({\n id: art.id,\n name: art.name,\n images: art.images,\n popularity: art.popularity,\n genres: art.genres,\n previewUrl: track.preview_url,\n trackName: track.name,\n trackUri: track.uri,\n match: hit / total,\n radar,\n });\n }\n\n results.sort((a, b) => b.match - a.match);\n return results;\n}\n\nconst PLAYLIST_NAME = \"Discovery Radar\";\n\n/** Find or create a private \"Discovery Radar\" playlist and replace its tracks. */\nexport async function updateDiscoveryPlaylist(user: StoredUser, trackUris: string[]): Promise {\n let playlistId = await findPlaylistId(user, PLAYLIST_NAME);\n if (!playlistId) {\n const created = await api<{ id: string }>(user, \"users/me/playlists\", {\n method: \"POST\",\n body: {\n name: PLAYLIST_NAME,\n description: \"Under-discovered picks generated by Discovery Radar\",\n public: false,\n },\n });\n playlistId = created.id;\n }\n await api(user, `playlists/${playlistId}/tracks`, {\n method: \"PUT\",\n body: { uris: trackUris },\n });\n return playlistId;\n}\n\nasync function findPlaylistId(user: StoredUser, name: string): Promise {\n const res = await api<{ items: { id: string; name: string }[] }>(\n user,\n \"me/playlists?limit=50\",\n );\n return res.items.find((p) => p.name === name)?.id ?? null;\n}\n","import { getPlaylistId, setPlaylistId, StoredUser } from \"./db.ts\";\nimport { api } from \"./spotify.ts\";\n\n/**\n * A radar profile is a list of named axes (0..1), built from **genres**.\n * Spotify's richer endpoints (audio-features, related-artists, browse,\n * recommendations) 403/404 for unreviewed apps, but artist objects returned by\n * /me/top and /v1/search carry genre tags, images and popularity — so those two\n * endpoints are the backbone. \"Your sound\" = the genres that dominate your\n * library; discovery = search within those genres, paged deep enough to find\n * the small acts the algorithm ignores.\n */\nexport interface Axis {\n label: string;\n value: number; // 0..1\n}\n\nexport type Profile = Axis[];\n\nexport interface DiscoveredArtist {\n id: string;\n name: string;\n images: { url: string }[];\n popularity: number;\n genres: string[];\n previewUrl: string | null;\n trackName: string;\n trackUri: string;\n match: number; // 0..1 genre overlap with the user's profile\n radar: Profile; // this artist's genre-shape against your core genres\n}\n\ninterface ArtistLike {\n id: string;\n name: string;\n images: { url: string }[];\n popularity: number;\n genres: string[];\n}\n\ninterface Track {\n id: string;\n uri: string;\n name: string;\n preview_url: string | null;\n}\n\n/**\n * The genres that dominate your library, normalized to 0..1 so the top genre\n * sits at 1.0. Six axes keeps the radar readable.\n */\nexport async function computeProfile(user: StoredUser): Promise {\n const top = await api<{ items: ArtistLike[] }>(\n user,\n \"me/top/artists?time_range=medium_term&limit=30\",\n );\n const counts = new Map();\n for (const a of top.items) {\n for (const g of a.genres ?? []) counts.set(g, (counts.get(g) ?? 0) + 1);\n }\n const ranked = [...counts.entries()].sort((a, b) => b[1] - a[1]).slice(0, 6);\n const max = ranked.length ? ranked[0][1] : 1;\n return ranked.map(([label, count]) => ({ label, value: count / max }));\n}\n\n/**\n * Discover under-discovered artists in your core genres. Search each top genre\n * across several deep page offsets (smaller acts sit far back), then filter by\n * popularity and score genre overlap with your profile.\n */\nexport async function discover(user: StoredUser, profile: Profile): Promise {\n const top = await api<{ items: { id: string }[] }>(\n user,\n \"me/top/artists?time_range=medium_term&limit=20\",\n );\n const knownTop = new Set(top.items.map((a) => a.id));\n\n // 1. Collect candidates by searching each core genre at deep offsets.\n const genres = profile.map((a) => a.label).slice(0, 3);\n const offsets = [0, 100, 200, 300];\n const pool = new Map();\n for (const g of genres) {\n for (const offset of offsets) {\n try {\n const res = await api<{ artists: { items: ArtistLike[] } }>(\n user,\n `search?q=${encodeURIComponent(`genre:\"${g}\"`)}&type=artist&limit=50&offset=${offset}`,\n );\n for (const a of res.artists.items) if (!pool.has(a.id)) pool.set(a.id, a);\n } catch {\n // keep whatever we already have; don't let one page sink the tour\n }\n }\n }\n\n // 2. Under-discovered filter (skip the algorithm's darlings).\n const candidates = [...pool.values()]\n .filter((a) => !knownTop.has(a.id))\n .filter((a) => a.popularity > 5 && a.popularity <= 45)\n .sort((a, b) => a.popularity - b.popularity)\n .slice(0, 12);\n\n // 3. Attach a representative track to each via search, then score.\n const total = profile.reduce((s, a) => s + a.value, 0) || 1;\n const results: DiscoveredArtist[] = [];\n for (const art of candidates) {\n let track: Track | null = null;\n try {\n const res = await api<{ tracks: { items: Track[] } }>(\n user,\n `search?q=${encodeURIComponent(`artist:\"${art.name}\"`)}&type=track&limit=1&market=US`,\n );\n track = res.tracks.items?.[0] ?? null;\n } catch {\n // no preview available; skip\n }\n if (!track) continue;\n\n const has = (g: string) => art.genres.includes(g);\n const radar: Profile = profile.map((a) => ({\n label: a.label,\n value: has(a.label) ? a.value : 0,\n }));\n const hit = profile.reduce((s, a) => s + (has(a.label) ? a.value : 0), 0);\n results.push({\n id: art.id,\n name: art.name,\n images: art.images,\n popularity: art.popularity,\n genres: art.genres,\n previewUrl: track.preview_url,\n trackName: track.name,\n trackUri: track.uri,\n match: hit / total,\n radar,\n });\n }\n\n results.sort((a, b) => b.match - a.match);\n return results;\n}\n\nconst PLAYLIST_NAME = \"Discovery Radar\";\n\n/** Find or create a private \"Discovery Radar\" playlist and replace its tracks. */\nexport async function updateDiscoveryPlaylist(user: StoredUser, trackUris: string[]): Promise {\n let playlistId = await findPlaylistId(user, PLAYLIST_NAME);\n if (!playlistId) {\n const created = await api<{ id: string }>(user, \"users/me/playlists\", {\n method: \"POST\",\n body: {\n name: PLAYLIST_NAME,\n description: \"Under-discovered picks generated by Discovery Radar\",\n public: false,\n },\n });\n playlistId = created.id;\n }\n await api(user, `playlists/${playlistId}/tracks`, {\n method: \"PUT\",\n body: { uris: trackUris },\n });\n return playlistId;\n}\n\nasync function findPlaylistId(user: StoredUser, name: string): Promise {\n const res = await api<{ items: { id: string; name: string }[] }>(\n user,\n \"me/playlists?limit=50\",\n );\n return res.items.find((p) => p.name === name)?.id ?? null;\n}\n","createdAt",["D",1787419421503],"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",{"_107":106,"_114":110},"org",{"_107":106,"_108":-5,"_109":110,"_19":62,"_111":112,"_113":31},"branch",{"_13":96,"_38":97,"_50":49,"_98":51,"_99":-5,"_100":-5,"_101":-5,"_102":-5,"_103":-5,"_104":52,"_105":106},"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",{"_50":51,"_38":52,"_45":324,"_54":-5,"_55":31,"_56":57,"_58":57,"_59":60,"_61":-5,"_19":62,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":70,"_71":72,"_73":74,"_75":76,"_77":325,"_79":-5,"_80":81,"_82":81,"_83":84,"_85":84,"_86":84,"_87":81,"_88":81,"_89":326,"_91":327,"_93":328,"_95":31},"tree",[205,207,215,219,220,221,222],"files",[205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222],"counts",{"_194":70,"_195":168,"_196":70,"_197":198,"_199":200},"contents",[137,138,139,140,141,142,143],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_50":188,"_38":189,"_36":190,"_146":-5,"_48":49,"_47":191,"_148":66,"_45":192,"_13":70,"_40":181,"_42":-5,"_30":31,"_153":-5,"_33":193},{"_50":183,"_38":184,"_36":185,"_146":-5,"_48":49,"_47":168,"_148":66,"_45":186,"_13":70,"_40":181,"_42":-5,"_30":31,"_153":-5,"_33":187},{"_50":177,"_38":178,"_36":179,"_146":-5,"_48":49,"_47":160,"_148":66,"_45":180,"_13":70,"_40":181,"_42":-5,"_30":31,"_153":-5,"_33":182},{"_50":171,"_38":172,"_36":173,"_146":-5,"_48":49,"_47":168,"_148":66,"_45":174,"_13":70,"_40":26,"_42":175,"_30":31,"_153":-5,"_33":176},{"_50":163,"_38":164,"_36":165,"_146":-5,"_48":49,"_47":166,"_148":31,"_45":167,"_13":168,"_40":26,"_42":169,"_30":31,"_153":-5,"_33":170},{"_50":155,"_38":156,"_36":157,"_146":-5,"_48":49,"_47":158,"_148":31,"_45":159,"_13":160,"_40":41,"_42":161,"_30":31,"_153":-5,"_33":162},{"_50":144,"_38":145,"_36":64,"_146":-5,"_48":49,"_47":147,"_148":31,"_45":149,"_13":150,"_40":151,"_42":152,"_30":31,"_153":52,"_33":154},"4411b88d-4a06-478c-9326-84c3fe141846","index.ts","parentId",17,"latest",["D",1787417658481],7,"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 picks = await discover(u, profile);\n return c.json({ profile, 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 const body = await c.req.json<{ trackUris: string[] }>();\n const playlistId = await updateDiscoveryPlaylist(u, body.trackUris ?? []);\n return c.json({ ok: true, playlistId });\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",[145],"791dc174-eba7-4f10-873d-dccd271b6a8e","diag.ts","fea639c4-9e4d-11f1-884d-1607ee4eb77e",26,["D",1787419358106],2,"import { listUsers } from \"./lib/db.ts\";\nimport { refreshTokens } from \"./lib/spotify.ts\";\n\nconst users = await listUsers();\nconst u = users[0];\nconst fresh = await refreshTokens(u.refreshToken);\nconst token = fresh.access_token;\nconst h = { authorization: `Bearer ${token}` };\n\nasync function probe(name: string, url: string) {\n const res = await fetch(\"https://api.spotify.com/v1/\" + url, { headers: h });\n const txt = await res.text();\n console.log(`${name} (${res.status}): ${txt.slice(0, 200)}`);\n}\n\nawait probe(\"recommendations\", \"recommendations?seed_genres=rock,indie&limit=10&market=US\");\nawait probe(\"batch artists\", \"artists?ids=4Z8W4fKeB5YxbusRsdQVPb,1RyvyyTE3xB2zZywiAwp0i\");\nawait probe(\"artist top-tracks\", \"artists/4Z8W4fKeB5YxbusRsdQVPb/top-tracks?market=US\");\nawait probe(\"new-releases\", \"browse/new-releases?limit=5&market=US\");\nawait probe(\"genres\", \"recommendations/available-genre-seeds\");\nawait probe(\"search genre artist\", \"search?q=genre%3Aindie&type=artist&limit=3\");\n",[156],"8c9608f5-edb4-4c44-89b3-b9af8b356f6e","README.md","01a02a62-92f6-771d-907a-b81da57860c2",18,["D",1787417669370],1,"# 🎧 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 audio features of your\ntop tracks), then walks the **related-artist graph** of the artists you already\nlove, filters to **under-discovered** acts, and shows you how close each new\nartist's sound is to yours — with a 30-second preview so you can audition in\nthe browser. Save your picks to a Spotify playlist, or let the weekly cron\nrefresh 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 tracks/artists,
related-artists, audio-features| 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- Tokens are stored per Spotify user in the val's SQLite DB and refreshed\n automatically.\n- The discovery filter keeps artists with popularity between ~5 and 45, so you\n surface smaller acts rather than the ones the algorithm already pushes.\n- The weekly cron refreshes the playlist for every connected user.\n",[164],"4fe8db74-919d-4686-9be5-883aad74c74f","CHANGELOG.md","01a02a62-92f6-771d-907a-b61ebd4f10fe",["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 · v29