Hide full-screen player controls after mouse click

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

.gitea/workflows/ci-db.yml

@@ -48,6 +48,7 @@ jobs:
       TEST_REDIS_URL: redis://redis:6379/0
       TEST_MEILI_URL: http://meilisearch:7700
       TEST_MEILI_KEY: ci-master-key-0123456789
+      MUSICBRAINZ_ENABLED: "false"
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-go@v5
@@ -71,7 +72,12 @@ jobs:
           done
       - name: Go — миграции и запросы store
         working-directory: services/api
-        run: go test -tags integration -count=1 -v ./internal/dbtest/
+        # These suites share one database; dbtest also rolls all migrations down
+        # and cleans orphan catalog rows. Do not run the packages concurrently.
+        run: go test -p 1 -tags integration -count=1 -v ./internal/dbtest/ ./internal/social/ ./internal/uploads/
+      - name: Go — релевантность поиска на Meilisearch
+        working-directory: services/api
+        run: go test -tags integration -count=1 -v ./internal/search/
       - name: Go — сквозной сценарий пользователя (newApp на Postgres, Redis, Meilisearch)
         working-directory: services/api
         run: go test -tags integration -count=1 -v -run TestUserJourney ./cmd/api/

.gitea/workflows/ci-ts.yml

@@ -63,3 +63,12 @@ jobs:
           pnpm --filter @pipu/web exec playwright install --with-deps chromium ||
             pnpm --filter @pipu/web exec playwright install chromium
       - run: pnpm --filter @pipu/web test:e2e
+      - name: E2E failure diagnostics
+        if: failure()
+        continue-on-error: true
+        uses: actions/upload-artifact@v3
+        with:
+          name: web-e2e-failure
+          path: apps/web/test-results/
+          if-no-files-found: ignore
+          retention-days: 3

.gitea/workflows/docker.yml

@@ -47,6 +47,8 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
+      - name: Обновление сервера, агент и конфигурация
+        run: python3 -m unittest discover -s deploy -p 'test_*.py' -v
       # Обычный docker build через Docker хоста раннера, а не buildx-контейнер: кэш слоёв и
       # --mount=type=cache переживают job, повторная сборка занимает секунды. Фиксированные теги
       # не дают копиться образам; кэш сборки чистит на хосте `docker builder prune`.

.gitignore

@@ -20,6 +20,8 @@ __pycache__/
 .ruff_cache/
 
 # env / secrets
+deploy/config.local
+deploy/.management.lock
 .env
 *.pem
 *.keystore

AGENTS.md

@@ -5,6 +5,6 @@
 - Контракт HTTP — `api/openapi.yaml`. Читай нужную операцию и связанные схемы. Generated-код (`**/gen/**`, `**/generated/**`) и lock-файлы исследуй точечно; не редактируй вручную.
 - После изменения OpenAPI: `pnpm --filter @pipu/api-client generate`, затем из `services/api`: `go generate ./...`. Проверяй и коммить результат генерации.
 - Новые правила размещай у владельца сценария, IO — в адаптере. Сохраняй явные границы транзакций и платформенные особенности. Узкий интерфейс вводи для конкретного потребителя.
-- Промежуточно запускай проверки затронутой области; перед сдачей — необходимые связанные проверки. Команды запускаются из корня, если не сказано иначе.
+- Локально достаточно запускать проверки затронутой области и непосредственно связанных сценариев. Полный набор тестов и проверок повторно выполняется в CI/CD; не запускай все проверки проекта перед каждой сдачей без необходимости. Расширяй локальную проверку при изменении общих контрактов, межмодульных зависимостей или при обнаружении ошибок. Команды запускаются из корня, если не сказано иначе.
-- Общие проверки: `pnpm typecheck`, `pnpm test`, `pnpm i18n:check`, `pnpm test:scripts`. Go: из `services/api` — `go vet ./...`, `go test ./...`. Python: из `services/recommender` — `uv run ruff check .`, `uv run mypy pipu_rec`, `uv run pytest`.
+- Справочник полных проверок (выбирай локально только относящиеся к изменению): `pnpm typecheck`, `pnpm test`, `pnpm i18n:check`, `pnpm test:scripts`. Go: из `services/api` — `go vet ./...`, `go test ./...`. Python: из `services/recommender` — `uv run ruff check .`, `uv run mypy pipu_rec`, `uv run pytest`.
 - Не меняй пользовательские артефакты, локальные бинарники и посторонние незакоммиченные файлы.

apps/mobile/src/app/(tabs)/_layout.tsx

@@ -8,32 +8,38 @@ import { player } from '../../player/controller';
 import { usePlayerState } from '../../player/hooks';
 import { useColors } from '../../theme';
 import { Cover, Icon, type IconName } from '../../ui/kit';
+import { NativeChatProvider, useSocialUnread } from '../../features/social/Social';
+import { ListeningBanner } from '../../features/social/Listening';
 import { UpdateDialog } from '../../ui/UpdateDialog';
 
-const ICONS: Record<string, IconName> = { index: 'home', search: 'search', collection: 'library-music', profile: 'person' };
+const ICONS: Record<string, IconName> = { index: 'home', search: 'search', collection: 'library-music', friends: 'people-outline', profile: 'person' };
 
 export default function TabsLayout() {
   const colors = useColors();
   const { t } = useTranslation();
+  const unread = useSocialUnread();
   const labels: Record<string, string> = {
     index: t('nav.home'),
     search: t('mobile.search'),
     collection: t('nav.collection'),
     profile: t('mobile.profile'),
+    friends: t('social.people'),
   };
   const net = useNetInfo();
   return (
-    <>
+    <NativeChatProvider>
       {net.isConnected === false && <OfflineBanner text={t('mobile.offline')} />}
       <Tabs
         screenOptions={{ headerShown: false, sceneStyle: { backgroundColor: colors.bg } }}
         tabBar={({ state, navigation }) => (
           <View>
+            <ListeningBanner />
             <MiniPlayer />
             <TabBar
               routes={state.routes.map((r) => r.name)}
               active={state.index}
               labels={labels}
+              badges={{ friends: unread }}
               onPress={(name) => navigation.navigate(name)}
             />
           </View>
@@ -42,10 +48,11 @@ export default function TabsLayout() {
         <Tabs.Screen name="index" />
         <Tabs.Screen name="search" />
         <Tabs.Screen name="collection" />
+        <Tabs.Screen name="friends" />
         <Tabs.Screen name="profile" />
       </Tabs>
       <UpdateDialog />
-    </>
+    </NativeChatProvider>
   );
 }
 
@@ -53,11 +60,13 @@ function TabBar({
   routes,
   active,
   labels,
+  badges,
   onPress,
 }: {
   routes: string[];
   active: number;
   labels: Record<string, string>;
+  badges: Record<string, number>;
   onPress: (name: string) => void;
 }) {
   const colors = useColors();
@@ -81,10 +90,13 @@ function TabBar({
             onPress={() => onPress(name)}
             accessibilityRole="tab"
             accessibilityState={{ selected: on }}
-            accessibilityLabel={labels[name]}
+            accessibilityLabel={`${labels[name]}${badges[name] ? ` · ${badges[name]}` : ''}`}
             style={{ flex: 1, alignItems: 'center', paddingVertical: 8, gap: 2 }}
           >
+            <View>
               <Icon name={ICONS[name] ?? 'circle'} color={on ? colors.accent2 : colors.text3} />
+              {!!badges[name] && <Text style={{ position: 'absolute', top: -5, left: 14, minWidth: 16, paddingHorizontal: 4, borderRadius: 9, backgroundColor: colors['accent-fill'], color: '#fff', fontSize: 10, textAlign: 'center' }}>{badges[name]! > 99 ? '99+' : badges[name]}</Text>}
+            </View>
             <Text style={{ fontSize: 11, color: on ? colors.text : colors.text3, fontWeight: on ? '600' : '400' }}>
               {labels[name]}
             </Text>

apps/mobile/src/app/(tabs)/friends.tsx

@@ -0,0 +1,2 @@
+import { SocialScreen } from '../../features/social/Social';
+export default function FriendsTab() { return <SocialScreen root />; }

apps/mobile/src/app/_layout.tsx

@@ -110,6 +110,9 @@ function Screens() {
         <Stack.Screen name="album/[id]" />
         <Stack.Screen name="artist/[id]" />
         <Stack.Screen name="playlists" />
+        <Stack.Screen name="social" />
+        <Stack.Screen name="social-track" />
+        <Stack.Screen name="social-playlist" />
         <Stack.Screen name="player" options={{ presentation: 'modal', animation: 'slide_from_bottom' }} />
       </Stack.Protected>
     </Stack>

apps/mobile/src/app/player.tsx

@@ -1,7 +1,9 @@
 import { useRouter } from 'expo-router';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert, Pressable, Share, Text, View, type LayoutChangeEvent } from 'react-native';
+import { Pressable, Text, View, type LayoutChangeEvent } from 'react-native';
+import { MusicShareSheet } from '../features/social/Social';
+import { ListeningBanner } from '../features/social/Listening';
 import { trackShareUrl } from '@pipu/core';
 
 import { useSessionCtx, useUser } from '../lib/session';
@@ -21,6 +23,7 @@ export default function PlayerScreen() {
   const { t } = useTranslation();
   const router = useRouter();
   const st = usePlayerState();
+  const locked = st.listening?.locked === true;
   const prefs = useUser().ui_prefs;
   const { server } = useSessionCtx();
   const [sharing, setSharing] = useState(false);
@@ -39,20 +42,12 @@ export default function PlayerScreen() {
   const duration = st.durationMs || track.duration_ms;
   const progress = duration ? Math.min(st.positionMs / duration, 1) : 0;
   const react = (r: 'like' | 'dislike') => void player.react(track, track.reaction === r ? null : r).catch(() => undefined);
-  const share = async () => {
+  const share = () => setSharing(true);
-    if (!server || sharing) return;
-    setSharing(true);
-    try {
-      await Share.share({ title: track.title, message: trackShareUrl(server, track.id) }, { dialogTitle: t('player.share') });
-    } catch {
-      Alert.alert(t('player.share'), t('player.share_error'));
-    } finally {
-      setSharing(false);
-    }
-  };
 
   return (
     <Screen>
+      {sharing && server && <MusicShareSheet attachment={{ kind: 'track', id: track.id, title: track.title }} url={trackShareUrl(server, track.id)} close={() => setSharing(false)} />}
+      <ListeningBanner />
       <View style={{ flex: 1, padding: 24, gap: 24, justifyContent: 'space-between' }}>
         <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
           <Pressable onPress={() => router.back()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('mobile.close_player')}>
@@ -102,7 +97,7 @@ export default function PlayerScreen() {
         <View style={{ gap: 6 }}>
           <Pressable
             onLayout={(e: LayoutChangeEvent) => setBarWidth(e.nativeEvent.layout.width || 1)}
-            onPress={(e) => player.seek((e.nativeEvent.locationX / barWidth) * duration)}
+            disabled={locked} onPress={(e) => player.seek((e.nativeEvent.locationX / barWidth) * duration)}
             accessibilityRole="adjustable"
             accessibilityLabel={t('player.progress')}
             accessibilityValue={{ min: 0, max: Math.round(duration / 1000), now: Math.round(st.positionMs / 1000) }}
@@ -124,18 +119,18 @@ export default function PlayerScreen() {
           <Pressable onPress={() => react('dislike')} hitSlop={10} accessibilityRole="button" accessibilityLabel={t(track.reaction === 'dislike' ? 'player.undislike' : 'player.dislike')}>
             <Icon name="heart-broken" size={28} color={track.reaction === 'dislike' ? colors.danger : colors.text2} />
           </Pressable>
-          <Pressable onPress={() => void player.prev()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('player.prev')}>
+          <Pressable disabled={locked} onPress={() => void player.prev()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('player.prev')}>
             <Icon name="skip-previous" size={40} color={colors.text} />
           </Pressable>
           <Pressable
-            onPress={() => player.toggle()}
+            disabled={locked} onPress={() => player.toggle()}
             accessibilityRole="button"
             accessibilityLabel={t(st.playing ? 'player.pause' : 'player.play')}
             style={{ width: 72, height: 72, borderRadius: 36, backgroundColor: colors.text, alignItems: 'center', justifyContent: 'center' }}
           >
             <Icon name={st.playing ? 'pause' : 'play-arrow'} size={40} color={colors.bg} />
           </Pressable>
-          <Pressable onPress={() => player.next()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('player.next')}>
+          <Pressable disabled={locked} onPress={() => player.next()} hitSlop={10} accessibilityRole="button" accessibilityLabel={t('player.next')}>
             <Icon name="skip-next" size={40} color={colors.text} />
           </Pressable>
           <Pressable onPress={() => react('like')} hitSlop={10} accessibilityRole="button" accessibilityLabel={t(track.reaction === 'like' ? 'player.unlike' : 'player.like')}>

apps/mobile/src/app/playlists.tsx

@@ -1,10 +1,11 @@
 import type { components } from '@pipu/api-client';
+import { MusicShareSheet } from '../features/social/Social';
 import { playlistShareUrl, unwrap } from '@pipu/core';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Alert, FlatList, Modal, ScrollView, Share, View } from 'react-native';
+import { Alert, FlatList, Modal, ScrollView, View } from 'react-native';
 import { useSession, useSessionCtx, useUser } from '../lib/session';
 import { player } from '../player/controller';
 import { Button, ErrorBox, Field, H1, Muted, Screen, TrackRow, formatDuration, useErrorText } from '../ui/kit';
@@ -77,6 +78,7 @@ function Editor({ playlist, track, onClose, onSaved }: { playlist?: Playlist; tr
 }
 
 function Detail({ id }: { id: string }) {
+  const [shareToken, setShareToken] = useState<string | null>(null);
   const session = useSession();
   const { server } = useSessionCtx();
   const user = useUser();
@@ -94,7 +96,7 @@ function Detail({ id }: { id: string }) {
     if (!server || !p) throw new Error('Server unavailable');
     const token = unwrap(await session.client.POST('/api/v1/me/playlists/{id}/share', { params: { path: { id } } })).share_id;
     cache.setQueryData<Playlist>(key, current => current ? { ...current, share_id: token } : current);
-    await Share.share({ title: p.name, message: playlistShareUrl(server, token) }, { dialogTitle: t('playlists.share') });
+    setShareToken(token);
   } });
   const revoke = useMutation({ mutationFn: async () => unwrap(await session.client.DELETE('/api/v1/me/playlists/{id}/share', { params: { path: { id } } })),
     onSuccess: () => { cache.setQueryData<Playlist>(key, current => current ? { ...current, share_id: null } : current); } });
@@ -112,7 +114,7 @@ function Detail({ id }: { id: string }) {
   const move = (index: number, delta: number) => {
     const ids = p!.tracks.map(t => t.id); [ids[index],ids[index+delta]]=[ids[index+delta]!,ids[index]!]; save.mutate(ids);
   };
-  return <Screen><FlatList data={p?.tracks ?? []} keyExtractor={t => t.id} onRefresh={() => void query.refetch()} refreshing={query.isRefetching}
+  return <Screen>{shareToken && server && p && <MusicShareSheet attachment={{ kind: 'playlist', id: shareToken, title: p.name }} url={playlistShareUrl(server, shareToken)} close={() => setShareToken(null)} />}<FlatList data={p?.tracks ?? []} keyExtractor={t => t.id} onRefresh={() => void query.refetch()} refreshing={query.isRefetching}
     ListHeaderComponent={<View style={{ padding:16,gap:12 }}>
       <Button title={t('playlists.title')} variant="ghost" onPress={() => router.back()} />
       <ErrorBox>{query.error || save.error || deletion.error || playError || sharing.error || revoke.error ? errorText(query.error ?? save.error ?? deletion.error ?? playError ?? sharing.error ?? revoke.error) : null}</ErrorBox>

apps/mobile/src/app/social-playlist.tsx

@@ -0,0 +1,2 @@
+import { SharedMusic } from '../features/social/SharedMusic';
+export default function SharedPlaylistScreen() { return <SharedMusic kind="playlist" />; }

apps/mobile/src/app/social-track.tsx

@@ -0,0 +1,2 @@
+import { SharedMusic } from '../features/social/SharedMusic';
+export default function SharedTrackScreen() { return <SharedMusic kind="track" />; }

apps/mobile/src/app/social.tsx

@@ -0,0 +1 @@
+export { SocialScreen as default } from '../features/social/Social';

apps/mobile/src/features/social/ChatConversation.tsx

@@ -0,0 +1,61 @@
+import { CHAT_REACTIONS, type ChatMessageUpdate, type DirectMessage, type SocialPerson, type socialApi } from '@pipu/core';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'expo-router';
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AccessibilityInfo, Animated, KeyboardAvoidingView, Modal, Pressable, ScrollView, Text, View } from 'react-native';
+import { eventId } from '../../player/eventId';
+import { useColors } from '../../theme';
+import { Button, ErrorBox, Field, H1, Muted, Screen, useErrorText } from '../../ui/kit';
+import { readDraft, saveDraft } from './drafts';
+
+function Bubble({ children, mine, animate }: { children: ReactNode; mine: boolean; animate: boolean }) {
+  const colors = useColors(); const opacity = useRef(new Animated.Value(1)).current;
+  useEffect(() => { if (!animate) return; opacity.setValue(0); const animation = Animated.timing(opacity,{toValue:1,duration:180,useNativeDriver:true});animation.start();return()=>animation.stop(); },[animate,opacity]);
+  return <Animated.View style={{ alignSelf: mine ? 'flex-end' : 'flex-start', maxWidth: '90%', padding: 14, borderRadius: 16, backgroundColor: mine ? colors['accent-soft'] : colors.surface2, gap: 8, opacity, transform:[{translateY:opacity.interpolate({inputRange:[0,1],outputRange:[6,0]})}] }}>{children}</Animated.View>;
+}
+export function ChatConversation({ person, api, queryKey, userId, server, active }: { person: SocialPerson; api: ReturnType<typeof socialApi>; queryKey: readonly unknown[]; userId: string; server: string; active: boolean }) {
+  const colors=useColors();const {t,i18n}=useTranslation();const router=useRouter();const cache=useQueryClient();const errorText=useErrorText();
+  const [text,setText]=useState('');const [ready,setReady]=useState(false);const touched=useRef(false);const [search,setSearch]=useState('');const [q,setQ]=useState('');
+  const [reply,setReply]=useState<DirectMessage|null>(null);const [editing,setEditing]=useState<DirectMessage|null>(null);const [menu,setMenu]=useState<DirectMessage|null>(null);const [emojis,setEmojis]=useState(false);const [reduced,setReduced]=useState(true);
+  const beforeEdit=useRef('');const pending=useRef<{id:string;text:string;reply_to?:string}|null>(null);
+  useEffect(()=>{let live=true;void readDraft(server,userId,person.id).then(value=>{if(live){if(!touched.current)setText(value);setReady(true);}});return()=>{live=false;};},[server,userId,person.id]);
+  useEffect(()=>{if(!ready||editing)return;const timer=setTimeout(()=>{void saveDraft(server,userId,person.id,text).catch(()=>undefined);},300);return()=>clearTimeout(timer);},[text,ready,editing,server,userId,person.id]);
+  useEffect(()=>{void AccessibilityInfo.isReduceMotionEnabled().then(setReduced);const sub=AccessibilityInfo.addEventListener('reduceMotionChanged',setReduced);return()=>sub.remove();},[]);
+  useEffect(()=>{const timer=setTimeout(()=>setQ(search.trim()),250);return()=>clearTimeout(timer);},[search]);
+  useEffect(()=>{const timer=setTimeout(()=>{void api.typing(person.id,active&&touched.current&&!!text.trim()&&!editing).catch(()=>undefined);},400);return()=>clearTimeout(timer);},[text,active,editing,api,person.id]);
+  useEffect(()=>()=>{void api.typing(person.id,false).catch(()=>undefined);},[api,person.id]);
+  const meta=useQuery({queryKey:[...queryKey,'typing',person.id],queryFn:()=>api.chatMeta(person.id),enabled:active,refetchInterval:active?2000:false});
+  const messages=useInfiniteQuery({queryKey:[...queryKey,'chat',person.id,q],initialPageParam:undefined as number|undefined,queryFn:({pageParam})=>api.messages(person.id,pageParam,q),getNextPageParam:last=>last.length===50?last[0]?.seq:undefined,enabled:active,refetchInterval:active?3000:false});
+  const list=[...(messages.data?.pages??[])].reverse().flat();const last=list.at(-1)?.seq;const unread=list.some(m=>m.sender_id!==userId&&!m.read);
+  useEffect(()=>{if(last&&unread&&active&&!q)void api.action({action:'read_chat',target_id:person.id,up_to_seq:last}).then(()=>cache.invalidateQueries({queryKey})).catch(()=>undefined);},[last,unread,active,q,api,person.id,messages.dataUpdatedAt]);
+  const refresh=()=>cache.invalidateQueries({queryKey});
+  const update=useMutation({mutationFn:(input:{id:string;body:ChatMessageUpdate})=>api.updateMessage(person.id,input.id,input.body),onSuccess:refresh});
+  const send=useMutation({mutationFn:async()=>{if(editing){await api.updateMessage(person.id,editing.id,{action:'edit',text});return;}if(!pending.current||pending.current.text!==text||pending.current.reply_to!==reply?.id)pending.current={id:eventId(Date.now()),text,...(reply?{reply_to:reply.id}:{})};await api.send(person.id,{...pending.current,attachment_kind:'none'});},onSuccess:async()=>{setText(editing?beforeEdit.current:'');setEditing(null);setReply(null);pending.current=null;await refresh();}});
+  const scroll=useRef<ScrollView>(null);const [bottom,setBottom]=useState(true);useEffect(()=>setBottom(true),[last]);
+  const cancelEdit=()=>{setText(beforeEdit.current);setEditing(null);};
+  const mutate=(m:DirectMessage,body:ChatMessageUpdate)=>{if(!update.isPending)update.mutate({id:m.id,body});setMenu(null);};
+  return <KeyboardAvoidingView behavior="padding" style={{flex:1}}>
+    <View style={{padding:12,gap:8}}><H1>{person.display_name}</H1><Muted>{t(person.online ? 'social.online' : 'social.offline')}</Muted><Field label={t('social.chat_search')} value={search} onChangeText={setSearch} maxLength={100}/><ErrorBox>{messages.error||send.error||update.error?errorText(messages.error??send.error??update.error):null}</ErrorBox></View>
+    <ScrollView ref={scroll} keyboardShouldPersistTaps="handled" contentContainerStyle={{padding:14,gap:12}} onContentSizeChange={()=>{if(bottom&&!q)scroll.current?.scrollToEnd({animated:!reduced});}}>
+      {messages.hasNextPage&&<Button title={t('social.older')} variant="ghost" busy={messages.isFetchingNextPage} onPress={()=>{setBottom(false);void messages.fetchNextPage();}}/>}
+      {!list.length&&<Muted>{t(messages.isPending?'social.loading':q?'social.chat_no_results':'social.first_message')}</Muted>}
+      {list.map((m,i)=><View key={m.id} style={{gap:8}}>
+        {(i===0||new Date(list[i-1]!.created_at).toDateString()!==new Date(m.created_at).toDateString())&&<Text style={{color:colors.text3,fontSize:11,textAlign:'center'}}>{new Date(m.created_at).toLocaleDateString(i18n.language,{day:'numeric',month:'long'})}</Text>}
+        <Bubble mine={m.sender_id===userId} animate={!reduced}>
+          <Pressable disabled={m.deleted} onLongPress={()=>setMenu(m)} accessibilityLabel={t('social.message_actions')}>
+            {m.reply_to&&<View style={{borderLeftWidth:2,borderLeftColor:colors.accent,paddingLeft:8,marginBottom:8}}><Muted>{m.reply_preview||t('social.message_deleted')}</Muted></View>}
+            <Text selectable style={{color:m.deleted?colors.text3:colors.text,fontSize:15,fontStyle:m.deleted?'italic':'normal'}}>{m.deleted?t('social.message_deleted'):m.text}</Text>
+          </Pressable>
+          {!m.deleted&&m.attachment_id&&m.attachment_kind!=='none'&&<Button title={t(m.attachment_kind==='track'?'social.listen_track':'social.listen_playlist')} variant="secondary" onPress={()=>router.push({pathname:m.attachment_kind==='track'?'/social-track':'/social-playlist',params:{id:m.attachment_id}})}/>}
+          {!m.deleted&&!!m.reactions?.length&&<View style={{flexDirection:'row',gap:6,flexWrap:'wrap'}}>{m.reactions.map(r=><Pressable key={r.emoji} accessibilityRole="button" accessibilityState={{selected:r.mine}} onPress={()=>mutate(m,{action:'react',emoji:r.emoji as typeof CHAT_REACTIONS[number]})} style={{padding:6,borderRadius:12,backgroundColor:r.mine?colors['accent-soft']:colors.surface3}}><Text style={{color:colors.text}}>{r.emoji} {r.count}</Text></Pressable>)}</View>}
+          <View style={{flexDirection:'row',gap:8,alignItems:'center'}}><Text style={{color:colors.text3,fontSize:10,flex:1}}>{new Date(m.created_at).toLocaleTimeString(i18n.language,{hour:'2-digit',minute:'2-digit'})}{m.edited_at&&!m.deleted?` · ${t('social.edited')}`:''}{m.sender_id===userId?` · ${t(m.read?'social.read':'social.sent')}`:''}</Text>{!m.deleted&&<Pressable accessibilityRole="button" accessibilityLabel={t('social.message_actions')} hitSlop={10} onPress={()=>setMenu(m)}><Text style={{color:colors.text3}}>•••</Text></Pressable>}</View>
+        </Bubble>
+      </View>)}
+    </ScrollView>
+    <Text accessibilityLiveRegion="polite" style={{minHeight:18,paddingHorizontal:14,color:colors.text3,fontSize:11}}>{active&&meta.data?.typing?`${person.display_name} ${t('social.typing')}`:''}</Text>
+    {(reply||editing)&&<View style={{padding:10,backgroundColor:colors['accent-soft'],gap:4}}><Muted>{t(editing?'social.editing':'social.replying')}</Muted><Text numberOfLines={2} style={{color:colors.text2}}>{(editing??reply)?.text}</Text><Button title={t(editing?'social.cancel_edit':'social.cancel_reply')} variant="ghost" onPress={()=>editing?cancelEdit():setReply(null)}/></View>}
+    <View style={{padding:12,gap:8,borderTopWidth:1,borderTopColor:colors.line}}><Field label={t('social.message')} value={text} onChangeText={value=>{touched.current=true;setText(value);}} maxLength={4000} multiline editable={!send.isPending}/><View style={{flexDirection:'row',gap:8}}><Button title="☺" variant="ghost" onPress={()=>setEmojis(v=>!v)}/><View style={{flex:1}}><Button title={t(editing?'playlists.save':'social.send')} busy={send.isPending} disabled={!text.trim()} onPress={()=>send.mutate()}/></View></View>{emojis&&<View style={{flexDirection:'row',gap:8,flexWrap:'wrap'}}>{CHAT_REACTIONS.map(emoji=><Button key={emoji} title={emoji} variant="ghost" onPress={()=>{setText(v=>(v+emoji).slice(0,4000));setEmojis(false);}}/>)}</View>}</View>
+    <Modal transparent visible={!!menu} animationType={reduced?'none':'fade'} onRequestClose={()=>setMenu(null)}><View style={{flex:1,justifyContent:'flex-end',backgroundColor:colors.overlay}}><Screen style={{flex:0,maxHeight:'80%',borderTopLeftRadius:24,borderTopRightRadius:24}}><ScrollView contentContainerStyle={{padding:20,gap:10}}><Button title={t('form.close')} variant="ghost" onPress={()=>setMenu(null)}/>{menu&&<><Button title={t('social.reply')} variant="secondary" onPress={()=>{if(editing)cancelEdit();setReply(menu);setMenu(null);}}/><View style={{flexDirection:'row',gap:8,flexWrap:'wrap'}}>{CHAT_REACTIONS.map(emoji=><Button key={emoji} title={emoji} variant="ghost" onPress={()=>mutate(menu,{action:'react',emoji})}/>)}</View>{menu.sender_id===userId&&<><Button title={t('social.edit_message')} variant="secondary" onPress={()=>{beforeEdit.current=text;setEditing(menu);setText(menu.text);setReply(null);setMenu(null);}}/><Button title={t('social.delete_message')} variant="danger" onPress={()=>mutate(menu,{action:'delete'})}/></>}</>}</ScrollView></Screen></View></Modal>
+  </KeyboardAvoidingView>;
+}

apps/mobile/src/features/social/Listening.tsx

@@ -0,0 +1,60 @@
+import { socialApi, type ListeningPreferences, type SocialPerson } from '@pipu/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Modal, ScrollView, Switch, Text, View } from 'react-native';
+import { useSession, useSessionCtx, useUser } from '../../lib/session';
+import { player } from '../../player/controller';
+import { eventId } from '../../player/eventId';
+import { usePlayerState } from '../../player/hooks';
+import { useColors } from '../../theme';
+import { Button, ErrorBox, H1, Muted, Screen, useErrorText } from '../../ui/kit';
+
+function useListening() {
+  const session = useSession(); const { server } = useSessionCtx(); const user = useUser();
+  const api = useMemo(() => socialApi(session), [session]); const key = ['m-listening', server, user.id] as const;
+  const query = useQuery({ queryKey: key, queryFn: api.listening, refetchInterval: 3000 });
+  return { api, key, query, user };
+}
+export function ListeningPanel() {
+  const { api, key, query, user } = useListening(); const { t } = useTranslation(); const cache = useQueryClient(); const errorText = useErrorText(); const colors = useColors();
+  const [expanded, setExpanded] = useState(false); const prefs = query.data?.preferences;
+  const save = useMutation({ mutationFn: (body: ListeningPreferences) => api.setListeningPreferences(body), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  const action = useMutation({ mutationFn: (a: { action: 'accept' | 'decline' | 'cancel'; target: string }) => api.listeningAction({ id: eventId(Date.now()), action: a.action, target_id: a.target }), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  return <View style={{ gap: 12 }}><Button title={t('social.together')} variant="secondary" onPress={() => setExpanded(v => !v)} />
+    {expanded && <View style={{ padding: 16, borderRadius: 16, gap: 14, backgroundColor: colors.surface }}><Muted>{t('social.stream_prefs_hint')}</Muted>
+      {(['requests', 'auto_accept'] as const).map(field => <View key={field} style={{ gap: 8 }}><Muted>{t(field === 'requests' ? 'social.stream_requests' : 'social.stream_auto')}</Muted><View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>{(['nobody', 'friends', 'everyone'] as const).map(v => <Button key={v} title={t(`social.visibility_${v}`)} disabled={!prefs || save.isPending} variant={(prefs?.[field] ?? 'nobody') === v ? 'primary' : 'ghost'} onPress={() => prefs && save.mutate({ ...prefs, [field]: v })} />)}</View></View>)}
+      <View style={{ flexDirection: 'row', gap: 12, alignItems: 'center' }}><Text style={{ color: colors.text, flex: 1 }}>{t('social.stream_autoplay')}</Text><Switch accessibilityLabel={t('social.stream_autoplay')} value={prefs?.autoplay ?? true} disabled={!prefs || save.isPending} onValueChange={autoplay => prefs && save.mutate({ ...prefs, autoplay })} /></View>
+    </View>}
+    {query.data?.requests.map(r => <View key={r.id} style={{ padding: 16, borderRadius: 16, gap: 10, backgroundColor: colors.surface }}><Text style={{ color: colors.text }}>{r.recipient_id === user.id ? t(r.kind === 'join' ? 'social.stream_incoming_join' : 'social.stream_incoming_invite', { name: r.sender_name }) : t('social.stream_pending')}</Text>{r.recipient_id === user.id ? <><Button title={t('social.accept')} disabled={action.isPending} onPress={() => action.mutate({ action: 'accept', target: r.id })} /><Button title={t('social.decline')} disabled={action.isPending} variant="ghost" onPress={() => action.mutate({ action: 'decline', target: r.id })} /></> : <Button title={t('form.cancel')} disabled={action.isPending} variant="ghost" onPress={() => action.mutate({ action: 'cancel', target: r.id })} />}</View>)}
+    <ErrorBox>{query.error || save.error || action.error ? errorText(query.error ?? save.error ?? action.error) : null}</ErrorBox>
+  </View>;
+}
+export function ListenTogetherButton({ person }: { person: SocialPerson }) {
+  const { t } = useTranslation(); const [open, setOpen] = useState(false);
+  useEffect(() => { if (!person.online) setOpen(false); }, [person.online]);
+  return <><Button title={t('social.together')} disabled={!person.online} variant="ghost" onPress={() => setOpen(true)} />{!person.online && <Muted>{t('social.together_offline')}</Muted>}{open && person.online && <TogetherSheet person={person} close={() => setOpen(false)} />}</>;
+}
+function TogetherSheet({ person, close }: { person: SocialPerson; close: () => void }) {
+  const { t } = useTranslation(); const { api, key } = useListening(); const cache = useQueryClient(); const state = usePlayerState(); const errorText = useErrorText();
+  const [kind, setKind] = useState<'join' | 'invite'>(person.activity ? 'join' : 'invite'); const [id] = useState(() => eventId(Date.now()));
+  const action = useMutation({ mutationFn: () => api.listeningAction({ id, action: kind, target_id: person.id }), onSuccess: () => { close(); void cache.invalidateQueries({ queryKey: key }); } });
+  return <Modal animationType="slide" onRequestClose={close}><Screen><ScrollView contentContainerStyle={{ padding: 20, gap: 16 }}><Button title={t('form.close')} variant="ghost" onPress={close} /><H1>{t('social.together')}</H1><Muted>{person.display_name}</Muted><Muted>{t('social.stream_choice')}</Muted>
+    <Button title={t('social.join_stream')} variant={kind === 'join' ? 'primary' : 'ghost'} disabled={!person.activity || action.isPending || action.isSuccess} onPress={() => setKind('join')} />
+    <Button title={t('social.invite_stream')} variant={kind === 'invite' ? 'primary' : 'ghost'} disabled={!state.track || state.listening?.locked || action.isPending || action.isSuccess} onPress={() => setKind('invite')} />
+    <Muted>{t('social.stream_hint')}</Muted><ErrorBox>{action.error ? errorText(action.error) : null}</ErrorBox>
+    {action.isSuccess ? <Muted>{t(kind === 'join' ? 'social.stream_request_sent' : 'social.stream_invite_sent')}</Muted> : <Button title={t('social.send')} busy={action.isPending} disabled={kind === 'join' ? !person.activity : !state.track || state.listening?.locked} onPress={() => action.mutate()} />}
+  </ScrollView></Screen></Modal>;
+}
+export function ListeningBanner() {
+  const state = usePlayerState(); const session = useSession(); const user = useUser(); const colors = useColors(); const { t } = useTranslation(); const errorText = useErrorText(); const room = state.listening?.room;
+  const action = useMutation({ mutationFn: async () => room && socialApi(session).listeningAction({ id: eventId(Date.now()), action: room.owner_id === user.id ? 'end' : 'leave', target_id: room.id }) });
+  if (!room) return null;
+  return <View style={{ padding: 12, gap: 6, backgroundColor: colors.surface, borderTopWidth: 1, borderTopColor: colors.ok }}><Text style={{ color: colors.text, fontWeight: '600' }}>{t(state.listening?.locked ? 'social.stream_following' : 'social.stream_host', { name: room.owner_name })}</Text>
+    <Muted>{t(state.listening?.disconnected ? 'social.stream_lost' : state.listening?.needsStart ? 'social.stream_waiting_audio' : 'social.stream_controls')}</Muted>
+    <Muted>{t('social.stream_listeners', { count: Math.max(0, room.participants.length - 1) })}</Muted>
+    {state.listening?.locked && !state.playing && !state.listening.disconnected && <Button title={t('social.stream_start_audio')} variant="secondary" onPress={() => player.beginListeningAudio()} />}
+    <Button title={t(room.owner_id === user.id ? 'social.stream_end' : 'social.stream_leave')} variant="ghost" busy={action.isPending} onPress={() => action.mutate()} />
+    <ErrorBox>{action.error ? errorText(action.error) : null}</ErrorBox>
+  </View>;
+}

apps/mobile/src/features/social/SharedMusic.tsx

@@ -0,0 +1,38 @@
+import { unwrap } from '@pipu/core';
+import { useQuery } from '@tanstack/react-query';
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { FlatList, View } from 'react-native';
+import { useSession, useSessionCtx, useUser } from '../../lib/session';
+import { player } from '../../player/controller';
+import { Button, ErrorBox, H1, Muted, Screen, TrackRow, useErrorText } from '../../ui/kit';
+
+export function SharedMusic({ kind }: { kind: 'track' | 'playlist' }) {
+  const { id, owner } = useLocalSearchParams<{ id: string; owner?: string }>();
+  const session = useSession();
+  const { server } = useSessionCtx();
+  const user = useUser();
+  const router = useRouter();
+  const { t } = useTranslation();
+  const errorText = useErrorText();
+  const [playError, setPlayError] = useState<unknown>();
+  const query = useQuery({ queryKey: ['shared-music', server, user.id, kind, id, owner], refetchInterval: owner ? 15_000 : false, queryFn: async () => {
+    if (owner) return unwrap(await session.client.GET('/api/v1/social/activity/{userId}/playlist', { params: { path: { userId: owner } } }));
+    if (kind === 'track') {
+      const track = unwrap(await session.client.GET('/api/v1/tracks/{id}', { params: { path: { id } } }));
+      return { id: track.id, name: track.title, tracks: [track] };
+    }
+    return unwrap(await session.client.GET('/api/v1/shared/playlists/{shareId}', { params: { path: { shareId: id } } }));
+  } });
+  const visible = query.isError ? undefined : query.data;
+  return <Screen><FlatList data={visible?.tracks ?? []} keyExtractor={x => x.id}
+    ListHeaderComponent={<View style={{ padding: 20, gap: 16 }}>
+      <Button title={t('social.back')} variant="ghost" onPress={() => router.back()} />
+      <H1>{visible?.name ?? t(kind === 'track' ? 'social.listen_track' : 'social.listen_playlist')}</H1>
+      {query.isPending && <Muted>{t('social.loading')}</Muted>}
+      <ErrorBox>{query.error || playError ? errorText(query.error ?? playError) : null}</ErrorBox>
+    </View>}
+    renderItem={({ item, index }) => <TrackRow track={item} onPress={() => void player.playList(visible?.tracks ?? [], index, { type: kind === 'track' ? 'queue' : 'collection', id: visible?.id, label: visible?.name }).catch(setPlayError)} />}
+  /></Screen>;
+}

apps/mobile/src/features/social/Social.tsx

@@ -0,0 +1,149 @@
+import { attachmentPath, socialApi, type ActivityVisibility, type MusicAttachment, type SocialAction, type SocialPerson } from '@pipu/core';
+import { eventId } from '../../player/eventId';
+import { ListeningPanel, ListenTogetherButton } from './Listening';
+import { ChatConversation } from './ChatConversation';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useFocusEffect, useRouter } from 'expo-router';
+import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { AppState, Clipboard, KeyboardAvoidingView, Modal, Pressable, ScrollView, Share, Text, View } from 'react-native';
+import { useSession, useSessionCtx, useUser } from '../../lib/session';
+import { useColors } from '../../theme';
+import { Button, ErrorBox, Field, H1, Muted, Screen, useErrorText } from '../../ui/kit';
+
+function useSocial() {
+  const session = useSession();
+  const { server } = useSessionCtx();
+  const user = useUser();
+  const api = useMemo(() => socialApi(session), [session]);
+  const [active, setActive] = useState(AppState.currentState === 'active');
+  useEffect(() => { const sub = AppState.addEventListener('change', s => setActive(s === 'active')); return () => sub.remove(); }, []);
+  const key = ['m-social', server, user.id] as const;
+  const inbox = useQuery({ queryKey: key, queryFn: api.inbox, enabled: active, refetchInterval: active ? 15_000 : false });
+  return { api, key, inbox, user, active };
+}
+export function useSocialUnread() { return useSocial().inbox.data?.unread ?? 0; }
+
+const ChatDockContext = createContext<(id: string) => boolean>(() => false);
+export function NativeChatProvider({ children }: { children: ReactNode }) {
+  const { inbox } = useSocial(); const colors = useColors(); const { t } = useTranslation();
+  const [open, setOpen] = useState(false); const [peer, setPeer] = useState<string | null>(null);
+  const friends = inbox.data?.people.filter(p => p.relationship === 'friend') ?? [];
+  const selected = friends.find(p => p.id === peer); const unread = friends.reduce((sum,p) => sum+p.unread,0);
+  return <ChatDockContext.Provider value={id => { setPeer(id); setOpen(true); return true; }}>{children}
+    <View style={{ position: 'absolute', bottom: 158, right: 16 }}><Button title={`${t('social.messages')}${unread ? ` · ${unread}` : ''}`} variant="secondary" onPress={() => setOpen(true)} /></View>
+    <Modal transparent visible={open} animationType="slide" onRequestClose={() => setOpen(false)}>
+      <View style={{ flex: 1, justifyContent: 'flex-end', backgroundColor: colors.overlay }}><View style={{ height: '82%', borderTopLeftRadius: 24, borderTopRightRadius: 24, overflow: 'hidden', backgroundColor: colors.bg }}>
+        <Screen><View style={{ padding: 12, flexDirection: 'row', justifyContent: 'space-between' }}><Button title={t('social.people')} variant="ghost" onPress={() => setPeer(null)} /><Button title={t('social.minimize')} variant="ghost" onPress={() => setOpen(false)} /></View>
+          {selected ? <Chat key={selected.id} person={selected} active={open} /> : <ScrollView contentContainerStyle={{ padding: 16, gap: 12 }}><H1>{t('social.messages')}</H1>{friends.map(p => <Button key={p.id} title={`${p.display_name}${p.unread ? ` · ${p.unread}` : ''}`} variant="secondary" onPress={() => setPeer(p.id)} />)}{!friends.length && <Muted>{t('social.no_friends_share')}</Muted>}</ScrollView>}
+        </Screen>
+      </View></View>
+    </Modal>
+  </ChatDockContext.Provider>;
+}
+
+export function FriendRecommendations() {
+  const { api, inbox, key } = useSocial(); const cache = useQueryClient(); const { t } = useTranslation(); const errorText = useErrorText();
+  const save = useMutation({ mutationFn: api.setFriendsRecommendations, onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  return <View style={{ gap: 8 }}><Button title={t('social.friends_recommendations')} variant={(inbox.data?.friends_recommendations ?? true) ? 'primary' : 'secondary'} disabled={!inbox.data || save.isPending} onPress={() => save.mutate(!(inbox.data?.friends_recommendations ?? true))} /><Muted>{t('social.friends_recommendations_hint')}</Muted><ErrorBox>{save.error ? errorText(save.error) : null}</ErrorBox></View>;
+}
+export function MusicShareSheet({ attachment, url, close }: { attachment: MusicAttachment; url: string; close: () => void }) {
+  const { t } = useTranslation();
+  const { inbox, api, key } = useSocial();
+  const cache = useQueryClient();
+  const errorText = useErrorText();
+  const [sent, setSent] = useState<string[]>([]);
+  const [copied, setCopied] = useState(false);
+  const ids = useRef(new Map<string, string>());
+  const send = useMutation({ mutationFn: async (peer: string) => {
+    if (peer === 'copy') { Clipboard.setString(url); setCopied(true); return; }
+    if (peer === 'external') { await Share.share({ title: attachment.title, message: url }); return; }
+    let id = ids.current.get(peer); if (!id) { id = eventId(Date.now()); ids.current.set(peer, id); }
+    await api.send(peer, { id, text: attachment.title, attachment_kind: attachment.kind, attachment_id: attachment.id });
+    setSent(v => [...v, peer]); await cache.invalidateQueries({ queryKey: key });
+  } });
+  return <Modal animationType="slide" onRequestClose={close}><Screen><ScrollView contentContainerStyle={{ padding: 24, gap: 16 }}>
+    <Button title={t('form.cancel')} variant="ghost" onPress={close} />
+    <H1>{t('player.share')}</H1><Muted>{attachment.title}</Muted>
+    <Button title={t(copied ? 'social.copied' : 'social.copy')} disabled={send.isPending} onPress={() => send.mutate('copy')} />
+    <Button title={t('social.external')} variant="secondary" disabled={send.isPending} onPress={() => send.mutate('external')} />
+    <H1>{t('social.send_friend')}</H1>
+    {inbox.isPending && <Muted>{t('social.loading')}</Muted>}
+    {inbox.data && !inbox.data.people.some(p => p.relationship === 'friend') && <Muted>{t('social.no_friends_share')}</Muted>}
+    {inbox.data?.people.filter(p => p.relationship === 'friend').map(p => <Button key={p.id} title={`${p.display_name} · ${t(sent.includes(p.id) ? 'social.sent' : 'social.send')}`} variant="secondary" disabled={send.isPending || sent.includes(p.id)} onPress={() => send.mutate(p.id)} />)}
+    <ErrorBox>{send.error || inbox.error ? errorText(send.error ?? inbox.error) : null}</ErrorBox>
+  </ScrollView></Screen></Modal>;
+}
+
+export function SocialScreen({ root = false }: { root?: boolean }) {
+  const dock = useContext(ChatDockContext);
+  const { t } = useTranslation();
+  const colors = useColors();
+  const router = useRouter();
+  const { api, inbox, key } = useSocial();
+  const cache = useQueryClient();
+  const errorText = useErrorText();
+  const [search, setSearch] = useState('');
+  const [q, setQ] = useState('');
+  const [peer, setPeer] = useState('');
+  const [notifications, setNotifications] = useState(false);
+  useEffect(() => { const timer = setTimeout(() => setQ(search.trim()), 300); return () => clearTimeout(timer); }, [search]);
+  const results = useQuery({ queryKey: [...key, 'search', q], queryFn: () => api.search(q), enabled: q.length >= 2 });
+  const act = useMutation({ mutationFn: (body: SocialAction) => api.action(body), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  const visibility = useMutation({ mutationFn: (v: ActivityVisibility) => api.setVisibility(v), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  const selected = inbox.data?.people.find(p => p.id === peer && p.relationship === 'friend');
+  if (selected) return <Screen><Button title={t('social.back')} variant="ghost" onPress={() => setPeer('')} /><Chat key={selected.id} person={selected} /></Screen>;
+  const people = q.length >= 2 ? results.data ?? [] : inbox.data?.people ?? [];
+  return <Screen><ScrollView keyboardShouldPersistTaps="handled" contentContainerStyle={{ padding: 20, gap: 16 }}>
+    {!root && <Button title={t('social.back')} variant="ghost" onPress={() => router.back()} />}
+    <H1>{t('social.title')}</H1><Muted>{t('social.subtitle')}</Muted>
+    <View style={{ padding: 16, borderRadius: 16, backgroundColor: colors.surface, gap: 10 }}>
+      <Muted>{t('social.activity_visibility')}</Muted>
+      <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>{(['nobody', 'friends', 'everyone'] as const).map(v => <Button key={v} title={t(`social.visibility_${v}`)} variant={(inbox.data?.activity_visibility ?? 'nobody') === v ? 'primary' : 'ghost'} disabled={!inbox.data || visibility.isPending} onPress={() => visibility.mutate(v)} />)}</View>
+      <Muted>{t('social.activity_privacy_hint')}</Muted>
+      <ErrorBox>{visibility.error ? errorText(visibility.error) : null}</ErrorBox>
+    </View>
+    <ListeningPanel />
+    <View style={{ flexDirection: 'row', gap: 8, flexWrap: 'wrap' }}>
+      <Button title={t('social.people')} variant={notifications ? 'ghost' : 'primary'} onPress={() => setNotifications(false)} />
+      <Button title={`${t('social.notifications')} ${inbox.data?.unread || ''}`} variant={notifications ? 'primary' : 'ghost'} onPress={() => setNotifications(true)} />
+    </View>
+    <ErrorBox>{inbox.error || results.error || act.error ? errorText(inbox.error ?? results.error ?? act.error) : null}</ErrorBox>
+    {inbox.isPending && <Muted>{t('social.loading')}</Muted>}
+    {notifications ? <>
+      {inbox.data?.notifications.length === 0 && <Muted>{t('social.no_notifications')}</Muted>}
+      {inbox.data?.notifications.map(n => <View key={n.id} style={{ padding: 16, borderRadius: 16, backgroundColor: colors.surface, gap: 10, borderWidth: 1, borderColor: n.read ? colors.line : colors.accent }}>
+        <Text style={{ color: colors.text, fontWeight: '600' }}>{n.actor_name}</Text><Muted>{t(`social.kind_${n.kind}`)}</Muted><Muted>{new Date(n.created_at).toLocaleString()}</Muted>
+        <Button title={t('social.open')} variant="secondary" onPress={() => { setNotifications(false); setSearch(''); setQ(''); setPeer(n.actor_id); }} />
+        {!n.read && <Button title={t('social.mark_read')} variant="ghost" disabled={act.isPending} onPress={() => act.mutate({ action: 'read_notification', target_id: n.id })} />}
+      </View>)}
+    </> : <>
+      <Field label={t('social.search')} value={search} onChangeText={setSearch} maxLength={80} />
+      {q.length >= 2 && results.isFetching && <Muted>{t('social.loading')}</Muted>}
+      {!people.length && inbox.data && !results.isFetching && <Muted>{t(q.length >= 2 ? 'social.no_results' : 'social.empty')}</Muted>}
+      {people.map(p => <View key={p.id} style={{ padding: 16, borderRadius: 16, backgroundColor: colors.surface, gap: 10 }}>
+        <Text style={{ color: colors.text, fontWeight: '600', fontSize: 17 }}>{p.display_name}</Text><Muted>@{p.username} · {t(`social.rel_${p.relationship}`)}</Muted>
+        {p.relationship === 'friend' && <Text style={{ color: colors.text2, fontSize: 12 }}>{t(p.online ? 'social.online' : 'social.offline')}</Text>}
+        {p.activity && <View style={{ borderLeftWidth: 2, borderLeftColor: colors.ok, paddingLeft: 12, gap: 6 }}>
+          <Text style={{ color: colors.ok, fontSize: 12 }}>{t('social.listening')}</Text>
+          <Pressable accessibilityRole="link" onPress={() => router.push({ pathname: '/social-track', params: { id: p.activity!.track_id } })}><Text style={{ color: colors.accent2 }}>{p.activity.track_title}</Text></Pressable>
+          {!!p.activity.artist && <Muted>{p.activity.artist}</Muted>}
+          {p.activity.context === 'wave' && <Muted>{t('wave.title')}</Muted>}
+          {p.activity.context === 'playlist' && p.activity.playlist_id && <Pressable accessibilityRole="link" onPress={() => router.push({ pathname: '/social-playlist', params: { owner: p.id, id: p.activity!.playlist_id } })}><Text style={{ color: colors.accent2 }}>{t('social.from_playlist', { name: p.activity.playlist_name ?? '' })}</Text></Pressable>}
+        </View>}
+        {p.relationship === 'friend' && <Button title={`${t('social.chat')}${p.unread ? ` · ${p.unread}` : ''}`} onPress={() => { if (!dock(p.id)) setPeer(p.id); }} />}
+        {p.relationship === 'friend' && <ListenTogetherButton person={p} />}
+        {p.relationship === 'none' && <Button title={t('social.add')} disabled={act.isPending} onPress={() => act.mutate({ action: 'request', target_id: p.id })} />}
+        {p.relationship === 'incoming' && <Button title={t('social.accept')} disabled={act.isPending} onPress={() => act.mutate({ action: 'accept', target_id: p.id })} />}
+        {['friend', 'incoming', 'outgoing'].includes(p.relationship) && <Button title={t(p.relationship === 'incoming' ? 'social.decline' : p.relationship === 'outgoing' ? 'social.cancel' : 'social.remove')} variant="ghost" disabled={act.isPending} onPress={() => act.mutate({ action: 'remove', target_id: p.id })} />}
+        <Button title={t(p.relationship === 'blocked' ? 'social.unblock' : 'social.block')} variant="ghost" disabled={act.isPending} onPress={() => act.mutate({ action: p.relationship === 'blocked' ? 'unblock' : 'block', target_id: p.id })} />
+      </View>)}
+    </>}
+  </ScrollView></Screen>;
+}
+function Chat({ person, active: visible = true }: { person: SocialPerson; active?: boolean }) {
+ const {api,key,user,active}=useSocial(); const {server}=useSessionCtx();
+ const [focused,setFocused]=useState(false);
+ useFocusEffect(useCallback(()=>{setFocused(true);return()=>setFocused(false);},[]));
+ return <ChatConversation person={person} api={api} queryKey={key} userId={user.id} server={server??''} active={visible&&active&&focused}/>;
+}

apps/mobile/src/features/social/drafts.ts

@@ -0,0 +1,14 @@
+import * as FileSystem from 'expo-file-system';
+import { sha256 } from 'js-sha256';
+import { chatDraftKey } from '@pipu/core';
+
+const directory = `${FileSystem.documentDirectory}chat-drafts/`;
+const path = (server: string, user: string, peer: string) => `${directory}${sha256(chatDraftKey(server,user,peer))}.txt`;
+export async function readDraft(server: string, user: string, peer: string) {
+  try { return await FileSystem.readAsStringAsync(path(server,user,peer)); } catch { return ''; }
+}
+export async function saveDraft(server: string, user: string, peer: string, text: string) {
+  if (!text) { await FileSystem.deleteAsync(path(server,user,peer), { idempotent: true }); return; }
+  await FileSystem.makeDirectoryAsync(directory, { intermediates: true });
+  await FileSystem.writeAsStringAsync(path(server,user,peer),text);
+}

apps/mobile/src/player/controller.ts

@@ -1,6 +1,10 @@
 import NetInfo from '@react-native-community/netinfo';
 import {
   EventBuffer,
+  createActivityPublisher,
+  type ActivityPublisher,
+  ListeningCoordinator,
+  type ListeningRoom,
   WaveCoordinator,
   EARLY_SKIP_MS,
   type WaveInfo,
@@ -32,6 +36,7 @@ export { offlineWave };
 export type { WaveInfo } from '@pipu/core';
 
 export interface PlayerState {
+  listening?: import('@pipu/core').ListeningClientState;
   ready: boolean;
   track: Track | null;
   queue: Track[];
@@ -72,6 +77,11 @@ async function quality(): Promise<Quality> {
  * реакции и бесконечная волна. Один экземпляр на процесс: им пользуются и экраны, и фоновый сервис.
  */
 class Controller {
+  private activity: ActivityPublisher | null = null;
+  private listening: ListeningCoordinator | null = null;
+  private interrupted = false;
+  private remoteRoom: string | null = null;
+  private queueVersion = 0;
   private session: AuthSession | null = null;
   private server = '';
   private events: EventBuffer | null = null;
@@ -104,12 +114,27 @@ class Controller {
 
   private update(patch: Partial<PlayerState>) {
     this.state = { ...this.state, ...patch };
+    this.activity?.update(this.state);
+    this.listening?.update();
     for (const fn of this.listeners) fn();
   }
 
   /** Привязка к вошедшему пользователю: события и реакции уходят на его сервер, без сети — копятся в SQLite. */
   attach(session: AuthSession | null, server: string, userId: string | null) {
     if (this.session === session) return;
+    this.activity?.dispose();
+    this.listening?.dispose();
+    this.listening = null;
+    this.activity = session && userId ? createActivityPublisher(session, eventId(Date.now())) : null;
+    if (session && this.activity) {
+      this.listening = new ListeningCoordinator(session, this.activity.deviceId, {
+        read: this.getState,
+        pause: () => { this.queueVersion++; this.leaveWave(); void TrackPlayer.pause().catch(() => undefined); },
+        apply: (room, position, current) => this.syncListening(room, position, current),
+        changed: listening => this.update({ listening }),
+      });
+      this.listening.start();
+    }
     void this.events?.flush();
     this.session = session;
     this.server = server;
@@ -240,35 +265,49 @@ class Controller {
   }
 
   async playList(tracks: Track[], index: number, context: PlayContext) {
+    if (this.listening?.locked) return;
+    const version = ++this.queueVersion;
+    const current = () => version === this.queueVersion && !this.listening?.locked;
     const list = tracks.filter(playable);
     const target = tracks[index];
     if (!target || !list.length) return;
     await this.setup();
+    if (!current()) return;
+    const native = await this.toRntp(list);
+    if (!current()) return;
     this.leaveWave();
     this.finishAttempt(this.lastPositionMs / 1000);
     const start = Math.max(list.indexOf(target), 0);
     this.update({ queue: list, context, index: start, track: list[start] ?? null });
     await TrackPlayer.reset();
-    await TrackPlayer.add(await this.toRntp(list));
+    if (!current()) return;
+    await TrackPlayer.add(native);
+    if (!current()) return;
     await TrackPlayer.skip(start);
+    if (!current()) return;
     await TrackPlayer.play();
   }
 
   toggle() {
+    if (this.listening?.locked) return;
     void (this.state.playing ? TrackPlayer.pause() : TrackPlayer.play());
   }
 
   next() {
+    if (this.listening?.locked) return;
     void TrackPlayer.skipToNext().catch(() => undefined);
   }
 
   async prev() {
+    if (this.listening?.locked) return;
     const { position } = await TrackPlayer.getProgress();
+    if (this.listening?.locked) return;
     if (position > 3) await TrackPlayer.seekTo(0);
     else await TrackPlayer.skipToPrevious().catch(() => TrackPlayer.seekTo(0));
   }
 
   seek(ms: number) {
+    if (this.listening?.locked) return;
     const t = this.state.track;
     if (t) this.events?.push({ type: 'seek', track_id: t.id, from_ms: this.lastPositionMs, position_ms: ms });
     this.attempt?.seek(ms);
@@ -306,6 +345,7 @@ class Controller {
   // --- «Моя волна» ---
 
   async startWave(activity: string | null, mood: string | null) {
+    if (this.listening?.locked) return;
     if (!this.session) return;
     await this.setup();
     this.leaveWave();
@@ -335,6 +375,7 @@ class Controller {
   }
 
   async setWaveContext(activity: string | null, mood: string | null) {
+    if (this.listening?.locked) return;
     const wave = this.state.wave;
     if (!wave || !this.session) return this.startWave(activity, mood);
     const version = this.wavePolicy.changeContext(wave.sessionId);
@@ -422,18 +463,28 @@ class Controller {
 
   /** Восстановить последний трек и позицию (на паузе, без автозапуска). */
   async restore() {
-    if (!this.session || this.state.track) return;
+    if (!this.session || this.state.track || this.listening?.locked) return;
+    const session = this.session;
+    const initial = this.state;
+    const current = () => this.session === session && this.state.queue === initial.queue && !this.state.track && !this.listening?.locked;
     await this.setup();
+    if (!current()) return;
     try {
-      const st = unwrap(await this.session.client.GET('/api/v1/me/playback-state'));
+      const st = unwrap(await session.client.GET('/api/v1/me/playback-state'));
+      if (!current()) return;
       if (!st.track_id || !st.queue.length) return;
-      const res = unwrap(await this.session.client.POST('/api/v1/tracks/batch', { body: { ids: st.queue } }));
+      const res = unwrap(await session.client.POST('/api/v1/tracks/batch', { body: { ids: st.queue } }));
+      if (!current()) return;
       const tracks = res.items.filter(playable);
       const idx = Math.max(tracks.findIndex((t) => t.id === st.track_id), 0);
       if (!tracks.length) return;
+      const native = await this.toRntp(tracks);
+      if (!current()) return;
       this.update({ queue: tracks, index: idx, track: tracks[idx] ?? null, context: (st.context as PlayContext | null) ?? null });
       await TrackPlayer.reset();
-      await TrackPlayer.add(await this.toRntp(tracks));
+      if (this.state.queue !== tracks || this.listening?.locked) return;
+      await TrackPlayer.add(native);
+      if (this.state.queue !== tracks || this.listening?.locked) return;
       await TrackPlayer.skip(idx, tracks[idx]?.id === st.track_id ? st.position_ms / 1000 : 0);
     } catch {
       // офлайн или нет сохранённого состояния
@@ -441,6 +492,7 @@ class Controller {
   }
 
   async reset() {
+    this.queueVersion++;
     this.wavePolicy.activate(null);
     this.attempt = null;
     this.update({ queue: [], track: null, index: 0, playing: false, positionMs: 0, wave: null, context: null });
@@ -451,6 +503,35 @@ class Controller {
     this.save();
     void this.events?.flush();
   }
+
+  play() { if (!this.listening?.locked) void TrackPlayer.play(); }
+  pause() { if (!this.listening?.locked) void TrackPlayer.pause(); }
+  setInterrupted(paused: boolean) { this.interrupted = paused; }
+  beginListeningAudio() { this.listening?.beginAudio(); }
+  private async syncListening(room: ListeningRoom, position: number, current: () => boolean) {
+    if (!room.track_id) { await TrackPlayer.pause(); return; }
+    await this.setup();
+    if (!current()) return;
+    if (this.remoteRoom !== room.id || this.state.track?.id !== room.track_id || this.state.queue.length !== 1 || this.state.wave) {
+      const track = unwrap(await this.session!.client.GET('/api/v1/tracks/{id}', { params: { path: { id: room.track_id } } }));
+      const native = await this.toRntp([track]);
+      if (!current()) return;
+      this.remoteRoom = room.id;
+      this.leaveWave(); this.finishAttempt(this.lastPositionMs / 1000);
+      await TrackPlayer.pause();
+      if (!current()) return;
+      this.update({ queue: [track], track, index: 0, durationMs: track.duration_ms, positionMs: 0, context: { type: 'queue' }, wave: null });
+      await TrackPlayer.reset();
+      if (!current()) return;
+      await TrackPlayer.add(native);
+    }
+    if (!current()) return;
+    const target = Math.min(position, Math.max(0, this.state.durationMs - 100));
+    if (Math.abs(this.state.positionMs - target) > 1500) await TrackPlayer.seekTo(target / 1000);
+    if (!current()) { await TrackPlayer.pause(); return; }
+    if (room.playing && !this.interrupted) { if (!this.state.playing) await TrackPlayer.play(); }
+    else if (this.state.playing) await TrackPlayer.pause();
+  }
 }
 
 export const player = new Controller();

apps/mobile/src/player/service.ts

@@ -7,14 +7,15 @@ import { player } from './controller';
  * команды уходят прямо в ExoPlayer, а учёт прослушиваний ведёт тот же контроллер.
  */
 export async function PlaybackService(): Promise<void> {
-  TrackPlayer.addEventListener(Event.RemotePlay, () => void TrackPlayer.play());
+  TrackPlayer.addEventListener(Event.RemotePlay, () => player.play());
-  TrackPlayer.addEventListener(Event.RemotePause, () => void TrackPlayer.pause());
+  TrackPlayer.addEventListener(Event.RemotePause, () => player.pause());
-  TrackPlayer.addEventListener(Event.RemoteStop, () => void TrackPlayer.stop());
+  TrackPlayer.addEventListener(Event.RemoteStop, () => player.pause());
   TrackPlayer.addEventListener(Event.RemoteNext, () => player.next());
   TrackPlayer.addEventListener(Event.RemotePrevious, () => void player.prev());
   TrackPlayer.addEventListener(Event.RemoteSeek, ({ position }) => player.seek(position * 1000));
   // Звонок / голосовой ассистент: приостанавливаем и продолжаем сами (autoHandleInterruptions — для фокуса).
   TrackPlayer.addEventListener(Event.RemoteDuck, ({ paused, permanent }) => {
+    player.setInterrupted(paused || permanent);
     if (permanent) void TrackPlayer.pause();
     else if (paused) void TrackPlayer.pause();
   });

apps/mobile/src/ui/Onboarding.tsx

@@ -3,6 +3,7 @@ import { AGE_GROUPS, GENDERS, unwrap } from '@pipu/core';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
+import { FriendRecommendations } from '../features/social/Social';
 import { ActivityIndicator, Pressable, ScrollView, Text, View } from 'react-native';
 
 import { useSession, useSessionCtx, useUser } from '../lib/session';
@@ -38,6 +39,7 @@ export function RecommendationSettings() {
   const [editing, setEditing] = useState(false);
   const errorText = useErrorText();
   return <View>
+    <FriendRecommendations />
     {editing && query.data ? <Onboarding key={JSON.stringify(query.data.choice)} options={query.data} editing onDone={() => {
       setEditing(false); void client.invalidateQueries({ queryKey: ['onboarding'] });
     }} /> : <Button title={t('onboarding.edit')} variant="secondary" busy={query.isFetching} onPress={() => { void query.refetch().then((result) => { if (result.data && !result.error) setEditing(true); }); }} />}

apps/mobile/test/controller.test.ts

@@ -70,3 +70,18 @@ it('does not let a late context response replace a manually selected playlist',
   expect(player.getState().queue.map((t) => t.id)).toEqual(['manual']);
   expect(player.getState().context?.type).toBe('album');
 });
+
+it('does not restore a stale saved queue after manual playback starts', async () => {
+  const { player } = await import('../src/player/controller');
+  const saved = deferred<unknown>();
+  const get = vi.fn().mockReturnValue(saved.promise);
+  const post = vi.fn();
+  player.attach({ client: { GET: get, POST: post } } as unknown as AuthSession, 'http://localhost', null);
+  const restoring = player.restore();
+  await vi.waitFor(() => expect(get).toHaveBeenCalled());
+  await player.playList([track('chosen')], 0, { type: 'queue' });
+  saved.resolve({ data: { track_id: 'old', queue: ['old'], position_ms: 500 }, response: new Response() });
+  await restoring;
+  expect(player.getState().track?.id).toBe('chosen');
+  expect(post).not.toHaveBeenCalledWith('/api/v1/tracks/batch', expect.anything());
+});

apps/web/e2e/admin-navigation.spec.ts

@@ -0,0 +1,73 @@
+import { expect, test, type Page } from '@playwright/test';
+
+async function login(page: Page, username = 'mobile-admin', target = '/') {
+  await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+  await page.goto(`/login?redirect=${encodeURIComponent(target)}`);
+  await page.getByLabel('Логин', { exact: true }).fill(username);
+  await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill(`${username}-password`);
+  await page.getByRole('button', { name: 'Войти', exact: true }).click();
+  await expect(page.getByRole('button', { name: 'Меню профиля' })).toBeVisible();
+}
+
+test('admin groups related pages and remembers collapsed sections', async ({ page }, info) => {
+  await login(page);
+  const nav = page.getByRole('navigation', { name: 'Навигация' });
+  await nav.getByRole('button', { name: 'Админка', exact: true }).click();
+  await expect(nav.getByRole('link', { name: 'Пользователи', exact: true })).toBeVisible();
+  for (const title of ['Медиатека', 'Загрузки', 'Система']) {
+    await expect(nav.getByRole('button', { name: title, exact: true })).toHaveAttribute('aria-expanded', 'false');
+  }
+  await nav.getByRole('button', { name: 'Система', exact: true }).click();
+  const system = nav.getByRole('group', { name: 'Система', exact: true });
+  await expect(system.getByRole('link')).toHaveCount(4);
+  for (const title of ['Обновления', 'Конфигурация', 'Настройки', 'Журнал']) {
+    await expect(system.getByRole('link', { name: title, exact: true })).toBeVisible();
+  }
+  await nav.screenshot({ path: info.outputPath('admin-groups.png') });
+  // The fake API resets authentication on a full document load; sign in again.
+  await login(page);
+  await expect(nav.getByRole('button', { name: 'Система', exact: true })).toHaveAttribute('aria-expanded', 'true');
+  await nav.getByRole('button', { name: 'Система', exact: true }).click();
+  await login(page);
+  await expect(nav.getByRole('button', { name: 'Система', exact: true })).toHaveAttribute('aria-expanded', 'false');
+  await login(page, 'mobile-admin', '/admin/audit');
+  await expect(system.getByRole('link', { name: 'Журнал', exact: true })).toBeVisible();
+  await expect(system.getByRole('link', { name: 'Журнал', exact: true })).toHaveAttribute('data-status', 'active');
+  await nav.getByRole('button', { name: 'Медиатека', exact: true }).click();
+  await expect(nav.getByRole('group', { name: 'Медиатека', exact: true }).getByRole('link')).toHaveCount(2);
+  await nav.getByRole('button', { name: 'Загрузки', exact: true }).click();
+  await expect(nav.getByRole('group', { name: 'Загрузки', exact: true }).getByRole('link')).toHaveCount(3);
+});
+
+test('moderator sees only permitted groups and pages', async ({ page }) => {
+  await login(page, 'moderator', '/admin/library');
+  const nav = page.getByRole('navigation', { name: 'Навигация' });
+  await expect(nav.getByRole('group', { name: 'Медиатека', exact: true }).getByRole('link', { name: 'Библиотека' })).toBeVisible();
+  await expect(nav.getByRole('button', { name: 'Система', exact: true })).toHaveCount(0);
+  await expect(nav.getByRole('link', { name: 'Хранилища' })).toHaveCount(0);
+  await nav.getByRole('button', { name: 'Загрузки', exact: true }).click();
+  await expect(nav.getByRole('group', { name: 'Загрузки', exact: true }).getByRole('link', { name: 'Очередь', exact: true })).toBeVisible();
+});
+
+test('mobile menu exposes grouped pages and closes after navigation', async ({ page }, info) => {
+  await page.setViewportSize({ width: 390, height: 844 });
+  await login(page);
+  await page.getByRole('button', { name: 'Ещё', exact: true }).click();
+  const dialog = page.getByRole('dialog', { name: 'Навигация' });
+  for (const title of ['Медиатека', 'Загрузки', 'Система']) {
+    await expect(dialog.getByRole('heading', { name: title, exact: true })).toBeVisible();
+  }
+  await dialog.screenshot({ path: info.outputPath('admin-groups-mobile.png') });
+  await dialog.getByRole('group', { name: 'Система', exact: true }).getByRole('link', { name: 'Обновления', exact: true }).click();
+  await expect(dialog).not.toBeVisible();
+  await expect(page).toHaveURL(/\/admin\/updates$/);
+});
+
+test('tablet icon sidebar keeps all admin destinations accessible', async ({ page }) => {
+  await page.setViewportSize({ width: 900, height: 900 });
+  await login(page);
+  const nav = page.getByRole('navigation', { name: 'Навигация' });
+  for (const title of ['Библиотека', 'Хранилища', 'Предложить треки', 'Очередь', 'Журнал']) {
+    await expect(nav.getByRole('link', { name: title, exact: true })).toBeVisible();
+  }
+});

apps/web/e2e/artist-folder-upload.spec.ts

@@ -0,0 +1,62 @@
+import { mkdir, writeFile } from 'node:fs/promises';
+import { join } from 'node:path';
+import { expect, test } from '@playwright/test';
+
+test('an artist directory uploads each album as a separate batch with a shared portrait', async ({ page }, info) => {
+  const root = info.outputPath('творожный бизнес');
+  const albums = ['(2026) творог грехов - творожный бизнес', '(2025) молчанка - творожный бизнес'];
+  for (const album of albums) {
+    await mkdir(join(root, album), { recursive: true });
+    await writeFile(join(root, album, 'song.flac'), Buffer.alloc(128));
+  }
+  const portrait = Buffer.from('portrait');
+  await writeFile(join(root, 'artist.jpg'), portrait);
+  await writeFile(join(root, albums[0]!, 'cover.jpg'), Buffer.from('album cover'));
+  type Batch = { artist_image_base64?: string; cover_base64?: string; files: { client_id: string; rel_path: string }[] };
+  const batches: Batch[] = [];
+  await page.exposeFunction('recordArtistBatch', (batch: Batch) => { batches.push(batch); });
+  await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+  await page.goto('/login');
+  await page.getByLabel('Логин', { exact: true }).fill('mobile-admin');
+  await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('mobile-admin-password');
+  await page.getByRole('button', { name: 'Войти', exact: true }).click();
+  await expect(page.getByRole('button', { name: 'Меню профиля' })).toBeVisible();
+  await page.evaluate(() => {
+    const original = window.fetch;
+    window.fetch = async (input, init) => {
+      const req = new Request(input, init);
+      const path = new URL(req.url).pathname;
+      const json = (data: unknown) => new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
+      if (path === '/api/v1/uploads/precheck') {
+        const body = await req.json();
+        return json({ files: body.files.map((f: { client_id: string }) => ({ client_id: f.client_id, result: 'accepted' })) });
+      }
+      if (path === '/api/v1/uploads' && req.method === 'POST') {
+        const body = await req.json();
+        await (window as unknown as { recordArtistBatch: (body: unknown) => Promise<void> }).recordArtistBatch(body);
+        return json({ batch_id: crypto.randomUUID(), files: body.files.map((f: { client_id: string }) => ({ client_id: f.client_id, upload_file_id: f.client_id, tus_url: `/api/v1/uploads/files/${f.client_id}` })) });
+      }
+      return original(input, init);
+    };
+    history.pushState({}, '', '/uploads/new');
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  });
+  await page.route('**/api/v1/uploads/files/*', async (route) => {
+    await route.fulfill({ status: route.request().method() === 'HEAD' ? 200 : 204,
+      headers: { 'Upload-Length': '128', 'Upload-Offset': route.request().method() === 'HEAD' ? '0' : '128', 'Tus-Resumable': '1.0.0' } });
+  });
+  await page.locator('input[webkitdirectory]').setInputFiles(root);
+  const send = page.getByRole('button', { name: /^Отправить/ });
+  await expect(send).toBeEnabled();
+  await expect(page.getByText(/Пропущен/)).toHaveCount(0);
+  await send.click();
+  await expect(page.getByText(/Готово: 2 файла/)).toBeVisible();
+  expect(batches).toHaveLength(2);
+  expect(batches.map((batch) => batch.files[0]!.rel_path).sort()).toEqual(albums.map((album) => `творожный бизнес/${album}/song.flac`).sort());
+  for (const batch of batches) {
+    expect(batch.files).toHaveLength(1);
+    expect(batch.artist_image_base64).toBe(portrait.toString('base64'));
+  }
+  expect(batches.find((batch) => batch.files[0]!.rel_path.includes(albums[0]!))!.cover_base64).toBe(Buffer.from('album cover').toString('base64'));
+  expect(batches.find((batch) => batch.files[0]!.rel_path.includes(albums[1]!))!.cover_base64).toBeUndefined();
+});

apps/web/e2e/listening.spec.ts

@@ -0,0 +1,49 @@
+import { expect, test } from '@playwright/test';
+
+for (const scenario of ['pending', 'automatic', 'restricted', 'incoming']) {
+  test(`listening request lifecycle: ${scenario}`, async ({ page }, info) => {
+    await page.addInitScript(value => {
+      localStorage.setItem('pipu.locale', 'ru');
+      localStorage.setItem('pipu.e2e.listening', value);
+    }, scenario);
+    await page.goto('/login');
+    await page.getByLabel('Логин', { exact: true }).fill('alice');
+    await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('alice-password');
+    await page.getByRole('button', { name: 'Войти', exact: true }).click();
+    await page.getByRole('link', { name: 'Друзья и общение', exact: true }).click();
+    const banner = page.getByRole('region', { name: 'Слушать вместе', exact: true });
+    await expect(banner).toHaveCount(0);
+    if (scenario === 'incoming') {
+      await expect(page.getByRole('button', { name: 'Принять', exact: true })).toBeVisible();
+      await page.screenshot({ path: info.outputPath('pending-invite.png'), fullPage: true });
+      await page.getByRole('button', { name: 'Принять', exact: true }).click();
+    } else {
+      await page.getByRole('button', { name: 'Слушать вместе', exact: true }).click();
+      const dialog = page.getByRole('dialog', { name: 'Слушать вместе', exact: true });
+      await expect(dialog.getByRole('radio', { name: 'Подключиться к другу', exact: true })).toBeChecked();
+      await dialog.getByRole('button', { name: 'Отправить', exact: true }).click();
+      if (scenario === 'restricted') {
+        await expect(dialog.getByRole('alert')).toContainText('Совместное прослушивание недоступно');
+        await expect(dialog.getByRole('alert')).not.toContainText('Чат доступен только друзьям');
+        await page.screenshot({ path: info.outputPath('request-restricted.png'), fullPage: true });
+        await dialog.getByRole('button', { name: 'Закрыть', exact: true }).click();
+        await expect(dialog).toHaveCount(0);
+        await expect(banner).toHaveCount(0);
+        return;
+      }
+      await expect(dialog).toHaveCount(0);
+      if (scenario === 'pending') {
+        await expect(page.getByRole('button', { name: 'Отмена', exact: true })).toBeVisible();
+        await expect(banner).toHaveCount(0);
+        await page.getByRole('button', { name: 'Отмена', exact: true }).click();
+        await expect(page.getByRole('button', { name: 'Отмена', exact: true })).toHaveCount(0);
+        await expect(banner).toHaveCount(0);
+        return;
+      }
+    }
+    await expect(banner).toContainText('Слушаете вместе с moderator');
+    await expect(page.getByRole('contentinfo', { name: 'Плеер', exact: true }).getByRole('button', { name: 'Следующий', exact: true })).toBeDisabled();
+    await banner.getByRole('button', { name: 'Выйти из прослушивания', exact: true }).click();
+    await expect(banner).toHaveCount(0);
+  });
+}

apps/web/e2e/mini-social.spec.ts

@@ -0,0 +1,72 @@
+import axe from 'axe-core';
+import { expect, test } from '@playwright/test';
+
+for (const { width, height, light } of [{ width: 1280, height: 900, light: false }, { width: 1920, height: 900, light: false }, { width: 1024, height: 600, light: false }, { width: 1280, height: 720, light: true }]) {
+  test(`mini chat keeps the page and draft at ${width}x${height} ${light ? 'light' : 'dark'}`,  async ({ page }, info) => {
+    await page.setViewportSize({ width, height });
+    await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+    await page.goto('/login');
+    await page.getByLabel('Логин', { exact: true }).fill('alice');
+    await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('alice-password');
+    await page.getByRole('button', { name: 'Войти', exact: true }).click();
+    if (width === 1920) {
+      await page.getByRole('button', { name: 'Меню профиля', exact: true }).click();
+      await page.getByRole('menuitem', { name: 'Настройки', exact: true }).click();
+      await page.getByRole('button', { name: 'Остров', exact: true }).click();
+      await expect(page.getByRole('button', { name: 'Остров', exact: true })).toHaveAttribute('aria-pressed', 'true');
+      await page.getByRole('link', { name: 'Главная', exact: true }).first().click();
+    }
+    if (light) await page.evaluate(() => { document.documentElement.dataset.theme = 'light'; });
+    const dock = page.getByRole('complementary', { name: 'Друзья и чат', exact: true });
+    const toggle = dock.getByRole('button', { name: 'Друзья и чат', exact: true });
+    await toggle.click();
+    const panel = dock.getByRole('region', { name: 'Друзья и общение', exact: true });
+    await panel.getByRole('textbox', { name: 'Найти диалог', exact: true }).fill('moderator');
+    await expect(panel.getByRole('textbox', { name: 'Найти диалог', exact: true })).toHaveCSS('outline-style', 'none');
+    await panel.getByRole('button', { name: /moderator/ }).click();
+    const composer = panel.getByRole('textbox', { name: 'Сообщение', exact: true });
+    await composer.fill('Черновик из мини-чата');
+    await expect(page).toHaveURL(/\/$/);
+    await panel.getByRole('button', { name: 'Свернуть чат', exact: true }).click();
+    await expect(panel).toBeHidden();
+    await expect(toggle).toBeFocused();
+    await page.getByRole('link', { name: 'История', exact: true }).first().click();
+    await toggle.click();
+    await expect(composer).toHaveValue('Черновик из мини-чата');
+    await panel.getByRole('button', { name: 'Отправить', exact: true }).click();
+    await expect(panel.getByText('Черновик из мини-чата', { exact: true })).toBeVisible();
+    await expect(composer).toBeEmpty();
+    await expect(page).toHaveURL(/\/collection\/history$/);
+    const panelBox = (await panel.boundingBox())!;
+    const playerBox = (await page.getByRole('contentinfo', { name: 'Плеер', exact: true }).boundingBox())!;
+    expect(panelBox.width).toBeLessThanOrEqual(600);
+    expect(panelBox.x).toBeGreaterThanOrEqual(width - 640);
+    expect(panelBox.y).toBeGreaterThanOrEqual(60);
+    expect(panelBox.y + panelBox.height).toBeLessThan(playerBox.y);
+    await panel.evaluate(async element => {
+      await Promise.all(element.getAnimations({ subtree: true })
+        .filter(animation => animation.effect?.getTiming().iterations !== Infinity)
+        .map(animation => animation.finished.catch(() => undefined)));
+    });
+    await page.addScriptTag({ content: axe.source });
+    const violations = await page.evaluate(async (selector) => {
+      const result = await (window as unknown as { axe: typeof axe }).axe.run(document.querySelector(selector)!, { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] } });
+      return result.violations.map(violation => ({ id: violation.id, nodes: violation.nodes.map(node => ({ target: node.target, summary: node.failureSummary })) }));
+    }, '[id="mini-social-panel"]');
+    expect(violations).toEqual([]);
+    await page.screenshot({ path: info.outputPath('mini-chat.png'), fullPage: true });
+    await composer.fill('Продолжить в полном чате');
+    await composer.press('Escape');
+    await expect(panel).toBeHidden();
+    await toggle.click();
+    await expect(composer).toHaveValue('Продолжить в полном чате');
+    await page.setViewportSize({ width: 800, height: 900 });
+    await expect(dock).toHaveCount(0);
+    await page.setViewportSize({ width, height });
+    await expect(composer).toHaveValue('Продолжить в полном чате');
+    await panel.getByRole('button', { name: 'Открыть раздел', exact: true }).click();
+    await expect(page).toHaveURL(/\/friends\?/);
+    await expect(dock).toHaveCount(0);
+    await expect(page.getByRole('textbox', { name: 'Сообщение', exact: true })).toHaveValue('Продолжить в полном чате');
+  });
+}

apps/web/e2e/mobile.spec.ts

@@ -69,6 +69,8 @@ for (const [width, username] of [[320, 'mobile-admin'], [390, 'moderator'], [430
       await page.getByRole('button', { name: 'Ещё', exact: true }).click();
       await page.getByRole('dialog').getByRole('link', { name: 'Очередь', exact: true }).click();
       await expect(page.getByRole('heading', { name: 'Очередь на добавление' })).toBeVisible();
+      await expect(page.locator('audio')).toBeHidden();
+      await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).click();
       await expect(page.locator('audio')).toBeVisible();
       await fits(page);
       await page.getByRole('checkbox', { name: /^Выбрать Длинное/ }).check();
@@ -92,6 +94,31 @@ for (const [width, username] of [[320, 'mobile-admin'], [390, 'moderator'], [430
   });
 }
 
+for (const width of [390, 1280]) {
+  test(`player artist opens without a browser URL preview at ${width}px`, async ({ page }) => {
+    await page.setViewportSize({ width: 390, height: 844 });
+    await login(page, 'alice');
+    await page.setViewportSize({ width, height: 844 });
+    const box = page.getByRole('combobox', { name: 'Поиск', exact: true });
+    await box.fill('кино');
+    await box.press('Enter');
+    await page.getByRole('link', { name: /Группа крови/ }).first().click();
+    await page.getByRole('listitem').first().click();
+    const artist = page.getByRole('contentinfo', { name: 'Плеер' }).getByRole('link', { name: 'Кино', exact: true });
+    await artist.hover();
+    await expect(artist).not.toHaveAttribute('href');
+    expect(await artist.evaluate((el) => Boolean(el.closest('[title], a[href]')))).toBe(false);
+    if (width === 390) {
+      await artist.focus();
+      await page.keyboard.press('Enter');
+    } else {
+      await artist.click();
+    }
+    await expect(page).toHaveURL(/\/artist\//);
+    await expect(page.getByRole('heading', { name: 'Кино', exact: true })).toBeVisible();
+  });
+}
+
 test('mobile player keeps the island above navigation and exposes the queue', async ({ page }, info) => {
   await page.setViewportSize({ width: 320, height: 740 });
   await login(page, 'alice');
@@ -102,7 +129,15 @@ test('mobile player keeps the island above navigation and exposes the queue', as
   await page.getByRole('listitem').first().click();
   const player = page.getByRole('contentinfo', { name: 'Плеер' });
   await expect(player.getByRole('button', { name: 'Очередь', exact: true })).toBeVisible();
-  expect((await player.getByText('Группа крови', { exact: true }).boundingBox())!.width).toBeGreaterThan(40);
+  expect((await player.getByText('Группа крови', { exact: true }).boundingBox())!.width).toBeGreaterThan(220);
+  const artist = player.getByRole('link', { name: 'Кино', exact: true });
+  await expect(artist).toBeVisible();
+  const artistArea = await artist.locator('..').boundingBox();
+  expect(artistArea!.width).toBeGreaterThan(220);
+  const trackInfo = await player.getByText('Группа крови', { exact: true }).boundingBox();
+  const play = await player.getByRole('button', { name: /^(Пауза|Слушать)$/ }).boundingBox();
+  expect(trackInfo!.y + trackInfo!.height).toBeLessThanOrEqual(play!.y);
+  await page.screenshot({ path: info.outputPath('player-readable.png') });
   await fits(page);
   await page.getByRole('button', { name: 'Меню профиля' }).click();
   await page.getByRole('menuitem', { name: 'Настройки', exact: true }).click();

apps/web/e2e/notifications.spec.ts

@@ -0,0 +1,45 @@
+import axe from 'axe-core';
+import { expect, test } from '@playwright/test';
+
+for (const width of [390, 1280]) {
+  test(`notification history scrolls inside the dialog at ${width}px`, async ({ page }, info) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.addInitScript(() => {
+      localStorage.setItem('pipu.locale', 'ru');
+      localStorage.setItem('pipu.e2e.notifications', '1');
+    });
+    await page.goto('/login');
+    await page.getByLabel('Логин', { exact: true }).fill('alice');
+    await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('alice-password');
+    await page.getByRole('button', { name: 'Войти', exact: true }).click();
+    await page.getByRole('button', { name: 'Меню профиля', exact: true }).click();
+    await page.getByRole('menuitem', { name: 'Уведомления 4', exact: true }).click();
+    const dialog = page.getByRole('dialog', { name: 'Уведомления', exact: true });
+    const list = dialog.getByRole('region', { name: 'Уведомления', exact: true });
+    await expect(list.getByRole('article')).toHaveCount(28);
+    const box = (await dialog.boundingBox())!;
+    expect(box.height).toBeLessThanOrEqual(680);
+    expect(box.width).toBeLessThanOrEqual(Math.min(600, width - (width < 768 ? 24 : 32)));
+    const close = dialog.getByRole('button', { name: 'Закрыть', exact: true });
+    const closeBefore = (await close.boundingBox())!;
+    await list.evaluate(element => { element.scrollTop = element.scrollHeight; });
+    await expect(close).toBeVisible();
+    expect((await close.boundingBox())!.y).toBe(closeBefore.y);
+    await list.evaluate(element => { element.scrollTop = 0; });
+    await page.addScriptTag({ content: axe.source });
+    const violations = await page.evaluate(async (selector) => {
+      const result = await (window as unknown as { axe: typeof axe }).axe.run(document.querySelector(selector)!, { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] } });
+      return result.violations.map(violation => ({ id: violation.id, nodes: violation.nodes.map(node => node.target) }));
+    }, '[role="dialog"]');
+    expect(violations).toEqual([]);
+    await page.screenshot({ path: info.outputPath('notifications.png'), fullPage: true });
+    await dialog.getByRole('button', { name: 'Непрочитанные 4', exact: true }).click();
+    await expect(list.getByRole('article')).toHaveCount(4);
+    await list.getByRole('button', { name: 'Прочитано', exact: true }).first().click();
+    await expect(list.getByRole('article')).toHaveCount(3);
+    await dialog.getByRole('button', { name: 'Все', exact: true }).click();
+    await expect(list.getByRole('article')).toHaveCount(28);
+    await close.click();
+    await expect(dialog).toBeHidden();
+  });
+}

apps/web/e2e/playlists.spec.ts

@@ -32,9 +32,13 @@ for (const width of [320, 1280]) {
     await page.getByRole('button', { name: 'Управлять треками' }).click();
     await expect(page.getByRole('button', { name: /Убрать .* из плейлиста/ })).toBeVisible();
     await page.getByRole('button', { name: 'Поделиться плейлистом', exact: true }).click();
-    await expect(page.getByRole('status')).toHaveText('Ссылка на плейлист скопирована');
+    await page.getByRole('dialog').getByRole('button', { name: 'Скопировать ссылку', exact: true }).click();
+    await expect(page.getByRole('button', { name: 'Ссылка скопирована', exact: true })).toBeVisible();
+    await page.getByRole('dialog').getByRole('button', { name: 'Закрыть', exact: true }).click();
     const sharedUrl = await page.evaluate(() => navigator.clipboard.readText());
-    expect(sharedUrl).toMatch(/^http:\/\/127\.0\.0\.1:4173\/shared\/playlist\/[a-f0-9-]+$/);
+    const shared = new URL(sharedUrl);
+    expect(shared.origin).toBe(new URL(page.url()).origin);
+    expect(shared.pathname).toMatch(/^\/shared\/playlist\/[a-f0-9-]+$/);
     await expect(page.getByRole('button', { name: 'Отключить доступ по ссылке', exact: true })).toBeVisible();
 
     await expect.poll(() => page.evaluate(() => {
@@ -45,7 +49,9 @@ for (const width of [320, 1280]) {
     await page.getByRole('button', { name: 'Отключить доступ по ссылке', exact: true }).click();
     await expect(page.getByRole('button', { name: 'Отключить доступ по ссылке', exact: true })).toHaveCount(0);
     await page.getByRole('button', { name: 'Поделиться плейлистом', exact: true }).click();
-    await expect(page.getByRole('status')).toHaveText('Ссылка на плейлист скопирована');
+    await page.getByRole('dialog').getByRole('button', { name: 'Скопировать ссылку', exact: true }).click();
+    await expect(page.getByRole('button', { name: 'Ссылка скопирована', exact: true })).toBeVisible();
+    await page.getByRole('dialog').getByRole('button', { name: 'Закрыть', exact: true }).click();
     expect(await page.evaluate(() => navigator.clipboard.readText())).not.toBe(sharedUrl);
 
   });

apps/web/e2e/server-management.spec.ts

@@ -0,0 +1,221 @@
+import { expect, test, type Page } from '@playwright/test';
+
+async function login(page: Page, username = 'mobile-admin', target = '/') {
+  await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+  await page.goto(`/login?redirect=${encodeURIComponent(target)}`);
+  await page.getByLabel('Логин').fill(username);
+  await page.getByRole('textbox', { name: 'Пароль' }).fill(`${username}-password`);
+  await page.getByRole('button', { name: 'Войти' }).click();
+  await expect(page.getByRole('button', { name: 'Меню профиля' })).toBeVisible();
+}
+
+test('job log follows new output and pauses while reading older lines', async ({ page }) => {
+  await login(page);
+  await page.evaluate(() => {
+    let lines = 100;
+    window.addEventListener('test-job-lines', (event) => { lines = (event as CustomEvent<number>).detail; });
+    const original = window.fetch;
+    window.fetch = async (input, init) => {
+      const response = await original(input, init);
+      const request = new Request(input, init);
+      if (request.method === 'GET' && new URL(request.url).pathname === '/api/v1/admin/server/updates') {
+        const data = await response.json();
+        data.job = {
+          id: 'scroll-job', kind: 'update', state: 'running', target: 'main',
+          started_at: '2026-10-22T09:00:00Z', finished_at: '',
+          log: Array.from({ length: lines }, (_, i) => `Build line ${i + 1}`).join('\n'),
+        };
+        return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
+      }
+      return response;
+    };
+    history.pushState({}, '', '/admin/updates');
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  });
+  const log = page.getByLabel('Журнал выполнения');
+  const bottomGap = () => log.evaluate((el) => el.scrollHeight - el.clientHeight - el.scrollTop);
+  await expect(log).toContainText('Build line 100');
+  expect(await log.evaluate((el) => el.scrollHeight > el.clientHeight)).toBe(true);
+  await expect.poll(bottomGap).toBeLessThanOrEqual(4);
+
+  await page.evaluate(() => window.dispatchEvent(new CustomEvent('test-job-lines', { detail: 120 })));
+  await expect(log).toContainText('Build line 120');
+  await expect.poll(bottomGap).toBeLessThanOrEqual(4);
+
+  await log.evaluate((el) => { el.scrollTop = 100; });
+  await expect.poll(() => log.evaluate((el) => el.scrollTop)).toBe(100);
+  await page.evaluate(() => window.dispatchEvent(new CustomEvent('test-job-lines', { detail: 140 })));
+  await expect(log).toContainText('Build line 140');
+  expect(await log.evaluate((el) => el.scrollTop)).toBe(100);
+
+  await log.evaluate((el) => { el.scrollTop = el.scrollHeight; });
+  await expect.poll(bottomGap).toBeLessThanOrEqual(4);
+  await page.evaluate(() => window.dispatchEvent(new CustomEvent('test-job-lines', { detail: 160 })));
+  await expect(log).toContainText('Build line 160');
+  await expect.poll(bottomGap).toBeLessThanOrEqual(4);
+});
+
+test('admin selects repository and version, confirms and sees persistent job log', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/updates');
+  await expect(page.getByRole('heading', { name: 'Обновления', exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Последний релиз', exact: true })).toHaveAttribute('aria-pressed', 'true');
+  await page.getByRole('button', { name: 'Источники обновлений', exact: true }).click();
+  await page.getByRole('button', { name: 'Добавить источник' }).click();
+  await page.getByLabel('Название', { exact: true }).last().fill('Тестовая репа');
+  await page.getByLabel('URL Git-репозитория').last().fill('https://git.example.org/pipu/testing.git');
+  await page.getByRole('button', { name: 'Сохранить', exact: true }).click();
+  await expect(page.getByRole('dialog')).not.toBeVisible();
+  await page.getByLabel('Источник', { exact: true }).selectOption({ label: 'Тестовая репа' });
+  await page.getByRole('button', { name: 'Выбрать версию', exact: true }).click();
+  await page.getByLabel('Версия', { exact: true }).selectOption('v1.10.0');
+  await page.getByRole('button', { name: 'Установить обновление', exact: true }).click();
+  const dialog = page.getByRole('dialog');
+  await expect(dialog).toContainText('Тестовая репа');
+  await expect(dialog).toContainText('v1.10.0');
+  await dialog.getByRole('button', { name: 'Установить обновление' }).click();
+  await expect(page.getByRole('status').filter({ hasText: /^Выполняется$/ })).toBeVisible();
+  await expect(page.getByLabel('Журнал выполнения')).toContainText('build and restart');
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).not.toBeVisible();
+  await page.screenshot({ path: 'test-results/server-updates.png', fullPage: true });
+});
+
+test('config keeps secret unchanged, saves local override and applies separately', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/config');
+  await expect(page.getByRole('heading', { name: 'Конфигурация', exact: true })).toBeVisible();
+  await expect(page.getByLabel('GITEA_TOKEN · config.local', { exact: true })).toHaveValue('');
+  await expect(page.getByRole('button', { name: 'Сохранить', exact: true })).not.toBeVisible();
+  await page.getByLabel('LOG_LEVEL · config.local', { exact: true }).fill('debug');
+  await expect(page.getByText('В .env есть значение:', { exact: false })).toBeVisible();
+  await page.getByLabel('TRAIN_HOUR · config.local', { exact: true }).fill('6');
+  await expect(page.getByRole('button', { name: 'Применить и перезапустить', exact: true })).not.toBeVisible();
+  await page.getByRole('button', { name: 'Сохранить', exact: true }).click();
+  await expect(page.getByText('Изменения сохранены в config.local', { exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Сохранить', exact: true })).not.toBeVisible();
+  await expect(page.getByRole('button', { name: 'Отменить правки', exact: true })).not.toBeVisible();
+  await expect(page.getByLabel('GITEA_TOKEN · config.local', { exact: true })).toHaveAttribute('placeholder', 'Секрет сохранён');
+  await expect(page.getByText('Выполняется', { exact: true })).not.toBeVisible();
+  await page.getByRole('main').evaluate((element) => { element.scrollTop = 0; });
+  await page.screenshot({ path: 'test-results/server-config.png', fullPage: true });
+  await page.getByRole('button', { name: 'Применить и перезапустить', exact: true }).click();
+  await page.getByRole('dialog').getByRole('button', { name: 'Применить и перезапустить' }).click();
+  await expect(page.getByLabel('Журнал выполнения')).toContainText('build and restart');
+});
+
+test('update delegate can update but cannot open configuration', async ({ page }) => {
+  await login(page, 'update-manager', '/admin/updates');
+  await expect(page.getByRole('heading', { name: 'Обновления', exact: true })).toBeVisible();
+  await page.evaluate(() => { history.pushState({}, '', '/admin/config'); window.dispatchEvent(new PopStateEvent('popstate')); });
+  await expect(page).toHaveURL('/');
+  await expect(page.getByRole('heading', { name: 'Конфигурация', exact: true })).not.toBeVisible();
+});
+
+test('configuration masks every stored secret even if an older API returns plaintext', async ({ page }) => {
+  await login(page);
+  await page.evaluate(() => {
+    const original = window.fetch;
+    window.fetch = async (input, init) => {
+      const response = await original(input, init);
+      const request = new Request(input, init);
+      if (request.method === 'GET' && new URL(request.url).pathname === '/api/v1/admin/server/config') {
+        const data = await response.json();
+        const common = { group: 'api', type: 'string', secret: true, readonly: false };
+        data.entries = [
+          { ...common, key: 'ENV_SECRET', env: 'env-canary', local: 'local-canary', effective: 'env-canary', default_value: 'default-canary', source: 'env' },
+          { ...common, key: 'DEFAULT_SECRET', env: null, local: null, effective: 'default-canary', default_value: 'default-canary', source: 'default' },
+          { ...common, key: 'READONLY_SECRET', readonly: true, env: 'readonly-canary', local: null, effective: 'readonly-canary', default_value: '', source: 'env' },
+        ];
+        return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
+      }
+      return response;
+    };
+    history.pushState({}, '', '/admin/config');
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  });
+  const env = page.getByLabel('ENV_SECRET · config.local', { exact: true });
+  const defaults = page.getByLabel('DEFAULT_SECRET · config.local', { exact: true });
+  await expect(env).toHaveValue('');
+  await expect(env).toHaveAttribute('type', 'password');
+  await expect(defaults).toHaveValue('');
+  await expect(defaults).toHaveAttribute('placeholder', '');
+  await expect(page.getByText('READONLY_SECRET', { exact: true })).toBeVisible();
+  for (const canary of ['env-canary', 'local-canary', 'default-canary', 'readonly-canary']) {
+    expect(await page.getByRole('main').innerHTML()).not.toContain(canary);
+  }
+  await page.getByRole('button', { name: 'Показать пароль', exact: true }).first().click();
+  await expect(env).toHaveValue('');
+});
+
+test('a replacement secret is hidden and cleared from the form after saving', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/config');
+  const token = page.getByLabel('GITEA_TOKEN · config.local', { exact: true });
+  await token.fill('replacement-canary');
+  await expect(token).toHaveAttribute('type', 'password');
+  await page.getByRole('button', { name: 'Сохранить', exact: true }).click();
+  await expect(page.getByText('Изменения сохранены в config.local', { exact: true })).toBeVisible();
+  await expect(token).toHaveValue('');
+  await expect(token).toHaveAttribute('placeholder', 'Секрет сохранён');
+  expect(await page.getByRole('main').innerHTML()).not.toContain('replacement-canary');
+});
+
+test('ordinary user is redirected away from server management', async ({ page }) => {
+  await login(page, 'alice', '/admin/updates');
+  await expect(page).toHaveURL('/');
+});
+
+
+test('installed main and release show no install action; another version can be installed', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/updates');
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).toBeVisible();
+  await page.getByRole('button', { name: 'main', exact: true }).click();
+  await expect(page.getByText('Эта версия уже установлена — обновлений нет', { exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).not.toBeVisible();
+  await page.getByRole('button', { name: 'Выбрать версию', exact: true }).click();
+  await expect(page.getByText('Выберите версию для проверки', { exact: true })).toBeVisible();
+  await page.getByLabel('Версия', { exact: true }).selectOption('v1.9.0');
+  await expect(page.getByText('Эта версия уже установлена — обновлений нет', { exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).not.toBeVisible();
+  await page.getByLabel('Версия', { exact: true }).selectOption('v1.10.0');
+  await expect(page.getByText('Доступно обновление', { exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).toBeVisible();
+});
+
+test('explicit check bypasses cache and hides install action until the check finishes', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/updates');
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).toBeVisible();
+  await page.evaluate(() => {
+    const original = window.fetch;
+    window.fetch = async (input, init) => {
+      const request = new Request(input, init);
+      if (request.url.includes('/api/v1/admin/server/updates') && request.url.includes('fresh=true')) {
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+        const response = await original(input, init);
+        const data = await response.json();
+        return new Response(JSON.stringify({ ...data, update_state: 'current', target_commit: data.current_commit }), { headers: { 'Content-Type': 'application/json' } });
+      }
+      return original(input, init);
+    };
+  });
+  await page.getByRole('button', { name: 'Проверить обновления', exact: true }).click();
+  await expect(page.getByText('Проверяем выбранную версию…', { exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Установить обновление', exact: true })).not.toBeVisible();
+  await expect(page.getByText('Эта версия уже установлена — обновлений нет', { exact: true })).toBeVisible();
+});
+
+test('saving panel disappears when all edited values return to their original state', async ({ page }) => {
+  await login(page, 'mobile-admin', '/admin/config');
+  await expect(page.getByRole('heading', { name: 'Конфигурация', exact: true })).toBeVisible();
+  const save = page.getByRole('button', { name: 'Сохранить', exact: true });
+  const apply = page.getByRole('button', { name: 'Применить и перезапустить', exact: true });
+  await expect(save).not.toBeVisible();
+  await expect(apply).not.toBeVisible();
+  const field = page.getByLabel('TRAIN_HOUR · config.local', { exact: true });
+  await field.fill('6');
+  await expect(save).toBeVisible();
+  await field.clear();
+  await expect(save).not.toBeVisible();
+  await expect(apply).not.toBeVisible();
+  await field.fill('7');
+  await page.getByRole('button', { name: 'Отменить правки', exact: true }).click();
+  await expect(save).not.toBeVisible();
+  await expect(field).toHaveValue('');
+});

apps/web/e2e/social-profile.spec.ts

@@ -0,0 +1,43 @@
+import axe from 'axe-core';
+import { expect, test } from '@playwright/test';
+
+for (const { width, light } of [{ width: 390, light: false }, { width: 1280, light: false }, { width: 1280, light: true }]) {
+  test(`social profile settings at ${width}px ${light ? 'light' : 'dark'}`, async ({ page }, info) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+    await page.goto('/login');
+    await page.getByLabel('Логин', { exact: true }).fill('alice');
+    await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('alice-password');
+    await page.getByRole('button', { name: 'Войти', exact: true }).click();
+    if (light) await page.evaluate(() => { document.documentElement.dataset.theme = 'light'; });
+    await page.getByRole('button', { name: 'Меню профиля', exact: true }).click();
+    await expect(page.getByRole('menuitem', { name: 'Уведомления', exact: true })).toBeVisible();
+    await page.getByRole('menuitem', { name: 'Моя музыка скрыта', exact: true }).click();
+    const dialog = page.getByRole('dialog', { name: 'Приватность и общение', exact: true });
+    const visibility = dialog.getByRole('group', { name: 'Кто видит мою музыку', exact: true });
+    const friends = visibility.getByRole('button', { name: 'Друзьям', exact: true });
+    await friends.click();
+    await expect(friends).toHaveAttribute('aria-pressed', 'true');
+    await expect(friends).toBeEnabled();
+    await expect(friends).toBeFocused();
+    await dialog.getByText('Слушать вместе', { exact: true }).click();
+    await expect(dialog.getByRole('group', { name: 'Принимать запросы и приглашения от', exact: true })).toBeVisible();
+    expect((await dialog.boundingBox())!.width).toBeLessThanOrEqual(width - 24);
+    await expect.poll(() => dialog.evaluate(element => element.scrollWidth - element.clientWidth)).toBeLessThanOrEqual(1);
+    await page.addScriptTag({ content: axe.source });
+    const violations = await page.evaluate(async () => {
+      const result = await (window as unknown as { axe: typeof axe }).axe.run(document.querySelector('[role="dialog"]')!, { runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa'] } });
+      return result.violations.map(violation => ({ id: violation.id, nodes: violation.nodes.map(node => node.target) }));
+    });
+    expect(violations).toEqual([]);
+    await page.screenshot({ path: info.outputPath('privacy.png'), fullPage: true });
+    await dialog.getByRole('button', { name: 'Закрыть', exact: true }).click();
+    if (width < 768) await page.getByRole('button', { name: 'Ещё', exact: true }).click();
+    await page.getByRole('link', { name: 'Друзья и общение', exact: true }).click();
+    const heading = page.getByRole('heading', { name: 'Друзья и общение', exact: true });
+    await expect(heading).toBeVisible();
+    expect((await heading.locator('..').boundingBox())!.height).toBeLessThanOrEqual(40);
+    await expect(page.getByRole('button', { name: 'Моя музыка скрыта', exact: true })).toHaveCount(0);
+    await expect(page.getByRole('button', { name: 'Уведомления', exact: true })).toHaveCount(0);
+  });
+}

apps/web/e2e/social.spec.ts

@@ -0,0 +1,80 @@
+import { expect, test } from '@playwright/test';
+
+for (const width of [320, 800, 1280]) {
+  test(`friends, messages and sharing at ${width}px`, async ({ page }, info) => {
+    await page.setViewportSize({ width, height: 900 });
+    await page.emulateMedia({ reducedMotion: width === 1280 ? 'no-preference' : 'reduce' });
+    await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+    if (width === 800) await page.addInitScript(() => Object.defineProperty(navigator, 'share', { configurable: true, value: async (data: ShareData) => { sessionStorage.setItem('shared-url', data.url ?? ''); } }));
+    await page.goto('/login');
+    await page.getByLabel('Логин', { exact: true }).fill('alice');
+    await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('alice-password');
+    await page.getByRole('button', { name: 'Войти', exact: true }).click();
+    const openFriends = async () => {
+      if (width < 768) await page.getByRole('button', { name: 'Ещё', exact: true }).click();
+      await page.getByRole('link', { name: 'Друзья и общение', exact: true }).click();
+    };
+    await openFriends();
+    if (width === 800) await page.evaluate(() => { document.documentElement.dataset.theme = 'light'; });
+    await page.getByRole('button', { name: /moderator Начать разговор/ }).click();
+    await expect(page.getByRole('region', { name: 'Написать', exact: true }).getByText('Не в сети', { exact: true })).toBeVisible();
+    await expect(page.getByRole('region', { name: 'Написать', exact: true }).getByRole('button', { name: 'Слушать вместе', exact: true })).toBeDisabled();
+    await expect(page.getByRole('region', { name: 'Написать', exact: true })).toHaveCSS('animation-name', width === 1280 ? /conversationIn/ : 'none');
+    if (width === 800) expect((await page.getByRole('textbox', { name: 'Сообщение', exact: true }).boundingBox())!.width).toBeGreaterThan(180);
+    await page.getByRole('textbox', { name: 'Сообщение', exact: true }).fill('Привет! Нашёл музыку для нашей поездки 🎵');
+    await page.getByRole('button', { name: 'Отправить', exact: true }).click();
+    await expect(page.getByText('Привет! Нашёл музыку для нашей поездки 🎵', { exact: true })).toBeVisible();
+    await expect(page.getByRole('textbox', { name: 'Сообщение', exact: true })).toBeEmpty();
+    await page.getByRole('button', { name: 'Действия с сообщением', exact: true }).click();
+    await expect(page.getByRole('menuitem', { name: 'Удалить для всех', exact: true })).toBeVisible();
+    await page.getByRole('menuitem', { name: '❤️', exact: true }).click();
+    await expect(page.getByRole('button', { name: '❤️ 1', exact: true })).toBeVisible();
+    await page.screenshot({ path: info.outputPath('conversation.png'), fullPage: true });
+    await page.getByRole('combobox', { name: 'Поиск', exact: true }).fill('кино');
+    await page.getByRole('combobox', { name: 'Поиск', exact: true }).press('Enter');
+    await page.getByRole('listitem').first().click();
+    await page.getByRole('contentinfo', { name: 'Плеер' }).getByRole('button', { name: 'Поделиться треком', exact: true }).click();
+    await expect(page.getByRole('dialog').getByRole('button', { name: 'Скопировать ссылку', exact: true })).toBeVisible();
+    if (width === 800) {
+      await page.getByRole('dialog').getByRole('button', { name: 'Отправить в приложение', exact: true }).click();
+      await expect.poll(() => page.evaluate(() => sessionStorage.getItem('shared-url'))).toContain('/track/');
+    }
+    await page.getByRole('dialog').getByRole('button', { name: 'moderator · Отправить', exact: true }).click();
+    await expect(page.getByRole('button', { name: 'moderator · Отправлено', exact: true })).toBeDisabled();
+    await page.screenshot({ path: info.outputPath('share-music.png') });
+    await page.getByRole('dialog').getByRole('button', { name: 'Закрыть', exact: true }).click();
+    await openFriends();
+    await page.getByRole('button', { name: /moderator/ }).filter({ has: page.locator('strong') }).click();
+    await expect(page.getByRole('link', { name: 'Открыть трек', exact: true })).toBeVisible();
+    await page.getByRole('button', { name: 'Музыка из переписки', exact: true }).click();
+    await expect(page.getByRole('link', { name: 'Открыть трек', exact: true })).toBeVisible();
+    await expect(page.getByRole('textbox', { name: 'Сообщение', exact: true })).toHaveCount(0);
+    await page.screenshot({ path: info.outputPath('shared-music.png'), fullPage: true });
+    await page.getByRole('button', { name: 'Переписка', exact: true }).click();
+    const longMessage = '%20%D0%BC%D1%83%D0%B7%D1%8B%D0%BA%D0%B0'.repeat(45);
+    await page.getByRole('textbox', { name: 'Сообщение', exact: true }).fill(longMessage);
+    await page.getByRole('button', { name: 'Отправить', exact: true }).click();
+    await expect(page.getByRole('button', { name: 'Показать полностью', exact: true })).toBeVisible();
+    await page.getByRole('button', { name: 'Показать полностью', exact: true }).click();
+    await expect(page.getByRole('button', { name: 'Свернуть текст', exact: true }).locator('..')).toContainText(longMessage);
+    await page.getByRole('button', { name: 'Свернуть текст', exact: true }).click();
+    if (width === 320) {
+      await page.getByRole('button', { name: 'Назад к сообщениям', exact: true }).click();
+      await expect(page.getByRole('searchbox', { name: 'Найти диалог', exact: true })).toBeVisible();
+      await expect(page.getByRole('textbox', { name: 'Сообщение', exact: true })).toBeHidden();
+      await page.getByRole('button', { name: /moderator/ }).filter({ has: page.locator('strong') }).click();
+      await page.setViewportSize({ width, height: 560 });
+    }
+    await expect.poll(async () => {
+      const composerBox = (await page.getByRole('textbox', { name: 'Сообщение', exact: true }).boundingBox())!;
+      const playerBox = (await page.getByRole('contentinfo', { name: 'Плеер' }).boundingBox())!;
+      return composerBox.y + composerBox.height - playerBox.y;
+    }).toBeLessThanOrEqual(0);
+    await expect.poll(() => page.evaluate(() => {
+      const main = document.querySelector('main')!;
+      return Math.max(document.documentElement.scrollWidth - innerWidth, main.scrollWidth - main.clientWidth);
+    })).toBeLessThanOrEqual(1);
+    await page.getByRole('link', { name: 'Открыть трек', exact: true }).click();
+    await expect(page.getByRole('heading', { name: 'Группа крови', exact: true })).toBeVisible();
+  });
+}

apps/web/e2e/upload-review.spec.ts

@@ -0,0 +1,462 @@
+import { expect, test, type Page } from '@playwright/test';
+
+function previewWav(seconds = 2) {
+  const dataSize = 8000 * 2 * seconds;
+  const wav = Buffer.alloc(44 + dataSize);
+  wav.write('RIFF', 0); wav.writeUInt32LE(36 + dataSize, 4); wav.write('WAVEfmt ', 8);
+  wav.writeUInt32LE(16, 16); wav.writeUInt16LE(1, 20); wav.writeUInt16LE(1, 22);
+  wav.writeUInt32LE(8000, 24); wav.writeUInt32LE(16000, 28); wav.writeUInt16LE(2, 32); wav.writeUInt16LE(16, 34);
+  wav.write('data', 36); wav.writeUInt32LE(dataSize, 40);
+  return wav;
+}
+
+async function setup(page: Page, scenario: 'queue' | 'template' | 'mine' | 'release' | 'mixed', audioAvailable = true) {
+  await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+  await page.goto('/login');
+  await page.getByLabel('Логин', { exact: true }).fill('mobile-admin');
+  await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('mobile-admin-password');
+  await page.getByRole('button', { name: 'Войти', exact: true }).click();
+  await expect(page.getByRole('button', { name: 'Меню профиля' })).toBeVisible();
+  await page.evaluate(async ({ scenario, audioAvailable }) => {
+    const modulePath = '/src/test/mobileFixtures.ts';
+    const { mobileFixtures } = await import(modulePath);
+    const source = structuredClone(mobileFixtures['/api/v1/admin/sources'].items[0]);
+    const file = { ...structuredClone(mobileFixtures['/api/v1/admin/uploads'].items[0]), batch_has_cover: true };
+    const files = [
+      { ...file, id: 'visible', original_name: 'visible.flac', target_source_name: source.name, target_rel_path: 'Artist/Album/01 - Song.flac', target_storage_path: 'nas:/music/Artist/Album/01 - Song.flac', stream_url: `/api/v1/admin/uploads/files/${file.id}/stream?exp=9999999999&sig=test` },
+      { ...file, id: 'approved', original_name: 'approved.flac', status: 'approved' },
+      { ...file, id: 'hidden', original_name: 'hidden.flac', status: 'processing' },
+      { ...file, id: 'withdrawn', original_name: 'withdrawn.flac', metadata: null, status: 'withdrawn' },
+      { ...file, id: 'rejected', original_name: 'rejected.flac', metadata: null, status: 'rejected' },
+    ];
+    files[0]!.bitrate = 778000;
+    const missing = { ...file, id: 'missing', original_name: 'missing.flac', bitrate: 924000, target_source_id: null, target_source_name: null, target_rel_path: null, status_reason: 'uploads.no_target' };
+    const releaseId = '11111111-1111-4111-8111-111111111111';
+    const deluxeId = '22222222-2222-4222-8222-222222222222';
+    const tracks = [1, 2].map((n) => ({ recording_id: `recording-${n}`, title: `Song ${n}`, artist: 'Catalogue Artist', disc: 1, position: n, duration_ms: 180000 }));
+    const standard = { release: { id: releaseId, group_id: releaseId, title: 'Album', artist: 'Catalogue Artist', type: 'Album', date: '2024-01-01', country: 'RU', comment: 'Digital', has_cover: true, tracks },
+      matches: [{ file_id: 'visible', track_index: 0, confidence: 'high' }, { file_id: 'missing', track_index: 1, confidence: 'high' }], missing: [], existing: [], unmatched: [], matched: 2, total: 2, complete: true, confidence: 'high' };
+    const bonus = { ...tracks[0]!, title: 'Bonus', position: 3 };
+    const deluxe = { ...standard, release: { ...standard.release, id: deluxeId, comment: 'Deluxe', tracks: [...tracks, bonus] }, missing: [bonus], existing: [bonus], total: 3, complete: false };
+    let releaseReport = { state: 'ready', input_hash: 'original', selected_release: null as string | null, candidates: [standard, deluxe], audio_available: audioAvailable, audio_results: [] as { file_id: string; state: string }[] };
+    const groupA = { id: 'aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa', artist: 'Artist A', album: 'Album A', file_ids: ['visible'], has_cover: true, state: 'ready' };
+    const groupB = { id: 'bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb', artist: 'Artist B', album: 'Album B', file_ids: ['missing'], has_cover: false, state: 'ready' };
+    const groups = [groupA, groupB];
+    const groupReports = Object.fromEntries(groups.map((g, i) => [g.id, { ...releaseReport, group_id: g.id, groups, input_hash: g.id,
+      candidates: [{ ...standard, release: { ...standard.release, id: i ? deluxeId : releaseId, artist: g.artist, title: g.album, tracks: [tracks[i]] }, matches: [{ file_id: g.file_ids[0], track_index: 0, confidence: 'high' }], matched: 1, total: 1 }],
+    }]));
+    let rejectReleaseOnce = true;
+    let failOnce = true;
+    const deleted: string[] = [];
+    const original = window.fetch;
+    const json = (data: unknown, status = 200) => new Response(JSON.stringify(data), { status, headers: { 'Content-Type': 'application/json' } });
+    window.fetch = async (input, init) => {
+      const req = new Request(input, init);
+      const url = new URL(req.url);
+      if (scenario === 'mixed' && url.pathname.includes('/admin/uploads/batches/')) {
+        if (url.pathname.endsWith('/releases')) {
+          if (req.method === 'POST') {
+            const body = await req.json();
+            document.documentElement.dataset.releaseSearch = JSON.stringify(body);
+            return json({ ...groupReports[body.group_id], state: 'queued' }, 202);
+          }
+          return json(groupReports[url.searchParams.get('group_id') ?? ''] ?? { ...releaseReport, state: 'needs_input', candidates: [], groups });
+        }
+        if (url.pathname.endsWith('/cover')) {
+          document.documentElement.dataset.releaseCoverGroup = url.searchParams.get('group_id') ?? '';
+          return json({ image_base64: 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jRZkAAAAASUVORK5CYII=', mime_type: 'image/png', source_url: 'https://coverartarchive.org/release/' + releaseId + '/front-1200', exact_release: true });
+        }
+        if (url.pathname.endsWith('/release') && req.method === 'POST') {
+          const body = await req.json();
+          document.documentElement.dataset.releaseApplied = JSON.stringify(body);
+          const target = groups.find((g) => g.id === body.group_id)!;
+          if (body.apply_cover) target.has_cover = true;
+          if (body.apply_metadata) {
+            const f = body.group_id === groupA.id ? files[0]! : missing;
+            Object.assign(f, { metadata: { artist: target.artist, albumartist: target.artist, album: target.album, title: 'Confirmed ' + target.album, genre: '' }, updated_at: new Date().toISOString() });
+          }
+          groupReports[body.group_id]!.selected_release = body.release_id;
+          return json(groupReports[body.group_id]);
+        }
+      }
+      if (scenario === 'mixed' && url.pathname === '/api/v1/admin/uploads') return json({ items: [files[0], missing], next_cursor: null });
+      if (url.pathname.endsWith('/releases') && url.pathname.includes('/admin/uploads/batches/')) {
+        if (scenario !== 'release') return json({ state: 'disabled', input_hash: '', selected_release: null, candidates: [] });
+        if (req.method === 'POST') {
+          const body = await req.json();
+          document.documentElement.dataset.releaseSearch = JSON.stringify(body);
+          if (body.audio) releaseReport = { ...releaseReport, audio_results: [{ file_id: 'visible', state: 'matched' }, { file_id: 'missing', state: 'ambiguous' }], candidates: [
+            { ...standard, complete: false, confidence: 'medium', matches: [{ ...standard.matches[0]!, method: 'acoustid' }] } as typeof standard, deluxe,
+          ] };
+          return json({ ...releaseReport, state: 'queued' }, 202);
+        }
+        return json(releaseReport);
+      }
+      if (scenario === 'release' && url.pathname.endsWith('/cover')) {
+        document.documentElement.dataset.releaseCoverRequests = String(Number(document.documentElement.dataset.releaseCoverRequests ?? 0) + 1);
+        return json({ image_base64: 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+jRZkAAAAASUVORK5CYII=', mime_type: 'image/png', source_url: 'https://coverartarchive.org/release-group/11111111-1111-4111-8111-111111111111/front-1200', exact_release: false });
+      }
+      if (scenario === 'release' && url.pathname.endsWith('/release') && req.method === 'POST') {
+        const body = await req.json();
+        if (body.apply_metadata && rejectReleaseOnce) { rejectReleaseOnce = false; return json({ code: 'uploads.release_stale', status: 409 }, 409); }
+        document.documentElement.dataset.releaseApplied = JSON.stringify(body);
+        if (body.apply_metadata) {
+          for (const [index, f] of [files[0]!, missing].entries()) Object.assign(f, { metadata: { artist: 'Catalogue Artist', albumartist: 'Catalogue Artist', title: `Song ${index + 1}`, album: 'Album', year: 2024, track: index + 1, disc: 1, genre: '' }, updated_at: new Date().toISOString() });
+        }
+        releaseReport = { ...releaseReport, input_hash: 'applied', selected_release: body.release_id };
+        return json(releaseReport);
+      }
+      if (scenario === 'release' && url.pathname === '/api/v1/admin/uploads') return json({ items: [files[0], missing], next_cursor: null });
+      if (scenario === 'queue' && url.pathname === '/api/v1/admin/uploads') return json({ items: [files[0], missing], next_cursor: null });
+      if (scenario === 'queue' && url.pathname.startsWith('/api/v1/admin/uploads/batches/') && req.method === 'PATCH') {
+        const body = await req.json();
+        const bytes = Uint8Array.from(atob(body.cover_base64), (char) => char.charCodeAt(0));
+        const image = await createImageBitmap(new Blob([bytes], { type: 'image/jpeg' }));
+        document.documentElement.dataset.coverDimensions = `${image.width}x${image.height}`;
+        document.documentElement.dataset.coverBytes = String(bytes.length);
+        image.close();
+        return json({ items: [files[0], missing] });
+      }
+      if (scenario === 'queue' && url.pathname === '/api/v1/admin/uploads/files/missing' && req.method === 'PATCH') {
+        const body = await req.json();
+        Object.assign(missing, { metadata: body.metadata, target_source_id: source.id, target_source_name: source.name, target_rel_path: 'Artist/Album/02 - Fixed.flac', status_reason: null });
+        return json(missing);
+      }
+      if (scenario === 'template') {
+        if (url.pathname === '/api/v1/admin/uploads') {
+          const path = document.documentElement.dataset.savedTemplate ? 'Artist/Album/01. Song.flac' : 'Artist/Album/Song.flac';
+          return json({ items: [{ ...files[0], target_rel_path: path, target_storage_path: `nas:/music/${path}` }], next_cursor: null });
+        }
+        if (url.pathname.endsWith('/write-template/suggest')) return json({ template: '{albumartist}/{album}/{track:02}. {title}.{ext}', matched: 180, total: 200, examples: ['Кино/Группа крови/01. Группа крови.flac'] });
+        if (url.pathname.endsWith('/write-template/check')) return json({ ok: false, total: 50, round_trip: 0, same_path: 45, mismatches: [] });
+        if (url.pathname === `/api/v1/admin/sources/${source.id}` && req.method === 'PATCH') {
+          const body = await req.json();
+          document.documentElement.dataset.savedTemplate = body.write_template;
+          Object.assign(source, body);
+          return json(source);
+        }
+        if (url.pathname === `/api/v1/admin/sources/${source.id}`) return json(source);
+      }
+      if (scenario === 'mine' && url.pathname === '/api/v1/uploads/mine') {
+        if (url.searchParams.getAll('status').length > 1) return json({ code: 'common.bad_request', status: 400 }, 400);
+        if (url.searchParams.has('batch')) {
+          document.documentElement.dataset.batchPages = String(Number(document.documentElement.dataset.batchPages ?? 0) + 1);
+          return json({ items: [url.searchParams.has('cursor') ? files[2] : files[0]], next_cursor: url.searchParams.has('cursor') ? null : 'next' });
+        }
+        const statuses = url.searchParams.get('status')?.split(',') ?? [];
+        const visible = [files[0], files[1], files[3], files[4]].filter((f) => !statuses.length || statuses.includes(f.status));
+        return json({ items: visible, next_cursor: 'more' });
+      }
+      if (scenario === 'mine' && req.method === 'DELETE' && url.pathname.startsWith('/api/v1/uploads/files/')) {
+        const id = url.pathname.split('/').pop()!;
+        deleted.push(id);
+        document.documentElement.dataset.deleted = JSON.stringify(deleted);
+        if (id === 'hidden' && failOnce) { failOnce = false; return json({ code: 'uploads.wrong_status', status: 409 }, 409); }
+        files.find((f) => f.id === id)!.status = 'withdrawn';
+        return new Response(null, { status: 204 });
+      }
+      return original(input, init);
+    };
+    const target = scenario === 'queue' || scenario === 'release' || scenario === 'mixed' ? '/admin/uploads' : scenario === 'mine' ? '/uploads/mine' : `/admin/sources/${source.id}/patterns`;
+    history.pushState({}, '', target);
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  }, { scenario, audioAvailable });
+}
+
+test('queue shows the storage and path, and recalculates after fixing placement', async ({ page }, info) => {
+  await setup(page, 'queue');
+  await expect(page.getByText('Есть обложка', { exact: true })).toBeVisible();
+  await expect(page.getByText('2 × FLAC', { exact: true })).toBeVisible();
+  await expect(page.getByText('778–924 kbps · 44.1 kHz · 16 bit', { exact: true })).toBeVisible();
+  await expect(page.getByText('Artist/Album/01 - Song.flac', { exact: true })).toBeHidden();
+  await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).click();
+  await expect(page.getByText('Artist/Album/01 - Song.flac', { exact: true })).toBeVisible();
+  await expect(page.getByText('Artist/Album/01 - Song.flac', { exact: true })).toHaveAttribute('title', 'nas:/music/Artist/Album/01 - Song.flac');
+  await expect(page.getByText('Хранилище не выбрано', { exact: true })).toBeVisible();
+  await page.getByRole('checkbox', { name: 'Выбрать всю пачку', exact: true }).check();
+  await page.getByRole('button', { name: 'Свернуть пачку', exact: true }).click();
+  await expect(page.getByText('Artist/Album/01 - Song.flac', { exact: true })).toBeHidden();
+  await expect(page.getByRole('button', { name: 'Развернуть пачку', exact: true })).toHaveAttribute('aria-expanded', 'false');
+  await expect(page.getByRole('checkbox', { name: 'Выбрать всю пачку', exact: true })).toBeChecked();
+  await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).press('Enter');
+  await expect(page.getByText('Artist/Album/01 - Song.flac', { exact: true })).toBeVisible();
+  // Continue keyboard selection after keyboard expansion, avoiding another scroll-dependent pointer action.
+  await page.getByRole('checkbox', { name: 'Выбрать всю пачку', exact: true }).press('Space');
+  await expect(page.getByRole('checkbox', { name: 'Выбрать всю пачку', exact: true })).not.toBeChecked();
+  await page.getByRole('button', { name: 'Выбрать хранилище', exact: true }).click();
+  const dialog = page.getByRole('dialog');
+  await dialog.getByLabel('Исполнитель', { exact: true }).fill('Artist');
+  await dialog.getByLabel('Название', { exact: true }).fill('Fixed');
+  await dialog.getByRole('combobox').selectOption({ label: 'Музыкальное хранилище' });
+  await dialog.getByRole('button', { name: 'Сохранить', exact: true }).click();
+  await expect(page.getByText('Artist/Album/02 - Fixed.flac', { exact: true })).toBeVisible();
+  await page.screenshot({ path: info.outputPath('queue-placement.png'), fullPage: true });
+  await page.setViewportSize({ width: 390, height: 844 });
+  await expect(page.getByText('Artist/Album/02 - Fixed.flac', { exact: true })).toBeVisible();
+  await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth - innerWidth)).toBeLessThanOrEqual(1);
+});
+
+test('automatically suggests a dominant template and saves a custom edit only on request', async ({ page }, info) => {
+  await setup(page, 'template');
+  const field = page.getByRole('textbox', { name: 'Шаблон пути', exact: true });
+  await expect(field).toHaveValue('{albumartist}/{album}/{track:02}. {title}.{ext}');
+  await expect(page.getByText(/180 из 200/)).toBeVisible();
+  await expect(page.getByText('Кино/Группа крови/01. Группа крови.flac', { exact: true })).toBeVisible();
+  await expect(page.locator('html')).not.toHaveAttribute('data-saved-template');
+  await field.fill('{albumartist}/[{year} - ]{album}/{track:02} - {title}.{ext}');
+  const section = page.getByRole('heading', { name: 'Приём загрузок и шаблон пути' }).locator('..');
+  await section.getByRole('checkbox').check();
+  await section.getByRole('button', { name: 'Сохранить', exact: true }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-saved-template', '{albumartist}/[{year} - ]{album}/{track:02} - {title}.{ext}');
+  await page.screenshot({ path: info.outputPath('auto-template.png'), fullPage: true });
+});
+
+test('selects a whole own batch across pages and reports partial withdrawal failures', async ({ page }, info) => {
+  await setup(page, 'mine');
+  await page.getByRole('checkbox', { name: 'Выбрать всю пачку', exact: true }).check();
+  await expect(page.locator('html')).toHaveAttribute('data-batch-pages', '2');
+  await expect(page.getByText(/Выбрано 2 файла/)).toBeVisible();
+  await page.getByRole('button', { name: 'Отозвать выбранные', exact: true }).click();
+  await expect(page.getByText(/Не удалось отозвать: 1/)).toBeVisible();
+  await expect(page.locator('html')).toHaveAttribute('data-deleted', '["visible","hidden"]');
+  await page.setViewportSize({ width: 390, height: 844 });
+  await expect.poll(() => page.evaluate(() => Math.max(document.documentElement.scrollWidth - innerWidth, document.querySelector('main')!.scrollWidth - document.querySelector('main')!.clientWidth))).toBeLessThanOrEqual(1);
+  await page.screenshot({ path: info.outputPath('bulk-withdraw-mobile.png'), fullPage: true });
+  await page.getByRole('button', { name: 'Отозвать выбранные', exact: true }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-deleted', '["visible","hidden","hidden"]');
+  await expect(page.getByRole('region', { name: 'Массовый отзыв предложений' })).toHaveCount(0);
+});
+
+test('keeps withdrawn proposals in their own filter', async ({ page }) => {
+  await setup(page, 'mine');
+  await expect(page.getByText('visible.flac', { exact: true })).toBeVisible();
+  await expect(page.getByText('withdrawn.flac', { exact: true })).toHaveCount(0);
+  await page.getByRole('button', { name: 'Отозванные', exact: true }).click();
+  await expect(page.getByText('withdrawn.flac', { exact: true }).first()).toBeVisible();
+  await expect(page.getByText('visible.flac', { exact: true })).toHaveCount(0);
+  await page.getByRole('button', { name: 'Не приняты', exact: true }).click();
+  await expect(page.getByText('rejected.flac', { exact: true }).first()).toBeVisible();
+  await expect(page.getByText('withdrawn.flac', { exact: true })).toHaveCount(0);
+  await page.getByRole('button', { name: 'Все', exact: true }).click();
+  await expect(page.getByText('visible.flac', { exact: true })).toBeVisible();
+  await expect(page.getByText('withdrawn.flac', { exact: true })).toHaveCount(0);
+});
+
+test('queue shows the current full destination after saving a changed source template', async ({ page }) => {
+  await setup(page, 'template');
+  const sourcePath = new URL(page.url()).pathname;
+  const navigate = async (path: string) => page.evaluate((path) => {
+    history.pushState({}, '', path);
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  }, path);
+  await navigate('/admin/uploads');
+  await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).click();
+  await expect(page.getByText('Artist/Album/Song.flac', { exact: true })).toHaveAttribute('title', 'nas:/music/Artist/Album/Song.flac');
+  await navigate(sourcePath);
+  await page.getByRole('textbox', { name: 'Шаблон пути', exact: true }).fill('{albumartist}/{album}/{track:02}. {title}.{ext}');
+  const section = page.getByRole('heading', { name: 'Приём загрузок и шаблон пути' }).locator('..');
+  await section.getByRole('checkbox').check();
+  await section.getByRole('button', { name: 'Сохранить', exact: true }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-saved-template', '{albumartist}/{album}/{track:02}. {title}.{ext}');
+  await navigate('/admin/uploads');
+  await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).click();
+  await expect(page.getByText('Artist/Album/01. Song.flac', { exact: true })).toHaveAttribute('title', 'nas:/music/Artist/Album/01. Song.flac');
+  await expect(page.getByText('Artist/Album/Song.flac', { exact: true })).toHaveCount(0);
+});
+
+test('queue preview only requests audio after play', async ({ page }) => {
+  const wav = previewWav();
+  let requested = 0;
+  let otherRequested = 0;
+  await page.route('**/api/v1/admin/uploads/files/*/stream?*', (route) => {
+    requested++;
+    return route.fulfill({ contentType: 'audio/wav', body: wav });
+  });
+  await page.route('**/api/v1/stream/mobile-preview', (route) => {
+    otherRequested++;
+    return route.fulfill({ contentType: 'audio/wav', body: wav });
+  });
+  await setup(page, 'queue');
+  await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).click();
+  const audio = page.locator('audio').first();
+  await expect(audio).toHaveAttribute('preload', 'none');
+  await page.getByRole('button', { name: 'Свернуть пачку', exact: true }).click();
+  await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).click();
+  expect(requested).toBe(0);
+  expect(otherRequested).toBe(0);
+  await audio.evaluate((el: HTMLAudioElement) => el.play());
+  await expect.poll(() => audio.evaluate((el: HTMLAudioElement) => el.duration)).toBe(2);
+  await expect.poll(() => audio.evaluate((el: HTMLAudioElement) => el.currentTime)).toBeGreaterThan(0);
+  expect(requested).toBeGreaterThan(0);
+  expect(otherRequested).toBe(0);
+  expect(await audio.evaluate((el: HTMLAudioElement) => el.error)).toBeNull();
+});
+
+test('queue preview explains HTTP failures and recovers on retry', async ({ page }) => {
+  let available = false;
+  // The E2E bridge mocks window.fetch; media diagnostics must reach the same
+  // intercepted HTTP route as the native audio element.
+  await page.addInitScript(() => Object.assign(window, { previewNativeFetch: window.fetch.bind(window) }));
+  await page.route('**/api/v1/admin/uploads/files/*/stream?*', (route) => available
+    ? route.fulfill({ contentType: 'audio/wav', body: previewWav() })
+    : route.fulfill({ status: 403, contentType: 'text/plain', body: 'Forbidden' }));
+  await setup(page, 'queue');
+  await page.evaluate(() => {
+    const original = window.fetch;
+    const native = (window as unknown as { previewNativeFetch: typeof fetch }).previewNativeFetch;
+    window.fetch = (input, init) => new URL(new Request(input, init).url).pathname.endsWith('/stream')
+      ? native(input, init) : original(input, init);
+  });
+  await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).click();
+  const preview = page.locator('audio').first().locator('..');
+  await preview.locator('audio').evaluate((el: HTMLAudioElement) => el.play().catch(() => undefined));
+  await expect(preview.getByRole('alert')).toHaveText('Не удалось загрузить аудио: HTTP 403.');
+  available = true;
+  await preview.getByRole('button', { name: 'Повторить', exact: true }).click();
+  await expect.poll(() => preview.locator('audio').evaluate((el: HTMLAudioElement) => el.duration)).toBe(2);
+  await expect(preview.getByRole('alert')).toHaveCount(0);
+});
+
+test('starting another queue preview pauses the previous track', async ({ page }) => {
+  const wav = previewWav(10);
+  await page.route('**/api/v1/admin/uploads/files/*/stream?*', (route) => route.fulfill({ contentType: 'audio/wav', body: wav }));
+  await page.route('**/api/v1/stream/mobile-preview', (route) => route.fulfill({ contentType: 'audio/wav', body: wav }));
+  await setup(page, 'queue');
+  await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).click();
+  const first = page.locator('audio').nth(0);
+  const second = page.locator('audio').nth(1);
+  await first.evaluate((el: HTMLAudioElement) => el.play());
+  await expect.poll(() => first.evaluate((el: HTMLAudioElement) => el.currentTime)).toBeGreaterThan(0);
+  await second.evaluate((el: HTMLAudioElement) => el.play());
+  await expect.poll(() => first.evaluate((el: HTMLAudioElement) => el.paused)).toBe(true);
+  expect(await second.evaluate((el: HTMLAudioElement) => el.paused)).toBe(false);
+  expect(await first.evaluate((el: HTMLAudioElement) => el.currentTime)).toBeGreaterThan(0);
+  await first.evaluate((el: HTMLAudioElement) => el.play());
+  await expect.poll(() => second.evaluate((el: HTMLAudioElement) => el.paused)).toBe(true);
+  expect(await first.evaluate((el: HTMLAudioElement) => el.paused)).toBe(false);
+  await page.getByRole('button', { name: 'Свернуть пачку', exact: true }).click();
+  await expect.poll(() => first.evaluate((el: HTMLAudioElement) => el.paused)).toBe(true);
+});
+
+test('oversized album cover is reduced before saving the batch', async ({ page }) => {
+  await setup(page, 'queue');
+  const png = await page.evaluate(() => {
+    const canvas = document.createElement('canvas');
+    canvas.width = 3000; canvas.height = 1800;
+    canvas.getContext('2d')!.fillRect(0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL('image/png').split(',')[1]!;
+  });
+  // A valid image with trailing padding reproduces an oversized input without a large fixture in Git.
+  const largeCover = Buffer.concat([Buffer.from(png, 'base64'), Buffer.alloc(12 * 1024 * 1024)]);
+  await page.getByRole('button', { name: 'На всю пачку', exact: true }).click();
+  const dialog = page.getByRole('dialog');
+  await dialog.locator('input[type=file]').setInputFiles({ name: 'Cover.png', mimeType: 'image/png', buffer: largeCover });
+  await dialog.getByRole('button', { name: 'Сохранить', exact: true }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-cover-dimensions', '2048x1229');
+  expect(Number(await page.locator('html').getAttribute('data-cover-bytes'))).toBeLessThan(8 * 1024 * 1024);
+});
+
+test('mixed batch checks each release and applies only within the chosen group', async ({ page }, info) => {
+  await setup(page, 'mixed');
+  await page.getByRole('button', { name: 'Развернуть пачку', exact: true }).click();
+  await expect(page.getByText('Artist A — Album A', { exact: true })).toBeVisible();
+  await expect(page.getByText('Artist B — Album B', { exact: true })).toBeVisible();
+  await page.getByRole('checkbox', { name: 'Выбрать загруженные строки релиза Album A', exact: true }).check();
+  await expect(page.getByRole('checkbox', { name: 'Выбрать visible.flac', exact: true })).toBeChecked();
+  await expect(page.getByRole('checkbox', { name: 'Выбрать missing.flac', exact: true })).not.toBeChecked();
+  await page.getByRole('button', { name: 'Релизов в пачке: 2', exact: true }).click();
+  const dialog = page.getByRole('dialog', { name: 'Сопоставление релиза' });
+  await expect(dialog.getByRole('button', { name: 'Применить выбранное', exact: true })).toBeDisabled();
+  await expect(dialog.getByRole('button', { name: 'Распознать по звуку', exact: true })).toBeDisabled();
+  await dialog.getByRole('combobox', { name: 'Релиз в пачке' }).selectOption('bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb');
+  await expect(dialog.getByText('Artist B — Album B', { exact: true })).toBeVisible();
+  await expect(dialog.getByText('Без обложки', { exact: true })).toBeVisible();
+  await dialog.getByRole('button', { name: 'Показать обложку из каталога', exact: true }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-release-cover-group', 'bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb');
+  await page.screenshot({ path: info.outputPath('mixed-release.png') });
+  await page.setViewportSize({ width: 390, height: 844 });
+  await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth - innerWidth)).toBeLessThanOrEqual(1);
+  await dialog.getByRole('checkbox', { name: /Применить названия/ }).check();
+  await dialog.getByRole('checkbox', { name: 'Добавить обложку выбранного релиза', exact: true }).check();
+  await dialog.getByRole('button', { name: 'Применить выбранное', exact: true }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-release-applied', /"group_id":"bbbbbbbb-bbbb-4bbb-8bbb-bbbbbbbbbbbb"/);
+  await dialog.getByRole('combobox', { name: 'Релиз в пачке' }).selectOption('aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa');
+  await expect(dialog.getByText('Artist A — Album A', { exact: true })).toBeVisible();
+  await expect(dialog.getByText('Сопоставлено 1 из 1', { exact: false })).toBeVisible();
+  await expect(dialog.getByRole('button', { name: 'Применить выбранное', exact: true })).toBeDisabled();
+  await expect(dialog.getByRole('checkbox', { name: /Применить названия/ })).not.toBeChecked();
+});
+
+test('audio recognition starts only on request and keeps suggestions separate', async ({ page }) => {
+  await setup(page, 'release');
+  await page.getByRole('button', { name: 'Найдено изданий: 2', exact: true }).click();
+  const dialog = page.getByRole('dialog', { name: 'Сопоставление релиза' });
+  await expect(page.locator('html')).not.toHaveAttribute('data-release-search');
+  await expect(dialog.getByText(/только аудиоотпечатки и длительности/)).toBeVisible();
+  await dialog.getByRole('button', { name: 'Распознать по звуку', exact: true }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-release-search', '{"audio":true}');
+  await expect(dialog.getByText('По звуку распознано: 1 из 2 треков', { exact: true })).toBeVisible();
+  await expect(dialog.getByText(/Неоднозначное или недостаточно уверенное совпадение/)).toBeVisible();
+  await dialog.getByRole('combobox', { name: 'Издание' }).selectOption('11111111-1111-4111-8111-111111111111');
+  await expect(dialog.getByText('Совпадение по звуку · AcoustID', { exact: true })).toBeVisible();
+  await expect(dialog.getByRole('button', { name: 'Применить выбранное', exact: true })).toBeDisabled();
+  await expect(page.locator('html')).not.toHaveAttribute('data-release-applied');
+  await expect(page.locator('html')).not.toHaveAttribute('data-release-cover-requests');
+});
+
+test('audio identification without application key shows setup and stays disabled', async ({ page }) => {
+  await setup(page, 'release', false);
+  await page.getByRole('button', { name: 'Найдено изданий: 2', exact: true }).click();
+  const dialog = page.getByRole('dialog', { name: 'Сопоставление релиза' });
+  await expect(dialog.getByRole('button', { name: 'Распознать по звуку', exact: true })).toBeDisabled();
+  await expect(dialog.getByText(/задайте ACOUSTID_API_KEY/)).toBeVisible();
+  await expect(page.locator('html')).not.toHaveAttribute('data-release-search');
+});
+
+test('release suggestions require explicit application and handle stale metadata', async ({ page }) => {
+  await setup(page, 'release');
+  await page.getByRole('button', { name: 'Найдено изданий: 2', exact: true }).click();
+  const dialog = page.getByRole('dialog', { name: 'Сопоставление релиза' });
+  await expect(dialog.getByRole('button', { name: 'Применить выбранное', exact: true })).toBeDisabled();
+  await dialog.getByRole('combobox', { name: 'Издание' }).selectOption('11111111-1111-4111-8111-111111111111');
+  await expect(dialog.getByText('Уверенность сопоставления: высокая', { exact: true })).toBeVisible();
+  const apply = dialog.getByRole('button', { name: 'Применить выбранное', exact: true });
+  await expect(apply).toBeDisabled();
+  await expect(page.locator('html')).not.toHaveAttribute('data-release-applied');
+  await expect(page.locator('html')).not.toHaveAttribute('data-release-cover-requests');
+  await dialog.getByRole('checkbox', { name: /Применить названия/ }).check();
+  await apply.click();
+  await expect(dialog.getByText(/Состав или теги пачки изменились/)).toBeVisible();
+  await expect(page.locator('html')).not.toHaveAttribute('data-release-applied');
+  await dialog.getByRole('textbox', { name: 'Исполнитель', exact: true }).fill('Catalogue Artist');
+  await dialog.getByRole('textbox', { name: 'Альбом', exact: true }).fill('Album');
+  await dialog.getByRole('button', { name: 'Найти / повторить поиск', exact: true }).click();
+  await expect(dialog.getByRole('status')).toHaveText('Найдено изданий: 2');
+  await expect(dialog.getByRole('combobox', { name: 'Издание' })).toBeVisible();
+  await dialog.getByRole('combobox', { name: 'Издание' }).selectOption('11111111-1111-4111-8111-111111111111');
+  await dialog.getByRole('checkbox', { name: /Применить названия/ }).check();
+  await expect(apply).toBeEnabled();
+  await apply.click();
+  await expect(page.locator('html')).toHaveAttribute('data-release-applied', '{"release_id":"11111111-1111-4111-8111-111111111111","apply_metadata":true,"apply_cover":false}');
+  await expect(dialog.getByText('Выбранное издание применено', { exact: true })).toBeVisible();
+});
+
+test('deluxe completeness and release-group artwork are shown before replacing an existing cover', async ({ page }, info) => {
+  await setup(page, 'release');
+  await page.getByRole('button', { name: 'Найдено изданий: 2', exact: true }).click();
+  const dialog = page.getByRole('dialog', { name: 'Сопоставление релиза' });
+  await dialog.getByRole('combobox', { name: 'Издание' }).selectOption('22222222-2222-4222-8222-222222222222');
+  await expect(dialog.getByText('Альбом · сопоставлено 2/3 · Неполный состав', { exact: true })).toBeVisible();
+  await expect(dialog.getByText('Файл не сопоставлен', { exact: true })).toBeVisible();
+  await expect(dialog.getByText(/найдены совпадения в библиотеке/)).toBeVisible();
+  await dialog.getByRole('button', { name: 'Показать обложку из каталога', exact: true }).click();
+  await expect(dialog.getByText(/Обложка группы изданий/)).toBeVisible();
+  await expect(dialog.getByRole('img', { name: 'Обложка пачки' })).toBeVisible();
+  await expect(dialog.getByRole('button', { name: 'Применить выбранное', exact: true })).toBeDisabled();
+  await page.screenshot({ path: info.outputPath('release-comparison.png') });
+  await page.setViewportSize({ width: 390, height: 844 });
+  await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth - innerWidth)).toBeLessThanOrEqual(1);
+  await dialog.getByRole('checkbox', { name: 'Заменить текущую обложку пачки этой обложкой', exact: true }).check();
+  await dialog.getByRole('button', { name: 'Применить выбранное', exact: true }).click();
+  await expect(page.locator('html')).toHaveAttribute('data-release-applied', '{"release_id":"22222222-2222-4222-8222-222222222222","apply_metadata":false,"apply_cover":true}');
+});

apps/web/e2e/uploads-csp.spec.ts

@@ -0,0 +1,68 @@
+import { readFileSync } from 'node:fs';
+import { createHash } from 'node:crypto';
+import { expect, test } from '@playwright/test';
+
+const nginxHeaders = readFileSync(new URL('../../../deploy/nginx/security-headers.conf', import.meta.url), 'utf8');
+const desktopConfig = JSON.parse(readFileSync(new URL('../../desktop/src-tauri/tauri.conf.json', import.meta.url), 'utf8'));
+const policies: Record<string, string> = {
+  web: nginxHeaders.match(/add_header Content-Security-Policy "([^"]+)" always;/)![1],
+  desktop: desktopConfig.app.security.csp,
+};
+
+for (const [platform, policy] of Object.entries(policies)) {
+  test(`upload hash worker runs under ${platform} CSP`, async ({ page }) => {
+    // Apply the deployed policy to both the document and worker responses.
+    await page.route('**/*', async (route) => {
+      if (new URL(route.request().url()).pathname === '/csp-upload-test') {
+        await route.fulfill({ contentType: 'text/html', body: '<!doctype html><title>Upload CSP</title>', headers: { 'Content-Security-Policy': policy } });
+        return;
+      }
+      if (new URL(route.request().url()).pathname === '/csp-eval-test.js') {
+        await route.fulfill({ contentType: 'application/javascript', body: `
+          try { new Function('return 1')(); document.documentElement.dataset.evalBlocked = 'false'; }
+          catch { document.documentElement.dataset.evalBlocked = 'true'; }
+          WebAssembly.compile(new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0])).then(
+            () => { document.documentElement.dataset.wasmBlocked = 'false'; },
+            () => { document.documentElement.dataset.wasmBlocked = 'true'; },
+          );
+        ` });
+        return;
+      }
+      const response = await route.fetch();
+      await route.fulfill({ response, headers: { ...response.headers(), 'Content-Security-Policy': policy } });
+    });
+    await page.goto('/csp-upload-test');
+    const result = await page.evaluate(async () => {
+      const worker = new Worker('/src/features/uploads/hash.worker.ts', { type: 'module' });
+      try {
+        const results = [];
+        // Reuse one worker for empty, known-vector and multi-chunk binary files.
+        const binary = Uint8Array.from({ length: (9 << 20) + 17 }, (_, i) => i % 251);
+        for (const [id, bytes] of [['empty', new Uint8Array()], ['abc', new TextEncoder().encode('abc')], ['binary', binary]] as const) {
+          results.push(await new Promise((resolve, reject) => {
+            const progress: number[] = [];
+            worker.onerror = (event) => reject(new Error(event.message));
+            worker.onmessage = ({ data }) => {
+              if (data.type === 'progress') { progress.push(data.done); return; }
+              resolve({ ...data, progress });
+            };
+            worker.postMessage({ id, file: new File([bytes], `${id}.flac`) });
+          }));
+        }
+        return results;
+      } finally {
+        worker.terminate();
+      }
+    });
+    const binary = Uint8Array.from({ length: (9 << 20) + 17 }, (_, i) => i % 251);
+    expect(result).toEqual([
+      { id: 'empty', type: 'done', sha256: createHash('sha256').update('').digest('hex'), progress: [] },
+      { id: 'abc', type: 'done', sha256: createHash('sha256').update('abc').digest('hex'), progress: [] },
+      { id: 'binary', type: 'done', sha256: createHash('sha256').update(binary).digest('hex'), progress: expect.arrayContaining([expect.any(Number)]) },
+    ]);
+    // A page script observes CSP; Playwright's evaluate bypasses the eval restriction.
+    await page.addScriptTag({ url: '/csp-eval-test.js' });
+    await expect(page.locator('html')).toHaveAttribute('data-eval-blocked', 'true');
+    await expect(page.locator('html')).toHaveAttribute('data-wasm-blocked', 'true');
+  });
+}

apps/web/e2e/uploads.spec.ts

@@ -0,0 +1,84 @@
+import { expect, test } from '@playwright/test';
+
+test('locks the comment and retries one failed upload while another is running', async ({ page }, info) => {
+  await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+  await page.goto('/login');
+  await page.getByLabel('Логин', { exact: true }).fill('mobile-admin');
+  await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill('mobile-admin-password');
+  await page.getByRole('button', { name: 'Войти', exact: true }).click();
+  await expect(page.getByRole('button', { name: 'Меню профиля' })).toBeVisible();
+  await page.evaluate(() => {
+    const original = window.fetch;
+    window.fetch = async (input, init) => {
+      const req = new Request(input, init);
+      const path = new URL(req.url).pathname;
+      const json = (data: unknown, status = 200) => new Response(JSON.stringify(data), { status, headers: { 'Content-Type': 'application/json' } });
+      if (path === '/api/v1/uploads/quota') return json({ limit_bytes: 1e9, used_bytes: 0, per_user_limit_bytes: null, user_used_bytes: 0, max_file_bytes: 1e9 });
+      if (path === '/api/v1/uploads/precheck') {
+        const body = await req.json();
+        return json({ files: body.files.map((f: { client_id: string }) => ({ client_id: f.client_id, result: 'accepted' })) });
+      }
+      if (path === '/api/v1/uploads' && req.method === 'POST') {
+        const body = await req.json();
+        document.documentElement.dataset.uploadComment = body.comment;
+        document.documentElement.dataset.uploadReservations = String(Number(document.documentElement.dataset.uploadReservations ?? 0) + 1);
+        return json({ batch_id: 'test-batch', files: body.files.map((f: { client_id: string; name: string }) => ({ client_id: f.client_id, upload_file_id: f.name, tus_url: `/api/v1/uploads/files/${f.name}` })) }, 201);
+      }
+      return original(input, init);
+    };
+    history.pushState({}, '', '/uploads/new');
+    window.dispatchEvent(new PopStateEvent('popstate'));
+  });
+
+  let retry = false;
+  let failures = 0;
+  let resumedOffset: string | undefined;
+  let releaseSecond!: () => void;
+  const secondPending = new Promise<void>((resolve) => { releaseSecond = resolve; });
+  await page.route('**/api/v1/uploads/files/*', async (route) => {
+    const req = route.request();
+    const first = req.url().endsWith('/first.flac');
+    if (req.method() === 'HEAD') {
+      await route.fulfill({ status: 200, headers: { 'Upload-Length': '1024', 'Upload-Offset': first && failures > 0 ? '256' : '0', 'Tus-Resumable': '1.0.0' } });
+      return;
+    }
+    if (first && !retry) {
+      failures++;
+      await route.fulfill({ status: 507, contentType: 'application/problem+json', body: JSON.stringify({ status: 507, code: 'uploads.storage_full', detail: 'upload storage is full' }) });
+      return;
+    }
+    if (first) resumedOffset = req.headers()['upload-offset'];
+    else await secondPending;
+    await route.fulfill({ status: 204, headers: { 'Upload-Offset': '1024', 'Tus-Resumable': '1.0.0' } });
+  });
+
+  const inputs = page.locator('input[type=file]');
+  await inputs.first().setInputFiles(['first.flac', 'second.flac'].map((name) => ({ name, mimeType: 'audio/flac', buffer: Buffer.alloc(1024) })));
+  const comment = page.getByRole('textbox', { name: 'Комментарий для администратора' });
+  await comment.fill('Lossless album');
+  await expect(comment).toBeEnabled();
+  const send = page.getByRole('button', { name: /^Отправить/ });
+  await expect(send).toBeEnabled();
+  await send.click();
+  await expect(comment).toBeDisabled();
+  await expect(page.getByRole('button', { name: 'Очистить список' })).toBeDisabled();
+  await expect(page.getByText(/На сервере закончилось место для загрузок/)).toBeVisible();
+  const retryButton = page.getByRole('button', { name: 'Повторить загрузку first.flac', exact: true });
+  await expect(retryButton).toBeEnabled();
+  await page.setViewportSize({ width: 390, height: 844 });
+  await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth - innerWidth)).toBeLessThanOrEqual(1);
+  await page.screenshot({ path: info.outputPath('upload-retry.png'), fullPage: true });
+  expect(failures).toBe(1);
+  retry = true;
+  await retryButton.click();
+  await expect.poll(() => resumedOffset).toBe('256');
+  await expect(retryButton).toHaveCount(0);
+  await expect(comment).toBeDisabled();
+  await expect(page.locator('html')).toHaveAttribute('data-upload-reservations', '1');
+  await expect(page.locator('html')).toHaveAttribute('data-upload-comment', 'Lossless album');
+  releaseSecond();
+  await expect(page.getByText(/Готово: 2 файла/)).toBeVisible();
+  await page.getByRole('button', { name: 'Загрузить ещё', exact: true }).click();
+  await inputs.first().setInputFiles({ name: 'third.flac', mimeType: 'audio/flac', buffer: Buffer.alloc(1024) });
+  await expect(comment).toBeEnabled();
+});

apps/web/e2e/user-transfer.spec.ts

@@ -0,0 +1,70 @@
+import { expect, test, type Page } from '@playwright/test';
+
+async function login(page: Page, username = 'mobile-admin', target = '/admin/users') {
+  await page.addInitScript(() => localStorage.setItem('pipu.locale', 'ru'));
+  await page.goto(`/login?redirect=${encodeURIComponent(target)}`);
+  await page.getByLabel('Логин', { exact: true }).fill(username);
+  await page.getByRole('textbox', { name: 'Пароль', exact: true }).fill(`${username}-password`);
+  await page.getByRole('button', { name: 'Войти', exact: true }).click();
+  await expect(page.getByRole('button', { name: 'Меню профиля' })).toBeVisible();
+}
+
+for (const width of [320, 1280]) {
+  test(`user transfer and cover counts at ${width}px`, async ({ page }, info) => {
+    await page.setViewportSize({ width, height: 900 });
+    await login(page);
+    await page.evaluate(() => {
+      const original = window.fetch;
+      window.fetch = async (input, init) => {
+        const req = new Request(input, init);
+        const path = new URL(req.url).pathname;
+        if (path === '/api/v1/admin/users/export') return new Response(JSON.stringify({
+          version: 1, users: [{ username: 'alice', role: 'user', password_hash: '$argon2id$test' }],
+        }), { headers: { 'Content-Type': 'application/json' } });
+        if (path === '/api/v1/admin/users/import') {
+          const archive = await req.json();
+          if (archive.users[0].password_hash !== '$argon2id$test') throw new Error('lost hash');
+          return new Response(JSON.stringify({ created: 1, skipped: ['alice'] }), { headers: { 'Content-Type': 'application/json' } });
+        }
+        return original(input, init);
+      };
+    });
+    const downloadPromise = page.waitForEvent('download');
+    await page.getByRole('button', { name: 'Экспорт пользователей', exact: true }).click();
+    const download = await downloadPromise;
+    expect(download.suggestedFilename()).toBe('pipu-users.json');
+    await page.getByRole('button', { name: 'Импорт пользователей', exact: true }).click();
+    const dialog = page.getByRole('dialog', { name: 'Импорт пользователей' });
+    const file = dialog.getByLabel('Файл пользователей (.json)');
+    await file.setInputFiles({ name: 'bad.json', mimeType: 'application/json', buffer: Buffer.from('{}') });
+    await expect(dialog.getByRole('alert')).toContainText('Некорректный файл');
+    await expect(dialog.getByRole('button', { name: 'Импортировать', exact: true })).toBeDisabled();
+    await file.setInputFiles({ name: 'users.json', mimeType: 'application/json', buffer: Buffer.from(JSON.stringify({
+      version: 1, users: [{ username: 'new-user', role: 'moderator', password_hash: '$argon2id$test' }],
+    })) });
+    await expect(dialog).toContainText('Учётных записей в файле: 1');
+    await page.screenshot({ path: info.outputPath('user-import.png') });
+    await dialog.getByRole('button', { name: 'Импортировать', exact: true }).click();
+    await expect(dialog.getByRole('status')).toContainText('Создано: 1. Пропущено существующих: 1.');
+    await expect(dialog.getByRole('status')).toContainText('alice');
+    await page.keyboard.press('Escape');
+    if (width < 768) {
+      await page.getByRole('button', { name: 'Ещё', exact: true }).click();
+      await page.getByRole('dialog').getByRole('link', { name: 'Хранилища', exact: true }).click();
+    } else await page.evaluate(() => {
+      history.pushState({}, '', '/admin/sources');
+      window.dispatchEvent(new PopStateEvent('popstate'));
+    });
+    await expect(page.getByRole('article')).toContainText('Локальные обложки: 87 из 120 файлов');
+    await expect(page.getByRole('article')).toContainText('Альбомов ожидают обработки: 3');
+    await page.screenshot({ path: info.outputPath('source-covers.png') });
+    await expect.poll(() => page.evaluate(() => document.documentElement.scrollWidth - innerWidth)).toBeLessThanOrEqual(1);
+  });
+}
+
+test('moderator cannot see user transfer controls', async ({ page }) => {
+  await login(page, 'moderator');
+  await expect(page.getByRole('heading', { name: 'Пользователи', exact: true })).toBeVisible();
+  await expect(page.getByRole('button', { name: 'Экспорт пользователей', exact: true })).toHaveCount(0);
+  await expect(page.getByRole('button', { name: 'Импорт пользователей', exact: true })).toHaveCount(0);
+});

apps/web/package.json

@@ -23,7 +23,7 @@
     "@tanstack/react-query": "^5.80.7",
     "@tanstack/react-router": "^1.120.20",
     "@tanstack/react-virtual": "^3.14.21",
-    "hash-wasm": "^4.12.0",
+    "js-sha256": "^1.0.0",
     "music-metadata": "^12.2.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

apps/web/playwright.config.ts

@@ -3,7 +3,12 @@ import { defineConfig, devices } from '@playwright/test';
 export default defineConfig({
   testDir: './e2e',
   timeout: 30_000,
-  use: { baseURL: 'http://127.0.0.1:4173', ...devices['Desktop Chrome'] },
+  use: {
+    baseURL: 'http://127.0.0.1:4173',
+    ...devices['Desktop Chrome'],
+    trace: 'retain-on-failure',
+    screenshot: 'only-on-failure',
+  },
   webServer: {
     command: 'pnpm exec vite --port 4173 --strictPort',
     url: 'http://127.0.0.1:4173',

apps/web/src/App.test.tsx

@@ -1,4 +1,4 @@
-import { AuthSession } from '@pipu/core';
+import { AuthSession, refreshListening } from '@pipu/core';
 import { createI18n } from '@pipu/i18n';
 import { QueryClient } from '@tanstack/react-query';
 import { createMemoryHistory } from '@tanstack/react-router';
@@ -14,6 +14,256 @@ import { albumTracks, fakeApi, makeUser, type FakeUser } from './test/fakeApi';
 
 afterEach(cleanup);
 
+describe('social', () => {
+  it.each([false, true])('closes a join dialog and follows only after admission (automatic=%s)', async (automatic) => {
+    const alice = makeUser('alice', 'user'); const bob = makeUser('bob', 'user');
+    const { api, user, queryClient, session } = await renderApp([alice, bob], '/friends', { signedInAs: alice });
+    api.friendships.set([alice.id, bob.id].sort().join(':'), { sender: bob.id, accepted: true });
+    api.presence.set(bob.id, Date.now());
+    api.activityVisibility.set(bob.id, 'friends');
+    api.activity.set(bob.id, { device_id: crypto.randomUUID(), track_id: albumTracks[0]!.id, track_title: albumTracks[0]!.title, artist: 'Кино', context: 'other', position_ms: 1000 });
+    api.listeningPreferences.set(bob.id, { requests: 'friends', auto_accept: automatic ? 'friends' : 'nobody', autoplay: true });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await user.click(await screen.findByRole('button', { name: 'Слушать вместе' }));
+    const dialog = await screen.findByRole('dialog', { name: 'Слушать вместе' });
+    await user.click(within(dialog).getByRole('button', { name: 'Отправить' }));
+    await waitFor(() => expect(dialog).not.toBeInTheDocument());
+    if (!automatic) {
+      expect(api.listeningMembers.has(alice.id)).toBe(false);
+      expect(screen.queryByRole('region', { name: 'Слушать вместе' })).not.toBeInTheDocument();
+      expect(api.listeningRequests.size).toBe(1);
+      const request = [...api.listeningRequests.values()][0]!;
+      const room = [...api.listeningRooms.values()][0]!;
+      api.listeningMembers.set(alice.id, room.id);
+      api.listeningRequests.delete(request.id);
+      refreshListening(session);
+    }
+    await screen.findByText('Слушаете вместе с bob');
+    await user.click(screen.getByRole('button', { name: 'Выйти из прослушивания' }));
+    await waitFor(() => expect(screen.queryByRole('region', { name: 'Слушать вместе' })).not.toBeInTheDocument());
+  });
+
+  it('closes a pending invitation without announcing a stream and allows cancellation', async () => {
+    const alice = makeUser('alice', 'user'); const bob = makeUser('bob', 'user');
+    const { api, user, queryClient, router } = await renderApp([alice, bob], `/track/${albumTracks[0]!.id}`, { signedInAs: alice });
+    await user.click(await screen.findByRole('button', { name: 'Слушать' }));
+    api.friendships.set([alice.id, bob.id].sort().join(':'), { sender: bob.id, accepted: true });
+    api.presence.set(bob.id, Date.now());
+    api.listeningPreferences.set(bob.id, { requests: 'friends', auto_accept: 'nobody', autoplay: true });
+    await router.navigate({ to: '/friends' });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await user.click(await screen.findByRole('button', { name: 'Слушать вместе' }));
+    const dialog = await screen.findByRole('dialog', { name: 'Слушать вместе' });
+    await user.click(within(dialog).getByRole('button', { name: 'Отправить' }));
+    await waitFor(() => expect(dialog).not.toBeInTheDocument());
+    expect(api.listeningMembers.has(bob.id)).toBe(false);
+    expect(screen.queryByRole('region', { name: 'Слушать вместе' })).not.toBeInTheDocument();
+    await user.click(await screen.findByRole('button', { name: 'Отмена' }));
+    await waitFor(() => expect(api.listeningRequests.size).toBe(0));
+    expect(screen.queryByRole('region', { name: 'Слушать вместе' })).not.toBeInTheDocument();
+  });
+
+  it('explains listening restrictions instead of reporting a chat error and can close after rejection', async () => {
+    const alice = makeUser('alice', 'user'); const bob = makeUser('bob', 'user');
+    const { api, user, queryClient } = await renderApp([alice, bob], '/friends', { signedInAs: alice });
+    api.friendships.set([alice.id, bob.id].sort().join(':'), { sender: bob.id, accepted: true });
+    api.presence.set(bob.id, Date.now());
+    api.activityVisibility.set(bob.id, 'friends');
+    api.activity.set(bob.id, { device_id: crypto.randomUUID(), track_id: albumTracks[0]!.id, track_title: albumTracks[0]!.title, artist: 'Кино', context: 'other', position_ms: 0 });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await user.click(await screen.findByRole('button', { name: 'Слушать вместе' }));
+    const dialog = await screen.findByRole('dialog', { name: 'Слушать вместе' });
+    await user.click(within(dialog).getByRole('button', { name: 'Отправить' }));
+    expect(await within(dialog).findByRole('alert')).toHaveTextContent('Совместное прослушивание недоступно');
+    expect(within(dialog).getByRole('alert')).not.toHaveTextContent('Чат доступен только друзьям');
+    expect(api.listeningRequests.size).toBe(0);
+    expect(api.listeningRooms.size).toBe(0);
+    await user.click(within(dialog).getByRole('button', { name: 'Закрыть' }));
+    expect(dialog).not.toBeInTheDocument();
+  });
+
+  it('enables listening together only while a friend is online, independently of music privacy', async () => {
+    const alice = makeUser('alice', 'user'); const bob = makeUser('bob', 'user');
+    const { api, user, queryClient } = await renderApp([alice, bob], '/friends', { signedInAs: alice });
+    api.friendships.set([alice.id, bob.id].sort().join(':'), { sender: bob.id, accepted: true });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    const conversation = await screen.findByRole('region', { name: 'Написать' });
+    expect(within(conversation).getByText('Не в сети')).toBeInTheDocument();
+    expect(within(conversation).getByRole('button', { name: 'Слушать вместе' })).toBeDisabled();
+    api.presence.set(bob.id, Date.now());
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await within(conversation).findByText('В сети');
+    expect(within(conversation).getByRole('button', { name: 'Слушать вместе' })).toBeEnabled();
+    expect(api.activity.has(bob.id)).toBe(false);
+    await user.click(within(conversation).getByRole('button', { name: 'Слушать вместе' }));
+    await screen.findByRole('dialog', { name: 'Слушать вместе' });
+    api.presence.set(bob.id, Date.now() - 46_000);
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await waitFor(() => expect(screen.queryByRole('dialog', { name: 'Слушать вместе' })).not.toBeInTheDocument());
+    expect(within(conversation).getByRole('button', { name: 'Слушать вместе' })).toBeDisabled();
+    expect(within(conversation).getByText('Не в сети')).toBeInTheDocument();
+  });
+
+  it('finds music beyond the last text page without acknowledging unread messages', async () => {
+    const alice = makeUser('alice', 'user'); const bob = makeUser('bob', 'user');
+    const { api, user, queryClient } = await renderApp([alice, bob], '/friends', { signedInAs: alice });
+    api.friendships.set([alice.id, bob.id].sort().join(':'), { sender: bob.id, accepted: true });
+    for (let seq = 1; seq <= 61; seq++) api.messages.push({ id: crypto.randomUUID(), seq, sender_id: bob.id, recipient: alice.id, text: seq === 1 ? albumTracks[0]!.title : `Сообщение ${seq}`, attachment_kind: seq === 1 ? 'track' : 'none', ...(seq === 1 ? { attachment_id: albumTracks[0]!.id } : {}), created_at: new Date().toISOString(), read: true });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await user.click(await screen.findByRole('button', { name: 'Музыка из переписки' }));
+    await screen.findByRole('link', { name: 'Открыть трек' });
+    expect(screen.queryByRole('textbox', { name: 'Сообщение' })).not.toBeInTheDocument();
+    const firstCall = api.calls.length;
+    api.messages.push({ id: crypto.randomUUID(), seq: 62, sender_id: bob.id, recipient: alice.id, text: 'Новая музыка', attachment_kind: 'track', attachment_id: albumTracks[0]!.id, created_at: new Date().toISOString(), read: false });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await screen.findByText('Новая музыка');
+    expect(api.messages.at(-1)?.read).toBe(false);
+    expect(api.calls.slice(firstCall).some(c => c.path.endsWith('/actions') && (c.body as { action?: string })?.action === 'read_chat')).toBe(false);
+  });
+
+  it('keeps the current conversation when another friend sends newer messages and confirms blocking', async () => {
+    const alice = makeUser('alice', 'user'); const bob = makeUser('bob', 'user'); const carol = makeUser('carol', 'user');
+    const { api, user, queryClient } = await renderApp([alice, bob, carol], '/friends', { signedInAs: alice });
+    for (const friend of [bob, carol]) api.friendships.set([alice.id, friend.id].sort().join(':'), { sender: friend.id, accepted: true });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await screen.findByRole('heading', { name: 'bob' });
+    await user.type(screen.getByRole('textbox', { name: 'Сообщение' }), 'Черновик для bob');
+    api.messages.push({ id: crypto.randomUUID(), seq: 1, sender_id: carol.id, recipient: alice.id, text: 'Новое сообщение от carol', attachment_kind: 'none', created_at: new Date().toISOString(), read: false });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await screen.findByText('Новое сообщение от carol');
+    expect(screen.getByRole('heading', { name: 'bob' })).toBeInTheDocument();
+    expect(screen.getByRole('textbox', { name: 'Сообщение' })).toHaveValue('Черновик для bob');
+    await user.click(screen.getByRole('button', { name: 'Действия с пользователем bob' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Заблокировать' }));
+    const confirm = await screen.findByRole('dialog', { name: 'Заблокировать bob?' });
+    expect(api.friendships.size).toBe(2);
+    await user.click(within(confirm).getByRole('button', { name: 'Отмена' }));
+    expect(api.friendships.size).toBe(2);
+    await user.click(screen.getByRole('button', { name: 'Действия с пользователем bob' }));
+    await user.click(screen.getByRole('menuitem', { name: 'Заблокировать' }));
+    await user.click(within(await screen.findByRole('dialog', { name: 'Заблокировать bob?' })).getByRole('button', { name: 'Заблокировать' }));
+    await waitFor(() => expect(api.friendships.size).toBe(1));
+    expect(screen.queryByRole('textbox', { name: 'Сообщение' })).not.toBeInTheDocument();
+  });
+
+  it('follows a room with locked playback controls, independent volume and local exit', async () => {
+    const alice = makeUser('alice', 'user'); const bob = makeUser('bob', 'user');
+    const { api, session, user } = await renderApp([alice, bob], '/friends', { signedInAs: alice });
+    const id = crypto.randomUUID();
+    api.listeningRooms.set(id, { id, owner_id: bob.id, owner_name: 'bob', device_id: crypto.randomUUID(), track_id: albumTracks[0]!.id, position_ms: 5000, playing: false, updated_at: new Date().toISOString(), participants: [] });
+    api.listeningMembers.set(alice.id, id); api.listeningMembers.set(bob.id, id);
+    refreshListening(session);
+    await screen.findByText('Слушаете вместе с bob');
+    const player = screen.getByRole('contentinfo', { name: 'Плеер' });
+    await waitFor(() => expect(within(player).getByRole('button', { name: 'Слушать' })).toBeDisabled());
+    expect(within(player).getByRole('slider', { name: 'Громкость' })).toBeEnabled();
+    await user.click(screen.getByRole('button', { name: 'Выйти из прослушивания' }));
+    await waitFor(() => expect(screen.queryByText('Слушаете вместе с bob')).not.toBeInTheDocument());
+    expect(api.listeningMembers.has(alice.id)).toBe(false);
+  });
+  it('edits, replies, reacts, searches, deletes and preserves a draft between sections', async () => {
+    const alice = makeUser('alice', 'user'); const bob = makeUser('bob', 'user');
+    const { api, user, queryClient } = await renderApp([alice, bob], '/friends', { signedInAs: alice });
+    api.friendships.set([alice.id, bob.id].sort().join(':'), { sender: bob.id, accepted: true });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await user.click(await screen.findByRole('button', { name: /bob Начать разговор/ }));
+    const composer = () => screen.getByRole('textbox', { name: 'Сообщение' });
+    await user.type(composer(), 'Первый вариант');
+    await user.click(screen.getByRole('button', { name: 'Отправить' }));
+    await screen.findByText('Первый вариант');
+    const actions = async (name: string) => {
+      await user.click((await screen.findAllByRole('button', { name: 'Действия с сообщением' }))[0]!);
+      await user.click(await screen.findByRole('menuitem', { name }));
+    };
+    await actions('Редактировать');
+    await user.clear(composer()); await user.type(composer(), 'Исправленный текст');
+    await user.click(screen.getByRole('button', { name: 'Сохранить' }));
+    await screen.findByText('Исправленный текст', { exact: true });
+    await actions('❤️');
+    await screen.findByRole('button', { name: '❤️ 1' });
+    await actions('Ответить');
+    await user.type(composer(), 'Ответ на музыку');
+    await user.click(screen.getByRole('button', { name: 'Отправить' }));
+    await waitFor(() => expect(api.messages).toHaveLength(2));
+    expect(api.messages[1]?.reply_to).toBe(api.messages[0]?.id);
+    await user.click(screen.getByRole('button', { name: 'Поиск в переписке' }));
+    await user.type(screen.getByRole('searchbox', { name: 'Поиск в переписке' }), 'Исправленный');
+    await waitFor(() => expect(screen.queryByText('Ответ на музыку', { exact: true })).not.toBeInTheDocument());
+    await actions('Удалить для всех');
+    await waitFor(() => expect(api.messages[0]?.deleted).toBe(true));
+    await user.clear(screen.getByRole('searchbox', { name: 'Поиск в переписке' }));
+    await user.type(composer(), 'Мой черновик');
+    await user.click(screen.getByRole('button', { name: 'Друзья' }));
+    expect(screen.queryByRole('textbox', { name: 'Сообщение' })).not.toBeInTheDocument();
+    await user.click(screen.getByRole('button', { name: 'Написать' }));
+    expect(composer()).toHaveValue('Мой черновик');
+  });
+
+  it('saves privacy and independent request admission preferences', async () => {
+    const alice = makeUser('alice', 'user');
+    const { api, user } = await renderApp([alice], '/', { signedInAs: alice });
+    await user.click(await screen.findByRole('button', { name: 'Меню профиля' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Моя музыка скрыта' }));
+    const privacy = await screen.findByRole('group', { name: 'Кто видит мою музыку' });
+    expect(within(privacy).getByRole('button', { name: 'Никому' })).toHaveAttribute('aria-pressed', 'true');
+    await user.click(within(privacy).getByRole('button', { name: 'Друзьям' }));
+    await waitFor(() => expect(api.activityVisibility.get(alice.id)).toBe('friends'));
+    await user.click(screen.getByText('Слушать вместе', { exact: true }));
+    const requests = await screen.findByRole('group', { name: 'Принимать запросы и приглашения от' });
+    const auto = screen.getByRole('group', { name: 'Автоматически принимать от' });
+    await user.click(within(requests).getByRole('button', { name: 'Друзьям' }));
+    await waitFor(() => expect(api.listeningPreferences.get(alice.id)?.requests).toBe('friends'));
+    await waitFor(() => expect(within(auto).getByRole('button', { name: 'Всем' })).toBeEnabled());
+    await user.click(within(auto).getByRole('button', { name: 'Всем' }));
+    await waitFor(() => expect(api.listeningPreferences.get(alice.id)).toMatchObject({ requests: 'friends', auto_accept: 'everyone' }));
+  });
+  it('shows persistent notifications and acknowledges only the chosen event', async () => {
+    const alice = makeUser('alice', 'user');
+    const bob = makeUser('bob', 'user');
+    const { api, user, queryClient, router } = await renderApp([alice, bob], '/', { signedInAs: alice });
+    api.friendships.set([alice.id, bob.id].sort().join(':'), { sender: bob.id, accepted: false });
+    api.notifications.push({ id: crypto.randomUUID(), recipient: alice.id, actor_id: bob.id, actor_name: 'bob', kind: 'friend_request', created_at: new Date().toISOString(), read: false });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await user.click(await screen.findByRole('button', { name: 'Меню профиля' }));
+    await user.click(await screen.findByRole('menuitem', { name: 'Уведомления 1' }));
+    await screen.findByText('Хочет добавить вас в друзья');
+    await user.click(screen.getByRole('button', { name: 'Прочитано' }));
+    await waitFor(() => expect(screen.queryByRole('button', { name: 'Прочитано' })).not.toBeInTheDocument());
+    expect(api.notifications[0]?.read).toBe(true);
+    await user.click(screen.getByRole('button', { name: 'Открыть: bob' }));
+    await screen.findByRole('button', { name: 'Принять' });
+    expect(router.state.location.pathname).toBe('/friends');
+    expect(api.calls.filter(c => c.path.endsWith('/actions')).at(-1)?.body).toMatchObject({ action: 'read_notification', target_id: api.notifications[0]!.id });
+  });
+  it('searches, requests, cancels, accepts and exchanges messages and music', async () => {
+    const alice = makeUser('alice', 'user');
+    const bob = makeUser('bob', 'user', { display_name: 'Борис' });
+    const { api, router, user, queryClient } = await renderApp([alice, bob], '/friends', { signedInAs: alice });
+    await user.click((await screen.findAllByRole('button', { name: 'Найти друзей' }))[0]!);
+    await user.type(await screen.findByLabelText('Найти по имени или логину'), 'bob');
+    await user.click(await screen.findByRole('button', { name: 'В друзья' }));
+    await screen.findByRole('button', { name: 'Отменить заявку' });
+    await user.click(screen.getByRole('button', { name: 'Отменить заявку' }));
+    await screen.findByRole('button', { name: 'В друзья' });
+    api.friendships.set([alice.id, bob.id].sort().join(':'), { sender: bob.id, accepted: false });
+    await queryClient.invalidateQueries({ queryKey: ['social'] });
+    await user.click(await screen.findByRole('button', { name: 'Принять' }));
+    await user.click(await screen.findByRole('button', { name: 'Написать' }));
+    await user.type(await screen.findByLabelText('Сообщение', { exact: true }), 'Привет, послушай это');
+    await user.click(screen.getByRole('button', { name: 'Отправить' }));
+    expect(await screen.findByText('Привет, послушай это')).toBeInTheDocument();
+    expect(api.messages).toHaveLength(1);
+    await router.navigate({ to: '/track/$id', params: { id: albumTracks[0]!.id } });
+    await user.click(await screen.findByRole('button', { name: 'Слушать' }));
+    const player = screen.getByRole('contentinfo', { name: 'Плеер' });
+    await user.click(within(player).getByRole('button', { name: 'Поделиться треком' }));
+    await user.click(await screen.findByRole('button', { name: 'Борис · Отправить' }));
+    await screen.findByRole('button', { name: 'Борис · Отправлено' });
+    expect(api.messages.at(-1)).toMatchObject({ attachment_kind: 'track', attachment_id: albumTracks[0]!.id, recipient: bob.id });
+    expect(screen.getByRole('button', { name: 'Борис · Отправлено' })).toBeDisabled();
+  });
+});
+
 async function renderApp(users: FakeUser[], path = '/', opts: { signedInAs?: FakeUser } = {}) {
   const api = fakeApi(users);
   const i18n = await createI18n('ru');
@@ -27,7 +277,7 @@ async function renderApp(users: FakeUser[], path = '/', opts: { signedInAs?: Fak
       <App session={session} router={router} queryClient={queryClient} />
     </I18nextProvider>,
   );
-  return { api, router, session, i18n, user: userEvent.setup() };
+  return { api, router, session, i18n, queryClient, user: userEvent.setup() };
 }
 
 describe('sign-in', () => {
@@ -281,6 +531,41 @@ describe('search box', () => {
 });
 
 describe('player', () => {
+  it.each(['album', 'artist'] as const)('toggles the current %s row without restarting or replacing the listening attempt', async (kind) => {
+    const alice = makeUser('alice', 'user');
+    const id = kind === 'artist' ? '00000000-0000-4000-8000-0000000000aa' : '00000000-0000-4000-8000-0000000000bb';
+    const { user, api } = await renderApp([alice], `/${kind}/${id}`, { signedInAs: alice });
+    const row = (await screen.findByText('Закрой за мной дверь')).closest('[role="listitem"]')!;
+    await user.click(row);
+    const bar = screen.getByRole('contentinfo', { name: 'Плеер' });
+    await waitFor(() => expect(within(bar).getByRole('button', { name: 'Пауза' })).toBeInTheDocument());
+    await user.keyboard('{ArrowRight}');
+    const progress = within(bar).getByRole('slider', { name: 'Позиция' });
+    expect(progress).toHaveValue('10000');
+    await user.click(row);
+    expect(within(bar).getByRole('button', { name: 'Слушать' })).toBeInTheDocument();
+    expect(progress).toHaveValue('10000');
+    await user.click(row);
+    expect(within(bar).getByRole('button', { name: 'Пауза' })).toBeInTheDocument();
+    expect(progress).toHaveValue('10000');
+    await user.keyboard('{Enter}');
+    expect(within(bar).getByRole('button', { name: 'Слушать' })).toBeInTheDocument();
+    await user.keyboard('{Enter}');
+    expect(within(bar).getByRole('button', { name: 'Пауза' })).toBeInTheDocument();
+    expect(progress).toHaveValue('10000');
+    window.dispatchEvent(new Event('pagehide'));
+    await waitFor(() => {
+      const events = api.calls.filter((c) => c.path === '/api/v1/events').flatMap((c) => (c.body as { events: { type: string; context_type?: string }[] }).events);
+      expect(events.filter((event) => event.type === 'play_start')).toHaveLength(1);
+      expect(events.find((event) => event.type === 'play_start')).toMatchObject({ context_type: kind });
+      expect(events.some((event) => event.type === 'skip')).toBe(false);
+    });
+    const other = screen.getAllByText('Группа крови').map((node) => node.closest('[role="listitem"]')).find(Boolean)!;
+    await user.click(other);
+    await waitFor(() => expect(within(bar).getByText('Группа крови')).toBeInTheDocument());
+    expect(progress).toHaveValue('0');
+  });
+
   it('opens a shared track after login and copies its page URL from the player', async () => {
     const alice = makeUser('alice', 'user');
     const path = '/track/00000000-0000-4000-8000-000000000101';
@@ -294,7 +579,8 @@ describe('player', () => {
     await user.click(screen.getByRole('button', { name: 'Слушать' }));
     const bar = screen.getByRole('contentinfo', { name: 'Плеер' });
     await user.click(within(bar).getByRole('button', { name: 'Поделиться треком' }));
-    expect(await within(bar).findByRole('status')).toHaveTextContent('Ссылка на трек скопирована');
+    await user.click(await screen.findByRole('button', { name: 'Скопировать ссылку' }));
+    await screen.findByRole('button', { name: 'Ссылка скопирована' });
     expect(await navigator.clipboard.readText()).toBe(`${window.location.origin}${path}`);
   });
 
@@ -517,7 +803,9 @@ describe('playlist sharing', () => {
     await router.navigate({ to: '/playlist/$id', params: { id: playlist.id } });
     await screen.findByRole('heading', { name: 'Общий микс' });
     await user.click(screen.getByRole('button', { name: 'Поделиться плейлистом' }));
-    expect(await screen.findByRole('status')).toHaveTextContent('Ссылка на плейлист скопирована');
+    await user.click(await screen.findByRole('button', { name: 'Скопировать ссылку' }));
+    await screen.findByRole('button', { name: 'Ссылка скопирована' });
+    await user.click(within(screen.getByRole('dialog')).getByRole('button', { name: 'Закрыть' }));
     const shareId = api.playlists.get(playlist.id)!.share_id!;
     expect(await navigator.clipboard.readText()).toBe(`${window.location.origin}/shared/playlist/${shareId}`);
     await user.click(screen.getByRole('button', { name: 'Поделиться плейлистом' }));

apps/web/src/app/router.tsx

@@ -9,6 +9,8 @@ import {
 } from '@tanstack/react-router';
 import { lazy } from 'react';
 
+const ServerUpdatesPage = lazy(() => import('../features/server-management/UpdatesPage').then((m) => ({ default: m.UpdatesPage })));
+const ServerConfigPage = lazy(() => import('../features/server-management/ConfigPage').then((m) => ({ default: m.ConfigPage })));
 const AuditPage = lazy(() => import('../pages/admin/AuditPage').then((m) => ({ default: m.AuditPage })));
 const LibraryPage = lazy(() => import('../pages/admin/LibraryPage').then((m) => ({ default: m.LibraryPage })));
 const PatternsPage = lazy(() => import('../pages/admin/PatternsPage').then((m) => ({ default: m.PatternsPage })));
@@ -24,7 +26,7 @@ import { ConnectPage } from '../pages/ConnectPage';
 import { TrackPage } from '../pages/TrackPage';
 import { ArtistPage } from '../pages/ArtistPage';
 import { CollectionPage } from '../pages/CollectionPage';
-import { PlaylistPage, PlaylistsPage } from '../pages/PlaylistsPage';
+import { ActivityPlaylistPage, PlaylistPage, PlaylistsPage } from '../pages/PlaylistsPage';
 import { HomePage } from '../pages/HomePage';
 import { AppDownloadPage } from '../pages/AppDownloadPage';
 import { LoginPage } from '../pages/LoginPage';
@@ -34,6 +36,7 @@ import { SetupPage } from '../pages/SetupPage';
 import { AppShell } from '../widgets/AppShell';
 import { RouteError } from '../widgets/RouteError';
 import { DesktopDownloadsPage } from '../features/desktop/DesktopFeatures';
+import { SocialPage } from '../features/social/Social';
 
 export interface RouterContext {
   session: AuthSession;
@@ -145,6 +148,8 @@ const adminOnly = ({ context }: { context: { user: AuthUser } }) => {
 };
 
 const homeRoute = createRoute({ getParentRoute: () => appRoute, path: '/', component: HomePage });
+const activityPlaylistRoute = createRoute({ getParentRoute: () => appRoute, path: '/activity/playlist/$userId', component: () => <ActivityPlaylistPage key={activityPlaylistRoute.useParams().userId} userId={activityPlaylistRoute.useParams().userId} /> });
+const socialRoute = createRoute({ getParentRoute: () => appRoute, path: '/friends', validateSearch: (s: Record<string, unknown>): { peer?: string; tab?: 'messages' | 'people' | 'requests' } => ({ ...(typeof s.peer === 'string' ? { peer: s.peer } : {}), ...(s.tab === 'messages' || s.tab === 'people' || s.tab === 'requests' ? { tab: s.tab } : {}) }), component: () => { const search = socialRoute.useSearch(); return <SocialPage peer={search.peer} initialTab={search.tab} />; } });
 const trackRoute = createRoute({ getParentRoute: () => appRoute, path: '/track/$id', component: () => <TrackPage key={trackRoute.useParams().id} id={trackRoute.useParams().id} /> });
 const sharedPlaylistRoute = createRoute({ getParentRoute: () => appRoute, path: '/shared/playlist/$shareId', component: () => <PlaylistPage key={sharedPlaylistRoute.useParams().shareId} id={sharedPlaylistRoute.useParams().shareId} shared /> });
 const playlistsRoute = createRoute({ getParentRoute: () => appRoute, path: '/collection/playlists', component: PlaylistsPage });
@@ -274,6 +279,14 @@ const adminSettingsRoute = createRoute({
   component: AdminSettingsPage,
 });
 
+const serverUpdatesRoute = createRoute({
+  getParentRoute: () => appRoute, path: '/admin/updates', component: ServerUpdatesPage,
+  beforeLoad: ({ context }) => {
+    if (context.user.role !== 'admin' && !context.user.manages_updates) throw redirect({ to: '/' });
+  },
+});
+const serverConfigRoute = createRoute({ getParentRoute: () => appRoute, path: '/admin/config', beforeLoad: adminOnly, component: ServerConfigPage });
+
 const routeTree = rootRoute.addChildren([
   downloadAppRoute,
   androidAppRoute,
@@ -283,6 +296,8 @@ const routeTree = rootRoute.addChildren([
   setupPasswordRoute,
   appRoute.addChildren([
     homeRoute,
+    activityPlaylistRoute,
+    socialRoute,
     trackRoute,
     playlistsRoute,
     downloadsRoute,
@@ -304,6 +319,8 @@ const routeTree = rootRoute.addChildren([
     myUploadsRoute,
     uploadQueueRoute,
     adminSettingsRoute,
+    serverUpdatesRoute,
+    serverConfigRoute,
   ]),
 ]);
 

apps/web/src/entities/catalog.tsx

@@ -1,6 +1,6 @@
 import type { components } from '@pipu/api-client';
 import { unwrap } from '@pipu/core';
-import { Link } from '@tanstack/react-router';
+import { Link, useNavigate } from '@tanstack/react-router';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { Fragment, useRef, useState, type CSSProperties, type MouseEvent, type ReactNode } from 'react';
 import { AddToPlaylist } from './playlists';
@@ -11,7 +11,7 @@ import { useSession } from '../app/session';
 import { formatDuration } from '../shared/lib/format';
 import { usePlayer, usePlayerState } from '../player/context';
 import type { PlayContext } from '../player/player';
-import { albumIcon, likeFillIcon, likeIcon, personIcon, playIcon, undoIcon} from '../shared/ui/icons';
+import { albumIcon, likeFillIcon, likeIcon, pauseIcon, personIcon, playIcon, undoIcon} from '../shared/ui/icons';
 import { cx, Icon } from '../shared/ui/ui';
 import s from './catalog.module.css';
 
@@ -71,15 +71,19 @@ export function Cover({
 }
 
 /** Исполнители через запятую, каждый — ссылка. */
-export function ArtistLinks({ artists }: { artists: ArtistRef[] }) {
+export function ArtistLinks({ artists, hideUrlPreview = false }: { artists: ArtistRef[]; hideUrlPreview?: boolean }) {
+  const navigate = useNavigate();
   return (
     <>
       {artists.map((a, i) => (
         <Fragment key={a.id}>
           {i > 0 && ', '}
-          <Link to="/artist/$id" params={{ id: a.id }} className={s.link}>
+          {hideUrlPreview ? <button type="button" role="link" className={s.link}
+            onClick={() => void navigate({ to: '/artist/$id', params: { id: a.id } })}>
             {a.name}
-          </Link>
+          </button> : <Link to="/artist/$id" params={{ id: a.id }} className={s.link}>
+            {a.name}
+          </Link>}
         </Fragment>
       ))}
     </>
@@ -139,7 +143,7 @@ export function AlbumGrid({ albums }: { albums: AlbumSummary[] }) {
 
 /**
  * Список треков. showAlbum — колонка альбома (поиск); numbered — номер трека (страница альбома).
- * Клик по строке запускает весь список с этого трека в контексте context; Enter — то же с клавиатуры.
+ * Клик или Enter запускает список с выбранного трека; у текущего трека переключает паузу без перезапуска.
  */
 export function TrackList({
   tracks,
@@ -179,7 +183,11 @@ export function TrackList({
 
   const row = (tr: Track, i: number) => {
     const isCurrent = current?.id === tr.id;
-    const play = () => tr.available && player.playList(tracks, i, context);
+    const play = () => {
+      if (!tr.available) return;
+      if (isCurrent) player.toggle();
+      else player.playList(tracks, i, context);
+    };
     const liked = tr.reaction === 'like';
     const meta = rowMeta?.(tr, i);
     return (
@@ -202,7 +210,7 @@ export function TrackList({
           {numbered ? (tr.track_no ?? i + 1) : <Cover album={tr.album} size={lead ? 44 : 40} />}
           {tr.available && (
             <span className={s.playHint} aria-hidden>
-              <Icon src={playIcon} size={20} />
+              <Icon src={isCurrent && playing ? pauseIcon : playIcon} size={20} />
             </span>
           )}
         </span>

apps/web/src/features/server-management/ConfigPage.tsx

@@ -0,0 +1,95 @@
+import type { components } from '@pipu/api-client';
+import { unwrap } from '@pipu/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSession } from '../../app/session';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Dialog, Field, FormError, PageSkeleton } from '../../shared/ui/ui';
+import { JobPanel } from './JobPanel';
+import s from './management.module.css';
+
+export function ConfigPage() {
+  const { t } = useTranslation('admin');
+  const session = useSession();
+  const errorText = useErrorText();
+  const qc = useQueryClient();
+  const [draft, setDraft] = useState<Record<string, string | null>>({});
+  const [baseRevision, setBaseRevision] = useState<string | null>(null);
+  const [search, setSearch] = useState('');
+  const [group, setGroup] = useState('all');
+  const [confirm, setConfirm] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const dirty = Object.keys(draft).length > 0;
+  const query = useQuery({ queryKey: ['server-config'], queryFn: async () => unwrap(await session.client.GET('/api/v1/admin/server/config')), retry: false });
+  const status = useQuery({ queryKey: ['server-updates', 'config'], queryFn: async () => unwrap(await session.client.GET('/api/v1/admin/server/updates')), refetchInterval: 3000, retry: false });
+  const running = status.data?.job?.state === 'running';
+  useEffect(() => {
+    if (!dirty) return;
+    const prevent = (e: BeforeUnloadEvent) => { e.preventDefault(); };
+    window.addEventListener('beforeunload', prevent);
+    return () => window.removeEventListener('beforeunload', prevent);
+  }, [dirty]);
+  useEffect(() => {
+    if (status.data?.job?.state === 'succeeded') void qc.invalidateQueries({ queryKey: ['server-config'] });
+  }, [status.data?.job?.id, status.data?.job?.state, qc]);
+  const save = useMutation({
+    mutationFn: async () => unwrap(await session.client.PATCH('/api/v1/admin/server/config', { body: { revision: baseRevision ?? query.data!.revision, values: draft } })),
+    onSuccess: (data) => { qc.setQueryData(['server-config'], data); setDraft({}); setBaseRevision(null); setSaved(true); },
+  });
+  const apply = useMutation({
+    mutationFn: async () => unwrap(await session.client.POST('/api/v1/admin/server/config/apply')),
+    onSuccess: (job) => {
+      setConfirm(false);
+      qc.setQueryData<components['schemas']['ServerUpdates']>(['server-updates', 'config'], (old) => old ? { ...old, job } : old);
+      void qc.invalidateQueries({ queryKey: ['server-updates'] });
+    },
+  });
+  const change = (key: string, value: string | null) => {
+    const entry = query.data!.entries.find((v) => v.key === key)!;
+    const unchanged = value === null ? entry.local === null
+      : entry.secret ? value === '' : value === (entry.local ?? '');
+    const next = { ...draft };
+    if (unchanged) delete next[key]; else next[key] = value;
+    setBaseRevision(Object.keys(next).length ? baseRevision ?? query.data!.revision : null);
+    setDraft(next); setSaved(false); save.reset();
+  };
+  if (query.isPending) return <PageSkeleton />;
+  const entries = query.data?.entries.filter((e) => (group === 'all' || e.group === group) && `${e.key} ${e.group}`.toLowerCase().includes(search.toLowerCase())) ?? [];
+  return <div className={s.page}>
+    <header className={s.header}><div><span className={s.eyebrow}>{t('management.server')}</span><h1>{t('management.config')}</h1><p>{t('management.config_intro')}</p></div></header>
+    {query.error && <FormError>{errorText(query.error)}</FormError>}
+    {query.data && <>
+      <section className={s.hero}><div><span className={s.eyebrow}>{t('management.priority')}</span><strong className={s.priority}>ENV → config.local → {t('management.defaults')}</strong></div><p>{t('management.priority_hint')}</p></section>
+      <div className={s.toolbar}><Field type="search" label={t('management.search')} value={search} onChange={setSearch} /><label className={s.selectLabel}>{t('management.group')}<select value={group} onChange={(e) => setGroup(e.target.value)}><option value="all">{t('management.all')}</option>{[...new Set(query.data.entries.map((v) => v.group))].map((v) => <option key={v} value={v}>{t(`management.groups.${v}`, { defaultValue: v })}</option>)}</select></label></div>
+      <p className={s.note}>{t('management.config_files_hint')}</p>
+      <div className={s.configList}>{entries.map((entry) => {
+        const changed = Object.hasOwn(draft, entry.key);
+        const value = changed ? draft[entry.key] ?? '' : entry.secret ? '' : entry.local ?? '';
+        const display = (stored: string | null) => entry.secret && stored ? '••••••••' : stored;
+        return <section className={s.configRow} key={entry.key} data-changed={changed || undefined}>
+          <div className={s.configMeta}><code>{entry.key}</code><span className={s.tag}>{t(`management.groups.${entry.group}`, { defaultValue: entry.group })}</span><span className={s.note}>{t(`management.value_source.${entry.source}`)}</span></div>
+          <div className={s.values}><span>{t('management.effective')}: <code>{display(entry.effective) || '—'}</code></span><span>ENV: <code>{display(entry.env) ?? '—'}</code></span></div>
+          {entry.readonly ? <p className={s.note}>{t('management.readonly')}</p> : <div className={s.editor}>
+            <Field label={`${entry.key} · config.local`} type={entry.secret ? 'password' : 'text'} autoComplete={entry.secret ? 'new-password' : 'off'} value={value} disabled={running || save.isPending} placeholder={entry.secret ? entry.local ? t('management.secret_saved') : '' : entry.default_value} hint={changed && draft[entry.key] === null ? t('management.will_reset') : entry.env !== null ? t('management.overridden') : entry.secret ? t('management.secret_hint') : `${t('management.default')}: ${entry.default_value || '—'}`} onChange={(v) => change(entry.key, v)} mono />
+            <Button disabled={running || save.isPending || (!changed && entry.local === null)} onClick={() => change(entry.key, null)}>{t('management.reset')}</Button>
+          </div>}
+        </section>;
+      })}</div>
+      {!entries.length && <p className={s.note}>{t('management.no_results')}</p>}
+      {saved && !dirty && <p className={s.note} role="status">{t('management.saved')}</p>}
+      {dirty && <section className={s.saveBar} aria-label={t('management.unsaved_panel')}>
+        <div role="status">{t('management.unsaved', { count: Object.keys(draft).length })}</div>
+        <div className={s.actions}><Button disabled={save.isPending} onClick={() => { setDraft({}); setBaseRevision(null); save.reset(); }}>{t('management.discard')}</Button><Button variant="primary" disabled={running} busy={save.isPending} onClick={() => save.mutate()}>{t('management.save')}</Button></div>
+      </section>}
+      {!dirty && query.data.restart_required && !running && <section className={s.saveBar} aria-label={t('management.pending_restart')}>
+        <div role="status">{t('management.pending_restart')}</div>
+        <Button busy={apply.isPending} onClick={() => { apply.reset(); setConfirm(true); }}>{t('management.apply')}</Button>
+      </section>}
+      {save.error && <FormError>{errorText(save.error)}</FormError>}
+      {apply.error && <FormError>{errorText(apply.error)}</FormError>}
+      <JobPanel job={status.data?.job} reconnecting={status.isError} />
+    </>}
+    {confirm && <Dialog title={t('management.apply')} onClose={() => !apply.isPending && setConfirm(false)}><p>{t('management.apply_warning')}</p>{apply.error && <FormError>{errorText(apply.error)}</FormError>}<div className={s.actions}><Button disabled={apply.isPending} onClick={() => setConfirm(false)}>{t('management.cancel')}</Button><Button variant="primary" busy={apply.isPending} onClick={() => apply.mutate()}>{t('management.apply')}</Button></div></Dialog>}
+  </div>;
+}

apps/web/src/features/server-management/JobPanel.tsx

@@ -0,0 +1,33 @@
+import type { components } from '@pipu/api-client';
+import { useLayoutEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import s from './management.module.css';
+
+export type Job = components['schemas']['ServerJob'];
+
+export function JobPanel({ job, reconnecting }: { job: Job | null | undefined; reconnecting?: boolean }) {
+  const { t } = useTranslation('admin');
+  const logRef = useRef<HTMLPreElement>(null);
+  const followLog = useRef(true);
+  useLayoutEffect(() => {
+    followLog.current = true;
+  }, [job?.id]);
+  useLayoutEffect(() => {
+    const log = logRef.current;
+    if (log && followLog.current) log.scrollTop = log.scrollHeight;
+  }, [job?.id, job?.log]);
+  if (!job) return null;
+  return <section className={s.card} aria-label={t('management.job')}>
+    <div className={s.cardHead}>
+      <div><span className={s.eyebrow}>{t('management.job')}</span><h2>{job.target}</h2></div>
+      <span className={s.status} data-state={job.state} role="status">{t(`management.state.${job.state}`)}</span>
+    </div>
+    <p className={s.note}>{t('management.started')}: {new Date(job.started_at).toLocaleString()}
+      {job.finished_at && <> · {t('management.finished')}: {new Date(job.finished_at).toLocaleString()}</>}</p>
+    {job.state === 'running' && <p className={s.note}>{t(reconnecting ? 'management.reconnecting' : 'management.running_hint')}</p>}
+    <pre ref={logRef} className={s.log} tabIndex={0} aria-label={t('management.log')} onScroll={(event) => {
+      const log = event.currentTarget;
+      followLog.current = log.scrollHeight - log.clientHeight - log.scrollTop <= 4;
+    }}>{job.log || t('management.waiting')}</pre>
+  </section>;
+}

apps/web/src/features/server-management/UpdatesPage.tsx

@@ -0,0 +1,109 @@
+import type { components } from '@pipu/api-client';
+import { unwrap } from '@pipu/core';
+import { keepPreviousData, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSession } from '../../app/session';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Dialog, Field, FormError, PageSkeleton, Segmented } from '../../shared/ui/ui';
+import { JobPanel } from './JobPanel';
+import s from './management.module.css';
+
+type Source = components['schemas']['ServerSource'];
+type Channel = components['schemas']['ServerUpdateRequest']['channel'];
+
+export function UpdatesPage() {
+  const { t } = useTranslation('admin');
+  const session = useSession();
+  const qc = useQueryClient();
+  const errorText = useErrorText();
+  const [sourceId, setSourceId] = useState('');
+  const [channel, setChannel] = useState<Channel>('latest');
+  const [version, setVersion] = useState('');
+  const [confirm, setConfirm] = useState(false);
+  const [editing, setEditing] = useState<Source[] | null>(null);
+  const fresh = useRef(false);
+  const queryKey = ['server-updates', sourceId, channel, version];
+  const query = useQuery({
+    queryKey,
+    queryFn: async () => {
+      const force = fresh.current;
+      fresh.current = false;
+      return unwrap(await session.client.GET('/api/v1/admin/server/updates', {
+        params: { query: { source_id: sourceId || undefined, channel, version: channel === 'version' ? version : undefined, fresh: force } },
+      }));
+    },
+    placeholderData: keepPreviousData,
+    refetchInterval: (q) => q.state.data?.job?.state === 'running' ? 3000 : 60000,
+    retry: false,
+  });
+  const source = query.data?.sources.find((v) => v.id === sourceId) ?? query.data?.sources[0];
+  const running = query.data?.job?.state === 'running';
+  const checking = query.isFetching;
+  const availability = query.isError ? 'unavailable' : query.data?.update_state || 'unknown';
+  const canInstall = availability === 'available' && !checking && !query.isPlaceholderData && !query.isError && !running;
+  const refresh = () => qc.invalidateQueries({ queryKey: ['server-updates'] });
+  const save = useMutation({
+    mutationFn: async (sources: Source[]) => unwrap(await session.client.PUT('/api/v1/admin/server/update-sources', { body: { sources } })),
+    onSuccess: () => { setEditing(null); setSourceId(''); void refresh(); },
+  });
+  const start = useMutation({
+    mutationFn: async () => unwrap(await session.client.POST('/api/v1/admin/server/updates', {
+      body: { source_id: source!.id, channel, version: channel === 'version' ? version : undefined, expected_commit: query.data!.target_commit },
+    })),
+    onSuccess: (job) => {
+      setConfirm(false);
+      qc.setQueryData<components['schemas']['ServerUpdates']>(queryKey, (old) => old ? { ...old, job } : old);
+      void refresh();
+    },
+    onError: () => { void refresh(); },
+  });
+  if (query.isPending) return <PageSkeleton />;
+  return <div className={s.page}>
+    <header className={s.header}><div><span className={s.eyebrow}>{t('management.server')}</span><h1>{t('management.updates')}</h1><p>{t('management.updates_intro')}</p></div>
+      <Button onClick={() => { fresh.current = true; void query.refetch(); }} busy={query.isFetching}>{t('management.check_updates')}</Button>
+    </header>
+    {query.error && <FormError>{errorText(query.error)}</FormError>}
+    {query.data && <>
+      <section className={s.hero}><div><span className={s.eyebrow}>{t('management.current')}</span><strong>{query.data.current_version || '—'}</strong></div><p>{t('management.manual')}</p></section>
+      <section className={s.card}>
+        <div className={s.cardHead}><h2>{t('management.update_target')}</h2><Button disabled={running} onClick={() => { save.reset(); setEditing(query.data.sources.map((v) => ({ ...v }))); }}>{t('management.sources')}</Button></div>
+        <label className={s.selectLabel}>{t('management.source')}
+          <select aria-label={t('management.source')} value={source?.id ?? ''} disabled={running || start.isPending} onChange={(e) => { setSourceId(e.target.value); setVersion(''); start.reset(); }}>
+            {query.data.sources.map((v) => <option key={v.id} value={v.id}>{v.name}</option>)}
+          </select>
+        </label>
+        <p className={s.url}>{source?.url}</p>
+        <Segmented label={t('management.channel')} value={channel} options={(['latest', 'version', 'main'] as const).map((value) => ({ value, label: t(`management.channel_${value}`) }))} onChange={(v) => { setChannel(v); start.reset(); }} />
+        <p className={s.note}>{t(`management.hint_${channel}`)}</p>
+        {channel === 'version' && <label className={s.selectLabel}>{t('management.version')}<select aria-label={t('management.version')} value={version} onChange={(e) => setVersion(e.target.value)}><option value="">{t('management.choose_version')}</option>{query.data.versions.map((v) => <option key={v} value={v}>{v}</option>)}</select></label>}
+        {query.data.source_error && <FormError>{t('management.source_unavailable')}</FormError>}
+        {start.error && <FormError>{errorText(start.error)}</FormError>}
+        <div className={s.updateAction}>
+          <div role="status" aria-live="polite">
+            <strong>{t(`management.availability.${checking ? 'checking' : running ? 'running' : availability}`)}</strong>
+            {query.data.target_version && <p className={s.note}>{query.data.target_version} · {query.data.target_commit.slice(0, 12)}</p>}
+          </div>
+          {canInstall && <Button variant="primary" disabled={!source || !!query.data.source_error} busy={start.isPending} onClick={() => { start.reset(); setConfirm(true); }}>{t('management.install')}</Button>}
+        </div>
+      </section>
+      <JobPanel job={query.data.job} reconnecting={query.isError} />
+    </>}
+    {confirm && <Dialog title={t('management.confirm_update')} onClose={() => !start.isPending && setConfirm(false)}>
+      <p>{t('management.confirm_update_text', { source: source?.name, target: query.data?.target_version || version })}</p>
+      <p className={s.note}>{t('management.update_warning')}</p>
+      {start.error && <FormError>{errorText(start.error)}</FormError>}
+      <div className={s.actions}><Button disabled={start.isPending} onClick={() => setConfirm(false)}>{t('management.cancel')}</Button><Button variant="primary" disabled={!canInstall} busy={start.isPending} onClick={() => start.mutate()}>{t('management.install')}</Button></div>
+    </Dialog>}
+    {editing && <Dialog title={t('management.sources')} onClose={() => !save.isPending && setEditing(null)}>
+      <p className={s.note}>{t('management.sources_hint')}</p>
+      <div className={s.sourceList}>{editing.map((item, index) => <div className={s.sourceEditor} key={item.id}>
+        <Field label={t('management.source_name')} value={item.name} maxLength={100} onChange={(name) => setEditing(editing.map((v, i) => i === index ? { ...v, name } : v))} />
+        <Field label={t('management.repository')} value={item.url} maxLength={2048} mono onChange={(url) => setEditing(editing.map((v, i) => i === index ? { ...v, url } : v))} />
+        <Button disabled={editing.length === 1 || save.isPending} onClick={() => setEditing(editing.filter((v) => v.id !== item.id))}>{t('management.remove_source')}</Button>
+      </div>)}</div>
+      {save.error && <FormError>{errorText(save.error)}</FormError>}
+      <div className={s.actions}><Button disabled={editing.length >= 20 || save.isPending} onClick={() => setEditing([...editing, { id: crypto.randomUUID(), name: '', url: '' }])}>{t('management.add_source')}</Button><Button variant="primary" disabled={editing.some((v) => !v.name.trim() || !v.url.trim())} busy={save.isPending} onClick={() => save.mutate(editing)}>{t('management.save')}</Button></div>
+    </Dialog>}
+  </div>;
+}

apps/web/src/features/server-management/management.module.css

@@ -0,0 +1,36 @@
+.page { width: 100%; min-width: 0; margin: 0 auto; display: flex; flex-direction: column; gap: 24px; }
+.header, .cardHead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
+.header h1 { margin: 6px 0; font-family: var(--font-display); font-size: 30px; }
+.header p, .note { color: var(--text2); font-size: 13px; line-height: 1.6; margin: 0; }
+.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--text2); font-weight: 600; }
+.hero { display: flex; gap: 24px; align-items: center; justify-content: space-between; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(120deg, var(--accent-soft), var(--surface-a)); }
+.hero strong { display: block; font-family: var(--font-display); font-size: 30px; margin-top: 8px; overflow-wrap: anywhere; }
+.hero strong.priority { font-size: 19px; }
+.hero p { color: var(--text2); max-width: 340px; line-height: 1.6; font-size: 13px; }
+.card { padding: 24px; background: var(--surface-a); border: 1px solid var(--line); border-radius: var(--radius-lg); display: flex; flex-direction: column; gap: 18px; }
+.card h2 { margin: 0; font-size: 18px; }
+.selectLabel { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; }
+.selectLabel select { height: 42px; padding: 0 12px; font: inherit; color: var(--text); border: 1px solid var(--line); border-radius: 10px; background: var(--surface2); max-width: 100%; }
+.selectLabel select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+.url { color: var(--text2); font: 12px monospace; overflow-wrap: anywhere; margin: -8px 0 0; }
+.actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
+.status, .tag { padding: 5px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--text2); font-size: 12px; }
+.status[data-state='running'] { background: var(--accent-soft); color: var(--accent); }
+.status[data-state='succeeded'] { color: var(--ok); }
+.status[data-state='failed'] { color: var(--danger); }
+.log { margin: 0; padding: 18px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); max-height: 380px; min-height: 100px; overflow: auto; font-size: 12px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
+.sourceList { display: flex; flex-direction: column; gap: 16px; max-height: 50vh; overflow: auto; margin-bottom: 18px; }
+.sourceEditor { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
+.toolbar { display: grid; grid-template-columns: 1fr 220px; gap: 16px; align-items: end; }
+.configList { display: flex; flex-direction: column; gap: 12px; }
+.configRow { padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-a); display: flex; flex-direction: column; gap: 14px; }
+.configRow[data-changed] { border-color: var(--accent); }
+.configMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
+.configMeta > code { font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
+.values { display: flex; flex-wrap: wrap; gap: 12px 24px; color: var(--text2); font-size: 12px; }
+.values code { overflow-wrap: anywhere; }
+.editor { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
+.saveBar { position: sticky; bottom: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface2); box-shadow: 0 8px 32px #0003; font-size: 13px; }
+@media (max-width: 650px) { .hero { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; } .hero p { max-width: none; } .toolbar { grid-template-columns: 1fr; } .editor { grid-template-columns: 1fr; } .card, .configRow { padding: 16px; } .actions { justify-content: flex-start; } }
+
+.updateAction { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }

apps/web/src/features/social/ChatConversation.tsx

@@ -0,0 +1,132 @@
+import { CHAT_REACTIONS, chatDraftKey, uuidv7, type ChatMessageUpdate, type DirectMessage, type SocialPerson, type socialApi } from '@pipu/core';
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { Fragment, useEffect, useRef, useState, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDesktop } from '../../desktop';
+import { useErrorText } from '../../shared/lib/errors';
+import { arrowBackIcon, arrowDownIcon, arrowUpIcon, chatIcon, closeIcon, moreIcon, musicIcon, searchIcon, smileIcon } from '../../shared/ui/icons';
+import { Button, EmptyState, Field, FormError, Icon, Menu, Skeleton } from '../../shared/ui/ui';
+import { ListenTogetherButton } from './Listening';
+import { ChatMusic, MessageText } from './ChatMusic';
+import { Presence } from './Presence';
+import s from './social.module.css';
+
+export function ChatConversation({ person, api, queryKey, userId, active = true, onBack, actions }: {
+  person: SocialPerson; api: ReturnType<typeof socialApi>; queryKey: readonly unknown[]; userId: string; active?: boolean; onBack?: () => void; actions?: ReactNode;
+}) {
+  const { t, i18n } = useTranslation();
+  const cache = useQueryClient();
+  const errorText = useErrorText();
+  const server = useDesktop()?.server ?? window.location.origin;
+  const draftKey = chatDraftKey(server, userId, person.id);
+  const [text, setText] = useState(() => { try { return localStorage.getItem(draftKey) ?? ''; } catch { return ''; } });
+  const [reply, setReply] = useState<DirectMessage | null>(null);
+  const [editing, setEditing] = useState<DirectMessage | null>(null);
+  const [view, setView] = useState<'conversation' | 'music'>('conversation');
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [q, setQ] = useState('');
+  const [emojis, setEmojis] = useState(false);
+  const [atBottom, setAtBottom] = useState(true);
+  const beforeEdit = useRef('');
+  const pending = useRef<{ id: string; text: string; reply_to?: string } | null>(null);
+  const typedAt = useRef(0);
+  const composer = useRef<HTMLTextAreaElement>(null);
+  const scroll = useRef<HTMLDivElement>(null);
+  const previousLast = useRef<number | undefined>(undefined);
+  const [visible, setVisible] = useState(document.visibilityState === 'visible');
+  const music = view === 'music';
+  useEffect(() => { const change = () => setVisible(document.visibilityState === 'visible'); document.addEventListener('visibilitychange', change); return () => document.removeEventListener('visibilitychange', change); }, []);
+  useEffect(() => { const timer = setTimeout(() => setQ(search.trim()), 250); return () => clearTimeout(timer); }, [search]);
+  useEffect(() => {
+    if (editing) return;
+    try { if (text) localStorage.setItem(draftKey, text); else localStorage.removeItem(draftKey); } catch { /* Storage may be unavailable in private mode. */ }
+  }, [text, draftKey, editing]);
+  useEffect(() => {
+    const timer = setTimeout(() => { void api.typing(person.id, active && visible && !music && !!text.trim() && !editing && Date.now() - typedAt.current < 6000).catch(() => undefined); }, 400);
+    return () => clearTimeout(timer);
+  }, [text, active, visible, editing, music, person.id, api]);
+  useEffect(() => () => { void api.typing(person.id, false).catch(() => undefined); }, [api, person.id]);
+  useEffect(() => { if (composer.current) { composer.current.style.height = 'auto'; composer.current.style.height = `${Math.min(composer.current.scrollHeight, 144)}px`; } }, [text, music, active]);
+  const meta = useQuery({ queryKey: [...queryKey, 'typing', person.id], queryFn: () => api.chatMeta(person.id), enabled: active && visible && !music, refetchInterval: active && visible && !music ? 2000 : false });
+  const messages = useInfiniteQuery({ queryKey: [...queryKey, 'chat', person.id, q, music], initialPageParam: undefined as number | undefined,
+    queryFn: ({ pageParam }) => api.messages(person.id, pageParam, q, music), getNextPageParam: last => last.length === 50 ? last[0]?.seq : undefined,
+    enabled: active && visible, refetchInterval: active && visible ? 3000 : false });
+  const list = [...(messages.data?.pages ?? [])].reverse().flat();
+  const last = list.at(-1)?.seq;
+  const firstUnread = list.find(m => m.sender_id !== userId && !m.read)?.id;
+  useEffect(() => {
+    const el = scroll.current;
+    if (el && active && !q && !music && (atBottom || previousLast.current === undefined)) el.scrollTop = el.scrollHeight;
+    previousLast.current = last;
+  }, [last, active, q, music]);
+  useEffect(() => {
+    const el = scroll.current;
+    const latestVisible = el && el.scrollHeight - el.scrollTop - el.clientHeight < 64;
+    if (last && firstUnread && latestVisible && visible && active && !q && !music && atBottom) void api.action({ action: 'read_chat', target_id: person.id, up_to_seq: last }).then(() => cache.invalidateQueries({ queryKey })).catch(() => undefined);
+  }, [last, firstUnread, visible, active, q, music, atBottom, api, person.id, cache, messages.dataUpdatedAt]);
+  const refresh = () => cache.invalidateQueries({ queryKey });
+  const update = useMutation({ mutationFn: (input: { id: string; body: ChatMessageUpdate }) => api.updateMessage(person.id, input.id, input.body), onSuccess: refresh });
+  const send = useMutation({ mutationFn: async () => {
+    if (editing) { await api.updateMessage(person.id, editing.id, { action: 'edit', text }); return; }
+    if (!pending.current || pending.current.text !== text || pending.current.reply_to !== reply?.id) pending.current = { id: uuidv7(), text, ...(reply ? { reply_to: reply.id } : {}) };
+    await api.send(person.id, { ...pending.current, attachment_kind: 'none' });
+  }, onSuccess: async () => { setText(editing ? beforeEdit.current : ''); setEditing(null); setReply(null); pending.current = null; setAtBottom(true); await refresh(); if (scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight; composer.current?.focus(); } });
+  const cancelEdit = () => { setText(beforeEdit.current); setEditing(null); };
+  const mutate = (id: string, body: ChatMessageUpdate) => { if (!update.isPending) update.mutate({ id, body }); };
+  const changeView = (next: typeof view) => { setView(next); setSearch(''); setQ(''); setSearchOpen(false); previousLast.current = undefined; setAtBottom(true); };
+  const older = async () => {
+    const el = scroll.current;
+    const height = el?.scrollHeight ?? 0;
+    const top = el?.scrollTop ?? 0;
+    await messages.fetchNextPage();
+    requestAnimationFrame(() => { if (el) el.scrollTop = top + el.scrollHeight - height; });
+  };
+  return <section className={s.chat} aria-label={t('social.chat')}>
+    <header className={s.chatHeader}>
+      {onBack && <Button className={`${s.iconButton} ${s.backButton}`} variant="ghost" icon={arrowBackIcon} aria-label={t('social.back_to_messages')} onClick={onBack} />}
+      <span className={`${s.avatar} ${person.online ? s.avatarListening : ''}`} aria-hidden>{person.display_name.slice(0, 1).toUpperCase()}</span>
+      <div className={s.chatIdentity}><h2>{person.display_name}</h2><Presence online={person.online} /></div>
+      <div className={s.chatTools}><ListenTogetherButton person={person} /><Button variant="ghost" className={s.iconButton} icon={searchIcon} aria-label={t('social.chat_search')} aria-expanded={searchOpen} onClick={() => { setSearchOpen(v => !v); setSearch(''); setQ(''); }} />{actions}</div>
+    </header>
+    {person.activity && <div className={s.nowListening}><Icon src={musicIcon} size={18} /><div><span>{t('social.listening')}</span><Link to="/track/$id" params={{ id: person.activity.track_id }}>{person.activity.track_title}{person.activity.artist ? ` · ${person.activity.artist}` : ''}</Link>{person.activity.context === 'playlist' && person.activity.playlist_id && <Link to="/activity/playlist/$userId" params={{ userId: person.id }}>{t('social.from_playlist', { name: person.activity.playlist_name ?? '' })}</Link>}</div></div>}
+    <nav className={s.chatTabs} aria-label={t('social.conversation_content')}><button type="button" aria-pressed={!music} onClick={() => changeView('conversation')}><Icon src={chatIcon} size={16} />{t('social.conversation')}</button><button type="button" aria-pressed={music} onClick={() => changeView('music')}><Icon src={musicIcon} size={16} />{t('social.shared_music')}</button></nav>
+    {searchOpen && <div className={s.chatSearch}><Field label={t('social.chat_search')} value={search} onChange={setSearch} type="search" maxLength={100} autoFocus /><Button variant="ghost" icon={closeIcon} className={s.iconButton} aria-label={t('social.close_search')} onClick={() => { setSearchOpen(false); setSearch(''); setQ(''); }} /></div>}
+    <FormError>{messages.error || send.error || update.error ? errorText(messages.error ?? send.error ?? update.error) : null}</FormError>
+    <div ref={scroll} className={`${s.messages} ${music ? s.musicMessages : ''}`} onScroll={e => { const el = e.currentTarget; setAtBottom(el.scrollHeight - el.scrollTop - el.clientHeight < 64); }}>
+      {messages.hasNextPage && <Button className={s.older} busy={messages.isFetchingNextPage} onClick={() => void older()}>{t('social.older')}</Button>}
+      {messages.isPending && <div className={s.chatSkeleton} role="status" aria-label={t('social.loading')}><Skeleton style={{ height: 70, width: '70%' }} /><Skeleton style={{ height: 46, width: '55%', alignSelf: 'end' }} /><Skeleton style={{ height: 80, width: '65%' }} /></div>}
+      {!list.length && messages.isSuccess && <EmptyState icon={music ? musicIcon : chatIcon}>{t(q ? 'social.chat_no_results' : music ? 'social.no_shared_music' : 'social.first_message')}</EmptyState>}
+      {list.map((m, i) => <Fragment key={m.id}>
+        {(i === 0 || new Date(list[i - 1]!.created_at).toDateString() !== new Date(m.created_at).toDateString()) && <time className={s.date}>{new Date(m.created_at).toLocaleDateString(i18n.language, { day: 'numeric', month: 'long', year: 'numeric' })}</time>}
+        {m.id === firstUnread && !q && !music && <div className={s.newMessages}>{t('social.new_messages')}</div>}
+        <article id={`message-${m.id}`} className={`${s.bubble} ${m.sender_id === userId ? s.mine : ''} ${m.deleted ? s.deleted : ''} ${music ? s.mediaBubble : ''}`}>
+          {m.reply_to && !music && <blockquote className={s.quote}>{m.reply_preview || t('social.message_deleted')}</blockquote>}
+          {(m.deleted || m.text && m.attachment_kind === 'none') && <div className={s.messageText}>{m.deleted ? t('social.message_deleted') : <MessageText text={m.text} />}</div>}
+          {!m.deleted && m.attachment_id && m.attachment_kind !== 'none' && <ChatMusic message={m} scope={queryKey} />}
+          {!m.deleted && !!m.reactions?.length && <div className={s.reactions}>{m.reactions.map(r => <button key={r.emoji} type="button" aria-pressed={r.mine} disabled={update.isPending} onClick={() => mutate(m.id, { action: 'react', emoji: r.emoji as typeof CHAT_REACTIONS[number] })}>{r.emoji} {r.count}</button>)}</div>}
+          <div className={s.messageFoot}><small className={s.muted}>{new Date(m.created_at).toLocaleTimeString(i18n.language, { hour: '2-digit', minute: '2-digit' })}{m.edited_at && !m.deleted ? ` · ${t('social.edited')}` : ''}{m.sender_id === userId ? ` · ${t(m.read ? 'social.read' : 'social.sent')}` : ''}</small>
+            {!m.deleted && <Menu portal label={t('social.message_actions')} trigger={<Icon src={moreIcon} size={18} />} items={[
+              { label: t('social.reply'), onSelect: () => { changeView('conversation'); if (editing) cancelEdit(); setReply(m); requestAnimationFrame(() => composer.current?.focus()); } },
+              ...CHAT_REACTIONS.map(emoji => ({ label: emoji, onSelect: () => mutate(m.id, { action: 'react', emoji }) })),
+              ...(m.sender_id === userId ? [{ label: t('social.edit_message'), onSelect: () => { changeView('conversation'); beforeEdit.current = text; setEditing(m); setReply(null); setText(m.text); requestAnimationFrame(() => composer.current?.focus()); } }, { label: t('social.delete_message'), danger: true, onSelect: () => mutate(m.id, { action: 'delete' }) }] : []),
+            ]} />}
+          </div>
+        </article>
+      </Fragment>)}
+      {send.isPending && !!text.trim() && !editing && !music && !list.some(m => m.id === pending.current?.id) && <article className={`${s.bubble} ${s.mine} ${s.sending}`} role="status">{text} · …</article>}
+    </div>
+    {!atBottom && !music && <Button className={s.jumpToBottom} icon={arrowDownIcon} onClick={() => { if (scroll.current) scroll.current.scrollTop = scroll.current.scrollHeight; setAtBottom(true); }}>{t('social.latest_messages')}</Button>}
+    {!music && <>
+      <div className={s.typing} role="status" aria-live="polite">{active && meta.data?.typing ? <><span className={s.typingDots} aria-hidden><i /><i /><i /></span>{person.display_name} {t('social.typing')}</> : null}</div>
+      {(reply || editing) && <div className={s.replyBar}><div><small>{t(editing ? 'social.editing' : 'social.replying')}</small><p>{(editing ?? reply)?.text}</p></div><Button variant="ghost" icon={closeIcon} className={s.iconButton} onClick={() => editing ? cancelEdit() : setReply(null)} aria-label={t(editing ? 'social.cancel_edit' : 'social.cancel_reply')} /></div>}
+      {emojis && <div className={s.emojiPicker}>{CHAT_REACTIONS.map(emoji => <button key={emoji} type="button" aria-label={emoji} onClick={() => { setText(v => (v + emoji).slice(0, 4000)); setEmojis(false); composer.current?.focus(); }}>{emoji}</button>)}</div>}
+      <form className={s.composer} onSubmit={e => { e.preventDefault(); if (text.trim() && !send.isPending) send.mutate(); }}>
+        <Button variant="ghost" icon={smileIcon} className={s.iconButton} aria-label={t('social.emoji')} aria-expanded={emojis} onClick={() => setEmojis(v => !v)} />
+        <textarea ref={composer} aria-label={t('social.message')} placeholder={t('social.message_placeholder')} maxLength={4000} rows={1} value={text} disabled={send.isPending} onChange={e => { typedAt.current = Date.now(); setText(e.target.value); }} onKeyDown={e => { if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) { e.preventDefault(); if (text.trim() && !send.isPending) send.mutate(); } }} />
+        <Button type="submit" variant="primary" className={s.iconButton} icon={arrowUpIcon} aria-label={t(editing ? 'playlists.save' : 'social.send')} busy={send.isPending} disabled={!text.trim()} />
+      </form>
+    </>}
+  </section>;
+}

apps/web/src/features/social/ChatMusic.test.tsx

@@ -0,0 +1,33 @@
+import { createI18n } from '@pipu/i18n';
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { I18nextProvider } from 'react-i18next';
+import { afterEach, describe, expect, it } from 'vitest';
+import { MessageText } from './ChatMusic';
+
+afterEach(cleanup);
+
+describe('message text', () => {
+  it('compacts a long URL while preserving its full destination when text is collapsed', async () => {
+    const i18n = await createI18n('ru');
+    const url = `https://example.com/music/${'long-path-'.repeat(90)}?share=abc`;
+    render(<I18nextProvider i18n={i18n}><MessageText text={`Послушай ${url}`} /></I18nextProvider>);
+    expect(screen.getByRole('link')).toHaveAttribute('href', url);
+    expect(screen.getByRole('link').textContent!.length).toBeLessThan(65);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: 'Показать полностью' }));
+    expect(screen.getByRole('link')).toHaveAttribute('href', url);
+    expect(screen.getByRole('button', { name: 'Свернуть текст' })).toHaveAttribute('aria-expanded', 'true');
+  });
+
+  it('keeps encoded text and markup literal, with expansion for long messages', async () => {
+    const i18n = await createI18n('ru');
+    const text = `<script>alert(1)</script> ${'%D0%BC%20'.repeat(100)}`;
+    const { container } = render(<I18nextProvider i18n={i18n}><MessageText text={text} /></I18nextProvider>);
+    expect(container.querySelector('script')).toBeNull();
+    expect(container.textContent).toContain('%D0%BC%20');
+    expect(screen.queryByRole('link')).not.toBeInTheDocument();
+    await userEvent.setup().click(screen.getByRole('button', { name: 'Показать полностью' }));
+    expect(container.textContent).toContain(text);
+  });
+});

apps/web/src/features/social/ChatMusic.tsx

@@ -0,0 +1,63 @@
+import { unwrap, type DirectMessage } from '@pipu/core';
+import { useQuery } from '@tanstack/react-query';
+import { Link } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { useSession } from '../../app/session';
+import { Cover } from '../../entities/catalog';
+import { usePlayer, usePlayerState } from '../../player/context';
+import { formatDuration } from '../../shared/lib/format';
+import { musicIcon, pauseIcon, playIcon, queueIcon } from '../../shared/ui/icons';
+import { Button, Icon } from '../../shared/ui/ui';
+import s from './social.module.css';
+
+/** Catalog reads stay in the client adapter; message text is never decoded into metadata. */
+export function ChatMusic({ message, scope }: { message: DirectMessage; scope: readonly unknown[] }) {
+  const { t } = useTranslation();
+  const session = useSession();
+  const player = usePlayer();
+  const state = usePlayerState();
+  const id = message.attachment_id!;
+  const track = useQuery({ queryKey: [...scope, 'attachment', 'track', id], staleTime: 60_000, retry: false,
+    enabled: message.attachment_kind === 'track', queryFn: async () => unwrap(await session.client.GET('/api/v1/tracks/{id}', { params: { path: { id } } })) });
+  const playlist = useQuery({ queryKey: [...scope, 'attachment', 'playlist', id], retry: false,
+    enabled: message.attachment_kind === 'playlist', queryFn: async () => unwrap(await session.client.GET('/api/v1/shared/playlists/{shareId}', { params: { path: { shareId: id } } })) });
+  const isTrack = message.attachment_kind === 'track';
+  const query = isTrack ? track : playlist;
+  const tr = !track.isError ? track.data : undefined;
+  const pl = !playlist.isError ? playlist.data : undefined;
+  const metadataTitle = isTrack ? tr?.title : pl?.name;
+  const title = metadataTitle || message.text || t(isTrack ? 'social.shared_track' : 'social.shared_playlist');
+  const album = isTrack ? tr?.album : pl?.tracks[0]?.album;
+  const current = !!tr && tr.id === state.track?.id;
+  const available = !query.isError && (isTrack ? tr?.available : pl?.tracks.some(x => x.available));
+  const subtitle = query.isError ? t('social.attachment_unavailable') : isTrack ? tr ? `${tr.artists.map(a => a.name).join(', ')} · ${formatDuration(tr.duration_ms)}` : t('social.shared_track') : t('social.shared_playlist');
+  return <><div className={`${s.musicCard} ${query.isError ? s.musicUnavailable : ''}`}>
+    {album ? <Cover album={album} size={48} /> : <span className={s.musicCover}><Icon src={isTrack ? musicIcon : queueIcon} size={24} /></span>}
+    <div className={s.musicInfo}>
+      <Link to={isTrack ? '/track/$id' : '/shared/playlist/$shareId'} params={{ id, shareId: id }} aria-label={t(isTrack ? 'social.listen_track' : 'social.listen_playlist')} title={title}>{title}</Link>
+      <span>{subtitle}</span>
+    </div>
+    <Button variant="ghost" className={s.iconButton} icon={current && state.playing ? pauseIcon : playIcon} aria-label={t(current && state.playing ? 'player.pause' : 'catalog.play')} disabled={!available || state.listening?.locked} onClick={() => {
+      if (isTrack && tr) { if (current) player.toggle(); else player.playList([tr], 0, { type: 'queue' }); }
+      else if (pl) player.playList(pl.tracks.filter(x => x.available), 0, { type: 'queue' });
+    }} />
+  </div>{message.text && message.text.trim() !== metadataTitle?.trim() && <span className={s.attachmentCaption}><MessageText text={message.text} /></span>}</>;
+}
+
+/** Compact only actual HTTP(S) URLs. Arbitrary encoded text remains literal. */
+export function MessageText({ text }: { text: string }) {
+  const { t } = useTranslation();
+  const [expanded, setExpanded] = useState(false);
+  const long = text.length > 600;
+  const shown = long && !expanded ? `${text.slice(0, 400)}…` : text;
+  const originalParts = text.split(/(https?:\/\/[^\s<>]+)/g);
+  return <>{shown.split(/(https?:\/\/[^\s<>]+)/g).map((part, i) => {
+    if (!/^https?:\/\//.test(part)) return part;
+    try {
+      const original = originalParts[i] ?? part;
+      const url = new URL(original);
+      return <a key={i} href={url.href} target="_blank" rel="noopener noreferrer" title={original}>{url.hostname}{url.pathname === '/' ? '' : `${url.pathname.slice(0, 34)}${url.pathname.length > 34 || url.search ? '…' : ''}`}</a>;
+    } catch { return part; }
+  })}{long && <button type="button" className={s.expandText} aria-expanded={expanded} onClick={() => setExpanded(v => !v)}>{t(expanded ? 'social.show_less' : 'social.show_more')}</button>}</>;
+}

apps/web/src/features/social/Listening.tsx

@@ -0,0 +1,63 @@
+import { socialApi, uuidv7, type ListeningPreferences, type SocialPerson } from '@pipu/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useSession, useUser } from '../../app/session';
+import { useDesktop } from '../../desktop';
+import { usePlayer, usePlayerState } from '../../player/context';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Dialog, FormError } from '../../shared/ui/ui';
+import { waveHeadphonesIcon } from '../../shared/ui/icons';
+import s from './social.module.css';
+
+function useListening() {
+  const session = useSession(); const user = useUser(); const server = useDesktop()?.server ?? '';
+  const api = useMemo(() => socialApi(session), [session]);
+  const key = ['listening', server, user.id] as const;
+  const query = useQuery({ queryKey: key, queryFn: api.listening, refetchInterval: 3000 });
+  return { api, key, query, user };
+}
+export function ListeningPanel({ showPreferences = true, showRequests = true }: { showPreferences?: boolean; showRequests?: boolean }) {
+  const { t } = useTranslation(); const errorText = useErrorText(); const cache = useQueryClient();
+  const { api, key, query, user } = useListening();
+  const prefs = query.data?.preferences;
+  const save = useMutation({ mutationFn: (body: ListeningPreferences) => api.setListeningPreferences(body), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  const action = useMutation({ mutationFn: (input: { action: 'accept' | 'decline' | 'cancel'; target: string }) => api.listeningAction({ id: uuidv7(), action: input.action, target_id: input.target }), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  return <div className={s.stack}>
+    {showPreferences && <details className={s.privacy}><summary>{t('social.together')}</summary><p className={s.muted}>{t('social.stream_prefs_hint')}</p>
+      {(['requests', 'auto_accept'] as const).map(field => <fieldset key={field} className={s.privacy} disabled={!prefs || save.isPending}><legend>{t(field === 'requests' ? 'social.stream_requests' : 'social.stream_auto')}</legend><div className={s.actions}>{(['nobody', 'friends', 'everyone'] as const).map(v => <Button key={v} aria-pressed={(prefs?.[field] ?? 'nobody') === v} variant={(prefs?.[field] ?? 'nobody') === v ? 'primary' : 'ghost'} onClick={() => prefs && save.mutate({ ...prefs, [field]: v })}>{t(`social.visibility_${v}`)}</Button>)}</div></fieldset>)}
+      <label><input type="checkbox" checked={prefs?.autoplay ?? true} disabled={!prefs || save.isPending} onChange={e => prefs && save.mutate({ ...prefs, autoplay: e.target.checked })} /> {t('social.stream_autoplay')}</label>
+    </details>}
+    {showRequests && query.data?.requests.map(r => <article key={r.id} className={s.person}><strong>{r.recipient_id === user.id ? t(r.kind === 'join' ? 'social.stream_incoming_join' : 'social.stream_incoming_invite', { name: r.sender_name }) : t('social.stream_pending')}</strong><div className={s.actions}>{r.recipient_id === user.id ? <><Button disabled={action.isPending} onClick={() => action.mutate({ action: 'accept', target: r.id })}>{t('social.accept')}</Button><Button disabled={action.isPending} variant="ghost" onClick={() => action.mutate({ action: 'decline', target: r.id })}>{t('social.decline')}</Button></> : <Button disabled={action.isPending} variant="ghost" onClick={() => action.mutate({ action: 'cancel', target: r.id })}>{t('form.cancel')}</Button>}</div></article>)}
+    <FormError>{query.error || save.error || action.error ? errorText(query.error ?? save.error ?? action.error) : null}</FormError>
+  </div>;
+}
+export function ListenTogetherButton({ person }: { person: SocialPerson }) {
+  const { t } = useTranslation(); const [open, setOpen] = useState(false);
+  useEffect(() => { if (!person.online) setOpen(false); }, [person.online]);
+  return <><Button disabled={!person.online} title={!person.online ? t('social.together_offline') : undefined} variant="ghost" icon={waveHeadphonesIcon} aria-label={t('social.together')} onClick={() => setOpen(true)}><span className={s.togetherLabel}>{t('social.together')}</span></Button>{open && person.online && <ListenTogetherDialog person={person} close={() => setOpen(false)} />}</>;
+}
+function ListenTogetherDialog({ person, close }: { person: SocialPerson; close: () => void }) {
+  const { t } = useTranslation(); const errorText = useErrorText(); const cache = useQueryClient();
+  const { api, key } = useListening(); const state = usePlayerState();
+  const [kind, setKind] = useState<'join' | 'invite'>(person.activity ? 'join' : 'invite');
+  const [id] = useState(uuidv7);
+  const action = useMutation({ mutationFn: () => api.listeningAction({ id, action: kind, target_id: person.id }), onSuccess: () => { close(); void cache.invalidateQueries({ queryKey: key }); } });
+  return <Dialog title={t('social.together')} onClose={close}><strong>{person.display_name}</strong><fieldset className={s.privacy} disabled={action.isPending || action.isSuccess}><legend>{t('social.stream_choice')}</legend>
+    <label className={s.choice}><input type="radio" checked={kind === 'join'} disabled={!person.activity} onChange={() => setKind('join')} />{t('social.join_stream')}</label>
+    <label className={s.choice}><input type="radio" checked={kind === 'invite'} disabled={!state.track || state.listening?.locked} onChange={() => setKind('invite')} />{t('social.invite_stream')}</label>
+  </fieldset><p className={s.muted}>{t('social.stream_hint')}</p>
+    <FormError>{action.error ? errorText(action.error) : null}</FormError>
+    {action.isSuccess ? <p role="status">{t(kind === 'join' ? 'social.stream_request_sent' : 'social.stream_invite_sent')}</p> : <Button variant="primary" busy={action.isPending} disabled={kind === 'join' ? !person.activity : !state.track || state.listening?.locked} onClick={() => action.mutate()}>{t('social.send')}</Button>}
+  </Dialog>;
+}
+export function ListeningBanner() {
+  const { t } = useTranslation(); const state = usePlayerState(); const player = usePlayer();
+  const session = useSession(); const errorText = useErrorText(); const room = state.listening?.room;
+  const action = useMutation({ mutationFn: async () => room && socialApi(session).listeningAction({ id: uuidv7(), action: room.owner_id === (session.state.status === 'signed_in' ? session.state.user.id : '') ? 'end' : 'leave', target_id: room.id }) });
+  if (!room) return null;
+  return <section className={s.stream} aria-label={t('social.together')}><div><strong>{t(state.listening?.locked ? 'social.stream_following' : 'social.stream_host', { name: room.owner_name })}</strong><p className={s.muted}>{t(state.listening?.disconnected ? 'social.stream_lost' : state.listening?.needsStart ? 'social.stream_waiting_audio' : 'social.stream_controls')}</p><details><summary>{t('social.stream_listeners', { count: Math.max(0, room.participants.length - 1) })}</summary>{room.participants.map(p => <div key={p.id}>{p.name}</div>)}</details></div>
+    <div className={s.actions}>{state.listening?.locked && !state.playing && !state.listening.disconnected && <Button onClick={() => player.beginListeningAudio()}>{t('social.stream_start_audio')}</Button>}<Button busy={action.isPending} variant="ghost" onClick={() => action.mutate()}>{t(room.owner_id === (session.state.status === 'signed_in' ? session.state.user.id : '') ? 'social.stream_end' : 'social.stream_leave')}</Button></div>
+    <FormError>{action.error ? errorText(action.error) : null}</FormError>
+  </section>;
+}

apps/web/src/features/social/MiniSocial.tsx

@@ -0,0 +1,74 @@
+import { useEffect, useRef, useState } from 'react';
+import { useRouterState, useNavigate } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+import { Button, EmptyState, FormError, Icon } from '../../shared/ui/ui';
+import { chatIcon, closeIcon, groupIcon, searchIcon } from '../../shared/ui/icons';
+import { useErrorText } from '../../shared/lib/errors';
+import { ChatConversation } from './ChatConversation';
+import { Presence } from './Presence';
+import { useSocialDialogOpen } from './Social';
+import { useSocial } from './queries';
+import s from './social.module.css';
+
+/** Lives in the shell so browsing and minimizing never change the selected conversation. */
+export function MiniSocial() {
+  const { t } = useTranslation();
+  const { api, inbox, key, user } = useSocial();
+  const errorText = useErrorText();
+  const navigate = useNavigate();
+  const pathname = useRouterState({ select: state => state.location.pathname });
+  const dialogOpen = useSocialDialogOpen();
+  const [desktop, setDesktop] = useState(() => window.matchMedia?.('(min-width: 1024px)').matches ?? false);
+  const [open, setOpen] = useState(false);
+  const [peer, setPeer] = useState('');
+  const [search, setSearch] = useState('');
+  const trigger = useRef<HTMLButtonElement>(null);
+  const panel = useRef<HTMLElement>(null);
+  const shown = desktop && pathname !== '/friends';
+  useEffect(() => {
+    const media = window.matchMedia?.('(min-width: 1024px)');
+    if (!media) return;
+    const change = () => setDesktop(media.matches);
+    media.addEventListener('change', change);
+    return () => media.removeEventListener('change', change);
+  }, []);
+  useEffect(() => {
+    if (open && shown) panel.current?.querySelector<HTMLInputElement>('input')?.focus();
+  }, [open, shown]);
+  const friends = (inbox.data?.people ?? []).filter(person => person.relationship === 'friend');
+  const selected = friends.find(person => person.id === peer);
+  const unread = friends.reduce((sum, person) => sum + person.unread, 0);
+  const filtered = [...friends].sort((a, b) => Number(b.online) - Number(a.online) || (b.last_message?.created_at ?? '').localeCompare(a.last_message?.created_at ?? '') || a.display_name.localeCompare(b.display_name))
+    .filter(person => `${person.display_name} ${person.username}`.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase()));
+  const minimize = () => { setOpen(false); trigger.current?.focus(); };
+  if (!shown) return null;
+  return <aside className={`${s.miniDock} ${user.ui_prefs.web_player === 'island' ? s.miniDockIsland : ''}`} aria-label={t('social.mini_chat')}>
+    <section hidden={!open} ref={panel} id="mini-social-panel" className={s.miniPanel} aria-label={t('social.title')}
+      onKeyDown={event => { if (event.key === 'Escape' && !event.defaultPrevented && !dialogOpen) { event.stopPropagation(); minimize(); } }}>
+      <header className={s.miniHeader}>
+        <strong>{t('social.title')}</strong>
+        <Button variant="ghost" onClick={() => { setOpen(false); void navigate({ to: '/friends', search: selected ? { peer: selected.id, tab: 'messages' } : {} }); }}>{t('social.open_full')}</Button>
+        <Button variant="ghost" icon={closeIcon} aria-label={t('social.minimize_chat')} onClick={minimize} />
+      </header>
+      <FormError>{inbox.error ? errorText(inbox.error) : null}</FormError>
+      <div className={s.miniWorkspace}>
+        <div className={s.miniFriends}>
+          <label className={s.listSearch}><Icon src={searchIcon} size={16} /><input aria-label={t('social.find_conversation')} placeholder={t('social.find_conversation')} value={search} onChange={event => setSearch(event.target.value)} /></label>
+          {inbox.isPending && <p className={s.muted}>{t('social.loading')}</p>}
+          {inbox.isSuccess && !filtered.length && <p className={s.muted}>{t(search ? 'social.no_results' : 'social.no_friends_share')}</p>}
+          {filtered.map(person => <button key={person.id} type="button" className={`${s.dialogRow} ${peer === person.id ? s.selected : ''}`} aria-pressed={peer === person.id} onClick={() => setPeer(person.id)}>
+            <span className={`${s.avatar} ${person.online ? s.avatarListening : ''}`} aria-hidden>{person.display_name.slice(0, 1).toUpperCase()}</span>
+            <span className={s.dialogBody}><strong>{person.display_name}</strong><Presence online={person.online} /></span>
+            {person.unread > 0 && <span className={s.badge}>{person.unread}</span>}
+          </button>)}
+        </div>
+        {selected ? <ChatConversation key={selected.id} person={selected} api={api} queryKey={key} userId={user.id} active={open && !dialogOpen} />
+          : <div className={s.welcome}><EmptyState icon={groupIcon}>{t('social.choose_chat')}</EmptyState></div>}
+      </div>
+    </section>
+    <button ref={trigger} type="button" className={s.miniTrigger} aria-label={t('social.mini_chat')} title={t('social.mini_chat')} aria-expanded={open} aria-controls="mini-social-panel" onClick={() => setOpen(value => !value)}>
+      <Icon src={open ? closeIcon : chatIcon} size={22} />
+      {unread > 0 && <span className={s.badge}>{unread > 99 ? '99+' : unread}</span>}
+    </button>
+  </aside>;
+}

apps/web/src/features/social/NotificationsDialog.tsx

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { useErrorText } from '../../shared/lib/errors';
+import { checkIcon, chevronRightIcon, inboxIcon } from '../../shared/ui/icons';
+import { Dialog, EmptyState, FormError, Icon, Skeleton } from '../../shared/ui/ui';
+import { useSocial } from './queries';
+import s from './notifications.module.css';
+
+export function NotificationsDialog({ onClose, onOpen }: { onClose: () => void; onOpen: (id: string) => void }) {
+  const { t, i18n } = useTranslation();
+  const { api, inbox, key } = useSocial();
+  const cache = useQueryClient();
+  const errorText = useErrorText();
+  const [unreadOnly, setUnreadOnly] = useState(false);
+  const read = useMutation({ mutationFn: (id: string) => api.action({ action: 'read_notification', target_id: id }), onSuccess: () => cache.invalidateQueries({ queryKey: key }) });
+  const events = inbox.data?.notifications ?? [];
+  const unread = events.filter(event => !event.read).length;
+  const shown = unreadOnly ? events.filter(event => !event.read) : events;
+  return <Dialog title={t('social.notifications')} onClose={onClose} className={s.dialog}>
+    <nav className={s.filters} aria-label={t('social.notifications')}>
+      <button type="button" aria-pressed={!unreadOnly} onClick={() => setUnreadOnly(false)}>{t('social.notifications_all')}</button>
+      <button type="button" aria-pressed={unreadOnly} onClick={() => setUnreadOnly(true)}>{t('social.notifications_unread')}{unread > 0 && <span className={s.count}>{unread}</span>}</button>
+    </nav>
+    <FormError>{read.error || inbox.error ? errorText(read.error ?? inbox.error) : null}</FormError>
+    <div className={s.list} tabIndex={0} role="region" aria-label={t('social.notifications')}>
+      {inbox.isPending && <div className={s.loading} role="status" aria-label={t('social.loading')}>{[0, 1, 2].map(value => <Skeleton key={value} style={{ height: 68 }} />)}</div>}
+      {inbox.isSuccess && !shown.length && <div className={s.empty}><EmptyState icon={unreadOnly ? checkIcon : inboxIcon}>{t(unreadOnly ? 'social.notifications_caught_up' : 'social.no_notifications')}</EmptyState></div>}
+      {shown.map(event => {
+        const date = new Date(event.created_at);
+        return <article key={event.id} className={`${s.row} ${!event.read ? s.unread : ''}`}>
+          <button type="button" className={s.open} aria-label={t('social.open_notification', { name: event.actor_name })} onClick={() => { if (!event.read) read.mutate(event.id); onOpen(event.actor_id); }}>
+            <span className={s.avatar} aria-hidden>{event.actor_name.slice(0, 1).toUpperCase()}</span>
+            <span className={s.content}><strong>{event.actor_name}</strong><span>{t(`social.kind_${event.kind}`)}</span>
+              <time dateTime={event.created_at} title={date.toLocaleString(i18n.language)}>{date.toLocaleString(i18n.language, { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}</time>
+            </span>
+            <Icon src={chevronRightIcon} size={18} className={s.arrow} />
+          </button>
+          {!event.read && <button type="button" className={s.read} disabled={read.isPending} aria-label={t('social.mark_read')} title={t('social.mark_read')} onClick={() => read.mutate(event.id)}><span className={s.dot} /><Icon src={checkIcon} size={18} /></button>}
+        </article>;
+      })}
+    </div>
+  </Dialog>;
+}

apps/web/src/features/social/Presence.tsx

@@ -0,0 +1,7 @@
+import { useTranslation } from 'react-i18next';
+import s from './social.module.css';
+
+export function Presence({ online }: { online: boolean }) {
+  const { t } = useTranslation();
+  return <span className={`${s.presence} ${online ? s.presenceOnline : ''}`}><span className={s.presenceDot} aria-hidden />{t(online ? 'social.online' : 'social.offline')}</span>;
+}

apps/web/src/features/social/Social.tsx

@@ -0,0 +1,210 @@
+import { uuidv7, type ActivityVisibility, type MusicAttachment, type SocialAction, type SocialPerson } from '@pipu/core';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { Link, useNavigate } from '@tanstack/react-router';
+import { createContext, useCallback, useContext, useEffect, useRef, useState, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Dialog, EmptyState, FormError, Icon, Menu, Skeleton } from '../../shared/ui/ui';
+import { addIcon, groupIcon, inboxIcon, moreIcon, musicIcon, searchIcon, shieldIcon, visibilityOffIcon } from '../../shared/ui/icons';
+import s from './social.module.css';
+import { ListeningPanel, ListenTogetherButton } from './Listening';
+import { ChatConversation } from './ChatConversation';
+import { Presence } from './Presence';
+import { useSocial } from './queries';
+import { NotificationsDialog } from './NotificationsDialog';
+
+export function useSocialUnread() { return useSocial().inbox.data?.unread ?? 0; }
+
+export function FriendRecommendations() {
+  const { api, inbox, key } = useSocial(); const cache = useQueryClient(); const { t } = useTranslation(); const errorText = useErrorText();
+  const save = useMutation({ mutationFn: api.setFriendsRecommendations, onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  return <div><label><input type="checkbox" checked={inbox.data?.friends_recommendations ?? true} disabled={!inbox.data || save.isPending} onChange={e => save.mutate(e.target.checked)} /> {t('social.friends_recommendations')}</label><p className={s.muted}>{t('social.friends_recommendations_hint')}</p><FormError>{save.error ? errorText(save.error) : null}</FormError></div>;
+}
+
+type ShareValue = { attachment: MusicAttachment; url: string };
+type AccountDialog = 'privacy' | 'notifications' | null;
+const AccountDialogContext = createContext<{ dialog: AccountDialog; setDialog: (dialog: AccountDialog) => void }>({ dialog: null, setDialog: () => {} });
+export const useSocialDialogOpen = () => useContext(AccountDialogContext).dialog !== null;
+const ShareContext = createContext<(value: ShareValue) => void>(() => { throw new Error('Missing SocialProvider'); });
+export const useMusicShare = () => useContext(ShareContext);
+export function SocialProvider({ children }: { children: ReactNode }) {
+  const [share, setShare] = useState<ShareValue | null>(null);
+  const [dialog, setDialog] = useState<AccountDialog>(null);
+  return <AccountDialogContext.Provider value={{ dialog, setDialog }}><ShareContext.Provider value={setShare}>{children}{share && <ShareDialog key={share.url} value={share} close={() => setShare(null)} />}</ShareContext.Provider></AccountDialogContext.Provider>;
+}
+function ShareDialog({ value, close }: { value: ShareValue; close: () => void }) {
+  const { t } = useTranslation();
+  const { api, inbox, key } = useSocial();
+  const cache = useQueryClient();
+  const errorText = useErrorText();
+  const [done, setDone] = useState<string[]>([]);
+  const [copied, setCopied] = useState(false);
+  const ids = useRef(new Map<string, string>());
+  const action = useMutation({ mutationFn: async (peer: string) => {
+    if (peer === 'copy') { await navigator.clipboard.writeText(value.url); setCopied(true); return; }
+    if (peer === 'external') {
+      try { await navigator.share({ title: value.attachment.title, url: value.url }); }
+      catch (error) { if (!(error instanceof DOMException && error.name === 'AbortError')) throw error; }
+      return;
+    }
+    let id = ids.current.get(peer); if (!id) { id = uuidv7(); ids.current.set(peer, id); }
+    await api.send(peer, { id, text: value.attachment.title, attachment_kind: value.attachment.kind, attachment_id: value.attachment.id });
+    setDone(old => [...old, peer]);
+    await cache.invalidateQueries({ queryKey: key });
+  } });
+  return <Dialog title={t('player.share')} onClose={close}>
+    <div className={s.stack}><strong>{value.attachment.title}</strong>
+      <Button busy={action.isPending && action.variables === 'copy'} onClick={() => action.mutate('copy')}>{t(copied ? 'social.copied' : 'social.copy')}</Button>
+      {!!navigator.share && <Button busy={action.isPending && action.variables === 'external'} onClick={() => action.mutate('external')}>{t('social.external')}</Button>}
+      <h3>{t('social.send_friend')}</h3>
+      {inbox.isPending && <p>{t('social.loading')}</p>}
+      {inbox.data && !inbox.data.people.some(p => p.relationship === 'friend') && <p>{t('social.no_friends_share')}</p>}
+      {inbox.data?.people.filter(p => p.relationship === 'friend').map(p => <Button key={p.id} disabled={done.includes(p.id) || action.isPending} onClick={() => action.mutate(p.id)}>{p.display_name} · {t(done.includes(p.id) ? 'social.sent' : 'social.send')}</Button>)}
+      <FormError>{action.error || inbox.error ? errorText(action.error ?? inbox.error) : null}</FormError>
+    </div>
+  </Dialog>;
+}
+
+export function useSocialProfileMenu() {
+  const { t } = useTranslation();
+  const { api, inbox, key } = useSocial();
+  const cache = useQueryClient();
+  const navigate = useNavigate();
+  const errorText = useErrorText();
+  const { dialog, setDialog } = useContext(AccountDialogContext);
+  const closeDialog = useCallback(() => setDialog(null), [setDialog]);
+  const action = useMutation({ mutationFn: (body: SocialAction) => api.action(body), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  const visibility = useMutation({ mutationFn: (v: ActivityVisibility) => api.setVisibility(v), onSuccess: async () => { await cache.invalidateQueries({ queryKey: key }); } });
+  const people = inbox.data?.people ?? [];
+  const currentVisibility = inbox.data?.activity_visibility ?? 'nobody';
+  const open = (id: string) => {
+    const relationship = people.find(p => p.id === id)?.relationship;
+    const tab = relationship === 'friend' ? 'messages' : relationship === 'incoming' || relationship === 'outgoing' ? 'requests' : 'people';
+    setDialog(null);
+    void navigate({ to: '/friends', search: { peer: id, tab } });
+  };
+  return {
+    items: [
+      { label: t(currentVisibility === 'nobody' ? 'social.status_hidden' : 'social.privacy_settings'), icon: currentVisibility === 'nobody' ? visibilityOffIcon : shieldIcon, onSelect: () => setDialog('privacy') },
+      { label: t('social.notifications'), badge: inbox.data?.unread, icon: inboxIcon, onSelect: () => setDialog('notifications') },
+    ],
+    dialogs: <>
+    {dialog === 'privacy' && <Dialog title={t('social.privacy_settings')} onClose={closeDialog} className={s.preferencesDialog}>
+      <fieldset className={s.privacy} disabled={!inbox.data} aria-busy={visibility.isPending}><legend>{t('social.activity_visibility')}</legend><div className={s.actions}>{(['nobody', 'friends', 'everyone'] as const).map(v => <Button key={v} aria-disabled={visibility.isPending} aria-pressed={currentVisibility === v} variant={currentVisibility === v ? 'primary' : 'ghost'} onClick={() => { if (!visibility.isPending) visibility.mutate(v); }}>{t(`social.visibility_${v}`)}</Button>)}</div><p className={s.muted}>{t('social.activity_privacy_hint')}</p></fieldset>
+      <FormError>{visibility.error || action.error || inbox.error ? errorText(visibility.error ?? action.error ?? inbox.error) : null}</FormError>
+      <ListeningPanel showRequests={false} />
+      {people.some(p => p.relationship === 'blocked') && <section><h3>{t('social.blocked_people')}</h3>{people.filter(p => p.relationship === 'blocked').map(p => <Person key={p.id} person={p} busy={action.isPending} open={() => {}} act={op => action.mutate({ action: op, target_id: p.id })} />)}</section>}
+    </Dialog>}
+      {dialog === 'notifications' && <NotificationsDialog onClose={closeDialog} onOpen={open} />}
+    </>,
+  };
+}
+
+type SocialTab = 'messages' | 'people' | 'requests';
+type ConfirmAction = { person: SocialPerson; action: 'remove' | 'block' };
+
+export function SocialPage({ peer = '', initialTab }: { peer?: string; initialTab?: SocialTab }) {
+  const { dialog } = useContext(AccountDialogContext);
+  const { t, i18n } = useTranslation();
+  const { api, inbox, key, user } = useSocial();
+  const cache = useQueryClient();
+  const navigate = useNavigate();
+  const errorText = useErrorText();
+  const [tab, setTab] = useState<SocialTab>('messages');
+  const [search, setSearch] = useState('');
+  const [q, setQ] = useState('');
+  const [confirm, setConfirm] = useState<ConfirmAction | null>(null);
+  const [narrow, setNarrow] = useState(() => window.matchMedia?.('(max-width: 767px)').matches ?? false);
+  const searchRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLElement>(null);
+  useEffect(() => {
+    const media = window.matchMedia?.('(max-width: 767px)');
+    if (!media) return;
+    const change = () => setNarrow(media.matches);
+    media.addEventListener('change', change);
+    return () => media.removeEventListener('change', change);
+  }, []);
+  useEffect(() => { const timer = setTimeout(() => setQ(search.trim()), 300); return () => clearTimeout(timer); }, [search]);
+  const results = useQuery({ queryKey: [...key, 'search', q], queryFn: () => api.search(q), enabled: tab === 'people' && q.length >= 2 });
+  const action = useMutation({ mutationFn: (body: SocialAction) => api.action(body), onSuccess: async () => { setConfirm(null); await cache.invalidateQueries({ queryKey: key }); } });
+  const people = inbox.data?.people ?? [];
+  const friends = people.filter(p => p.relationship === 'friend');
+  const conversations = [...friends].sort((a, b) => (b.last_message?.created_at ?? '').localeCompare(a.last_message?.created_at ?? '') || a.display_name.localeCompare(b.display_name));
+  useEffect(() => { if (initialTab) setTab(initialTab); }, [peer, initialTab]);
+  const initialPeer = conversations[0]?.id;
+  useEffect(() => {
+    // Pin the initial desktop selection: a newer message in another dialog must
+    // never switch the conversation the user is reading or composing in.
+    if (!narrow && !peer && initialPeer) void navigate({ to: '/friends', search: { peer: initialPeer }, replace: true });
+  }, [narrow, peer, initialPeer, navigate]);
+  const selected = friends.find(p => p.id === peer) ?? (!peer ? conversations[0] : undefined);
+  const requests = people.filter(p => p.relationship === 'incoming' || p.relationship === 'outgoing');
+  const incoming = requests.filter(p => p.relationship === 'incoming').length;
+  const messageUnread = friends.reduce((sum, p) => sum + p.unread, 0);
+  const filtered = (tab === 'messages' ? conversations : requests).filter(p => `${p.display_name} ${p.username}`.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase()));
+  const shownPeople = tab === 'people' ? q.length >= 2 ? results.data ?? [] : friends : filtered;
+  const open = (id: string) => {
+    const person = people.find(p => p.id === id);
+    setSearch(''); setQ('');
+    setTab(person?.relationship === 'friend' ? 'messages' : person?.relationship === 'incoming' || person?.relationship === 'outgoing' ? 'requests' : 'people');
+    void navigate({ to: '/friends', search: { peer: id } });
+  };
+  const findPeople = () => { setTab('people'); setSearch(''); setQ(''); requestAnimationFrame(() => searchRef.current?.focus()); };
+  const back = () => { void navigate({ to: '/friends', search: {} }).then(() => listRef.current?.querySelector<HTMLButtonElement>('button[aria-pressed="true"]')?.focus()); };
+  const act = (person: SocialPerson, op: SocialAction['action']) => {
+    if (op === 'block' || op === 'remove' && person.relationship === 'friend') setConfirm({ person, action: op });
+    else action.mutate({ action: op, target_id: person.id });
+  };
+  const listLabel = t(tab === 'messages' ? 'social.find_conversation' : tab === 'requests' ? 'social.find_request' : 'social.search');
+  return <div className={`${s.page} ${tab === 'messages' && peer && selected ? s.conversationOpen : ''}`}>
+    <header className={s.pageHeader}>
+      <h1>{t('social.title')}</h1>
+    </header>
+    <ListeningPanel showPreferences={false} />
+    <section className={s.hub}>
+      <nav className={s.tabs} aria-label={t('social.title')}>
+        {(['messages', 'people', 'requests'] as const).map(value => <button key={value} type="button" aria-pressed={tab === value} onClick={() => { setTab(value); setSearch(''); setQ(''); }}>{t(`social.${value}`)}{(value === 'requests' ? incoming : value === 'messages' ? messageUnread : 0) > 0 && <span className={s.badge}>{value === 'requests' ? incoming : messageUnread}</span>}</button>)}
+        <Button className={s.addFriend} variant="ghost" icon={addIcon} onClick={findPeople}>{t('social.find_people')}</Button>
+      </nav>
+      <FormError>{inbox.error || action.error || results.error ? errorText(inbox.error ?? action.error ?? results.error) : null}</FormError>
+      <div className={tab === 'messages' ? s.workspace : s.directory}>
+        <aside ref={listRef} className={s.peopleList} aria-label={t(tab === 'messages' ? 'social.messages' : 'social.people')}>
+          <div className={s.listSearch}><Icon src={searchIcon} size={18} /><input ref={searchRef} type="search" aria-label={listLabel} placeholder={listLabel} value={search} maxLength={80} onChange={e => setSearch(e.target.value)} /></div>
+          {inbox.isPending && <div className={s.stack} role="status" aria-label={t('social.loading')}>{[0, 1, 2].map(i => <Skeleton key={i} style={{ height: 64 }} />)}</div>}
+          {tab === 'people' && q.length >= 2 && results.isFetching && <p className={s.muted} role="status">{t('social.loading')}</p>}
+          {!shownPeople.length && inbox.data && !results.isFetching && <EmptyState icon={tab === 'requests' ? inboxIcon : groupIcon} action={!search && tab !== 'people' ? <Button onClick={findPeople}>{t('social.find_people')}</Button> : undefined}>{t(search ? 'social.no_results' : tab === 'requests' ? 'social.no_requests' : 'social.empty')}</EmptyState>}
+          {shownPeople.map(p => tab === 'messages' ? <button key={p.id} type="button" className={`${s.dialogRow} ${selected?.id === p.id ? s.selected : ''}`} aria-pressed={selected?.id === p.id} onClick={() => open(p.id)}>
+            <span className={`${s.avatar} ${p.online ? s.avatarListening : ''}`} aria-hidden>{p.display_name.slice(0, 1).toUpperCase()}</span>
+            <span className={s.dialogBody}><span className={s.dialogTitle}><strong>{p.display_name}</strong>{p.last_message && <time>{new Date(p.last_message.created_at).toLocaleDateString(i18n.language, { day: 'numeric', month: 'short' })}</time>}</span><span className={s.preview}>{p.last_message ? `${p.last_message.sender_id === user.id ? `${t('social.you')}: ` : ''}${p.last_message.deleted ? t('social.message_deleted') : p.last_message.attachment_kind !== 'none' ? t(p.last_message.attachment_kind === 'track' ? 'social.shared_track' : 'social.shared_playlist') : p.last_message.text}` : t('social.start_conversation')}</span><Presence online={p.online} />{p.activity && <span className={s.listeningPreview}><Icon src={musicIcon} size={13} />{p.activity.track_title}</span>}</span>
+            {p.unread > 0 && <span className={s.badge}>{p.unread}</span>}
+          </button> : <Person key={p.id} person={p} selected={peer === p.id} busy={action.isPending} open={() => open(p.id)} act={op => act(p, op)} />)}
+        </aside>
+        {tab === 'messages' && (selected ? <ChatConversation key={selected.id} person={selected} api={api} queryKey={key} userId={user.id} active={(!narrow || !!peer) && !dialog && !confirm} onBack={back} actions={<FriendMenu person={selected} act={op => act(selected, op)} />} /> : <div className={s.welcome}><span className={s.welcomeIcon}><Icon src={musicIcon} size={36} /></span><h2>{t('social.conversation_title')}</h2><p>{t('social.choose_chat')}</p><Button variant="primary" icon={addIcon} onClick={findPeople}>{t('social.find_people')}</Button></div>)}
+      </div>
+    </section>
+    {confirm && <Dialog title={t(confirm.action === 'block' ? 'social.confirm_block' : 'social.confirm_remove', { name: confirm.person.display_name })} onClose={() => { if (!action.isPending) setConfirm(null); }} footer={<><Button disabled={action.isPending} onClick={() => setConfirm(null)}>{t('form.cancel')}</Button><Button variant="danger" busy={action.isPending} onClick={() => action.mutate({ action: confirm.action, target_id: confirm.person.id })}>{t(`social.${confirm.action}`)}</Button></>}><p className={s.muted}>{t(confirm.action === 'block' ? 'social.block_hint' : 'social.remove_hint')}</p><FormError>{action.error ? errorText(action.error) : null}</FormError></Dialog>}
+  </div>;
+}
+
+function FriendMenu({ person, act }: { person: SocialPerson; act: (a: SocialAction['action']) => void }) {
+  const { t } = useTranslation();
+  return <Menu label={t('social.person_actions', { name: person.display_name })} trigger={<Icon src={moreIcon} />} items={[
+    ...(person.relationship === 'friend' ? [{ label: t('social.remove'), danger: true, onSelect: () => act('remove') }] : []),
+    { label: t(person.relationship === 'blocked' ? 'social.unblock' : 'social.block'), danger: person.relationship !== 'blocked', onSelect: () => act(person.relationship === 'blocked' ? 'unblock' : 'block') },
+  ]} />;
+}
+
+function Person({ person: p, busy, open, act, selected }: { person: SocialPerson; busy: boolean; selected?: boolean; open: () => void; act: (a: SocialAction['action']) => void }) {
+  const { t } = useTranslation();
+  return <article className={`${s.person} ${selected ? s.selected : ''}`}>
+    <div className={s.identity}><span className={`${s.avatar} ${p.online ? s.avatarListening : ''}`} aria-hidden>{p.display_name.slice(0, 1).toUpperCase()}</span><div><strong>{p.display_name}</strong><div className={s.muted}>@{p.username} · {t(`social.rel_${p.relationship}`)}</div>{p.relationship === 'friend' && <Presence online={p.online} />}</div></div>
+    {p.activity && <div className={s.activity}><span className={s.listening}><Icon src={musicIcon} size={16} />{t('social.listening')}</span><Link to="/track/$id" params={{ id: p.activity.track_id }}>{p.activity.track_title}</Link>{p.activity.artist && <span className={s.muted}>{p.activity.artist}</span>}{p.activity.context === 'playlist' && p.activity.playlist_id && <Link to="/activity/playlist/$userId" params={{ userId: p.id }}>{t('social.from_playlist', { name: p.activity.playlist_name ?? '' })}</Link>}</div>}
+    <div className={s.actions}>
+      {p.relationship === 'friend' && <><Button onClick={open}>{t('social.chat')}{p.unread ? ` · ${p.unread}` : ''}</Button><ListenTogetherButton person={p} /></>}
+      {p.relationship === 'none' && <Button disabled={busy} onClick={() => act('request')}>{t('social.add')}</Button>}
+      {p.relationship === 'incoming' && <Button disabled={busy} variant="primary" onClick={() => act('accept')}>{t('social.accept')}</Button>}
+      {['incoming', 'outgoing'].includes(p.relationship) && <Button disabled={busy} variant="ghost" onClick={() => act('remove')}>{t(p.relationship === 'incoming' ? 'social.decline' : 'social.cancel')}</Button>}
+      <FriendMenu person={p} act={act} />
+    </div>
+  </article>;
+}

apps/web/src/features/social/notifications.module.css

@@ -0,0 +1,40 @@
+.dialog { width: 600px; max-height: min(680px, calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }
+.dialog > :first-child { flex-shrink: 0; padding: 20px 24px 16px; }
+.dialog > :nth-child(2) { display: flex; flex-direction: column; gap: 0; min-height: 0; padding: 0; overflow: hidden; }
+.filters { display: flex; gap: 6px; flex-shrink: 0; padding: 0 24px 16px; border-bottom: 1px solid var(--line); }
+.filters button { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 9px; color: var(--text2); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
+.filters button[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent2); }
+.filters button:hover { background: var(--hover); color: var(--text); }
+.count { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--accent2); }
+.list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; padding: 8px 12px 12px; }
+.row { position: relative; display: flex; align-items: center; border-radius: 12px; }
+.row + .row { margin-top: 4px; }
+.row.unread { background: var(--accent-soft); }
+.row:hover { background: var(--hover); }
+.open { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; padding: 14px 12px; border-radius: 12px; text-align: left; color: var(--text); font: inherit; cursor: pointer; }
+.avatar { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border: 1px solid var(--line2); border-radius: 50%; background: var(--surface2); color: var(--accent2); font-size: 14px; font-weight: 600; }
+.content { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 4px; overflow-wrap: anywhere; }
+.content strong { font-size: 13px; font-weight: 600; }
+.content > span { font-size: 13px; color: var(--text2); line-height: 1.45; }
+.content time { color: var(--text3); font-size: 11px; line-height: 1.4; }
+.arrow { flex-shrink: 0; color: var(--text3); }
+.read { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; margin-right: 10px; border-radius: 9px; color: var(--accent2); cursor: pointer; }
+.read > svg, .read > span:last-child { opacity: 0; }
+.dot { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: var(--accent2); }
+.read:hover, .read:focus-visible { background: var(--accent-soft); }
+.read:hover .dot, .read:focus-visible .dot { opacity: 0; }
+.read:hover > :last-child, .read:focus-visible > :last-child { opacity: 1; }
+.read:disabled { opacity: .5; cursor: wait; }
+.open:focus-visible, .read:focus-visible, .filters button:focus-visible, .list:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
+.loading { display: grid; gap: 8px; padding: 12px; }
+.empty { padding: 36px 20px; }
+@media(max-width: 767px) {
+  .dialog { max-height: min(680px, calc(100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px))); }
+  .dialog > :first-child { padding: 16px; }
+  .filters { padding: 0 16px 12px; }
+  .list { padding: 6px; }
+  .open { gap: 10px; padding: 12px 10px; }
+  .avatar { width: 34px; height: 34px; }
+  .read { width: 36px; min-height: 44px; margin-right: 4px; }
+}
+@media(hover: none) { .read > :last-child { opacity: 1; } .read .dot { display: none; } }

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

@@ -0,0 +1,20 @@
+import { socialApi } from '@pipu/core';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useSession, useUser } from '../../app/session';
+import { useDesktop } from '../../desktop';
+
+const scopes = new WeakMap<object, number>();
+let nextScope = 0;
+
+export function useSocial() {
+  const session = useSession();
+  const user = useUser();
+  const server = useDesktop()?.server ?? '';
+  const api = useMemo(() => socialApi(session), [session]);
+  if (!scopes.has(session)) scopes.set(session, ++nextScope);
+  const key = ['social', server, scopes.get(session), user.id] as const;
+  const inbox = useQuery({ queryKey: key, queryFn: api.inbox, staleTime: 5000, refetchInterval: 15_000, refetchOnWindowFocus: true });
+  return { api, key, inbox, user };
+}
+

apps/web/src/features/social/social.module.css

@@ -0,0 +1,206 @@
+.page { width: 100%; max-width: 1480px; margin: 0 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
+.pageHeader { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-shrink: 0; }
+.page h1 { font-size: 24px; letter-spacing: -.035em; margin: 0; }
+.muted { color: var(--text2); font-size: 13px; line-height: 1.6; }
+.hub { display: flex; flex-direction: column; min-height: 0; flex: 1; background: var(--surface); border: 1px solid var(--line2); border-radius: 20px; overflow: hidden; box-shadow: 0 12px 48px var(--hover); }
+.tabs { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 10px 16px; flex-shrink: 0; }
+.tabs > button:not(.addFriend) { position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; color: var(--text2); font-weight: 600; transition: color .18s, background .18s; }
+.tabs > button[aria-pressed='true'] { background: var(--accent-soft); color: var(--accent2); }
+.tabs > button[aria-pressed='true']::after { content: ''; position: absolute; bottom: -11px; height: 2px; left: 16px; right: 16px; background: var(--accent2); border-radius: 2px; animation: tabIn .2s ease-out; }
+.tabs > button:hover { color: var(--text); background: var(--hover); }
+.addFriend { margin-left: auto; }
+.badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent-fill); color: var(--on-accent, #fff); font-size: 11px; font-weight: 600; flex-shrink: 0; font-variant-numeric: tabular-nums; }
+.workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(230px, 29%) minmax(0, 1fr); }
+.peopleList { padding: 12px 10px; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
+.workspace > .peopleList { border-right: 1px solid var(--line); background: var(--bg2); }
+.listSearch { display: flex; align-items: center; gap: 10px; background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; min-height: 44px; margin: 2px 4px 14px; color: var(--text3); }
+.listSearch:focus-within { border-color: var(--accent); }
+.listSearch input { color: var(--text); font: inherit; font-size: 13px; width: 100%; min-width: 0; background: transparent; border: 0; height: 44px; }
+.listSearch input::placeholder { color: var(--text3); }
+.listSearch input:focus-visible { outline: none; }
+.dialogRow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 12px; text-align: left; border-radius: 12px; margin-bottom: 4px; transition: background .18s, transform .18s; }
+.dialogRow:hover { background: var(--hover); }
+.dialogRow:active { transform: scale(.985); }
+.dialogRow.selected { background: var(--accent-soft); }
+.dialogBody { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
+.dialogTitle { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
+.dialogTitle strong { font-size: 14px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.dialogTitle time { color: var(--text3); font-size: 10px; white-space: nowrap; flex-shrink: 0; }
+.preview { color: var(--text2); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.listeningPreview { display: flex; align-items: center; gap: 4px; color: var(--ok); font-size: 11px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
+.avatar { position: relative; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; color: var(--accent2); background: var(--accent-soft); font-size: 16px; font-weight: 600; }
+.avatarListening::after { content: ''; position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; background: var(--ok); border-radius: 50%; border: 2px solid var(--surface); }
+.presence { display: inline-flex; align-items: center; gap: 5px; color: var(--text2); font-size: 11px; white-space: nowrap; }
+.presenceDot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text3); flex-shrink: 0; transition: background .2s; }
+.presenceOnline .presenceDot { background: var(--ok); }
+.directory { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 24px; animation: panelIn .22s ease-out; }
+.directory .peopleList { padding: 0; overflow: visible; }
+.directory .listSearch { max-width: 440px; margin-left: 0; }
+.person { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding: 20px 4px; border-bottom: 1px solid var(--line); min-width: 0; overflow-wrap: anywhere; }
+.person > .actions { margin-left: auto; }
+.person.selected { background: var(--accent-soft); }
+.identity { display: flex; gap: 12px; align-items: center; min-width: 0; }
+.identity > div { min-width: 0; }
+.identity strong { display: block; overflow-wrap: anywhere; }
+.activity { display: grid; gap: 4px; max-width: 300px; font-size: 13px; }
+.activity a, .nowListening a { color: var(--text); text-decoration: none; }
+.activity a:hover, .nowListening a:hover { color: var(--accent2); text-decoration: underline; }
+.listening { display: flex; align-items: center; gap: 5px; color: var(--ok); font-size: 11px; }
+.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+.stack { display: grid; gap: 12px; }
+.stack:empty { display: none; }
+.welcome { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 32px; }
+.welcomeIcon { color: var(--accent2); background: var(--accent-soft); display: grid; place-items: center; width: 80px; height: 80px; border-radius: 24px; margin-bottom: 8px; }
+.welcome h2 { font-size: 22px; letter-spacing: -.025em; margin: 0; }
+.welcome p { color: var(--text2); max-width: 280px; margin: 0 0 8px; line-height: 1.7; }
+.privacy { border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 0 0 16px; min-width: 0; }
+.privacy legend { color: var(--text2); padding: 0 8px; font-size: 13px; }
+.privacy summary { cursor: pointer; font-weight: 600; }
+.privacy p { margin-bottom: 0; }
+.privacy .privacy { margin: 12px 0; }
+.privacy input { accent-color: var(--accent); }
+.preferencesDialog { width: 560px; max-height: min(720px, calc(100dvh - 48px)); display: flex; flex-direction: column; overflow: hidden; background: var(--surface); }
+.preferencesDialog > :first-child { padding: 20px 24px 16px; flex-shrink: 0; border-bottom: 1px solid var(--line); }
+.preferencesDialog > :nth-child(2) { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
+.preferencesDialog fieldset.privacy { border: 0; padding: 0; margin: 0; }
+.preferencesDialog .privacy legend { padding: 0; margin-bottom: 12px; color: var(--text); font-weight: 600; }
+.preferencesDialog .privacy .actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface2); }
+.preferencesDialog .privacy .actions button { min-width: 0; padding: 0 8px; border-radius: 8px; min-height: 36px; }
+.preferencesDialog details.privacy { padding: 16px; margin: 8px 0 0; border: 1px solid var(--line); background: var(--surface2); }
+.preferencesDialog details.privacy > summary { line-height: 1.5; }
+.preferencesDialog details.privacy fieldset { margin: 20px 0; }
+.preferencesDialog details.privacy > label { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
+.preferencesDialog details.privacy > label input { margin-top: 3px; }
+.choice { display: flex; gap: 12px; padding: 14px; align-items: center; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; background: var(--surface2); font-size: 13px; line-height: 1.5; }
+.choice + .choice { margin-top: 8px; }
+.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
+.choice:has(input:disabled) { opacity: .5; cursor: not-allowed; }
+.choice input { flex-shrink: 0; accent-color: var(--accent); }
+.stream { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 16px; border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 14px; background: var(--surface); margin-bottom: 20px; }
+.chat { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--surface); animation: conversationIn .24s cubic-bezier(.2,.8,.2,1); }
+.chatHeader { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
+.chatIdentity { flex: 1; min-width: 0; }
+.chatIdentity h2 { font-size: 16px; line-height: 1.4; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chatIdentity > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
+.chatIdentity > .presence { display: inline-flex; }
+.chatTools { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
+.iconButton { width: 40px; min-width: 40px; height: 40px; padding: 0; border-radius: 12px; flex-shrink: 0; }
+.backButton { display: none; }
+.nowListening { display: flex; gap: 10px; align-items: center; padding: 10px 22px; background: var(--hover); color: var(--ok); flex-shrink: 0; }
+.nowListening > div { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12px; }
+.nowListening span { font-size: 11px; }
+.nowListening a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+.chatTabs { display: flex; gap: 16px; padding: 0 22px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
+.chatTabs button { position: relative; display: flex; align-items: center; gap: 6px; padding: 12px 0; font-size: 12px; color: var(--text3); transition: color .16s; }
+.chatTabs button[aria-pressed='true'] { color: var(--text); }
+.chatTabs button[aria-pressed='true']::after { content: ''; height: 2px; position: absolute; left: 0; right: 0; bottom: -1px; border-radius: 2px; background: var(--accent2); animation: tabIn .18s ease-out; }
+.chatSearch { display: flex; gap: 12px; align-items: end; padding: 12px 20px; border-bottom: 1px solid var(--line); animation: panelIn .18s ease-out; flex-shrink: 0; }
+.chatSearch > div { flex: 1; }
+.messages { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; overflow-anchor: none; scrollbar-width: thin; padding: 22px 28px; }
+.chatSkeleton { display: flex; flex-direction: column; gap: 20px; }
+.older { align-self: center; flex-shrink: 0; }
+.date { align-self: center; color: var(--text3); font-size: 11px; margin: 6px 0 10px; flex-shrink: 0; }
+.newMessages { text-align: center; color: var(--accent2); font-size: 11px; border-bottom: 1px solid var(--line2); padding: 6px; }
+.bubble { display: flex; flex-direction: column; gap: 7px; padding: 10px 14px 5px; border-radius: 16px 16px 16px 4px; background: var(--surface2); max-width: min(82%, 560px); min-width: 100px; flex-shrink: 0; align-self: start; overflow-wrap: anywhere; animation: messageIn .22s cubic-bezier(.2,.8,.2,1); }
+.mine { align-self: end; background: var(--accent-soft); border-radius: 16px 16px 4px 16px; }
+.messageText { white-space: pre-wrap; user-select: text; line-height: 1.65; font-size: 14px; min-width: 0; }
+.messageText a, .attachmentCaption a { color: var(--accent2); }
+.messageFoot { display: flex; align-items: center; justify-content: end; gap: 10px; min-height: 30px; }
+.messageFoot small { font-size: 11px; color: var(--text2); }
+.messageFoot button { width: 28px; height: 28px; min-width: 28px; padding: 0; border-radius: 8px; color: var(--text3); }
+.messageFoot button:hover { color: var(--text); background: var(--hover); }
+.quote { margin: 0 0 2px; padding: 6px 10px; border-left: 2px solid var(--accent2); border-radius: 0 6px 6px 0; background: var(--hover); color: var(--text2); font-size: 12px; max-height: 72px; overflow: hidden; }
+.deleted { font-style: italic; color: var(--text3); }
+.sending { opacity: .6; }
+.reactions { display: flex; flex-wrap: wrap; gap: 5px; }
+.reactions button { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); padding: 4px 8px; font-size: 12px; cursor: pointer; transition: transform .15s, background .15s; }
+.reactions button:hover { transform: translateY(-2px); }
+.reactions button[aria-pressed='true'] { background: var(--accent-soft); border-color: var(--accent2); }
+.typing { display: flex; align-items: center; gap: 8px; min-height: 24px; padding: 0 24px 4px; color: var(--text3); font-size: 11px; flex-shrink: 0; }
+.typingDots { display: flex; gap: 3px; }
+.typingDots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: typingPulse 1s ease-in-out infinite alternate; }
+.typingDots i:nth-child(2) { animation-delay: .15s; }
+.typingDots i:nth-child(3) { animation-delay: .3s; }
+.replyBar { display: flex; gap: 10px; align-items: center; padding: 10px 22px; background: var(--hover); border-top: 1px solid var(--line); flex-shrink: 0; animation: panelIn .16s ease-out; }
+.replyBar > div { flex: 1; min-width: 0; }
+.replyBar small { color: var(--accent2); }
+.replyBar p { margin: 3px 0; font-size: 12px; max-height: 35px; overflow: hidden; overflow-wrap: anywhere; }
+.composer { display: flex; gap: 8px; padding: 14px 18px; border-top: 1px solid var(--line); align-items: end; flex-shrink: 0; background: var(--surface); }
+.composer textarea { resize: none; min-width: 0; flex: 1; border: 1px solid transparent; border-radius: 12px; background: var(--surface2); color: var(--text); padding: 10px 14px; min-height: 42px; max-height: 144px; font: inherit; font-size: 14px; line-height: 22px; scrollbar-width: thin; transition: border-color .18s, background .18s; }
+.composer textarea:focus { border-color: var(--accent); }
+.composer textarea::placeholder { color: var(--text3); }
+.emojiPicker { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 20px; border-top: 1px solid var(--line); flex-shrink: 0; animation: panelIn .18s ease-out; }
+.emojiPicker button { width: 40px; height: 40px; border-radius: 10px; font-size: 20px; transition: background .15s, transform .15s; }
+.emojiPicker button:hover { background: var(--hover); transform: translateY(-2px); }
+.jumpToBottom { position: absolute; bottom: 94px; align-self: center; border: 1px solid var(--line2); background: var(--elev); box-shadow: var(--shadow); z-index: 2; animation: panelIn .18s ease-out; }
+.musicCard { display: flex; align-items: center; gap: 12px; min-width: 0; width: 320px; max-width: 100%; padding: 6px 0; }
+.musicInfo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
+.musicInfo a { color: var(--text); font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
+.musicInfo a:hover { color: var(--accent2); text-decoration: underline; }
+.musicInfo > span { font-size: 11px; color: var(--text2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.musicCover { width: 48px; height: 48px; display: grid; place-items: center; background: var(--surface3); border-radius: 8px; color: var(--text3); flex-shrink: 0; }
+.musicUnavailable { opacity: .7; }
+.musicMessages .mediaBubble { align-self: stretch; max-width: 100%; background: transparent; border: 1px solid var(--line); border-radius: 12px; }
+.musicMessages .musicCard { width: 100%; }
+.miniDock { grid-area: content; align-self: end; justify-self: end; z-index: 25 !important; display: flex; flex-direction: column; align-items: end; gap: 12px; width: min(600px, calc(100% - 32px)); min-height: 0; margin: 16px; pointer-events: none; }
+.miniPanel { pointer-events: auto; width: 100%; height: min(640px, calc(100dvh - 250px)); min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--line2); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; animation: panelIn .2s ease-out; }
+.miniDockIsland { margin-bottom: 132px; }
+.miniDockIsland .miniPanel { height: min(640px, calc(100dvh - 290px)); }
+.miniPanel[hidden] { display: none; }
+.miniHeader { display: flex; align-items: center; gap: 6px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--line); }
+.miniHeader > strong { flex: 1; font-size: 14px; }
+.miniHeader > button { min-height: 36px; padding: 0 8px; font-size: 12px; }
+.miniWorkspace { flex: 1; min-height: 0; display: grid; grid-template-columns: 170px minmax(0, 1fr); }
+.miniFriends { overflow-y: auto; min-width: 0; padding: 8px; border-right: 1px solid var(--line); }
+.miniFriends .listSearch { padding: 0 8px; gap: 5px; margin: 0 0 8px; min-height: 36px; }
+.miniFriends .listSearch input { height: 36px; font-size: 11px; }
+.miniFriends .dialogRow { gap: 8px; padding: 10px 6px; }
+.miniFriends .avatar { width: 28px; height: 28px; font-size: 12px; }
+.miniFriends .dialogBody strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 12px; }
+.miniFriends .badge { min-width: 17px; height: 17px; padding: 0 4px; font-size: 10px; }
+.miniWorkspace .chat { min-width: 0; }
+.miniWorkspace .chatHeader { gap: 8px; padding: 10px; }
+.miniWorkspace .chatHeader .avatar { width: 30px; height: 30px; font-size: 12px; }
+.miniWorkspace .chatIdentity h2 { font-size: 14px; }
+.miniWorkspace .chatTools .togetherLabel { display: none; }
+.miniWorkspace .chatTools > button, .miniWorkspace .chatTools > div > button { width: 34px; min-width: 34px; padding: 0; }
+.miniWorkspace .chatTabs { gap: 14px; padding: 0 12px; }
+.miniWorkspace .chatTabs button { font-size: 11px; }
+.miniWorkspace .messages { padding: 12px; gap: 10px; }
+.miniWorkspace .bubble { max-width: 94%; font-size: 13px; padding: 8px 10px 4px; }
+.miniWorkspace .composer { padding: 8px; gap: 4px; }
+.miniWorkspace .composer .iconButton { width: 34px; min-width: 34px; }
+.miniWorkspace .composer textarea { padding: 8px; font-size: 13px; }
+.miniWorkspace .welcome { padding: 20px; }
+.miniTrigger { position: relative; pointer-events: auto; display: grid; place-items: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; color: var(--text); border: 1px solid var(--line2); background: var(--surface); box-shadow: 0 6px 24px #0005; cursor: pointer; }
+.miniTrigger:hover, .miniTrigger[aria-expanded='true'] { background: var(--accent-fill); color: var(--on-accent, #fff); }
+.miniTrigger:focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
+.miniTrigger > .badge { position: absolute; top: -5px; right: -5px; }
+@media(max-width: 1023px) { .miniDock { display: none; } }
+@media(prefers-reduced-motion: reduce) { .miniPanel { animation: none; } }
+.attachmentCaption { font-size: 12px; color: var(--text2); white-space: pre-wrap; }
+.expandText { display: block; color: var(--accent2); font-size: 12px; padding: 6px 0; }
+@keyframes conversationIn { from { opacity: .4; transform: translateX(8px); } to { opacity: 1; transform: none; } }
+@keyframes panelIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
+@keyframes messageIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
+@keyframes tabIn { from { opacity: 0; transform: scaleX(.5); } to { opacity: 1; transform: none; } }
+@keyframes typingPulse { from { opacity: .35; transform: translateY(0); } to { opacity: 1; transform: translateY(-3px); } }
+@media(max-width: 1150px) { .pageHeader { align-items: start; } .chatTools .togetherLabel { display: none; } .chatTools > button, .chatTools > div > button { min-width: 40px; width: 40px; padding: 0; } .workspace { grid-template-columns: 240px minmax(0, 1fr); } .chatHeader { padding: 14px 16px; } .messages { padding: 18px; } .bubble { max-width: 90%; } }
+@media(max-width: 900px) { .pageHeader { flex-wrap: wrap; gap: 10px; } .page { gap: 14px; } .workspace { grid-template-columns: 220px minmax(0, 1fr); } .tabs { gap: 2px; padding: 8px; } .tabs > button:not(.addFriend) { padding: 0 10px; font-size: 13px; } .addFriend { font-size: 12px; padding: 0 10px; } .chatHeader { gap: 8px; } .chatTools { gap: 0; } }
+@media(max-width: 767px) {
+  .page { gap: 12px; } .pageHeader { padding: 0 2px; } .page h1 { font-size: 23px; }
+  .hub { border-radius: 14px; } .tabs { flex-wrap: wrap; } .tabs > button:not(.addFriend) { flex: 1; font-size: 12px; } .tabs .addFriend { width: 100%; height: 36px; font-size: 12px; }
+  .workspace { display: flex; flex-direction: column; } .workspace > .peopleList { flex: 1; border: 0; } .workspace > .chat, .workspace > .welcome { display: none; }
+  .conversationOpen > .pageHeader, .conversationOpen > .stack, .conversationOpen .hub > .tabs, .conversationOpen .workspace > .peopleList { display: none; }
+  .conversationOpen .workspace > .chat { display: flex; flex: 1; } .backButton { display: inline-flex; } .chatHeader { padding: 10px 8px; gap: 6px; }
+  .chatHeader .avatar { width: 32px; height: 32px; font-size: 13px; } .chatIdentity h2 { font-size: 14px; } .chatIdentity > span { font-size: 11px; }
+  .chatTools > button, .chatTools > div > button { min-width: 36px; width: 36px; } .iconButton { min-width: 36px; width: 36px; } .chatTools > div:last-child > button { width: 32px; min-width: 32px; }
+  .chatTabs { padding: 0 14px; gap: 18px; } .chatTabs button { min-height: 44px; font-size: 11px; }
+  .nowListening { padding: 8px 14px; } .messages { padding: 12px; gap: 10px; } .bubble { max-width: 92%; font-size: 14px; padding: 9px 12px 4px; }
+  .composer { gap: 4px; padding: 10px 8px; } .composer textarea { font-size: 16px; padding: 10px; } .composer .iconButton { min-width: 40px; width: 40px; height: 44px; }
+  .directory { padding: 12px; } .person { gap: 12px; padding: 16px 0; } .person > .actions { margin-left: 0; width: 100%; } .person .activity { width: 100%; padding-left: 54px; }
+  .musicCard { gap: 8px; } .musicCard > :first-child { width: 40px !important; height: 40px !important; } .musicCard .iconButton { min-width: 32px; width: 32px; } .musicInfo a { font-size: 13px; }
+  .chatSearch { padding: 10px 12px; gap: 6px; } .replyBar { padding: 8px 12px; } .privacy { padding: 12px; } .privacy .actions { gap: 4px; } .privacy .actions button { padding: 0 12px; }
+}
+@media(pointer: coarse) { .chatTools button, .messageFoot button, .reactions button { min-height: 44px; } }
+@media(prefers-reduced-motion: reduce) { .chat, .bubble, .directory, .chatSearch, .replyBar, .emojiPicker, .jumpToBottom, .typingDots i, .tabs > button::after, .chatTabs button::after { animation: none; } .dialogRow, .tabs > button, .chatTabs button, .composer textarea, .reactions button, .emojiPicker button { transition: none; } .dialogRow:active, .reactions button:hover, .emojiPicker button:hover { transform: none; } }

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

@@ -0,0 +1,69 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { refreshIcon } from '../../shared/ui/icons';
+import { Button } from '../../shared/ui/ui';
+import u from '../../pages/uploads/uploads.module.css';
+
+// Preview elements may belong to different batches, but only one may play.
+const previews = new Set<HTMLAudioElement>();
+
+export function AudioPreview({ url, name, active }: { url: string; name: string; active: boolean }) {
+  const { t } = useTranslation('admin');
+  const queryClient = useQueryClient();
+  const audio = useRef<HTMLAudioElement>(null);
+  const [error, setError] = useState<number | null>(null);
+  const [httpStatus, setHttpStatus] = useState<number | null>(null);
+
+  useEffect(() => {
+    const element = audio.current;
+    if (!element) return;
+    previews.add(element);
+    return () => { previews.delete(element); element.pause(); };
+  }, []);
+  useEffect(() => {
+    if (!active) audio.current?.pause();
+  }, [active]);
+
+  useEffect(() => { setError(null); setHttpStatus(null); }, [url]);
+  useEffect(() => {
+    if (error === null) return;
+    const controller = new AbortController();
+    // A media error alone cannot distinguish an HTTP failure from an unsupported codec.
+    // Probe one byte using the same signed URL, then release the response immediately.
+    void fetch(url, { headers: { Range: 'bytes=0-0' }, cache: 'no-store', signal: controller.signal })
+      .then(async (response) => {
+        await response.body?.cancel();
+        if (!controller.signal.aborted) setHttpStatus(response.ok ? null : response.status);
+      })
+      .catch(() => { /* The native media error remains visible for network failures. */ });
+    return () => controller.abort();
+  }, [url, error]);
+
+  const retry = () => {
+    setError(null);
+    setHttpStatus(null);
+    void queryClient.invalidateQueries({ queryKey: ['admin-uploads'] });
+    audio.current?.load();
+    void audio.current?.play().catch(() => { /* Native media errors are shown below. */ });
+  };
+
+  return <div className={u.preview}>
+    <audio ref={audio} controls preload="none" src={url}
+      aria-label={t('uploads.listen', { name })}
+      onPlay={(event) => {
+        if (event.currentTarget.paused) return;
+        for (const other of previews) {
+          if (other !== event.currentTarget && !other.paused) other.pause();
+        }
+      }}
+      onLoadedMetadata={() => { setError(null); setHttpStatus(null); }}
+      onError={(event) => setError(event.currentTarget.error?.code ?? 0)} />
+    {error !== null && <div className={u.previewError}>
+      <span role="alert" className={u.bad}>{httpStatus !== null
+        ? t('uploads.preview_http_error', { status: httpStatus })
+        : t(error === 3 || error === 4 ? 'uploads.preview_decode_error' : 'uploads.preview_error')}</span>
+      <Button variant="ghost" icon={refreshIcon} onClick={retry}>{t('uploads.retry')}</Button>
+    </div>}
+  </div>;
+}

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

@@ -2,6 +2,7 @@ import { useMutation } from '@tanstack/react-query';
 import { useState } from 'react';
 import { useErrorText } from '../../shared/lib/errors';
 import { useUploadsApi } from './queries';
+import { coverBase64 } from './files';
 import { useTranslation } from 'react-i18next';
 import { Button, Dialog, Field, FormError } from '../../shared/ui/ui';
 import s from '../../pages/page.module.css';
@@ -13,6 +14,7 @@ export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string
   const [album, setAlbum] = useState('');
   const [year, setYear] = useState('');
   const [cover, setCover] = useState<string | null | undefined>(undefined);
+  const prepare = useMutation({ mutationFn: coverBase64, onSuccess: setCover });
   const save = useMutation({
     mutationFn: () => api.updateBatch(batchId, {
       ...(artist.trim() ? { artist: artist.trim() } : {}),
@@ -23,17 +25,13 @@ export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string
     onSuccess: onSaved,
   });
   const pickCover = (file: File | undefined) => {
-    if (!file) {
+    save.reset();
+    prepare.reset();
     setCover(undefined);
+    if (!file) {
       return;
     }
-    const reader = new FileReader();
+    prepare.mutate(file);
-    reader.onload = () => {
-      const data = String(reader.result ?? '');
-      const comma = data.indexOf(',');
-      setCover(comma >= 0 ? data.slice(comma + 1) : data);
-    };
-    reader.readAsDataURL(file);
   };
   return (
     <Dialog
@@ -44,7 +42,7 @@ export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string
           <Button variant="ghost" onClick={onClose}>
             {t('common:form.cancel')}
           </Button>
-          <Button variant="primary" busy={save.isPending} onClick={() => save.mutate()}>
+          <Button variant="primary" busy={save.isPending || prepare.isPending} disabled={prepare.isError} onClick={() => save.mutate()}>
             {t('uploads.save')}
           </Button>
         </>
@@ -57,12 +55,12 @@ export function BatchEditDialog({ batchId, onClose, onSaved }: { batchId: string
         <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])} />
+          <input type="file" accept="image/jpeg,image/png,image/webp" disabled={prepare.isPending || save.isPending} onChange={(e) => pickCover(e.target.files?.[0])} />
         </label>
-        <Button variant="ghost" onClick={() => setCover(null)}>
+        <Button variant="ghost" disabled={prepare.isPending || save.isPending} onClick={() => { prepare.reset(); setCover(null); }}>
           {t('uploads.batch_cover_clear')}
         </Button>
-        <FormError>{save.error ? errorText(save.error) : null}</FormError>
+        <FormError>{(save.error ?? prepare.error) ? errorText(save.error ?? prepare.error) : null}</FormError>
       </div>
     </Dialog>
   );

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

@@ -0,0 +1,172 @@
+import type { components } from '@pipu/api-client';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useUploadsApi } from './queries';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Dialog, Field, FormError } from '../../shared/ui/ui';
+import type { UploadFile } from './common';
+import s from '../../pages/page.module.css';
+import u from '../../pages/uploads/uploads.module.css';
+
+type Candidate = components['schemas']['ReleaseCandidate'];
+export type ReleaseGroup = components['schemas']['UploadReleaseGroup'];
+
+/** External suggestions remain separate from uploaded metadata until explicitly applied. */
+export function BatchRelease({ files, onGroupsChange }: { files: UploadFile[]; onGroupsChange?: (groups: ReleaseGroup[]) => void }) {
+  const { t } = useTranslation('admin');
+  const api = useUploadsApi();
+  const qc = useQueryClient();
+  const errorText = useErrorText();
+  const first = files[0]!;
+  const id = first.batch_id;
+  const [groupId, setGroupId] = useState('');
+  const [groups, setGroups] = useState<ReleaseGroup[]>([]);
+  const key = ['upload-release', id, groupId];
+  const [open, setOpen] = useState(false);
+  const [artist, setArtist] = useState(first.metadata?.albumartist || first.metadata?.artist || '');
+  const [album, setAlbum] = useState(first.metadata?.album || '');
+  const [mbid, setMbid] = useState('');
+  const [selected, setSelected] = useState('');
+  const [preview, setPreview] = useState(false);
+  const [applyMetadata, setApplyMetadata] = useState(false);
+  const [applyCover, setApplyCover] = useState(false);
+  const version = files.map((f) => `${f.id}:${f.updated_at}`).sort().join('|');
+  const previousVersion = useRef(version);
+  useEffect(() => {
+    if (previousVersion.current !== version) {
+      previousVersion.current = version;
+      void qc.invalidateQueries({ queryKey: ['upload-release', id] });
+    }
+  }, [version, qc, id]);
+  const report = useQuery({
+    queryKey: key,
+    queryFn: () => api.releaseReport(id, groupId || undefined),
+    retry: false,
+    refetchInterval: (q) => q.state.data?.state === 'queued' || q.state.data?.state === 'searching' || (!groupId && q.state.data?.groups?.some((g) => g.state === 'queued' || g.state === 'searching')) ? 3000 : q.state.data?.state === 'error' ? 60000 : false,
+  });
+  useEffect(() => {
+    if (report.data?.groups) { setGroups(report.data.groups); onGroupsChange?.(report.data.groups); }
+  }, [report.data?.groups, onGroupsChange]);
+  const scopeId = report.data?.group_id || groupId;
+  const group = groups.find((g) => g.id === scopeId);
+  const needsGroup = groups.length > 1 && !scopeId;
+  const candidate: Candidate | undefined = report.data?.candidates.find((c) => c.release.id === selected)
+    ?? report.data?.candidates.find((c) => c.release.id === report.data?.selected_release)
+    ?? (report.data?.candidates.length === 1 ? report.data.candidates[0] : undefined);
+  const releaseId = candidate?.release.id ?? '';
+  useEffect(() => { setPreview(false); setApplyCover(false); setApplyMetadata(false); }, [releaseId, report.data?.input_hash]);
+  const cover = useQuery({
+    queryKey: ['upload-release-cover', id, scopeId, releaseId, report.data?.input_hash],
+    queryFn: () => api.releaseCover(id, releaseId, scopeId || undefined),
+    enabled: open && preview && !!releaseId,
+    retry: false,
+    staleTime: 3600000,
+  });
+  const search = useMutation({
+    mutationFn: (audio: boolean) => api.searchReleases(id, { ...(scopeId ? { group_id: scopeId } : {}), ...(audio ? { audio: true } : mbid.trim() ? { release_id: mbid.trim() } : { artist: artist.trim(), album: album.trim() }) }),
+    onSuccess: (data) => { setSelected(''); apply.reset(); qc.setQueryData(key, data); },
+  });
+  const apply = useMutation({
+    mutationFn: () => api.applyRelease(id, { ...(scopeId ? { group_id: scopeId } : {}), release_id: releaseId, apply_metadata: applyMetadata, apply_cover: applyCover }),
+    onSuccess: async (data) => {
+      qc.setQueryData(key, data);
+      setApplyCover(false); setApplyMetadata(false);
+      await qc.invalidateQueries({ queryKey: ['admin-uploads'] });
+    },
+  });
+  const kind = (value: string) => value === 'Album' ? t('release_lookup.album') : value === 'Single' ? t('release_lookup.single') : value === 'EP' ? 'EP' : value || t('release_lookup.release');
+  const stateText = needsGroup ? t('release_lookup.groups_count', { count: groups.length }) : report.data?.state === 'ready'
+    ? candidate ? `${kind(candidate.release.type)} · ${t('release_lookup.matched_count', { matched: candidate.matched, total: candidate.total })} · ${t(candidate.complete ? 'release_lookup.complete' : candidate.confidence === 'high' && candidate.missing.length > 0 && !candidate.unmatched.length ? 'release_lookup.incomplete' : 'release_lookup.partial')}`
+      : t('release_lookup.variants', { count: report.data.candidates.length })
+    : t(`release_lookup.state_${report.data?.state ?? 'searching'}`);
+
+  if (report.data?.state === 'disabled') return null;
+  return <>
+    <Button variant="ghost" onClick={() => setOpen(true)} title={t('release_lookup.title')}>
+      {report.error ? t('release_lookup.open') : stateText}
+    </Button>
+    {open && <Dialog className={u.releaseDialog} title={t('release_lookup.title')} onClose={() => setOpen(false)} footer={
+      <Button variant="primary" busy={apply.isPending} disabled={needsGroup || search.isPending || !candidate || report.data?.state !== 'ready' || (!applyMetadata && !applyCover) || (applyCover && !cover.data)} onClick={() => apply.mutate()}>
+        {t('release_lookup.apply')}
+      </Button>
+    }>
+      <div className={s.sessions}>
+        <p className={s.note}>{t('release_lookup.intro')}</p>
+        {groups.length > 1 && <>
+          <p className={s.note}>{t('release_lookup.groups_hint')}</p>
+          <label className={s.sessions}>
+            {t('release_lookup.group')}
+            <select className={s.select} value={scopeId} disabled={apply.isPending || search.isPending} onChange={(e) => {
+              const next = groups.find((g) => g.id === e.target.value)!;
+              setGroupId(next.id); setArtist(next.artist); setAlbum(next.album); setMbid(''); setSelected(''); setPreview(false); setApplyMetadata(false); setApplyCover(false); search.reset(); apply.reset();
+            }}>
+              <option value="" disabled>{t('release_lookup.choose_group')}</option>
+              {groups.map((g) => <option key={g.id} value={g.id}>{g.artist} — {g.album} · {t('release_lookup.tracks_total', { total: g.file_ids.length })}</option>)}
+            </select>
+          </label>
+          {group && <p className={s.note}>{t(group.has_cover ? 'uploads.batch_cover_present' : 'uploads.batch_cover_absent')}</p>}
+        </>}
+        <div className={u.grid}>
+          <Field label={t('uploads.meta_artist')} value={artist} onChange={setArtist} maxLength={500} />
+          <Field label={t('uploads.meta_album')} value={album} onChange={setAlbum} maxLength={500} />
+        </div>
+        <Field label={t('release_lookup.mbid')} value={mbid} onChange={setMbid} maxLength={36} />
+        <Button busy={search.isPending} disabled={needsGroup || apply.isPending || report.data?.state === 'queued' || report.data?.state === 'searching' || (!mbid.trim() && (!artist.trim() || !album.trim()))} onClick={() => search.mutate(false)}>{t('release_lookup.search')}</Button>
+        <Button busy={search.isPending && search.variables === true} disabled={needsGroup || !report.data?.audio_available || search.isPending || apply.isPending || report.data?.state === 'queued' || report.data?.state === 'searching'} onClick={() => search.mutate(true)}>{t('release_lookup.audio_search')}</Button>
+        <p className={s.note}>{t(report.data?.audio_available ? 'release_lookup.audio_privacy' : 'release_lookup.audio_setup')}</p>
+        <p role="status" className={s.note}>{stateText}</p>
+        {!!report.data?.audio_results?.length && <>
+          <p className={s.note}>{t('release_lookup.audio_summary', { matched: report.data.audio_results.filter((r) => r.state === 'matched').length, total: report.data.audio_results.length })}</p>
+          {report.data.audio_results.filter((r) => r.state !== 'matched').map((r) => <div key={r.file_id} className={u.sub}>{files.find((f) => f.id === r.file_id)?.original_name ?? r.file_id}: {t(r.state === 'ambiguous' ? 'release_lookup.audio_ambiguous' : r.state === 'not_found' ? 'release_lookup.audio_not_found' : 'release_lookup.audio_unavailable')}</div>)}
+          <p className={s.note}>{t('release_lookup.audio_editions')}</p>
+        </>}
+        <FormError>{(report.error ?? search.error ?? apply.error) ? errorText(report.error ?? search.error ?? apply.error) : null}</FormError>
+        {report.data?.state === 'ready' && report.data.candidates.length > 0 && <>
+          {report.data.candidates.length > 1 && <label className={s.sessions}>
+            {t('release_lookup.edition')}
+            <select className={s.select} value={releaseId} disabled={apply.isPending || search.isPending} onChange={(e) => { setSelected(e.target.value); apply.reset(); }}>
+              <option value="" disabled>{t('release_lookup.choose_edition')}</option>
+              {report.data.candidates.map((c) => <option key={c.release.id} value={c.release.id}>{c.release.artist} — {c.release.title} · {[c.release.date, c.release.country, c.release.comment, t('release_lookup.tracks_total', { total: c.total })].filter(Boolean).join(' · ')}</option>)}
+            </select>
+          </label>}
+          {candidate && <>
+          <strong>{candidate.release.artist} — {candidate.release.title}</strong>
+          <span className={s.note}>{[kind(candidate.release.type), candidate.release.date, candidate.release.country, candidate.release.comment].filter(Boolean).join(' · ')}</span>
+          <a href={`https://musicbrainz.org/release/${encodeURIComponent(releaseId)}`} target="_blank" rel="noreferrer">MusicBrainz</a>
+          <p className={s.note}>{t('release_lookup.confidence', { value: t(candidate.confidence === 'high' ? 'release_lookup.confidence_high' : candidate.confidence === 'medium' ? 'release_lookup.confidence_medium' : 'release_lookup.confidence_low') })}</p>
+          <p className={s.note}>{t('release_lookup.coverage', { matched: candidate.matched, total: candidate.total, missing: candidate.missing.length, extra: candidate.unmatched.length })}</p>
+          {candidate.existing.length > 0 && <p className={s.note}>{t('release_lookup.existing', { count: candidate.existing.length })}</p>}
+          <div className={s.tableWrap}>
+            <table className={s.table}>
+              <thead><tr><th>#</th><th>{t('release_lookup.uploaded')}</th><th>{t('release_lookup.catalogue')}</th></tr></thead>
+              <tbody>{candidate.release.tracks.map((track, index) => {
+                const match = candidate.matches.find((m) => m.track_index === index);
+                const file = files.find((f) => f.id === match?.file_id);
+                return <tr key={`${track.disc}:${track.position}:${index}`}>
+                  <td>{track.disc}.{track.position}</td>
+                  <td className={u.releaseCell}>{match ? file?.metadata ? `${file.metadata.artist} — ${file.metadata.title}` : file?.original_name ?? t('release_lookup.matched') : t('release_lookup.missing')}
+                    {file?.metadata && <div className={u.sub}>{[file.metadata.albumartist, file.metadata.album, file.metadata.year, `${file.metadata.disc ?? 1}.${file.metadata.track ?? '?'}`].filter(Boolean).join(' · ')}</div>}
+                    {match?.method === 'acoustid' && <div className={u.sub}>{t('release_lookup.audio_match')}</div>}
+                    {match?.confidence === 'medium' && <div className={u.warn}>{t('release_lookup.tentative')}</div>}</td>
+                  <td className={u.releaseCell}>{track.artist} — {track.title}</td>
+                </tr>;
+              })}</tbody>
+            </table>
+          </div>
+          <label><input type="checkbox" checked={applyMetadata} disabled={apply.isPending || search.isPending || !candidate.matches.length} onChange={(e) => setApplyMetadata(e.target.checked)} /> {t('release_lookup.apply_metadata')}</label>
+          <Button busy={cover.isFetching} onClick={() => setPreview(true)}>{t('release_lookup.preview_cover')}</Button>
+          {preview && cover.error && <FormError>{errorText(cover.error)}</FormError>}
+          {preview && cover.data && <>
+            <img className={u.releaseCover} width={180} height={180} src={`data:${cover.data.mime_type};base64,${cover.data.image_base64}`} alt={t('uploads.batch_cover')} />
+            <span className={s.note}>{t(cover.data.exact_release ? 'release_lookup.exact_cover' : 'release_lookup.group_cover')}</span>
+            <a href={cover.data.source_url} target="_blank" rel="noreferrer">Cover Art Archive</a>
+            <label><input type="checkbox" checked={applyCover} disabled={apply.isPending} onChange={(e) => setApplyCover(e.target.checked)} /> {t(group ? group.has_cover ? 'release_lookup.replace_group_cover' : 'release_lookup.apply_group_cover' : first.batch_has_cover ? 'release_lookup.replace_cover' : 'release_lookup.apply_cover')}</label>
+          </>}
+          {report.data.selected_release === releaseId && <p role="status" className={s.ok}>{t('release_lookup.applied')}</p>}
+          </>}
+        </>}
+      </div>
+    </Dialog>}
+  </>;
+}

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

@@ -1,6 +1,10 @@
 import { formatBytes, formatDateTime, formatDuration } from '../../shared/lib/format';
-import { editIcon, refreshIcon } from '../../shared/ui/icons';
+import { chevronRightIcon, editIcon, refreshIcon } from '../../shared/ui/icons';
+import { useId, useState } from 'react';
 import { needsFormatAttention } from './files';
+import { AudioPreview } from './AudioPreview';
+import { batchSummary } from './batchSummary';
+import { BatchRelease, type ReleaseGroup } from './BatchRelease';
 import { UploadStatusBadge, useReasonText, type UploadFile } from './common';
 import { useTranslation } from 'react-i18next';
 import { Button, cx, Icon } from '../../shared/ui/ui';
@@ -24,31 +28,69 @@ export function BatchCard({
   onRetry: (id: string) => void;
 }) {
   const { t, i18n } = useTranslation('admin');
+  const [collapsed, setCollapsed] = useState(true);
+  const [releaseGroups, setReleaseGroups] = useState<ReleaseGroup[]>([]);
+  const contentId = useId();
   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);
+  const summary = batchSummary(files);
+  const metadata = first.metadata;
+  const albumArtist = metadata?.albumartist || metadata?.artist || '';
+  const singleAlbum = releaseGroups.length === 1 ? releaseGroups[0]
+    : releaseGroups.length === 0 && metadata?.album && files.every((file) =>
+      file.metadata?.album.trim().toLowerCase() === metadata.album.trim().toLowerCase()
+      && (file.metadata.albumartist || file.metadata.artist || '').trim().toLowerCase() === albumArtist.trim().toLowerCase())
+      ? { artist: albumArtist, album: metadata.album } : undefined;
+  const albumTitle = singleAlbum?.album && singleAlbum.album.trim().toLowerCase() !== 'unknown album'
+    ? [singleAlbum.artist.trim().toLowerCase() === 'unknown artist' ? '' : singleAlbum.artist, singleAlbum.album].filter(Boolean).join(' — ')
+    : undefined;
   return (
     <section className={u.batch} aria-label={t('uploads.batch_of', { author: first.author.username })}>
       <div className={u.batchHead}>
+        <Button variant="ghost" className={u.batchToggle} aria-label={t(collapsed ? 'uploads.expand_batch' : 'uploads.collapse_batch')} title={t(collapsed ? 'uploads.expand_batch' : 'uploads.collapse_batch')} aria-expanded={!collapsed} aria-controls={contentId} onClick={() => setCollapsed((value) => !value)}>
+          <Icon src={chevronRightIcon} size={20} className={!collapsed ? u.batchExpanded : undefined} />
+        </Button>
         {selectable && (
           <input type="checkbox" aria-label={t('uploads.select_batch')} checked={all} onChange={(e) => onToggle(ids, e.target.checked)} />
         )}
-        <b>{first.author.username}</b>
+        {albumTitle ? <div className={u.batchIdentity}>
+          <strong title={albumTitle}>{albumTitle}</strong>
+          <span>{first.author.username}</span>
+        </div> : <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>{summary.formats.map(([format, count]) => `${count} × ${format || t('uploads.format_unknown')}`).join(' · ')}</span>
+        {summary.quality && <span>{summary.quality}</span>}
+        <span className={cx(s.badge, first.batch_has_cover ? u.tone_info : u.tone_muted)}>
+          {t(first.batch_has_cover ? 'uploads.batch_cover_present' : 'uploads.batch_cover_absent')}
+        </span>
         <span style={{ flex: 1 }} />
+        {selectable && <BatchRelease files={files} onGroupsChange={setReleaseGroups} />}
         {selectable && (
           <Button variant="ghost" onClick={() => onEditBatch(first.batch_id)}>
             {t('uploads.edit_batch')}
           </Button>
         )}
+        {first.batch_comment && <span className={u.comment}>«{first.batch_comment}»</span>}
       </div>
-      {files.map((f) => (
+      <div id={contentId} hidden={collapsed}>
+        {(releaseGroups.length > 1 ? [
+          ...releaseGroups.map((group) => ({ group, rows: files.filter((f) => group.file_ids.includes(f.id)) })),
+          { group: undefined, rows: files.filter((f) => !releaseGroups.some((g) => g.file_ids.includes(f.id))) },
+        ] : [{ group: undefined, rows: files }]).filter((part) => part.rows.length > 0).map((part) => <div key={part.group?.id ?? 'other'}>
+          {part.group && <div className={u.releaseHead}>
+            {selectable && <input type="checkbox" aria-label={t('release_lookup.select_group', { album: part.group.album })} checked={part.rows.every((f) => selected.has(f.id))} onChange={(e) => onToggle(part.rows.map((f) => f.id), e.target.checked)} />}
+            <strong>{part.group.artist} — {part.group.album}</strong>
+            <span>{t('release_lookup.tracks_total', { total: part.group.file_ids.length })}</span>
+            <span>{t(part.group.has_cover ? 'uploads.batch_cover_present' : 'uploads.batch_cover_absent')}</span>
+          </div>}
+        {part.rows.map((f) => (
           <QueueRow
             key={f.id}
             file={f}
+            active={!collapsed}
             selectable={selectable}
             checked={selected.has(f.id)}
             onCheck={(on) => onToggle([f.id], on)}
@@ -56,12 +98,15 @@ export function BatchCard({
             onRetry={() => onRetry(f.id)}
           />
         ))}
+        </div>)}
+      </div>
     </section>
   );
 }
 
 function QueueRow({
   file: f,
+  active,
   selectable,
   checked,
   onCheck,
@@ -69,6 +114,7 @@ function QueueRow({
   onRetry,
 }: {
   file: UploadFile;
+  active: boolean;
   selectable: boolean;
   checked: boolean;
   onCheck: (on: boolean) => void;
@@ -127,15 +173,14 @@ function QueueRow({
             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 && (!editable || f.target_rel_path) && <span className={f.status === 'pending_review' ? u.warn : u.bad}>{reason}</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 })} />
+          <AudioPreview url={f.stream_url} name={f.original_name} active={active} />
         )}
         {editable && (
           <Button variant="ghost" aria-label={t('uploads.edit', { name: f.original_name })} onClick={onEdit}>
@@ -148,6 +193,23 @@ function QueueRow({
           </Button>
         )}
       </div>
+      {(editable || f.target_rel_path) && (
+        <div className={u.placement} role="group" aria-label={t('uploads.destination')}>
+          <span className={u.placementLabel}>{t(f.status === 'imported' ? 'uploads.destination_imported' : 'uploads.destination')}</span>
+          <strong>{f.target_source_name ?? t(f.target_source_id ? 'uploads.target_selected' : 'uploads.target_not_selected')}</strong>
+          {f.target_rel_path ? (
+            <code className={u.target} title={f.target_storage_path ?? undefined}>{f.target_rel_path}</code>
+          ) : (
+            <>
+              <span className={u.warn}>{t('uploads.target_path_missing')}</span>
+              {reason && <span className={u.warn}>{reason}</span>}
+              <Button variant="secondary" onClick={onEdit}>
+                {t(f.target_source_id ? 'uploads.fix_destination' : 'uploads.choose_destination')}
+              </Button>
+            </>
+          )}
+        </div>
+      )}
     </div>
   );
 }

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

@@ -0,0 +1,20 @@
+import { createApiClient } from '@pipu/api-client';
+import { describe, expect, it } from 'vitest';
+
+describe('upload status query serialization', () => {
+  it('sends comma-separated statuses for own and admin queues, including batch selection', async () => {
+    const urls: URL[] = [];
+    const client = createApiClient({ baseUrl: 'https://pipu.test', fetch: async (input) => {
+      urls.push(new URL((input as Request).url));
+      return new Response(JSON.stringify({ items: [], next_cursor: null }), { headers: { 'Content-Type': 'application/json' } });
+    } });
+    await client.GET('/api/v1/uploads/mine', { params: { query: { status: ['pending_review', 'imported', 'expired'], limit: 50 } } });
+    await client.GET('/api/v1/admin/uploads', { params: { query: { status: ['uploading', 'processing'], limit: 100 } } });
+    await client.GET('/api/v1/uploads/mine', { params: { query: { batch: '00000000-0000-4000-8000-000000000001', status: ['uploading', 'processing', 'pending_review'] } } });
+    expect(urls.map((url) => url.searchParams.getAll('status'))).toEqual([
+      ['pending_review,imported,expired'], ['uploading,processing'], ['uploading,processing,pending_review'],
+    ]);
+    expect(urls[0]!.searchParams.get('limit')).toBe('50');
+    expect(urls[2]!.searchParams.get('batch')).toBe('00000000-0000-4000-8000-000000000001');
+  });
+});

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

@@ -8,6 +8,10 @@ type SettingsPatch = paths['/api/v1/admin/settings/uploads']['patch']['requestBo
 /** The feature owns transport mapping; views only provide form values. */
 export function uploadsApi(client: ApiClient) {
   return {
+    releaseReport: async (id: string, group_id?: string) => unwrap(await client.GET('/api/v1/admin/uploads/batches/{id}/releases', { params: { path: { id }, query: group_id ? { group_id } : {} } })),
+    searchReleases: async (id: string, body: paths['/api/v1/admin/uploads/batches/{id}/releases']['post']['requestBody']['content']['application/json']) => unwrap(await client.POST('/api/v1/admin/uploads/batches/{id}/releases', { params: { path: { id } }, body })),
+    releaseCover: async (id: string, release_id: string, group_id?: string) => unwrap(await client.GET('/api/v1/admin/uploads/batches/{id}/releases/{release_id}/cover', { params: { path: { id, release_id }, query: group_id ? { group_id } : {} } })),
+    applyRelease: async (id: string, body: paths['/api/v1/admin/uploads/batches/{id}/release']['post']['requestBody']['content']['application/json']) => unwrap(await client.POST('/api/v1/admin/uploads/batches/{id}/release', { params: { path: { id } }, body })),
     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 } },

apps/web/src/features/uploads/batchSummary.test.ts

@@ -0,0 +1,21 @@
+import { expect, it } from 'vitest';
+import { batchSummary } from './batchSummary';
+
+it('counts formats and combines measured quality ranges without repeating equal values', () => {
+  const summary = batchSummary([
+    { format: 'FLAC', original_name: 'one.flac', bitrate: 778000, sample_rate: 44100, bit_depth: 16 },
+    { format: 'flac', original_name: 'two.flac', bitrate: 924000, sample_rate: 44100, bit_depth: 16 },
+    { format: null, original_name: 'three.mp3', bitrate: 320000, sample_rate: 48000, bit_depth: null },
+  ]);
+  expect(summary.formats).toEqual([['FLAC', 2], ['MP3', 1]]);
+  expect(summary.quality).toBe('320–924 kbps · 44.1–48 kHz · 16 bit');
+});
+
+it('ignores missing and invalid measurements and retains fractional sample rates', () => {
+  expect(batchSummary([
+    { format: null, original_name: 'unknown', bitrate: 0, sample_rate: null, bit_depth: null },
+    { format: 'WAV', original_name: 'one.wav', bitrate: null, sample_rate: 11025, bit_depth: 24 },
+    { format: 'wav', original_name: 'two.wav', bitrate: NaN, sample_rate: 96000, bit_depth: 32 },
+  ])).toEqual({ formats: [['WAV', 2], ['', 1]], quality: '11.025–96 kHz · 24–32 bit' });
+  expect(batchSummary([]).quality).toBe('');
+});

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

@@ -0,0 +1,30 @@
+import type { UploadFile } from './common';
+import { audioExt } from './files';
+
+type SummaryFile = Pick<UploadFile, 'format' | 'original_name' | 'bitrate' | 'sample_rate' | 'bit_depth'>;
+
+function range(values: (number | null)[], divisor: number, decimals: number, unit: string): string | null {
+  const known = values.filter((value): value is number => value !== null && Number.isFinite(value) && value > 0);
+  if (!known.length) return null;
+  const format = (value: number) => String(Number((value / divisor).toFixed(decimals)));
+  const min = format(Math.min(...known));
+  const max = format(Math.max(...known));
+  return `${min === max ? min : `${min}–${max}`} ${unit}`;
+}
+
+/** Only measured positive values contribute to quality ranges; absent metadata is not zero. */
+export function batchSummary(files: SummaryFile[]) {
+  const counts = new Map<string, number>();
+  for (const file of files) {
+    const format = (file.format?.trim() || audioExt(file.original_name)).toUpperCase();
+    counts.set(format, (counts.get(format) ?? 0) + 1);
+  }
+  return {
+    formats: [...counts].sort(([a, ac], [b, bc]) => bc - ac || a.localeCompare(b)),
+    quality: [
+      range(files.map((file) => file.bitrate), 1000, 0, 'kbps'),
+      range(files.map((file) => file.sample_rate), 1000, 3, 'kHz'),
+      range(files.map((file) => file.bit_depth), 1, 0, 'bit'),
+    ].filter(Boolean).join(' · '),
+  };
+}

apps/web/src/features/uploads/files.test.ts

@@ -1,6 +1,19 @@
 import { describe, expect, it } from 'vitest';
 
-import { needsFormatAttention } from './files';
+import { artistImageFor, isArtistImage, needsFormatAttention } from './files';
+
+it('inherits the nearest artist portrait without crossing sibling folders', () => {
+  const root = new File(['portrait'], 'artist.jpg');
+  const local = new File(['local'], 'ARTIST.PNG');
+  const images = new Map([['творожный бизнес', root], ['творожный бизнес/Альбом', local]]);
+  expect(isArtistImage(root.name)).toBe(true);
+  expect(isArtistImage(local.name)).toBe(true);
+  expect(isArtistImage('cover.jpg')).toBe(false);
+  expect(artistImageFor('творожный бизнес/(2026) творог грехов', images)).toBe(root);
+  expect(artistImageFor('творожный бизнес/Альбом/CD1', images)).toBe(local);
+  expect(artistImageFor('другой исполнитель/Альбом', images)).toBeUndefined();
+  expect(artistImageFor('творожный бизнес 2/Альбом', images)).toBeUndefined();
+});
 
 describe('needsFormatAttention', () => {
   it('marks everything except lossless formats', () => {

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

@@ -1,4 +1,31 @@
 // Сбор файлов из drag-and-drop и выбора папки с относительными путями (они подсказывают альбом, docs/uploads.md#5).
+import { ApiError } from '@pipu/core';
+
+const MAX_COVER_BYTES = 8 * 1024 * 1024;
+
+/** Reduce oversized artwork before base64 expansion; small covers keep their original bytes. */
+async function prepareCover(file: File): Promise<Blob> {
+  if (file.size <= MAX_COVER_BYTES) return file;
+  let image: ImageBitmap;
+  try { image = await createImageBitmap(file); }
+  catch { throw new ApiError(422, 'validation.cover_type'); }
+  try {
+    const scale = Math.min(1, 2048 / Math.max(image.width, image.height));
+    const canvas = document.createElement('canvas');
+    canvas.width = Math.max(1, Math.round(image.width * scale));
+    canvas.height = Math.max(1, Math.round(image.height * scale));
+    const context = canvas.getContext('2d');
+    if (!context) throw new ApiError(422, 'validation.cover_type');
+    context.fillStyle = '#fff';
+    context.fillRect(0, 0, canvas.width, canvas.height);
+    context.drawImage(image, 0, 0, canvas.width, canvas.height);
+    for (const quality of [0.9, 0.75]) {
+      const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/jpeg', quality));
+      if (blob && blob.size <= MAX_COVER_BYTES) return blob;
+    }
+    throw new ApiError(422, 'validation.cover_too_large');
+  } finally { image.close(); }
+}
 
 export interface PickedFile {
   file: File;
@@ -30,6 +57,40 @@ export function isAudio(name: string): boolean {
   return AUDIO_EXTENSIONS.includes(ext);
 }
 
+export function isAlbumCover(name: string): boolean {
+  return /^(cover|folder|front)\.(jpe?g|png|webp)$/i.test(name.split(/[/\\]/).pop() ?? name);
+}
+
+export function isArtistImage(name: string): boolean {
+  return /^artist\.(jpe?g|png|webp)$/i.test(name.split(/[/\\]/).pop() ?? name);
+}
+
+/** The nearest ancestor wins; sibling artist folders must never share portraits. */
+export function artistImageFor(folder: string, images: ReadonlyMap<string, File>): File | undefined {
+  for (;;) {
+    const image = images.get(folder);
+    if (image) return image;
+    if (!folder) return undefined;
+    folder = albumFolder(folder);
+  }
+}
+
+export function albumFolder(relPath: string): string {
+  const path = relPath.replaceAll('\\', '/');
+  const at = path.lastIndexOf('/');
+  return at < 0 ? '' : path.slice(0, at);
+}
+
+export async function coverBase64(file: File): Promise<string> {
+  const prepared = await prepareCover(file);
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result).split(',')[1]!);
+    reader.onerror = () => reject(reader.error);
+    reader.readAsDataURL(prepared);
+  });
+}
+
 /** Файлы из <input type="file"> (в том числе webkitdirectory — тогда путь есть в webkitRelativePath). */
 export function fromInput(list: FileList | null): PickedFile[] {
   return [...(list ?? [])].map((file) => ({ file, relPath: file.webkitRelativePath || file.name }));

apps/web/src/features/uploads/hash.worker.ts

@@ -1,7 +1,7 @@
 /// <reference lib="webworker" />
 // SHA-256 файла потоком (docs/uploads.md#4): Web Crypto не умеет считать по частям, а файлы бывают по 2 ГБ —
-// hash-wasm считает чанками в воркере, не держа файл в памяти и не блокируя интерфейс.
+// js-sha256 считает чанками в воркере без WebAssembly: работает и со строгим CSP у прокси.
-import { createSHA256 } from 'hash-wasm';
+import { sha256 } from 'js-sha256';
 
 export interface HashRequest {
   id: string;
@@ -18,8 +18,7 @@ const ctx = self as unknown as DedicatedWorkerGlobalScope;
 ctx.onmessage = async (e: MessageEvent<HashRequest>) => {
   const { id, file } = e.data;
   try {
-    const h = await createSHA256();
+    const h = sha256.create();
-    h.init();
     const reader = file.stream().getReader();
     let done = 0;
     let lastReport = 0;
@@ -33,7 +32,7 @@ ctx.onmessage = async (e: MessageEvent<HashRequest>) => {
         ctx.postMessage({ id, type: 'progress', done } satisfies HashResponse);
       }
     }
-    ctx.postMessage({ id, type: 'done', sha256: h.digest('hex') } satisfies HashResponse);
+    ctx.postMessage({ id, type: 'done', sha256: h.hex() } satisfies HashResponse);
   } catch (err) {
     ctx.postMessage({ id, type: 'error', message: err instanceof Error ? err.message : String(err) } satisfies HashResponse);
   }

apps/web/src/features/uploads/uploader.test.ts

@@ -0,0 +1,101 @@
+import { AuthSession } from '@pipu/core';
+import { waitFor } from '@testing-library/react';
+import { afterEach, expect, it, vi } from 'vitest';
+import { Uploader } from './uploader';
+
+vi.mock('music-metadata', () => ({
+  parseBlob: vi.fn(async (file: File) => ({
+    format: {}, common: file.name.startsWith('01') ? { picture: [{ data: new Uint8Array([0xff, 0xd8, 0xff, 1]), format: 'image/jpeg', type: 'Cover (front)' }] } : {},
+  })),
+}));
+vi.mock('tus-js-client', () => ({
+  Upload: class {
+    constructor(_file: File, private options: { onSuccess: () => void }) {}
+    start() { queueMicrotask(this.options.onSuccess); }
+  },
+}));
+
+afterEach(() => { vi.unstubAllGlobals(); localStorage.clear(); });
+
+it('keeps external and embedded album covers in separate batches without skipping images', async () => {
+  vi.stubGlobal('Worker', class extends EventTarget {
+    postMessage({ id }: { id: string }) {
+      queueMicrotask(() => this.dispatchEvent(new MessageEvent('message', { data: { id, type: 'done', sha256: id.padEnd(64, '0') } })));
+    }
+  });
+  const batches: { cover_base64?: string; files: { client_id: string; rel_path: string }[] }[] = [];
+  const session = new AuthSession({ baseUrl: 'http://localhost', clientType: 'web', fetch: async (input) => {
+    const req = input as Request;
+    const body = await req.json();
+    const data = req.url.endsWith('/precheck')
+      ? { files: body.files.map((f: { client_id: string }) => ({ client_id: f.client_id, result: 'accepted' })) }
+      : (batches.push(body), { batch_id: String(batches.length), files: body.files.map((f: { client_id: string }) => ({ client_id: f.client_id, upload_file_id: f.client_id, tus_url: `/files/${f.client_id}` })) });
+    return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
+  } });
+  const uploader = new Uploader(session);
+  uploader.add([
+    { file: new File(['external-image'], 'Cover.jpg'), relPath: 'A/Cover.jpg' },
+    { file: new File(['audio'], '02.flac'), relPath: 'A/02.flac' },
+    { file: new File(['audio'], '01.flac'), relPath: 'A/01.flac' },
+    { file: new File(['audio'], '02.flac'), relPath: 'B/02.flac' },
+    { file: new File(['audio'], '01.flac'), relPath: 'B/01.flac' },
+  ]);
+  await waitFor(() => expect(uploader.ready).toHaveLength(4));
+  expect(uploader.getState().skipped).toBe(0);
+  expect(uploader.getState().items.find((f) => f.relPath === 'A/01.flac')?.coverName).toBe('Cover.jpg');
+  expect(uploader.getState().items.find((f) => f.relPath === 'B/01.flac')?.coverName).toBe('embedded-cover');
+  await uploader.start('Two albums');
+  expect(batches).toHaveLength(2);
+  expect(batches[0]!.cover_base64).toBe(btoa('external-image'));
+  expect(batches[1]!.cover_base64).toBe(btoa(String.fromCharCode(0xff, 0xd8, 0xff, 1)));
+  expect(batches[0]!.files.map((f) => f.rel_path)).toEqual(['A/01.flac', 'A/02.flac']);
+  expect(batches[1]!.files.map((f) => f.rel_path)).toEqual(['B/01.flac', 'B/02.flac']);
+  expect(uploader.getState().items.every((f) => f.stage === 'done')).toBe(true);
+});
+
+it('splits an artist discography into album batches and inherits only that artist portrait', async () => {
+  vi.stubGlobal('Worker', class extends EventTarget {
+    postMessage({ id }: { id: string }) {
+      queueMicrotask(() => this.dispatchEvent(new MessageEvent('message', { data: { id, type: 'done', sha256: id.padEnd(64, '0') } })));
+    }
+  });
+  const batches: { artist_image_base64?: string; cover_base64?: string; files: { client_id: string; rel_path: string }[] }[] = [];
+  const session = new AuthSession({ baseUrl: 'http://localhost', clientType: 'web', fetch: async (input) => {
+    const req = input as Request;
+    const body = await req.json();
+    const data = req.url.endsWith('/precheck')
+      ? { files: body.files.map((f: { client_id: string }) => ({ client_id: f.client_id, result: 'accepted' })) }
+      : (batches.push(body), { batch_id: String(batches.length), files: body.files.map((f: { client_id: string }) => ({ client_id: f.client_id, upload_file_id: f.client_id, tus_url: `/files/${f.client_id}` })) });
+    return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
+  } });
+  const uploader = new Uploader(session);
+  const first = 'творожный бизнес/(2026) творог грехов - творожный бизнес';
+  const second = 'творожный бизнес/(2025) молчанка - творожный бизнес';
+  uploader.add([
+    { file: new File(['portrait'], 'artist.jpg'), relPath: 'творожный бизнес/artist.jpg' },
+    { file: new File(['cover'], 'cover.jpg'), relPath: `${first}/cover.jpg` },
+    { file: new File(['a'], '02.flac'), relPath: `${first}/02.flac` },
+    { file: new File(['b'], '03.flac'), relPath: `${first}/03.flac` },
+    { file: new File(['c'], '02.flac'), relPath: `${second}/02.flac` },
+    { file: new File(['d'], '02.flac'), relPath: 'Другой исполнитель/Альбом/02.flac' },
+  ]);
+  await waitFor(() => expect(uploader.ready).toHaveLength(4));
+  expect(uploader.getState().skipped).toBe(0);
+  await uploader.start('Дискография');
+  expect(batches).toHaveLength(3);
+  const a = batches.find((batch) => batch.files[0]!.rel_path.startsWith(first))!;
+  const b = batches.find((batch) => batch.files[0]!.rel_path.startsWith(second))!;
+  const other = batches.find((batch) => batch.files[0]!.rel_path.startsWith('Другой'))!;
+  expect(a.files).toHaveLength(2);
+  expect(b.files).toHaveLength(1);
+  expect(a.artist_image_base64).toBe(btoa('portrait'));
+  expect(b.artist_image_base64).toBe(btoa('portrait'));
+  expect(a.cover_base64).toBe(btoa('cover'));
+  expect(b.cover_base64).toBeUndefined();
+  expect(other.artist_image_base64).toBeUndefined();
+  uploader.clear();
+  uploader.add([{ file: new File(['new'], '02.flac'), relPath: `${second}/02.flac` }]);
+  await waitFor(() => expect(uploader.ready).toHaveLength(1));
+  await uploader.start('New selection');
+  expect(batches[3]!.artist_image_base64).toBeUndefined();
+});

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

@@ -1,7 +1,7 @@
 import { unwrap, type AuthSession } from '@pipu/core';
 import * as tus from 'tus-js-client';
 
-import { isAudio, type PickedFile } from './files';
+import { albumFolder, artistImageFor, coverBase64, isAlbumCover, isArtistImage, isAudio, type PickedFile } from './files';
 import type { HashRequest, HashResponse } from './hash.worker';
 
 // Загрузка пачки в очередь на добавление (docs/uploads.md#5): SHA-256 в воркере → предпроверка дублей
@@ -29,6 +29,7 @@ export interface UploadItem {
   progress: number; // 0..1 текущего этапа (хэш или загрузка)
   sha256?: string;
   tags?: { artist?: string; title?: string; album?: string; duration_ms?: number };
+  coverName?: string;
   trackId?: string | null;
   possibleDuplicate?: boolean;
   code?: string; // код отказа сервера: uploads.queue_full, uploads.duplicate, …
@@ -68,7 +69,12 @@ export class Uploader {
   private hashQueue: string[] = [];
   private hashing = false;
   private uploads = new Map<string, tus.Upload>();
+  private transferQueue: { id: string; url: string }[] | null = null;
+  private transferWorkers = 0;
+  private transferDone: (() => void) | null = null;
   private refreshing: Promise<unknown> | null = null;
+  private folderCovers = new Map<string, File>();
+  private artistImages = new Map<string, File>();
 
   constructor(private readonly session: AuthSession) {
     this.restore();
@@ -97,17 +103,22 @@ export class Uploader {
   /** Добавить файлы (из перетаскивания или выбора); не-аудио отбрасываются. */
   add(files: PickedFile[]) {
     if (this.state.busy) return;
+    for (const f of files) {
+      if (isAlbumCover(f.file.name)) this.folderCovers.set(albumFolder(f.relPath), f.file);
+      if (isArtistImage(f.file.name)) this.artistImages.set(albumFolder(f.relPath), f.file);
+    }
     const fresh: UploadItem[] = [];
     let skipped = 0;
     for (const f of files) {
       if (!isAudio(f.file.name)) {
-        skipped++;
+        if (!isAlbumCover(f.file.name) && !isArtistImage(f.file.name)) skipped++;
         continue;
       }
       // Тот же путь и размер уже в списке — не добавляем второй раз.
       if (this.state.items.some((it) => it.relPath === f.relPath && it.size === f.file.size)) continue;
       fresh.push({ id: `f${++seq}`, file: f.file, size: f.file.size, relPath: f.relPath, stage: 'hashing', progress: 0 });
     }
+    fresh.sort((a, b) => a.relPath.localeCompare(b.relPath, undefined, { numeric: true }));
     this.set({ items: [...this.state.items, ...fresh], skipped: this.state.skipped + skipped, batchId: null, error: null });
     this.hashQueue.push(...fresh.map((it) => it.id));
     void this.hashNext();
@@ -124,6 +135,8 @@ export class Uploader {
   clear() {
     if (this.state.busy) return;
     this.hashQueue = [];
+    this.folderCovers.clear();
+    this.artistImages.clear();
     this.set({ items: [], skipped: 0, batchId: null, error: null });
     this.persist();
   }
@@ -217,11 +230,23 @@ export class Uploader {
     if (this.state.busy || !ready.length) return;
     this.set({ busy: true, error: null });
     try {
+      const groups = new Map<string, UploadItem[]>();
+      for (const it of ready) {
+        const folder = albumFolder(it.relPath);
+        groups.set(folder, [...(groups.get(folder) ?? []), it]);
+      }
+      const queue: { id: string; url: string }[] = [];
+      for (const [folder, group] of groups) {
+        try {
+          const cover = this.folderCovers.get(folder);
+          const artistImage = artistImageFor(folder, this.artistImages);
           const res = unwrap(
             await this.session.client.POST('/api/v1/uploads', {
               body: {
                 comment: comment.trim() || undefined,
-            files: ready.map((it) => ({
+                ...(cover ? { cover_base64: await coverBase64(cover) } : {}),
+                ...(artistImage ? { artist_image_base64: await coverBase64(artistImage) } : {}),
+                files: group.map((it) => ({
                   client_id: it.id,
                   name: it.file?.name ?? it.relPath,
                   rel_path: it.relPath.includes('/') ? it.relPath : undefined,
@@ -232,7 +257,6 @@ export class Uploader {
             }),
           );
           this.set({ batchId: res.batch_id });
-      const queue: { id: string; url: string }[] = [];
           for (const f of res.files) {
             if (f.rejected) this.patch(f.client_id, { stage: 'rejected', code: f.rejected, trackId: f.track_id });
             else if (f.tus_url && f.upload_file_id) {
@@ -241,7 +265,11 @@ export class Uploader {
             }
           }
           this.persist();
-      await Promise.all(Array.from({ length: Math.min(PARALLEL, queue.length) }, () => this.drain(queue)));
+        } catch (err) {
+          this.set({ error: err });
+        }
+      }
+      await this.transfer(queue);
     } catch (err) {
       this.set({ error: err });
     } finally {
@@ -249,24 +277,57 @@ export class Uploader {
     }
   }
 
+  get canRetryFailed(): boolean {
+    return !this.state.busy || this.transferQueue !== null;
+  }
+
   /** Повторить оборвавшиеся загрузки: место уже зарезервировано, tus продолжит с принятого смещения. */
-  async retryFailed() {
+  async retryFailed(id?: string) {
-    const failed = this.state.items.filter((it) => it.stage === 'error' && it.tusUrl);
+    const failed = this.state.items.filter((it) => it.stage === 'error' && it.tusUrl && it.file && (!id || it.id === id));
-    if (this.state.busy || !failed.length) return;
+    if (!this.canRetryFailed || !failed.length) return;
+    const queue = failed.map((it) => ({ id: it.id, url: it.tusUrl! }));
+    for (const it of failed) this.patch(it.id, { stage: 'uploading', message: undefined, code: undefined });
+    // При продолжающейся пачке ставим повтор в её очередь, сохраняя предел параллельности.
+    if (this.transferQueue) {
+      this.transferQueue.push(...queue);
+      this.pumpTransfers();
+      return;
+    }
     this.set({ busy: true, error: null });
     try {
-      const queue = failed.map((it) => {
+      await this.transfer(queue);
-        this.patch(it.id, { stage: 'uploading', message: undefined });
-        return { id: it.id, url: it.tusUrl! };
-      });
-      await Promise.all(Array.from({ length: Math.min(PARALLEL, queue.length) }, () => this.drain(queue)));
     } finally {
       this.set({ busy: false });
     }
   }
 
-  private async drain(queue: { id: string; url: string }[]) {
+  private transfer(queue: { id: string; url: string }[]): Promise<void> {
-    for (let next = queue.shift(); next; next = queue.shift()) await this.upload(next.id, next.url);
+    return new Promise((resolve) => {
+      this.transferQueue = queue;
+      this.transferDone = resolve;
+      this.pumpTransfers();
+    });
+  }
+
+  private pumpTransfers() {
+    const queue = this.transferQueue;
+    if (!queue) return;
+    while (this.transferWorkers < PARALLEL && queue.length) {
+      const next = queue.shift()!;
+      this.transferWorkers++;
+      void this.upload(next.id, next.url).catch((err: unknown) => {
+        this.patch(next.id, { stage: 'error', message: err instanceof Error ? err.message : String(err) });
+      }).finally(() => {
+        this.transferWorkers--;
+        this.pumpTransfers();
+      });
+    }
+    if (this.transferWorkers === 0) {
+      this.transferQueue = null;
+      const done = this.transferDone;
+      this.transferDone = null;
+      done?.();
+    }
   }
 
   private upload(id: string, url: string): Promise<void> {
@@ -291,7 +352,7 @@ export class Uploader {
             return true;
           }
           // Сеть, перегрузка, рассинхрон смещения — повторяем (tus-js-client спросит HEAD и продолжит).
-          return status === undefined || status === 0 || status >= 500 || status === 409 || status === 423;
+          return status === undefined || status === 0 || (status >= 500 && status !== 507) || status === 409 || status === 423;
         },
         onProgress: (sent, total) => this.patch(id, { progress: sent / Math.max(total, 1) }),
         onSuccess: () => {
@@ -302,7 +363,8 @@ export class Uploader {
         },
         onError: (err) => {
           this.uploads.delete(id);
-          this.patch(id, { stage: 'error', message: err.message });
+          const status = (err as tus.DetailedError).originalResponse?.getStatus();
+          this.patch(id, { stage: 'error', message: err.message, code: status === 507 ? 'uploads.storage_full' : undefined });
           resolve();
         },
       });
@@ -315,7 +377,12 @@ export class Uploader {
     if (!it.file) return;
     try {
       const { parseBlob } = await import('music-metadata');
-      const meta = await parseBlob(it.file);
+      const folder = albumFolder(it.relPath);
+      const meta = await parseBlob(it.file, { skipCovers: this.folderCovers.has(folder) });
+      if (!this.folderCovers.has(folder)) {
+        const picture = meta.common.picture?.find((p) => p.type === 'Cover (front)') ?? meta.common.picture?.[0];
+        if (picture) this.folderCovers.set(folder, new File([new Uint8Array(picture.data)], 'embedded-cover', { type: picture.format }));
+      }
       const duration = meta.format.duration;
       this.patch(it.id, {
         tags: {
@@ -328,6 +395,10 @@ export class Uploader {
     } catch {
       // Теги — подсказка для предпроверки; без них сервер прочитает их сам.
     }
+    const folder = albumFolder(it.relPath);
+    const cover = this.folderCovers.get(folder);
+    const first = this.state.items.find((item) => albumFolder(item.relPath) === folder);
+    if (cover && first) this.patch(first.id, { coverName: cover.name });
   }
 
   /** Незавершённые tus-загрузки переживают перезагрузку: файл выбирают заново и докачивают. */
@@ -398,7 +469,7 @@ export class Uploader {
     if (!queue.length) return;
     this.set({ busy: true });
     try {
-      await Promise.all(Array.from({ length: Math.min(PARALLEL, queue.length) }, () => this.drain(queue)));
+      await this.transfer(queue);
     } finally {
       this.set({ busy: false });
       this.persist();

apps/web/src/features/users/UserTransfer.tsx

@@ -0,0 +1,68 @@
+import { unwrap } from '@pipu/core';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useSession } from '../../app/session';
+import { useErrorText } from '../../shared/lib/errors';
+import { Button, Dialog, FormError } from '../../shared/ui/ui';
+import s from '../../pages/page.module.css';
+import { downloadUserArchive, MAX_ARCHIVE_BYTES, parseUserArchive, type UserArchive } from './transfer';
+
+export function UserTransfer() {
+  const { t } = useTranslation(['admin', 'common']);
+  const session = useSession();
+  const queryClient = useQueryClient();
+  const errorText = useErrorText();
+  const [open, setOpen] = useState(false);
+  const [archive, setArchive] = useState<UserArchive | null>(null);
+  const [fileError, setFileError] = useState(false);
+  const [reading, setReading] = useState(false);
+  const exporting = useMutation({
+    mutationFn: async () => downloadUserArchive(unwrap(await session.client.GET('/api/v1/admin/users/export'))),
+  });
+  const importing = useMutation({
+    mutationFn: async () => unwrap(await session.client.POST('/api/v1/admin/users/import', { body: archive! })),
+    onSuccess: () => { setArchive(null); void queryClient.invalidateQueries({ queryKey: ['admin-users'] }); },
+  });
+  const busy = importing.isPending || reading;
+  const close = () => { if (!busy) { setOpen(false); setArchive(null); } };
+
+  const read = async (file: File | undefined) => {
+    setArchive(null);
+    setFileError(false);
+    importing.reset();
+    if (!file) return;
+    setReading(true);
+    try {
+      if (file.size > MAX_ARCHIVE_BYTES) throw new Error('size');
+      setArchive(parseUserArchive(await file.text()));
+    } catch { setFileError(true); }
+    finally { setReading(false); }
+  };
+
+  return <>
+    <Button busy={exporting.isPending} onClick={() => exporting.mutate()}>{t('transfer.export')}</Button>
+    <Button onClick={() => { importing.reset(); setFileError(false); setOpen(true); }}>{t('transfer.import')}</Button>
+    <FormError>{exporting.error ? errorText(exporting.error) : null}</FormError>
+    {open && <Dialog title={t('transfer.import')} onClose={close} footer={<>
+      <Button variant="ghost" disabled={busy} onClick={close}>{t('common:form.close')}</Button>
+      <Button variant="primary" busy={importing.isPending} disabled={!archive || busy} onClick={() => importing.mutate()}>
+        {t('transfer.apply')}
+      </Button>
+    </>}>
+      <p className={s.note}>{t('transfer.description')}</p>
+      <p className={s.note}>{t('transfer.sensitive')}</p>
+      <label className={s.sessions}>
+        <span>{t('transfer.file')}</span>
+        <input type="file" accept=".json,application/json" disabled={busy} onChange={(e) => void read(e.target.files?.[0])} />
+      </label>
+      {archive && <p className={s.note}>{t('transfer.preview', { count: archive.users.length })}</p>}
+      <FormError>{fileError ? t('transfer.invalid') : importing.error ? errorText(importing.error) : null}</FormError>
+      {importing.data && <div role="status">
+        <p>{t('transfer.result', { count: importing.data.created, skipped: importing.data.skipped.length })}</p>
+        {importing.data.skipped.length > 0 && <p className={s.note}>{importing.data.skipped.join(', ')}</p>}
+      </div>}
+    </Dialog>}
+  </>;
+}

apps/web/src/features/users/transfer.test.ts

@@ -0,0 +1,18 @@
+import { describe, expect, it } from 'vitest';
+import { parseUserArchive } from './transfer';
+
+describe('user archive preview', () => {
+  const entry = { username: 'alice', role: 'user', password_hash: '$argon2id$hash' };
+  it('accepts a versioned export and a UTF-8 BOM', () => {
+    const archive = { version: 1, users: [entry] };
+    expect(parseUserArchive(`\uFEFF${JSON.stringify(archive)}`)).toEqual(archive);
+  });
+  it.each([
+    '{}', '{"version":2,"users":[]}', '{"version":1,"users":{}}',
+    JSON.stringify({ version: 1, users: [{ ...entry, role: 'owner' }] }),
+    JSON.stringify({ version: 1, users: [{ username: 'alice', role: 'user' }] }),
+    JSON.stringify({ version: 1, users: Array(10001).fill(entry) }),
+  ])('rejects unsupported or malformed input', (text) => {
+    expect(() => parseUserArchive(text)).toThrow();
+  });
+});

apps/web/src/features/users/transfer.ts

@@ -0,0 +1,29 @@
+import type { components } from '@pipu/api-client';
+
+export type UserArchive = components['schemas']['UserArchive'];
+export const MAX_ARCHIVE_BYTES = 16 * 1024 * 1024;
+
+/** Only previews metadata; the server validates every account before writing. */
+export function parseUserArchive(text: string): UserArchive {
+  const data: unknown = JSON.parse(text.replace(/^\uFEFF/, ''));
+  if (!data || typeof data !== 'object' || !('version' in data) || data.version !== 1 ||
+      !('users' in data) || !Array.isArray(data.users) || data.users.length > 10000) throw new Error('archive');
+  for (const entry of data.users) {
+    if (!entry || typeof entry !== 'object' || typeof entry.username !== 'string' ||
+        !['admin', 'moderator', 'user'].includes(entry.role) || typeof entry.password_hash !== 'string') {
+      throw new Error('archive');
+    }
+  }
+  return data as UserArchive;
+}
+
+export function downloadUserArchive(archive: UserArchive) {
+  const url = URL.createObjectURL(new Blob([JSON.stringify(archive, null, 2)], { type: 'application/json' }));
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = 'pipu-users.json';
+  document.body.append(link);
+  link.click();
+  link.remove();
+  setTimeout(() => URL.revokeObjectURL(url), 1000);
+}

apps/web/src/pages/PlaylistsPage.tsx

@@ -1,5 +1,5 @@
 import { unwrap } from '@pipu/core';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { Link, useNavigate } from '@tanstack/react-router';
 import { useState, type MouseEvent } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -9,7 +9,9 @@ import { PlaylistEditor, playlistInput, usePlaylist, usePlaylists, type Playlist
 import type { components } from '@pipu/api-client';
 import { usePlayer } from '../player/context';
 import { useErrorText } from '../shared/lib/errors';
-import { sharePlaylist } from '../shared/lib/share';
+import { playlistShareUrl } from '@pipu/core';
+import { desktopHandle } from '../desktop';
+import { useMusicShare } from '../features/social/Social';
 import { formatDuration } from '../shared/lib/format';
 import { Button, Dialog, EmptyState, Field, FormError, Icon, PageSkeleton } from '../shared/ui/ui';
 import { playIcon, playlistAddIcon, searchIcon, shuffleIcon, shareIcon } from '../shared/ui/icons';
@@ -55,7 +57,21 @@ export function PlaylistPage({ id, shared = false }: { id: string; shared?: bool
   </div>;
 }
 
-function PlaylistDetail({ playlist, readOnly = false, shareId }: { playlist: Playlist; readOnly?: boolean; shareId?: string }) {
+export function ActivityPlaylistPage({ userId }: { userId: string }) {
+  const session = useSession();
+  const errorText = useErrorText();
+  const { t } = useTranslation();
+  const query = useQuery({ queryKey: ['activity-playlist', session.state.status === 'signed_in' ? session.state.user.id : '', userId], queryFn: async () => unwrap(await session.client.GET('/api/v1/social/activity/{userId}/playlist', { params: { path: { userId } } })), staleTime: 0, refetchInterval: 15_000 });
+  return <div className={s.page}>
+    <Link to="/friends">← {t('social.title')}</Link>
+    <FormError>{query.error ? errorText(query.error) : null}</FormError>
+    {query.isPending && <PageSkeleton />}
+    {query.data && !query.isError && <PlaylistDetail key={query.data.id} playlist={query.data} readOnly activity />}
+  </div>;
+}
+
+function PlaylistDetail({ playlist, readOnly = false, shareId, activity = false }: { playlist: Playlist; readOnly?: boolean; shareId?: string; activity?: boolean }) {
+  const openShare = useMusicShare();
   const { t } = useTranslation();
   const session = useSession();
   const cache = useQueryClient();
@@ -65,20 +81,17 @@ function PlaylistDetail({ playlist, readOnly = false, shareId }: { playlist: Pla
   const [edit, setEdit] = useState(false);
   const [remove, setRemove] = useState(false);
   const [manage, setManage] = useState(false);
-  const [copied, setCopied] = useState(false);
   const sharing = useMutation({ mutationFn: async () => {
-    setCopied(false);
     let token = shareId ?? playlist.share_id;
     if (!readOnly) {
       token = unwrap(await session.client.POST('/api/v1/me/playlists/{id}/share', { params: { path: { id: playlist.id } } })).share_id;
       cache.setQueryData<Playlist>(['playlists', playlist.id], current => current ? { ...current, share_id: token } : current);
     }
     if (!token) throw new Error('Share link unavailable');
-    const result = await sharePlaylist(token, playlist.name);
+    openShare({ attachment: { kind: 'playlist', id: token, title: playlist.name }, url: playlistShareUrl(desktopHandle()?.server ?? window.location.origin, token) });
-    if (result === 'copied') setCopied(true);
   } });
   const revoke = useMutation({ mutationFn: async () => unwrap(await session.client.DELETE('/api/v1/me/playlists/{id}/share', { params: { path: { id: playlist.id } } })),
-    onSuccess: () => { setCopied(false); cache.setQueryData<Playlist>(['playlists', playlist.id], current => current ? { ...current, share_id: null } : current); cache.removeQueries({ queryKey: ['shared-playlists', playlist.share_id] }); } });
+    onSuccess: () => { cache.setQueryData<Playlist>(['playlists', playlist.id], current => current ? { ...current, share_id: null } : current); cache.removeQueries({ queryKey: ['shared-playlists', playlist.share_id] }); } });
 
   const context = { type: 'collection' as const, id: playlist.id, label: playlist.name };
   const save = useMutation({ mutationFn: async (ids: string[]) => unwrap(await session.client.PUT('/api/v1/me/playlists/{id}', {
@@ -108,7 +121,7 @@ function PlaylistDetail({ playlist, readOnly = false, shareId }: { playlist: Pla
     <div className={s.toolbar}>
       <Button variant="primary" icon={playIcon} disabled={!playlist.tracks.some(x => x.available)} onClick={() => play(false)}>{t('collection.play_all')}</Button>
       <Button icon={shuffleIcon} disabled={!playlist.tracks.some(x => x.available)} onClick={() => play(true)}>{t('collection.shuffle')}</Button>
-      <Button icon={shareIcon} busy={sharing.isPending} disabled={revoke.isPending} onClick={() => sharing.mutate()}>{t('playlists.share')}</Button>
+      {!activity && <Button icon={shareIcon} busy={sharing.isPending} disabled={revoke.isPending} onClick={() => sharing.mutate()}>{t('playlists.share')}</Button>}
       {!readOnly && <>
       <Button disabled={save.isPending} onClick={() => setEdit(true)}>{t('playlists.edit')}</Button>
       <Button aria-pressed={manage} onClick={() => setManage(!manage)}>{t('playlists.manage')}</Button>
@@ -117,7 +130,6 @@ function PlaylistDetail({ playlist, readOnly = false, shareId }: { playlist: Pla
       </>}
     </div>
     {!readOnly && <p>{t('playlists.share_hint')}</p>}
-    {copied && <p role="status">{t('playlists.link_copied')}</p>}
     <FormError>{sharing.error ? t('player.share_error') : revoke.error ? errorText(revoke.error) : null}</FormError>
     <FormError>{save.error ? errorText(save.error) : null}</FormError>
     {!playlist.tracks.length && (

apps/web/src/pages/SettingsPage.tsx

@@ -13,6 +13,7 @@ import { Button, Field, FormError, Segmented } from '../shared/ui/ui';
 import { LanguageSwitch } from '../widgets/LanguageSwitch';
 import s from './page.module.css';
 import { Onboarding } from './Onboarding';
+import { FriendRecommendations } from '../features/social/Social';
 import { DesktopOfflineSection, DesktopUpdateButton } from '../features/desktop/DesktopFeatures';
 
 type Theme = NonNullable<components['schemas']['UiPrefs']['theme']>;
@@ -371,6 +372,7 @@ function RecommendationSettings() {
   const errorText = useErrorText();
   const options = useQuery({ queryKey: ['onboarding'], queryFn: async () => unwrap(await session.client.GET('/api/v1/onboarding')), staleTime: 0 });
   return <section className={s.section}>
+    <FriendRecommendations />
     {editing && options.data ? <Onboarding key={JSON.stringify(options.data.choice)} options={options.data} editing onDone={() => { setEditing(false); void queryClient.invalidateQueries({ queryKey: ['onboarding'] }); }} />
       : <Button busy={options.isFetching} onClick={() => { void options.refetch().then((result) => { if (result.data && !result.error) setEditing(true); }); }}>{t('onboarding.edit')}</Button>}
     <FormError>{options.error ? errorText(options.error) : null}</FormError>

apps/web/src/pages/TrackPage.tsx

@@ -46,7 +46,7 @@ export function TrackPage({ id }: { id: string }) {
               <img src={coverSrc(tr.album.cover_url, 300)} alt="" />
             </span>
           )}
-          <Cover album={tr.album} size={280} className={c.heroCover} />
+          <Cover album={tr.album} size="100%" className={c.heroCover} />
           <div className={c.heroBody}>
             <span className={c.kind}>{t('player.track_page')}</span>
             <h1 className={c.heroTitle}>{tr.title}</h1>

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

@@ -83,7 +83,7 @@ export function PatternsPage({ id }: { id: string }) {
     });
 
   return (
-    <div className={`${s.page} ${s.narrow}`} style={{ maxWidth: 1100 }}>
+    <div className={s.page}>
       <div className={s.head}>
         <div>
           <h1>{t('patterns.title', { name: source.data?.name ?? '…' })}</h1>

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

@@ -75,6 +75,11 @@ function SourceCard({ source, onEdit }: { source: Source; onEdit: () => void })
   const [test, setTest] = useState<TestResult | null>(null);
   const [confirmDelete, setConfirmDelete] = useState(false);
   const id = source.id;
+  const covers = useQuery({
+    queryKey: ['source-cover-stats', id],
+    queryFn: async () => unwrap(await session.client.GET('/api/v1/admin/sources/{id}/cover-stats', { params: { path: { id } } })),
+    refetchInterval: 10000,
+  });
   const refresh = () => queryClient.invalidateQueries({ queryKey: ['sources'] });
 
   const scan = useMutation({
@@ -144,6 +149,11 @@ function SourceCard({ source, onEdit }: { source: Source; onEdit: () => void })
       </div>
       <div className={l.cardFoot}>
         <ScanLine scan={source.scan} lastScanAt={source.last_scan_at} />
+        {covers.data && <span className={s.note} role="status">
+          {t('sources.cover_files', { count: covers.data.files_with_cover, total: covers.data.files_total })}
+          {covers.data.albums_pending > 0 && ` · ${t('sources.cover_pending', { count: covers.data.albums_pending })}`}
+        </span>}
+        <FormError>{covers.error ? errorText(covers.error) : null}</FormError>
         {test && (
           <span className={`${l.test} ${test.ok ? l.testOk : l.testFail}`} role="status">
             {test.ok ? t('sources.test_ok', { count: test.audio_files }) : t('sources.test_fail', { message: test.message })}

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

@@ -5,6 +5,7 @@ import { useEffect, useState, type FormEvent } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSession, useUser } from '../../app/session';
+import { UserTransfer } from '../../features/users/UserTransfer';
 import { useErrorText, useFieldError } from '../../shared/lib/errors';
 import { formatRelative } from '../../shared/lib/format';
 import { assignableRoles, canManageUser, type Role } from '../../shared/lib/policy';
@@ -140,6 +141,11 @@ export function UsersPage() {
         label: t(u.reviews_uploads ? 'users.revoke_review' : 'users.grant_review'),
         onSelect: () => patch.mutate({ id: u.id, body: { reviews_uploads: !u.reviews_uploads } }),
       });
+    if (me.role === 'admin' && u.role !== 'admin')
+      items.push({
+        label: t(u.manages_updates ? 'users.revoke_updates' : 'users.grant_updates'),
+        onSelect: () => patch.mutate({ id: u.id, body: { manages_updates: !u.manages_updates } }),
+      });
     if (can('delete'))
       items.push({ label: t('users.delete'), danger: true, onSelect: () => setConfirm({ kind: 'delete', user: u }) });
     return items;
@@ -158,6 +164,7 @@ export function UsersPage() {
       </div>
 
       <div className={s.toolbar}>
+        {me.role === 'admin' && <UserTransfer />}
         <label className={s.search}>
           <Icon src={searchIcon} size={18} className={s.searchIcon} />
           <input
@@ -214,6 +221,7 @@ export function UsersPage() {
                   </td>
                   <td data-label={t('users.col_role')}>
                     <span className={cx(s.badge, s[`role_${u.role}`])}>{t(`common:roles.${u.role}`)}</span>
+                    {u.manages_updates && <span className={cx(s.badge, s.role_moderator)}>{t('users.manage_updates')}</span>}
                     {u.reviews_uploads && <span className={cx(s.badge, s.role_moderator)}>{t('users.review_uploads')}</span>}
                   </td>
                   <td data-label={t('users.col_status')}>

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

@@ -1,7 +1,7 @@
 import type { components } from '@pipu/api-client';
 import { unwrap } from '@pipu/core';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSession } from '../../app/session';
@@ -27,30 +27,40 @@ export function WriteTemplateSection({ source }: { source: Source }) {
   const [accepts, setAccepts] = useState(source.accepts_uploads);
   const [template, setTemplate] = useState(source.write_template ?? '');
   const [check, setCheck] = useState<Check | null>(null);
+  const revision = useRef(0);
   useEffect(() => {
     setAccepts(source.accepts_uploads);
     setTemplate(source.write_template ?? '');
   }, [source.accepts_uploads, source.write_template]);
 
   const runCheck = useMutation({
-    mutationFn: async (tpl: string) =>
+    mutationFn: async (tpl: string) => {
-      unwrap(
+      const requestedRevision = revision.current;
+      const result = unwrap(
         await session.client.POST('/api/v1/admin/sources/{id}/write-template/check', {
           params: { path: { id } },
           body: { template: tpl },
         }),
-      ),
+      );
-    onSuccess: setCheck,
+      return { result, requestedRevision };
-  });
+    },
-  const suggest = useMutation({
+    onSuccess: ({ result, requestedRevision }) => {
-    mutationFn: async () =>
+      if (requestedRevision === revision.current) setCheck(result);
-      unwrap(await session.client.POST('/api/v1/admin/sources/{id}/write-template/suggest', { params: { path: { id } } }))
-        .template,
-    onSuccess: (tpl) => {
-      setTemplate(tpl);
-      runCheck.mutate(tpl);
     },
   });
+  const suggest = useMutation({
+    mutationFn: async (_revision: number) =>
+      unwrap(await session.client.POST('/api/v1/admin/sources/{id}/write-template/suggest', { params: { path: { id } } })),
+    onSuccess: (result, requestedRevision) => {
+      if (requestedRevision !== revision.current) return;
+      setTemplate(result.template);
+      runCheck.mutate(result.template);
+    },
+  });
+  const suggestTemplate = suggest.mutate;
+  useEffect(() => {
+    if (!source.write_template) suggestTemplate(revision.current);
+  }, [id, source.write_template, suggestTemplate]);
   const save = useMutation({
     mutationFn: async () =>
       unwrap(
@@ -62,6 +72,7 @@ export function WriteTemplateSection({ source }: { source: Source }) {
     onSuccess: async (src) => {
       queryClient.setQueryData(['source', id], src);
       await queryClient.invalidateQueries({ queryKey: ['sources'] });
+      await queryClient.invalidateQueries({ queryKey: ['admin-uploads'] });
     },
   });
 
@@ -73,6 +84,15 @@ export function WriteTemplateSection({ source }: { source: Source }) {
     <section className={s.section}>
       <h2>{t('write_template.title')}</h2>
       <p className={s.note}>{t('write_template.intro')}</p>
+      <p className={s.note}>{t('write_template.auto_hint')}</p>
+      {suggest.isPending && <p className={s.note} role="status">{t('write_template.detecting')}</p>}
+      {suggest.data && (
+        <div className={s.sessions}>
+          <p className={s.note} role="status">{t('write_template.detected', { matched: suggest.data.matched ?? 0, total: suggest.data.total ?? 0 })}</p>
+          <code className={l.match}>{suggest.data.template}</code>
+          {(suggest.data.examples ?? []).map((path) => <code key={path} className={l.match}>{path}</code>)}
+        </div>
+      )}
       <label className={l.checkRow}>
         <input type="checkbox" checked={accepts} onChange={(e) => setAccepts(e.target.checked)} />
         <span>{t('write_template.accepts')}</span>
@@ -82,6 +102,7 @@ export function WriteTemplateSection({ source }: { source: Source }) {
         label={t('write_template.template')}
         value={template}
         onChange={(v) => {
+          revision.current++;
           setTemplate(v);
           setCheck(null);
           save.reset();
@@ -91,7 +112,7 @@ export function WriteTemplateSection({ source }: { source: Source }) {
         mono
       />
       <div className={s.toolbar}>
-        <Button busy={suggest.isPending} onClick={() => suggest.mutate()}>
+        <Button busy={suggest.isPending} onClick={() => suggest.mutate(revision.current)}>
           {t('write_template.suggest')}
         </Button>
         <Button busy={runCheck.isPending} disabled={!template.trim()} onClick={() => runCheck.mutate(template)}>

apps/web/src/pages/catalog.module.css

@@ -99,6 +99,11 @@
   min-width: 0;
 }
 
+.listen .heroCover {
+  max-width: 280px;
+  aspect-ratio: 1;
+}
+
 .listen {
   display: grid;
   gap: 28px;
@@ -118,7 +123,12 @@
     flex-direction: column;
     align-items: stretch;
     margin: 0;
-    padding: 0;
+    padding: 20px;
+    border-radius: 20px;
+  }
+
+  .listen .heroCover {
+    max-width: none;
   }
 
   .listen .heroTitle {

apps/web/src/pages/page.module.css

@@ -1,5 +1,6 @@
 .page {
-  max-width: 1100px;
+  width: 100%;
+  min-width: 0;
   margin: 0 auto;
   display: flex;
   flex-direction: column;

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

@@ -1,7 +1,7 @@
 import { unwrap } from '@pipu/core';
 import { useInfiniteQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Link } from '@tanstack/react-router';
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useSession } from '../../app/session';
@@ -14,10 +14,11 @@ import { MOVING, QuotaMeter, UploadStatusBadge, useReasonText, type UploadFile,
 import u from './uploads.module.css';
 
 const FILTERS = {
-  all: undefined,
+  all: ['uploading', 'processing', 'pending_review', 'approved', 'importing', 'imported', 'import_failed', 'duplicate', 'invalid', 'rejected', 'expired'],
   pending: ['uploading', 'processing', 'pending_review', 'approved', 'importing', 'import_failed'],
   imported: ['imported'],
-  declined: ['rejected', 'duplicate', 'invalid', 'withdrawn', 'expired'],
+  declined: ['rejected', 'duplicate', 'invalid', 'expired'],
+  withdrawn: ['withdrawn'],
 } satisfies Record<string, UploadStatus[] | undefined>;
 type Filter = keyof typeof FILTERS;
 
@@ -25,11 +26,14 @@ const WITHDRAWABLE: UploadStatus[] = ['uploading', 'processing', 'pending_review
 
 /** «Мои предложения»: статусы своих загрузок и решения админа (docs/uploads.md#10). */
 export function MyUploadsPage() {
-  const { t } = useTranslation(['admin', 'common']);
+  const { t, i18n } = useTranslation(['admin', 'common']);
   const session = useSession();
   const queryClient = useQueryClient();
   const errorText = useErrorText();
   const [filter, setFilter] = useState<Filter>('all');
+  const [selected, setSelected] = useState<Map<string, string>>(new Map());
+  const [selectedBatches, setSelectedBatches] = useState<Set<string>>(new Set());
+  useEffect(() => { setSelected(new Map()); setSelectedBatches(new Set()); }, [filter]);
 
   useEffect(() => {
     void session.client.POST('/api/v1/uploads/seen').then(() => {
@@ -52,14 +56,61 @@ export function MyUploadsPage() {
       q.state.data?.pages.some((p) => p.items.some((it) => MOVING.includes(it.status))) ? 5000 : false,
   });
   const withdraw = useMutation({
-    mutationFn: async (id: string) =>
+    mutationFn: async (ids: string[]) => {
-      unwrap(await session.client.DELETE('/api/v1/uploads/files/{id}', { params: { path: { id } } })),
+      const failed: { id: string; error: unknown }[] = [];
-    onSuccess: async () => {
+      for (const id of ids) {
+        try {
+          unwrap(await session.client.DELETE('/api/v1/uploads/files/{id}', { params: { path: { id } } }));
+        } catch (error) {
+          failed.push({ id, error });
+        }
+      }
+      return failed;
+    },
+    onSuccess: async (failed) => {
+      setSelected((cur) => new Map([...cur].filter(([id]) => failed.some((f) => f.id === id))));
+      setSelectedBatches(new Set());
       await queryClient.invalidateQueries({ queryKey: ['my-uploads'] });
       await queryClient.invalidateQueries({ queryKey: ['upload-quota'] });
     },
   });
   const items = list.data?.pages.flatMap((p) => p.items) ?? [];
+  useEffect(() => {
+    const unavailable = new Set(list.data?.pages.flatMap((p) => p.items.filter((f) => !WITHDRAWABLE.includes(f.status)).map((f) => f.id)) ?? []);
+    setSelected((cur) => new Map([...cur].filter(([id]) => !unavailable.has(id))));
+  }, [list.data]);
+  const batches = useMemo(() => {
+    const groups = new Map<string, UploadFile[]>();
+    for (const file of items) groups.set(file.batch_id, [...(groups.get(file.batch_id) ?? []), file]);
+    return [...groups.values()];
+  }, [list.data]);
+  const toggle = (files: UploadFile[], on: boolean) => setSelected((cur) => {
+    const next = new Map(cur);
+    for (const file of files) {
+      if (on) next.set(file.id, file.batch_id);
+      else next.delete(file.id);
+    }
+    return next;
+  });
+  const selectBatch = useMutation({
+    mutationFn: async (batch: string) => {
+      const files: UploadFile[] = [];
+      let cursor: string | undefined;
+      do {
+        const page = unwrap(await session.client.GET('/api/v1/uploads/mine', { params: { query: { batch, status: WITHDRAWABLE, limit: 100, cursor } } }));
+        files.push(...page.items);
+        cursor = page.next_cursor ?? undefined;
+      } while (cursor);
+      return { batch, files };
+    },
+    onSuccess: ({ batch, files }) => {
+      toggle(files, true);
+      setSelectedBatches((cur) => new Set([...cur, batch]));
+    },
+    onError: (_error, batch) => setSelectedBatches((cur) => new Set([...cur].filter((id) => id !== batch))),
+  });
+  const busy = withdraw.isPending || selectBatch.isPending;
+  const visibleEligible = items.filter((f) => WITHDRAWABLE.includes(f.status));
 
   return (
     <div className={s.page}>
@@ -73,7 +124,7 @@ export function MyUploadsPage() {
       <div className={s.toolbar}>
         <div className={s.chips} role="group" aria-label={t('uploads.filter')}>
           {(Object.keys(FILTERS) as Filter[]).map((f) => (
-            <button key={f} type="button" className={s.chip} aria-pressed={filter === f} onClick={() => setFilter(f)}>
+            <button key={f} type="button" className={s.chip} aria-pressed={filter === f} disabled={busy} onClick={() => setFilter(f)}>
               {t(`uploads.filter_${f}`)}
             </button>
           ))}
@@ -85,7 +136,8 @@ export function MyUploadsPage() {
           </Button>
         </Link>
       </div>
-      <FormError>{(list.error ?? withdraw.error) ? errorText(list.error ?? withdraw.error) : null}</FormError>
+      <FormError>{(list.error ?? withdraw.error ?? selectBatch.error) ? errorText(list.error ?? withdraw.error ?? selectBatch.error) : null}</FormError>
+      {!!withdraw.data?.length && <FormError>{t('uploads.withdraw_failed', { count: withdraw.data.length, reason: errorText(withdraw.data[0]!.error) })}</FormError>}
       {list.isSuccess && items.length === 0 && (
         <EmptyState icon={addIcon} action={<Link to="/uploads/new">{t('uploads.suggest_title')}</Link>}>
           {t('uploads.mine_empty')}
@@ -93,9 +145,13 @@ export function MyUploadsPage() {
       )}
       {items.length > 0 && (
         <div className={s.tableWrap}>
-          <table className={s.table}>
+          <table className={cx(s.table, u.mineTable)}>
             <thead>
               <tr>
+                <th><input type="checkbox" aria-label={t('uploads.select_visible')} disabled={busy || !visibleEligible.length} checked={visibleEligible.length > 0 && visibleEligible.every((f) => selected.has(f.id))} onChange={(e) => {
+                  toggle(visibleEligible, e.target.checked);
+                  setSelectedBatches(new Set());
+                }} /></th>
                 <th>{t('uploads.col_file')}</th>
                 <th>{t('uploads.col_status')}</th>
                 <th>{t('uploads.col_size')}</th>
@@ -103,19 +159,52 @@ export function MyUploadsPage() {
                 <th />
               </tr>
             </thead>
-            <tbody>
+            {batches.map((files) => {
-              {items.map((f) => (
+              const first = files[0]!;
+              const eligible = files.filter((f) => WITHDRAWABLE.includes(f.status));
+              return <tbody key={first.batch_id}>
+                <tr><td colSpan={6} className={u.mineBatchCell}>
+                  <div className={u.mineBatchHead}>
+                    <input type="checkbox" aria-label={t('uploads.select_batch')} disabled={busy || !eligible.length} checked={selectedBatches.has(first.batch_id)} ref={(node) => {
+                      if (node) node.indeterminate = !selectedBatches.has(first.batch_id) && eligible.some((f) => selected.has(f.id));
+                    }} onChange={(e) => {
+                      if (e.target.checked) {
+                        setSelectedBatches((cur) => new Set([...cur, first.batch_id]));
+                        selectBatch.mutate(first.batch_id);
+                      }
+                      else {
+                        setSelected((cur) => new Map([...cur].filter(([, batch]) => batch !== first.batch_id)));
+                        setSelectedBatches((cur) => new Set([...cur].filter((id) => id !== first.batch_id)));
+                      }
+                    }} />
+                    <strong>{formatDateTime(first.created_at, i18n.language)}</strong>
+                    {first.batch_comment && <span>«{first.batch_comment}»</span>}
+                  </div>
+                </td></tr>
+              {files.map((f) => (
                 <MineRow
                   key={f.id}
                   file={f}
-                  busy={withdraw.isPending && withdraw.variables === f.id}
+                  busy={busy}
-                  onWithdraw={() => withdraw.mutate(f.id)}
+                  withdrawing={withdraw.isPending && withdraw.variables.includes(f.id)}
+                  checked={selected.has(f.id)}
+                  onCheck={(on) => {
+                    toggle([f], on);
+                    setSelectedBatches((cur) => new Set([...cur].filter((id) => id !== f.batch_id)));
+                  }}
+                  onWithdraw={() => withdraw.mutate([f.id])}
                 />
               ))}
-            </tbody>
+            </tbody>;
+            })}
           </table>
         </div>
       )}
+      {selected.size > 0 && <section className={u.bulk} aria-label={t('uploads.bulk_withdraw')}>
+        <span>{t('uploads.selected', { count: selected.size })}</span>
+        <Button variant="ghost" disabled={busy} onClick={() => { setSelected(new Map()); setSelectedBatches(new Set()); }}>{t('common:form.cancel')}</Button>
+        <Button variant="danger" busy={withdraw.isPending} disabled={selectBatch.isPending} onClick={() => withdraw.mutate([...selected.keys()])}>{t('uploads.withdraw_selected')}</Button>
+      </section>}
       {list.hasNextPage && (
         <Button busy={list.isFetchingNextPage} onClick={() => void list.fetchNextPage()}>
           {t('uploads.load_more')}
@@ -125,7 +214,7 @@ export function MyUploadsPage() {
   );
 }
 
-function MineRow({ file: f, busy, onWithdraw }: { file: UploadFile; busy: boolean; onWithdraw: () => void }) {
+function MineRow({ file: f, busy, withdrawing, checked, onCheck, onWithdraw }: { file: UploadFile; busy: boolean; withdrawing: boolean; checked: boolean; onCheck: (on: boolean) => void; onWithdraw: () => void }) {
   const { t, i18n } = useTranslation('admin');
   // Технические подробности ошибки импорта — для админа; автору достаточно причины.
   const raw = f.status === 'import_failed' ? (f.status_reason?.split(':')[0] ?? null) : f.status_reason;
@@ -133,6 +222,7 @@ function MineRow({ file: f, busy, onWithdraw }: { file: UploadFile; busy: boolea
   const m = f.metadata;
   return (
     <tr>
+      <td>{WITHDRAWABLE.includes(f.status) && <input type="checkbox" aria-label={t('uploads.select_file', { name: f.original_name })} checked={checked} disabled={busy} onChange={(e) => onCheck(e.target.checked)} />}</td>
       <td className={u.trackCell}>
         <div className={u.meta}>
           <span className={u.metaTitle}>{m ? `${m.artist} — ${m.title}` : f.original_name}</span>
@@ -156,7 +246,7 @@ function MineRow({ file: f, busy, onWithdraw }: { file: UploadFile; busy: boolea
       <td className={s.muted}>{formatDateTime(f.created_at, i18n.language)}</td>
       <td>
         {WITHDRAWABLE.includes(f.status) && (
-          <Button variant="ghost" busy={busy} onClick={onWithdraw}>
+          <Button variant="ghost" busy={withdrawing} disabled={busy} onClick={onWithdraw}>
             {t('uploads.withdraw')}
           </Button>
         )}

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

@@ -14,7 +14,7 @@ import s from '../page.module.css';
 import { QuotaMeter, useUploadQuota } from './common';
 import u from './uploads.module.css';
 
-const ACCEPT = AUDIO_EXTENSIONS.map((e) => `.${e}`).join(',');
+const ACCEPT = [...AUDIO_EXTENSIONS, 'jpg', 'jpeg', 'png', 'webp'].map((e) => `.${e}`).join(',');
 
 /**
  * «Предложить треки» (docs/uploads.md#5): перетащить файлы или папки → SHA-256 в воркере → предпроверка дублей →
@@ -41,7 +41,7 @@ export function SuggestPage() {
   const ready = st.items.filter((it) => it.stage === 'ready');
   const readyBytes = ready.reduce((n, it) => n + it.size, 0);
   const hashing = st.items.some((it) => it.stage === 'hashing' || it.stage === 'checking');
-  const finished = !st.busy && st.batchId !== null;
+  const finished = !st.busy && st.batchId !== null && !ready.length;
   const resume = st.items.filter((it) => it.stage === 'resume').length;
   const failedUploads = st.items.filter((it) => it.stage === 'error' && it.tusUrl).length;
   const uploaded = st.items.filter((it) => it.stage === 'done').length;
@@ -83,6 +83,7 @@ export function SuggestPage() {
         <div className={u.dropTitle}>{t('uploads.drop_title')}</div>
         <p className={u.formatWarn}>{t('uploads.drop_hint')}</p>
         <div className={s.note}>{t('uploads.drop_folders')}</div>
+        <div className={s.note}>{t('uploads.cover_hint')}</div>
         <div className={u.dropActions}>
           <Button disabled={st.busy} onClick={() => filesRef.current?.click()}>
             {t('uploads.pick_files')}
@@ -129,7 +130,7 @@ export function SuggestPage() {
       {st.items.length > 0 && (
         <div className={u.files} aria-label={t('uploads.files')}>
           {st.items.map((it) => (
-            <FileRow key={it.id} item={it} locked={st.busy || finished} onRemove={() => uploader.remove(it.id)} />
+            <FileRow key={it.id} item={it} locked={st.busy || finished} retryDisabled={!uploader.canRetryFailed} onRetry={() => void uploader.retryFailed(it.id)} onRemove={() => uploader.remove(it.id)} />
           ))}
         </div>
       )}
@@ -141,6 +142,7 @@ export function SuggestPage() {
             <textarea
               className={u.textarea}
               value={comment}
+              disabled={st.busy}
               maxLength={1000}
               placeholder={t('uploads.comment_hint')}
               onChange={(e) => setComment(e.target.value)}
@@ -188,7 +190,13 @@ export function SuggestPage() {
   );
 }
 
-function FileRow({ item, locked, onRemove }: { item: UploadItem; locked: boolean; onRemove: () => void }) {
+function FileRow({ item, locked, retryDisabled, onRetry, onRemove }: {
+  item: UploadItem;
+  locked: boolean;
+  retryDisabled: boolean;
+  onRetry: () => void;
+  onRemove: () => void;
+}) {
   const { t, i18n } = useTranslation(['admin', 'errors']);
   const tr = t as unknown as (k: string) => string;
   const showProgress = item.stage === 'hashing' || item.stage === 'uploading';
@@ -204,7 +212,7 @@ function FileRow({ item, locked, onRemove }: { item: UploadItem; locked: boolean
       note = { text: tr(`errors:${item.code ?? 'uploads.duplicate'}`), cls: u.bad };
       break;
     case 'error':
-      note = { text: t('uploads.file_error', { message: item.message ?? '' }), cls: u.bad };
+      note = { text: item.code === 'uploads.storage_full' ? tr('errors:uploads.storage_full') : t('uploads.file_error', { message: item.message ?? '' }), cls: u.bad };
       break;
     case 'ready':
       if (item.possibleDuplicate) note = { text: t('uploads.possible_dup'), cls: u.warn };
@@ -226,10 +234,15 @@ function FileRow({ item, locked, onRemove }: { item: UploadItem; locked: boolean
           </div>
         )}
         {needsFormatAttention(null, item.relPath) && <span className={u.warn}>{t('uploads.format_attention')}</span>}
+        {item.coverName && <span className={u.sub}>{t(item.coverName === 'embedded-cover' ? 'uploads.cover_embedded' : 'uploads.cover_found', { name: item.coverName })}</span>}
         {note && <span className={note.cls}>{note.text}</span>}
       </div>
       <span className={u.size}>{formatBytes(item.size, i18n.language)}</span>
-      {locked ? (
+      {item.stage === 'error' && item.tusUrl && item.file ? (
+        <Button variant="secondary" disabled={retryDisabled} aria-label={t('uploads.retry_file', { name: item.relPath })} onClick={onRetry}>
+          {t('uploads.retry')}
+        </Button>
+      ) : locked ? (
         <span />
       ) : (
         <Button variant="ghost" aria-label={t('uploads.remove', { name: item.relPath })} onClick={onRemove}>

apps/web/src/pages/uploads/uploads.module.css

@@ -179,6 +179,12 @@
   color: var(--text);
 }
 
+.batchIdentity { display: flex; flex-direction: column; gap: 4px; min-width: 0; max-width: min(360px, 100%); }
+.batchIdentity strong { color: var(--text); font-size: 14px; overflow-wrap: anywhere; }
+
+.batchToggle { min-width: 44px; min-height: 44px; padding: 8px; }
+.batchExpanded { transform: rotate(90deg); }
+
 .comment {
   flex-basis: 100%;
   color: var(--text);
@@ -218,6 +224,15 @@
   align-items: center;
 }
 
+.preview { width: 300px; max-width: 100%; min-width: 0; }
+.releaseCell { min-width: 140px; max-width: 300px; white-space: normal !important; overflow-wrap: anywhere; }
+.releaseDialog { width: 900px; }
+.releaseHead { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 13px; }
+.releaseHead strong { min-width: 0; overflow-wrap: anywhere; }
+.releaseCover { max-width: 100%; object-fit: contain; border-radius: 10px; }
+.preview audio { display: block; width: 100%; }
+.previewError { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 6px; font-size: 12px; }
+
 .bulk {
   position: sticky;
   bottom: 12px;
@@ -293,6 +308,11 @@
   resize: vertical;
 }
 
+.textarea:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
 @media (max-width: 720px) {
   .queueRow {
     grid-template-columns: auto minmax(0, 1fr);
@@ -310,6 +330,32 @@
   overflow-wrap: anywhere;
 }
 
+.placement {
+  grid-column: 2 / -1;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: var(--surface2);
+  overflow-wrap: anywhere;
+}
+
+.placementLabel {
+  font-size: 11px;
+  color: var(--text3);
+}
+
+.mineBatchHead {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+  overflow-wrap: anywhere;
+}
+
 .trackCell {
   min-width: 260px;
   max-width: 480px;
@@ -322,6 +368,20 @@
 }
 
 @media (max-width: 767px) {
+  .mineTable, .mineTable tbody { display: block; }
+  .mineTable thead { display: none; }
+  .mineTable tr {
+    display: grid;
+    grid-template-columns: 24px minmax(0, 1fr);
+    gap: 10px;
+    padding: 14px;
+    border-bottom: 1px solid var(--line);
+  }
+  .mineTable td { min-width: 0; height: auto; padding: 0; border: 0; }
+  .mineTable td:not(:first-child) { grid-column: 2; }
+  .mineTable .trackCell { grid-column: 2; grid-row: 1; min-width: 0; max-width: none; }
+  .mineTable .mineBatchCell { grid-column: 1 / -1; }
+  .mineTable .ellipsis { white-space: normal; overflow-wrap: anywhere; }
   .queueRow { grid-template-columns: 24px minmax(0, 1fr); gap: 10px; padding: 12px; }
   .queueRow > :nth-child(3), .queueRow > .rowActions { grid-column: 2; }
   .rowActions { flex-wrap: wrap; min-width: 0; }

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

@@ -0,0 +1,102 @@
+import type { AuthSession, ListeningState, Track } from '@pipu/core';
+import { refreshListening } from '@pipu/core';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { Player } from './player';
+
+const track: Track = {
+  id: 'local', title: 'Local', duration_ms: 200_000, artists: [],
+  album: { id: 'album', title: 'Album', year: null, cover_url: null, cover_colors: [] },
+  genres: [], disc_no: null, track_no: null, available: true, stream_url: '/s/local', reaction: null, features: null,
+};
+const remote = { ...track, id: 'remote', stream_url: '/s/remote' };
+const ok = (data: unknown) => ({ data, response: new Response() });
+const players: Player[] = [];
+
+function fixture() {
+  let snapshot: ListeningState = { room: null, requests: [], preferences: { requests: 'friends', auto_accept: 'friends', autoplay: true }, server_time: new Date().toISOString() };
+  const session = {
+    state: { status: 'signed_in', user: { id: 'guest', ui_prefs: { crossfade_s: 6, normalize: false } } },
+    client: {
+      GET: vi.fn(async (path: string) => ok(path === '/api/v1/me/social/listening' ? snapshot : remote)),
+      PUT: vi.fn(async () => ok({})), POST: vi.fn(async () => ok({})),
+    },
+  } as unknown as AuthSession;
+  const audio = document.createElement('audio');
+  const overlap = document.createElement('audio');
+  vi.spyOn(globalThis, 'Audio').mockImplementation(function () { return overlap; });
+  const frames: FrameRequestCallback[] = [];
+  vi.spyOn(window, 'requestAnimationFrame').mockImplementation(callback => { frames.push(callback); return frames.length; });
+  const clock = vi.spyOn(performance, 'now').mockReturnValue(0);
+  const player = new Player(session, audio);
+  players.push(player);
+  const startFade = () => {
+    player.playList([track, { ...track, id: 'next', stream_url: '/s/next' }], 0, { type: 'queue' });
+    Object.defineProperty(audio, 'duration', { configurable: true, value: 200 });
+    audio.currentTime = 196;
+    audio.dispatchEvent(new Event('timeupdate'));
+    clock.mockReturnValue(3000);
+    frames.shift()!(3000);
+    expect(overlap.paused).toBe(false);
+    expect(overlap.volume).toBeGreaterThan(0);
+  };
+  const follow = async () => {
+    snapshot = { ...snapshot, room: { id: 'room', owner_id: 'host', owner_name: 'Host', device_id: 'host-device', track_id: remote.id, position_ms: 1000, playing: true, updated_at: snapshot.server_time, participants: [{ id: 'host', name: 'Host' }, { id: 'guest', name: 'Guest' }] } };
+    player.start();
+    await vi.waitFor(() => expect(player.getState()).toMatchObject({ track: { id: 'remote' }, playing: true, listening: { locked: true } }));
+  };
+  return { player, audio, overlap, frames, clock, startFade, follow, session, setRoom: (room: ListeningState['room']) => { snapshot = { ...snapshot, room }; } };
+}
+
+afterEach(() => { players.splice(0).forEach(player => player.dispose()); vi.restoreAllMocks(); localStorage.removeItem('pipu.player'); });
+
+describe('shared listening audio ownership', () => {
+  it('stops a local crossfade before following and ignores its queued animation', async () => {
+    const e = fixture();
+    e.startFade();
+    const staleFrame = e.frames.shift()!;
+    await e.follow();
+    expect(e.audio.paused).toBe(false);
+    expect(e.overlap.paused).toBe(true);
+    expect(e.overlap.getAttribute('src')).toBeNull();
+    staleFrame(6000);
+    expect(e.player.getState().track?.id).toBe('remote');
+    expect(e.overlap.paused).toBe(true);
+    e.setRoom(null);
+    refreshListening(e.session);
+    await vi.waitFor(() => expect(e.player.getState().listening?.room).toBeNull());
+    expect(e.audio.paused).toBe(true);
+    expect(e.overlap.paused).toBe(true);
+  });
+
+  it('silences the overlapping element on pause', () => {
+    const e = fixture();
+    e.startFade();
+    e.player.pause();
+    expect(e.audio.paused).toBe(true);
+    expect(e.overlap.paused).toBe(true);
+  });
+
+  it('cancels an old transition when another track is selected', () => {
+    const e = fixture();
+    e.startFade();
+    const staleFrame = e.frames.shift()!;
+    e.player.playList([remote], 0, { type: 'queue' });
+    e.clock.mockReturnValue(6000);
+    staleFrame(6000);
+    expect(e.audio.getAttribute('src')).toBe('/s/remote');
+    expect(e.player.getState().track?.id).toBe('remote');
+    expect(e.overlap.paused).toBe(true);
+  });
+
+  it('still completes an uninterrupted local crossfade with one active source', async () => {
+    const e = fixture();
+    e.startFade();
+    e.clock.mockReturnValue(6000);
+    e.frames.shift()!(6000);
+    await Promise.resolve();
+    expect(e.player.getState().track?.id).toBe('next');
+    expect(e.audio.getAttribute('src')).toBe('/s/next');
+    expect(e.audio.paused).toBe(false);
+    expect(e.overlap.paused).toBe(true);
+  });
+});

apps/web/src/player/player.ts

@@ -1,5 +1,9 @@
 import {
   EventBuffer,
+  createActivityPublisher,
+  type ActivityPublisher,
+  ListeningCoordinator,
+  type ListeningRoom,
   WaveCoordinator,
   EARLY_SKIP_MS,
   type WaveOutcome,
@@ -35,12 +39,17 @@ const PRELOAD_BEFORE_MS = 20_000;
  * Media Session и сохранение «трек и момент» (локально и на сервере).
  */
 export class Player {
+  private activity: ActivityPublisher | null = null;
+  private listening: ListeningCoordinator | null = null;
+  private applyingSync = false;
+  private remoteRoom: string | null = null;
   readonly offline: DesktopOffline | null;
   private retryEvents: (() => Promise<void>) | null = null;
   private readonly engine: AudioEngine;
   private get audio() { return this.engine.audio; }
   private get overlap() { return this.engine.overlap; }
   private fading = false;
+  private fadeVersion = 0;
   private ignoreEnded = false;
   private readonly queue = new PlayQueue();
   private readonly events: EventBuffer;
@@ -93,6 +102,17 @@ export class Player {
 
   /** Запуск фоновой отправки событий (парный вызов — dispose). */
   start() {
+    this.activity ??= createActivityPublisher(this.session);
+    this.activity.update(this.state);
+    if (!this.listening) {
+      this.listening = new ListeningCoordinator(this.session, this.activity.deviceId, {
+        read: this.getState,
+        pause: () => { this.restoreVersion++; this.leaveWave(); this.cancelCrossfade(); this.audio.pause(); },
+        apply: (room, position, current) => this.syncListening(room, position, current),
+        changed: listening => this.update({ listening }),
+      });
+      this.listening.start();
+    }
     this.offline?.activate();
     this.timers.push(setInterval(() => void this.events.flush(), FLUSH_EVERY_MS));
     if (this.retryEvents) {
@@ -116,6 +136,8 @@ export class Player {
 
   private update(patch: Partial<PlayerState>) {
     this.state = { ...this.state, ...patch };
+    this.activity?.update(this.state);
+    this.listening?.update();
     for (const fn of this.listeners) fn();
     this.media.syncDesktopMedia();
   }
@@ -135,6 +157,7 @@ export class Player {
 
   /** Запустить список с позиции index в контексте (альбом, поиск, коллекция...). */
   playList(tracks: Track[], index: number, context: PlayContext) {
+    if (this.listening?.locked && !this.applyingSync) return;
     const playable = tracks.filter((t) => t.available && t.stream_url);
     const target = tracks[index];
     if (!target || !playable.length) return;
@@ -151,6 +174,7 @@ export class Player {
 
   /** Запустить волну (или перезапустить с новым контекстом). */
   async startWave(activity: string | null, mood: string | null, seed?: { type: 'artist' | 'album' | 'track'; id: string; label: string }) {
+    if (this.listening?.locked) return;
     this.restoreVersion++;
     this.finishAttempt('skip');
     this.leaveWave();
@@ -190,6 +214,7 @@ export class Player {
    * Прерванный трек — не скип: волне сигнал не уходит, в историю он попадает, только если играл ≥ 30 с.
    */
   async setWaveContext(activity: string | null, mood: string | null) {
+    if (this.listening?.locked) return;
     const wave = this.state.wave;
     if (!wave) return this.startWave(activity, mood);
     this.update({ wave: { ...wave, activity, mood } });
@@ -215,6 +240,7 @@ export class Player {
   }
 
   stopWave() {
+    if (this.listening?.locked) return;
     this.leaveWave();
     this.pause();
   }
@@ -247,11 +273,13 @@ export class Player {
   }
 
   toggle() {
+    if (this.listening?.locked && !this.applyingSync) return;
     if (this.state.playing) this.pause();
     else this.play();
   }
 
   play() {
+    if (this.listening?.locked && !this.applyingSync) return;
     if (!this.queue.current) return;
     if (!this.audio.src || !this.attempt) {
       void this.load(true, this.state.positionMs);
@@ -263,10 +291,13 @@ export class Player {
   }
 
   pause() {
+    if (this.listening?.locked && !this.applyingSync) return;
+    this.cancelCrossfade();
     this.audio.pause();
   }
 
   next() {
+    if (this.listening?.locked) return;
     this.finishAttempt('skip');
     if (this.queue.next()) {
       this.syncQueue();
@@ -278,6 +309,7 @@ export class Player {
 
   /** «Назад»: первые 3 с — к предыдущему треку, дальше — в начало текущего. */
   prev() {
+    if (this.listening?.locked) return;
     if (this.audio.currentTime > 3) {
       this.seek(0);
       return;
@@ -290,6 +322,7 @@ export class Player {
   }
 
   jump(index: number) {
+    if (this.listening?.locked) return;
     this.finishAttempt('skip');
     this.queue.jump(index);
     this.syncQueue();
@@ -297,9 +330,11 @@ export class Player {
   }
 
   seek(ms: number) {
+    if (this.listening?.locked && !this.applyingSync) return;
     const track = this.queue.current;
     if (!track) return;
     const to = Math.min(Math.max(ms, 0), track.duration_ms);
+    this.cancelCrossfade();
     const from = Math.round(this.audio.currentTime * 1000);
     this.attempt?.seek(to);
     this.audio.currentTime = to / 1000;
@@ -323,12 +358,14 @@ export class Player {
   }
 
   toggleShuffle() {
+    if (this.listening?.locked) return;
     this.queue.setShuffle(!this.queue.shuffle);
     this.syncQueue();
     this.saveLocal();
   }
 
   cycleRepeat() {
+    if (this.listening?.locked) return;
     const order: RepeatMode[] = ['off', 'all', 'one'];
     this.queue.repeat = order[(order.indexOf(this.queue.repeat) + 1) % order.length]!;
     this.syncQueue();
@@ -363,13 +400,14 @@ export class Player {
 
   // --- загрузка трека ---
 
-  private async load(autoplay: boolean, startMs = 0) {
+  private async load(autoplay: boolean, startMs = 0, current = () => true) {
+    this.cancelCrossfade();
     const track = this.queue.current;
     if (!track?.stream_url) return;
     const version = this.restoreVersion;
     if (this.offline) {
       await this.offline.ready.catch(() => undefined);
-      if (this.queue.current !== track || version !== this.restoreVersion) return;
+      if (!current() || this.queue.current !== track || version !== this.restoreVersion) return;
     }
     this.offline?.keep([track.id]);
     const source = this.offline?.local(track).stream_url ?? track.stream_url;
@@ -396,6 +434,7 @@ export class Player {
       try {
         const resumed = this.engine.resume();
         if (resumed) await resumed;
+        if (!current() || version !== this.restoreVersion) return;
         await this.audio.play();
       } catch {
         // Автозапуск заблокирован браузером — ждём нажатия «Слушать».
@@ -449,10 +488,25 @@ export class Player {
     this.engine.applyLoudness(user * normalizeGain(this.state.track?.features?.loudness_lufs, this.normalizeOn()) * mix);
   }
 
+  /** A cancelled transition must not keep a second source audible or change the new queue. */
+  private cancelCrossfade() {
+    this.fadeVersion++;
+    const wasFading = this.fading;
+    this.fading = false;
+    this.ignoreEnded = false;
+    this.overlap.pause();
+    this.overlap.volume = 0;
+    if (this.overlap.hasAttribute('src')) {
+      this.overlap.removeAttribute('src');
+      this.overlap.load();
+    }
+    if (wasFading) this.applyLoudness();
+  }
+
   /** В конце трека накладывает следующий на crossfade_s секунд. */
   private maybeCrossfade(positionMs: number) {
     const cf = this.crossfadeSeconds();
-    if (this.fading || cf <= 0 || this.state.repeat === 'one') return;
+    if (this.listening?.locked || this.fading || cf <= 0 || this.state.repeat === 'one') return;
     const dur = this.audio.duration;
     if (!Number.isFinite(dur)) return;
     const left = dur * 1000 - positionMs;
@@ -460,15 +514,16 @@ export class Player {
     const next = this.state.queue[this.state.index + 1];
     if (!next?.stream_url || !next.available) return;
     this.fading = true;
+    const version = ++this.fadeVersion;
     this.offline?.keep([this.queue.current!.id, next.id]);
     this.overlap.src = this.offline?.local(next).stream_url ?? next.stream_url;
     this.overlap.volume = 0;
     void this.overlap.play().catch(() => {
-      this.fading = false;
+      if (version === this.fadeVersion) this.cancelCrossfade();
     });
     const started = performance.now();
     const step = () => {
-      if (!this.fading) return;
+      if (!this.fading || version !== this.fadeVersion) return;
       const p = Math.min(1, (performance.now() - started) / (cf * 1000));
       this.applyLoudness(1 - p);
       this.overlap.volume = Math.min(1, (this.state.muted ? 0 : this.state.volume) * normalizeGain(next.features?.loudness_lufs, this.normalizeOn()) * p);
@@ -476,12 +531,12 @@ export class Player {
         requestAnimationFrame(step);
         return;
       }
-      this.finishCrossfade(next);
+      this.finishCrossfade(next, version);
     };
     requestAnimationFrame(step);
   }
 
-  private finishCrossfade(next: Track) {
+  private finishCrossfade(next: Track, version: number) {
     const at = this.overlap.currentTime;
     this.ignoreEnded = true;
     this.audio.pause();
@@ -510,6 +565,7 @@ export class Player {
     this.media.updateMediaMetadata(next);
     void this.offline?.save(next).catch(() => undefined);
     void this.audio.play().finally(() => {
+      if (version !== this.fadeVersion) return;
       this.fading = false;
       this.ignoreEnded = false;
     });
@@ -649,8 +705,13 @@ export class Player {
   }
 
   dispose() {
+    this.listening?.dispose();
+    this.listening = null;
+    this.activity?.dispose();
+    this.activity = null;
     this.restoreVersion++;
     this.wavePolicy.activate(null);
+    this.fadeVersion++;
     this.fading = false;
     this.finishAttempt('skip');
     this.engine.dispose();
@@ -661,4 +722,30 @@ export class Player {
     this.media.dispose();
     void this.events.flush();
   }
+
+  beginListeningAudio() {
+    if (this.state.listening?.room?.playing) {
+      this.applyingSync = true; try { this.play(); } finally { this.applyingSync = false; }
+    }
+    this.listening?.beginAudio();
+  }
+  private async syncListening(room: ListeningRoom, position: number, current: () => boolean) {
+    if (!room.track_id) { this.cancelCrossfade(); this.audio.pause(); return; }
+    if (this.remoteRoom !== room.id || this.state.track?.id !== room.track_id || this.state.queue.length !== 1 || this.state.wave) {
+      const track = unwrap(await this.session.client.GET('/api/v1/tracks/{id}', { params: { path: { id: room.track_id } } }));
+      if (!current()) return;
+      this.remoteRoom = room.id;
+      this.restoreVersion++; this.finishAttempt('skip'); this.leaveWave(); this.context = { type: 'queue' };
+      this.queue.set([track], 0); this.queue.repeat = 'off'; this.queue.shuffle = false; this.syncQueue();
+      await this.load(room.playing, Math.min(position, Math.max(0, track.duration_ms - 100)), current);
+      return;
+    }
+    if (!current()) return;
+    this.applyingSync = true;
+    try {
+      if (Math.abs(this.state.positionMs - position) > 1500) this.seek(Math.min(position, Math.max(0, this.state.durationMs - 100)));
+      if (room.playing && !this.state.playing) this.play();
+      if (!room.playing && this.state.playing) this.pause();
+    } finally { this.applyingSync = false; }
+  }
 }

apps/web/src/player/types.ts

@@ -1,6 +1,7 @@
 import type { WaveInfo, Track, PlayContext, RepeatMode } from '@pipu/core';
 
 export interface PlayerState {
+  listening?: import('@pipu/core').ListeningClientState;
   wave: WaveInfo | null;
   track: Track | null;
   queue: Track[];

apps/web/src/shared/ui/icons.ts

@@ -23,6 +23,9 @@ export { default as visibilityOffIcon } from '@material-symbols/svg-400/rounded/
 export { default as albumIcon } from '@material-symbols/svg-400/rounded/album.svg';
 export { default as arrowDownIcon } from '@material-symbols/svg-400/rounded/arrow_downward.svg';
 export { default as arrowUpIcon } from '@material-symbols/svg-400/rounded/arrow_upward.svg';
+export { default as arrowBackIcon } from '@material-symbols/svg-400/rounded/arrow_back.svg';
+export { default as chatIcon } from '@material-symbols/svg-400/rounded/chat_bubble.svg';
+export { default as smileIcon } from '@material-symbols/svg-400/rounded/sentiment_satisfied.svg';
 export { default as chevronRightIcon } from '@material-symbols/svg-400/rounded/chevron_right.svg';
 export { default as downloadIcon } from '@material-symbols/svg-400/rounded/download.svg';
 export { default as androidIcon } from '@material-symbols/svg-400/rounded/phone_android.svg';
@@ -72,3 +75,4 @@ export { default as tuneFillIcon } from '@material-symbols/svg-400/rounded/tune-
 export { default as queueIcon } from '@material-symbols/svg-400/rounded/queue_music.svg';
 export { default as playlistAddIcon } from '@material-symbols/svg-400/rounded/playlist_add.svg';
 export { default as undoIcon } from '@material-symbols/svg-400/rounded/undo.svg';
+export { default as chevronDownIcon } from '@material-symbols/svg-400/rounded/keyboard_arrow_down.svg';

apps/web/src/shared/ui/ui.module.css

@@ -420,6 +420,21 @@
   background: var(--hover);
 }
 
+.menuBadge {
+  margin-left: auto;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  border-radius: 10px;
+  background: var(--accent-fill);
+  color: var(--on-accent, #fff);
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 20px;
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
 .menuDanger {
   color: var(--danger);
 }

apps/web/src/shared/ui/ui.tsx

@@ -149,21 +149,25 @@ export function Dialog({
   onClose,
   children,
   footer,
+  className,
 }: {
   title: string;
   onClose: () => void;
   children: ReactNode;
   footer?: ReactNode;
+  className?: string;
 }) {
   const { t } = useTranslation();
   const ref = useRef<HTMLDivElement>(null);
   const titleId = useId();
+  const closeRef = useRef(onClose);
+  closeRef.current = onClose;
   useEffect(() => {
     const prev = document.activeElement as HTMLElement | null;
     const first = ref.current?.querySelector<HTMLElement>('input, select, button:not([data-close])');
     (first ?? ref.current)?.focus();
     const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
+      if (e.key === 'Escape') closeRef.current();
       if (e.key === 'Tab') {
         const controls = [...(ref.current?.querySelectorAll<HTMLElement>(
           'a[href], button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex="0"]',
@@ -182,10 +186,10 @@ export function Dialog({
       document.removeEventListener('keydown', onKey);
       prev?.focus();
     };
-  }, [onClose]);
+  }, []);
   return createPortal(
     <div className={s.overlay} onMouseDown={(e) => e.target === e.currentTarget && onClose()}>
-      <div ref={ref} className={s.dialog} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1}>
+      <div ref={ref} className={cx(s.dialog, className)} role="dialog" aria-modal="true" aria-labelledby={titleId} tabIndex={-1}>
         <div className={s.dialogHead}>
           <h2 id={titleId}>{title}</h2>
           <button type="button" data-close className={s.iconButton} onClick={onClose} aria-label={t('form.close')}>
@@ -200,7 +204,7 @@ export function Dialog({
   );
 }
 
-export type MenuItem = { label: string; icon?: string; danger?: boolean; onSelect: () => void };
+export type MenuItem = { label: string; icon?: string; danger?: boolean; badge?: number; onSelect: () => void };
 
 /** Выпадающее меню: открывается кнопкой-триггером, закрывается кликом снаружи и Esc. */
 export function Menu({
@@ -210,6 +214,7 @@ export function Menu({
   header,
   align = 'end',
   triggerClassName,
+  portal = false,
 }: {
   label: string;
   trigger: ReactNode;
@@ -217,8 +222,10 @@ export function Menu({
   header?: ReactNode;
   align?: 'start' | 'end';
   triggerClassName?: string;
+  portal?: boolean;
 }) {
   const [open, setOpen] = useState(false);
+  const [position, setPosition] = useState<CSSProperties>();
   const ref = useRef<HTMLDivElement>(null);
   const menuRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -246,7 +253,7 @@ export function Menu({
     els[next]?.focus();
   };
   const menu = (
-    <div ref={menuRef} className={cx(s.menu, align === 'start' && s.menuStart)} role="menu" aria-label={label} onKeyDown={onMenuKey}>
+      <div ref={menuRef} style={portal && !window.matchMedia?.('(max-width: 767px)').matches ? position : undefined} className={cx(s.menu, align === 'start' && s.menuStart)} role="menu" aria-label={label} onKeyDown={onMenuKey}>
       {header}
       {items.map((it) => (
         <button
@@ -261,6 +268,7 @@ export function Menu({
         >
           {it.icon && <Icon src={it.icon} size={18} />}
           {it.label}
+          {it.badge ? <span className={s.menuBadge}>{it.badge > 99 ? '99+' : it.badge}</span> : null}
         </button>
       ))}
     </div>
@@ -273,11 +281,18 @@ export function Menu({
         aria-label={label}
         aria-haspopup="menu"
         aria-expanded={open}
-        onClick={() => setOpen((v) => !v)}
+          onClick={e => {
+            if (portal) {
+              const rect = e.currentTarget.getBoundingClientRect();
+              const bottom = Math.max(12, window.innerHeight - rect.top + 6);
+              setPosition({ position: 'fixed', zIndex: 60, top: 'auto', bottom, right: Math.max(12, window.innerWidth - rect.right), maxHeight: Math.max(120, window.innerHeight - bottom - 12), overflowY: 'auto' });
+            }
+            setOpen(v => !v);
+          }}
       >
         {trigger}
       </button>
-      {open && (window.matchMedia?.('(max-width: 767px)').matches
+        {open && (portal || window.matchMedia?.('(max-width: 767px)').matches
         ? createPortal(menu, document.body)
         : menu)}
     </div>

apps/web/src/test/e2eBridge.ts

@@ -1,4 +1,4 @@
-import { fakeApi, makeUser } from './fakeApi';
+import { albumTracks, fakeApi, makeUser } from './fakeApi';
 import { mobileFixtures } from './mobileFixtures';
 
 /** Подменяет fetch на фейковый API. Включается только при сборке с VITE_E2E=1. */
@@ -6,9 +6,37 @@ export function installE2EFetch() {
   const api = fakeApi([
     makeUser('admin', 'admin', { must_change_credentials: true }),
     makeUser('alice', 'user'),
+    makeUser('update-manager', 'user', { manages_updates: true }),
     makeUser('mobile-admin', 'admin', { reviews_uploads: true }),
     makeUser('moderator', 'moderator', { reviews_uploads: true }),
   ]);
+  // A ready conversation lets browser tests exercise messages and music sharing.
+  const alice = [...api.users.values()].find(u => u.username === 'alice')!;
+  const friend = [...api.users.values()].find(u => u.username === 'moderator')!;
+  api.friendships.set([alice.id, friend.id].sort().join(':'), { sender: friend.id, accepted: true });
+  const listeningScenario = localStorage.getItem('pipu.e2e.listening');
+  if (listeningScenario) {
+    const device = crypto.randomUUID();
+    api.presence.set(friend.id, Date.now());
+    api.activityVisibility.set(friend.id, 'friends');
+    api.activity.set(friend.id, { device_id: device, track_id: albumTracks[0]!.id, track_title: albumTracks[0]!.title, artist: 'Кино', context: 'other', position_ms: 0 });
+    api.listeningPreferences.set(friend.id, { requests: listeningScenario === 'restricted' ? 'nobody' : 'friends', auto_accept: listeningScenario === 'automatic' ? 'friends' : 'nobody', autoplay: true });
+    if (listeningScenario === 'incoming') {
+      const roomId = crypto.randomUUID();
+      const requestId = crypto.randomUUID();
+      api.listeningRooms.set(roomId, { id: roomId, owner_id: friend.id, owner_name: friend.username, device_id: device, track_id: albumTracks[0]!.id, position_ms: 0, playing: false, updated_at: new Date().toISOString(), participants: [] });
+      api.listeningMembers.set(friend.id, roomId);
+      api.listeningRequests.set(requestId, { id: requestId, owner_id: friend.id, guest_id: alice.id, sender_id: friend.id, sender_name: friend.username, recipient_id: alice.id, kind: 'invite', expires_at: new Date(Date.now() + 120_000).toISOString() });
+    }
+  }
+  if (localStorage.getItem('pipu.e2e.notifications') === '1') {
+    const kinds = ['message', 'friend_request', 'friend_accepted', 'music'] as const;
+    for (let index = 0; index < 28; index++) api.notifications.push({
+      id: `event-${index}`, recipient: alice.id, actor_id: friend.id,
+      actor_name: index % 3 === 0 ? 'JoyRacoon' : index % 3 === 1 ? 'Александра' : 'Константин',
+      kind: kinds[index % kinds.length]!, created_at: new Date(Date.now() - index * 36e5).toISOString(), read: index >= 4,
+    });
+  }
   const orig = window.fetch.bind(window);
   window.fetch = async (input, init) => {
     const req = new Request(input, init);

apps/web/src/test/fakeApi.ts

@@ -78,13 +78,58 @@ export function fakeApi(initial: FakeUser[]) {
   const reactions = new Map<string, 'like' | 'dislike'>();
   const playlistOwners = new Map<string, string>();
   const playlists = new Map<string, components['schemas']['Playlist']>();
+  const friendships = new Map<string, { sender: string; accepted: boolean }>();
+  const blocks = new Set<string>();
+  const messages: (components['schemas']['DirectMessage'] & { recipient: string })[] = [];
+  const notifications: (components['schemas']['SocialNotification'] & { recipient: string })[] = [];
+  const activityVisibility = new Map<string, components['schemas']['ActivityVisibility']>();
+  const friendRecommendations = new Map<string, boolean>();
+  const activity = new Map<string, components['schemas']['ListeningActivity'] & { device_id: string; position_ms: number }>();
+  const listeningPreferences = new Map<string, components['schemas']['ListeningPreferences']>();
+  const listeningRooms = new Map<string, components['schemas']['ListeningRoom']>();
+  const listeningMembers = new Map<string, string>();
+  const listeningRequests = new Map<string, components['schemas']['ListeningRequest'] & { guest_id: string }>();
+  const typing = new Map<string, number>();
+  const presence = new Map<string, number>();
+  const defaultListening = { requests: 'nobody', auto_accept: 'nobody', autoplay: true } as const;
+  const pair = (a: string, b: string) => [a, b].sort().join(':');
+  const isBlocked = (a: string, b: string) => blocks.has(`${a}:${b}`) || blocks.has(`${b}:${a}`);
+  const socialPerson = (me: string, p: FakeUser): components['schemas']['SocialPerson'] => {
+    const f = friendships.get(pair(me, p.id));
+    const last = f?.accepted && !isBlocked(me, p.id) ? messages.filter(m => pair(m.sender_id, m.recipient) === pair(me, p.id)).at(-1) : undefined;
+    const visible = activityVisibility.get(p.id) === 'everyone' || activityVisibility.get(p.id) === 'friends' && f?.accepted;
+    return { id: p.id, username: p.username, display_name: p.display_name ?? p.username, ...(visible && activity.has(p.id) && !isBlocked(me,p.id) ? { activity: activity.get(p.id) } : {}),
+      ...(last ? { last_message: { id: last.id, sender_id: last.sender_id, text: last.deleted ? '' : last.text.slice(0, 160), attachment_kind: last.attachment_kind, created_at: last.created_at, deleted: last.deleted ?? false } } : {}),
+      relationship: blocks.has(`${me}:${p.id}`) ? 'blocked' : f?.accepted ? 'friend' : f ? f.sender === me ? 'outgoing' : 'incoming' : 'none',
+      online: !!f?.accepted && !isBlocked(me, p.id) && (presence.get(p.id) ?? 0) > Date.now() - 45_000,
+      unread: messages.filter(m => m.recipient === me && m.sender_id === p.id && !m.read).length };
+  };
+  const notify = (recipient: string, actor: FakeUser, kind: components['schemas']['SocialNotification']['kind']) => notifications.unshift({
+    id: crypto.randomUUID(), recipient, actor_id: actor.id, actor_name: actor.display_name ?? actor.username, kind, read: false, created_at: new Date().toISOString(),
+  });
 
+  let managementSources = [{ id: 'origin', name: 'Текущий репозиторий', url: 'https://git.example.org/pipu/music.git' }];
+  let managementJob: components['schemas']['ServerJob'] | null = null;
+  let configRevision = 1;
+  let configPending = false;
+  const configValues: Record<string, string> = {};
+  const configEntries: components['schemas']['ServerConfigEntry'][] = [
+    { key: 'LOG_LEVEL', group: 'shared', type: 'string', secret: false, readonly: false, effective: 'info', env: 'info', local: null, default_value: 'info', source: 'env' },
+    { key: 'TRAIN_HOUR', group: 'recommender', type: 'integer', secret: false, readonly: false, effective: '3', env: null, local: null, default_value: '3', source: 'default' },
+    { key: 'GITEA_TOKEN', group: 'api', type: 'string', secret: true, readonly: false, effective: '••••••••', env: null, local: '••••••••', default_value: '', source: 'local' },
+  ];
+  const serverConfig = () => ({ revision: String(configRevision), restart_required: configPending, entries: configEntries.map((entry) => {
+    const rawLocal = configValues[entry.key] ?? entry.local;
+    const local = entry.secret && rawLocal ? '••••••••' : rawLocal;
+    return { ...entry, local, effective: entry.env ?? local ?? entry.default_value, source: entry.env !== null ? 'env' : local !== null ? 'local' : 'default' };
+  }) });
   const me = (u: FakeUser): Me => ({
     id: u.id,
     username: u.username,
     display_name: u.display_name,
     role: u.role,
     reviews_uploads: u.reviews_uploads,
+    manages_updates: u.role === 'admin' || !!u.manages_updates,
     locale: u.locale,
     ui_prefs: prefs.get(u.id) ?? {},
     must_change_password: u.must_change_password,
@@ -107,6 +152,33 @@ export function fakeApi(initial: FakeUser[]) {
     calls.push({ method: req.method, path, body });
     const route = `${req.method} ${path}`;
     const user = current ? users.get(current) : undefined;
+    if (path.startsWith('/api/v1/admin/server/')) {
+      if (!user) return problem(401, 'auth.unauthorized');
+      const configs = path.includes('/config');
+      if (configs ? user.role !== 'admin' : user.role !== 'admin' && !user.manages_updates) return problem(403, 'auth.forbidden');
+      if (route === 'GET /api/v1/admin/server/updates') {
+        const channel = url.searchParams.get('channel') ?? 'latest';
+        const selected = url.searchParams.get('version') ?? '';
+        const target = channel === 'version' ? selected : channel === 'main' ? 'main' : 'v1.10.0';
+        return json({ sources: managementSources, versions: ['v1.10.0', 'v1.9.0', 'v2.0.0-rc.1'], current_version: '1.9.0', source_error: '', job: managementJob,
+          current_commit: 'a'.repeat(40), target_version: target, target_commit: target === 'v1.9.0' || target === 'main' ? 'a'.repeat(40) : 'b'.repeat(40),
+          update_state: !target ? 'select_version' : target === 'v1.9.0' || target === 'main' ? 'current' : 'available' });
+      }
+      if (route === 'PUT /api/v1/admin/server/update-sources') { managementSources = body?.sources as typeof managementSources; return json({ sources: managementSources }); }
+      if (route === 'GET /api/v1/admin/server/config') return json(serverConfig());
+      if (route === 'PATCH /api/v1/admin/server/config') {
+        if (body?.revision !== String(configRevision)) return problem(409, 'management.config_conflict');
+        for (const [key, value] of Object.entries(body?.values as Record<string, string | null>)) {
+          if (value === null) delete configValues[key]; else configValues[key] = value;
+        }
+        configRevision++; configPending = true; return json(serverConfig());
+      }
+      if (route === 'POST /api/v1/admin/server/updates' || route === 'POST /api/v1/admin/server/config/apply') {
+        managementJob = { id: 'job-1', kind: configs ? 'config' : 'update', state: 'running', target: configs ? 'config.local' : body?.channel === 'version' ? String(body.version) : body?.channel === 'main' ? 'main' : 'v1.10.0', started_at: '2026-10-22T09:00:00Z', finished_at: '', log: '→ build and restart' };
+        if (configs) configPending = false;
+        return json(managementJob, 202);
+      }
+    }
 
     switch (route) {
       case 'GET /api/v1/server-info':
@@ -158,6 +230,100 @@ export function fakeApi(initial: FakeUser[]) {
 
     if (!user || !req.headers.get('Authorization')) return problem(401, 'auth.unauthorized');
 
+    if (path === '/api/v1/me/social/activity/visibility' && body) { activityVisibility.set(user.id, body.visibility as components['schemas']['ActivityVisibility']); if (body.visibility === 'nobody') activity.delete(user.id); return new Response(null,{status:204}); }
+    if (path === '/api/v1/me/social/recommendations' && body) { friendRecommendations.set(user.id,!!body.enabled);return new Response(null,{status:204}); }
+    if (path === '/api/v1/me/social/activity' && body) {
+      if (activityVisibility.get(user.id) !== undefined && activityVisibility.get(user.id) !== 'nobody' && body.playing) {
+        const track = albumTracks.find(t => t.id === body.track_id); const playlist = playlists.get(String(body.playlist_id));
+        if (track) activity.set(user.id,{track_id:track.id,track_title:track.title,artist:'Кино',context: body.context as 'wave'|'playlist'|'other',device_id:String(body.device_id),position_ms:Number(body.position_ms??0),...(playlist ? {playlist_id:playlist.id,playlist_name:playlist.name} : {})});
+      } else activity.delete(user.id);
+      return new Response(null,{status:204});
+    }
+    const activityPlaylistPath=/^\/api\/v1\/social\/activity\/([^/]+)\/playlist$/.exec(path);
+    if (activityPlaylistPath) {
+      const owner=users.get(activityPlaylistPath[1]!); const a=owner ? socialPerson(user.id,owner).activity : undefined; const p=a?.playlist_id ? playlists.get(a.playlist_id) : undefined;
+      return p ? json({...p,share_id:null}) : problem(404,'social.activity_unavailable');
+    }
+    if (path === '/api/v1/me/social/listening/preferences' && body) { listeningPreferences.set(user.id,body as components['schemas']['ListeningPreferences']);return new Response(null,{status:204}); }
+    if (path === '/api/v1/me/social/listening') {
+      presence.set(user.id, Date.now());
+      const room=listeningRooms.get(listeningMembers.get(user.id) ?? '');
+      if(room)room.participants=[...listeningMembers].filter(([,id])=>id===room.id).map(([id])=>({id,name:users.get(id)?.display_name??users.get(id)?.username??id}));
+      return json({preferences:listeningPreferences.get(user.id)??defaultListening,room:room??null,requests:[...listeningRequests.values()].filter(r=>r.recipient_id===user.id||r.sender_id===user.id),server_time:new Date().toISOString()});
+    }
+    if (path === '/api/v1/me/social/listening/state' && body) {
+      const room=listeningRooms.get(String(body.room_id));if(!room||room.owner_id!==user.id||room.device_id!==body.device_id)return problem(403,'social.unavailable');
+      Object.assign(room,{track_id:body.track_id??null,position_ms:body.position_ms,playing:body.playing,updated_at:new Date().toISOString()});return new Response(null,{status:204});
+    }
+    if (path === '/api/v1/me/social/listening/actions' && body) {
+      const target=String(body.target_id);const op=String(body.action);
+      if(op==='join'||op==='invite'){
+        const host=op==='join'?target:user.id; const guest=op==='join'?user.id:target; const prefs=listeningPreferences.get(target)??defaultListening;
+        const friend=!!friendships.get(pair(user.id,target))?.accepted;
+        if(isBlocked(user.id,target)||!(prefs.requests==='everyone'||prefs.requests==='friends'&&friend))return problem(403,'social.listening_unavailable');
+        if ((presence.get(target) ?? 0) <= Date.now() - 45_000) return problem(409, 'social.person_offline');
+        const guestRoom = listeningRooms.get(listeningMembers.get(guest) ?? '');
+        const hostRoom = listeningRooms.get(listeningMembers.get(host) ?? '');
+        if (guestRoom && guestRoom.owner_id !== host || hostRoom && hostRoom.owner_id !== host) return problem(409, 'social.listening_busy');
+        if (guestRoom?.owner_id === host || listeningRequests.has(String(body.id))) return new Response(null, { status: 204 });
+        if ([...listeningRequests.values()].some(r => r.owner_id === host && r.guest_id === guest)) return problem(409, 'social.listening_pending');
+        let room=[...listeningRooms.values()].find(r=>r.owner_id===host);
+        const source=activity.get(host);if(!room){room={id:crypto.randomUUID(),owner_id:host,owner_name:users.get(host)?.username??host,device_id:String(op==='join'?source?.device_id:body.device_id),track_id:String(op==='join'?source?.track_id:body.track_id),position_ms:Number(op==='join'?source?.position_ms:body.position_ms??0),playing:true,updated_at:new Date().toISOString(),participants:[]};listeningRooms.set(room.id,room);listeningMembers.set(host,room.id);}
+        if(prefs.auto_accept==='everyone'||prefs.auto_accept==='friends'&&friend)listeningMembers.set(guest,room.id);
+        else listeningRequests.set(String(body.id),{id:String(body.id),owner_id:host,guest_id:guest,sender_id:user.id,sender_name:user.username,recipient_id:target,kind:op,expires_at:new Date(Date.now()+120000).toISOString()});
+      }else if(op==='accept'||op==='decline'||op==='cancel'){
+        const r=listeningRequests.get(target);if(r){if(op==='accept'&&r.recipient_id===user.id){const room=[...listeningRooms.values()].find(room=>room.owner_id===r.owner_id);if(room)listeningMembers.set(r.guest_id,room.id);}listeningRequests.delete(target);}
+      }else if(op==='leave'||op==='end'){
+        const room=listeningRooms.get(target);if(room?.owner_id===user.id){listeningRooms.delete(target);for(const [u,r]of listeningMembers)if(r===target)listeningMembers.delete(u);}else listeningMembers.delete(user.id);
+      }
+      return new Response(null,{status:204});
+    }
+    const chatMeta=/^\/api\/v1\/me\/social\/chats\/([^/]+)\/meta$/.exec(path);
+    if(chatMeta){const peer=chatMeta[1]!;if(!friendships.get(pair(user.id,peer))?.accepted||isBlocked(user.id,peer))return problem(403,'social.unavailable');if(req.method==='PUT'){typing.set(`${user.id}:${peer}`,body?.typing?Date.now()+6000:0);return new Response(null,{status:204});}return json({typing:(typing.get(`${peer}:${user.id}`)??0)>Date.now()});}
+    const updateMessage=/^\/api\/v1\/me\/social\/chats\/([^/]+)\/messages\/([^/]+)$/.exec(path);
+    if(updateMessage&&body){
+      const peer=updateMessage[1]!;const m=messages.find(m=>m.id===updateMessage[2]&&pair(m.sender_id,m.recipient)===pair(user.id,peer));
+      if(!m||!friendships.get(pair(user.id,peer))?.accepted||isBlocked(user.id,peer))return problem(403,'social.unavailable');
+      if(body.action!=='react'&&m.sender_id!==user.id)return problem(403,'social.unavailable');
+      if(body.action==='edit'){m.text=String(body.text);m.edited_at=new Date().toISOString();}
+      if(body.action==='delete'){m.deleted=true;m.text='';m.attachment_id=undefined;m.attachment_kind='none';m.reactions=[];}
+      if(body.action==='react'){const reactions=m.reactions??[];const old=reactions.find(r=>r.emoji===body.emoji);m.reactions=old?reactions.filter(r=>r!==old):[...reactions,{emoji:String(body.emoji),count:1,mine:true}];}
+      return new Response(null,{status:204});
+    }
+
+    if (path === '/api/v1/me/social') return json({
+      activity_visibility: activityVisibility.get(user.id) ?? 'nobody',
+      friends_recommendations: friendRecommendations.get(user.id) ?? true,
+      people: [...users.values()].filter(p => p.id !== user.id && !p.is_blocked && !blocks.has(`${p.id}:${user.id}`)).map(p => socialPerson(user.id, p)).filter(p => p.relationship !== 'none'),
+      notifications: notifications.filter(n => n.recipient === user.id && !isBlocked(user.id, n.actor_id)),
+      unread: notifications.filter(n => n.recipient === user.id && !n.read && !isBlocked(user.id, n.actor_id)).length,
+    });
+    if (path === '/api/v1/me/social/people') {
+      const q = url.searchParams.get('q')?.toLowerCase() ?? '';
+      return json([...users.values()].filter(p => p.id !== user.id && !p.is_blocked && !isBlocked(user.id,p.id) && `${p.username} ${p.display_name ?? ''}`.toLowerCase().includes(q)).map(p => socialPerson(user.id,p)));
+    }
+    if (path === '/api/v1/me/social/actions' && body) {
+      const peer = String(body.target_id); const action = body.action; const p = users.get(peer); const f = friendships.get(pair(user.id,peer));
+      if (action === 'request' && p && !isBlocked(user.id,peer) && !f) { friendships.set(pair(user.id,peer),{ sender:user.id,accepted:false }); notify(peer,user,'friend_request'); }
+      if (action === 'accept' && f && f.sender !== user.id && !f.accepted) { f.accepted=true; notify(peer,user,'friend_accepted'); }
+      if (action === 'remove' || action === 'block') friendships.delete(pair(user.id,peer));
+      if (action === 'block') blocks.add(`${user.id}:${peer}`);
+      if (action === 'unblock') blocks.delete(`${user.id}:${peer}`);
+      if (action === 'read_notification') notifications.filter(n => n.recipient === user.id && n.id === peer).forEach(n => { n.read=true; });
+      if (action === 'read_chat') { messages.filter(m => m.recipient === user.id && m.sender_id === peer && m.seq <= Number(body.up_to_seq)).forEach(m => { m.read=true; }); notifications.filter(n => n.recipient === user.id && n.actor_id === peer).forEach(n => { n.read=true; }); }
+      return new Response(null,{status:204});
+    }
+    const chatPath = /^\/api\/v1\/me\/social\/chats\/([^/]+)$/.exec(path);
+    if (chatPath) {
+      const peer=chatPath[1]!;if (!friendships.get(pair(user.id,peer))?.accepted || isBlocked(user.id,peer)) return problem(403,'social.unavailable');
+      if (req.method === 'GET') {const q=url.searchParams.get('q')?.toLowerCase()??'';return json(messages.filter(m => pair(m.sender_id,m.recipient)===pair(user.id,peer) && (!url.searchParams.has('before') || m.seq<Number(url.searchParams.get('before'))) && (!q||!m.deleted&&m.text.toLowerCase().includes(q)) && (url.searchParams.get('music') !== 'true' || !m.deleted && m.attachment_kind !== 'none')).slice(-50).map(m=>({...m,reply_preview:m.reply_to?messages.find(r=>r.id===m.reply_to)?.text:undefined})));}
+      if (req.method === 'POST' && body) {
+        const old=messages.find(m => m.id===body.id);if(old)return json(old);
+        const message={...body,recipient:peer,sender_id:user.id,seq:messages.length+1,created_at:new Date().toISOString(),read:false} as typeof messages[number];
+        messages.push(message);notify(peer,user,body.attachment_kind==='none'?'message':'music');return json(message);
+      }
+    }
+
 
     const sharedPath = /^\/api\/v1\/shared\/playlists\/([^/]+)$/.exec(path);
     if (sharedPath && req.method === 'GET') {
@@ -306,6 +472,8 @@ export function fakeApi(initial: FakeUser[]) {
         return json({ ...kino, album_count: 1, track_count: 0 });
       case `GET /api/v1/artists/${kino.id}/albums`:
         return json({ items: [albumSummary] });
+      case `GET /api/v1/artists/${kino.id}/top-tracks`:
+        return json({ items: albumTracks });
     }
     if (req.method === 'POST' && /^\/api\/v1\/admin\/users\/[^/]+\/reset-recommendations$/.test(path)) {
       onboarding.set(path.split('/')[5]!, null);
@@ -323,6 +491,10 @@ export function fakeApi(initial: FakeUser[]) {
           return problem(422, 'auth.username_taken', { errors: [{ field: 'username', code: 'auth.username_taken' }] });
         target.username = username;
       }
+      if (typeof body?.manages_updates === 'boolean') {
+        if (user.role !== 'admin') return problem(403, 'auth.forbidden');
+        target.manages_updates = body.manages_updates;
+      }
       if (typeof body?.reviews_uploads === 'boolean') {
         if (user.role !== 'admin') return problem(403, 'auth.forbidden');
         target.reviews_uploads = body.reviews_uploads;
@@ -349,5 +521,5 @@ export function fakeApi(initial: FakeUser[]) {
     return problem(404, 'common.not_found');
   };
 
-  return { fetch: fetchImpl as typeof fetch, calls, users, playlists, signOut: () => (current = null) };
+  return { presence, fetch: fetchImpl as typeof fetch, calls, users, playlists, friendships, notifications, messages, activityVisibility, activity, friendRecommendations, listeningPreferences, listeningRooms, listeningMembers, listeningRequests, signOut: () => (current = null) };
 }

apps/web/src/test/mobileFixtures.ts

@@ -24,6 +24,7 @@ const file: components['schemas']['UploadFile'] = {
 export const mobileFixtures: Record<string, unknown> = {
   '/api/v1/admin/sources': { items: [source] },
   [`/api/v1/admin/sources/${source.id}`]: source,
+  [`/api/v1/admin/sources/${source.id}/cover-stats`]: { files_total: 120, files_with_cover: 87, albums_pending: 3 },
   [`/api/v1/admin/sources/${source.id}/patterns`]: { patterns: [] },
   '/api/v1/admin/uploads': { items: [file], next_cursor: null },
   '/api/v1/uploads/quota': { limit_bytes: 10000000000, used_bytes: 42000000, per_user_limit_bytes: null,

apps/web/src/widgets/AppShell.module.css

@@ -170,6 +170,22 @@
   display: none;
 }
 
+.navSubsection {
+  min-height: 40px;
+  margin: 2px 0;
+  font-size: 13px;
+  font-weight: 600;
+  letter-spacing: normal;
+  text-transform: none;
+  color: var(--text2);
+}
+
+.navSubgroup > .navItem {
+  margin-left: 12px;
+  padding-left: 12px;
+  border-left: 1px solid var(--line);
+}
+
 .navItem {
   display: flex;
   align-items: center;
@@ -257,6 +273,11 @@
   animation: pipuIn 0.2s ease-out;
 }
 
+/* Communication owns its scroll areas so its composer stays above either player. */
+.socialContent { display: flex; flex-direction: column; overflow: hidden; }
+.socialContent > :not(.routeIn) { flex-shrink: 0; }
+.socialContent .routeIn { display: flex; flex: 1; min-height: 0; }
+
 @media (max-width: 1023px) {
   .shell {
     --side-w: 72px;
@@ -290,6 +311,9 @@
   .navGroupFolded {
     display: contents;
   }
+
+  .navSubsection { min-height: 0; }
+  .navSubgroup > .navItem { margin-left: 0; padding-left: 0; border-left: 0; }
 }
 
 .mobileBottom { display: none; }
@@ -298,7 +322,7 @@
   .shell, .shell.island {
     --side-w: 0px;
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto minmax(0, 1fr) 72px calc(64px + env(safe-area-inset-bottom, 0px));
+    grid-template-rows: auto minmax(0, 1fr) auto calc(64px + env(safe-area-inset-bottom, 0px));
     grid-template-areas: 'top' 'content' 'player' 'mobile';
   }
 
@@ -353,6 +377,8 @@
     border: 0; pointer-events: none;
   }
   .mobileMenu .navSectionTitle { display: block; }
+  .mobileMenu .navSubsection { color: var(--text2); font-size: 13px; }
+  .mobileMenu .navSubgroup > .navItem { margin-left: 12px; border-left: 1px solid var(--line); }
   .mobileMenu .navChevron { display: none; }
   .content, .island .content { padding: 20px 16px 24px; }
 }

apps/web/src/widgets/AppShell.tsx

@@ -2,7 +2,7 @@ import { queueIcon } from '../shared/ui/icons';
 import { unwrap } from '@pipu/core';
 import { useQuery } from '@tanstack/react-query';
 import { Link, Outlet, useNavigate, useRouterState } from '@tanstack/react-router';
-import { Suspense, useCallback, useState, type ReactNode } from 'react';
+import { Suspense, useCallback, useEffect, useId, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuthState, useSession, useUser } from '../app/session';
@@ -38,8 +38,12 @@ import { PlayerBar } from './PlayerBar';
 import { SearchBox } from './SearchBox';
 import s from './AppShell.module.css';
 import { DesktopUpdateDialog, DesktopOfflineBanner } from '../features/desktop/DesktopFeatures';
+import { useSocialUnread, useSocialProfileMenu, SocialProvider } from '../features/social/Social';
+import { MiniSocial } from '../features/social/MiniSocial';
+import { ListeningBanner } from '../features/social/Listening';
 
 type NavPath =
+  | '/friends'
   | '/'
   | '/admin/users'
   | '/admin/audit'
@@ -48,6 +52,8 @@ type NavPath =
   | '/admin/uploads'
   | '/uploads/new'
   | '/uploads/mine'
+  | '/admin/updates'
+  | '/admin/config'
   | '/admin/settings'
   | '/collection/playlists'
   | '/collection/downloads'
@@ -104,6 +110,8 @@ function NavSection({
   children,
   defaultFolded = false,
   mobile = false,
+  nested = false,
+  paths,
 }: {
   id: string;
   title: string;
@@ -111,12 +119,21 @@ function NavSection({
   children: ReactNode;
   defaultFolded?: boolean;
   mobile?: boolean;
+  nested?: boolean;
+  paths?: readonly string[];
 }) {
+  const groupId = useId();
+  const pathname = useRouterState({ select: (state) => state.location.pathname });
+  const active = paths?.some((path) => pathname === path || pathname.startsWith(`${path}/`)) ?? false;
   const [folded, setFolded] = useState(() => {
+    if (active) return false;
     if (readIds(FOLDED_KEY).includes(id)) return true;
     if (readIds(TOUCHED_KEY).includes(id)) return false;
     return defaultFolded;
   });
+  useEffect(() => {
+    if (active) setFolded(false);
+  }, [active, pathname]);
   const toggle = () => {
     const next = !folded;
     setFolded(next);
@@ -132,15 +149,15 @@ function NavSection({
   return (
     <>
       {mobile ? (
-        <h3 className={s.navSection}><span className={s.navSectionTitle}>{title}</span></h3>
+        <h3 className={cx(s.navSection, nested && s.navSubsection)}><span className={s.navSectionTitle}>{title}</span></h3>
       ) : (
-        <button type="button" className={s.navSection} aria-expanded={!folded} onClick={toggle}>
+        <button type="button" className={cx(s.navSection, nested && s.navSubsection)} aria-labelledby={`${groupId}-title`} aria-describedby={folded && badge ? `${groupId}-badge` : undefined} aria-expanded={!folded} aria-controls={groupId} onClick={toggle}>
-          <span className={s.navSectionTitle}>{title}</span>
+          <span id={`${groupId}-title`} className={s.navSectionTitle}>{title}</span>
-          {folded && badge ? <span className={s.navBadge}>{badge > 99 ? '99+' : badge}</span> : null}
+          {folded && badge ? <span id={`${groupId}-badge`} className={s.navBadge}>{badge > 99 ? '99+' : badge}</span> : null}
           <Icon src={chevronRightIcon} size={16} className={cx(s.navChevron, !folded && s.navChevronOpen)} />
         </button>
       )}
-      <div className={cx(s.navGroup, !mobile && folded && s.navGroupFolded)}>{children}</div>
+      <div id={groupId} role="group" aria-label={title} className={cx(s.navGroup, nested && s.navSubgroup, !mobile && folded && s.navGroupFolded)}>{children}</div>
     </>
   );
 }
@@ -148,16 +165,18 @@ function NavSection({
 /** Между выходом и редиректом на /login каркас не рисуется: пользователя уже нет. */
 export function AppShell() {
   return useAuthState().status === 'signed_in' ? (
-    <PlayerProvider>
+    <SocialProvider><PlayerProvider>
       <DesktopUpdateDialog />
       <Shell />
-    </PlayerProvider>
+    </PlayerProvider></SocialProvider>
   ) : null;
 }
 
 function Shell() {
   const { t } = useTranslation();
   const user = useUser();
+  const socialUnread = useSocialUnread();
+  const socialProfile = useSocialProfileMenu();
   const session = useSession();
   const desktop = useDesktop();
   const navigate = useNavigate();
@@ -170,11 +189,13 @@ function Shell() {
   const reviews = user.reviews_uploads;
   const pending = usePendingUploads(reviews);
   const unseen = useUnseenUploads(staff);
+  const uploadBadge = (reviews ? pending ?? 0 : 0) + (unseen ?? 0);
   const [mobileOpen, setMobileOpen] = useState(false);
   const closeMobile = useCallback(() => setMobileOpen(false), []);
   const navigation = (mobile = false) => (
     <>
         <NavLink to="/" label={t('nav.home')} icon={homeIcon} activeIcon={homeFillIcon} />
+        <NavLink to="/friends" label={t('social.title')} icon={groupIcon} activeIcon={groupFillIcon} badge={socialUnread} />
         <NavSection mobile={mobile} id="collection" title={t('nav.collection')}>
           <NavLink to="/collection/playlists" label={t('playlists.title')} icon={queueIcon} activeIcon={queueIcon} />
           {desktop && <NavLink to="/collection/downloads" label={t('desktop.offline')} icon={downloadIcon} activeIcon={downloadIcon} />}
@@ -197,13 +218,17 @@ function Shell() {
             badge={pending}
           />
         )}
+        {!staff && user.manages_updates && <NavLink to="/admin/updates" label={t('nav.server_updates')} icon={downloadIcon} activeIcon={downloadIcon} />}
         {staff && (
-          <NavSection mobile={mobile} id="admin" title={t('nav.admin')} badge={reviews ? pending : undefined} defaultFolded>
+          <NavSection mobile={mobile} id="admin" title={t('nav.admin')} badge={uploadBadge} paths={['/admin', '/uploads']} defaultFolded>
             <NavLink to="/admin/users" label={t('nav.users')} icon={groupIcon} activeIcon={groupFillIcon} />
+            <NavSection mobile={mobile} nested id="admin-media" title={t('nav.admin_media')} paths={['/admin/library', '/admin/sources']} defaultFolded>
+              <NavLink to="/admin/library" label={t('nav.library')} icon={libraryIcon} activeIcon={libraryFillIcon} />
               {user.role === 'admin' && (
                 <NavLink to="/admin/sources" label={t('nav.sources')} icon={storageIcon} activeIcon={storageFillIcon} />
               )}
-            <NavLink to="/admin/library" label={t('nav.library')} icon={libraryIcon} activeIcon={libraryFillIcon} />
+            </NavSection>
+            <NavSection mobile={mobile} nested id="admin-uploads" title={t('nav.admin_uploads')} badge={uploadBadge} paths={['/uploads', '/admin/uploads']} defaultFolded>
               <NavLink to="/uploads/new" label={t('nav.suggest')} icon={uploadIcon} activeIcon={uploadFillIcon} />
               <NavLink to="/uploads/mine" label={t('nav.my_uploads')} icon={myUploadsIcon} activeIcon={myUploadsFillIcon} badge={unseen} />
               {reviews && (
@@ -215,14 +240,21 @@ function Shell() {
                   badge={pending}
                 />
               )}
+            </NavSection>
+            {(user.role === 'admin' || user.manages_updates) && (
+              <NavSection mobile={mobile} nested id="admin-system" title={t('nav.admin_system')} paths={['/admin/updates', '/admin/config', '/admin/settings', '/admin/audit']} defaultFolded>
+                <NavLink to="/admin/updates" label={t('nav.server_updates')} icon={downloadIcon} activeIcon={downloadIcon} />
                 {user.role === 'admin' && (
                   <>
+                    <NavLink to="/admin/config" label={t('nav.server_config')} icon={tuneIcon} activeIcon={tuneFillIcon} />
                     <NavLink to="/admin/settings" label={t('nav.admin_settings')} icon={tuneIcon} activeIcon={tuneFillIcon} />
                     <NavLink to="/admin/audit" label={t('nav.audit')} icon={auditIcon} activeIcon={auditFillIcon} />
                   </>
                 )}
               </NavSection>
             )}
+          </NavSection>
+        )}
     </>
   );
 
@@ -260,6 +292,7 @@ function Shell() {
               </div>
             }
             items={[
+              ...socialProfile.items,
               { label: t('profile.settings'), icon: settingsIcon, onSelect: () => void navigate({ to: '/settings' }) },
               ...(!desktop
                 ? [{ label: t('profile.download_apps'), icon: downloadIcon, onSelect: () => void navigate({ to: '/download' }) }]
@@ -291,7 +324,9 @@ function Shell() {
         </Dialog>
       )}
 
+      {socialProfile.dialogs}
       <ShellMain />
+      <MiniSocial />
 
       <PlayerBar variant={island ? 'island' : 'bar'} />
     </div>
@@ -301,8 +336,9 @@ function Shell() {
 function ShellMain() {
   const key = useRouterState({ select: (st) => st.location.pathname });
   return (
-    <main id="content" className={s.content} tabIndex={-1}>
+    <main id="content" className={`${s.content} ${key === '/friends' ? s.socialContent : ''}`} tabIndex={-1}>
       <DesktopOfflineBanner />
+      <ListeningBanner />
       <div key={key} className={s.routeIn}>
         <Suspense fallback={<PageSkeleton />}>
           <Outlet />

apps/web/src/widgets/FullPlayer.module.css

@@ -0,0 +1,280 @@
+.root {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  display: grid;
+  place-items: center;
+  overflow-y: auto;
+  background: var(--bg, #05070d);
+  animation: pipuIn 0.18s ease-out;
+}
+
+.bg {
+  position: fixed;
+  inset: -20%;
+  opacity: 0.35;
+  filter: blur(80px) saturate(1.2);
+  pointer-events: none;
+}
+
+.bg img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.close {
+  position: fixed;
+  top: 20px;
+  right: 24px;
+  z-index: 2;
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border: 2px solid rgba(255, 255, 255, 0.35);
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.12);
+  color: #fff;
+  backdrop-filter: blur(12px);
+}
+
+.close:hover {
+  background: rgba(255, 255, 255, 0.22);
+}
+
+.stage {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: min(444px, calc(100vw - 32px), calc(100dvh - 240px));
+  min-width: 260px;
+  padding: 72px 0 32px;
+}
+
+.card {
+  position: relative;
+  aspect-ratio: 1;
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
+}
+
+.cover {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+
+.shade {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.35);
+  pointer-events: none;
+}
+
+/* Кнопки на обложке видны только при наведении / фокусе (на тач-экранах — всегда). */
+.shade,
+.round,
+.controls,
+.moreWrap {
+  opacity: 0;
+  transition: opacity 0.18s, background 0.12s;
+}
+
+.card:hover .shade,
+.card:hover .round,
+.card:hover .controls,
+.card:hover .moreWrap,
+.card:has(:focus-visible) .shade,
+.card:has(:focus-visible) .round,
+.card:has(:focus-visible) .controls,
+.card:has(:focus-visible) .moreWrap,
+.cardOpen .shade,
+.cardOpen .round,
+.cardOpen .controls,
+.cardOpen .moreWrap {
+  opacity: 1;
+}
+
+@media (hover: none) {
+  .shade,
+  .round,
+  .controls,
+  .moreWrap {
+    opacity: 1;
+  }
+}
+
+.round {
+  position: absolute;
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 52px;
+  height: 52px;
+  border-radius: 50%;
+  background: rgba(20, 20, 20, 0.82);
+  color: #fff;
+  transition: background 0.12s;
+}
+
+.round:hover:not(:disabled) {
+  background: rgba(50, 50, 50, 0.9);
+}
+
+.controls .round {
+  position: static;
+}
+
+.accent {
+  color: #ffe600;
+}
+
+.topLeft {
+  top: 16px;
+  left: 16px;
+}
+
+.topRight {
+  top: 16px;
+  right: 16px;
+}
+
+.bottomRight {
+  right: 16px;
+  bottom: 16px;
+}
+
+.moreWrap {
+  position: absolute;
+  left: 16px;
+  bottom: 16px;
+}
+
+.moreWrap .round {
+  position: static;
+}
+
+.menu {
+  position: absolute;
+  left: 0;
+  bottom: 56px;
+  display: flex;
+  flex-direction: column;
+  min-width: 200px;
+  padding: 6px;
+  border-radius: 12px;
+  background: rgba(20, 20, 20, 0.96);
+  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
+}
+
+.menuItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 8px;
+  color: #fff;
+  text-align: left;
+}
+
+.menuItem:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.controls {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 20px;
+  pointer-events: none;
+}
+
+.controls > * {
+  pointer-events: auto;
+}
+
+.play {
+  display: grid;
+  place-items: center;
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  background: #ffe600;
+  color: #111;
+  transition: transform 0.12s;
+}
+
+.play:hover:not(:disabled) {
+  transform: scale(1.06);
+}
+
+.play[aria-busy='true'] {
+  opacity: 0.8;
+}
+
+.meta {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  text-align: center;
+  min-width: 0;
+}
+
+.title {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text, #fff);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+}
+
+.artists {
+  color: var(--text2);
+  font-size: 16px;
+}
+
+.progress {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.range {
+  width: 100%;
+  height: 4px;
+  appearance: none;
+  border-radius: 2px;
+  background: linear-gradient(90deg, #fff var(--pct, 0%), rgba(255, 255, 255, 0.25) var(--pct, 0%));
+  cursor: pointer;
+}
+
+.range::-webkit-slider-thumb {
+  appearance: none;
+  width: 0;
+  height: 0;
+}
+
+.range::-moz-range-thumb {
+  width: 0;
+  height: 0;
+  border: 0;
+}
+
+.times {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: var(--text2);
+  font-variant-numeric: tabular-nums;
+}

apps/web/src/widgets/FullPlayer.tsx

@@ -0,0 +1,151 @@
+import { useEffect, useState, type CSSProperties } from 'react';
+import { createPortal } from 'react-dom';
+import { Link } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+
+import { ArtistLinks, Cover, coverSrc } from '../entities/catalog';
+import { AddToPlaylist } from '../entities/playlists';
+import { usePlayer, usePlayerState } from '../player/context';
+import { formatDuration } from '../shared/lib/format';
+import {
+  chevronDownIcon,
+  likeFillIcon,
+  likeIcon,
+  moreIcon,
+  nextIcon,
+  pauseIcon,
+  playIcon,
+  prevIcon,
+  queueIcon,
+  repeatIcon,
+  repeatOneIcon,
+  shareIcon,
+} from '../shared/ui/icons';
+import { cx, Icon } from '../shared/ui/ui';
+import s from './FullPlayer.module.css';
+
+/** Полноэкранный плеер: обложка с кнопками поверх неё, название и прогресс. Открывается кликом по обложке в плеере. */
+export function FullPlayer({ onClose, onQueue, share }: { onClose: () => void; onQueue: () => void; share: () => void }) {
+  const { t } = useTranslation();
+  const player = usePlayer();
+  const st = usePlayerState();
+  const [menu, setMenu] = useState(false);
+  const locked = st.listening?.locked === true;
+  const track = st.track;
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key !== 'Escape') return;
+      if (menu) setMenu(false);
+      else onClose();
+    };
+    document.addEventListener('keydown', onKey);
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.body.style.overflow = prev;
+    };
+  }, [onClose, menu]);
+  if (!track) return null;
+  const duration = st.durationMs || track.duration_ms;
+  const liked = track.reaction === 'like';
+  return createPortal(
+    <div className={s.root} role="dialog" aria-modal="true" aria-label={t('player.now_playing')}>
+      {track.album.cover_url && (
+        <span className={s.bg} aria-hidden>
+          <img src={coverSrc(track.album.cover_url, 300)} alt="" />
+        </span>
+      )}
+      <button type="button" className={s.close} aria-label={t('form.close')} onClick={onClose}>
+        <Icon src={chevronDownIcon} size={26} />
+      </button>
+      <div className={s.stage}>
+        <div className={cx(s.card, menu && s.cardOpen)}>
+          <Cover album={track.album} size="100%" className={s.cover} />
+          <div className={s.shade} aria-hidden />
+          <button type="button" className={cx(s.round, s.topRight)} aria-label={t('player.queue')} onClick={onQueue}>
+            <Icon src={queueIcon} size={22} />
+          </button>
+          <button
+            type="button"
+            className={cx(s.round, s.topLeft, st.repeat !== 'off' && s.accent)}
+            aria-label={t(`player.repeat_${st.repeat}`)}
+            disabled={locked}
+            onClick={() => player.cycleRepeat()}
+          >
+            <Icon src={st.repeat === 'one' ? repeatOneIcon : repeatIcon} size={20} />
+          </button>
+          <div className={s.controls}>
+            <button type="button" className={s.round} aria-label={t('player.prev')} disabled={locked} onClick={() => player.prev()}>
+              <Icon src={prevIcon} size={22} />
+            </button>
+            <button
+              type="button"
+              className={s.play}
+              aria-label={t(st.playing ? 'player.pause' : 'player.play')}
+              aria-busy={st.loading || undefined}
+              disabled={locked}
+              onClick={() => player.toggle()}
+            >
+              <Icon src={st.playing ? pauseIcon : playIcon} size={30} />
+            </button>
+            <button type="button" className={s.round} aria-label={t('player.next')} disabled={locked} onClick={() => player.next()}>
+              <Icon src={nextIcon} size={22} />
+            </button>
+          </div>
+          <div className={s.moreWrap}>
+            <button type="button" className={s.round} aria-label={t('player.more')} aria-expanded={menu} onClick={() => setMenu((v) => !v)}>
+              <Icon src={moreIcon} size={26} />
+            </button>
+            {menu && (
+              <div className={s.menu}>
+                <AddToPlaylist trackIds={[track.id]} className={s.menuItem} />
+                <button type="button" className={s.menuItem} onClick={() => { setMenu(false); share(); }}>
+                  <Icon src={shareIcon} size={18} />
+                  {t('player.share')}
+                </button>
+              </div>
+            )}
+          </div>
+          <button
+            type="button"
+            className={cx(s.round, s.bottomRight, liked && s.accent)}
+            aria-label={t(liked ? 'player.unlike' : 'player.like')}
+            aria-pressed={liked}
+            onClick={() => void player.react(track, liked ? null : 'like').catch(() => undefined)}
+          >
+            <Icon src={liked ? likeFillIcon : likeIcon} size={24} />
+          </button>
+        </div>
+        <div className={s.meta}>
+          <Link to="/track/$id" params={{ id: track.id }} className={s.title} onClick={onClose}>
+            {track.title}
+          </Link>
+          <span className={s.artists}>
+            <ArtistLinks artists={track.artists} hideUrlPreview />
+          </span>
+        </div>
+        <div className={s.progress}>
+          <input
+            type="range"
+            className={s.range}
+            min={0}
+            max={duration}
+            step={1000}
+            value={Math.min(st.positionMs, duration)}
+            aria-label={t('player.progress')}
+            aria-valuetext={formatDuration(st.positionMs)}
+            disabled={locked}
+            onChange={(e) => player.seek(Number(e.target.value))}
+            style={{ '--pct': `${(st.positionMs / duration) * 100}%` } as CSSProperties}
+          />
+          <span className={s.times}>
+            <span>{formatDuration(st.positionMs)}</span>
+            <span>{formatDuration(duration)}</span>
+          </span>
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}

apps/web/src/widgets/PlayerBar.module.css

@@ -259,7 +259,28 @@ a.source:hover {
 }
 
 .play[aria-busy='true'] {
-  opacity: 0.7;
+  opacity: 0.85;
+}
+
+.playSpinner {
+  width: 22px;
+  height: 22px;
+  border: 3px solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: playSpin 0.7s linear infinite;
+}
+
+@keyframes playSpin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .playSpinner {
+    animation-duration: 2s;
+  }
 }
 
 .progress {
@@ -413,28 +434,29 @@ a.source:hover {
 }
 
 @media (max-width: 767px) {
-  .bar { grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; padding: 0 8px; }
+  .bar {
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-areas: 'now now' 'controls actions';
+    gap: 4px 8px;
+    min-height: 72px;
+    padding: 8px 12px;
+  }
   .bar.island { position: relative; left: auto; bottom: auto; width: auto; height: auto;
     transform: none; margin: 0 8px; border-radius: 16px; }
-  .empty { grid-column: 1 / -1; }
+  .empty { grid-column: 1 / -1; grid-row: 1 / -1; }
   .placeholder { flex: none; }
-  .now { gap: 8px; }
+  .now { grid-area: now; gap: 10px; }
+  .center { grid-area: controls; justify-self: start; }
   .now > :first-child { width: 44px !important; height: 44px !important; }
   .source { display: none; }
   .controls { gap: 2px; }
   .play, .icon { width: 44px; height: 44px; }
-  .right { display: flex; gap: 0; }
+  .right { grid-area: actions; display: flex; gap: 0; }
   .right > :not(.queueButton):not(.shareButton):not(.playlistButton) { display: none; }
   .error { position: absolute; bottom: calc(100% + 8px); left: 8px; right: 8px;
     padding: 8px 12px; background: var(--surface3); border-radius: 10px; text-align: center; }
-  .drawer, .drawerIsland { bottom: calc(144px + env(safe-area-inset-bottom, 0px));
+  .drawer, .drawerIsland { bottom: calc(184px + env(safe-area-inset-bottom, 0px));
-    max-height: calc(100dvh - 180px - env(safe-area-inset-bottom, 0px)); }
+    max-height: calc(100dvh - 220px - env(safe-area-inset-bottom, 0px)); }
-}
-
-@media (max-width: 359px) {
-  .now > :first-child { display: none; }
-  /* share + очередь + три кнопки управления не оставляют месту название трека (e2e 320px). */
-  .shareButton { display: none; }
 }
 
 .shareStatus {

apps/web/src/widgets/PlayerBar.tsx

@@ -7,7 +7,9 @@ import { ArtistLinks, Cover, Equalizer } from '../entities/catalog';
 import { AddToPlaylist } from '../entities/playlists';
 import { usePlayer, usePlayerState } from '../player/context';
 import { formatDuration } from '../shared/lib/format';
-import { shareTrack } from '../shared/lib/share';
+import { trackShareUrl } from '@pipu/core';
+import { desktopHandle } from '../desktop';
+import { useMusicShare } from '../features/social/Social';
 import {
   albumIcon,
   closeIcon,
@@ -30,26 +32,20 @@ import {
   waveIcon,
 } from '../shared/ui/icons';
 import { cx, Icon } from '../shared/ui/ui';
+import { FullPlayer } from './FullPlayer';
 import s from './PlayerBar.module.css';
 
 /** Плеер: полоса внизу (`bar`, по умолчанию) или плавающий остров (`island`) — выбор в настройках (docs/design.md). */
 export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
   const { t } = useTranslation();
   const player = usePlayer();
+  const openShare = useMusicShare();
   const st = usePlayerState();
+  const locked = st.listening?.locked === true;
   const narrow = useNarrow();
   const [sheetOpen, setSheetOpen] = useState(false);
+  const [fullOpen, setFullOpen] = useState(false);
   const [queueOpen, setQueueOpen] = useState(false);
-  const [shareStatus, setShareStatus] = useState<'copied' | 'error' | null>(null);
-  const [sharing, setSharing] = useState(false);
-  useEffect(() => {
-    setShareStatus(null);
-  }, [st.track?.id]);
-  useEffect(() => {
-    if (!shareStatus) return;
-    const timer = setTimeout(() => setShareStatus(null), 4000);
-    return () => clearTimeout(timer);
-  }, [shareStatus]);
   const queueButton = useRef<HTMLButtonElement>(null);
   const queueId = useId();
   const closeQueue = useCallback(() => {
@@ -72,17 +68,8 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
   }
 
   const react = (r: 'like' | 'dislike') => void player.react(track, track.reaction === r ? null : r).catch(() => undefined);
-  const share = async () => {
+  const share = () => {
-    setSharing(true);
+    openShare({ attachment: { kind: 'track', id: track.id, title: track.title }, url: trackShareUrl(desktopHandle()?.server ?? window.location.origin, track.id) });
-    setShareStatus(null);
-    try {
-      const result = await shareTrack(track.id, track.title);
-      if (result === 'copied') setShareStatus('copied');
-    } catch {
-      setShareStatus('error');
-    } finally {
-      setSharing(false);
-    }
   };
   const repeatLabel = t(`player.repeat_${st.repeat}`);
   const ctx = st.context;
@@ -101,26 +88,26 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
     <footer className={cx(s.bar, variant === 'island' && s.island)} aria-label={t('player.label')}>
       <div
         className={s.now}
-        onClick={
+        onClick={(e) => {
-          narrow
+          if ((e.target as HTMLElement).closest('a, button')) return;
-            ? (e) => {
+          if (narrow) setSheetOpen(true);
-                if (!(e.target as HTMLElement).closest('a, button')) setSheetOpen(true);
+          else setFullOpen(true);
-              }
+        }}
-            : undefined
-        }
       >
         {narrow ? (
           <button type="button" className={s.nowArt} aria-label={t('player.expand')} onClick={() => setSheetOpen(true)}>
-            <Cover album={track.album} size={52} className={st.playing ? s.coverLive : undefined} />
+            <Cover album={track.album} size={44} className={st.playing ? s.coverLive : undefined} />
             {st.playing && <span className={s.nowEq}><Equalizer playing /></span>}
           </button>
         ) : (
+          <button type="button" className={s.nowArt} aria-label={t('player.expand')} onClick={() => setFullOpen(true)}>
             <Cover album={track.album} size={52} className={st.playing ? s.coverLive : undefined} />
+          </button>
         )}
         <div className={s.meta}>
-          <span className={s.title}>{track.title}</span>
+          <span className={s.title} title={track.title}>{track.title}</span>
           <span className={s.artists}>
-            <ArtistLinks artists={track.artists} />
+            <ArtistLinks artists={track.artists} hideUrlPreview />
           </span>
           {source &&
             (ctx?.type === 'album' && ctx.id ? (
@@ -148,7 +135,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
           >
             <Icon src={track.reaction === 'dislike' ? dislikeFillIcon : dislikeIcon} />
           </button>
-          <button type="button" className={s.icon} aria-label={t('player.prev')} onClick={() => player.prev()}>
+          <button type="button" className={s.icon} aria-label={t('player.prev')} disabled={locked} onClick={() => player.prev()}>
             <Icon src={prevIcon} size={26} />
           </button>
           <button
@@ -156,11 +143,11 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
             className={s.play}
             aria-label={t(st.playing ? 'player.pause' : 'player.play')}
             aria-busy={st.loading || undefined}
-            onClick={() => player.toggle()}
+            disabled={locked} onClick={() => player.toggle()}
           >
-            <Icon src={st.playing ? pauseIcon : playIcon} size={28} />
+            {st.loading ? <span className={s.playSpinner} aria-hidden /> : <Icon src={st.playing ? pauseIcon : playIcon} size={28} />}
           </button>
-          <button type="button" className={s.icon} aria-label={t('player.next')} onClick={() => player.next()}>
+          <button type="button" className={s.icon} aria-label={t('player.next')} disabled={locked} onClick={() => player.next()}>
             <Icon src={nextIcon} size={26} />
           </button>
           <button
@@ -184,7 +171,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
             value={Math.min(st.positionMs, st.durationMs || track.duration_ms)}
             aria-label={t('player.progress')}
             aria-valuetext={formatDuration(st.positionMs)}
-            onChange={(e) => player.seek(Number(e.target.value))}
+            disabled={locked} onChange={(e) => player.seek(Number(e.target.value))}
             style={{ '--pct': `${(st.positionMs / (st.durationMs || track.duration_ms)) * 100}%` } as CSSProperties}
           />
           <span className={s.time}>{formatDuration(st.durationMs || track.duration_ms)}</span>
@@ -198,7 +185,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
 
       <div className={s.right}>
         <AddToPlaylist trackIds={[track.id]} compact className={cx(s.icon, s.playlistButton)} />
-        <button type="button" className={cx(s.icon, s.shareButton)} aria-label={t('player.share')} title={t('player.share')} disabled={sharing} onClick={() => void share()}>
+        <button type="button" className={cx(s.icon, s.shareButton)} aria-label={t('player.share')} title={t('player.share')} onClick={() => void share()}>
           <Icon src={shareIcon} size={20} />
         </button>
         <button
@@ -206,7 +193,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
           className={cx(s.icon, st.shuffle && s.accent)}
           aria-label={t('player.shuffle')}
           aria-pressed={st.shuffle}
-          onClick={() => player.toggleShuffle()}
+          disabled={locked} onClick={() => player.toggleShuffle()}
         >
           <Icon src={shuffleIcon} size={20} />
         </button>
@@ -215,7 +202,7 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
           className={cx(s.icon, st.repeat !== 'off' && s.accent)}
           aria-label={repeatLabel}
           title={repeatLabel}
-          onClick={() => player.cycleRepeat()}
+          disabled={locked} onClick={() => player.cycleRepeat()}
         >
           <Icon src={st.repeat === 'one' ? repeatOneIcon : repeatIcon} size={20} />
         </button>
@@ -255,11 +242,19 @@ export function PlayerBar({ variant = 'bar' }: { variant?: 'bar' | 'island' }) {
           variant={variant}
           onClose={() => setSheetOpen(false)}
           share={share}
-          sharing={sharing}
+        />
+      )}
+      {fullOpen && !narrow && (
+        <FullPlayer
+          onClose={() => setFullOpen(false)}
+          onQueue={() => {
+            setFullOpen(false);
+            setQueueOpen(true);
+          }}
+          share={share}
         />
       )}
       {queueOpen && <QueueDrawer id={queueId} variant={variant} onClose={closeQueue} />}
-      {shareStatus && <span className={s.shareStatus} role="status">{t(shareStatus === 'copied' ? 'player.link_copied' : 'player.share_error')}</span>}
     </footer>
   );
 }
@@ -281,16 +276,15 @@ function NowPlayingSheet({
   variant,
   onClose,
   share,
-  sharing,
 }: {
   variant: 'bar' | 'island';
   onClose: () => void;
-  share: () => Promise<void>;
+  share: () => void;
-  sharing: boolean;
 }) {
   const { t } = useTranslation();
   const player = usePlayer();
   const st = usePlayerState();
+  const locked = st.listening?.locked === true;
   const track = st.track;
   useEffect(() => {
     const onKey = (e: KeyboardEvent) => {
@@ -328,7 +322,7 @@ function NowPlayingSheet({
             {track.title}
           </Link>
           <span className={s.artists}>
-            <ArtistLinks artists={track.artists} />
+            <ArtistLinks artists={track.artists} hideUrlPreview />
           </span>
         </div>
         <div className={s.progress}>
@@ -341,7 +335,7 @@ function NowPlayingSheet({
             step={1000}
             value={Math.min(st.positionMs, st.durationMs || track.duration_ms)}
             aria-label={t('player.progress')}
-            onChange={(e) => player.seek(Number(e.target.value))}
+            disabled={locked} onChange={(e) => player.seek(Number(e.target.value))}
             style={{ '--pct': `${(st.positionMs / (st.durationMs || track.duration_ms)) * 100}%` } as CSSProperties}
           />
           <span className={s.time}>{formatDuration(st.durationMs || track.duration_ms)}</span>
@@ -350,13 +344,13 @@ function NowPlayingSheet({
           <button type="button" className={cx(s.icon, track.reaction === 'dislike' && s.danger)} aria-label={t(track.reaction === 'dislike' ? 'player.undislike' : 'player.dislike')} aria-pressed={track.reaction === 'dislike'} onClick={() => react('dislike')}>
             <Icon src={track.reaction === 'dislike' ? dislikeFillIcon : dislikeIcon} />
           </button>
-          <button type="button" className={s.icon} aria-label={t('player.prev')} onClick={() => player.prev()}>
+          <button type="button" className={s.icon} aria-label={t('player.prev')} disabled={locked} onClick={() => player.prev()}>
             <Icon src={prevIcon} size={28} />
           </button>
-          <button type="button" className={s.play} aria-label={t(st.playing ? 'player.pause' : 'player.play')} onClick={() => player.toggle()}>
+          <button type="button" className={s.play} aria-label={t(st.playing ? 'player.pause' : 'player.play')} aria-busy={st.loading || undefined} disabled={locked} onClick={() => player.toggle()}>
-            <Icon src={st.playing ? pauseIcon : playIcon} size={32} />
+            {st.loading ? <span className={s.playSpinner} aria-hidden /> : <Icon src={st.playing ? pauseIcon : playIcon} size={32} />}
           </button>
-          <button type="button" className={s.icon} aria-label={t('player.next')} onClick={() => player.next()}>
+          <button type="button" className={s.icon} aria-label={t('player.next')} disabled={locked} onClick={() => player.next()}>
             <Icon src={nextIcon} size={28} />
           </button>
           <button type="button" className={cx(s.icon, track.reaction === 'like' && s.accent)} aria-label={t(track.reaction === 'like' ? 'player.unlike' : 'player.like')} aria-pressed={track.reaction === 'like'} onClick={() => react('like')}>
@@ -364,13 +358,13 @@ function NowPlayingSheet({
           </button>
         </div>
         <div className={s.sheetExtra}>
-          <button type="button" className={cx(s.icon, st.shuffle && s.accent)} aria-label={t('player.shuffle')} aria-pressed={st.shuffle} onClick={() => player.toggleShuffle()}>
+          <button type="button" className={cx(s.icon, st.shuffle && s.accent)} aria-label={t('player.shuffle')} aria-pressed={st.shuffle} disabled={locked} onClick={() => player.toggleShuffle()}>
             <Icon src={shuffleIcon} size={22} />
           </button>
-          <button type="button" className={cx(s.icon, st.repeat !== 'off' && s.accent)} aria-label={repeatLabel} onClick={() => player.cycleRepeat()}>
+          <button type="button" className={cx(s.icon, st.repeat !== 'off' && s.accent)} aria-label={repeatLabel} disabled={locked} onClick={() => player.cycleRepeat()}>
             <Icon src={st.repeat === 'one' ? repeatOneIcon : repeatIcon} size={22} />
           </button>
-          <button type="button" className={s.icon} aria-label={t('player.share')} disabled={sharing} onClick={() => void share()}>
+          <button type="button" className={s.icon} aria-label={t('player.share')} onClick={() => void share()}>
             <Icon src={shareIcon} size={20} />
           </button>
           <button type="button" className={s.icon} aria-label={t(st.muted ? 'player.unmute' : 'player.mute')} onClick={() => player.toggleMute()}>
@@ -399,6 +393,7 @@ function QueueDrawer({ id, variant, onClose }: { id: string; variant: 'bar' | 'i
   const { t } = useTranslation();
   const player = usePlayer();
   const st = usePlayerState();
+  const locked = st.listening?.locked === true;
   const upcoming = st.queue.slice(st.index, st.index + 40);
   const close = useRef<HTMLButtonElement>(null);
   // Клавиатура: при открытии фокус в панель, Escape закрывает.
@@ -428,7 +423,7 @@ function QueueDrawer({ id, variant, onClose }: { id: string; variant: 'bar' | 'i
             type="button"
             className={cx(s.queueRow, k === 0 && s.queueCurrent)}
             aria-current={k === 0 || undefined}
-            onClick={() => player.jump(st.index + k)}
+            disabled={st.listening?.locked} onClick={() => player.jump(st.index + k)}
           >
             <Cover album={tr.album} size={40} />
             <span className={s.meta}>