Implement Phase 6: MeTube download integration

- MeTubeClient encapsulates all MeTube HTTP/Socket.IO calls (verified against
  the real MeTube source: /add returns no job id, GET /history gives a queue
  snapshot for reconciliation, filenames arrive already relative, percent is
  a 0-100 float)
- download_jobs table + service: request/dedup active downloads, apply live
  Socket.IO events (added/updated/completed/canceled/cleared) matched by
  canonical YouTube URL, safe relative-path -> public media URL construction
- Reconciliation on startup against MeTube's live queue/done state (section 19):
  non-terminal jobs recovered where possible, else marked "unknown"; already
  completed jobs are left untouched
- POST/GET /api/videos/{id}/download(-status), recheck-local; feed/video
  detail now report real local availability instead of a stub
- Frontend: download button with live status polling (queued/downloading %/
  postprocessing/completed/failed+retry), local <video> playback with
  YouTube fallback on playback error
- health.py now delegates to MeTubeClient (single place for MeTube calls)

26 new backend tests (63 total). Verified live: Socket.IO connects
successfully to the real MeTube instance on deploy.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/App.css

@@ -359,13 +359,49 @@
   margin-bottom: 16px;
 }
 
-.player-wrapper iframe {
+.player-wrapper iframe,
+.player-wrapper video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   border: 0;
+  background: #000;
+}
+
+.download-badge {
+  display: inline-block;
+  font-size: 12px;
+  padding: 3px 8px;
+  border-radius: 10px;
+  background: #eee;
+}
+
+.download-badge.completed {
+  background: #dcf5df;
+  color: #1a7f2e;
+}
+
+.download-badge.error {
+  background: #fbdcdc;
+  color: #a3221f;
+}
+
+.download-error {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.video-actions button,
+.video-page-meta button {
+  font-size: 13px;
+  padding: 4px 10px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
 }
 
 .video-page-title {

frontend/src/api/client.ts

@@ -168,6 +168,28 @@ export function getVideo(youtubeVideoId: string) {
   return request<FeedVideoDto>(`/api/videos/${youtubeVideoId}`)
 }
 
+export interface DownloadJobDto {
+  status: string
+  progress_percent: number | null
+  media_url: string | null
+  error_message: string | null
+  requested_at?: string
+  started_at?: string | null
+  completed_at?: string | null
+}
+
+export function downloadVideo(youtubeVideoId: string) {
+  return request<DownloadJobDto>(`/api/videos/${youtubeVideoId}/download`, { method: 'POST' })
+}
+
+export function getDownloadStatus(youtubeVideoId: string) {
+  return request<DownloadJobDto>(`/api/videos/${youtubeVideoId}/download-status`)
+}
+
+export function recheckLocal(youtubeVideoId: string) {
+  return request<DownloadJobDto>(`/api/videos/${youtubeVideoId}/recheck-local`, { method: 'POST' })
+}
+
 export function getFeed(
   params: { categoryId?: number; uncategorized?: boolean; channelId?: number; cursor?: string } = {},
 ) {

frontend/src/components/DownloadButton.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import type { FeedVideoDto } from '../api/client'
+import { downloadVideo, getDownloadStatus } from '../api/client'
+
+const ACTIVE_STATUSES = ['queued', 'downloading', 'postprocessing']
+
+const STATUS_LABELS: Record<string, string> = {
+  queued: 'В очереди...',
+  postprocessing: 'Обработка...',
+}
+
+interface Props {
+  video: FeedVideoDto
+}
+
+function DownloadButton({ video }: Props) {
+  const queryClient = useQueryClient()
+  const [polling, setPolling] = useState(ACTIVE_STATUSES.includes(video.local.status))
+
+  const statusQuery = useQuery({
+    queryKey: ['download-status', video.youtube_video_id],
+    queryFn: () => getDownloadStatus(video.youtube_video_id),
+    enabled: polling,
+    refetchInterval: (query) => (query.state.data && ACTIVE_STATUSES.includes(query.state.data.status) ? 2000 : false),
+    initialData: polling
+      ? {
+          status: video.local.status,
+          progress_percent: video.local.progress_percent,
+          media_url: video.local.media_url,
+          error_message: null,
+        }
+      : undefined,
+  })
+
+  const downloadMutation = useMutation({
+    mutationFn: () => downloadVideo(video.youtube_video_id),
+    onSuccess: (data) => {
+      queryClient.setQueryData(['download-status', video.youtube_video_id], data)
+      setPolling(true)
+    },
+  })
+
+  const current = polling ? statusQuery.data : undefined
+  const status = current?.status ?? video.local.status
+  const percent = current?.progress_percent ?? video.local.progress_percent
+
+  useEffect(() => {
+    if (current && !ACTIVE_STATUSES.includes(current.status)) {
+      setPolling(false)
+      if (current.status === 'completed' || current.status === 'failed') {
+        queryClient.invalidateQueries({ queryKey: ['feed'] })
+      }
+    }
+  }, [current?.status, queryClient])
+
+  if (status === 'completed') {
+    return <span className="download-badge completed">✓ На сервере</span>
+  }
+
+  if (status === 'downloading') {
+    return <span className="download-badge">{percent ?? 0}%</span>
+  }
+
+  if (status === 'queued' || status === 'postprocessing') {
+    return <span className="download-badge">{STATUS_LABELS[status]}</span>
+  }
+
+  if (status === 'failed') {
+    return (
+      <span className="download-error">
+        <span className="download-badge error">Ошибка</span>
+        <button onClick={() => downloadMutation.mutate()} disabled={downloadMutation.isPending}>
+          Повторить
+        </button>
+      </span>
+    )
+  }
+
+  return (
+    <button onClick={() => downloadMutation.mutate()} disabled={downloadMutation.isPending}>
+      ⬇ Скачать
+    </button>
+  )
+}
+
+export default DownloadButton

frontend/src/components/Player.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react'
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import type { FeedVideoDto } from '../api/client'
+import { recheckLocal } from '../api/client'
+
+interface Props {
+  video: FeedVideoDto
+}
+
+function Player({ video }: Props) {
+  const [localFailed, setLocalFailed] = useState(false)
+  const queryClient = useQueryClient()
+
+  const recheckMutation = useMutation({
+    mutationFn: () => recheckLocal(video.youtube_video_id),
+    onSettled: () => {
+      queryClient.invalidateQueries({ queryKey: ['video', video.youtube_video_id] })
+      queryClient.invalidateQueries({ queryKey: ['download-status', video.youtube_video_id] })
+    },
+  })
+
+  const useLocal = video.local.available && !!video.local.media_url && !localFailed
+
+  if (useLocal) {
+    return (
+      <>
+        <div className="player-wrapper">
+          {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
+          <video
+            controls
+            src={video.local.media_url!}
+            onError={() => {
+              setLocalFailed(true)
+              recheckMutation.mutate()
+            }}
+          />
+        </div>
+        <div className="video-page-source">● Локальная копия · mediaVM</div>
+      </>
+    )
+  }
+
+  return (
+    <>
+      <div className="player-wrapper">
+        <iframe
+          src={`https://www.youtube-nocookie.com/embed/${video.youtube_video_id}`}
+          title={video.title}
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          allowFullScreen
+        />
+      </div>
+      <div className="video-page-source">
+        {localFailed ? 'Локальная копия недоступна. Переключено на YouTube.' : 'Источник: YouTube'}
+      </div>
+    </>
+  )
+}
+
+export default Player

frontend/src/components/VideoCard.tsx

@@ -1,6 +1,7 @@
 import { Link } from 'react-router-dom'
 import type { FeedVideoDto } from '../api/client'
 import { formatDuration, formatRelativeTime } from '../utils/format'
+import DownloadButton from './DownloadButton'
 
 interface Props {
   video: FeedVideoDto
@@ -31,6 +32,7 @@ function VideoCard({ video }: Props) {
           <Link to={href} className="button-link">
             Смотреть
           </Link>
+          <DownloadButton video={video} />
         </div>
       </div>
     </li>

frontend/src/pages/VideoPage.tsx

@@ -2,6 +2,8 @@ import { useQuery } from '@tanstack/react-query'
 import { Link, useParams } from 'react-router-dom'
 import { getVideo } from '../api/client'
 import { formatDuration, formatRelativeTime } from '../utils/format'
+import DownloadButton from '../components/DownloadButton'
+import Player from '../components/Player'
 
 function VideoPage() {
   const { youtubeVideoId } = useParams<{ youtubeVideoId: string }>()
@@ -40,14 +42,7 @@ function VideoPage() {
         ← Лента
       </Link>
 
-      <div className="player-wrapper">
-        <iframe
-          src={`https://www.youtube-nocookie.com/embed/${video.youtube_video_id}`}
-          title={video.title}
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-        />
-      </div>
+      <Player video={video} />
 
       <h1 className="video-page-title">{video.title}</h1>
 
@@ -56,10 +51,10 @@ function VideoPage() {
         {' · '}
         {formatRelativeTime(video.published_at)}
         {duration && ` · ${duration}`}
+        {' · '}
+        <DownloadButton video={video} />
       </div>
 
-      <div className="video-page-source">Источник: YouTube</div>
-
       {video.categories.length > 0 && (
         <div className="video-page-categories">
           {video.categories.map((c) => (