[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_110":111,"_112":113},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","test_account_001","name","discovery-radar","path","frontend/components/App.tsx","project",{"_22":49,"_11":12,"_35":50,"_51":-5,"_52":44,"_53":54,"_55":54,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":34,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":44},"file",{"_22":23,"_11":24,"_25":26,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":-5,"_13":46},"permalink","https://www.val.town/x/test_account_001/discovery-radar/code/frontend/components/App.tsx","extension","id","58b01c4e-e9d9-42f8-9d48-71421c7a3fe2","App.tsx","fileId","01a02a62-92f6-771d-907a-9ae736bbbf37","parentId","01a02a62-92f6-771d-907a-a213fe10e164","branchId","dc1f9fe4-aa8c-400d-87f3-9d22e6847153","branchVersion",76,"latest",true,"createdAt",["D",1787421199678],"version",17,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { RadarChart } from \"./RadarChart.tsx\";\nimport { ArtistCard } from \"./ArtistCard.tsx\";\nimport { ConstellationView } from \"./ConstellationView.tsx\";\n\ninterface Axis {\n label: string;\n value: number;\n}\n\ninterface TrackInfo {\n name: string;\n uri: string;\n previewUrl: string | null;\n}\n\ninterface Pick {\n id: string;\n name: string;\n images: { url: string }[];\n popularity: number;\n genres: string[];\n previewUrl: string | null;\n match: number;\n radar: Axis[];\n tracks: TrackInfo[];\n}\n\ninterface Discover {\n profile: Axis[];\n genres: string[];\n picks: Pick[];\n}\n\nfunction errMsg(x: unknown): string {\n if (typeof x === \"string\") return x;\n if (x && typeof x === \"object\") {\n const m = (x as { message?: unknown }).message;\n if (typeof m === \"string\") return m;\n return JSON.stringify(x);\n }\n return String(x);\n}\n\nexport function App() {\n const [ready, setReady] = useState(false);\n const [connected, setConnected] = useState(false);\n const [displayName, setDisplayName] = useState(\"\");\n const [data, setData] = useState(null);\n const [error, setError] = useState(null);\n const [saving, setSaving] = useState(false);\n const [savedUrl, setSavedUrl] = useState(null);\n const [obscurity, setObscurity] = useState(50);\n const [genre, setGenre] = useState(null);\n const [loading, setLoading] = useState(false);\n const [view, setView] = useState<\"constellation\" | \"grid\">(\"constellation\");\n const [seed, setSeed] = useState(() => Math.random());\n const debounceRef = useRef | null>(null);\n\n useEffect(() => () => { if (debounceRef.current) clearTimeout(debounceRef.current); }, []);\n\n async function load(g: string | null, obsc: number, sd: number) {\n setLoading(true);\n try {\n const p = new URLSearchParams();\n p.set(\"obscurity\", String(obsc / 100));\n p.set(\"seed\", String(sd));\n if (g) p.set(\"genre\", g);\n const d = await (await fetch(\"/api/discover?\" + p.toString())).json();\n if (d.error) throw new Error(errMsg(d.error));\n setData(d);\n setError(null);\n } catch (e) {\n setError((e as Error).message || \"Something went wrong\");\n } finally {\n setLoading(false);\n }\n }\n\n useEffect(() => {\n (async () => {\n try {\n const me = await (await fetch(\"/api/me\")).json();\n if (me.connected) {\n setConnected(true);\n setDisplayName(me.displayName ?? \"\");\n await load(null, 50, seed);\n }\n } catch (e) {\n console.error(e);\n setError((e as Error).message || \"Something went wrong\");\n } finally {\n setReady(true);\n }\n })();\n }, []);\n\n function onObscurity(o: number) {\n setObscurity(o);\n if (debounceRef.current) clearTimeout(debounceRef.current);\n debounceRef.current = setTimeout(() => load(genre, o, seed), 350);\n }\n function onGenre(g: string | null) {\n setGenre(g);\n load(g, obscurity, seed);\n }\n function exploreMore() {\n const s = Math.random();\n setSeed(s);\n load(genre, obscurity, s);\n }\n\n async function saveAll() {\n if (!data) return;\n setSaving(true);\n setError(null);\n try {\n const uris = data.picks.flatMap((p) => p.tracks.map((t) => t.uri)).slice(0, 100);\n const res = await fetch(\"/api/save\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ trackUris: uris }),\n });\n const json = await res.json();\n if (!res.ok || !json.ok) throw new Error(errMsg(json.error) || \"Save failed\");\n setSavedUrl(`https://open.spotify.com/playlist/${json.playlistId}`);\n } catch (e) {\n setError((e as Error).message);\n } finally {\n setSaving(false);\n }\n }\n\n const chip = (active: boolean) =>\n `px-3 py-1 rounded-full text-sm font-medium transition-colors border ${\n active\n ? \"bg-green-500 text-white border-green-500\"\n : \"bg-white text-gray-700 border-gray-300 hover:bg-gray-50\"\n } cursor-pointer`;\n\n if (!ready) {\n return

Loading…

;\n }\n\n if (!connected) {\n return (\n

🎧 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","deleted",false,"label",[47,48,24],"frontend","components","f8c773d7-7a4a-4d5b-84e7-ccf2b3929d80",["D",1787417498284],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Spotify discovery with taste radar + weekly playlist refresh","imageUrl","userId","e6d51557-2988-4ce3-bf61-63d827903a6c","pinnedFileId","01a02a62-92f6-771d-907a-be2483e744c9","pinPreview","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",{"_9":10,"_109":105},"org",{"_9":10,"_103":-5,"_104":105,"_59":60,"_106":107,"_108":44},"branch",{"_37":93,"_11":94,"_22":30,"_95":49,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":12,"_102":10},"isOwned",90,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJabHpKOGNWSmhqcWduM3VVV0xTUGlicVprayJ9","tier","free","canRestrictVals","profileImageUrl","ctx",{"_86":-5,"_143":144,"_145":146,"_147":148,"_149":44,"_150":44,"_151":44,"_152":34,"_153":-5,"_154":-7,"_155":-7,"_156":67,"_157":44,"_158":44,"_159":-5,"_160":44,"_161":44,"_162":44,"_163":-5},"ENV",{"_114":115,"_116":117,"_118":94,"_119":120,"_121":122,"_123":124,"_125":126,"_127":128,"_129":130,"_131":132,"_133":134,"_135":136,"_137":138,"_139":140,"_141":142},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]