🎧 Discovery Radar

\n Find under-discovered artists built from your own taste. Connect Spotify and we compute\n your sound profile, then dig deep into the genres you already love to surface smaller\n acts — showing you how close each one's sound is to yours.\n

\n \n Connect Spotify\n \n

\n );\n }\n\n const totalTracks = data ? data.picks.reduce((s, p) => s + p.tracks.length, 0) : 0;\n\n return (\n

🎧 Discovery Radar

\n {displayName && {displayName}}\n \n

\n\n {error &&

{error}

}\n\n {/* Steering controls */}\n {data && (\n

Direction

\n \n {data.genres.map((g) => (\n \n ))}\n

\n \n Obscurity: {obscurity}\n \n onObscurity(Number(e.target.value))}\n class=\"w-full accent-green-500\"\n />\n

\n safe picksultra deep\n

View

\n setView(\"constellation\")}\n >\n Constellation\n \n setView(\"grid\")}\n >\n Grid\n \n

\n \n 🌌 Explore more\n \n \n {saving ? \"Saving…\" : `Save ${totalTracks} tracks`}\n \n {savedUrl && (\n

\n \n Open your Discovery Radar playlist\n \n

\n )}\n

\n )}\n\n {data && (\n

Your sound profile

\n \n

\n {loading\n ? \"Scanning…\"\n : totalTracks > 0\n ? `Found ${data.picks.length} under-discovered artists · ${totalTracks} tracks.`\n : \"No artists came back for that direction — try a lower obscurity or a different genre.\"}\n

\n Each card's green radar is that artist's genres\n overlaid on your blue one — the more they overlap, the more your style they are.\n

\n )}\n\n {data && view === \"constellation\" && (\n \n )}\n\n {data && view === \"grid\" && (\n

\n {data.picks.map((p) => )}\n

\n )}\n

\n );\n}\n","label",[305,306,84],"frontend","components","pulls","branches","forks","envVars",{"_314":316,"_317":26},"connections",{"_314":26,"_315":26},"count","unfilledCount",3,"emptyCount",{"_49":469,"_13":468,"_82":461,"_59":-5,"_51":52,"_297":470,"_298":234,"_53":471,"_55":26,"_85":399,"_301":-5,"_87":24,"_303":-5,"_344":472,"_17":473},{"_49":458,"_13":459,"_82":460,"_59":461,"_51":52,"_297":462,"_298":234,"_53":463,"_55":397,"_85":464,"_301":465,"_87":24,"_303":-5,"_344":466,"_17":467},{"_49":454,"_13":305,"_82":405,"_59":-5,"_51":52,"_297":56,"_298":234,"_53":455,"_55":26,"_85":399,"_301":-5,"_87":24,"_303":-5,"_344":456,"_17":457},{"_49":450,"_13":306,"_82":296,"_59":405,"_51":52,"_297":56,"_298":234,"_53":451,"_55":26,"_85":399,"_301":-5,"_87":24,"_303":-5,"_344":452,"_17":453},{"_49":295,"_13":84,"_82":83,"_59":296,"_51":52,"_297":216,"_298":234,"_53":447,"_55":300,"_85":86,"_301":302,"_87":24,"_303":-5,"_344":448,"_17":449},{"_49":439,"_13":440,"_82":441,"_59":296,"_51":52,"_297":442,"_298":234,"_53":443,"_55":397,"_85":86,"_301":444,"_87":24,"_303":-5,"_344":445,"_17":446},{"_49":431,"_13":432,"_82":433,"_59":296,"_51":52,"_297":434,"_298":234,"_53":435,"_55":351,"_85":86,"_301":436,"_87":24,"_303":-5,"_344":437,"_17":438},{"_49":424,"_13":425,"_82":426,"_59":296,"_51":52,"_297":351,"_298":234,"_53":427,"_55":26,"_85":86,"_301":428,"_87":24,"_303":-5,"_344":429,"_17":430},{"_49":417,"_13":418,"_82":419,"_59":405,"_51":52,"_297":56,"_298":234,"_53":420,"_55":26,"_85":21,"_301":421,"_87":24,"_303":-5,"_344":422,"_17":423},{"_49":410,"_13":411,"_82":412,"_59":405,"_51":52,"_297":56,"_298":234,"_53":413,"_55":26,"_85":86,"_301":414,"_87":24,"_303":-5,"_344":415,"_17":416},{"_49":402,"_13":403,"_82":404,"_59":405,"_51":52,"_297":341,"_298":234,"_53":406,"_55":56,"_85":86,"_301":407,"_87":24,"_303":-5,"_344":408,"_17":409},{"_49":396,"_13":372,"_82":365,"_59":-5,"_51":52,"_297":397,"_298":234,"_53":398,"_55":26,"_85":399,"_301":-5,"_87":24,"_303":-5,"_344":400,"_17":401},{"_49":388,"_13":389,"_82":390,"_59":365,"_51":52,"_297":391,"_298":234,"_53":392,"_55":56,"_85":86,"_301":393,"_87":24,"_303":-5,"_344":394,"_17":395},{"_49":380,"_13":381,"_82":382,"_59":365,"_51":52,"_297":383,"_298":234,"_53":384,"_55":26,"_85":86,"_301":385,"_87":24,"_303":-5,"_344":386,"_17":387},{"_49":373,"_13":374,"_82":375,"_59":365,"_51":52,"_297":316,"_298":234,"_53":376,"_55":26,"_85":86,"_301":377,"_87":24,"_303":-5,"_344":378,"_17":379},{"_49":362,"_13":363,"_82":364,"_59":365,"_51":52,"_297":366,"_298":234,"_53":367,"_55":368,"_85":86,"_301":369,"_87":24,"_303":-5,"_344":370,"_17":371},{"_49":355,"_13":356,"_82":357,"_59":-5,"_51":52,"_297":56,"_298":234,"_53":358,"_55":26,"_85":21,"_301":359,"_87":24,"_303":-5,"_344":360,"_17":361},{"_49":347,"_13":348,"_82":349,"_59":-5,"_51":52,"_297":260,"_298":234,"_53":350,"_55":351,"_85":21,"_301":352,"_87":24,"_303":-5,"_344":353,"_17":354},{"_49":337,"_13":338,"_82":232,"_59":-5,"_51":52,"_297":339,"_298":234,"_53":340,"_55":341,"_85":342,"_301":343,"_87":24,"_303":14,"_344":345,"_17":346},"106246c6-5eb1-49a8-896e-0671d8647c82","index.ts",70,["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","children",[],[338],"3b240b35-7549-4e28-98dc-b0dbd93fdb6d","README.md","01a02a62-92f6-771d-907a-b81da57860c2",["D",1787421893911],7,"# 🎧 Discovery Radar\n\nA personal Spotify discovery app that breaks you out of the same 50 artists.\n\nDiscovery runs on the **Last.fm API** (open, read-only with an API key). It computes\n**your sound profile** from Last.fm genre/mood tags, then crawls the **similar-artist\ngraph** for under-discovered acts (ranked by tag-match and listener-count obscurity).\nBecause you listen on Spotify, the app maps each Last.fm track to a **real Spotify\ntrack URI** (via search) and writes your picks to a **Spotify playlist** — and the\nweekly cron keeps it fresh.\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 + Spotify API client. Used for your top artists\n (discovery seeds), mapping tracks to Spotify URIs, and writing playlists.\n- `lib/lastfm.ts` — Last.fm client: similar artists, tags, listener counts, top tracks.\n- `lib/taste.ts` — taste profile (Last.fm tags), discovery, Spotify playlist writer.\n- `lib/db.ts` — SQLite storage for per-user Spotify tokens + playlist id.\n- `frontend/` — React app with a constellation map + grid views.\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 **Last.fm API account** at \n and copy your API key.\n2. Set the Last.fm key below.\n\n👉 Add LASTFM_API_KEY here: https://www.val.town/x/test_account_001/discovery-radar/environment-variables?key=LASTFM_API_KEY\n\n3. Spotify (needed only for your listening): create a Spotify app at\n , add the redirect URI\n `https://discovery-radar.val.run/auth/callback`, and 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**, authorize, and your taste profile and\n a galaxy of discovered artists appear. Hit **Save** to write them to a\n private \"Discovery Radar\" Spotify playlist.\n\n## Notes\n\n- **Discovery = Last.fm; playlists = Spotify.** This app's Spotify grant is\n restricted (no audio-features / recommendations / browse), so discovery moved\n entirely to Last.fm's open API. Spotify read is only used for your top\n artists and for mapping tracks to URIs — and Spotify *write* (playlists)\n works fine.\n- Obscurity is driven by Last.fm **listener counts** (logged to a 0–100\n \"Popularity\").\n- The match % is tag overlap with your taste profile; the radar is your tag\n profile vs each artist's tags.\n- The weekly cron refreshes the playlist for every connected user.\n- If \"Save\" errors with \"Spotify blocked playlist access\", the token is missing\n `playlist-modify-*` scopes — disconnect and reconnect Spotify to re-consent.\n",[],[348],"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

History · App.tsx