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
2026-03-31 00:21:58 -05:00
parent 789de25c1a
commit 1eea237c08
17 changed files with 898 additions and 113 deletions
--- a/backend/alembic/versions/003_add_dislike_and_preferences.py
+++ b/backend/alembic/versions/003_add_dislike_and_preferences.py
@@ -0,0 +1,28 @@
+"""Add dislike and personalization preferences
+
+Revision ID: 003
+Revises: 002
+Create Date: 2026-03-30
+
+"""
+from typing import Sequence, Union
+
+from alembic import op
+import sqlalchemy as sa
+
+revision: str = "003"
+down_revision: Union[str, None] = "002"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+    op.add_column("recommendations", sa.Column("disliked", sa.Boolean(), default=False, nullable=False, server_default="false"))
+    op.add_column("users", sa.Column("blocked_genres", sa.Text(), nullable=True))
+    op.add_column("users", sa.Column("adventurousness", sa.Integer(), default=3, nullable=False, server_default="3"))
+
+
+def downgrade() -> None:
+    op.drop_column("recommendations", "disliked")
+    op.drop_column("users", "blocked_genres")
+    op.drop_column("users", "adventurousness")
--- a/backend/app/api/endpoints/profile.py
+++ b/backend/app/api/endpoints/profile.py
@@ -0,0 +1,200 @@
+from fastapi import APIRouter, Depends
+from sqlalchemy import select
+from sqlalchemy.ext.asyncio import AsyncSession
+
+from app.core.database import get_db
+from app.core.security import get_current_user
+from app.models.user import User
+from app.models.playlist import Playlist
+from app.models.track import Track
+
+router = APIRouter(prefix="/profile", tags=["profile"])
+
+
+def _determine_personality(
+    genre_count: int,
+    avg_energy: float,
+    avg_valence: float,
+    avg_acousticness: float,
+    energy_variance: float,
+    valence_variance: float,
+) -> dict:
+    """Assign a listening personality based on taste data."""
+
+    # High variance in energy/valence = Mood Listener
+    if energy_variance > 0.06 and valence_variance > 0.06:
+        return {
+            "label": "Mood Listener",
+            "description": "Your music shifts with your emotions. You have playlists for every feeling and aren't afraid to go from euphoric highs to contemplative lows.",
+            "icon": "drama",
+        }
+
+    # Many different genres = Genre Explorer
+    if genre_count >= 8:
+        return {
+            "label": "Genre Explorer",
+            "description": "You refuse to be put in a box. Your library is a world tour of sounds, spanning genres most listeners never discover.",
+            "icon": "globe",
+        }
+
+    # High energy = Energy Seeker
+    if avg_energy > 0.7:
+        return {
+            "label": "Energy Seeker",
+            "description": "You crave intensity. Whether it's driving beats, soaring guitars, or thundering bass, your music keeps the adrenaline flowing.",
+            "icon": "zap",
+        }
+
+    # Low energy + high acousticness = Chill Master
+    if avg_energy < 0.4 and avg_acousticness > 0.5:
+        return {
+            "label": "Chill Master",
+            "description": "You've mastered the art of the vibe. Acoustic textures and mellow grooves define your sonic world — your playlists are a warm blanket.",
+            "icon": "cloud",
+        }
+
+    # Very consistent taste, low variance = Comfort Listener
+    if energy_variance < 0.03 and valence_variance < 0.03:
+        return {
+            "label": "Comfort Listener",
+            "description": "You know exactly what you like and you lean into it. Your taste is refined, consistent, and deeply personal.",
+            "icon": "heart",
+        }
+
+    # Default: Catalog Diver
+    return {
+        "label": "Catalog Diver",
+        "description": "You dig deeper than the singles. Album tracks, B-sides, and deep cuts are your territory — you appreciate the full artistic vision.",
+        "icon": "layers",
+    }
+
+
+@router.get("/taste")
+async def get_taste_profile(
+    user: User = Depends(get_current_user),
+    db: AsyncSession = Depends(get_db),
+):
+    """Aggregate all user playlists/tracks into a full taste profile."""
+    result = await db.execute(
+        select(Playlist).where(Playlist.user_id == user.id)
+    )
+    playlists = list(result.scalars().all())
+
+    all_tracks = []
+    for p in playlists:
+        result = await db.execute(select(Track).where(Track.playlist_id == p.id))
+        all_tracks.extend(result.scalars().all())
+
+    if not all_tracks:
+        return {
+            "genre_breakdown": [],
+            "audio_features": {
+                "energy": 0,
+                "danceability": 0,
+                "valence": 0,
+                "acousticness": 0,
+                "avg_tempo": 0,
+            },
+            "personality": {
+                "label": "New Listener",
+                "description": "Import some playlists to discover your listening personality!",
+                "icon": "music",
+            },
+            "top_artists": [],
+            "track_count": 0,
+            "playlist_count": len(playlists),
+        }
+
+    # Genre breakdown
+    genres_count: dict[str, int] = {}
+    for t in all_tracks:
+        if t.genres:
+            for g in t.genres:
+                genres_count[g] = genres_count.get(g, 0) + 1
+
+    total_genre_mentions = sum(genres_count.values()) or 1
+    top_genres = sorted(genres_count.items(), key=lambda x: x[1], reverse=True)[:10]
+    genre_breakdown = [
+        {"name": g, "percentage": round((c / total_genre_mentions) * 100, 1)}
+        for g, c in top_genres
+    ]
+
+    # Audio features averages + variance
+    energies = []
+    danceabilities = []
+    valences = []
+    acousticnesses = []
+    tempos = []
+
+    for t in all_tracks:
+        if t.energy is not None:
+            energies.append(t.energy)
+        if t.danceability is not None:
+            danceabilities.append(t.danceability)
+        if t.valence is not None:
+            valences.append(t.valence)
+        if t.acousticness is not None:
+            acousticnesses.append(t.acousticness)
+        if t.tempo is not None:
+            tempos.append(t.tempo)
+
+    def avg(lst: list[float]) -> float:
+        return round(sum(lst) / len(lst), 3) if lst else 0
+
+    def variance(lst: list[float]) -> float:
+        if len(lst) < 2:
+            return 0
+        m = sum(lst) / len(lst)
+        return sum((x - m) ** 2 for x in lst) / len(lst)
+
+    avg_energy = avg(energies)
+    avg_danceability = avg(danceabilities)
+    avg_valence = avg(valences)
+    avg_acousticness = avg(acousticnesses)
+    avg_tempo = round(avg(tempos), 0)
+
+    # Personality
+    personality = _determine_personality(
+        genre_count=len(genres_count),
+        avg_energy=avg_energy,
+        avg_valence=avg_valence,
+        avg_acousticness=avg_acousticness,
+        energy_variance=variance(energies),
+        valence_variance=variance(valences),
+    )
+
+    # Top artists
+    artist_count: dict[str, int] = {}
+    for t in all_tracks:
+        artist_count[t.artist] = artist_count.get(t.artist, 0) + 1
+    top_artists_sorted = sorted(artist_count.items(), key=lambda x: x[1], reverse=True)[:8]
+
+    # Find a representative genre for each top artist
+    artist_genres: dict[str, str] = {}
+    for t in all_tracks:
+        if t.artist in dict(top_artists_sorted) and t.genres and t.artist not in artist_genres:
+            artist_genres[t.artist] = t.genres[0]
+
+    top_artists = [
+        {
+            "name": name,
+            "track_count": count,
+            "genre": artist_genres.get(name, ""),
+        }
+        for name, count in top_artists_sorted
+    ]
+
+    return {
+        "genre_breakdown": genre_breakdown,
+        "audio_features": {
+            "energy": round(avg_energy * 100),
+            "danceability": round(avg_danceability * 100),
+            "valence": round(avg_valence * 100),
+            "acousticness": round(avg_acousticness * 100),
+            "avg_tempo": avg_tempo,
+        },
+        "personality": personality,
+        "top_artists": top_artists,
+        "track_count": len(all_tracks),
+        "playlist_count": len(playlists),
+    }
--- a/backend/app/api/endpoints/recommendations.py
+++ b/backend/app/api/endpoints/recommendations.py
@@ -22,15 +22,16 @@ async def generate(
        raise HTTPException(status_code=400, detail="Provide a playlist_id or query")

    recs, remaining = await generate_recommendations(
-        db, user, playlist_id=data.playlist_id, query=data.query, bandcamp_mode=data.bandcamp_mode
+        db, user, playlist_id=data.playlist_id, query=data.query, bandcamp_mode=data.bandcamp_mode,
+        mode=data.mode, adventurousness=data.adventurousness, exclude=data.exclude,
    )

    if not recs and remaining == 0:
-        raise HTTPException(status_code=429, detail="Daily recommendation limit reached. Upgrade to Pro for unlimited.")
+        raise HTTPException(status_code=429, detail="Weekly recommendation limit reached. Upgrade to Premium for unlimited.")

    return RecommendationResponse(
        recommendations=[RecommendationItem.model_validate(r) for r in recs],
-        remaining_today=remaining,
+        remaining_this_week=remaining,
    )


@@ -75,3 +76,19 @@ async def save_recommendation(
        raise HTTPException(status_code=404, detail="Recommendation not found")
    rec.saved = not rec.saved
    return {"saved": rec.saved}
+
+
+@router.post("/{rec_id}/dislike")
+async def dislike_recommendation(
+    rec_id: int,
+    user: User = Depends(get_current_user),
+    db: AsyncSession = Depends(get_db),
+):
+    result = await db.execute(
+        select(Recommendation).where(Recommendation.id == rec_id, Recommendation.user_id == user.id)
+    )
+    rec = result.scalar_one_or_none()
+    if not rec:
+        raise HTTPException(status_code=404, detail="Recommendation not found")
+    rec.disliked = not rec.disliked
+    return {"disliked": rec.disliked}
--- a/backend/app/core/config.py
+++ b/backend/app/core/config.py
@@ -35,7 +35,7 @@ class Settings(BaseSettings):
    FRONTEND_URL: str = "http://localhost:5173"

    # Rate limits (free tier)
-    FREE_DAILY_RECOMMENDATIONS: int = 10
+    FREE_WEEKLY_RECOMMENDATIONS: int = 5
    FREE_MAX_PLAYLISTS: int = 1

    model_config = {"env_file": ".env", "extra": "ignore"}
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -2,7 +2,7 @@ from fastapi import FastAPI
 from fastapi.middleware.cors import CORSMiddleware

 from app.core.config import settings
-from app.api.endpoints import auth, bandcamp, billing, lastfm, manual_import, playlists, recommendations, youtube_music
+from app.api.endpoints import auth, bandcamp, billing, lastfm, manual_import, playlists, profile, recommendations, youtube_music

 app = FastAPI(title="Vynl API", version="1.0.0")

@@ -22,6 +22,7 @@ app.include_router(youtube_music.router, prefix="/api")
 app.include_router(manual_import.router, prefix="/api")
 app.include_router(lastfm.router, prefix="/api")
 app.include_router(bandcamp.router, prefix="/api")
+app.include_router(profile.router, prefix="/api")


@app.get("/api/health")
--- a/backend/app/models/recommendation.py
+++ b/backend/app/models/recommendation.py
@@ -29,6 +29,7 @@ class Recommendation(Base):

    # User interaction
    saved: Mapped[bool] = mapped_column(Boolean, default=False)
+    disliked: Mapped[bool] = mapped_column(Boolean, default=False, server_default="false")
    created_at: Mapped[datetime] = mapped_column(
        DateTime(timezone=True), default=lambda: datetime.now(timezone.utc)
    )
--- a/backend/app/models/user.py
+++ b/backend/app/models/user.py
@@ -22,6 +22,10 @@ class User(Base):
    stripe_customer_id: Mapped[str | None] = mapped_column(String(255), nullable=True, unique=True)
    stripe_subscription_id: Mapped[str | None] = mapped_column(String(255), nullable=True)

+    # Personalization
+    blocked_genres: Mapped[str | None] = mapped_column(Text, nullable=True)
+    adventurousness: Mapped[int] = mapped_column(default=3, server_default="3")
+
    # Spotify OAuth
    spotify_id: Mapped[str | None] = mapped_column(String(255), nullable=True, unique=True)
    spotify_access_token: Mapped[str | None] = mapped_column(Text, nullable=True)
--- a/backend/app/schemas/recommendation.py
+++ b/backend/app/schemas/recommendation.py
@@ -7,6 +7,9 @@ class RecommendationRequest(BaseModel):
    playlist_id: int | None = None
    query: str | None = None  # Manual search/request
    bandcamp_mode: bool = False  # Prioritize Bandcamp/indie artists
+    mode: str = "discover"  # discover, sonic_twin, era_bridge, deep_cuts, rising
+    adventurousness: int = 3  # 1-5
+    exclude: str | None = None  # comma-separated genres to exclude


 class RecommendationItem(BaseModel):
@@ -21,6 +24,7 @@ class RecommendationItem(BaseModel):
    reason: str
    score: float | None = None
    saved: bool = False
+    disliked: bool = False
    created_at: datetime

    model_config = {"from_attributes": True}
@@ -28,7 +32,7 @@ class RecommendationItem(BaseModel):

 class RecommendationResponse(BaseModel):
    recommendations: list[RecommendationItem]
-    remaining_today: int | None = None  # None = unlimited (pro)
+    remaining_this_week: int | None = None  # None = unlimited (pro)


 class TasteProfile(BaseModel):
--- a/backend/app/services/recommender.py
+++ b/backend/app/services/recommender.py
@@ -50,32 +50,54 @@ def build_taste_profile(tracks: list[Track]) -> dict:
    }


-async def get_daily_rec_count(db: AsyncSession, user_id: int) -> int:
-    """Count recommendations generated today for rate limiting."""
-    today_start = datetime.now(timezone.utc).replace(hour=0, minute=0, second=0, microsecond=0)
+async def get_weekly_rec_count(db: AsyncSession, user_id: int) -> int:
+    """Count recommendations generated this week (since Monday) for rate limiting."""
+    now = datetime.now(timezone.utc)
+    week_start = (now - timedelta(days=now.weekday())).replace(hour=0, minute=0, second=0, microsecond=0)
    result = await db.execute(
        select(func.count(Recommendation.id)).where(
            Recommendation.user_id == user_id,
-            Recommendation.created_at >= today_start,
+            Recommendation.created_at >= week_start,
        )
    )
    return result.scalar() or 0


+MODE_PROMPTS = {
+    "discover": "Find music they'll love. Mix well-known and underground artists.",
+    "sonic_twin": "Find underground or lesser-known artists who sound nearly identical to their favorites. Focus on artists under 100K monthly listeners who share the same sonic qualities — similar vocal style, production approach, tempo, and energy.",
+    "era_bridge": "Suggest classic artists from earlier eras who directly inspired their current favorites. Trace musical lineage — if they love Tame Impala, suggest the 70s psych rock that influenced him. Bridge eras.",
+    "deep_cuts": "Find B-sides, album tracks, rarities, and lesser-known songs from artists already in their library. Focus on tracks they probably haven't heard even from artists they already know.",
+    "rising": "Find artists with under 50K monthly listeners who match their taste. Focus on brand new, up-and-coming artists who haven't broken through yet. Think artists who just released their debut album or EP.",
+}
+
+
+def build_adventurousness_prompt(level: int) -> str:
+    if level <= 2:
+        return "Stick very close to their existing taste. Recommend artists who are very similar to what they already listen to."
+    elif level == 3:
+        return "Balance familiar and new. Mix artists similar to their taste with some that push boundaries."
+    else:
+        return "Be adventurous. Recommend artists that are different from their usual taste but share underlying qualities they'd appreciate. Push boundaries."
+
+
 async def generate_recommendations(
    db: AsyncSession,
    user: User,
    playlist_id: int | None = None,
    query: str | None = None,
    bandcamp_mode: bool = False,
+    mode: str = "discover",
+    adventurousness: int = 3,
+    exclude: str | None = None,
 ) -> tuple[list[Recommendation], int | None]:
    """Generate AI music recommendations using Claude."""

    # Rate limit check for free users
    remaining = None
    if not user.is_pro:
-        used_today = await get_daily_rec_count(db, user.id)
-        remaining = max(0, settings.FREE_DAILY_RECOMMENDATIONS - used_today)
+        used_this_week = await get_weekly_rec_count(db, user.id)
+        remaining = max(0, settings.FREE_WEEKLY_RECOMMENDATIONS - used_this_week)
        if remaining <= 0:
            return [], 0

@@ -111,6 +133,15 @@ async def generate_recommendations(
            profile = build_taste_profile(all_tracks)
            taste_context = f"Taste profile from {len(all_tracks)} tracks:\n{json.dumps(profile, indent=2)}"

+    # Load disliked artists to exclude
+    disliked_result = await db.execute(
+        select(Recommendation.artist).where(
+            Recommendation.user_id == user.id,
+            Recommendation.disliked == True,
+        )
+    )
+    disliked_artists = list({a for a in disliked_result.scalars().all()})
+
    # Build prompt
    user_request = query or "Find me music I'll love based on my taste profile. Prioritize lesser-known artists and hidden gems."

@@ -119,14 +150,39 @@ async def generate_recommendations(
    else:
        focus_instruction = "Focus on discovery - prioritize lesser-known artists, deep cuts, and hidden gems over obvious popular choices."

+    # Mode-specific instruction
+    mode_instruction = MODE_PROMPTS.get(mode, MODE_PROMPTS["discover"])
+
+    # Adventurousness instruction
+    adventurousness_instruction = build_adventurousness_prompt(adventurousness)
+
+    # Exclude genres instruction
+    exclude_instruction = ""
+    combined_exclude = exclude or ""
+    if user.blocked_genres:
+        combined_exclude = f"{user.blocked_genres}, {combined_exclude}" if combined_exclude else user.blocked_genres
+    if combined_exclude.strip():
+        exclude_instruction = f"\nDo NOT recommend anything in these genres/moods: {combined_exclude}"
+
+    # Disliked artists exclusion
+    disliked_instruction = ""
+    if disliked_artists:
+        disliked_instruction = f"\nDo NOT recommend anything by these artists (user disliked them): {', '.join(disliked_artists[:30])}"
+
    prompt = f"""You are Vynl, an AI music discovery assistant. You help people discover new music they'll love.

 {taste_context}

 User request: {user_request}

+Discovery mode: {mode_instruction}
+
+{adventurousness_instruction}
+
 Already in their library (do NOT recommend these):
 {', '.join(list(existing_tracks)[:50]) if existing_tracks else 'None provided'}
+{disliked_instruction}
+{exclude_instruction}

 Respond with exactly {"15" if bandcamp_mode else "5"} music recommendations as a JSON array. Each item should have:
 - "title": song title
--- a/frontend/src/App.tsx
+++ b/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={
--- a/frontend/src/components/Layout.tsx
+++ b/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 },
--- a/frontend/src/components/RecommendationCard.tsx
+++ b/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}
--- a/frontend/src/lib/api.ts
+++ b/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
--- a/frontend/src/pages/Billing.tsx
+++ b/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>
--- a/frontend/src/pages/Dashboard.tsx
+++ b/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>
--- a/frontend/src/pages/Discover.tsx
+++ b/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>
--- a/frontend/src/pages/TasteProfilePage.tsx
+++ b/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>
+  )
+}