feat(web): My Wave button, mood picker and endless wave playback (M4)

- WaveButton: TypeScript port of the prototype's canvas animation
  (orb and liquid), breathing at rest, pulsing to the track's BPM and
  energy in the cover palette, following the cursor, pressing with a
  spring; reduced motion and hidden tabs slow or stop it
- home: the wave in the centre with activity and mood chips; changing
  them while playing rebuilds the upcoming tracks without stopping
- player wave mode: asks for the next batch when two tracks are left,
  sends complete / skip / early skip / like / dislike as feedback and
  refreshes the queue right after a reaction or an early skip
- tracks expose bpm, energy and loudness once analysed; library page
  shows analysis progress and 7-day wave metrics; wave style setting

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

apps/web/src/player/player.ts

@@ -11,7 +11,23 @@ import {
 
 export type { PlayContext, Track };
 
+export interface WaveInfo {
+  sessionId: string;
+  activity: string | null;
+  mood: string | null;
+  /** Рекомендатель недоступен — играет запасная волна. */
+  fallback: boolean;
+}
+
+type WaveOutcome = 'complete' | 'skip' | 'skip_early' | 'like' | 'dislike';
+
+/** Когда в очереди волны остаётся столько треков, просим следующую пачку. */
+const WAVE_REFILL_AT = 2;
+/** Скип раньше этого — «ранний» (сильный отрицательный сигнал). */
+const EARLY_SKIP_MS = 30_000;
+
 export interface PlayerState {
+  wave: WaveInfo | null;
   track: Track | null;
   queue: Track[];
   index: number;
@@ -75,6 +91,8 @@ export class Player {
   private preloaded: string | null = null;
   private refreshedFor: string | null = null;
   private timers: ReturnType<typeof setInterval>[] = [];
+  private waveFeedback: { track_id: string; outcome: WaveOutcome }[] = [];
+  private waveLoading = false;
   /** Реакция сохранена на сервере — списки на экране нужно перечитать. */
   onReaction: (() => void) | null = null;
 
@@ -90,6 +108,7 @@ export class Player {
       },
     });
     this.state = {
+      wave: null,
       track: null, queue: [], index: 0, context: null, playing: false, loading: false, positionMs: 0,
       durationMs: 0, volume: 1, muted: false, shuffle: false, repeat: 'off', error: null,
     };
@@ -135,12 +154,102 @@ export class Player {
     const target = tracks[index];
     if (!target || !playable.length) return;
     this.finishAttempt('skip');
+    this.leaveWave();
     this.context = context;
     this.queue.set(playable, Math.max(playable.indexOf(target), 0));
     this.syncQueue();
     void this.load(true);
   }
 
+  // --- «Моя волна» ---
+
+  /** Запустить волну (или перезапустить с новым контекстом). */
+  async startWave(activity: string | null, mood: string | null) {
+    this.finishAttempt('skip');
+    this.leaveWave();
+    const res = unwrap(
+      await this.session.client.POST('/api/v1/wave/sessions', { body: { activity, mood } }),
+    );
+    const tracks = res.tracks.filter((t) => t.available && t.stream_url);
+    if (!tracks.length) {
+      this.update({ error: 'wave.empty' });
+      return;
+    }
+    this.context = { type: 'wave', id: res.session_id };
+    this.queue.shuffle = false;
+    this.queue.repeat = 'off';
+    this.queue.set(tracks, 0);
+    this.update({ wave: { sessionId: res.session_id, activity: res.activity, mood: res.mood, fallback: res.fallback } });
+    this.syncQueue();
+    void this.load(true);
+  }
+
+  /** Сменить занятие / настроение на лету: текущий трек доигрывает, дальше — новая пачка. */
+  async setWaveContext(activity: string | null, mood: string | null) {
+    const wave = this.state.wave;
+    if (!wave) return this.startWave(activity, mood);
+    this.update({ wave: { ...wave, activity, mood } });
+    const res = unwrap(
+      await this.session.client.PATCH('/api/v1/wave/sessions/{id}', {
+        params: { path: { id: wave.sessionId } },
+        body: { activity, mood },
+      }),
+    );
+    this.queue.dropUpcoming();
+    this.queue.append(res.tracks.filter((t) => t.available && t.stream_url));
+    this.update({ wave: { ...wave, activity: res.activity, mood: res.mood, fallback: res.fallback } });
+    this.syncQueue();
+  }
+
+  stopWave() {
+    this.leaveWave();
+    this.pause();
+  }
+
+  private leaveWave() {
+    const wave = this.state.wave;
+    if (!wave) return;
+    this.waveFeedback = [];
+    this.update({ wave: null });
+    void this.session.client
+      .DELETE('/api/v1/wave/sessions/{id}', { params: { path: { id: wave.sessionId } } })
+      .catch(() => undefined);
+  }
+
+  private noteWave(trackId: string, outcome: WaveOutcome) {
+    if (this.state.wave) this.waveFeedback.push({ track_id: trackId, outcome });
+  }
+
+  /**
+   * Следующая пачка волны с накопленными реакциями. refresh — сначала выбросить ещё не начатые треки:
+   * после лайка, дизлайка или раннего скипа очередь должна сразу отразить реакцию.
+   */
+  private async refillWave(refresh = false) {
+    const wave = this.state.wave;
+    if (!wave || this.waveLoading) return;
+    if (!refresh && this.queue.remaining > WAVE_REFILL_AT) return;
+    this.waveLoading = true;
+    const feedback = this.waveFeedback;
+    this.waveFeedback = [];
+    try {
+      const res = unwrap(
+        await this.session.client.POST('/api/v1/wave/sessions/{id}/next', {
+          params: { path: { id: wave.sessionId } },
+          body: { feedback },
+        }),
+      );
+      if (this.state.wave?.sessionId !== wave.sessionId) return; // волну уже выключили
+      if (refresh) this.queue.dropUpcoming();
+      this.queue.append(res.tracks.filter((t) => t.available && t.stream_url));
+      this.update({ wave: { ...this.state.wave, fallback: res.fallback } });
+      this.syncQueue();
+    } catch {
+      this.waveFeedback = [...feedback, ...this.waveFeedback]; // отправим со следующим запросом
+    } finally {
+      this.waveLoading = false;
+    }
+  }
+
   toggle() {
     if (this.state.playing) this.pause();
     else this.play();
@@ -246,6 +355,10 @@ export class Player {
       throw e;
     }
     this.onReaction?.();
+    if (reaction) {
+      this.noteWave(track.id, reaction);
+      void this.refillWave(true);
+    }
     if (reaction === 'dislike' && this.queue.current?.id === track.id) this.next();
   }
 
@@ -268,6 +381,7 @@ export class Player {
     });
     this.updateMediaMetadata(track);
     this.saveServer();
+    void this.refillWave();
     if (autoplay) {
       try {
         await this.audio.play();
@@ -287,6 +401,12 @@ export class Player {
     const kind = type === 'skip' ? a.outcome(pos) : 'play_end';
     this.events.push({ type: kind, track_id: a.track.id, position_ms: pos, played_ms: Math.round(a.playedMs) });
     void this.events.flush();
+    if (kind === 'play_end') this.noteWave(a.track.id, 'complete');
+    else {
+      const early = a.playedMs < EARLY_SKIP_MS;
+      this.noteWave(a.track.id, early ? 'skip_early' : 'skip');
+      if (early) void this.refillWave(true);
+    }
   }
 
   private bindAudio() {