From 3de74612458967a1912311223f60ee1fb121429e Mon Sep 17 00:00:00 2001
From: Jonathan <claude.cs@jger.nl>
Date: Sun, 12 Jul 2026 00:44:11 +0200
Subject: [PATCH] feat(discovery): /discover feed page + seed search UI + nav
 link

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 web/src/app/discover/discover-client.tsx | 143 +++++++++++++++++++++++
 web/src/app/discover/page.tsx            |  14 +++
 web/src/app/page.tsx                     |   2 +-
 3 files changed, 158 insertions(+), 1 deletion(-)
 create mode 100644 web/src/app/discover/discover-client.tsx
 create mode 100644 web/src/app/discover/page.tsx

diff --git a/web/src/app/discover/discover-client.tsx b/web/src/app/discover/discover-client.tsx
new file mode 100644
index 0000000..b9cbbf3
--- /dev/null
+++ b/web/src/app/discover/discover-client.tsx
@@ -0,0 +1,143 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+type Suggestion = {
+  id: string;
+  artistMbid: string;
+  artistName: string;
+  rgMbid: string | null;
+  album: string | null;
+  score: number;
+  seedCount: number;
+  sources: string[];
+};
+
+type Feed = { artists: Suggestion[]; albums: Suggestion[] };
+type SearchResult = {
+  seed: { mbid: string; name: string } | null;
+  similar: { mbid: string; name: string; score: number }[];
+};
+
+export function DiscoverClient() {
+  const [feed, setFeed] = useState<Feed>({ artists: [], albums: [] });
+  const [result, setResult] = useState<string | null>(null);
+  const [running, setRunning] = useState(false);
+  const [query, setQuery] = useState("");
+  const [search, setSearch] = useState<SearchResult | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const loadFeed = useCallback(async () => {
+    setFeed(await (await fetch("/api/discover")).json());
+  }, []);
+
+  useEffect(() => {
+    loadFeed();
+    fetch("/api/discover/run")
+      .then((r) => r.json())
+      .then((s: { result: string | null; requested: boolean }) => {
+        setResult(s.result);
+        setRunning(s.requested);
+      });
+  }, [loadFeed]);
+
+  useEffect(() => {
+    if (!running) return;
+    const id = setInterval(async () => {
+      const s = await (await fetch("/api/discover/run")).json();
+      setResult(s.result);
+      if (!s.requested) {
+        setRunning(false);
+        loadFeed();
+      }
+    }, 2000);
+    return () => clearInterval(id);
+  }, [running, loadFeed]);
+
+  async function discoverNow() {
+    await fetch("/api/discover/run", { method: "POST" });
+    setRunning(true);
+  }
+
+  async function runSearch(e: React.FormEvent) {
+    e.preventDefault();
+    if (!query.trim()) return;
+    setBusy(true);
+    try {
+      setSearch(await (await fetch(`/api/discover/search?artist=${encodeURIComponent(query.trim())}`)).json());
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function act(id: string, action: "follow" | "want" | "dismiss") {
+    await fetch(`/api/discover/${id}`, {
+      method: "POST",
+      headers: { "content-type": "application/json" },
+      body: JSON.stringify({ action }),
+    });
+    loadFeed();
+  }
+
+  return (
+    <div>
+      <section>
+        <button onClick={discoverNow} disabled={running}>
+          {running ? "Discovering…" : "Discover now"}
+        </button>
+        {result && <span> Last run: {result}</span>}
+      </section>
+
+      <section>
+        <h2>Seed search</h2>
+        <form onSubmit={runSearch}>
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Artist name…"
+            aria-label="Seed artist"
+          />
+          <button type="submit" disabled={busy}>Find similar</button>
+        </form>
+        {search && !search.seed && <p>No MusicBrainz match.</p>}
+        {search?.seed && (
+          <ul>
+            {search.similar.map((s) => (
+              <li key={s.mbid}>
+                {s.name} <small>({s.score.toFixed(1)})</small>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section>
+        <h2>Suggested artists ({feed.artists.length})</h2>
+        <ul>
+          {feed.artists.map((s) => (
+            <li key={s.id}>
+              <strong>{s.artistName}</strong>{" "}
+              <small>score {s.score.toFixed(2)} · {s.seedCount} seed(s) · {s.sources.join(", ")}</small>{" "}
+              <button onClick={() => act(s.id, "follow")}>Follow</button>{" "}
+              <button onClick={() => act(s.id, "dismiss")}>Dismiss</button>
+            </li>
+          ))}
+        </ul>
+      </section>
+
+      <section>
+        <h2>Suggested albums ({feed.albums.length})</h2>
+        <ul>
+          {feed.albums.map((s) => (
+            <li key={s.id}>
+              <strong>{s.album}</strong> — {s.artistName}{" "}
+              <small>score {s.score.toFixed(2)}</small>{" "}
+              <button onClick={() => act(s.id, "want")}>Want</button>{" "}
+              <button onClick={() => act(s.id, "dismiss")}>Dismiss</button>
+            </li>
+          ))}
+        </ul>
+      </section>
+    </div>
+  );
+}
diff --git a/web/src/app/discover/page.tsx b/web/src/app/discover/page.tsx
new file mode 100644
index 0000000..6990e86
--- /dev/null
+++ b/web/src/app/discover/page.tsx
@@ -0,0 +1,14 @@
+import { DiscoverClient } from "./discover-client";
+
+export default function DiscoverPage() {
+  return (
+    <main>
+      <h1>Discover</h1>
+      <p>
+        <a href="/">Home</a> · <a href="/artists">Artists</a> · <a href="/wanted">Wanted</a> ·{" "}
+        <a href="/settings">Settings</a>
+      </p>
+      <DiscoverClient />
+    </main>
+  );
+}
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 7cc5ef1..96e4e34 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -4,7 +4,7 @@ export default function Home() {
   return (
     <main>
       <h1>Lyra</h1>
-      <p><a href="/artists">Artists</a> · <a href="/wanted">Wanted</a> · <a href="/settings">Settings</a></p>
+      <p><a href="/artists">Artists</a> · <a href="/discover">Discover</a> · <a href="/wanted">Wanted</a> · <a href="/settings">Settings</a></p>
       <Queue />
     </main>
   );