feat: AcroForm-Fill via Claude CLI, Multi-Source, Kanagawa, Docker-Deploy

Komplettes Rework der AI-Studio-Vorlage zu einem produktiven Werkzeug fuer
deutsche AcroForm-Formulare (Reha-Antraege, Arzt-Befundberichte):

- Backend: Express spawnt headless Claude CLI ('claude -p --output-format json'
  via stdin-Pipe). Prompt enthaelt die Feldnamen als Ziel-Schema plus die
  Arbeitsregeln (Stichwortstil, feste Zeichen-Kaestchen ohne Leerzeichen,
  Vordrucke respektieren, keine geratenen Werte, nur medizinisch).
- PDF-Handling: pdfjs-dist statt pdf-lib — pdf-lib scheitert an verschluesselten
  Object-Streams in DRV-Formularen. annotationStorage + saveDocument, kein
  Flatten. Worker-Patch zur Laufzeit forciert Auto-Size und schwarze Schrift.
- Multi-Source-Upload: beliebig viele PDFs/Bilder + optional Freitext.
- Design: Kanagawa Design System (Preset aus ../kanagawa-design-system),
  Tailwind lokal gebaut statt CDN, Dark/Light-Toggle, Progress-Indicator.
- Deployment: Multi-Stage-Dockerfile, docker-compose in matrix_default-Netz,
  Claude-Credentials vom Host per Volume. PLAN.md + AGENTS.md (Alex-Schema).

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

App.tsx

@@ -1,234 +1,282 @@
-import React, { useState, useEffect } from 'react';
-import { AppStatus, FileData, FormResponse } from './types';
+import React, { useEffect, useState } from 'react';
+import { AppStatus, type FileData, type FormResponse } from './types';
 import { FileUpload } from './components/FileUpload';
+import { SourceInput } from './components/SourceInput';
 import { ReviewPanel } from './components/ReviewPanel';
-import { processDocuments } from './services/geminiService';
-import { getPdfFields, PdfFieldInfo } from './services/pdfService';
-import { Bot, Sparkles, ArrowRight, FileCheck2, ScanText, Loader2, AlertTriangle, FileText, Check } from 'lucide-react';
+import { ThemeToggle } from './components/ThemeToggle';
+import { ProcessingIndicator } from './components/ProcessingIndicator';
+import { processDocuments } from './services/api';
+import { getPdfFields, type PdfFieldInfo } from './services/pdfService';
+import {
+  AlertTriangle,
+  ArrowRight,
+  Bot,
+  FileCheck2,
+  ScanText,
+  Sparkles,
+} from 'lucide-react';
 
 const App: React.FC = () => {
   const [status, setStatus] = useState<AppStatus>(AppStatus.IDLE);
   const [formFile, setFormFile] = useState<FileData | null>(null);
-  const [sourceFile, setSourceFile] = useState<FileData | null>(null);
+  const [sourceFiles, setSourceFiles] = useState<FileData[]>([]);
+  const [sourceText, setSourceText] = useState('');
   const [pdfFields, setPdfFields] = useState<PdfFieldInfo[]>([]);
+  const [pdfFieldsChecked, setPdfFieldsChecked] = useState(false);
   const [responseData, setResponseData] = useState<FormResponse | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    const analyzePdf = async () => {
-      if (formFile && formFile.type === 'application/pdf') {
-        const fields = await getPdfFields(formFile.base64);
-        setPdfFields(fields);
-        console.log("Detected PDF fields:", fields);
-      } else {
+    const run = async () => {
+      if (!formFile) {
         setPdfFields([]);
+        setPdfFieldsChecked(false);
+        return;
       }
+      if (formFile.type !== 'application/pdf') {
+        setPdfFields([]);
+        setPdfFieldsChecked(true);
+        return;
+      }
+      const fields = await getPdfFields(formFile.base64);
+      setPdfFields(fields);
+      setPdfFieldsChecked(true);
     };
-    analyzePdf();
+    run();
   }, [formFile]);
 
+  const noAcroForm = !!formFile && pdfFieldsChecked && pdfFields.length === 0;
+  const hasAnySource = sourceFiles.length > 0 || sourceText.trim().length > 0;
+
   const handleAnalyze = async () => {
-    if (!formFile || !sourceFile) return;
-    
+    if (!formFile || !hasAnySource) return;
+    if (pdfFields.length === 0) {
+      setError(
+        'Das Ziel-PDF enthält keine AcroForm-Felder. Bitte ein Formular mit interaktiven Feldern hochladen.'
+      );
+      setStatus(AppStatus.ERROR);
+      return;
+    }
+
     setStatus(AppStatus.PROCESSING);
     setError(null);
-    
+
     try {
-      const data = await processDocuments(formFile, sourceFile, pdfFields);
+      const data = await processDocuments(
+        formFile,
+        sourceFiles,
+        sourceText,
+        pdfFields
+      );
       setResponseData(data);
       setStatus(AppStatus.REVIEW);
-    } catch (e: any) {
-      setError(e.message || "Something went wrong during analysis.");
+    } catch (e: unknown) {
+      const msg = e instanceof Error ? e.message : String(e);
+      setError(msg || 'Während der Analyse ist etwas schiefgelaufen.');
       setStatus(AppStatus.ERROR);
     }
   };
 
   const reset = () => {
-    // Cleanup blob URLs to prevent memory leaks
-    if (formFile?.previewUrl && formFile.previewUrl.startsWith('blob:')) {
+    if (formFile?.previewUrl?.startsWith('blob:')) {
       URL.revokeObjectURL(formFile.previewUrl);
     }
-    if (sourceFile?.previewUrl && sourceFile.previewUrl.startsWith('blob:')) {
-      URL.revokeObjectURL(sourceFile.previewUrl);
+    for (const f of sourceFiles) {
+      if (f.previewUrl?.startsWith('blob:')) URL.revokeObjectURL(f.previewUrl);
     }
 
     setStatus(AppStatus.IDLE);
     setFormFile(null);
-    setSourceFile(null);
+    setSourceFiles([]);
+    setSourceText('');
     setResponseData(null);
     setError(null);
     setPdfFields([]);
+    setPdfFieldsChecked(false);
   };
 
-  if (status === AppStatus.REVIEW && responseData && formFile && sourceFile) {
+  if (status === AppStatus.REVIEW && responseData && formFile) {
     return (
-      <div className="min-h-screen bg-slate-50">
-        <header className="bg-white border-b border-slate-200 sticky top-0 z-50">
-          <div className="max-w-7xl mx-auto px-4 h-16 flex items-center">
+      <div className="min-h-screen bg-kng-bg">
+        <header className="bg-kng-bg-elevated border-b border-kng-border sticky top-0 z-50">
+          <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
             <div className="flex items-center space-x-2">
-              <div className="bg-indigo-600 p-1.5 rounded-lg">
-                <Bot className="w-5 h-5 text-white" />
+              <div className="bg-kng-accent p-1.5 rounded-kng-md">
+                <Bot className="w-5 h-5 text-kng-bg" />
               </div>
-              <span className="font-bold text-lg text-slate-900">AutoForm AI</span>
+              <span className="font-bold text-lg text-kng-text">
+                Rentenversicherer
+              </span>
             </div>
+            <ThemeToggle />
           </div>
         </header>
-        <ReviewPanel 
-          fields={responseData.fields} 
+        <ReviewPanel
+          fields={responseData.fields}
           summary={responseData.summary}
           formFile={formFile}
-          sourceFile={sourceFile}
-          isFillablePdf={pdfFields.length > 0}
           onReset={reset}
         />
       </div>
     );
   }
 
+  const analyzeDisabled =
+    !formFile ||
+    !hasAnySource ||
+    !pdfFieldsChecked ||
+    pdfFields.length === 0 ||
+    status === AppStatus.PROCESSING;
+
   return (
-    <div className="min-h-screen bg-slate-50 flex flex-col">
-      {/* Header */}
-      <header className="bg-white border-b border-slate-200">
+    <div className="min-h-screen bg-kng-bg flex flex-col">
+      <header className="bg-kng-bg-elevated border-b border-kng-border">
         <div className="max-w-7xl mx-auto px-4 h-20 flex items-center justify-between">
           <div className="flex items-center space-x-3">
-            <div className="bg-indigo-600 p-2 rounded-xl shadow-lg shadow-indigo-200">
-              <Bot className="w-6 h-6 text-white" />
+            <div className="bg-kng-accent p-2 rounded-kng-lg shadow-kng-md">
+              <Bot className="w-6 h-6 text-kng-bg" />
             </div>
             <div>
-              <h1 className="font-bold text-xl text-slate-900 tracking-tight">AutoForm AI</h1>
-              <p className="text-xs text-slate-500 font-medium">Intelligent Document Processing</p>
+              <h1 className="font-bold text-xl text-kng-text tracking-tight">
+                Rentenversicherer
+              </h1>
+              <p className="text-xs text-kng-text-muted font-medium">
+                AcroForm-PDFs halbautomatisch ausfüllen
+              </p>
             </div>
           </div>
-          <div className="hidden md:flex items-center space-x-6 text-sm font-medium text-slate-600">
-            <span className="flex items-center"><ScanText className="w-4 h-4 mr-2" />1. Scan</span>
-            <span className="flex items-center"><Sparkles className="w-4 h-4 mr-2" />2. Extract</span>
-            <span className="flex items-center"><FileCheck2 className="w-4 h-4 mr-2" />3. Review</span>
+          <div className="flex items-center gap-6">
+            <div className="hidden md:flex items-center space-x-6 text-sm font-medium text-kng-text-secondary">
+              <span className="flex items-center">
+                <ScanText className="w-4 h-4 mr-2" />
+                1. Scan
+              </span>
+              <span className="flex items-center">
+                <Sparkles className="w-4 h-4 mr-2" />
+                2. Extract
+              </span>
+              <span className="flex items-center">
+                <FileCheck2 className="w-4 h-4 mr-2" />
+                3. Review
+              </span>
+            </div>
+            <ThemeToggle />
           </div>
         </div>
       </header>
 
-      {/* Main Content */}
       <main className="flex-1 max-w-5xl mx-auto w-full px-4 py-12 flex flex-col justify-center">
-        
         {status === AppStatus.IDLE || status === AppStatus.ERROR ? (
           <>
             <div className="text-center mb-12">
-              <h2 className="text-4xl font-extrabold text-slate-900 mb-4">
-                Fill Forms Automatically with AI
+              <h2 className="text-3xl font-extrabold text-kng-text mb-4">
+                PDF-Formular automatisch ausfüllen
               </h2>
-              <p className="text-lg text-slate-600 max-w-2xl mx-auto">
-                Upload a blank PDF form and a source document. 
-                We'll extract the data and fill the PDF fields for you.
+              <p className="text-lg text-kng-text-secondary max-w-2xl mx-auto">
+                Original-PDF (mit AcroForm-Feldern) und beliebig viele
+                Quelldokumente hochladen. Claude extrahiert die Daten, du
+                prüfst und lädst das ausgefüllte — weiterhin editierbare —
+                PDF runter.
               </p>
             </div>
 
-            <div className="bg-white rounded-2xl shadow-xl border border-slate-200 overflow-hidden">
-               {error && (
-                <div className="bg-red-50 border-l-4 border-red-500 p-4 m-4">
+            <div className="bg-kng-bg-elevated rounded-kng-xl shadow-kng-lg border border-kng-border overflow-hidden">
+              {error && (
+                <div className="bg-kng-bg border-l-4 border-kng-error p-4 m-4 rounded-kng-md">
                   <div className="flex">
-                    <div className="flex-shrink-0">
-                      <AlertTriangle className="h-5 w-5 text-red-400" aria-hidden="true" />
-                    </div>
-                    <div className="ml-3">
-                      <p className="text-sm text-red-700">
-                        {error}
-                      </p>
-                    </div>
+                    <AlertTriangle className="h-5 w-5 text-kng-error flex-shrink-0" />
+                    <p className="text-sm text-kng-error ml-3">{error}</p>
+                  </div>
+                </div>
+              )}
+
+              {noAcroForm && !error && (
+                <div className="bg-kng-bg border-l-4 border-kng-warning p-4 m-4 rounded-kng-md">
+                  <div className="flex">
+                    <AlertTriangle className="h-5 w-5 text-kng-warning flex-shrink-0" />
+                    <p className="text-sm text-kng-warning ml-3">
+                      Das Ziel-PDF enthält keine AcroForm-Felder. Nur Formulare
+                      mit interaktiven Feldern werden unterstützt.
+                    </p>
                   </div>
                 </div>
               )}
 
               <div className="grid md:grid-cols-2 gap-8 p-8">
-                {/* Step 1: Blank Form */}
                 <div className="space-y-4">
                   <div className="flex items-center space-x-3 mb-4">
-                    <div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 border border-slate-300">1</div>
+                    <div className="w-8 h-8 rounded-kng-full bg-kng-surface flex items-center justify-center font-bold text-kng-text-secondary border border-kng-border">
+                      1
+                    </div>
                     <div className="flex-1">
-                      <h3 className="font-bold text-slate-900 text-lg">Target Form</h3>
+                      <h3 className="font-bold text-kng-text text-lg">
+                        Ziel-Formular
+                      </h3>
                       {pdfFields.length > 0 && (
-                        <span className="text-xs text-emerald-600 font-medium bg-emerald-50 px-2 py-0.5 rounded-full">
-                          {pdfFields.length} fillable fields detected
+                        <span className="text-xs text-kng-success font-medium bg-kng-surface px-2 py-0.5 rounded-kng-full">
+                          {pdfFields.length} AcroForm-Felder erkannt
                         </span>
                       )}
                     </div>
                   </div>
                   <FileUpload
-                    label="Fillable PDF Form"
-                    description="The empty PDF you want to fill."
-                    accept="application/pdf,image/*"
+                    label="Ausfüllbares PDF"
+                    description="Original-PDF mit AcroForm-Feldern."
+                    accept="application/pdf"
                     onFileSelect={setFormFile}
                     selectedFile={formFile}
                   />
                 </div>
 
-                {/* Step 2: Source Data */}
                 <div className="space-y-4">
-                   <div className="flex items-center space-x-3 mb-4">
-                    <div className="w-8 h-8 rounded-full bg-slate-100 flex items-center justify-center font-bold text-slate-600 border border-slate-300">2</div>
-                    <h3 className="font-bold text-slate-900 text-lg">Source Document</h3>
+                  <div className="flex items-center space-x-3 mb-4">
+                    <div className="w-8 h-8 rounded-kng-full bg-kng-surface flex items-center justify-center font-bold text-kng-text-secondary border border-kng-border">
+                      2
+                    </div>
+                    <div className="flex-1">
+                      <h3 className="font-bold text-kng-text text-lg">
+                        Quelldokumente
+                      </h3>
+                      {sourceFiles.length > 0 && (
+                        <span className="text-xs text-kng-accent font-medium bg-kng-surface px-2 py-0.5 rounded-kng-full">
+                          {sourceFiles.length}{' '}
+                          {sourceFiles.length === 1 ? 'Datei' : 'Dateien'}
+                        </span>
+                      )}
+                    </div>
                   </div>
-                  <FileUpload
-                    label="Source Data"
-                    description="Scan, Letter, ID, etc."
-                    accept="image/*,application/pdf"
-                    onFileSelect={setSourceFile}
-                    selectedFile={sourceFile}
+                  <SourceInput
+                    files={sourceFiles}
+                    text={sourceText}
+                    onFilesChange={setSourceFiles}
+                    onTextChange={setSourceText}
                   />
                 </div>
               </div>
 
-              <div className="bg-slate-50 p-6 border-t border-slate-100 flex justify-end">
+              <div className="bg-kng-bg p-6 border-t border-kng-border flex justify-end">
                 <button
                   onClick={handleAnalyze}
-                  disabled={!formFile || !sourceFile}
-                  className={`
-                    flex items-center px-6 py-3 rounded-xl font-bold text-white shadow-lg transition-all
-                    ${(!formFile || !sourceFile) 
-                      ? 'bg-slate-300 cursor-not-allowed shadow-none' 
-                      : 'bg-indigo-600 hover:bg-indigo-700 hover:shadow-indigo-500/30 transform hover:-translate-y-0.5'
-                    }
-                  `}
+                  disabled={analyzeDisabled}
+                  className={`flex items-center px-6 py-3 rounded-kng-lg font-bold shadow-kng-md transition-all ${
+                    analyzeDisabled
+                      ? 'bg-kng-surface text-kng-text-muted cursor-not-allowed shadow-none'
+                      : 'bg-kng-accent text-kng-bg hover:brightness-110 transform hover:-translate-y-0.5'
+                  }`}
                 >
                   <Sparkles className="w-5 h-5 mr-2" />
-                  Analyze & Fill
+                  Analysieren & Ausfüllen
                   <ArrowRight className="w-5 h-5 ml-2" />
                 </button>
               </div>
             </div>
           </>
         ) : (
-          /* Processing State */
-          <div className="flex flex-col items-center justify-center py-20">
-            <div className="relative">
-              <div className="absolute inset-0 bg-indigo-500 blur-xl opacity-20 rounded-full animate-pulse"></div>
-              <div className="relative bg-white p-6 rounded-2xl shadow-xl border border-indigo-100">
-                 <Loader2 className="w-12 h-12 text-indigo-600 animate-spin" />
-              </div>
-            </div>
-            <h3 className="mt-8 text-2xl font-bold text-slate-900">Processing Documents...</h3>
-            <p className="mt-2 text-slate-500 max-w-md text-center">
-              AI is reading the source document and mapping data to your PDF form fields.
-            </p>
-            
-            <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4 w-full max-w-2xl">
-              <div className="bg-white p-4 rounded-lg border border-slate-200 shadow-sm flex items-center space-x-3 opacity-50">
-                <ScanText className="w-5 h-5 text-indigo-600" />
-                <span className="text-sm font-medium">Parsing PDF</span>
-              </div>
-               <div className="bg-white p-4 rounded-lg border border-slate-200 shadow-sm flex items-center space-x-3 opacity-50 animate-pulse delay-75">
-                <FileText className="w-5 h-5 text-indigo-600" />
-                <span className="text-sm font-medium">Extracting Data</span>
-              </div>
-               <div className="bg-white p-4 rounded-lg border border-slate-200 shadow-sm flex items-center space-x-3 opacity-50 animate-pulse delay-150">
-                <Check className="w-5 h-5 text-indigo-600" />
-                <span className="text-sm font-medium">Filling Form</span>
-              </div>
-            </div>
-          </div>
+          <ProcessingIndicator />
         )}
       </main>
     </div>
   );
 };
 
-export default App;
+export default App;