refactor(vibe): make profile aura ambient

frontend/src/components/VibeAura.tsx

@@ -17,8 +17,8 @@ function describeProfile(energy: number, novelty: number) {
   return { energyLabel, discoveryLabel };
 }
 
-/** A small, ambient representation of the live recommendation profile. */
-export function VibeAura({ profile }: { profile: VibeProfile }) {
+/** An ambient representation of the live recommendation profile. */
+export function VibeAura({ profile, ambient = false }: { profile: VibeProfile; ambient?: boolean }) {
   const energy = clamp(profile.energy, 0.5);
   const novelty = clamp(profile.noveltyHunger ?? profile.explorationCoefficient, 0.3);
   const { energyLabel, discoveryLabel } = describeProfile(energy, novelty);
@@ -32,10 +32,12 @@ export function VibeAura({ profile }: { profile: VibeProfile }) {
 
   return (
     <div
-      className="group relative grid h-16 w-16 shrink-0 place-items-center rounded-full focus:outline-none"
+      className={ambient
+        ? 'pointer-events-none absolute right-10 top-32 z-0 grid h-16 w-16 scale-[3.6] place-items-center rounded-full opacity-35'
+        : 'group relative grid h-16 w-16 shrink-0 place-items-center rounded-full focus:outline-none'}
       style={style}
       role="img"
-      tabIndex={0}
+      tabIndex={ambient ? -1 : 0}
       aria-label={`Current Vibe: ${energyLabel} energy and ${discoveryLabel} discovery`}
     >
       <div className="vibe-aura-halo" />
@@ -46,10 +48,12 @@ export function VibeAura({ profile }: { profile: VibeProfile }) {
         <span className="vibe-aura-spark vibe-aura-spark-two" />
         <span className="vibe-aura-heart" />
       </div>
-      <div className="pointer-events-none absolute right-0 top-[calc(100%+0.4rem)] z-10 w-44 rounded-md border border-border bg-surface1 px-3 py-2 text-xs leading-relaxed text-muted opacity-0 shadow-xl transition-opacity group-hover:opacity-100 group-focus:opacity-100">
-        <span className="block font-medium text-text">Your Vibe is {energyLabel}</span>
-        <span>Leaning {discoveryLabel}; it shifts as you listen.</span>
-      </div>
+      {!ambient && (
+        <div className="pointer-events-none absolute right-0 top-[calc(100%+0.4rem)] z-10 w-44 rounded-md border border-border bg-surface1 px-3 py-2 text-xs leading-relaxed text-muted opacity-0 shadow-xl transition-opacity group-hover:opacity-100 group-focus:opacity-100">
+          <span className="block font-medium text-text">Your Vibe is {energyLabel}</span>
+          <span>Leaning {discoveryLabel}; it shifts as you listen.</span>
+        </div>
+      )}
     </div>
   );
 }