Universal-Sprint: Wizard, UI-Mounts, Encoder-Erkennung, Task-Split, README

Commander-Ziel: All-in-one, universell, weitergebbar.

- First-Run-Wizard: startet automatisch bei neuer Installation (Keys,
  Verarbeitung, erkannte Hardware); /setup + /setup/complete
- Data-Mounts via UI: Einstellungen -> Speicherziele haengt NFS/SMB direkt
  ein (mounts.py, CAP_SYS_ADMIN + rshared-Propagation, Auto-Remount beim
  Start, CIFS-Creds via Datei statt Kommandozeile); nfs-common/cifs-utils
  im api-Image
- Encoder-Erkennung: jeder Worker meldet beim Start ehrlich seine
  Faehigkeiten (caps.py -> workers-Tabelle), GET /capabilities, Anzeige
  in Wizard + Verarbeitung-Tab
- Task-Split: transcode_files als eigener Task auf Queue "transcode"
  (Basis fuer optionale Remote-GPU-Worker, deploy/remote-transcode-worker.yml
  EXPERIMENTELL) + POST /jobs/{id}/retry-transcode + UI-Knopf
  "Neu komprimieren" bei fehlgeschlagenen Jobs
- API-Keys aus der DB: Settings-UI/Wizard ueberstimmen Env — vorher waren
  die Key-Felder im UI reine Dekoration (Clients lasen nur Env)
- README komplett neu: generischer Schnellstart, Laufwerk-Override via
  docker-compose.override.yml, Architektur, Env-Tabelle

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

docker/ui/src/components/FirstRunWizard.tsx

@@ -0,0 +1,154 @@
+import { useState, useEffect } from 'react'
+import { Disc, Cpu, Globe, CheckCircle, ArrowRight } from 'lucide-react'
+import { api } from '../lib/api'
+import { useDarkMode } from '../context/ThemeContext'
+
+// Erster Start: Rippy universell einrichten (Commander-Ziel: All-in-one,
+// weitergebbar — keine Handarbeit in .env-Dateien nötig).
+
+interface WorkerInfo {
+  name: string
+  encoders: string[]
+  last_seen?: string
+}
+
+const ENCODER_LABELS: Record<string, string> = {
+  'cpu-x264': 'CPU · H.264 (x264)',
+  'cpu-x265': 'CPU · H.265 (x265)',
+  'vaapi': 'Hardware · VAAPI (AMD/Intel)',
+  'nvenc': 'Hardware · NVENC (NVIDIA)',
+}
+
+export default function FirstRunWizard({ onDone }: { onDone: () => void }) {
+  const [tmdbKey, setTmdbKey] = useState('')
+  const [omdbKey, setOmdbKey] = useState('')
+  const [transcodeEnabled, setTranscodeEnabled] = useState(true)
+  const [preset, setPreset] = useState('H.265 MKV 1080p30')
+  const [workers, setWorkers] = useState<WorkerInfo[]>([])
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const { theme } = useDarkMode()
+
+  useEffect(() => {
+    api.get('/capabilities')
+      .then(r => setWorkers(r.data.workers || []))
+      .catch(() => setWorkers([]))
+  }, [])
+
+  const abschliessen = async () => {
+    setSaving(true)
+    setError(null)
+    try {
+      const bestehende = (await api.get('/settings')).data || {}
+      await api.post('/settings', {
+        ...bestehende,
+        ...(tmdbKey ? { tmdbApiKey: tmdbKey } : {}),
+        ...(omdbKey ? { omdbApiKey: omdbKey } : {}),
+        transcodeEnabled,
+        transcodePreset: preset,
+      })
+      await api.post('/setup/complete')
+      onDone()
+    } catch {
+      setError('Speichern fehlgeschlagen — läuft die API?')
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const feldKlasse = `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`
+
+  return (
+    <div className={`min-h-screen flex items-center justify-center p-6 ${theme === 'dark' ? 'bg-slate-950' : 'bg-slate-100'}`}>
+      <div className={`w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden ${theme === 'dark' ? 'bg-slate-900 border border-slate-800' : 'bg-white'}`}>
+        <div className="bg-gradient-to-r from-indigo-600 to-purple-700 p-8 text-white">
+          <div className="flex items-center gap-3 mb-2">
+            <Disc size={32} />
+            <h1 className="text-2xl font-bold">Willkommen bei Rippy</h1>
+          </div>
+          <p className="opacity-90">Einmalige Einrichtung — dauert keine zwei Minuten. Alles ist später unter Einstellungen änderbar.</p>
+        </div>
+
+        <div className="p-8 space-y-8">
+          {/* Metadaten-APIs */}
+          <section>
+            <h2 className={`flex items-center gap-2 text-lg font-semibold mb-3 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+              <Globe size={18} className="text-indigo-500" /> Metadaten-Erkennung
+            </h2>
+            <div className="space-y-3">
+              <div>
+                <label className={`block text-sm font-medium mb-1 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
+                  TMDB API-Key <span className="text-indigo-500">(empfohlen)</span>
+                </label>
+                <input type="password" value={tmdbKey} onChange={e => setTmdbKey(e.target.value)} className={feldKlasse} placeholder="Kostenlos auf themoviedb.org" />
+              </div>
+              <div>
+                <label className={`block text-sm font-medium mb-1 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
+                  OMDb API-Key <span className={theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}>(optional, zweite Quelle)</span>
+                </label>
+                <input type="password" value={omdbKey} onChange={e => setOmdbKey(e.target.value)} className={feldKlasse} placeholder="Kostenlos auf omdbapi.com" />
+              </div>
+              <p className={`text-xs ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
+                Ohne Keys rippt Rippy trotzdem — Discs heißen dann nur wie ihr Volume-Label.
+              </p>
+            </div>
+          </section>
+
+          {/* Verarbeitung + erkannte Hardware */}
+          <section>
+            <h2 className={`flex items-center gap-2 text-lg font-semibold mb-3 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+              <Cpu size={18} className="text-indigo-500" /> Verarbeitung
+            </h2>
+
+            <div className={`rounded-lg p-4 mb-3 ${theme === 'dark' ? 'bg-slate-800' : 'bg-slate-50'}`}>
+              <p className={`text-sm font-medium mb-2 ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>Erkannte Encoder in deinem System:</p>
+              {workers.length === 0 ? (
+                <p className={`text-sm ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Noch kein Worker gemeldet — startet gerade?</p>
+              ) : (
+                workers.map(w => (
+                  <div key={w.name} className="mb-1">
+                    <span className={`text-xs font-mono ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>{w.name}: </span>
+                    {w.encoders.map(e => (
+                      <span key={e} className={`inline-block text-xs px-2 py-0.5 rounded mr-1 ${e.startsWith('cpu') ? (theme === 'dark' ? 'bg-slate-700 text-slate-300' : 'bg-slate-200 text-slate-600') : 'bg-emerald-600/20 text-emerald-500 font-medium'}`}>
+                        {ENCODER_LABELS[e] || e}
+                      </span>
+                    ))}
+                  </div>
+                ))
+              )}
+              <p className={`text-xs mt-2 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
+                Tipp: GPU-Maschinen im Netz können als optionale Transcode-Worker angebunden werden (siehe README).
+              </p>
+            </div>
+
+            <label className={`flex items-center gap-3 mb-3 text-sm ${theme === 'dark' ? 'text-slate-300' : 'text-slate-700'}`}>
+              <input type="checkbox" checked={transcodeEnabled} onChange={e => setTranscodeEnabled(e.target.checked)} className="w-4 h-4 accent-indigo-600" />
+              Nach dem Rip auf Arbeitsgröße komprimieren (empfohlen — sonst ~40 GB pro Blu-ray)
+            </label>
+
+            {transcodeEnabled && (
+              <select value={preset} onChange={e => setPreset(e.target.value)} className={feldKlasse}>
+                <option value="H.265 MKV 1080p30">H.265 — klein &amp; modern (Standard)</option>
+                <option value="HQ 1080p30 Surround">H.264 — schneller auf schwacher CPU, etwas größer</option>
+              </select>
+            )}
+          </section>
+
+          {error && <p className="text-sm text-rose-500">{error}</p>}
+
+          <button
+            onClick={abschliessen}
+            disabled={saving}
+            className="w-full flex items-center justify-center gap-2 px-6 py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition-colors disabled:opacity-50"
+          >
+            {saving ? 'Speichern…' : <>Los geht's <ArrowRight size={18} /></>}
+          </button>
+
+          <p className={`text-xs text-center flex items-center justify-center gap-1 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
+            <CheckCircle size={12} /> Läuft komplett lokal — keine Cloud, keine Telemetrie.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

docker/ui/src/components/StorageMounts.tsx

@@ -0,0 +1,171 @@
+import { useState, useEffect } from 'react'
+import { HardDrive, Plus, Trash2, CheckCircle, AlertCircle, RefreshCw } from 'lucide-react'
+import { api } from '../lib/api'
+import { useDarkMode } from '../context/ThemeContext'
+
+// Netzwerk-Speicherziele (NAS/PC-Freigaben) direkt aus dem UI einhängen —
+// jedes Ziel erscheint danach in der Ziel-Auswahl beim Rippen.
+
+interface Mount {
+  name: string
+  type: string
+  source: string
+  mounted: boolean
+  has_credentials: boolean
+}
+
+interface Target {
+  name: string
+  path: string
+  is_mount: boolean
+  free_gb: number | null
+}
+
+export default function StorageMounts() {
+  const [mounts, setMounts] = useState<Mount[]>([])
+  const [targets, setTargets] = useState<Target[]>([])
+  const [name, setName] = useState('')
+  const [typ, setTyp] = useState<'nfs' | 'cifs'>('nfs')
+  const [source, setSource] = useState('')
+  const [username, setUsername] = useState('')
+  const [password, setPassword] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [feedback, setFeedback] = useState<string | null>(null)
+  const { theme } = useDarkMode()
+
+  const laden = async () => {
+    try {
+      const [m, t] = await Promise.all([
+        api.get('/storage-mounts'),
+        api.get('/storage-targets'),
+      ])
+      setMounts(m.data)
+      setTargets(t.data)
+    } catch {
+      /* API weg — Anzeige bleibt leer */
+    }
+  }
+
+  useEffect(() => { laden() }, [])
+
+  const hinzufuegen = async () => {
+    setBusy(true)
+    setFeedback(null)
+    try {
+      await api.post('/storage-mounts', {
+        name, type: typ, source,
+        ...(username ? { username, password } : {}),
+      })
+      setFeedback(`✓ „${name}" eingehängt — ab sofort als Rip-Ziel wählbar`)
+      setName(''); setSource(''); setUsername(''); setPassword('')
+      laden()
+    } catch (e: any) {
+      setFeedback(`✗ ${e?.response?.data?.detail || 'Einhängen fehlgeschlagen'}`)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const entfernen = async (mountName: string) => {
+    setBusy(true)
+    try {
+      await api.delete(`/storage-mounts/${mountName}`)
+      laden()
+    } catch (e: any) {
+      setFeedback(`✗ ${e?.response?.data?.detail || 'Entfernen fehlgeschlagen'}`)
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  const feld = `w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent ${theme === 'dark' ? 'bg-slate-800 border-slate-600 text-slate-200' : 'bg-white border-slate-300 text-slate-900'}`
+
+  return (
+    <div className="space-y-6">
+      {/* Vorhandene Ziele */}
+      <div>
+        <div className="flex items-center justify-between mb-3">
+          <h3 className={`font-medium ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>Verfügbare Ziele</h3>
+          <button onClick={laden} className={`p-1.5 rounded ${theme === 'dark' ? 'hover:bg-slate-700 text-slate-400' : 'hover:bg-slate-100 text-slate-500'}`}>
+            <RefreshCw size={16} />
+          </button>
+        </div>
+        {targets.length === 0 ? (
+          <p className={`text-sm ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Noch keine Unterordner in /app/media — sie entstehen beim ersten Rip oder Mount.</p>
+        ) : (
+          <div className="space-y-2">
+            {targets.map(t => (
+              <div key={t.path} className={`flex items-center justify-between p-3 rounded-lg ${theme === 'dark' ? 'bg-slate-800' : 'bg-slate-50'}`}>
+                <div className="flex items-center gap-3">
+                  <HardDrive size={18} className={t.is_mount ? 'text-emerald-500' : theme === 'dark' ? 'text-slate-500' : 'text-slate-400'} />
+                  <div>
+                    <span className={`text-sm font-medium ${theme === 'dark' ? 'text-slate-200' : 'text-slate-800'}`}>{t.name}</span>
+                    <span className={`text-xs ml-2 ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>
+                      {t.is_mount ? 'Netzwerk-Mount' : 'lokal'}{t.free_gb != null ? ` · ${t.free_gb} GB frei` : ''}
+                    </span>
+                  </div>
+                </div>
+                {mounts.some(m => m.name === t.name) && (
+                  <button onClick={() => entfernen(t.name)} disabled={busy} className="p-1.5 rounded text-rose-500 hover:bg-rose-500/10">
+                    <Trash2 size={16} />
+                  </button>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Neues Netzwerk-Ziel */}
+      <div className={`rounded-lg p-4 border ${theme === 'dark' ? 'border-slate-700 bg-slate-800/50' : 'border-slate-200 bg-slate-50'}`}>
+        <h3 className={`font-medium mb-3 flex items-center gap-2 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+          <Plus size={18} className="text-indigo-500" /> Netzwerk-Ziel hinzufügen
+        </h3>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+          <div>
+            <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Name (klein, ohne Leerzeichen)</label>
+            <input value={name} onChange={e => setName(e.target.value.toLowerCase())} className={feld} placeholder="nas-filme" />
+          </div>
+          <div>
+            <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Typ</label>
+            <select value={typ} onChange={e => setTyp(e.target.value as 'nfs' | 'cifs')} className={feld}>
+              <option value="nfs">NFS (NAS/Linux)</option>
+              <option value="cifs">SMB/CIFS (Windows-Freigabe, NAS)</option>
+            </select>
+          </div>
+          <div className="md:col-span-2">
+            <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>
+              Quelle {typ === 'nfs' ? '(host:/export/pfad)' : '(//host/freigabe)'}
+            </label>
+            <input value={source} onChange={e => setSource(e.target.value)} className={feld} placeholder={typ === 'nfs' ? '192.168.1.10:/volume1/filme' : '//192.168.1.10/filme'} />
+          </div>
+          {typ === 'cifs' && (
+            <>
+              <div>
+                <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Benutzer (leer = Gast)</label>
+                <input value={username} onChange={e => setUsername(e.target.value)} className={feld} autoComplete="off" />
+              </div>
+              <div>
+                <label className={`block text-xs font-medium mb-1 ${theme === 'dark' ? 'text-slate-400' : 'text-slate-500'}`}>Passwort</label>
+                <input type="password" value={password} onChange={e => setPassword(e.target.value)} className={feld} autoComplete="new-password" />
+              </div>
+            </>
+          )}
+        </div>
+        <button
+          onClick={hinzufuegen}
+          disabled={busy || !name || !source}
+          className="mt-4 px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 transition-colors disabled:opacity-40"
+        >
+          {busy ? 'Hänge ein…' : 'Einhängen & speichern'}
+        </button>
+        {feedback && (
+          <p className={`mt-3 text-sm flex items-center gap-2 ${feedback.startsWith('✓') ? 'text-emerald-500' : 'text-rose-500'}`}>
+            {feedback.startsWith('✓') ? <CheckCircle size={16} /> : <AlertCircle size={16} />}
+            {feedback}
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}