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/pages/Settings.tsx

@@ -1,7 +1,8 @@
 import { useState, useEffect } from 'react'
-import { Save, Disc, Cpu, Database, Globe, AlertCircle, CheckCircle } from 'lucide-react'
+import { Save, Disc, Cpu, Database, Globe, AlertCircle, CheckCircle, HardDrive } from 'lucide-react'
 import { api } from '../lib/api'
 import { useDarkMode } from '../context/ThemeContext'
+import StorageMounts from '../components/StorageMounts'
 
 interface SettingsState {
   tmdbApiKey: string
@@ -37,16 +38,35 @@ const defaultSettings: SettingsState = {
   keepOriginal: false,
 }
 
-type SettingsTab = 'ripping' | 'verarbeitung' | 'verzeichnisse' | 'apis' | 'benachrichtigungen'
+type SettingsTab = 'ripping' | 'verarbeitung' | 'speicherziele' | 'verzeichnisse' | 'apis' | 'benachrichtigungen'
+
+interface WorkerInfo {
+  name: string
+  encoders: string[]
+}
+
+const ENCODER_LABELS: Record<string, string> = {
+  'cpu-x264': 'CPU · H.264',
+  'cpu-x265': 'CPU · H.265',
+  'vaapi': 'Hardware · VAAPI (AMD/Intel)',
+  'nvenc': 'Hardware · NVENC (NVIDIA)',
+}
 
 export default function SettingsPage() {
   const [settings, setSettings] = useState<SettingsState>(defaultSettings)
   const [activeTab, setActiveTab] = useState<SettingsTab>('ripping')
+  const [workers, setWorkers] = useState<WorkerInfo[]>([])
   const [loading, setLoading] = useState(true)
   const [saving, setSaving] = useState(false)
   const [saved, setSaved] = useState(false)
   const { theme } = useDarkMode()
 
+  useEffect(() => {
+    api.get('/capabilities')
+      .then(r => setWorkers(r.data.workers || []))
+      .catch(() => setWorkers([]))
+  }, [])
+
   useEffect(() => {
     const loadSettings = async () => {
       try {
@@ -105,6 +125,7 @@ export default function SettingsPage() {
         <div className={`flex transition-colors duration-300 ${theme === 'dark' ? 'border-slate-700' : 'border-slate-200'} border-b`}>
           <TabButton icon={Disc} label="Ripping" isActive={activeTab === 'ripping'} onClick={() => setActiveTab('ripping')} darkMode={theme === 'dark'} />
           <TabButton icon={Cpu} label="Verarbeitung" isActive={activeTab === 'verarbeitung'} onClick={() => setActiveTab('verarbeitung')} darkMode={theme === 'dark'} />
+          <TabButton icon={HardDrive} label="Speicherziele" isActive={activeTab === 'speicherziele'} onClick={() => setActiveTab('speicherziele')} darkMode={theme === 'dark'} />
           <TabButton icon={Database} label="Verzeichnisse" isActive={activeTab === 'verzeichnisse'} onClick={() => setActiveTab('verzeichnisse')} darkMode={theme === 'dark'} />
           <TabButton icon={Globe} label="APIs" isActive={activeTab === 'apis'} onClick={() => setActiveTab('apis')} darkMode={theme === 'dark'} />
           <TabButton icon={AlertCircle} label="Benachrichtigungen" isActive={activeTab === 'benachrichtigungen'} onClick={() => setActiveTab('benachrichtigungen')} darkMode={theme === 'dark'} />
@@ -184,6 +205,25 @@ export default function SettingsPage() {
               komprimiert danach auf Arbeitsgröße. Die Roh-Datei wird nach Erfolg gelöscht.
             </p>
 
+            {/* Ehrliche Selbstauskunft: was können die Worker WIRKLICH? */}
+            <div className={`rounded-lg p-4 mb-4 ${theme === 'dark' ? 'bg-slate-700/50' : 'bg-slate-50'}`}>
+              <p className={`text-sm font-medium mb-2 ${theme === 'dark' ? 'text-slate-200' : 'text-slate-700'}`}>Verfügbare Encoder</p>
+              {workers.length === 0 ? (
+                <p className={`text-sm ${theme === 'dark' ? 'text-slate-500' : 'text-slate-400'}`}>Kein Worker gemeldet.</p>
+              ) : (
+                workers.map(w => (
+                  <div key={w.name} className="mb-1">
+                    <span className={`text-xs font-mono mr-2 ${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-800 text-slate-300' : 'bg-slate-200 text-slate-600') : 'bg-emerald-600/20 text-emerald-500 font-medium'}`}>
+                        {ENCODER_LABELS[e] || e}
+                      </span>
+                    ))}
+                  </div>
+                ))
+              )}
+            </div>
+
             <div className="space-y-4 transition-colors duration-300">
               <div className={`flex items-center justify-between p-4 rounded-lg ${theme === 'dark' ? 'bg-slate-700/50' : 'bg-slate-50'}`}>
                 <div>
@@ -219,6 +259,15 @@ export default function SettingsPage() {
             </div>
           </section>}
 
+          {/* Speicherziele: Netzwerk-Mounts aus dem UI */}
+          {activeTab === 'speicherziele' && <section>
+            <h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>
+              <HardDrive size={20} className={theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'} />
+              Speicherziele
+            </h2>
+            <StorageMounts />
+          </section>}
+
           {/* Output Directories */}
           {activeTab === 'verzeichnisse' && <section>
             <h2 className={`text-lg font-semibold mb-4 flex items-center gap-2 transition-colors duration-300 ${theme === 'dark' ? 'text-slate-100' : 'text-slate-900'}`}>