From ec141b32f492471ec4bb507e1be3f0a960b0c86a Mon Sep 17 00:00:00 2001
From: kami <kami@homesrv>
Date: Mon, 3 Aug 2026 14:16:26 +0400
Subject: [PATCH] feat(vibe): explain recommendation signals

---
 frontend/src/pages/Vibe.tsx | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/frontend/src/pages/Vibe.tsx b/frontend/src/pages/Vibe.tsx
index e71d4fa..32dc1bc 100644
--- a/frontend/src/pages/Vibe.tsx
+++ b/frontend/src/pages/Vibe.tsx
@@ -22,6 +22,19 @@ function sampleTracks(tracks: Track[], count: number): Track[] {
   return sampled.slice(0, count);
 }
 
+function VibeLearningHint() {
+  return (
+    <details className="rounded-lg border border-border bg-surface0 px-4 py-3 text-sm text-muted">
+      <summary className="cursor-pointer font-medium text-text">How Vibe learns</summary>
+      <div className="mt-3 space-y-2 text-xs leading-relaxed text-muted">
+        <p>Your seed track sets the first direction. From there, Vibe learns from what you finish, skip, dislike, or keep, alongside your library history and favourites.</p>
+        <p>It also avoids recent repeats and reshapes the upcoming queue as you listen.</p>
+        <p className="text-muted/70">It does not infer your location, weather, microphone input, or device activity.</p>
+      </div>
+    </details>
+  );
+}
+
 export default function Vibe() {
   const { currentTrack } = usePlaybackStore();
   const {
@@ -119,6 +132,8 @@ export default function Vibe() {
           </p>
         </header>
 
+        <VibeLearningHint />
+
         {error && (
           <div className="rounded-lg border border-red-500/40 bg-red-500/10 p-3 text-sm text-red-300">
             {error}
@@ -200,6 +215,8 @@ export default function Vibe() {
         </button>
       </header>
 
+      <VibeLearningHint />
+
       {(empty || initialBatchStatus === 'exhausted' || initialBatchStatus === 'failed') && (
         <div className="rounded-lg border border-border bg-surface0 p-4 text-sm text-muted">
           {initialBatchStatus === 'failed'