Add connectivity check to diagnose why all metadata APIs return 0 hits

All four sources returning 0 results is a strong signal of a network
problem (DNS, firewall, proxy, Docker isolation) rather than four
independent matching bugs.

New endpoint GET /api/items/match/connectivity:
- Pings Google, MusicBrainz, OpenLibrary, GoogleBooks, DNB
- Returns per-target HTTP status, byte count, latency, error
- Surfaces any HTTP_PROXY / HTTPS_PROXY env vars that httpx would use

UI: New "Connectivity-Check" button in BookDetail. Result panel shows
each target green (HTTP 200) or red (error/timeout), so the user can
immediately see whether the backend has outbound internet access at
all, or whether it's a per-API issue.

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

frontend/src/api/items.ts

@@ -30,6 +30,9 @@ export const triggerMatch = (id: string) =>
 export const debugMatch = (title: string, author?: string) =>
   api.get(`/api/items/match/debug`, { params: { title, author } }).then((r) => r.data)
 
+export const checkConnectivity = () =>
+  api.get(`/api/items/match/connectivity`).then((r) => r.data)
+
 export const extractCover = (id: string) =>
   api.post(`/api/items/${id}/extract-cover`).then((r) => r.data)
 

frontend/src/pages/BookDetail.tsx

@@ -4,7 +4,7 @@ import {
   Play, ArrowLeft, RefreshCw, Search, Check,
   Loader2, Trash2, X
 } from 'lucide-react'
-import { getItem, updateItem, triggerMatch, searchMatch, applyMatch, debugMatch, extractCover, coverUrl } from '../api/items'
+import { getItem, updateItem, triggerMatch, searchMatch, applyMatch, debugMatch, checkConnectivity, extractCover, coverUrl } from '../api/items'
 import { getMe, createBookmark, deleteBookmark } from '../api/me'
 import { usePlayerStore } from '../store/playerStore'
 import CoverImage from '../components/common/CoverImage'
@@ -23,6 +23,8 @@ export default function BookDetail() {
   const [showMatchPanel, setShowMatchPanel] = useState(false)
   const [debugData, setDebugData] = useState<any>(null)
   const [debugLoading, setDebugLoading] = useState(false)
+  const [connData, setConnData] = useState<any>(null)
+  const [connLoading, setConnLoading] = useState(false)
   const { play, item: currentItem, currentTime } = usePlayerStore()
 
   useEffect(() => {
@@ -91,6 +93,16 @@ export default function BookDetail() {
     }
   }
 
+  const handleConnectivity = async () => {
+    setConnLoading(true)
+    try {
+      const data = await checkConnectivity()
+      setConnData(data)
+    } finally {
+      setConnLoading(false)
+    }
+  }
+
   const handleExtractCover = async () => {
     if (!id) return
     const res = await extractCover(id)
@@ -206,10 +218,43 @@ export default function BookDetail() {
             >
               Cover aus Datei
             </button>
+            <button
+              onClick={handleConnectivity}
+              disabled={connLoading}
+              className="flex items-center gap-2 bg-card border border-divider px-4 py-2 rounded-lg text-sm text-muted hover:text-ink hover:bg-card/80 disabled:opacity-50 transition-colors"
+              title="Prüft ob Backend die externen Metadaten-APIs erreicht"
+            >
+              {connLoading ? <Loader2 size={14} className="animate-spin" /> : null}
+              Connectivity-Check
+            </button>
           </div>
         </div>
       </div>
 
+      {connData && (
+        <div className="mb-6 bg-surface border border-divider rounded-xl p-4">
+          <div className="flex items-center justify-between mb-3">
+            <h3 className="text-ink" style={{ fontSize: '13px', fontWeight: 600 }}>Externe Verbindungen</h3>
+            <button onClick={() => setConnData(null)} className="text-muted hover:text-ink">
+              <X size={14} />
+            </button>
+          </div>
+          {connData.proxy_env && connData.proxy_env !== 'keine' && (
+            <p className="text-yellow-400 mb-2" style={{ fontSize: '11px' }}>
+              Proxy-Variablen aktiv: <span className="font-mono">{JSON.stringify(connData.proxy_env)}</span>
+            </p>
+          )}
+          {connData.results?.map((r: any) => (
+            <div key={r.name} className="flex items-center justify-between py-1.5 border-t border-divider" style={{ fontSize: '12px' }}>
+              <span className="text-ink font-medium">{r.name}</span>
+              <span className={r.ok && r.status === 200 ? 'text-primary' : 'text-red-400'} style={{ fontSize: '11px' }}>
+                {r.ok ? `HTTP ${r.status} · ${r.bytes}B · ${r.ms}ms` : `${r.error} (${r.ms}ms)`}
+              </span>
+            </div>
+          ))}
+        </div>
+      )}
+
       {debugData && (
         <div className="mb-6 bg-surface border border-divider rounded-xl p-4">
           <div className="flex items-center justify-between mb-3">