From da94df01da1388f810127e2af5005882bff056e0 Mon Sep 17 00:00:00 2001
From: root <root@claude.deathstar-home.one>
Date: Tue, 31 Mar 2026 18:28:05 -0500
Subject: [PATCH] Add "More Like This" button and "Why Do I Like This?" analyze
 feature

- Add Repeat button to RecommendationCard that navigates to Discover
  with a pre-filled query for similar songs
- Read q param on Discover page to pre-fill the query field
- Add POST /api/recommendations/analyze endpoint that uses Claude to
  explain why a user likes a song and suggest similar music
- Create Analyze page with artist/title inputs, analysis card,
  quality tags, and recommendation cards
- Add Analyze nav item and /analyze route
---
 frontend/src/components/Layout.tsx |   3 +-
 frontend/src/pages/Analyze.tsx     | 205 +++++++++++++++++++++++++++++
 frontend/src/pages/Discover.tsx    |   5 +
 3 files changed, 212 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/pages/Analyze.tsx

diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 3abdf4e..b264fab 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
-import { Disc3, LayoutDashboard, Fingerprint, ListMusic, Compass, Store, Heart, Crown, Shield, Menu, X, LogOut, User } from 'lucide-react'
+import { Disc3, LayoutDashboard, Fingerprint, ListMusic, Compass, Lightbulb, Store, Heart, Crown, Shield, Menu, X, LogOut, User } from 'lucide-react'
 import { useAuth } from '../lib/auth'
 
 const ADMIN_EMAIL = 'chris.ryan@deepcutsai.com'
@@ -10,6 +10,7 @@ const baseNavItems = [
   { path: '/profile', label: 'My Taste', icon: Fingerprint },
   { path: '/playlists', label: 'Playlists', icon: ListMusic },
   { path: '/discover', label: 'Discover', icon: Compass },
+  { path: '/analyze', label: 'Analyze', icon: Lightbulb },
   { path: '/bandcamp', label: 'Bandcamp', icon: Store },
   { path: '/saved', label: 'Saved', icon: Heart },
   { path: '/billing', label: 'Pro', icon: Crown },
diff --git a/frontend/src/pages/Analyze.tsx b/frontend/src/pages/Analyze.tsx
new file mode 100644
index 0000000..0c51322
--- /dev/null
+++ b/frontend/src/pages/Analyze.tsx
@@ -0,0 +1,205 @@
+import { useState } from 'react'
+import { Lightbulb, Loader2, Sparkles } from 'lucide-react'
+import { analyzeSong, type AnalyzeResponse } from '../lib/api'
+import RecommendationCard from '../components/RecommendationCard'
+import { toggleSaveRecommendation, dislikeRecommendation } from '../lib/api'
+
+export default function Analyze() {
+  const [artist, setArtist] = useState('')
+  const [title, setTitle] = useState('')
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState('')
+  const [result, setResult] = useState<AnalyzeResponse | null>(null)
+  const [savingIds, setSavingIds] = useState<Set<string>>(new Set())
+  const [dislikingIds, setDislikingIds] = useState<Set<string>>(new Set())
+
+  const handleAnalyze = async () => {
+    if (!artist.trim() || !title.trim()) return
+    setLoading(true)
+    setError('')
+    setResult(null)
+
+    try {
+      const data = await analyzeSong(artist.trim(), title.trim())
+      setResult(data)
+    } catch (err: any) {
+      const msg = err.response?.data?.detail || err.message || 'Unknown error'
+      setError(`Error: ${msg}`)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleToggleSave = async (id: string) => {
+    const sid = String(id)
+    setSavingIds((prev) => new Set(prev).add(sid))
+    try {
+      const { saved } = await toggleSaveRecommendation(sid)
+      setResult((prev) =>
+        prev
+          ? {
+              ...prev,
+              recommendations: prev.recommendations.map((r) =>
+                String(r.id) === sid ? { ...r, saved } : r
+              ),
+            }
+          : prev
+      )
+    } catch {
+      // silent
+    } finally {
+      setSavingIds((prev) => {
+        const next = new Set(prev)
+        next.delete(sid)
+        return next
+      })
+    }
+  }
+
+  const handleDislike = async (id: string) => {
+    const sid = String(id)
+    setDislikingIds((prev) => new Set(prev).add(sid))
+    try {
+      const { disliked } = await dislikeRecommendation(sid)
+      setResult((prev) =>
+        prev
+          ? {
+              ...prev,
+              recommendations: prev.recommendations.map((r) =>
+                String(r.id) === sid ? { ...r, disliked } : r
+              ),
+            }
+          : prev
+      )
+    } catch {
+      // silent
+    } finally {
+      setDislikingIds((prev) => {
+        const next = new Set(prev)
+        next.delete(sid)
+        return next
+      })
+    }
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h1 className="text-2xl sm:text-3xl font-bold text-charcoal flex items-center gap-3">
+          <Lightbulb className="w-8 h-8 text-purple" />
+          Why Do I Like This?
+        </h1>
+        <p className="text-charcoal-muted mt-1">
+          Paste a song and discover what draws you to it, plus find similar music
+        </p>
+      </div>
+
+      {/* Input Form */}
+      <div className="bg-white rounded-2xl border border-purple-100 p-4 sm:p-6 space-y-4">
+        <div>
+          <label className="block text-sm font-medium text-charcoal mb-2">
+            Artist
+          </label>
+          <input
+            type="text"
+            value={artist}
+            onChange={(e) => setArtist(e.target.value)}
+            placeholder="e.g., Radiohead"
+            className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
+          />
+        </div>
+
+        <div>
+          <label className="block text-sm font-medium text-charcoal mb-2">
+            Song Title
+          </label>
+          <input
+            type="text"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="e.g., Everything In Its Right Place"
+            className="w-full px-4 py-3 bg-cream/50 border border-purple-100 rounded-xl text-charcoal placeholder:text-charcoal-muted/40 focus:outline-none focus:ring-2 focus:ring-purple/30 focus:border-purple transition-colors text-sm"
+          />
+        </div>
+
+        {error && (
+          <div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
+            {error}
+          </div>
+        )}
+
+        <button
+          onClick={handleAnalyze}
+          disabled={loading || !artist.trim() || !title.trim()}
+          className="w-full py-3.5 bg-gradient-to-r from-purple to-purple-dark text-white font-semibold rounded-xl hover:shadow-lg hover:shadow-purple/25 transition-all disabled:opacity-50 cursor-pointer border-none text-sm flex items-center justify-center gap-2"
+        >
+          {loading ? (
+            <>
+              <Loader2 className="w-5 h-5 animate-spin" />
+              Analyzing...
+            </>
+          ) : (
+            <>
+              <Sparkles className="w-5 h-5" />
+              Analyze
+            </>
+          )}
+        </button>
+      </div>
+
+      {/* Results */}
+      {result && (
+        <div className="space-y-6">
+          {/* Analysis Card */}
+          <div className="bg-gradient-to-br from-purple-50 to-cream rounded-2xl border border-purple-200 p-5 sm:p-6">
+            <h2 className="text-lg font-semibold text-charcoal mb-3 flex items-center gap-2">
+              <Lightbulb className="w-5 h-5 text-purple" />
+              Why You Love This
+            </h2>
+            <p className="text-charcoal leading-relaxed">{result.analysis}</p>
+          </div>
+
+          {/* Qualities */}
+          {result.qualities.length > 0 && (
+            <div>
+              <h2 className="text-lg font-semibold text-charcoal mb-3">
+                Key Qualities
+              </h2>
+              <div className="flex flex-wrap gap-2">
+                {result.qualities.map((quality, i) => (
+                  <span
+                    key={i}
+                    className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-purple-100 text-purple-700"
+                  >
+                    {quality}
+                  </span>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {/* Similar Recommendations */}
+          {result.recommendations.length > 0 && (
+            <div>
+              <h2 className="text-lg font-semibold text-charcoal mb-4">
+                Songs With the Same Qualities
+              </h2>
+              <div className="space-y-3">
+                {result.recommendations.map((rec) => (
+                  <RecommendationCard
+                    key={rec.id}
+                    recommendation={rec}
+                    onToggleSave={handleToggleSave}
+                    onDislike={handleDislike}
+                    saving={savingIds.has(String(rec.id))}
+                    disliking={dislikingIds.has(String(rec.id))}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontend/src/pages/Discover.tsx b/frontend/src/pages/Discover.tsx
index 9e71824..61a960a 100644
--- a/frontend/src/pages/Discover.tsx
+++ b/frontend/src/pages/Discover.tsx
@@ -41,6 +41,11 @@ export default function Discover() {
   const [count, setCount] = useState(5)
   const resultsRef = useRef<HTMLDivElement>(null)
 
+  useEffect(() => {
+    const preQuery = searchParams.get('q')
+    if (preQuery) setQuery(preQuery)
+  }, [searchParams])
+
   useEffect(() => {
     const load = async () => {
       try {