Add discovery modes, personalization controls, taste profile page, updated pricing

- Discovery modes: Sonic Twin, Era Bridge, Deep Cuts, Rising Artists
- Discovery dial (Safe to Adventurous slider)
- Block genres/moods exclusion
- Thumbs down/dislike on recommendations
- My Taste page with Genre DNA breakdown, audio feature meters, listening personality
- Updated pricing: Free (5/week), Premium ($6.99/mo), Family ($12.99/mo coming soon)
- Weekly rate limiting instead of daily
- Alembic migration for new fields

frontend/src/App.tsx

@@ -11,6 +11,7 @@ import PlaylistDetail from './pages/PlaylistDetail'
 import Discover from './pages/Discover'
 import Recommendations from './pages/Recommendations'
 import Billing from './pages/Billing'
+import TasteProfilePage from './pages/TasteProfilePage'
 
 function RootRedirect() {
   const { user, loading } = useAuth()
@@ -43,6 +44,16 @@ function AppRoutes() {
           </ProtectedRoute>
         }
       />
+      <Route
+        path="/profile"
+        element={
+          <ProtectedRoute>
+            <Layout>
+              <TasteProfilePage />
+            </Layout>
+          </ProtectedRoute>
+        }
+      />
       <Route
         path="/playlists"
         element={

frontend/src/components/Layout.tsx

@@ -1,10 +1,11 @@
 import { useState } from 'react'
 import { Link, useLocation, useNavigate } from 'react-router-dom'
-import { Disc3, LayoutDashboard, ListMusic, Compass, Heart, Crown, Menu, X, LogOut, User } from 'lucide-react'
+import { Disc3, LayoutDashboard, Fingerprint, ListMusic, Compass, Heart, Crown, Menu, X, LogOut, User } from 'lucide-react'
 import { useAuth } from '../lib/auth'
 
 const navItems = [
   { path: '/dashboard', label: 'Dashboard', icon: LayoutDashboard },
+  { path: '/profile', label: 'My Taste', icon: Fingerprint },
   { path: '/playlists', label: 'Playlists', icon: ListMusic },
   { path: '/discover', label: 'Discover', icon: Compass },
   { path: '/saved', label: 'Saved', icon: Heart },

frontend/src/components/RecommendationCard.tsx

@@ -1,13 +1,15 @@
-import { Heart, ExternalLink, Music } from 'lucide-react'
+import { Heart, ExternalLink, Music, ThumbsDown } from 'lucide-react'
 import type { RecommendationItem } from '../lib/api'
 
 interface Props {
   recommendation: RecommendationItem
   onToggleSave: (id: string) => void
+  onDislike?: (id: string) => void
   saving?: boolean
+  disliking?: boolean
 }
 
-export default function RecommendationCard({ recommendation, onToggleSave, saving }: Props) {
+export default function RecommendationCard({ recommendation, onToggleSave, onDislike, saving, disliking }: Props) {
   return (
     <div className="bg-white rounded-2xl border border-purple-100 shadow-sm hover:shadow-md transition-shadow overflow-hidden">
       <div className="flex gap-4 p-5">
@@ -60,6 +62,24 @@ export default function RecommendationCard({ recommendation, onToggleSave, savin
             />
           </button>
 
+          {onDislike && (
+            <button
+              onClick={() => onDislike(recommendation.id)}
+              disabled={disliking}
+              className={`p-2 rounded-full transition-colors cursor-pointer border-none ${
+                recommendation.disliked
+                  ? 'bg-charcoal-muted/20 text-charcoal'
+                  : 'bg-gray-50 text-gray-400 hover:bg-gray-100 hover:text-charcoal-muted'
+              } ${disliking ? 'opacity-50 cursor-not-allowed' : ''}`}
+              title={recommendation.disliked ? 'Undo dislike' : 'Never recommend this type again'}
+            >
+              <ThumbsDown
+                className="w-4 h-4"
+                fill={recommendation.disliked ? 'currentColor' : 'none'}
+              />
+            </button>
+          )}
+
           {recommendation.bandcamp_url && (
             <a
               href={recommendation.bandcamp_url}

frontend/src/lib/api.ts

@@ -99,12 +99,38 @@ export interface RecommendationItem {
   bandcamp_url: string | null
   reason: string
   saved: boolean
+  disliked: boolean
   created_at: string
 }
 
 export interface RecommendationResponse {
   recommendations: RecommendationItem[]
-  remaining_today: number
+  remaining_this_week: number
+}
+
+export interface TasteProfileArtist {
+  name: string
+  track_count: number
+  genre: string
+}
+
+export interface TasteProfileResponse {
+  genre_breakdown: { name: string; percentage: number }[]
+  audio_features: {
+    energy: number
+    danceability: number
+    valence: number
+    acousticness: number
+    avg_tempo: number
+  }
+  personality: {
+    label: string
+    description: string
+    icon: string
+  }
+  top_artists: TasteProfileArtist[]
+  track_count: number
+  playlist_count: number
 }
 
 // Auth
@@ -142,11 +168,21 @@ export const importSpotifyPlaylist = (playlistId: string) =>
   api.post<PlaylistDetailResponse>('/spotify/import', { playlist_id: playlistId }).then((r) => r.data)
 
 // Recommendations
-export const generateRecommendations = (playlistId?: string, query?: string, bandcampMode?: boolean) =>
+export const generateRecommendations = (
+  playlistId?: string,
+  query?: string,
+  bandcampMode?: boolean,
+  mode?: string,
+  adventurousness?: number,
+  exclude?: string,
+) =>
   api.post<RecommendationResponse>('/recommendations/generate', {
     playlist_id: playlistId,
     query,
     bandcamp_mode: bandcampMode || false,
+    mode: mode || 'discover',
+    adventurousness: adventurousness ?? 3,
+    exclude: exclude || undefined,
   }).then((r) => r.data)
 
 export const getRecommendationHistory = () =>
@@ -158,6 +194,9 @@ export const getSavedRecommendations = () =>
 export const toggleSaveRecommendation = (id: string) =>
   api.post<{ saved: boolean }>(`/recommendations/${id}/toggle-save`).then((r) => r.data)
 
+export const dislikeRecommendation = (id: string) =>
+  api.post<{ disliked: boolean }>(`/recommendations/${id}/dislike`).then((r) => r.data)
+
 // YouTube Music Import
 export interface YouTubeTrackResult {
   title: string
@@ -239,4 +278,8 @@ export async function getBandcampEmbed(url: string): Promise<BandcampEmbed> {
   return data
 }
 
+// Taste Profile
+export const getTasteProfile = () =>
+  api.get<TasteProfileResponse>('/profile/taste').then((r) => r.data)
+
 export default api

frontend/src/pages/Billing.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Crown, Check, Loader2, ExternalLink, Sparkles, Music, Infinity, Download } from 'lucide-react'
+import { Crown, Check, Loader2, ExternalLink, Sparkles, Music, Infinity, Download, Users, Fingerprint, X } from 'lucide-react'
 import { useAuth } from '../lib/auth'
 import { createCheckout, createBillingPortal, getBillingStatus } from '../lib/api'
 
@@ -10,11 +10,36 @@ interface BillingInfo {
   current_period_end: number | null
 }
 
-const proFeatures = [
-  { icon: Infinity, text: 'Unlimited recommendations per day' },
-  { icon: Music, text: 'Unlimited playlist imports' },
-  { icon: Sparkles, text: 'Advanced taste analysis' },
-  { icon: Download, text: 'Export playlists to any platform' },
+interface TierFeature {
+  text: string
+  included: boolean
+}
+
+const freeTierFeatures: TierFeature[] = [
+  { text: '1 platform sync', included: true },
+  { text: '5 discoveries per week', included: true },
+  { text: 'Basic taste profile', included: true },
+  { text: 'All platforms', included: false },
+  { text: 'Unlimited discovery', included: false },
+  { text: 'Full AI insights', included: false },
+  { text: 'Export playlists', included: false },
+]
+
+const premiumTierFeatures: TierFeature[] = [
+  { text: 'All platform syncs', included: true },
+  { text: 'Unlimited discovery', included: true },
+  { text: 'Full taste DNA profile', included: true },
+  { text: 'Full AI insights & explanations', included: true },
+  { text: 'Export to any platform', included: true },
+  { text: 'All discovery modes', included: true },
+  { text: 'Priority recommendations', included: true },
+]
+
+const familyTierFeatures: TierFeature[] = [
+  { text: 'Everything in Premium', included: true },
+  { text: 'Up to 5 profiles', included: true },
+  { text: 'Family taste overlap feature', included: true },
+  { text: 'Shared discovery feed', included: true },
 ]
 
 export default function Billing() {
@@ -72,15 +97,15 @@ export default function Billing() {
   const isPro = billing?.is_pro || false
 
   return (
-    <div className="max-w-2xl mx-auto">
+    <div className="max-w-4xl mx-auto">
       <div className="mb-8">
-        <h1 className="text-3xl font-bold text-charcoal">Billing</h1>
-        <p className="text-charcoal-muted mt-1">Manage your subscription</p>
+        <h1 className="text-3xl font-bold text-charcoal">Plans & Pricing</h1>
+        <p className="text-charcoal-muted mt-1">Choose the plan that fits your music discovery journey</p>
       </div>
 
       {success && (
         <div className="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl">
-          <p className="text-green-800 font-medium">Welcome to Vynl Pro! Your subscription is now active.</p>
+          <p className="text-green-800 font-medium">Welcome to Vynl Premium! Your subscription is now active.</p>
         </div>
       )}
 
@@ -90,90 +115,165 @@ export default function Billing() {
         </div>
       )}
 
-      {/* Current Plan */}
-      <div className="bg-white rounded-2xl border border-purple-100 overflow-hidden">
-        <div className="p-6 border-b border-purple-50">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <div className={`w-10 h-10 rounded-xl flex items-center justify-center ${isPro ? 'bg-purple' : 'bg-purple-50'}`}>
-                <Crown className={`w-5 h-5 ${isPro ? 'text-white' : 'text-purple'}`} />
-              </div>
-              <div>
-                <h2 className="text-lg font-semibold text-charcoal">
-                  {isPro ? 'Vynl Pro' : 'Free Plan'}
-                </h2>
-                <p className="text-sm text-charcoal-muted">
-                  {isPro ? '$4.99/month' : '10 recommendations/day, 1 playlist'}
-                </p>
-              </div>
+      {/* Active subscription banner */}
+      {isPro && billing?.subscription_status && (
+        <div className="mb-6 p-4 bg-purple-50 border border-purple-200 rounded-xl flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl bg-purple flex items-center justify-center">
+              <Crown className="w-5 h-5 text-white" />
             </div>
-            {isPro && billing?.subscription_status && (
-              <span className="px-3 py-1 bg-green-50 text-green-700 text-sm font-medium rounded-full">
-                {billing.subscription_status === 'active' ? 'Active' : billing.subscription_status}
-              </span>
+            <div>
+              <p className="text-sm font-semibold text-charcoal">Vynl Premium Active</p>
+              {billing.current_period_end && (
+                <p className="text-xs text-charcoal-muted">
+                  Next billing: {new Date(billing.current_period_end * 1000).toLocaleDateString()}
+                </p>
+              )}
+            </div>
+          </div>
+          <button
+            onClick={handleManage}
+            disabled={portalLoading}
+            className="flex items-center gap-2 px-4 py-2 bg-white border border-purple-200 text-purple text-sm font-medium rounded-xl hover:bg-purple-50 transition-colors cursor-pointer disabled:opacity-50"
+          >
+            {portalLoading ? (
+              <Loader2 className="w-4 h-4 animate-spin" />
+            ) : (
+              <>
+                <ExternalLink className="w-4 h-4" />
+                Manage
+              </>
+            )}
+          </button>
+        </div>
+      )}
+
+      {/* Pricing Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-5">
+        {/* Free Tier */}
+        <div className="bg-white rounded-2xl border border-purple-100 overflow-hidden flex flex-col">
+          <div className="p-6 border-b border-purple-50">
+            <div className="flex items-center gap-2 mb-3">
+              <Music className="w-5 h-5 text-charcoal-muted" />
+              <h3 className="text-lg font-semibold text-charcoal">Free</h3>
+            </div>
+            <div className="flex items-baseline gap-1">
+              <span className="text-3xl font-bold text-charcoal">$0</span>
+              <span className="text-sm text-charcoal-muted">/month</span>
+            </div>
+            <p className="text-sm text-charcoal-muted mt-2">
+              Get started with basic music discovery
+            </p>
+          </div>
+          <div className="p-6 flex-1">
+            <ul className="space-y-3">
+              {freeTierFeatures.map((f) => (
+                <li key={f.text} className="flex items-start gap-2.5">
+                  {f.included ? (
+                    <Check className="w-4 h-4 text-green-500 mt-0.5 flex-shrink-0" />
+                  ) : (
+                    <X className="w-4 h-4 text-charcoal-muted/30 mt-0.5 flex-shrink-0" />
+                  )}
+                  <span className={`text-sm ${f.included ? 'text-charcoal' : 'text-charcoal-muted/50'}`}>
+                    {f.text}
+                  </span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="p-6 pt-0">
+            <div className="w-full py-3 bg-cream text-charcoal-muted font-medium rounded-xl text-sm text-center">
+              {isPro ? 'Previous plan' : 'Current plan'}
+            </div>
+          </div>
+        </div>
+
+        {/* Premium Tier — Recommended */}
+        <div className="bg-white rounded-2xl border-2 border-purple shadow-lg shadow-purple/10 overflow-hidden flex flex-col relative">
+          <div className="absolute top-0 left-0 right-0 bg-purple text-white text-xs font-semibold text-center py-1.5 uppercase tracking-wider">
+            Recommended
+          </div>
+          <div className="p-6 border-b border-purple-50 pt-10">
+            <div className="flex items-center gap-2 mb-3">
+              <Sparkles className="w-5 h-5 text-purple" />
+              <h3 className="text-lg font-semibold text-charcoal">Premium</h3>
+            </div>
+            <div className="flex items-baseline gap-1">
+              <span className="text-3xl font-bold text-charcoal">$6.99</span>
+              <span className="text-sm text-charcoal-muted">/month</span>
+            </div>
+            <p className="text-sm text-charcoal-muted mt-2">
+              Unlock the full power of AI music discovery
+            </p>
+          </div>
+          <div className="p-6 flex-1">
+            <ul className="space-y-3">
+              {premiumTierFeatures.map((f) => (
+                <li key={f.text} className="flex items-start gap-2.5">
+                  <Check className="w-4 h-4 text-purple mt-0.5 flex-shrink-0" />
+                  <span className="text-sm text-charcoal">{f.text}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="p-6 pt-0">
+            {isPro ? (
+              <div className="w-full py-3 bg-purple/10 text-purple font-semibold rounded-xl text-sm text-center flex items-center justify-center gap-2">
+                <Check className="w-4 h-4" />
+                Your current plan
+              </div>
+            ) : (
+              <button
+                onClick={handleUpgrade}
+                disabled={checkoutLoading}
+                className="w-full flex items-center justify-center gap-2 py-3 bg-purple text-white font-semibold rounded-xl hover:bg-purple-dark transition-colors cursor-pointer disabled:opacity-50 border-none text-sm"
+              >
+                {checkoutLoading ? (
+                  <Loader2 className="w-5 h-5 animate-spin" />
+                ) : (
+                  <>
+                    <Crown className="w-4 h-4" />
+                    Upgrade to Premium
+                  </>
+                )}
+              </button>
             )}
           </div>
-          {isPro && billing?.current_period_end && (
-            <p className="text-sm text-charcoal-muted mt-3">
-              Next billing date: {new Date(billing.current_period_end * 1000).toLocaleDateString()}
+        </div>
+
+        {/* Family Tier — Coming Soon */}
+        <div className="bg-white rounded-2xl border border-purple-100 overflow-hidden flex flex-col opacity-80">
+          <div className="p-6 border-b border-purple-50">
+            <div className="flex items-center gap-2 mb-3">
+              <Users className="w-5 h-5 text-charcoal-muted" />
+              <h3 className="text-lg font-semibold text-charcoal">Family</h3>
+              <span className="ml-auto px-2 py-0.5 bg-amber-50 text-amber-700 text-xs font-medium rounded-full">
+                Coming Soon
+              </span>
+            </div>
+            <div className="flex items-baseline gap-1">
+              <span className="text-3xl font-bold text-charcoal">$12.99</span>
+              <span className="text-sm text-charcoal-muted">/month</span>
+            </div>
+            <p className="text-sm text-charcoal-muted mt-2">
+              Share discovery with up to 5 family members
             </p>
-          )}
-        </div>
-
-        {/* Pro Features */}
-        <div className="p-6">
-          <h3 className="text-sm font-semibold text-charcoal uppercase tracking-wider mb-4">
-            {isPro ? 'Your Pro features' : 'Upgrade to Pro'}
-          </h3>
-          <div className="space-y-3">
-            {proFeatures.map((feature) => {
-              const Icon = feature.icon
-              return (
-                <div key={feature.text} className="flex items-center gap-3">
-                  <div className="w-8 h-8 rounded-lg bg-purple-50 flex items-center justify-center flex-shrink-0">
-                    <Icon className="w-4 h-4 text-purple" />
-                  </div>
-                  <span className="text-sm text-charcoal">{feature.text}</span>
-                  {isPro && <Check className="w-4 h-4 text-green-500 ml-auto" />}
-                </div>
-              )
-            })}
           </div>
-        </div>
-
-        {/* Action */}
-        <div className="p-6 bg-purple-50/50 border-t border-purple-100">
-          {isPro ? (
-            <button
-              onClick={handleManage}
-              disabled={portalLoading}
-              className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-white border border-purple-200 text-purple font-semibold rounded-xl hover:bg-purple-50 transition-colors cursor-pointer disabled:opacity-50"
-            >
-              {portalLoading ? (
-                <Loader2 className="w-5 h-5 animate-spin" />
-              ) : (
-                <>
-                  <ExternalLink className="w-4 h-4" />
-                  Manage Subscription
-                </>
-              )}
-            </button>
-          ) : (
-            <button
-              onClick={handleUpgrade}
-              disabled={checkoutLoading}
-              className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-purple text-white font-semibold rounded-xl hover:bg-purple-dark transition-colors cursor-pointer disabled:opacity-50"
-            >
-              {checkoutLoading ? (
-                <Loader2 className="w-5 h-5 animate-spin" />
-              ) : (
-                <>
-                  <Crown className="w-4 h-4" />
-                  Upgrade to Pro — $4.99/mo
-                </>
-              )}
-            </button>
-          )}
+          <div className="p-6 flex-1">
+            <ul className="space-y-3">
+              {familyTierFeatures.map((f) => (
+                <li key={f.text} className="flex items-start gap-2.5">
+                  <Check className="w-4 h-4 text-charcoal-muted/50 mt-0.5 flex-shrink-0" />
+                  <span className="text-sm text-charcoal-muted">{f.text}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+          <div className="p-6 pt-0">
+            <div className="w-full py-3 bg-cream text-charcoal-muted font-medium rounded-xl text-sm text-center">
+              Coming soon
+            </div>
+          </div>
         </div>
       </div>
     </div>

frontend/src/pages/Dashboard.tsx

@@ -119,10 +119,10 @@ export default function Dashboard() {
             </div>
             <div>
               <p className="text-2xl font-bold text-charcoal">
-                {user?.daily_recommendations_remaining ?? 10}
+                {user?.daily_recommendations_remaining ?? 5}
               </p>
               <p className="text-sm text-charcoal-muted">
-                Recommendations left today
+                Discoveries left this week
               </p>
             </div>
           </div>

frontend/src/pages/Discover.tsx

@@ -1,10 +1,26 @@
 import { useState, useEffect } from 'react'
 import { useSearchParams } from 'react-router-dom'
-import { Compass, Sparkles, Loader2, ListMusic, Search } from 'lucide-react'
+import { Compass, Sparkles, Loader2, ListMusic, Search, Users, Clock, Disc3, TrendingUp } from 'lucide-react'
 import { useAuth } from '../lib/auth'
-import { getPlaylists, generateRecommendations, toggleSaveRecommendation, type PlaylistResponse, type RecommendationItem } from '../lib/api'
+import { getPlaylists, generateRecommendations, toggleSaveRecommendation, dislikeRecommendation, type PlaylistResponse, type RecommendationItem } from '../lib/api'
 import RecommendationCard from '../components/RecommendationCard'
 
+const DISCOVERY_MODES = [
+  { id: 'discover', label: 'Discover', icon: Compass, description: 'General recommendations' },
+  { id: 'sonic_twin', label: 'Sonic Twin', icon: Users, description: 'Underground artists who sound like your favorites' },
+  { id: 'era_bridge', label: 'Era Bridge', icon: Clock, description: 'Classic artists who inspired your favorites' },
+  { id: 'deep_cuts', label: 'Deep Cuts', icon: Disc3, description: 'B-sides and rarities from artists you know' },
+  { id: 'rising', label: 'Rising', icon: TrendingUp, description: 'Under 50K listeners who fit your profile' },
+] as const
+
+const ADVENTUROUSNESS_LABELS: Record<number, string> = {
+  1: 'Safe',
+  2: 'Familiar',
+  3: 'Balanced',
+  4: 'Exploring',
+  5: 'Adventurous',
+}
+
 export default function Discover() {
   const { user } = useAuth()
   const [searchParams] = useSearchParams()
@@ -18,6 +34,10 @@ export default function Discover() {
   const [error, setError] = useState('')
   const [bandcampMode, setBandcampMode] = useState(false)
   const [savingIds, setSavingIds] = useState<Set<string>>(new Set())
+  const [dislikingIds, setDislikingIds] = useState<Set<string>>(new Set())
+  const [mode, setMode] = useState('discover')
+  const [adventurousness, setAdventurousness] = useState(3)
+  const [excludeGenres, setExcludeGenres] = useState('')
 
   useEffect(() => {
     const load = async () => {
@@ -47,10 +67,13 @@ export default function Discover() {
       const response = await generateRecommendations(
         selectedPlaylist || undefined,
         query.trim() || undefined,
-        bandcampMode
+        bandcampMode,
+        mode,
+        adventurousness,
+        excludeGenres.trim() || undefined,
       )
       setResults(response.recommendations)
-      setRemaining(response.remaining_today)
+      setRemaining(response.remaining_this_week)
     } catch (err: any) {
       setError(
         err.response?.data?.detail || 'Failed to generate recommendations. Please try again.'
@@ -78,6 +101,24 @@ export default function Discover() {
     }
   }
 
+  const handleDislike = async (id: string) => {
+    setDislikingIds((prev) => new Set(prev).add(id))
+    try {
+      const { disliked } = await dislikeRecommendation(id)
+      setResults((prev) =>
+        prev.map((r) => (r.id === id ? { ...r, disliked } : r))
+      )
+    } catch {
+      // silent
+    } finally {
+      setDislikingIds((prev) => {
+        const next = new Set(prev)
+        next.delete(id)
+        return next
+      })
+    }
+  }
+
   if (loading) {
     return (
       <div className="flex items-center justify-center py-20">
@@ -98,6 +139,25 @@ export default function Discover() {
         </p>
       </div>
 
+      {/* Discovery Modes */}
+      <div className="flex flex-wrap gap-2">
+        {DISCOVERY_MODES.map(({ id, label, icon: Icon, description }) => (
+          <button
+            key={id}
+            onClick={() => setMode(id)}
+            className={`inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-sm font-medium transition-all cursor-pointer border ${
+              mode === id
+                ? 'bg-purple text-white border-purple shadow-md shadow-purple/20'
+                : 'bg-white text-charcoal-muted border-purple-100 hover:border-purple/30 hover:text-charcoal'
+            }`}
+            title={description}
+          >
+            <Icon className="w-4 h-4" />
+            {label}
+          </button>
+        ))}
+      </div>
+
       {/* Discovery Form */}
       <div className="bg-white rounded-2xl border border-purple-100 p-6 space-y-5">
         {/* Playlist Selector */}
@@ -135,6 +195,46 @@ export default function Discover() {
           />
         </div>
 
+        {/* Discovery Dial */}
+        <div>
+          <label className="block text-sm font-medium text-charcoal mb-3">
+            Discovery dial
+            <span className="ml-2 text-charcoal-muted font-normal">
+              — {ADVENTUROUSNESS_LABELS[adventurousness]}
+            </span>
+          </label>
+          <div className="relative">
+            <input
+              type="range"
+              min={1}
+              max={5}
+              step={1}
+              value={adventurousness}
+              onChange={(e) => setAdventurousness(Number(e.target.value))}
+              className="w-full h-2 bg-purple-100 rounded-full appearance-none cursor-pointer accent-purple"
+            />
+            <div className="flex justify-between mt-1.5 px-0.5">
+              <span className="text-xs text-charcoal-muted">Safe</span>
+              <span className="text-xs text-charcoal-muted">Balanced</span>
+              <span className="text-xs text-charcoal-muted">Adventurous</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Block Genres */}
+        <div>
+          <label className="block text-sm font-medium text-charcoal mb-2">
+            Exclude genres / moods
+          </label>
+          <input
+            type="text"
+            value={excludeGenres}
+            onChange={(e) => setExcludeGenres(e.target.value)}
+            placeholder="country, sad songs, metal"
+            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>
+
         {/* Bandcamp Mode Toggle */}
         <div className="flex items-center gap-3">
           <button
@@ -160,7 +260,7 @@ export default function Discover() {
         {!user?.is_pro && (
           <p className="text-xs text-charcoal-muted flex items-center gap-1">
             <Sparkles className="w-3 h-3 text-amber-500" />
-            {remaining !== null ? remaining : user?.daily_recommendations_remaining ?? 10} recommendations remaining today
+            {remaining !== null ? remaining : user?.daily_recommendations_remaining ?? 5} discoveries remaining this week
           </p>
         )}
 
@@ -201,7 +301,9 @@ export default function Discover() {
                 key={rec.id}
                 recommendation={rec}
                 onToggleSave={handleToggleSave}
+                onDislike={handleDislike}
                 saving={savingIds.has(rec.id)}
+                disliking={dislikingIds.has(rec.id)}
               />
             ))}
           </div>

frontend/src/pages/TasteProfilePage.tsx

@@ -0,0 +1,197 @@
+import { useState, useEffect } from 'react'
+import { Loader2, Fingerprint, Zap, Music2, CloudSun, Heart, Layers, Globe, Drama, User } from 'lucide-react'
+import { getTasteProfile, type TasteProfileResponse } from '../lib/api'
+
+const personalityIcons: Record<string, typeof Zap> = {
+  zap: Zap,
+  cloud: CloudSun,
+  heart: Heart,
+  layers: Layers,
+  globe: Globe,
+  drama: Drama,
+  music: Music2,
+}
+
+const genreBarColors = [
+  'bg-[#7C3AED]',
+  'bg-[#8B5CF6]',
+  'bg-[#9F6FFB]',
+  'bg-[#A78BFA]',
+  'bg-[#B49BFC]',
+  'bg-[#C4ABFD]',
+  'bg-[#D3BCFE]',
+  'bg-[#DDD6FE]',
+  'bg-[#E8DFFE]',
+  'bg-[#F0EAFF]',
+]
+
+export default function TasteProfilePage() {
+  const [profile, setProfile] = useState<TasteProfileResponse | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    getTasteProfile()
+      .then(setProfile)
+      .catch(() => setProfile(null))
+      .finally(() => setLoading(false))
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <Loader2 className="w-8 h-8 text-purple animate-spin" />
+      </div>
+    )
+  }
+
+  if (!profile) {
+    return (
+      <div className="text-center py-20">
+        <p className="text-charcoal-muted">Could not load your taste profile.</p>
+      </div>
+    )
+  }
+
+  const PersonalityIcon = personalityIcons[profile.personality.icon] || Music2
+  const maxGenrePercent = profile.genre_breakdown.length > 0
+    ? Math.max(...profile.genre_breakdown.map((g) => g.percentage))
+    : 100
+
+  return (
+    <div className="space-y-8 max-w-3xl mx-auto">
+      {/* Header */}
+      <div>
+        <h1 className="text-3xl font-bold text-charcoal flex items-center gap-3">
+          <Fingerprint className="w-8 h-8 text-purple" />
+          My Taste DNA
+        </h1>
+        <p className="text-charcoal-muted mt-1">
+          Your musical identity, decoded from {profile.track_count} tracks across {profile.playlist_count} playlists
+        </p>
+      </div>
+
+      {/* Listening Personality */}
+      <div className="bg-gradient-to-br from-purple to-purple-dark rounded-2xl p-8 text-white">
+        <div className="flex items-start gap-4">
+          <div className="w-14 h-14 rounded-2xl bg-white/15 flex items-center justify-center flex-shrink-0">
+            <PersonalityIcon className="w-7 h-7 text-white" />
+          </div>
+          <div>
+            <p className="text-purple-200 text-xs font-semibold uppercase tracking-wider mb-1">
+              Your Listening Personality
+            </p>
+            <h2 className="text-2xl font-bold mb-2">{profile.personality.label}</h2>
+            <p className="text-purple-100 text-sm leading-relaxed">
+              {profile.personality.description}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Genre DNA */}
+      <div className="bg-white rounded-2xl border border-purple-100 p-6">
+        <h2 className="text-lg font-semibold text-charcoal mb-5">Genre DNA</h2>
+        {profile.genre_breakdown.length === 0 ? (
+          <p className="text-charcoal-muted text-sm">
+            No genre data yet. Import playlists with Spotify to see your genre breakdown.
+          </p>
+        ) : (
+          <div className="space-y-3">
+            {profile.genre_breakdown.map((genre, i) => (
+              <div key={genre.name} className="flex items-center gap-3">
+                <span className="text-sm text-charcoal w-28 truncate text-right flex-shrink-0 font-medium">
+                  {genre.name}
+                </span>
+                <div className="flex-1 bg-purple-50 rounded-full h-6 overflow-hidden">
+                  <div
+                    className={`h-full rounded-full ${genreBarColors[i] || genreBarColors[genreBarColors.length - 1]} transition-all duration-700 ease-out flex items-center justify-end pr-2`}
+                    style={{ width: `${(genre.percentage / maxGenrePercent) * 100}%`, minWidth: '2rem' }}
+                  >
+                    <span className="text-xs font-semibold text-white drop-shadow-sm">
+                      {genre.percentage}%
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Audio Feature Radar */}
+      <div className="bg-white rounded-2xl border border-purple-100 p-6">
+        <h2 className="text-lg font-semibold text-charcoal mb-5">Audio Features</h2>
+        <div className="space-y-4">
+          <AudioMeter label="Energy" value={profile.audio_features.energy} />
+          <AudioMeter label="Danceability" value={profile.audio_features.danceability} />
+          <AudioMeter label="Mood / Valence" value={profile.audio_features.valence} />
+          <AudioMeter label="Acousticness" value={profile.audio_features.acousticness} />
+          <div className="flex items-center gap-3 pt-2 border-t border-purple-50">
+            <span className="text-sm text-charcoal w-28 text-right flex-shrink-0 font-medium">
+              Avg Tempo
+            </span>
+            <div className="flex-1 flex items-center gap-2">
+              <span className="text-2xl font-bold text-purple">{profile.audio_features.avg_tempo}</span>
+              <span className="text-sm text-charcoal-muted">BPM</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Top Artists */}
+      <div className="bg-white rounded-2xl border border-purple-100 p-6">
+        <h2 className="text-lg font-semibold text-charcoal mb-5">Artists That Define You</h2>
+        {profile.top_artists.length === 0 ? (
+          <p className="text-charcoal-muted text-sm">
+            Import playlists to see your defining artists.
+          </p>
+        ) : (
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+            {profile.top_artists.map((artist) => (
+              <div
+                key={artist.name}
+                className="flex items-center gap-3 p-3 rounded-xl bg-cream/60 border border-purple-50"
+              >
+                <div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center flex-shrink-0">
+                  <User className="w-5 h-5 text-purple" />
+                </div>
+                <div className="min-w-0">
+                  <p className="text-sm font-semibold text-charcoal truncate">{artist.name}</p>
+                  <p className="text-xs text-charcoal-muted">
+                    {artist.track_count} track{artist.track_count !== 1 ? 's' : ''}
+                    {artist.genre ? ` · ${artist.genre}` : ''}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function AudioMeter({ label, value }: { label: string; value: number }) {
+  return (
+    <div className="flex items-center gap-3">
+      <span className="text-sm text-charcoal w-28 text-right flex-shrink-0 font-medium">
+        {label}
+      </span>
+      <div className="flex-1 bg-purple-50 rounded-full h-5 overflow-hidden">
+        <div
+          className="h-full rounded-full bg-gradient-to-r from-[#7C3AED] to-[#A78BFA] transition-all duration-700 ease-out flex items-center justify-end pr-2"
+          style={{ width: `${value}%`, minWidth: value > 0 ? '1.5rem' : '0' }}
+        >
+          {value > 10 && (
+            <span className="text-xs font-semibold text-white drop-shadow-sm">
+              {value}%
+            </span>
+          )}
+        </div>
+      </div>
+      {value <= 10 && (
+        <span className="text-xs font-medium text-charcoal-muted w-10">{value}%</span>
+      )}
+    </div>
+  )
+}