refactor: isolate playback and upload use cases

apps/mobile/AGENTS.md

@@ -0,0 +1,7 @@
+# Android
+
+- `src/player/controller.ts` — фасад и зеркало native-очереди; `service.ts` — фоновые события. Владельцем воспроизводимой очереди остаётся TrackPlayer.
+- Общая политика волны — `packages/core/src`; офлайн-адаптация — `src/player/offlineWave.ts`, `src/offline`.
+- Сессия/настройки — `src/lib`; маршруты — `src/app`. Сохраняй работу при выгруженном UI и изоляцию офлайн-данных по пользователю/серверу.
+- `pnpm --filter @pipu/mobile typecheck`, `pnpm --filter @pipu/mobile test`.
+- Изменения native playback требуют проверки на устройстве: background, смена трека, offline→online. Unit-тесты не заменяют эту проверку.

apps/mobile/src/player/controller.ts

@@ -1,6 +1,11 @@
 import NetInfo from '@react-native-community/netinfo';
 import {
   EventBuffer,
+  WaveCoordinator,
+  EARLY_SKIP_MS,
+  type WaveInfo,
+  type WaveOutcome,
+  type WaveFeedback,
   PlayAttempt,
   normalizeGain,
   unwrap,
@@ -24,12 +29,7 @@ import { eventId } from './eventId';
 
 export { offlineWave };
 
-export interface WaveInfo {
-  sessionId: string;
-  activity: string | null;
-  mood: string | null;
-  fallback: boolean;
-}
+export type { WaveInfo } from '@pipu/core';
 
 export interface PlayerState {
   ready: boolean;
@@ -44,10 +44,6 @@ export interface PlayerState {
   wave: WaveInfo | null;
 }
 
-type WaveOutcome = 'complete' | 'skip' | 'skip_early' | 'like' | 'dislike';
-
-const WAVE_REFILL_AT = 2;
-const EARLY_SKIP_MS = 30_000;
 const SAVE_EVERY_MS = 10_000;
 
 const playable = (t: Track) => t.available && (!!t.stream_url || downloads.isDownloaded(t.id));
@@ -84,8 +80,13 @@ class Controller {
   private attempt: PlayAttempt | null = null;
   private lastPositionMs = 0;
   private lastSave = 0;
-  private waveFeedback: { track_id: string; outcome: WaveOutcome }[] = [];
-  private waveLoading = false;
+  private readonly wavePolicy = new WaveCoordinator({
+    next: async (id: string, feedback: WaveFeedback[]) => unwrap(
+      await this.session!.client.POST('/api/v1/wave/sessions/{id}/next', {
+        params: { path: { id } }, body: { feedback },
+      }),
+    ),
+  });
   private neutralSwitch = false; // следующая смена трека — из-за нового контекста волны
   private setupDone: Promise<void> | null = null;
   private listeners = new Set<() => void>();
@@ -308,18 +309,22 @@ class Controller {
     if (!this.session) return;
     await this.setup();
     this.leaveWave();
+    const version = this.wavePolicy.version;
     let res;
     try {
       res = unwrap(await this.session.client.POST('/api/v1/wave/sessions', { body: { activity, mood } }));
     } catch (e) {
+      if (!this.wavePolicy.isCurrent(version)) return;
       // Нет связи с сервером — офлайн-волна из скачанного.
       const local = offlineWave(downloads.downloaded());
       if (!local.length) throw e;
       return this.playList(local, 0, { type: 'collection', id: 'downloads' });
     }
+    if (!this.wavePolicy.isCurrent(version)) return;
     const tracks = res.tracks.filter(playable);
     if (!tracks.length) return;
     this.finishAttempt(this.lastPositionMs / 1000);
+    this.wavePolicy.activate(res.session_id);
     this.update({
       queue: tracks, index: 0, track: tracks[0] ?? null, context: { type: 'wave', id: res.session_id },
       wave: { sessionId: res.session_id, activity: res.activity, mood: res.mood, fallback: res.fallback },
@@ -332,13 +337,16 @@ class Controller {
   async setWaveContext(activity: string | null, mood: string | null) {
     const wave = this.state.wave;
     if (!wave || !this.session) return this.startWave(activity, mood);
+    const version = this.wavePolicy.changeContext(wave.sessionId);
     const res = unwrap(
       await this.session.client.PATCH('/api/v1/wave/sessions/{id}', {
         params: { path: { id: wave.sessionId } },
         body: { activity, mood },
       }),
     );
-    await this.replaceUpcoming(res.tracks);
+    if (!this.wavePolicy.isCurrent(version)) return;
+    await this.replaceUpcoming(res.tracks, () => this.wavePolicy.isCurrent(version));
+    if (!this.wavePolicy.isCurrent(version)) return;
     this.update({ wave: { ...wave, activity: res.activity, mood: res.mood, fallback: res.fallback } });
     // Новый контекст звучит сразу; прерванный трек — не скип для волны (как в вебе).
     if (res.tracks.some(playable)) {
@@ -351,8 +359,8 @@ class Controller {
 
   private leaveWave() {
     const wave = this.state.wave;
+    this.wavePolicy.activate(null);
     if (!wave) return;
-    this.waveFeedback = [];
     this.update({ wave: null });
     void this.session?.client
       .DELETE('/api/v1/wave/sessions/{id}', { params: { path: { id: wave.sessionId } } })
@@ -360,46 +368,36 @@ class Controller {
   }
 
   private noteWave(trackId: string, outcome: WaveOutcome) {
-    if (this.state.wave) this.waveFeedback.push({ track_id: trackId, outcome });
+    this.wavePolicy.note(trackId, outcome);
   }
 
   /** Убрать не начатые треки и поставить новые (после реакции или смены контекста). */
-  private async replaceUpcoming(tracks: Track[]) {
+  private async replaceUpcoming(tracks: Track[], current: () => boolean = () => true) {
     const keep = this.state.queue.slice(0, this.state.index + 1);
-    await TrackPlayer.removeUpcomingTracks();
     const add = tracks.filter(playable);
-    await TrackPlayer.add(await this.toRntp(add));
-    this.update({ queue: [...keep, ...add] });
+    const native = await this.toRntp(add);
+    if (!current()) return;
+    await TrackPlayer.removeUpcomingTracks();
+    if (!current()) return;
+    await TrackPlayer.add(native);
+    if (current()) this.update({ queue: [...keep, ...add] });
   }
 
   private async refillWave(refresh = false) {
-    const wave = this.state.wave;
-    if (!wave || !this.session || this.waveLoading) return;
+    if (!this.session) return;
     const remaining = this.state.queue.length - this.state.index - 1;
-    if (!refresh && 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) await this.replaceUpcoming(res.tracks);
+    await this.wavePolicy.refill(remaining, refresh, async (res, current) => {
+      if (refresh) await this.replaceUpcoming(res.tracks, current);
       else {
         const add = res.tracks.filter(playable);
-        await TrackPlayer.add(await this.toRntp(add));
+        const native = await this.toRntp(add);
+        if (!current()) return;
+        await TrackPlayer.add(native);
+        if (!current()) return;
         this.update({ queue: [...this.state.queue, ...add] });
       }
-      this.update({ wave: { ...wave, fallback: res.fallback } });
-    } catch {
-      this.waveFeedback = [...feedback, ...this.waveFeedback];
-    } finally {
-      this.waveLoading = false;
-    }
+      if (current()) this.update({ wave: { ...this.state.wave!, fallback: res.fallback } });
+    });
   }
 
   // --- состояние ---
@@ -443,6 +441,7 @@ class Controller {
   }
 
   async reset() {
+    this.wavePolicy.activate(null);
     this.attempt = null;
     this.update({ queue: [], track: null, index: 0, playing: false, positionMs: 0, wave: null, context: null });
     if (this.setupDone) await TrackPlayer.reset().catch(() => undefined);

apps/mobile/test/controller.test.ts

@@ -0,0 +1,72 @@
+import type { AuthSession, Track } from '@pipu/core';
+import { beforeEach, expect, it, vi } from 'vitest';
+
+vi.mock('@react-native-community/netinfo', () => ({ default: {
+  fetch: async () => ({ type: 'wifi' }), addEventListener: () => () => {},
+} }));
+vi.mock('../src/lib/prefs', () => ({
+  qualityPrefs: { load: async () => ({ wifi: 'high', cellular: 'medium' }) },
+  playerCache: { clearIfRequested: async () => {} },
+}));
+vi.mock('../src/offline/events', () => ({ PersistentEvents: class {} }));
+vi.mock('../src/offline/downloads', () => ({
+  downloads: { isDownloaded: () => false, localTrack: () => undefined, localCover: () => undefined, downloaded: () => [] },
+  sizedCover: (s: string) => s,
+}));
+vi.mock('react-native-track-player', () => ({
+  default: {
+    isServiceRunning: async () => true, setupPlayer: async () => {}, updateOptions: async () => {},
+    addEventListener: vi.fn(), reset: vi.fn().mockResolvedValue(undefined),
+    add: vi.fn().mockResolvedValue(undefined), play: vi.fn().mockResolvedValue(undefined),
+    skip: vi.fn().mockResolvedValue(undefined),
+  },
+  AppKilledPlaybackBehavior: {}, Capability: {}, Event: {}, State: {},
+}));
+
+function track(id: string): Track {
+  return { id, title: id, duration_ms: 1000, artists: [],
+    album: { id: 'album', title: 'Album', year: null, cover_url: null, cover_colors: [] },
+    genres: [], disc_no: 1, track_no: 1, available: true, stream_url: `/s/${id}?sig=x`, reaction: null, features: null };
+}
+function deferred<T>() {
+  let resolve!: (v: T) => void;
+  const promise = new Promise<T>((yes) => { resolve = yes; });
+  return { promise, resolve };
+}
+const reply = (id: string) => ({ data: { session_id: id, activity: null, mood: null, fallback: false, tracks: [track(id)] }, response: new Response() });
+
+beforeEach(() => { vi.resetModules(); vi.clearAllMocks(); });
+
+it('ignores a wave creation response after the player is reset', async () => {
+  const { player } = await import('../src/player/controller');
+  const native = (await import('react-native-track-player')).default;
+  const pending = deferred<ReturnType<typeof reply>>();
+  const post = vi.fn().mockReturnValue(pending.promise);
+  player.attach({ client: { POST: post } } as unknown as AuthSession, 'http://localhost', null);
+  const start = player.startWave(null, null);
+  await vi.waitFor(() => expect(post).toHaveBeenCalled());
+  await player.reset();
+  pending.resolve(reply('old'));
+  await start;
+  expect(player.getState().wave).toBeNull();
+  expect(player.getState().queue).toEqual([]);
+  expect(native.add).not.toHaveBeenCalled();
+});
+
+it('does not let a late context response replace a manually selected playlist', async () => {
+  const { player } = await import('../src/player/controller');
+  const pending = deferred<ReturnType<typeof reply>>();
+  const session = { client: {
+    POST: vi.fn().mockResolvedValue(reply('wave')),
+    PATCH: vi.fn().mockReturnValue(pending.promise), DELETE: vi.fn().mockResolvedValue({}),
+  } };
+  player.attach(session as unknown as AuthSession, 'http://localhost', null);
+  await player.startWave(null, null);
+  const change = player.setWaveContext('focus', null);
+  await player.playList([track('manual')], 0, { type: 'album', id: 'album' });
+  pending.resolve(reply('stale'));
+  await change;
+  expect(player.getState().wave).toBeNull();
+  expect(player.getState().queue.map((t) => t.id)).toEqual(['manual']);
+  expect(player.getState().context?.type).toBe('album');
+});

apps/web/AGENTS.md

@@ -0,0 +1,8 @@
+# Web и desktop UI
+
+- Маршруты: `src/app/router.tsx`; сессия: `src/app/session.tsx`; страницы собирают возможности, `src/features` владеет сценариями.
+- Воспроизведение: `src/player/player.ts` — фасад; адаптеры рядом. Общие правила очереди, событий и волны — `packages/core/src`.
+- Загрузки: `src/features/uploads`; страница очереди — `src/pages/admin/UploadQueuePage.tsx`. Сохраняй query keys/invalidation, права и поведение диалогов.
+- `pnpm --filter @pipu/web typecheck`; `pnpm --filter @pipu/web test`. Для локальной проверки можно передать путь теста после `test`.
+- UI/навигация/диалоги: `pnpm --filter @pipu/web test:e2e`. Проверки используют fake API; реальная серверная авторизация покрывается Go отдельно.
+- Restore не запускает музыку и не создаёт событие прослушивания. Ошибка preload не пропускает трек. Dispose должен освобождать обработчики.

apps/web/src/features/uploads/BatchEditDialog.tsx

@@ -0,0 +1,69 @@
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useErrorText } from '../../shared/lib/errors';
+import { useUploadsApi } from './queries';
+import { useTranslation } from 'react-i18next';
+import { Button, Dialog, Field, FormError } from '../../shared/ui/ui';
+import s from '../../pages/page.module.css';
+export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string; onClose: () => void; onSaved: () => void }) {
+  const { t } = useTranslation(['admin', 'common']);
+  const api = useUploadsApi();
+  const errorText = useErrorText();
+  const [artist, setArtist] = useState('');
+  const [album, setAlbum] = useState('');
+  const [year, setYear] = useState('');
+  const [cover, setCover] = useState<string | null | undefined>(undefined);
+  const save = useMutation({
+    mutationFn: () => api.updateBatch(batchId, {
+      ...(artist.trim() ? { artist: artist.trim() } : {}),
+      ...(album.trim() ? { album: album.trim() } : {}),
+      ...(year.trim() ? { year: Number.parseInt(year, 10) } : {}),
+      ...(cover !== undefined ? { cover_base64: cover } : {}),
+    }),
+    onSuccess: onSaved,
+  });
+  const pickCover = (file: File | undefined) => {
+    if (!file) {
+      setCover(undefined);
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const data = String(reader.result ?? '');
+      const comma = data.indexOf(',');
+      setCover(comma >= 0 ? data.slice(comma + 1) : data);
+    };
+    reader.readAsDataURL(file);
+  };
+  return (
+    <Dialog
+      title={t('uploads.batch_edit_title')}
+      onClose={onClose}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            {t('common:form.cancel')}
+          </Button>
+          <Button variant="primary" busy={save.isPending} onClick={() => save.mutate()}>
+            {t('uploads.save')}
+          </Button>
+        </>
+      }
+    >
+      <div className={s.sessions}>
+        <p className={s.note}>{t('uploads.batch_edit_hint')}</p>
+        <Field label={t('uploads.meta_artist')} value={artist} onChange={setArtist} maxLength={500} />
+        <Field label={t('uploads.meta_album')} value={album} onChange={setAlbum} maxLength={500} />
+        <Field label={t('uploads.meta_year')} value={year} inputMode="numeric" onChange={setYear} />
+        <label className={s.sessions}>
+          <span>{t('uploads.batch_cover')}</span>
+          <input type="file" accept="image/jpeg,image/png,image/webp" onChange={(e) => pickCover(e.target.files?.[0])} />
+        </label>
+        <Button variant="ghost" onClick={() => setCover(null)}>
+          {t('uploads.batch_cover_clear')}
+        </Button>
+        <FormError>{save.error ? errorText(save.error) : null}</FormError>
+      </div>
+    </Dialog>
+  );
+}

apps/web/src/features/uploads/EditDialog.test.tsx

@@ -0,0 +1,56 @@
+import { AuthSession } from '@pipu/core';
+import { createI18n } from '@pipu/i18n';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { cleanup, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { afterEach, expect, it, vi } from 'vitest';
+import { SessionProvider } from '../../app/session';
+import { mobileFixtures } from '../../test/mobileFixtures';
+import { EditDialog } from './EditDialog';
+import type { UploadFile } from './common';
+
+afterEach(cleanup);
+
+async function fixture(fail = false) {
+  const file = (mobileFixtures['/api/v1/admin/uploads'] as { items: UploadFile[] }).items[0]!;
+  const requests: unknown[] = [];
+  const fetchImpl: typeof fetch = async (input) => {
+    const req = input as Request;
+    if (req.method === 'PATCH') {
+      requests.push(await req.json());
+      return new Response(JSON.stringify(fail ? { status: 409, code: 'uploads.wrong_status' } : file), { status: fail ? 409 : 200 });
+    }
+    return new Response(JSON.stringify(mobileFixtures['/api/v1/admin/sources']));
+  };
+  const session = new AuthSession({ baseUrl: 'http://localhost', fetch: fetchImpl, clientType: 'web' });
+  const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false }, mutations: { retry: false } } });
+  const onSaved = vi.fn();
+  const onClose = vi.fn();
+  const i18n = await createI18n('ru');
+  render(<I18nextProvider i18n={i18n}><SessionProvider session={session}><QueryClientProvider client={queryClient}>
+    <EditDialog file={file} onSaved={onSaved} onClose={onClose} />
+  </QueryClientProvider></SessionProvider></I18nextProvider>);
+  const user = userEvent.setup();
+  await user.type(screen.getByLabelText('Исполнитель', { exact: true }), 'Кино');
+  await user.type(screen.getByLabelText('Название', { exact: true }), 'Перемен');
+  return { requests, onSaved, onClose, user };
+}
+
+it('saves edited metadata with the target source and closes only after success', async () => {
+  const f = await fixture();
+  await f.user.click(screen.getByRole('button', { name: 'Сохранить' }));
+  await waitFor(() => expect(f.onSaved).toHaveBeenCalledOnce());
+  expect(f.onClose).toHaveBeenCalledOnce();
+  expect(f.requests).toEqual([expect.objectContaining({ metadata: expect.objectContaining({ artist: 'Кино', title: 'Перемен' }), target_source_id: expect.any(String) })]);
+});
+
+it('keeps the editor and input when a concurrent review rejects the save', async () => {
+  const f = await fixture(true);
+  await f.user.click(screen.getByRole('button', { name: 'Сохранить' }));
+  await waitFor(() => expect(screen.getByRole('alert')).toBeVisible());
+  expect(screen.getByRole('dialog')).toBeVisible();
+  expect(screen.getByLabelText('Название', { exact: true })).toHaveValue('Перемен');
+  expect(f.onSaved).not.toHaveBeenCalled();
+  expect(f.onClose).not.toHaveBeenCalled();
+});

apps/web/src/features/uploads/EditDialog.tsx

@@ -0,0 +1,85 @@
+import type { components } from '@pipu/api-client';
+import { useMutation } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useErrorText, useFieldError } from '../../shared/lib/errors';
+import { Button, Dialog, Field, FormError } from '../../shared/ui/ui';
+import { useUploadsApi, useUploadSources } from './queries';
+import type { UploadFile } from './common';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+
+type Meta = components['schemas']['UploadMeta'];
+const EMPTY_META: Meta = { artist: '', albumartist: '', album: '', title: '', genre: '', year: null, track: null, disc: null };
+
+export function EditDialog({ file, onClose, onSaved }: { file: UploadFile; onClose: () => void; onSaved: () => void }) {
+  const { t } = useTranslation(['admin', 'common']);
+  const api = useUploadsApi();
+  const errorText = useErrorText();
+  const fieldError = useFieldError();
+  const [m, setM] = useState<Meta>(file.metadata ?? EMPTY_META);
+  const [source, setSource] = useState(file.target_source_id ?? '');
+  const sources = useUploadSources();
+  const save = useMutation({
+    mutationFn: () => api.updateFile(file.id, { metadata: m, ...(source ? { target_source_id: source } : {}) }),
+    onSuccess: () => {
+      onSaved();
+      onClose();
+    },
+  });
+  const text = (k: 'artist' | 'albumartist' | 'album' | 'title' | 'genre') => (
+    <Field label={t(`uploads.meta_${k}`)} value={m[k]} onChange={(v) => setM({ ...m, [k]: v })} maxLength={500} />
+  );
+  const num = (k: 'year' | 'track' | 'disc') => (
+    <Field
+      label={t(`uploads.meta_${k}`)}
+      value={m[k] === null ? '' : String(m[k])}
+      inputMode="numeric"
+      onChange={(v) => setM({ ...m, [k]: v.trim() === '' ? null : Number.parseInt(v, 10) || null })}
+    />
+  );
+  const accepting = sources.data?.filter((x) => x.accepts_uploads) ?? [];
+  return (
+    <Dialog
+      title={t('uploads.edit_title')}
+      onClose={onClose}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            {t('common:form.cancel')}
+          </Button>
+          <Button variant="primary" busy={save.isPending} disabled={!m.artist.trim() || !m.title.trim()} onClick={() => save.mutate()}>
+            {t('uploads.save')}
+          </Button>
+        </>
+      }
+    >
+      <div className={s.sessions}>
+        <p className={s.note}>{file.client_rel_path ?? file.original_name}</p>
+        <div className={u.grid}>
+          {text('artist')}
+          {text('albumartist')}
+          {text('album')}
+          {text('title')}
+          {text('genre')}
+          {num('year')}
+          {num('track')}
+          {num('disc')}
+        </div>
+        <label className={s.sessions}>
+          <span>{t('uploads.target_source')}</span>
+          <select className={s.select} value={source} onChange={(e) => setSource(e.target.value)}>
+            <option value="">{t('uploads.target_default')}</option>
+            {accepting.map((x) => (
+              <option key={x.id} value={x.id}>
+                {x.name}
+              </option>
+            ))}
+          </select>
+        </label>
+        <p className={s.note}>{t('uploads.tags_note')}</p>
+        <FormError>{save.error ? (fieldError(save.error, 'metadata') ?? errorText(save.error)) : null}</FormError>
+      </div>
+    </Dialog>
+  );
+}

apps/web/src/features/uploads/QueueRows.tsx

@@ -0,0 +1,153 @@
+import { formatBytes, formatDateTime, formatDuration } from '../../shared/lib/format';
+import { editIcon, refreshIcon } from '../../shared/ui/icons';
+import { needsFormatAttention } from './files';
+import { UploadStatusBadge, useReasonText, type UploadFile } from './common';
+import { useTranslation } from 'react-i18next';
+import { Button, cx, Icon } from '../../shared/ui/ui';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+export function BatchCard({
+  files,
+  selectable,
+  selected,
+  onToggle,
+  onEdit,
+  onEditBatch,
+  onRetry,
+}: {
+  files: UploadFile[];
+  selectable: boolean;
+  selected: Set<string>;
+  onToggle: (ids: string[], on: boolean) => void;
+  onEdit: (f: UploadFile) => void;
+  onEditBatch: (batchId: string) => void;
+  onRetry: (id: string) => void;
+}) {
+  const { t, i18n } = useTranslation('admin');
+  const first = files[0]!;
+  const ids = files.map((f) => f.id);
+  const all = ids.every((id) => selected.has(id));
+  const size = files.reduce((n, f) => n + f.size_bytes, 0);
+  return (
+    <section className={u.batch} aria-label={t('uploads.batch_of', { author: first.author.username })}>
+      <div className={u.batchHead}>
+        {selectable && (
+          <input type="checkbox" aria-label={t('uploads.select_batch')} checked={all} onChange={(e) => onToggle(ids, e.target.checked)} />
+        )}
+        <b>{first.author.username}</b>
+        <span>{formatDateTime(first.created_at, i18n.language)}</span>
+        <span>{t('uploads.batch_size', { count: files.length, size: formatBytes(size, i18n.language) })}</span>
+        {first.batch_comment && <span className={u.comment}>«{first.batch_comment}»</span>}
+        <span style={{ flex: 1 }} />
+        {selectable && (
+          <Button variant="ghost" onClick={() => onEditBatch(first.batch_id)}>
+            {t('uploads.edit_batch')}
+          </Button>
+        )}
+      </div>
+      {files.map((f) => (
+        <QueueRow
+          key={f.id}
+          file={f}
+          selectable={selectable}
+          checked={selected.has(f.id)}
+          onCheck={(on) => onToggle([f.id], on)}
+          onEdit={() => onEdit(f)}
+          onRetry={() => onRetry(f.id)}
+        />
+      ))}
+    </section>
+  );
+}
+
+function QueueRow({
+  file: f,
+  selectable,
+  checked,
+  onCheck,
+  onEdit,
+  onRetry,
+}: {
+  file: UploadFile;
+  selectable: boolean;
+  checked: boolean;
+  onCheck: (on: boolean) => void;
+  onEdit: () => void;
+  onRetry: () => void;
+}) {
+  const { t, i18n } = useTranslation('admin');
+  const reason = useReasonText()(f.status_reason);
+  const m = f.metadata;
+  const quality = [
+    f.format?.toUpperCase(),
+    f.bitrate ? `${Math.round(f.bitrate / 1000)} kbps` : null,
+    f.sample_rate ? `${(f.sample_rate / 1000).toFixed(1)} kHz` : null,
+    f.bit_depth ? `${f.bit_depth} bit` : null,
+    f.duration_ms ? formatDuration(f.duration_ms) : null,
+    formatBytes(f.size_bytes, i18n.language),
+  ]
+    .filter(Boolean)
+    .join(' · ');
+  const editable = f.status === 'pending_review' || f.status === 'import_failed';
+  return (
+    <div className={u.queueRow}>
+      {selectable ? (
+        <input type="checkbox" aria-label={t('uploads.select_file', { name: f.original_name })} checked={checked} onChange={(e) => onCheck(e.target.checked)} />
+      ) : (
+        <span />
+      )}
+      <div className={u.meta}>
+        <span className={u.metaTitle}>{m ? `${m.artist} — ${m.title}` : f.original_name}</span>
+        {m && (
+          <span className={u.sub}>
+            {[m.album, m.year, m.disc && m.disc > 1 ? t('uploads.disc', { n: m.disc }) : null, m.track ? `#${m.track}` : null, m.genre]
+              .filter(Boolean)
+              .join(' · ')}
+            {f.metadata_edited && ` · ${t('uploads.edited')}`}
+          </span>
+        )}
+        <span className={u.sub}>{quality}</span>
+        <span className={u.sub} title={f.client_rel_path ?? undefined}>
+          {f.client_rel_path ?? f.original_name}
+        </span>
+      </div>
+      <div className={u.meta}>
+        <div className={u.flags}>
+          <UploadStatusBadge status={f.status} />
+          {needsFormatAttention(f.format, f.original_name) && (
+            <span className={cx(s.badge, u.tone_warn)} title={t('uploads.format_attention')}>
+              {t('uploads.flag_attention')}
+            </span>
+          )}
+          {f.possible_duplicate && <span className={cx(s.badge, u.tone_warn)}>{t('uploads.flag_possible')}</span>}
+          {f.quality_upgrade && <span className={cx(s.badge, u.tone_info)}>{t('uploads.flag_quality')}</span>}
+          {f.matched_album_id ? (
+            <span className={cx(s.badge, u.tone_info)}>{t('uploads.flag_existing_album')}</span>
+          ) : (
+            m && <span className={cx(s.badge, u.tone_muted)}>{t('uploads.flag_new_album')}</span>
+          )}
+        </div>
+        {f.target_rel_path && <span className={u.target}>{f.target_rel_path}</span>}
+        {reason && <span className={f.status === 'pending_review' ? u.warn : u.bad}>{reason}</span>}
+        {f.duplicate_level && f.status === 'duplicate' && (
+          <span className={u.sub}>{t(`uploads.dup_level_${f.duplicate_level}`)}</span>
+        )}
+      </div>
+      <div className={u.rowActions}>
+        {f.stream_url && (
+          <audio controls preload="none" src={f.stream_url} aria-label={t('uploads.listen', { name: f.original_name })} />
+        )}
+        {editable && (
+          <Button variant="ghost" aria-label={t('uploads.edit', { name: f.original_name })} onClick={onEdit}>
+            <Icon src={editIcon} size={18} />
+          </Button>
+        )}
+        {f.status === 'import_failed' && (
+          <Button variant="ghost" icon={refreshIcon} onClick={onRetry}>
+            {t('uploads.retry')}
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/features/uploads/RejectDialog.tsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button, Dialog } from '../../shared/ui/ui';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+export function RejectDialog({
+  count,
+  busy,
+  onClose,
+  onReject,
+}: {
+  count: number;
+  busy: boolean;
+  onClose: () => void;
+  onReject: (reason: string) => void;
+}) {
+  const { t } = useTranslation(['admin', 'common']);
+  const [reason, setReason] = useState('');
+  return (
+    <Dialog
+      title={t('uploads.reject_title', { count })}
+      onClose={onClose}
+      footer={
+        <>
+          <Button variant="ghost" onClick={onClose}>
+            {t('common:form.cancel')}
+          </Button>
+          <Button variant="danger" busy={busy} onClick={() => onReject(reason)}>
+            {t('uploads.reject')}
+          </Button>
+        </>
+      }
+    >
+      <label className={s.sessions}>
+        <span>{t('uploads.reject_reason')}</span>
+        <textarea className={u.textarea} value={reason} maxLength={1000} onChange={(e) => setReason(e.target.value)} />
+      </label>
+    </Dialog>
+  );
+}

apps/web/src/features/uploads/UploadQueue.tsx

@@ -0,0 +1,180 @@
+import { ApiError } from '@pipu/core';
+import type { components } from '@pipu/api-client';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+import { checkIcon, closeIcon, inboxIcon } from '../../shared/ui/icons';
+import { useErrorText } from '../../shared/lib/errors';
+import { QuotaMeter, type UploadFile, type UploadStatus } from './common';
+import { BatchCard } from './QueueRows';
+import { BatchEditDialog } from './BatchEditDialog';
+import { EditDialog } from './EditDialog';
+import { RejectDialog } from './RejectDialog';
+import { useUploadQueue, useUploadsApi } from './queries';
+import { useTranslation } from 'react-i18next';
+import { Button, EmptyState, FormError } from '../../shared/ui/ui';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+const TABS = {
+  review: ['pending_review'],
+  failed: ['import_failed'],
+  progress: ['uploading', 'processing', 'approved', 'importing'],
+  imported: ['imported'],
+  declined: ['rejected', 'duplicate', 'invalid', 'withdrawn', 'expired'],
+} satisfies Record<string, UploadStatus[]>;
+type Tab = keyof typeof TABS;
+
+/** «Очередь на добавление» (docs/uploads.md#8): рассмотрение по пачкам, правка метаданных, массовые решения. */
+export function UploadQueue() {
+  const { t } = useTranslation(['admin', 'common']);
+  const api = useUploadsApi();
+  const queryClient = useQueryClient();
+  const errorText = useErrorText();
+  const [tab, setTab] = useState<Tab>('review');
+  const [onlyPossible, setOnlyPossible] = useState(false);
+  const [selected, setSelected] = useState<Set<string>>(new Set());
+  const [editing, setEditing] = useState<UploadFile | null>(null);
+  const [batchEdit, setBatchEdit] = useState<string | null>(null);
+  const [rejecting, setRejecting] = useState(false);
+
+  const list = useUploadQueue(TABS[tab], tab, onlyPossible);
+  const items = useMemo(() => list.data?.pages.flatMap((p) => p.items) ?? [], [list.data]);
+  useEffect(() => setSelected(new Set()), [tab, onlyPossible]);
+
+  const refresh = async () => {
+    setSelected(new Set());
+    await queryClient.invalidateQueries({ queryKey: ['admin-uploads'] });
+    await queryClient.invalidateQueries({ queryKey: ['upload-quota'] });
+  };
+  const review = useMutation({
+    mutationFn: (v: { decision: 'approve' | 'reject'; ids: string[]; reason?: string }) => api.review(v),
+    onSuccess: refresh,
+  });
+  const retry = useMutation({
+    mutationFn: api.retry,
+    onSuccess: refresh,
+  });
+  const failed = review.data?.items.filter((r) => !r.ok) ?? [];
+
+  // Группировка по пачке: файлы одной загрузки (обычно альбом) рассматриваются вместе.
+  const batches = useMemo(() => {
+    const m = new Map<string, UploadFile[]>();
+    for (const f of items) m.set(f.batch_id, [...(m.get(f.batch_id) ?? []), f]);
+    return [...m.values()];
+  }, [items]);
+  const toggle = (ids: string[], on: boolean) =>
+    setSelected((cur) => {
+      const next = new Set(cur);
+      for (const id of ids) {
+        if (on) next.add(id);
+        else next.delete(id);
+      }
+      return next;
+    });
+  const selectable = tab === 'review' || tab === 'failed';
+  const ids = [...selected];
+
+  return (
+    <div className={s.page}>
+      <div className={s.head}>
+        <div>
+          <h1>{t('uploads.queue_title')}</h1>
+          <p className={s.subtitle}>{t('uploads.queue_subtitle')}</p>
+        </div>
+        <QuotaMeter />
+      </div>
+      <div className={s.toolbar}>
+        <div className={s.chips} role="group" aria-label={t('uploads.filter')}>
+          {(Object.keys(TABS) as Tab[]).map((k) => (
+            <button key={k} type="button" className={s.chip} aria-pressed={tab === k} onClick={() => setTab(k)}>
+              {t(`uploads.tab_${k}`)}
+            </button>
+          ))}
+        </div>
+        <span style={{ flex: 1 }} />
+        <label className={u.sub} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
+          <input type="checkbox" checked={onlyPossible} onChange={(e) => setOnlyPossible(e.target.checked)} />
+          {t('uploads.only_possible')}
+        </label>
+      </div>
+      <FormError>{(list.error ?? review.error ?? retry.error) ? errorText(list.error ?? review.error ?? retry.error) : null}</FormError>
+      {failed.length > 0 && (
+        <FormError>{t('uploads.review_failed', { count: failed.length, reason: failed[0]?.error ? errorText(problemError(failed[0].error)) : '' })}</FormError>
+      )}
+      {list.isSuccess && items.length === 0 && <EmptyState icon={inboxIcon}>{t('uploads.queue_empty')}</EmptyState>}
+
+      {batches.map((files) => (
+        <BatchCard
+          key={files[0]!.batch_id}
+          files={files}
+          selectable={selectable}
+          selected={selected}
+          onToggle={toggle}
+          onEdit={setEditing}
+          onEditBatch={setBatchEdit}
+          onRetry={(id) => retry.mutate(id)}
+        />
+      ))}
+      {list.hasNextPage && (
+        <Button busy={list.isFetchingNextPage} onClick={() => void list.fetchNextPage()}>
+          {t('uploads.load_more')}
+        </Button>
+      )}
+
+      {ids.length > 0 && (
+        <div className={u.bulk} role="region" aria-label={t('uploads.bulk')}>
+          <span>{t('uploads.selected', { count: ids.length })}</span>
+          <span style={{ flex: 1 }} />
+          <Button variant="ghost" onClick={() => setSelected(new Set())}>
+            {t('common:form.cancel')}
+          </Button>
+          <Button variant="danger" icon={closeIcon} onClick={() => setRejecting(true)}>
+            {t('uploads.reject')}
+          </Button>
+          {tab === 'review' && (
+            <Button variant="primary" icon={checkIcon} busy={review.isPending} onClick={() => review.mutate({ decision: 'approve', ids })}>
+              {t('uploads.approve')}
+            </Button>
+          )}
+        </div>
+      )}
+
+      {batchEdit && (
+        <BatchEditDialog
+          batchId={batchEdit}
+          onClose={() => setBatchEdit(null)}
+          onSaved={() => {
+            setBatchEdit(null);
+            void refresh();
+          }}
+        />
+      )}
+
+      {editing && (
+        <EditDialog
+          file={editing}
+          onClose={() => setEditing(null)}
+          onSaved={() => {
+            review.reset();
+            void refresh();
+          }}
+        />
+      )}
+      {rejecting && (
+        <RejectDialog
+          count={ids.length}
+          busy={review.isPending}
+          onClose={() => setRejecting(false)}
+          onReject={(reason) => {
+            setRejecting(false);
+            review.mutate({ decision: 'reject', ids, reason });
+          }}
+        />
+      )}
+    </div>
+  );
+}
+
+/** Problem из ответа массового решения → объект, понятный useErrorText. */
+function problemError(p: components['schemas']['Problem']) {
+  return new ApiError(p.status, p.code, p.params ?? {});
+}

apps/web/src/features/uploads/UploadSettingsSection.tsx

@@ -0,0 +1,101 @@
+import type { components } from '@pipu/api-client';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Field, FormError } from '../../shared/ui/ui';
+import { useUploadsApi, useUploadSources, useUploadSettings } from './queries';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+
+type Settings = components['schemas']['UploadSettings'];
+const GB = 1024 ** 3;
+
+/** Настройки очереди: общий лимит, лимит на модератора, размер файла, хранилище по умолчанию. */
+export function UploadSettingsSection() {
+  const { t } = useTranslation(['admin', 'common']);
+  const api = useUploadsApi();
+  const queryClient = useQueryClient();
+  const errorText = useErrorText();
+  const settings = useUploadSettings();
+  const sources = useUploadSources();
+  const [form, setForm] = useState<{ queue: string; perUser: string; maxFile: string; source: string; upgrade: boolean } | null>(null);
+  useEffect(() => {
+    if (settings.data) setForm(toForm(settings.data));
+  }, [settings.data]);
+
+  const save = useMutation({
+    mutationFn: async () => {
+      const f = form!;
+      const gb = (v: string) => Math.round(Number.parseFloat(v.replace(',', '.')) * GB);
+      return api.updateSettings({
+        queue_limit_bytes: gb(f.queue), max_file_bytes: gb(f.maxFile),
+        per_user_limit_bytes: f.perUser.trim() ? gb(f.perUser) : null,
+        default_source_id: f.source || null, allow_quality_upgrade: f.upgrade,
+      });
+    },
+    onSuccess: async (data) => {
+      queryClient.setQueryData(['upload-settings'], data);
+      await queryClient.invalidateQueries({ queryKey: ['upload-quota'] });
+    },
+  });
+  if (!form) return null;
+  const valid = [form.queue, form.maxFile].every((v) => Number.parseFloat(v.replace(',', '.')) > 0) &&
+    (!form.perUser.trim() || Number.parseFloat(form.perUser.replace(',', '.')) > 0);
+  const dirty = settings.data ? JSON.stringify(toForm(settings.data)) !== JSON.stringify(form) : false;
+  return (
+    <section className={s.section}>
+      <h2>{t('uploads.settings_title')}</h2>
+      <div className={u.settingsGrid}>
+        <Field label={t('uploads.set_queue')} value={form.queue} onChange={(v) => setForm({ ...form, queue: v })} inputMode="decimal" />
+        <Field
+          label={t('uploads.set_per_user')}
+          value={form.perUser}
+          hint={t('uploads.set_per_user_hint')}
+          onChange={(v) => setForm({ ...form, perUser: v })}
+          inputMode="decimal"
+        />
+        <Field label={t('uploads.set_max_file')} value={form.maxFile} onChange={(v) => setForm({ ...form, maxFile: v })} inputMode="decimal" />
+        <label>
+          <span className={u.settingsLabel}>{t('uploads.set_source')}</span>
+          <select className={s.select} value={form.source} onChange={(e) => setForm({ ...form, source: e.target.value })}>
+            <option value="">{t('uploads.set_source_auto')}</option>
+            {sources.data
+              ?.filter((x) => x.accepts_uploads)
+              .map((x) => (
+                <option key={x.id} value={x.id}>
+                  {x.name}
+                </option>
+              ))}
+          </select>
+        </label>
+        <div>
+          <label className={u.settingsCheck}>
+            <input type="checkbox" checked={form.upgrade} onChange={(e) => setForm({ ...form, upgrade: e.target.checked })} />
+            <span>{t('uploads.set_upgrade')}</span>
+          </label>
+        </div>
+      </div>
+      <p className={s.note}>{t('uploads.set_note')}</p>
+      <div className={s.toolbar}>
+        <span style={{ flex: 1 }} />
+        <Button variant="primary" busy={save.isPending} disabled={!dirty || !valid} onClick={() => save.mutate()}>
+          {t('uploads.save')}
+        </Button>
+      </div>
+      {save.isSuccess && !dirty && <span className={s.ok}>{t('uploads.saved')}</span>}
+      <FormError>{save.error ? errorText(save.error) : null}</FormError>
+    </section>
+  );
+}
+
+function toForm(st: Settings) {
+  const gb = (n: number) => String(Math.round((n / GB) * 100) / 100);
+  return {
+    queue: gb(st.queue_limit_bytes),
+    perUser: st.per_user_limit_bytes === null ? '' : gb(st.per_user_limit_bytes),
+    maxFile: gb(st.max_file_bytes),
+    source: st.default_source_id ?? '',
+    upgrade: st.allow_quality_upgrade,
+  };
+}

apps/web/src/features/uploads/api.ts

@@ -0,0 +1,26 @@
+import type { ApiClient, components, paths } from '@pipu/api-client';
+import { unwrap } from '@pipu/core';
+
+type FilePatch = paths['/api/v1/admin/uploads/files/{id}']['patch']['requestBody']['content']['application/json'];
+type BatchPatch = paths['/api/v1/admin/uploads/batches/{id}']['patch']['requestBody']['content']['application/json'];
+type SettingsPatch = paths['/api/v1/admin/settings/uploads']['patch']['requestBody']['content']['application/json'];
+
+/** The feature owns transport mapping; views only provide form values. */
+export function uploadsApi(client: ApiClient) {
+  return {
+    list: async (status: components['schemas']['UploadStatus'][], possible: boolean, cursor?: string) => unwrap(
+      await client.GET('/api/v1/admin/uploads', {
+        params: { query: { status, possible_duplicate: possible || undefined, cursor, limit: 100 } },
+      }),
+    ),
+    review: async (v: { ids: string[]; decision: 'approve' | 'reject'; reason?: string }) => unwrap(
+      await client.POST('/api/v1/admin/uploads/review', { body: { file_ids: v.ids, decision: v.decision, reason: v.reason } }),
+    ),
+    retry: async (id: string) => unwrap(await client.POST('/api/v1/admin/uploads/files/{id}/retry', { params: { path: { id } } })),
+    updateFile: async (id: string, body: FilePatch) => unwrap(await client.PATCH('/api/v1/admin/uploads/files/{id}', { params: { path: { id } }, body })),
+    updateBatch: async (id: string, body: BatchPatch) => unwrap(await client.PATCH('/api/v1/admin/uploads/batches/{id}', { params: { path: { id } }, body })),
+    sources: async () => unwrap(await client.GET('/api/v1/admin/sources')).items,
+    settings: async () => unwrap(await client.GET('/api/v1/admin/settings/uploads')),
+    updateSettings: async (body: SettingsPatch) => unwrap(await client.PATCH('/api/v1/admin/settings/uploads', { body })),
+  };
+}

apps/web/src/features/uploads/common.tsx

@@ -0,0 +1,84 @@
+import type { components } from '@pipu/api-client';
+import { unwrap } from '@pipu/core';
+import { useQuery } from '@tanstack/react-query';
+import { useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSession } from '../../app/session';
+import { formatBytes } from '../../shared/lib/format';
+import { cx } from '../../shared/ui/ui';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+
+export type UploadStatus = components['schemas']['UploadStatus'];
+export type UploadFile = components['schemas']['UploadFile'];
+
+const TONE: Record<UploadStatus, 'ok' | 'warn' | 'bad' | 'info' | 'muted'> = {
+  uploading: 'info',
+  processing: 'info',
+  pending_review: 'warn',
+  approved: 'info',
+  importing: 'info',
+  imported: 'ok',
+  import_failed: 'bad',
+  duplicate: 'muted',
+  invalid: 'bad',
+  rejected: 'bad',
+  withdrawn: 'muted',
+  expired: 'muted',
+};
+
+/** Статусы, которые ещё меняются сами (обработка, импорт) — список опрашивается. */
+export const MOVING: UploadStatus[] = ['uploading', 'processing', 'approved', 'importing'];
+
+export function UploadStatusBadge({ status }: { status: UploadStatus }) {
+  const { t } = useTranslation('admin');
+  return <span className={cx(s.badge, u[`tone_${TONE[status]}`])}>{t(`uploads.status.${status}`)}</span>;
+}
+
+export function useUploadQuota() {
+  const session = useSession();
+  return useQuery({
+    queryKey: ['upload-quota'],
+    queryFn: async () => unwrap(await session.client.GET('/api/v1/uploads/quota')),
+  });
+}
+
+/** «Очередь: 6,2 ГБ из 10 ГБ» — видят модераторы и админ (docs/uploads.md#3). */
+export function QuotaMeter() {
+  const { t, i18n } = useTranslation('admin');
+  const quota = useUploadQuota();
+  const id = useId();
+  if (!quota.data) return null;
+  const q = quota.data;
+  const ratio = q.limit_bytes > 0 ? Math.min(q.used_bytes / q.limit_bytes, 1) : 1;
+  const fmt = (n: number) => formatBytes(n, i18n.language);
+  return (
+    <div className={u.quota}>
+      <span className={u.quotaText} id={id}>
+        {t('uploads.quota', { used: fmt(q.used_bytes), limit: fmt(q.limit_bytes) })}
+        {q.per_user_limit_bytes !== null &&
+          ` · ${t('uploads.quota_mine', { used: fmt(q.user_used_bytes), limit: fmt(q.per_user_limit_bytes) })}`}
+      </span>
+      <div className={u.progress} role="progressbar" aria-labelledby={id} aria-valuenow={Math.round(ratio * 100)} aria-valuemin={0} aria-valuemax={100}>
+        <span style={{ width: `${ratio * 100}%` }} />
+      </div>
+    </div>
+  );
+}
+
+/** Понятный текст причины: код из errors:<code> или текст отклонения админа. */
+export function useReasonText(): (reason: string | null) => string | null {
+  const { t, i18n } = useTranslation(['admin', 'errors']);
+  const tr = t as unknown as (k: string) => string;
+  return (reason) => {
+    if (!reason) return null;
+    const code = reason.split(':')[0]!.trim();
+    const key = `errors:${code}`;
+    if (i18n.exists(key)) {
+      const rest = reason.slice(code.length + 1).trim();
+      return rest ? `${tr(key)}: ${rest}` : tr(key);
+    }
+    return reason;
+  };
+}

apps/web/src/features/uploads/queries.ts

@@ -0,0 +1,27 @@
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { useSession } from '../../app/session';
+import { uploadsApi } from './api';
+import { MOVING, type UploadStatus } from './common';
+
+export function useUploadsApi() { return uploadsApi(useSession().client); }
+
+export function useUploadQueue(status: UploadStatus[], tab: string, onlyPossible: boolean) {
+  const api = useUploadsApi();
+  return useInfiniteQuery({
+    queryKey: ['admin-uploads', tab, onlyPossible],
+    initialPageParam: undefined as string | undefined,
+    queryFn: ({ pageParam }) => api.list(status, onlyPossible, pageParam),
+    getNextPageParam: (p) => p.next_cursor ?? undefined,
+    refetchInterval: (q) => q.state.data?.pages.some((p) => p.items.some((it) => MOVING.includes(it.status))) ? 5000 : false,
+  });
+}
+
+export function useUploadSources() {
+  const api = useUploadsApi();
+  return useQuery({ queryKey: ['sources'], queryFn: api.sources });
+}
+
+export function useUploadSettings() {
+  const api = useUploadsApi();
+  return useQuery({ queryKey: ['upload-settings'], queryFn: api.settings });
+}

apps/web/src/pages/admin/AdminSettingsPage.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 
 import s from '../page.module.css';
-import { UploadSettingsSection } from './UploadQueuePage';
+import { UploadSettingsSection } from '../../features/uploads/UploadSettingsSection';
 
 /** «Настройки» админки: параметры сервера, которые меняет администратор (пока — очередь на добавление). */
 export function AdminSettingsPage() {

apps/web/src/pages/admin/UploadQueuePage.tsx

@@ -1,640 +1,3 @@
-import type { components } from '@pipu/api-client';
-import { ApiError, unwrap } from '@pipu/core';
-import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { UploadQueue } from '../../features/uploads/UploadQueue';
 
-import { useSession } from '../../app/session';
-import { needsFormatAttention } from '../../features/uploads/files';
-import { useErrorText, useFieldError } from '../../shared/lib/errors';
-import { formatBytes, formatDateTime, formatDuration } from '../../shared/lib/format';
-import { checkIcon, closeIcon, editIcon, inboxIcon, refreshIcon } from '../../shared/ui/icons';
-import { Button, cx, Dialog, EmptyState, Field, FormError, Icon } from '../../shared/ui/ui';
-import s from '../page.module.css';
-import { MOVING, QuotaMeter, UploadStatusBadge, useReasonText, type UploadFile, type UploadStatus } from '../uploads/common';
-import u from '../uploads/uploads.module.css';
-
-type Meta = components['schemas']['UploadMeta'];
-type Settings = components['schemas']['UploadSettings'];
-
-const TABS = {
-  review: ['pending_review'],
-  failed: ['import_failed'],
-  progress: ['uploading', 'processing', 'approved', 'importing'],
-  imported: ['imported'],
-  declined: ['rejected', 'duplicate', 'invalid', 'withdrawn', 'expired'],
-} satisfies Record<string, UploadStatus[]>;
-type Tab = keyof typeof TABS;
-
-/** «Очередь на добавление» (docs/uploads.md#8): рассмотрение по пачкам, правка метаданных, массовые решения. */
-export function UploadQueuePage() {
-  const { t } = useTranslation(['admin', 'common']);
-  const session = useSession();
-  const queryClient = useQueryClient();
-  const errorText = useErrorText();
-  const [tab, setTab] = useState<Tab>('review');
-  const [onlyPossible, setOnlyPossible] = useState(false);
-  const [selected, setSelected] = useState<Set<string>>(new Set());
-  const [editing, setEditing] = useState<UploadFile | null>(null);
-  const [batchEdit, setBatchEdit] = useState<string | null>(null);
-  const [rejecting, setRejecting] = useState(false);
-
-  const list = useInfiniteQuery({
-    queryKey: ['admin-uploads', tab, onlyPossible],
-    initialPageParam: undefined as string | undefined,
-    queryFn: async ({ pageParam }) =>
-      unwrap(
-        await session.client.GET('/api/v1/admin/uploads', {
-          params: {
-            query: { status: [...TABS[tab]], possible_duplicate: onlyPossible || undefined, cursor: pageParam, limit: 100 },
-          },
-        }),
-      ),
-    getNextPageParam: (p) => p.next_cursor ?? undefined,
-    refetchInterval: (q) =>
-      q.state.data?.pages.some((p) => p.items.some((it) => MOVING.includes(it.status))) ? 5000 : false,
-  });
-  const items = useMemo(() => list.data?.pages.flatMap((p) => p.items) ?? [], [list.data]);
-  useEffect(() => setSelected(new Set()), [tab, onlyPossible]);
-
-  const refresh = async () => {
-    setSelected(new Set());
-    await queryClient.invalidateQueries({ queryKey: ['admin-uploads'] });
-    await queryClient.invalidateQueries({ queryKey: ['upload-quota'] });
-  };
-  const review = useMutation({
-    mutationFn: async (v: { decision: 'approve' | 'reject'; ids: string[]; reason?: string }) =>
-      unwrap(
-        await session.client.POST('/api/v1/admin/uploads/review', {
-          body: { file_ids: v.ids, decision: v.decision, reason: v.reason },
-        }),
-      ),
-    onSuccess: refresh,
-  });
-  const retry = useMutation({
-    mutationFn: async (id: string) =>
-      unwrap(await session.client.POST('/api/v1/admin/uploads/files/{id}/retry', { params: { path: { id } } })),
-    onSuccess: refresh,
-  });
-  const failed = review.data?.items.filter((r) => !r.ok) ?? [];
-
-  // Группировка по пачке: файлы одной загрузки (обычно альбом) рассматриваются вместе.
-  const batches = useMemo(() => {
-    const m = new Map<string, UploadFile[]>();
-    for (const f of items) m.set(f.batch_id, [...(m.get(f.batch_id) ?? []), f]);
-    return [...m.values()];
-  }, [items]);
-  const toggle = (ids: string[], on: boolean) =>
-    setSelected((cur) => {
-      const next = new Set(cur);
-      for (const id of ids) {
-        if (on) next.add(id);
-        else next.delete(id);
-      }
-      return next;
-    });
-  const selectable = tab === 'review' || tab === 'failed';
-  const ids = [...selected];
-
-  return (
-    <div className={s.page}>
-      <div className={s.head}>
-        <div>
-          <h1>{t('uploads.queue_title')}</h1>
-          <p className={s.subtitle}>{t('uploads.queue_subtitle')}</p>
-        </div>
-        <QuotaMeter />
-      </div>
-      <div className={s.toolbar}>
-        <div className={s.chips} role="group" aria-label={t('uploads.filter')}>
-          {(Object.keys(TABS) as Tab[]).map((k) => (
-            <button key={k} type="button" className={s.chip} aria-pressed={tab === k} onClick={() => setTab(k)}>
-              {t(`uploads.tab_${k}`)}
-            </button>
-          ))}
-        </div>
-        <span style={{ flex: 1 }} />
-        <label className={u.sub} style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-          <input type="checkbox" checked={onlyPossible} onChange={(e) => setOnlyPossible(e.target.checked)} />
-          {t('uploads.only_possible')}
-        </label>
-      </div>
-      <FormError>{(list.error ?? review.error ?? retry.error) ? errorText(list.error ?? review.error ?? retry.error) : null}</FormError>
-      {failed.length > 0 && (
-        <FormError>{t('uploads.review_failed', { count: failed.length, reason: failed[0]?.error ? errorText(problemError(failed[0].error)) : '' })}</FormError>
-      )}
-      {list.isSuccess && items.length === 0 && <EmptyState icon={inboxIcon}>{t('uploads.queue_empty')}</EmptyState>}
-
-      {batches.map((files) => (
-        <BatchCard
-          key={files[0]!.batch_id}
-          files={files}
-          selectable={selectable}
-          selected={selected}
-          onToggle={toggle}
-          onEdit={setEditing}
-          onEditBatch={setBatchEdit}
-          onRetry={(id) => retry.mutate(id)}
-        />
-      ))}
-      {list.hasNextPage && (
-        <Button busy={list.isFetchingNextPage} onClick={() => void list.fetchNextPage()}>
-          {t('uploads.load_more')}
-        </Button>
-      )}
-
-      {ids.length > 0 && (
-        <div className={u.bulk} role="region" aria-label={t('uploads.bulk')}>
-          <span>{t('uploads.selected', { count: ids.length })}</span>
-          <span style={{ flex: 1 }} />
-          <Button variant="ghost" onClick={() => setSelected(new Set())}>
-            {t('common:form.cancel')}
-          </Button>
-          <Button variant="danger" icon={closeIcon} onClick={() => setRejecting(true)}>
-            {t('uploads.reject')}
-          </Button>
-          {tab === 'review' && (
-            <Button variant="primary" icon={checkIcon} busy={review.isPending} onClick={() => review.mutate({ decision: 'approve', ids })}>
-              {t('uploads.approve')}
-            </Button>
-          )}
-        </div>
-      )}
-
-      {batchEdit && (
-        <BatchEditDialog
-          batchId={batchEdit}
-          onClose={() => setBatchEdit(null)}
-          onSaved={() => {
-            setBatchEdit(null);
-            void refresh();
-          }}
-        />
-      )}
-
-      {editing && (
-        <EditDialog
-          file={editing}
-          onClose={() => setEditing(null)}
-          onSaved={() => {
-            review.reset();
-            void refresh();
-          }}
-        />
-      )}
-      {rejecting && (
-        <RejectDialog
-          count={ids.length}
-          busy={review.isPending}
-          onClose={() => setRejecting(false)}
-          onReject={(reason) => {
-            setRejecting(false);
-            review.mutate({ decision: 'reject', ids, reason });
-          }}
-        />
-      )}
-    </div>
-  );
-}
-
-/** Problem из ответа массового решения → объект, понятный useErrorText. */
-function problemError(p: components['schemas']['Problem']) {
-  return new ApiError(p.status, p.code, p.params ?? {});
-}
-
-function BatchCard({
-  files,
-  selectable,
-  selected,
-  onToggle,
-  onEdit,
-  onEditBatch,
-  onRetry,
-}: {
-  files: UploadFile[];
-  selectable: boolean;
-  selected: Set<string>;
-  onToggle: (ids: string[], on: boolean) => void;
-  onEdit: (f: UploadFile) => void;
-  onEditBatch: (batchId: string) => void;
-  onRetry: (id: string) => void;
-}) {
-  const { t, i18n } = useTranslation('admin');
-  const first = files[0]!;
-  const ids = files.map((f) => f.id);
-  const all = ids.every((id) => selected.has(id));
-  const size = files.reduce((n, f) => n + f.size_bytes, 0);
-  return (
-    <section className={u.batch} aria-label={t('uploads.batch_of', { author: first.author.username })}>
-      <div className={u.batchHead}>
-        {selectable && (
-          <input type="checkbox" aria-label={t('uploads.select_batch')} checked={all} onChange={(e) => onToggle(ids, e.target.checked)} />
-        )}
-        <b>{first.author.username}</b>
-        <span>{formatDateTime(first.created_at, i18n.language)}</span>
-        <span>{t('uploads.batch_size', { count: files.length, size: formatBytes(size, i18n.language) })}</span>
-        {first.batch_comment && <span className={u.comment}>«{first.batch_comment}»</span>}
-        <span style={{ flex: 1 }} />
-        {selectable && (
-          <Button variant="ghost" onClick={() => onEditBatch(first.batch_id)}>
-            {t('uploads.edit_batch')}
-          </Button>
-        )}
-      </div>
-      {files.map((f) => (
-        <QueueRow
-          key={f.id}
-          file={f}
-          selectable={selectable}
-          checked={selected.has(f.id)}
-          onCheck={(on) => onToggle([f.id], on)}
-          onEdit={() => onEdit(f)}
-          onRetry={() => onRetry(f.id)}
-        />
-      ))}
-    </section>
-  );
-}
-
-function QueueRow({
-  file: f,
-  selectable,
-  checked,
-  onCheck,
-  onEdit,
-  onRetry,
-}: {
-  file: UploadFile;
-  selectable: boolean;
-  checked: boolean;
-  onCheck: (on: boolean) => void;
-  onEdit: () => void;
-  onRetry: () => void;
-}) {
-  const { t, i18n } = useTranslation('admin');
-  const reason = useReasonText()(f.status_reason);
-  const m = f.metadata;
-  const quality = [
-    f.format?.toUpperCase(),
-    f.bitrate ? `${Math.round(f.bitrate / 1000)} kbps` : null,
-    f.sample_rate ? `${(f.sample_rate / 1000).toFixed(1)} kHz` : null,
-    f.bit_depth ? `${f.bit_depth} bit` : null,
-    f.duration_ms ? formatDuration(f.duration_ms) : null,
-    formatBytes(f.size_bytes, i18n.language),
-  ]
-    .filter(Boolean)
-    .join(' · ');
-  const editable = f.status === 'pending_review' || f.status === 'import_failed';
-  return (
-    <div className={u.queueRow}>
-      {selectable ? (
-        <input type="checkbox" aria-label={t('uploads.select_file', { name: f.original_name })} checked={checked} onChange={(e) => onCheck(e.target.checked)} />
-      ) : (
-        <span />
-      )}
-      <div className={u.meta}>
-        <span className={u.metaTitle}>{m ? `${m.artist} — ${m.title}` : f.original_name}</span>
-        {m && (
-          <span className={u.sub}>
-            {[m.album, m.year, m.disc && m.disc > 1 ? t('uploads.disc', { n: m.disc }) : null, m.track ? `#${m.track}` : null, m.genre]
-              .filter(Boolean)
-              .join(' · ')}
-            {f.metadata_edited && ` · ${t('uploads.edited')}`}
-          </span>
-        )}
-        <span className={u.sub}>{quality}</span>
-        <span className={u.sub} title={f.client_rel_path ?? undefined}>
-          {f.client_rel_path ?? f.original_name}
-        </span>
-      </div>
-      <div className={u.meta}>
-        <div className={u.flags}>
-          <UploadStatusBadge status={f.status} />
-          {needsFormatAttention(f.format, f.original_name) && (
-            <span className={cx(s.badge, u.tone_warn)} title={t('uploads.format_attention')}>
-              {t('uploads.flag_attention')}
-            </span>
-          )}
-          {f.possible_duplicate && <span className={cx(s.badge, u.tone_warn)}>{t('uploads.flag_possible')}</span>}
-          {f.quality_upgrade && <span className={cx(s.badge, u.tone_info)}>{t('uploads.flag_quality')}</span>}
-          {f.matched_album_id ? (
-            <span className={cx(s.badge, u.tone_info)}>{t('uploads.flag_existing_album')}</span>
-          ) : (
-            m && <span className={cx(s.badge, u.tone_muted)}>{t('uploads.flag_new_album')}</span>
-          )}
-        </div>
-        {f.target_rel_path && <span className={u.target}>{f.target_rel_path}</span>}
-        {reason && <span className={f.status === 'pending_review' ? u.warn : u.bad}>{reason}</span>}
-        {f.duplicate_level && f.status === 'duplicate' && (
-          <span className={u.sub}>{t(`uploads.dup_level_${f.duplicate_level}`)}</span>
-        )}
-      </div>
-      <div className={u.rowActions}>
-        {f.stream_url && (
-          <audio controls preload="none" src={f.stream_url} aria-label={t('uploads.listen', { name: f.original_name })} />
-        )}
-        {editable && (
-          <Button variant="ghost" aria-label={t('uploads.edit', { name: f.original_name })} onClick={onEdit}>
-            <Icon src={editIcon} size={18} />
-          </Button>
-        )}
-        {f.status === 'import_failed' && (
-          <Button variant="ghost" icon={refreshIcon} onClick={onRetry}>
-            {t('uploads.retry')}
-          </Button>
-        )}
-      </div>
-    </div>
-  );
-}
-
-const EMPTY_META: Meta = { artist: '', albumartist: '', album: '', title: '', genre: '', year: null, track: null, disc: null };
-
-function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string; onClose: () => void; onSaved: () => void }) {
-  const { t } = useTranslation(['admin', 'common']);
-  const session = useSession();
-  const errorText = useErrorText();
-  const [artist, setArtist] = useState('');
-  const [album, setAlbum] = useState('');
-  const [year, setYear] = useState('');
-  const [cover, setCover] = useState<string | null | undefined>(undefined);
-  const save = useMutation({
-    mutationFn: async () =>
-      unwrap(
-        await session.client.PATCH('/api/v1/admin/uploads/batches/{id}', {
-          params: { path: { id: batchId } },
-          body: {
-            ...(artist.trim() ? { artist: artist.trim() } : {}),
-            ...(album.trim() ? { album: album.trim() } : {}),
-            ...(year.trim() ? { year: Number.parseInt(year, 10) } : {}),
-            ...(cover !== undefined ? { cover_base64: cover } : {}),
-          },
-        }),
-      ),
-    onSuccess: onSaved,
-  });
-  const pickCover = (file: File | undefined) => {
-    if (!file) {
-      setCover(undefined);
-      return;
-    }
-    const reader = new FileReader();
-    reader.onload = () => {
-      const data = String(reader.result ?? '');
-      const comma = data.indexOf(',');
-      setCover(comma >= 0 ? data.slice(comma + 1) : data);
-    };
-    reader.readAsDataURL(file);
-  };
-  return (
-    <Dialog
-      title={t('uploads.batch_edit_title')}
-      onClose={onClose}
-      footer={
-        <>
-          <Button variant="ghost" onClick={onClose}>
-            {t('common:form.cancel')}
-          </Button>
-          <Button variant="primary" busy={save.isPending} onClick={() => save.mutate()}>
-            {t('uploads.save')}
-          </Button>
-        </>
-      }
-    >
-      <div className={s.sessions}>
-        <p className={s.note}>{t('uploads.batch_edit_hint')}</p>
-        <Field label={t('uploads.meta_artist')} value={artist} onChange={setArtist} maxLength={500} />
-        <Field label={t('uploads.meta_album')} value={album} onChange={setAlbum} maxLength={500} />
-        <Field label={t('uploads.meta_year')} value={year} inputMode="numeric" onChange={setYear} />
-        <label className={s.sessions}>
-          <span>{t('uploads.batch_cover')}</span>
-          <input type="file" accept="image/jpeg,image/png,image/webp" onChange={(e) => pickCover(e.target.files?.[0])} />
-        </label>
-        <Button variant="ghost" onClick={() => setCover(null)}>
-          {t('uploads.batch_cover_clear')}
-        </Button>
-        <FormError>{save.error ? errorText(save.error) : null}</FormError>
-      </div>
-    </Dialog>
-  );
-}
-
-function EditDialog({ file, onClose, onSaved }: { file: UploadFile; onClose: () => void; onSaved: () => void }) {
-  const { t } = useTranslation(['admin', 'common']);
-  const session = useSession();
-  const errorText = useErrorText();
-  const fieldError = useFieldError();
-  const [m, setM] = useState<Meta>(file.metadata ?? EMPTY_META);
-  const [source, setSource] = useState(file.target_source_id ?? '');
-  const sources = useQuery({
-    queryKey: ['sources'],
-    queryFn: async () => unwrap(await session.client.GET('/api/v1/admin/sources')).items,
-  });
-  const save = useMutation({
-    mutationFn: async () =>
-      unwrap(
-        await session.client.PATCH('/api/v1/admin/uploads/files/{id}', {
-          params: { path: { id: file.id } },
-          body: { metadata: m, ...(source ? { target_source_id: source } : {}) },
-        }),
-      ),
-    onSuccess: () => {
-      onSaved();
-      onClose();
-    },
-  });
-  const text = (k: 'artist' | 'albumartist' | 'album' | 'title' | 'genre') => (
-    <Field label={t(`uploads.meta_${k}`)} value={m[k]} onChange={(v) => setM({ ...m, [k]: v })} maxLength={500} />
-  );
-  const num = (k: 'year' | 'track' | 'disc') => (
-    <Field
-      label={t(`uploads.meta_${k}`)}
-      value={m[k] === null ? '' : String(m[k])}
-      inputMode="numeric"
-      onChange={(v) => setM({ ...m, [k]: v.trim() === '' ? null : Number.parseInt(v, 10) || null })}
-    />
-  );
-  const accepting = sources.data?.filter((x) => x.accepts_uploads) ?? [];
-  return (
-    <Dialog
-      title={t('uploads.edit_title')}
-      onClose={onClose}
-      footer={
-        <>
-          <Button variant="ghost" onClick={onClose}>
-            {t('common:form.cancel')}
-          </Button>
-          <Button variant="primary" busy={save.isPending} disabled={!m.artist.trim() || !m.title.trim()} onClick={() => save.mutate()}>
-            {t('uploads.save')}
-          </Button>
-        </>
-      }
-    >
-      <div className={s.sessions}>
-        <p className={s.note}>{file.client_rel_path ?? file.original_name}</p>
-        <div className={u.grid}>
-          {text('artist')}
-          {text('albumartist')}
-          {text('album')}
-          {text('title')}
-          {text('genre')}
-          {num('year')}
-          {num('track')}
-          {num('disc')}
-        </div>
-        <label className={s.sessions}>
-          <span>{t('uploads.target_source')}</span>
-          <select className={s.select} value={source} onChange={(e) => setSource(e.target.value)}>
-            <option value="">{t('uploads.target_default')}</option>
-            {accepting.map((x) => (
-              <option key={x.id} value={x.id}>
-                {x.name}
-              </option>
-            ))}
-          </select>
-        </label>
-        <p className={s.note}>{t('uploads.tags_note')}</p>
-        <FormError>{save.error ? (fieldError(save.error, 'metadata') ?? errorText(save.error)) : null}</FormError>
-      </div>
-    </Dialog>
-  );
-}
-
-function RejectDialog({
-  count,
-  busy,
-  onClose,
-  onReject,
-}: {
-  count: number;
-  busy: boolean;
-  onClose: () => void;
-  onReject: (reason: string) => void;
-}) {
-  const { t } = useTranslation(['admin', 'common']);
-  const [reason, setReason] = useState('');
-  return (
-    <Dialog
-      title={t('uploads.reject_title', { count })}
-      onClose={onClose}
-      footer={
-        <>
-          <Button variant="ghost" onClick={onClose}>
-            {t('common:form.cancel')}
-          </Button>
-          <Button variant="danger" busy={busy} onClick={() => onReject(reason)}>
-            {t('uploads.reject')}
-          </Button>
-        </>
-      }
-    >
-      <label className={s.sessions}>
-        <span>{t('uploads.reject_reason')}</span>
-        <textarea className={u.textarea} value={reason} maxLength={1000} onChange={(e) => setReason(e.target.value)} />
-      </label>
-    </Dialog>
-  );
-}
-
-const GB = 1024 ** 3;
-
-/** Настройки очереди: общий лимит, лимит на модератора, размер файла, хранилище по умолчанию. */
-export function UploadSettingsSection() {
-  const { t } = useTranslation(['admin', 'common']);
-  const session = useSession();
-  const queryClient = useQueryClient();
-  const errorText = useErrorText();
-  const settings = useQuery({
-    queryKey: ['upload-settings'],
-    queryFn: async () => unwrap(await session.client.GET('/api/v1/admin/settings/uploads')),
-  });
-  const sources = useQuery({
-    queryKey: ['sources'],
-    queryFn: async () => unwrap(await session.client.GET('/api/v1/admin/sources')).items,
-  });
-  const [form, setForm] = useState<{ queue: string; perUser: string; maxFile: string; source: string; upgrade: boolean } | null>(null);
-  useEffect(() => {
-    if (settings.data) setForm(toForm(settings.data));
-  }, [settings.data]);
-
-  const save = useMutation({
-    mutationFn: async () => {
-      const f = form!;
-      const gb = (v: string) => Math.round(Number.parseFloat(v.replace(',', '.')) * GB);
-      return unwrap(
-        await session.client.PATCH('/api/v1/admin/settings/uploads', {
-          body: {
-            queue_limit_bytes: gb(f.queue),
-            max_file_bytes: gb(f.maxFile),
-            per_user_limit_bytes: f.perUser.trim() ? gb(f.perUser) : null,
-            default_source_id: f.source || null,
-            allow_quality_upgrade: f.upgrade,
-          },
-        }),
-      );
-    },
-    onSuccess: async (data) => {
-      queryClient.setQueryData(['upload-settings'], data);
-      await queryClient.invalidateQueries({ queryKey: ['upload-quota'] });
-    },
-  });
-  if (!form) return null;
-  const valid = [form.queue, form.maxFile].every((v) => Number.parseFloat(v.replace(',', '.')) > 0) &&
-    (!form.perUser.trim() || Number.parseFloat(form.perUser.replace(',', '.')) > 0);
-  const dirty = settings.data ? JSON.stringify(toForm(settings.data)) !== JSON.stringify(form) : false;
-  return (
-    <section className={s.section}>
-      <h2>{t('uploads.settings_title')}</h2>
-      <div className={u.settingsGrid}>
-        <Field label={t('uploads.set_queue')} value={form.queue} onChange={(v) => setForm({ ...form, queue: v })} inputMode="decimal" />
-        <Field
-          label={t('uploads.set_per_user')}
-          value={form.perUser}
-          hint={t('uploads.set_per_user_hint')}
-          onChange={(v) => setForm({ ...form, perUser: v })}
-          inputMode="decimal"
-        />
-        <Field label={t('uploads.set_max_file')} value={form.maxFile} onChange={(v) => setForm({ ...form, maxFile: v })} inputMode="decimal" />
-        <label>
-          <span className={u.settingsLabel}>{t('uploads.set_source')}</span>
-          <select className={s.select} value={form.source} onChange={(e) => setForm({ ...form, source: e.target.value })}>
-            <option value="">{t('uploads.set_source_auto')}</option>
-            {sources.data
-              ?.filter((x) => x.accepts_uploads)
-              .map((x) => (
-                <option key={x.id} value={x.id}>
-                  {x.name}
-                </option>
-              ))}
-          </select>
-        </label>
-        <div>
-          <label className={u.settingsCheck}>
-            <input type="checkbox" checked={form.upgrade} onChange={(e) => setForm({ ...form, upgrade: e.target.checked })} />
-            <span>{t('uploads.set_upgrade')}</span>
-          </label>
-        </div>
-      </div>
-      <p className={s.note}>{t('uploads.set_note')}</p>
-      <div className={s.toolbar}>
-        <span style={{ flex: 1 }} />
-        <Button variant="primary" busy={save.isPending} disabled={!dirty || !valid} onClick={() => save.mutate()}>
-          {t('uploads.save')}
-        </Button>
-      </div>
-      {save.isSuccess && !dirty && <span className={s.ok}>{t('uploads.saved')}</span>}
-      <FormError>{save.error ? errorText(save.error) : null}</FormError>
-    </section>
-  );
-}
-
-function toForm(st: Settings) {
-  const gb = (n: number) => String(Math.round((n / GB) * 100) / 100);
-  return {
-    queue: gb(st.queue_limit_bytes),
-    perUser: st.per_user_limit_bytes === null ? '' : gb(st.per_user_limit_bytes),
-    maxFile: gb(st.max_file_bytes),
-    source: st.default_source_id ?? '',
-    upgrade: st.allow_quality_upgrade,
-  };
-}
+export function UploadQueuePage() { return <UploadQueue />; }

apps/web/src/pages/uploads/common.tsx

@@ -1,84 +1 @@
-import type { components } from '@pipu/api-client';
-import { unwrap } from '@pipu/core';
-import { useQuery } from '@tanstack/react-query';
-import { useId } from 'react';
-import { useTranslation } from 'react-i18next';
-
-import { useSession } from '../../app/session';
-import { formatBytes } from '../../shared/lib/format';
-import { cx } from '../../shared/ui/ui';
-import s from '../page.module.css';
-import u from './uploads.module.css';
-
-export type UploadStatus = components['schemas']['UploadStatus'];
-export type UploadFile = components['schemas']['UploadFile'];
-
-const TONE: Record<UploadStatus, 'ok' | 'warn' | 'bad' | 'info' | 'muted'> = {
-  uploading: 'info',
-  processing: 'info',
-  pending_review: 'warn',
-  approved: 'info',
-  importing: 'info',
-  imported: 'ok',
-  import_failed: 'bad',
-  duplicate: 'muted',
-  invalid: 'bad',
-  rejected: 'bad',
-  withdrawn: 'muted',
-  expired: 'muted',
-};
-
-/** Статусы, которые ещё меняются сами (обработка, импорт) — список опрашивается. */
-export const MOVING: UploadStatus[] = ['uploading', 'processing', 'approved', 'importing'];
-
-export function UploadStatusBadge({ status }: { status: UploadStatus }) {
-  const { t } = useTranslation('admin');
-  return <span className={cx(s.badge, u[`tone_${TONE[status]}`])}>{t(`uploads.status.${status}`)}</span>;
-}
-
-export function useUploadQuota() {
-  const session = useSession();
-  return useQuery({
-    queryKey: ['upload-quota'],
-    queryFn: async () => unwrap(await session.client.GET('/api/v1/uploads/quota')),
-  });
-}
-
-/** «Очередь: 6,2 ГБ из 10 ГБ» — видят модераторы и админ (docs/uploads.md#3). */
-export function QuotaMeter() {
-  const { t, i18n } = useTranslation('admin');
-  const quota = useUploadQuota();
-  const id = useId();
-  if (!quota.data) return null;
-  const q = quota.data;
-  const ratio = q.limit_bytes > 0 ? Math.min(q.used_bytes / q.limit_bytes, 1) : 1;
-  const fmt = (n: number) => formatBytes(n, i18n.language);
-  return (
-    <div className={u.quota}>
-      <span className={u.quotaText} id={id}>
-        {t('uploads.quota', { used: fmt(q.used_bytes), limit: fmt(q.limit_bytes) })}
-        {q.per_user_limit_bytes !== null &&
-          ` · ${t('uploads.quota_mine', { used: fmt(q.user_used_bytes), limit: fmt(q.per_user_limit_bytes) })}`}
-      </span>
-      <div className={u.progress} role="progressbar" aria-labelledby={id} aria-valuenow={Math.round(ratio * 100)} aria-valuemin={0} aria-valuemax={100}>
-        <span style={{ width: `${ratio * 100}%` }} />
-      </div>
-    </div>
-  );
-}
-
-/** Понятный текст причины: код из errors:<code> или текст отклонения админа. */
-export function useReasonText(): (reason: string | null) => string | null {
-  const { t, i18n } = useTranslation(['admin', 'errors']);
-  const tr = t as unknown as (k: string) => string;
-  return (reason) => {
-    if (!reason) return null;
-    const code = reason.split(':')[0]!.trim();
-    const key = `errors:${code}`;
-    if (i18n.exists(key)) {
-      const rest = reason.slice(code.length + 1).trim();
-      return rest ? `${tr(key)}: ${rest}` : tr(key);
-    }
-    return reason;
-  };
-}
+export * from '../../features/uploads/common';

apps/web/src/player/analysis.ts

@@ -0,0 +1,31 @@
+export class AudioAnalysis {
+  constructor(private readonly getAnalyser: () => AnalyserNode | null) {}
+  private spectrum = new Uint8Array(512);
+  private audioFrame = { bass: 0, mid: 0, treble: 0 };
+  private sampledAt = -Infinity;
+  /** Shared spectrum snapshot; animation consumers never trigger React renders. */
+  read = (active: boolean) => {
+    const now = performance.now();
+    if (now - this.sampledAt < 12) return this.audioFrame;
+    this.sampledAt = now;
+    const analyser = this.getAnalyser();
+    if (!active || !analyser) {
+      this.audioFrame.bass = this.audioFrame.mid = this.audioFrame.treble = 0;
+      return this.audioFrame;
+    }
+    analyser.getByteFrequencyData(this.spectrum);
+    const band = (low: number, high: number) => {
+      const hz = analyser.context.sampleRate / analyser.fftSize;
+      const start = Math.max(1, Math.ceil(low / hz));
+      const end = Math.min(this.spectrum.length, Math.ceil(high / hz));
+      let sum = 0;
+      for (let i = start; i < end; i++) sum += (this.spectrum[i]! / 255) ** 2;
+      return Math.sqrt(sum / Math.max(1, end - start));
+    };
+    this.audioFrame.bass = band(40, 220);
+    this.audioFrame.mid = band(220, 2500);
+    this.audioFrame.treble = band(2500, 10000);
+    return this.audioFrame;
+  };
+
+}

apps/web/src/player/audio.test.ts

@@ -1,48 +1,57 @@
-import type { AuthSession } from '@pipu/core';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { Player } from './player';
+import { AudioAnalysis } from './analysis';
+import { AudioEngine } from './engine';
 
 afterEach(() => vi.restoreAllMocks());
 
 function fixture() {
-  const player = new Player({} as AuthSession, document.createElement('audio'));
   const sample = vi.fn((data: Uint8Array) => {
     data.fill(0);
     // 48 kHz / 1024: bins 1..4 cover the bass band.
     data.fill(255, 1, 5);
   });
-  Object.assign(player, {
-    state: { ...player.getState(), playing: true },
-    analyser: { context: { sampleRate: 48000 }, fftSize: 1024, getByteFrequencyData: sample },
-  });
-  return { player, sample };
+  const analyser = { context: { sampleRate: 48000 }, fftSize: 1024, getByteFrequencyData: sample } as unknown as AnalyserNode;
+  const analysis = new AudioAnalysis(() => analyser);
+  return { analysis, sample };
 }
 
 describe('audio reactivity', () => {
   it('separates bass from the other frequency bands and shares the frame', () => {
     vi.spyOn(performance, 'now').mockReturnValue(100);
-    const { player, sample } = fixture();
-    expect(player.readAudio()).toEqual({ bass: 1, mid: 0, treble: 0 });
-    player.readAudio();
+    const { analysis, sample } = fixture();
+    expect(analysis.read(true)).toEqual({ bass: 1, mid: 0, treble: 0 });
+    analysis.read(true);
     expect(sample).toHaveBeenCalledTimes(1);
   });
 
   it('returns silence after pausing or muting', () => {
     const clock = vi.spyOn(performance, 'now').mockReturnValue(100);
-    const { player, sample } = fixture();
-    player.readAudio();
-    Object.assign(player, { state: { ...player.getState(), playing: false } });
+    const { analysis, sample } = fixture();
+    analysis.read(true);
     clock.mockReturnValue(120);
-    expect(player.readAudio()).toEqual({ bass: 0, mid: 0, treble: 0 });
-    Object.assign(player, { state: { ...player.getState(), playing: true, muted: true } });
+    expect(analysis.read(false)).toEqual({ bass: 0, mid: 0, treble: 0 });
     clock.mockReturnValue(140);
-    expect(player.readAudio()).toEqual({ bass: 0, mid: 0, treble: 0 });
+    expect(analysis.read(false)).toEqual({ bass: 0, mid: 0, treble: 0 });
     expect(sample).toHaveBeenCalledTimes(1);
   });
 
   it('works when Web Audio is unavailable', () => {
-    const player = new Player({} as AuthSession, document.createElement('audio'));
-    expect(player.readAudio()).toEqual({ bass: 0, mid: 0, treble: 0 });
+    const analysis = new AudioAnalysis(() => null);
+    expect(analysis.read(false)).toEqual({ bass: 0, mid: 0, treble: 0 });
+  });
+});
+
+describe('audio engine lifetime', () => {
+  it('removes audio listeners on disposal', () => {
+    const audio = document.createElement('audio');
+    const engine = new AudioEngine(audio);
+    const playing = vi.fn();
+    engine.on('playing', playing);
+    audio.dispatchEvent(new Event('playing'));
+    expect(playing).toHaveBeenCalledTimes(1);
+    engine.dispose();
+    audio.dispatchEvent(new Event('playing'));
+    expect(playing).toHaveBeenCalledTimes(1);
   });
 });

apps/web/src/player/engine.ts

@@ -0,0 +1,66 @@
+import { AudioAnalysis } from './analysis';
+
+/** Browser audio graph and element lifetime; playback policy belongs to Player/core. */
+export class AudioEngine {
+  readonly audio: HTMLAudioElement;
+  readonly overlap: HTMLAudioElement;
+  private gain: GainNode | null = null;
+  private wired = false;
+  private analyser: AnalyserNode | null = null;
+  private audioContext: AudioContext | null = null;
+  readonly analysis = new AudioAnalysis(() => this.analyser);
+  private readonly unbind: (() => void)[] = [];
+  constructor(audio?: HTMLAudioElement) {
+    this.audio = audio ?? new Audio();
+    this.overlap = new Audio();
+    this.audio.preload = this.overlap.preload = 'auto';
+  }
+  resume() {
+    return this.audioContext?.state === 'suspended' ? this.audioContext.resume() : undefined;
+  }
+  on<K extends keyof HTMLMediaElementEventMap>(event: K, handler: (event: HTMLMediaElementEventMap[K]) => void) {
+    this.audio.addEventListener(event, handler);
+    this.unbind.push(() => this.audio.removeEventListener(event, handler));
+  }
+
+
+  applyLoudness(level: number) {
+    if (!this.wired && typeof AudioContext !== 'undefined') {
+      try {
+        const ctx = new AudioContext();
+        this.audioContext = ctx;
+        const src = ctx.createMediaElementSource(this.audio);
+        this.gain = ctx.createGain();
+        src.connect(this.gain);
+        this.gain.connect(ctx.destination);
+        this.analyser = ctx.createAnalyser();
+        this.analyser.fftSize = 1024;
+        this.analyser.smoothingTimeConstant = 0.55;
+        this.gain.connect(this.analyser);
+        // The overlap is already audible through its own output; analyse it only.
+        try {
+          const overlapSource = ctx.createMediaElementSource(this.overlap);
+          overlapSource.connect(ctx.destination);
+          overlapSource.connect(this.analyser);
+        } catch { /* Crossfade analysis is optional. */ }
+
+        this.audio.volume = 1;
+        this.wired = true;
+      } catch {
+        this.wired = true;
+      }
+    }
+    if (this.gain) this.gain.gain.value = level;
+    else this.audio.volume = Math.min(1, level);
+  }
+
+  dispose() {
+    for (const stop of this.unbind.splice(0)) stop();
+    for (const audio of [this.audio, this.overlap]) {
+      audio.pause();
+      audio.removeAttribute('src');
+      audio.load();
+    }
+    void this.audioContext?.close().catch(() => undefined);
+  }
+}

apps/web/src/player/media.ts

@@ -0,0 +1,105 @@
+import type { Track } from '@pipu/core';
+import { desktopHandle } from '../desktop';
+import type { PlayerState } from './types';
+
+export interface PlaybackControls {
+  play(): void; pause(): void; toggle(): void; next(): void; prev(): void; seek(ms: number): void;
+}
+
+export class MediaControls {
+  private lastDesktop: { id?: string; playing?: boolean } = {};
+  private desktopUnlisten: (() => void) | null = null;
+  private disposed = false;
+  constructor(
+    private readonly controls: PlaybackControls,
+    private readonly getState: () => PlayerState,
+    private readonly getAudio: () => HTMLAudioElement,
+  ) {
+    this.bindMediaSession();
+    this.bindDesktopMedia();
+  }
+
+  private bindDesktopMedia() {
+    void desktopHandle()?.listenMedia((action) => {
+      if (action === 'play') this.controls.play();
+      else if (action === 'pause' || action === 'stop') this.controls.pause();
+      else if (action === 'toggle') this.controls.toggle();
+      else if (action === 'next') this.controls.next();
+      else if (action === 'previous') this.controls.prev();
+    }).then((stop) => {
+      if (this.disposed) stop();
+      else this.desktopUnlisten = stop;
+    });
+  }
+
+  syncDesktopMedia() {
+    const desktop = desktopHandle();
+    const track = this.getState().track;
+    if (!desktop || !track) return;
+    if (this.lastDesktop.id === track.id && this.lastDesktop.playing === this.getState().playing) return;
+    this.lastDesktop = { id: track.id, playing: this.getState().playing };
+    desktop.setMedia({
+      title: track.title,
+      artist: track.artists.map((a) => a.name).join(', '),
+      album: track.album.title,
+      coverUrl: track.album.cover_url,
+      playing: this.getState().playing,
+    });
+  }
+
+  private bindMediaSession() {
+    const ms = typeof navigator !== 'undefined' ? navigator.mediaSession : undefined;
+    if (!ms) return;
+    const set = (action: MediaSessionAction, fn: MediaSessionActionHandler) => {
+      try {
+        ms.setActionHandler(action, fn);
+      } catch {
+        // действие не поддерживается браузером
+      }
+    };
+    set('play', () => this.controls.play());
+    set('pause', () => this.controls.pause());
+    set('nexttrack', () => this.controls.next());
+    set('previoustrack', () => this.controls.prev());
+    set('seekbackward', (d) => this.controls.seek(this.getState().positionMs - (d.seekOffset ?? 10) * 1000));
+    set('seekforward', (d) => this.controls.seek(this.getState().positionMs + (d.seekOffset ?? 10) * 1000));
+    set('seekto', (d) => d.seekTime !== undefined && this.controls.seek(d.seekTime * 1000));
+  }
+
+  updateMediaMetadata(track: Track) {
+    if (typeof navigator === 'undefined' || !navigator.mediaSession || typeof MediaMetadata === 'undefined') return;
+    const cover = track.album.cover_url;
+    navigator.mediaSession.metadata = new MediaMetadata({
+      title: track.title,
+      artist: track.artists.map((a) => a.name).join(', '),
+      album: track.album.title,
+      artwork: cover
+        ? [
+            { src: `${cover}&size=300`, sizes: '300x300', type: 'image/webp' },
+            { src: `${cover}&size=1200`, sizes: '1200x1200', type: 'image/webp' },
+          ]
+        : [],
+    });
+  }
+
+  updatePositionState() {
+    const ms = typeof navigator !== 'undefined' ? navigator.mediaSession : undefined;
+    const d = this.getAudio().duration;
+    if (!ms?.setPositionState || !Number.isFinite(d) || d <= 0) return;
+    try {
+      ms.setPositionState({ duration: d, position: Math.min(this.getAudio().currentTime, d), playbackRate: 1 });
+    } catch {
+      // некорректная позиция во время смены трека
+    }
+  }
+
+  dispose() {
+    this.disposed = true;
+    this.desktopUnlisten?.();
+    this.desktopUnlisten = null;
+    const ms = typeof navigator !== 'undefined' ? navigator.mediaSession : undefined;
+    for (const action of ['play', 'pause', 'nexttrack', 'previoustrack', 'seekbackward', 'seekforward', 'seekto'] as const) {
+      try { ms?.setActionHandler(action, null); } catch { /* Unsupported action. */ }
+    }
+  }
+}

apps/web/src/player/persistence.ts

@@ -0,0 +1,127 @@
+import { unwrap, type AuthSession, type PlayContext, type RepeatMode } from '@pipu/core';
+import type { PlayerState } from './types';
+
+const LOCAL_KEY = 'pipu.player';
+/** Сохраняем не больше этого числа треков очереди (лимит сервера — 500). */
+const MAX_SAVED_QUEUE = 500;
+
+export interface Saved {
+  queue: string[];
+  index: number;
+  positionMs: number;
+  context: PlayContext | null;
+  volume: number;
+  shuffle: boolean;
+  repeat: RepeatMode;
+  savedAt: string;
+}
+
+function deviceId(): string {
+  try {
+    let id = localStorage.getItem('pipu.device');
+    if (!id) {
+      id = crypto.randomUUID();
+      localStorage.setItem('pipu.device', id);
+    }
+    return id;
+  } catch {
+    return 'web';
+  }
+}
+
+export class PlaybackPersistence {
+  private readonly device = deviceId();
+  lastServerSave = 0;
+  constructor(private readonly session: AuthSession, private readonly getState: () => PlayerState) {}
+  snapshot(state: PlayerState): Saved {
+    const ids = state.queue.map((t) => t.id);
+    const start = Math.max(0, Math.min(state.index - Math.floor(MAX_SAVED_QUEUE / 2), ids.length - MAX_SAVED_QUEUE));
+    return {
+      queue: ids.slice(start, start + MAX_SAVED_QUEUE),
+      index: state.index - start,
+      positionMs: state.positionMs,
+      context: state.context,
+      volume: state.volume,
+      shuffle: state.shuffle,
+      repeat: state.repeat,
+      savedAt: new Date().toISOString(),
+    };
+  }
+  saveLocal() {
+    if (!this.getState().track) return;
+    try {
+      localStorage.setItem(LOCAL_KEY, JSON.stringify(this.snapshot(this.getState())));
+    } catch {
+      // недоступное хранилище не мешает воспроизведению
+    }
+  }
+
+  private saveTimer: ReturnType<typeof setTimeout> | null = null;
+
+  saveSoon() {
+    if (this.saveTimer) clearTimeout(this.saveTimer);
+    this.saveTimer = setTimeout(() => this.saveServer(), 1000);
+  }
+
+  /** PUT /me/playback-state; keepalive — запрос переживёт закрытие вкладки. */
+  saveServer(keepalive = false) {
+    const cur = this.getState().track;
+    if (!cur) return;
+    this.lastServerSave = Date.now();
+    this.saveLocal();
+    const s = this.snapshot(this.getState());
+    void this.session.client
+      .PUT('/api/v1/me/playback-state', {
+        body: {
+          track_id: cur.id,
+          position_ms: s.positionMs,
+          queue: s.queue,
+          queue_index: s.index,
+          context: s.context ? { type: s.context.type, id: s.context.id, label: s.context.label } : undefined,
+          shuffle: s.shuffle,
+          repeat_mode: s.repeat,
+          volume: s.volume,
+          device_id: this.device,
+        },
+        keepalive,
+      })
+      .catch(() => undefined);
+  }
+
+  async restore(): Promise<Saved | null> {
+    let local: Saved | null = null;
+    try {
+      const raw = localStorage.getItem(LOCAL_KEY);
+      local = raw ? (JSON.parse(raw) as Saved) : null;
+    } catch {
+      local = null;
+    }
+    let saved = local;
+    try {
+      const server = unwrap(await this.session.client.GET('/api/v1/me/playback-state'));
+      if (
+        server.track_id &&
+        server.updated_at &&
+        (!local || (server.device_id !== this.device && server.updated_at > local.savedAt))
+      ) {
+        saved = {
+          queue: server.queue,
+          index: server.queue_index,
+          positionMs: server.position_ms,
+          context: (server.context?.type ? server.context : null) as PlayContext | null,
+          volume: server.volume,
+          shuffle: server.shuffle,
+          repeat: server.repeat_mode,
+          savedAt: server.updated_at,
+        };
+      }
+    } catch {
+      // офлайн — остаёмся с локальной копией
+    }
+    return saved;
+  }
+  dispose() {
+    if (this.saveTimer) clearTimeout(this.saveTimer);
+    this.saveTimer = null;
+  }
+}

apps/web/src/player/player.ts

@@ -1,5 +1,9 @@
 import {
   EventBuffer,
+  WaveCoordinator,
+  EARLY_SKIP_MS,
+  type WaveOutcome,
+  type WaveFeedback,
   normalizeGain,
   PlayAttempt,
   PlayQueue,
@@ -10,80 +14,29 @@ import {
   type Track,
 } from '@pipu/core';
 
-import { desktopHandle } from '../desktop';
+import { MediaControls } from './media';
+import type { PlayerState } from './types';
+import { AudioEngine } from './engine';
+import { PlaybackPersistence } from './persistence';
 
 export type { PlayContext, Track };
 
-export interface WaveInfo {
-  sessionId: string;
-  activity: string | null;
-  mood: string | null;
-  /** Рекомендатель недоступен — играет запасная волна. */
-  fallback: boolean;
-}
+export type { WaveInfo } from '@pipu/core';
 
-type WaveOutcome = 'complete' | 'skip' | 'skip_early' | 'like' | 'dislike';
+export type { PlayerState } from './types';
 
-/** Когда в очереди волны остаётся столько треков, просим следующую пачку. */
-const WAVE_REFILL_AT = 2;
-/** Скип раньше этого — «ранний» (сильный отрицательный сигнал). */
-const EARLY_SKIP_MS = 30_000;
-
-export interface PlayerState {
-  wave: WaveInfo | null;
-  track: Track | null;
-  queue: Track[];
-  index: number;
-  context: PlayContext | null;
-  playing: boolean;
-  loading: boolean;
-  positionMs: number;
-  durationMs: number;
-  volume: number;
-  muted: boolean;
-  shuffle: boolean;
-  repeat: RepeatMode;
-  error: string | null;
-}
-
-const LOCAL_KEY = 'pipu.player';
 const SAVE_EVERY_MS = 10_000;
 const FLUSH_EVERY_MS = 30_000;
 const PRELOAD_BEFORE_MS = 20_000;
-/** Сохраняем не больше этого числа треков очереди (лимит сервера — 500). */
-const MAX_SAVED_QUEUE = 500;
-
-interface Saved {
-  queue: string[];
-  index: number;
-  positionMs: number;
-  context: PlayContext | null;
-  volume: number;
-  shuffle: boolean;
-  repeat: RepeatMode;
-  savedAt: string;
-}
-
-function deviceId(): string {
-  try {
-    let id = localStorage.getItem('pipu.device');
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem('pipu.device', id);
-    }
-    return id;
-  } catch {
-    return 'web';
-  }
-}
 
 /**
  * Плеер веба. Логика очереди и учёта событий — из @pipu/core; здесь — адаптер к HTMLAudioElement,
  * Media Session и сохранение «трек и момент» (локально и на сервере).
  */
 export class Player {
-  private readonly audio: HTMLAudioElement;
-  private readonly overlap: HTMLAudioElement;
+  private readonly engine: AudioEngine;
+  private get audio() { return this.engine.audio; }
+  private get overlap() { return this.engine.overlap; }
   private fading = false;
   private ignoreEnded = false;
   private readonly queue = new PlayQueue();
@@ -92,13 +45,17 @@ export class Player {
   private context: PlayContext | null = null;
   private state: PlayerState;
   private readonly listeners = new Set<() => void>();
-  private readonly device = deviceId();
-  private lastServerSave = 0;
+  private readonly persistence: PlaybackPersistence;
   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;
+  private readonly wavePolicy = new WaveCoordinator({
+    next: async (id: string, feedback: WaveFeedback[]) => unwrap(
+      await this.session.client.POST('/api/v1/wave/sessions/{id}/next', {
+        params: { path: { id } }, body: { feedback },
+      }),
+    ),
+  });
   private restoreVersion = 0;
   /** Реакция сохранена на сервере — списки на экране нужно перечитать. */
   onReaction: (() => void) | null = null;
@@ -107,10 +64,7 @@ export class Player {
     private readonly session: AuthSession,
     audio?: HTMLAudioElement,
   ) {
-    this.audio = audio ?? new Audio();
-    this.audio.preload = 'auto';
-    this.overlap = new Audio();
-    this.overlap.preload = 'auto';
+    this.engine = new AudioEngine(audio);
     this.events = new EventBuffer({
       send: async (events) => {
         unwrap(await this.session.client.POST('/api/v1/events', { body: { events } }));
@@ -121,9 +75,9 @@ export class Player {
       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,
     };
+    this.persistence = new PlaybackPersistence(session, this.getState);
     this.bindAudio();
-    this.bindMediaSession();
-    this.bindDesktopMedia();
+    this.media = new MediaControls(this, this.getState, () => this.audio);
   }
 
   /** Запуск фоновой отправки событий (парный вызов — dispose). */
@@ -140,13 +94,12 @@ export class Player {
 
   getState = () => this.state;
 
-  private lastDesktop: { id?: string; playing?: boolean } = {};
-  private desktopUnlisten: (() => void) | null = null;
+  private readonly media: MediaControls;
 
   private update(patch: Partial<PlayerState>) {
     this.state = { ...this.state, ...patch };
     for (const fn of this.listeners) fn();
-    this.syncDesktopMedia();
+    this.media.syncDesktopMedia();
   }
 
   private syncQueue() {
@@ -183,16 +136,19 @@ export class Player {
     this.restoreVersion++;
     this.finishAttempt('skip');
     this.leaveWave();
+    const version = this.wavePolicy.version;
     const res = unwrap(
       await this.session.client.POST('/api/v1/wave/sessions', {
         body: { activity, mood, ...(seed ? { seed: { type: seed.type, id: seed.id } } : {}) },
       }),
     );
+    if (!this.wavePolicy.isCurrent(version)) return;
     const tracks = res.tracks.filter((t) => t.available && t.stream_url);
     if (!tracks.length) {
       this.update({ error: 'wave.empty' });
       return;
     }
+    this.wavePolicy.activate(res.session_id);
     this.context = { type: 'wave', id: res.session_id, label: seed?.label };
     this.queue.shuffle = false;
     this.queue.repeat = 'off';
@@ -210,12 +166,14 @@ export class Player {
     const wave = this.state.wave;
     if (!wave) return this.startWave(activity, mood);
     this.update({ wave: { ...wave, activity, mood } });
+    const version = this.wavePolicy.changeContext(wave.sessionId);
     const res = unwrap(
       await this.session.client.PATCH('/api/v1/wave/sessions/{id}', {
         params: { path: { id: wave.sessionId } },
         body: { activity, mood },
       }),
     );
+    if (!this.wavePolicy.isCurrent(version)) return;
     const fresh = res.tracks.filter((t) => t.available && t.stream_url);
     this.queue.dropUpcoming();
     this.queue.append(fresh);
@@ -236,8 +194,8 @@ export class Player {
 
   private leaveWave() {
     const wave = this.state.wave;
+    this.wavePolicy.activate(null);
     if (!wave) return;
-    this.waveFeedback = [];
     this.update({ wave: null });
     void this.session.client
       .DELETE('/api/v1/wave/sessions/{id}', { params: { path: { id: wave.sessionId } } })
@@ -245,7 +203,7 @@ export class Player {
   }
 
   private noteWave(trackId: string, outcome: WaveOutcome) {
-    if (this.state.wave) this.waveFeedback.push({ track_id: trackId, outcome });
+    this.wavePolicy.note(trackId, outcome);
   }
 
   /**
@@ -253,29 +211,12 @@ export class Player {
    * после лайка, дизлайка или раннего скипа очередь должна сразу отразить реакцию.
    */
   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; // волну уже выключили
+    await this.wavePolicy.refill(this.queue.remaining, refresh, (res) => {
       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.update({ wave: { ...this.state.wave!, fallback: res.fallback } });
       this.syncQueue();
-    } catch {
-      this.waveFeedback = [...feedback, ...this.waveFeedback]; // отправим со следующим запросом
-    } finally {
-      this.waveLoading = false;
-    }
+    });
   }
 
   toggle() {
@@ -289,7 +230,7 @@ export class Player {
       void this.load(true, this.state.positionMs);
       return;
     }
-    if (this.audioContext?.state === 'suspended') void this.audioContext.resume().catch(() => undefined);
+    void this.engine.resume()?.catch(() => undefined);
     // play() в старых браузерах и jsdom может вернуть undefined вместо промиса.
     void Promise.resolve(this.audio.play()).catch(() => this.update({ playing: false }));
   }
@@ -402,7 +343,7 @@ export class Player {
     // Keep the restored element's buffer when the user presses Play.
     if (this.audio.getAttribute('src') !== track.stream_url) this.audio.src = track.stream_url;
     if (this.audio.currentTime !== startMs / 1000) this.audio.currentTime = startMs / 1000;
-    this.updateMediaMetadata(track);
+    this.media.updateMediaMetadata(track);
     if (!autoplay) return;
     this.applyLoudness();
     this.attempt = new PlayAttempt(track, startMs);
@@ -418,7 +359,8 @@ export class Player {
     void this.refillWave();
     if (autoplay) {
       try {
-        if (this.audioContext?.state === 'suspended') await this.audioContext.resume();
+        const resumed = this.engine.resume();
+        if (resumed) await resumed;
         await this.audio.play();
       } catch {
         // Автозапуск заблокирован браузером — ждём нажатия «Слушать».
@@ -465,73 +407,11 @@ export class Player {
     return Math.min(6, Math.max(0, this.prefs()?.crossfade_s ?? 0));
   }
 
-  /** Громкость пользователя × выравнивание к −14 LUFS. GainNode, если браузер его даёт. */
-  private gain: GainNode | null = null;
-  private wired = false;
-  private analyser: AnalyserNode | null = null;
-  private audioContext: AudioContext | null = null;
-  private spectrum = new Uint8Array(512);
-  private audioFrame = { bass: 0, mid: 0, treble: 0 };
-  private sampledAt = -Infinity;
-
-  /** Shared spectrum snapshot; animation consumers never trigger React renders. */
-  readAudio = () => {
-    const now = performance.now();
-    if (now - this.sampledAt < 12) return this.audioFrame;
-    this.sampledAt = now;
-    const active = this.state.playing && !this.state.loading && !this.state.muted;
-    const analyser = this.analyser;
-    if (!active || !analyser) {
-      this.audioFrame.bass = this.audioFrame.mid = this.audioFrame.treble = 0;
-      return this.audioFrame;
-    }
-    analyser.getByteFrequencyData(this.spectrum);
-    const band = (low: number, high: number) => {
-      const hz = analyser.context.sampleRate / analyser.fftSize;
-      const start = Math.max(1, Math.ceil(low / hz));
-      const end = Math.min(this.spectrum.length, Math.ceil(high / hz));
-      let sum = 0;
-      for (let i = start; i < end; i++) sum += (this.spectrum[i]! / 255) ** 2;
-      return Math.sqrt(sum / Math.max(1, end - start));
-    };
-    this.audioFrame.bass = band(40, 220);
-    this.audioFrame.mid = band(220, 2500);
-    this.audioFrame.treble = band(2500, 10000);
-    return this.audioFrame;
-  };
-
+  readAudio = () => this.engine.analysis.read(this.state.playing && !this.state.loading && !this.state.muted);
 
   private applyLoudness(mix = 1) {
-    const track = this.state.track;
     const user = this.state.muted ? 0 : this.state.volume;
-    const level = user * normalizeGain(track?.features?.loudness_lufs, this.normalizeOn()) * mix;
-    if (!this.wired && typeof AudioContext !== 'undefined') {
-      try {
-        const ctx = new AudioContext();
-        this.audioContext = ctx;
-        const src = ctx.createMediaElementSource(this.audio);
-        this.gain = ctx.createGain();
-        src.connect(this.gain);
-        this.gain.connect(ctx.destination);
-        this.analyser = ctx.createAnalyser();
-        this.analyser.fftSize = 1024;
-        this.analyser.smoothingTimeConstant = 0.55;
-        this.gain.connect(this.analyser);
-        // The overlap is already audible through its own output; analyse it only.
-        try {
-          const overlapSource = ctx.createMediaElementSource(this.overlap);
-          overlapSource.connect(ctx.destination);
-          overlapSource.connect(this.analyser);
-        } catch { /* Crossfade analysis is optional. */ }
-
-        this.audio.volume = 1;
-        this.wired = true;
-      } catch {
-        this.wired = true;
-      }
-    }
-    if (this.gain) this.gain.gain.value = level;
-    else this.audio.volume = Math.min(1, level);
+    this.engine.applyLoudness(user * normalizeGain(this.state.track?.features?.loudness_lufs, this.normalizeOn()) * mix);
   }
 
   /** В конце трека накладывает следующий на crossfade_s секунд. */
@@ -590,7 +470,7 @@ export class Player {
     this.applyLoudness();
     this.attempt = new PlayAttempt(next, Math.round(at * 1000));
     this.update({ track: next, loading: false, playing: true, positionMs: Math.round(at * 1000), durationMs: next.duration_ms });
-    this.updateMediaMetadata(next);
+    this.media.updateMediaMetadata(next);
     void this.audio.play().finally(() => {
       this.fading = false;
       this.ignoreEnded = false;
@@ -599,13 +479,13 @@ export class Player {
 
   private bindAudio() {
     const a = this.audio;
-    a.addEventListener('playing', () => {
+    this.engine.on('playing', () => {
       this.update({ playing: true, loading: false });
       if (this.attempt && this.state.positionMs > 0 && a.currentTime > 0.5) {
         this.events.push({ type: 'resume', track_id: this.attempt.track.id, position_ms: this.state.positionMs });
       }
     });
-    a.addEventListener('pause', () => {
+    this.engine.on('pause', () => {
       if (a.ended) return;
       this.update({ playing: false });
       const t = this.queue.current;
@@ -614,22 +494,22 @@ export class Player {
         this.saveServer();
       }
     });
-    a.addEventListener('waiting', () => {
+    this.engine.on('waiting', () => {
       if (this.attempt) this.update({ loading: true });
     });
-    a.addEventListener('timeupdate', () => {
+    this.engine.on('timeupdate', () => {
       const ms = Math.round(a.currentTime * 1000);
       this.attempt?.tick(ms);
       this.update({ positionMs: ms });
-      this.updatePositionState();
+      this.media.updatePositionState();
       if (this.state.playing) {
         this.maybePreload(ms);
         this.maybeCrossfade(ms);
       }
-      if (this.state.playing && Date.now() - this.lastServerSave > SAVE_EVERY_MS) this.saveServer();
+      if (this.state.playing && Date.now() - this.persistence.lastServerSave > SAVE_EVERY_MS) this.saveServer();
       this.saveLocal();
     });
-    a.addEventListener('ended', () => {
+    this.engine.on('ended', () => {
       if (this.ignoreEnded || this.fading || !this.attempt) return;
       this.finishAttempt('play_end');
       if (this.queue.next(true)) {
@@ -640,7 +520,7 @@ export class Player {
         this.saveServer();
       }
     });
-    a.addEventListener('error', () => void this.onError());
+    this.engine.on('error', () => void this.onError());
   }
 
   /** Ссылка могла истечь (12 ч) — один раз берём свежую; иначе пропускаем трек. */
@@ -683,138 +563,11 @@ export class Player {
     void fetch(next.stream_url, { headers: { Range: 'bytes=0-0' } }).catch(() => undefined);
   }
 
-  // --- Media Session ---
-
-  private bindDesktopMedia() {
-    void desktopHandle()?.listenMedia((action) => {
-      if (action === 'play') this.play();
-      else if (action === 'pause' || action === 'stop') this.pause();
-      else if (action === 'toggle') this.toggle();
-      else if (action === 'next') this.next();
-      else if (action === 'previous') this.prev();
-    }).then((stop) => {
-      this.desktopUnlisten = stop;
-    });
-  }
-
-  private syncDesktopMedia() {
-    const desktop = desktopHandle();
-    const track = this.state.track;
-    if (!desktop || !track) return;
-    if (this.lastDesktop.id === track.id && this.lastDesktop.playing === this.state.playing) return;
-    this.lastDesktop = { id: track.id, playing: this.state.playing };
-    desktop.setMedia({
-      title: track.title,
-      artist: track.artists.map((a) => a.name).join(', '),
-      album: track.album.title,
-      coverUrl: track.album.cover_url,
-      playing: this.state.playing,
-    });
-  }
-
-  private bindMediaSession() {
-    const ms = typeof navigator !== 'undefined' ? navigator.mediaSession : undefined;
-    if (!ms) return;
-    const set = (action: MediaSessionAction, fn: MediaSessionActionHandler) => {
-      try {
-        ms.setActionHandler(action, fn);
-      } catch {
-        // действие не поддерживается браузером
-      }
-    };
-    set('play', () => this.play());
-    set('pause', () => this.pause());
-    set('nexttrack', () => this.next());
-    set('previoustrack', () => this.prev());
-    set('seekbackward', (d) => this.seek(this.state.positionMs - (d.seekOffset ?? 10) * 1000));
-    set('seekforward', (d) => this.seek(this.state.positionMs + (d.seekOffset ?? 10) * 1000));
-    set('seekto', (d) => d.seekTime !== undefined && this.seek(d.seekTime * 1000));
-  }
-
-  private updateMediaMetadata(track: Track) {
-    if (typeof navigator === 'undefined' || !navigator.mediaSession || typeof MediaMetadata === 'undefined') return;
-    const cover = track.album.cover_url;
-    navigator.mediaSession.metadata = new MediaMetadata({
-      title: track.title,
-      artist: track.artists.map((a) => a.name).join(', '),
-      album: track.album.title,
-      artwork: cover
-        ? [
-            { src: `${cover}&size=300`, sizes: '300x300', type: 'image/webp' },
-            { src: `${cover}&size=1200`, sizes: '1200x1200', type: 'image/webp' },
-          ]
-        : [],
-    });
-  }
-
-  private updatePositionState() {
-    const ms = typeof navigator !== 'undefined' ? navigator.mediaSession : undefined;
-    const d = this.audio.duration;
-    if (!ms?.setPositionState || !Number.isFinite(d) || d <= 0) return;
-    try {
-      ms.setPositionState({ duration: d, position: Math.min(this.audio.currentTime, d), playbackRate: 1 });
-    } catch {
-      // некорректная позиция во время смены трека
-    }
-  }
-
   // --- сохранение состояния ---
 
-  private snapshot(): Saved {
-    const ids = this.queue.tracks.map((t) => t.id);
-    const start = Math.max(0, Math.min(this.queue.index - Math.floor(MAX_SAVED_QUEUE / 2), ids.length - MAX_SAVED_QUEUE));
-    return {
-      queue: ids.slice(start, start + MAX_SAVED_QUEUE),
-      index: this.queue.index - start,
-      positionMs: this.state.positionMs,
-      context: this.context,
-      volume: this.state.volume,
-      shuffle: this.queue.shuffle,
-      repeat: this.queue.repeat,
-      savedAt: new Date().toISOString(),
-    };
-  }
-
-  private saveLocal() {
-    if (!this.queue.current) return;
-    try {
-      localStorage.setItem(LOCAL_KEY, JSON.stringify(this.snapshot()));
-    } catch {
-      // недоступное хранилище не мешает воспроизведению
-    }
-  }
-
-  private saveTimer: ReturnType<typeof setTimeout> | null = null;
-
-  private saveSoon() {
-    if (this.saveTimer) clearTimeout(this.saveTimer);
-    this.saveTimer = setTimeout(() => this.saveServer(), 1000);
-  }
-
-  /** PUT /me/playback-state; keepalive — запрос переживёт закрытие вкладки. */
-  saveServer(keepalive = false) {
-    const cur = this.queue.current;
-    if (!cur) return;
-    this.lastServerSave = Date.now();
-    this.saveLocal();
-    const s = this.snapshot();
-    void this.session.client
-      .PUT('/api/v1/me/playback-state', {
-        body: {
-          track_id: cur.id,
-          position_ms: s.positionMs,
-          queue: s.queue,
-          queue_index: s.index,
-          context: s.context ? { type: s.context.type, id: s.context.id, label: s.context.label } : undefined,
-          shuffle: s.shuffle,
-          repeat_mode: s.repeat,
-          volume: s.volume,
-          device_id: this.device,
-        },
-        keepalive,
-      })
-      .catch(() => undefined);
-  }
+  private saveLocal() { this.persistence.saveLocal(); }
+  private saveSoon() { this.persistence.saveSoon(); }
+  saveServer(keepalive = false) { this.persistence.saveServer(keepalive); }
 
   /** Уход со страницы: дослать события и состояние. */
   onHide() {
@@ -828,35 +581,7 @@ export class Player {
    */
   async restore() {
     const version = ++this.restoreVersion;
-    let local: Saved | null = null;
-    try {
-      const raw = localStorage.getItem(LOCAL_KEY);
-      local = raw ? (JSON.parse(raw) as Saved) : null;
-    } catch {
-      local = null;
-    }
-    let saved = local;
-    try {
-      const server = unwrap(await this.session.client.GET('/api/v1/me/playback-state'));
-      if (
-        server.track_id &&
-        server.updated_at &&
-        (!local || (server.device_id !== this.device && server.updated_at > local.savedAt))
-      ) {
-        saved = {
-          queue: server.queue,
-          index: server.queue_index,
-          positionMs: server.position_ms,
-          context: (server.context?.type ? server.context : null) as PlayContext | null,
-          volume: server.volume,
-          shuffle: server.shuffle,
-          repeat: server.repeat_mode,
-          savedAt: server.updated_at,
-        };
-      }
-    } catch {
-      // офлайн — остаёмся с локальной копией
-    }
+    const saved = await this.persistence.restore();
     if (version !== this.restoreVersion || !saved?.queue.length) return;
     const res = unwrap(await this.session.client.POST('/api/v1/tracks/batch', { body: { ids: saved.queue } }));
     if (version !== this.restoreVersion) return;
@@ -872,25 +597,21 @@ export class Player {
     const pos = tracks[idx]?.id === wanted ? saved.positionMs : 0;
     this.syncQueue();
     this.update({ positionMs: pos, durationMs: tracks[idx]!.duration_ms, volume: saved.volume });
-    this.updateMediaMetadata(tracks[idx]!);
+    this.media.updateMediaMetadata(tracks[idx]!);
     // Prepare at the saved position without creating a listening attempt.
     await this.load(false, pos);
   }
 
   dispose() {
     this.restoreVersion++;
+    this.wavePolicy.activate(null);
     this.fading = false;
     this.finishAttempt('skip');
-    this.audio.pause();
-    this.audio.removeAttribute('src');
-    this.audio.load();
-    this.overlap.pause();
-    this.overlap.removeAttribute('src');
-    this.overlap.load();
+    this.engine.dispose();
+    this.persistence.dispose();
     for (const t of this.timers) clearInterval(t);
     this.timers = [];
-    this.desktopUnlisten?.();
-    this.desktopUnlisten = null;
+    this.media.dispose();
     void this.events.flush();
   }
 }

apps/web/src/player/types.ts

@@ -0,0 +1,18 @@
+import type { WaveInfo, Track, PlayContext, RepeatMode } from '@pipu/core';
+
+export interface PlayerState {
+  wave: WaveInfo | null;
+  track: Track | null;
+  queue: Track[];
+  index: number;
+  context: PlayContext | null;
+  playing: boolean;
+  loading: boolean;
+  positionMs: number;
+  durationMs: number;
+  volume: number;
+  muted: boolean;
+  shuffle: boolean;
+  repeat: RepeatMode;
+  error: string | null;
+}