From ecb246ed99e0f894f9c492e5d7685fc448d1f03f Mon Sep 17 00:00:00 2001
From: Mattias Tall <mattias.tall@ucr.uu.se>
Date: Tue, 26 May 2026 10:45:28 +0200
Subject: [PATCH] Add yt-dlp diagnostic button to Settings page

Shows node version, yt-dlp version, cookie args, and raw stderr tail
to diagnose download/metadata failures without needing shell access.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/Settings.jsx | 44 +++++++++++++++++++++++++++++++++
 1 file changed, 44 insertions(+)

diff --git a/frontend/src/pages/Settings.jsx b/frontend/src/pages/Settings.jsx
index f206c29..5df18f3 100644
--- a/frontend/src/pages/Settings.jsx
+++ b/frontend/src/pages/Settings.jsx
@@ -295,6 +295,49 @@ function CookiesSection({ s, qc, set }) {
   );
 }
 
+function DiagnosticSection() {
+  const [result, setResult] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const run = async () => {
+    setLoading(true);
+    setResult(null);
+    try {
+      const res = await testYtdlp();
+      setResult(res.data);
+    } catch (e) {
+      setResult({ error: e.response?.data?.detail || e.message });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Section title="Diagnostics">
+      <div className="px-5 py-4 flex flex-col gap-3">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium text-zinc-200">Test yt-dlp</p>
+            <p className="text-xs text-zinc-500 mt-0.5">Runs a metadata fetch against a test video and shows the raw output.</p>
+          </div>
+          <button
+            onClick={run}
+            disabled={loading}
+            className="shrink-0 px-4 py-2 rounded-lg bg-zinc-800 text-zinc-300 text-sm hover:bg-zinc-700 transition-colors disabled:opacity-50"
+          >
+            {loading ? "Running…" : "Run test"}
+          </button>
+        </div>
+        {result && (
+          <pre className="text-xs text-zinc-300 bg-zinc-950 rounded-xl p-4 overflow-x-auto whitespace-pre-wrap break-all">
+            {JSON.stringify(result, null, 2)}
+          </pre>
+        )}
+      </div>
+    </Section>
+  );
+}
+
 function OAuth2Section({ s, qc }) {
   const [flowState, setFlowState] = useState(null); // null | {status, device_url, code}
   const [polling, setPolling] = useState(false);
@@ -491,6 +534,7 @@ export default function SettingsPage() {
       {/* YouTube authentication */}
       <CookiesSection s={s} qc={qc} set={set} />
       <OAuth2Section s={s} qc={qc} />
+      <DiagnosticSection />
 
       {/* Download quality */}
       <Section title="Download quality">