feat: Projekt Scanner integrieren, Whisper in die Einstellungen

Der eigenstaendige Projekt Scanner zieht komplett ins CRM ein und laeuft
parallel zur bestehenden App weiter - jede geteilte Ressource ist verdoppelt
statt geteilt, damit die alte Installation unberuehrt bleibt:

- eigene Datenbank perinco_scanner, legt sich beim Start selbst an
- eigener SCANNER_ENCRYPTION_KEY, eigenes Upload-Verzeichnis
- eigener Scheduler mit Zeitversatz, damit nicht beide Instanzen gleichzeitig
  mit denselben Portal-Cookies scrapen (Rate-Limits, CAPTCHA, doppelter RAM)
- Sperre gegen ueberlappende Laeufe: Scheduler und "Jetzt scannen" teilen sie,
  ein zweiter Aufruf bekommt 409 statt doppelter OpenAI-Kosten

Backend unter /api/scanner hinter der CRM-Anmeldung; die HTTP-Basic-Auth des
Originals entfaellt. CV-PDFs kommen als Stream mit Token statt aus einem
statischen Verzeichnis. Bestandsdaten holt "npm run scanner:import" aus der
alten Datenbank, ohne sie zu veraendern.

Oberflaeche in Tailwind und CI-Farben neu gebaut: Menuepunkt Scanner mit
aufklappbaren Unterpunkten, Einstellungen als eigener Reiter.

Whisper hat keinen eigenen Menuepunkt mehr, sondern ist ein Reiter in den
Einstellungen. Damit diese Geraeteeinstellung jeder Rolle offensteht, sind die
Einstellungen jetzt fuer alle sichtbar - welche Reiter erscheinen, entscheidet
die Rolle.

Ausserdem: kein festes Admin-Passwort mehr im Quelltext, playwright exakt auf
1.60.0 gepinnt (nutzt den vorhandenen Chromium-Build des Servers), technische
Dokumentation mit Funktionszeichnungen unter docs/.

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

src/components/settings/ScannerSettings.tsx

@@ -0,0 +1,328 @@
+import React, { useEffect, useState } from 'react';
+import { inputClass, labelClass } from '../leads/leadUi';
+import { useToast } from '../Toast';
+import {
+  SCANNER_SETTINGS_DEFAULTS,
+  SECRET_MASK,
+  scannerApi,
+  type ScannerSettings as ScannerSettingsValues,
+} from '../../lib/scannerApi';
+
+/*
+ * Alle Einstellungen des Projekt Scanners an einer Stelle. Anzeige- und
+ * Benachrichtigungs-Schwellenwert lassen sich zusaetzlich direkt im
+ * Scanner-Dashboard verstellen - es ist derselbe Wert.
+ */
+
+const Section: React.FC<{
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+  accent?: string;
+}> = ({ title, description, children, accent }) => (
+  <section
+    className={`rounded-2xl border border-ink-200 bg-surface p-5 ${
+      accent ? `border-l-4 ${accent}` : ''
+    }`}
+  >
+    <h3 className="text-base text-ink-900">{title}</h3>
+    {description && <p className="mt-1 text-xs text-ink-400">{description}</p>}
+    <div className="mt-4">{children}</div>
+  </section>
+);
+
+const Checkbox: React.FC<{
+  checked: boolean;
+  onChange: (checked: boolean) => void;
+  label: string;
+}> = ({ checked, onChange, label }) => (
+  <label className="flex cursor-pointer items-center gap-3 rounded-xl border border-ink-200 px-4 py-3">
+    <input
+      type="checkbox"
+      checked={checked}
+      onChange={(event) => onChange(event.target.checked)}
+      className="h-4 w-4 accent-brand-500"
+    />
+    <span className="text-sm font-semibold text-ink-700">{label}</span>
+  </label>
+);
+
+export const ScannerSettings: React.FC = () => {
+  const { addToast } = useToast();
+  const [values, setValues] = useState<ScannerSettingsValues>(SCANNER_SETTINGS_DEFAULTS);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isSaving, setIsSaving] = useState(false);
+
+  const load = async () => {
+    setIsLoading(true);
+    try {
+      const data = await scannerApi.settings();
+      setValues({ ...SCANNER_SETTINGS_DEFAULTS, ...data });
+    } catch (err) {
+      addToast(
+        err instanceof Error ? err.message : 'Scanner-Einstellungen nicht erreichbar.',
+        'error'
+      );
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    load();
+    // Einmal beim Oeffnen laden - addToast ist stabil, load braucht keine Deps.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const set = <K extends keyof ScannerSettingsValues>(key: K, value: string) =>
+    setValues((prev) => ({ ...prev, [key]: value }));
+
+  const setFlag = (key: keyof ScannerSettingsValues, checked: boolean) =>
+    set(key, checked ? 'true' : 'false');
+
+  const handleSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+    setIsSaving(true);
+    try {
+      await scannerApi.saveSettings(values);
+      addToast('Scanner-Einstellungen gespeichert.', 'success');
+      // Neu laden, damit Geheimnisse wieder maskiert erscheinen.
+      await load();
+    } catch (err) {
+      addToast(err instanceof Error ? err.message : 'Speichern fehlgeschlagen.', 'error');
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center py-14">
+        <span className="h-6 w-6 animate-spin rounded-full border-2 border-brand-200 border-t-brand-500" />
+      </div>
+    );
+  }
+
+  const isScanningActive = values.scanning_active === 'true';
+  const emailActive = values.email_notifications_active === 'true';
+  const keyStored = values.openai_api_key === SECRET_MASK;
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-5">
+      <Section
+        title="Scanner-Status"
+        description="Hauptschalter für den Hintergrund-Scanner. Pausiert durchsucht die App keine Jobbörsen mehr, auch der manuelle Scan ist dann blockiert."
+        accent={isScanningActive ? 'border-l-brand-500' : 'border-l-ink-300'}
+      >
+        <div className="mb-3 flex items-center gap-2">
+          <span
+            className={`inline-flex items-center rounded-md border px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider ${
+              isScanningActive
+                ? 'border-brand-200 bg-brand-50 text-brand-700'
+                : 'border-ink-200 bg-ink-100 text-ink-500'
+            }`}
+          >
+            {isScanningActive ? '● Aktiv' : '○ Pausiert'}
+          </span>
+        </div>
+        <Checkbox
+          checked={isScanningActive}
+          onChange={(checked) => setFlag('scanning_active', checked)}
+          label="Scanner aktiviert"
+        />
+      </Section>
+
+      <Section title="Suche">
+        <div className="grid gap-4 md:grid-cols-3">
+          <div>
+            <label className={labelClass}>Suchintervall (Minuten)</label>
+            <input
+              type="number"
+              min={5}
+              max={1440}
+              required
+              value={values.search_interval}
+              onChange={(event) => set('search_interval', event.target.value)}
+              className={inputClass}
+            />
+            <p className="mt-1 text-xs text-ink-400">
+              Wie oft der Hintergrund-Scanner die Jobbörsen durchsucht.
+            </p>
+          </div>
+          <div>
+            <label className={labelClass}>Anzeige ab %</label>
+            <input
+              type="number"
+              min={0}
+              max={100}
+              value={values.display_threshold}
+              onChange={(event) => set('display_threshold', event.target.value)}
+              className={inputClass}
+            />
+            <p className="mt-1 text-xs text-ink-400">
+              Treffer darunter bleiben im Dashboard ausgeblendet.
+            </p>
+          </div>
+          <div>
+            <label className={labelClass}>Benachrichtigung ab %</label>
+            <input
+              type="number"
+              min={0}
+              max={100}
+              value={values.match_threshold}
+              onChange={(event) => set('match_threshold', event.target.value)}
+              className={inputClass}
+            />
+            <p className="mt-1 text-xs text-ink-400">
+              Ab diesem Wert gibt es Signalton und E-Mail.
+            </p>
+          </div>
+        </div>
+      </Section>
+
+      <Section
+        title="OpenAI"
+        description="Wird für die semantische Bewertung des Lebenslaufs gegen die Projektbeschreibung gebraucht (gpt-4o-mini)."
+      >
+        <label className={labelClass}>
+          API-Key
+          {keyStored && (
+            <span className="ml-2 rounded-md border border-brand-200 bg-brand-50 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-brand-700">
+              gespeichert
+            </span>
+          )}
+        </label>
+        <input
+          type="password"
+          autoComplete="new-password"
+          value={keyStored ? '' : values.openai_api_key}
+          onChange={(event) => set('openai_api_key', event.target.value)}
+          placeholder={
+            keyStored
+              ? 'Leer lassen, um den gespeicherten Key zu behalten'
+              : 'sk-proj-...'
+          }
+          className={inputClass}
+        />
+      </Section>
+
+      <Section
+        title="Browser-Benachrichtigungen"
+        description={`Bei einem neuen Treffer über ${values.match_threshold}% spielt das Scanner-Dashboard einen Signalton. Voraussetzung: Der Reiter ist im Browser geöffnet. Browser lassen Töne erst nach dem ersten Klick auf der Seite zu.`}
+      >
+        <Checkbox
+          checked={values.sound_notifications_active === 'true'}
+          onChange={(checked) => setFlag('sound_notifications_active', checked)}
+          label="Signalton bei neuen Matches"
+        />
+      </Section>
+
+      <Section title="E-Mail-Benachrichtigungen">
+        <Checkbox
+          checked={emailActive}
+          onChange={(checked) => setFlag('email_notifications_active', checked)}
+          label="E-Mail bei neuen Matches versenden"
+        />
+
+        {emailActive && (
+          <div className="mt-4 space-y-4 border-l-2 border-brand-200 pl-5">
+            <div className="grid gap-4 md:grid-cols-2">
+              <div>
+                <label className={labelClass}>Empfänger (Standard)</label>
+                <input
+                  type="email"
+                  required
+                  value={values.notification_email_recipient}
+                  onChange={(event) => set('notification_email_recipient', event.target.value)}
+                  placeholder="info@perinco.de"
+                  className={inputClass}
+                />
+                <p className="mt-1 text-xs text-ink-400">
+                  Wird verwendet, wenn beim Agenten keine eigene E-Mail hinterlegt ist.
+                </p>
+              </div>
+              <div>
+                <label className={labelClass}>Absender (From)</label>
+                <input
+                  value={values.smtp_from}
+                  onChange={(event) => set('smtp_from', event.target.value)}
+                  placeholder="scanner@perinco.de"
+                  className={inputClass}
+                />
+              </div>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-[2fr_1fr]">
+              <div>
+                <label className={labelClass}>SMTP-Host</label>
+                <input
+                  required
+                  value={values.smtp_host}
+                  onChange={(event) => set('smtp_host', event.target.value)}
+                  placeholder="smtp.deine-domain.de"
+                  className={inputClass}
+                />
+              </div>
+              <div>
+                <label className={labelClass}>SMTP-Port</label>
+                <input
+                  type="number"
+                  required
+                  value={values.smtp_port}
+                  onChange={(event) => set('smtp_port', event.target.value)}
+                  placeholder="587"
+                  className={inputClass}
+                />
+              </div>
+            </div>
+
+            <div className="grid gap-4 md:grid-cols-2">
+              <div>
+                <label className={labelClass}>SMTP-Benutzer</label>
+                <input
+                  required
+                  value={values.smtp_user}
+                  onChange={(event) => set('smtp_user', event.target.value)}
+                  className={inputClass}
+                  autoComplete="off"
+                />
+              </div>
+              <div>
+                <label className={labelClass}>
+                  SMTP-Passwort
+                  {values.smtp_pass === SECRET_MASK && (
+                    <span className="ml-2 rounded-md border border-brand-200 bg-brand-50 px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wider text-brand-700">
+                      gespeichert
+                    </span>
+                  )}
+                </label>
+                <input
+                  type="password"
+                  autoComplete="new-password"
+                  value={values.smtp_pass === SECRET_MASK ? '' : values.smtp_pass}
+                  onChange={(event) => set('smtp_pass', event.target.value)}
+                  placeholder={
+                    values.smtp_pass === SECRET_MASK
+                      ? 'Leer lassen, um das gespeicherte Passwort zu behalten'
+                      : 'Passwort'
+                  }
+                  className={inputClass}
+                />
+              </div>
+            </div>
+          </div>
+        )}
+      </Section>
+
+      <div className="flex justify-end">
+        <button
+          type="submit"
+          disabled={isSaving}
+          className="rounded-xl bg-brand-500 px-6 py-2.5 text-sm font-bold text-white shadow-card transition hover:bg-brand-600 disabled:opacity-60"
+        >
+          {isSaving ? 'Speichere...' : 'Einstellungen speichern'}
+        </button>
+      </div>
+    </form>
+  );
+};