feat: auto-aktualizacja yt-dlp (start + cyklicznie) + endpointy /api/ytdlp i przycisk w UI

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

apps/web/src/App.tsx

@@ -83,6 +83,7 @@ export default function App() {
   const [busy, setBusy] = useState(false);
   const [progress, setProgress] = useState(0);
   const [log, setLog] = useState<string[]>(['OK: wszystko gotowe do pobierania.']);
+  const [ytdlp, setYtdlp] = useState<{ version: string; autoUpdate: boolean; updating?: boolean } | null>(null);
   const esRef = useRef<EventSource | null>(null);
   const jobRef = useRef<string | null>(null);
   const logEndRef = useRef<HTMLDivElement | null>(null);
@@ -98,6 +99,31 @@ export default function App() {
     logEndRef.current?.scrollIntoView({ block: 'end' });
   }, [log]);
 
+  useEffect(() => {
+    fetch('/api/ytdlp')
+      .then((r) => r.json())
+      .then(setYtdlp)
+      .catch(() => {});
+  }, []);
+
+  async function checkUpdate() {
+    setYtdlp((y) => (y ? { ...y, updating: true } : y));
+    appendLog('Sprawdzam aktualizacje yt-dlp...');
+    try {
+      const r = await fetch('/api/ytdlp/update', { method: 'POST' });
+      const res = await r.json();
+      appendLog(
+        res.updated
+          ? `yt-dlp zaktualizowany do ${res.version}.`
+          : `yt-dlp jest aktualny (${res.version}).`,
+      );
+      setYtdlp((y) => (y ? { ...y, version: res.version, updating: false } : y));
+    } catch {
+      appendLog('Nie udało się sprawdzić aktualizacji yt-dlp.');
+      setYtdlp((y) => (y ? { ...y, updating: false } : y));
+    }
+  }
+
   function appendLog(line: string) {
     setLog((l) => [...l.slice(-400), line]);
   }
@@ -318,6 +344,17 @@ export default function App() {
           <button className="ghost" onClick={() => alert('Wsparcie: napisz na support@naurecki.pl')}>
             Wsparcie
           </button>
+          {ytdlp && (
+            <div className="ytdlp-info">
+              <span title={ytdlp.autoUpdate ? 'Auto-aktualizacja włączona' : 'Auto-aktualizacja wyłączona'}>
+                yt-dlp {ytdlp.version}
+                {ytdlp.autoUpdate ? ' · auto-update' : ''}
+              </span>
+              <button className="ghost small" onClick={checkUpdate} disabled={ytdlp.updating}>
+                {ytdlp.updating ? 'Sprawdzam…' : 'Sprawdź aktualizacje'}
+              </button>
+            </div>
+          )}
           <button
             className="ghost"
             onClick={() =>

apps/web/src/styles.css

@@ -121,7 +121,9 @@ body {
 }
 .logline { white-space: pre-wrap; word-break: break-all; line-height: 1.5; }
 
-.foot { display: flex; justify-content: space-between; margin-top: 16px; }
+.foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; gap: 12px; }
+.ytdlp-info { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; }
+.ghost.small { padding: 6px 12px; font-size: 12px; }
 .ghost {
   background: transparent; border: 1px solid var(--border); border-radius: 8px;
   color: var(--text); padding: 9px 18px; font-size: 13px; cursor: pointer;