fix: replace reset useEffects with key prop for step component remount

The reset useEffects in StepOrientation/Deskew/Dewarp/Crop were clearing
orientationResult when sessionId changed (e.g. during handleOrientationComplete),
causing the right side of ImageCompareView to show nothing. Using key={sessionId}
on the step components instead forces React to remount with fresh state when
switching sessions, without interfering with the upload/orientation flow.

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

admin-lehrer/app/(admin)/ai/ocr-overlay/page.tsx

@@ -382,13 +382,13 @@ export default function OcrOverlayPage() {
     if (mode === 'paddle-direct' || mode === 'kombi') {
       switch (currentStep) {
         case 0:
-          return <StepOrientation sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
+          return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
         case 1:
-          return <StepDeskew sessionId={sessionId} onNext={handleNext} />
+          return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
         case 2:
-          return <StepDewarp sessionId={sessionId} onNext={handleNext} />
+          return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
         case 3:
-          return <StepCrop sessionId={sessionId} onNext={handleNext} />
+          return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleNext} />
         case 4:
           if (mode === 'kombi') {
             return (
@@ -420,13 +420,13 @@ export default function OcrOverlayPage() {
     }
     switch (currentStep) {
       case 0:
-        return <StepOrientation sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
+        return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
       case 1:
-        return <StepDeskew sessionId={sessionId} onNext={handleNext} />
+        return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
       case 2:
-        return <StepDewarp sessionId={sessionId} onNext={handleNext} />
+        return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
       case 3:
-        return <StepCrop sessionId={sessionId} onNext={handleNext} />
+        return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleNext} />
       case 4:
         return <StepRowDetection sessionId={sessionId} onNext={handleNext} />
       case 5:

admin-lehrer/app/(admin)/ai/ocr-pipeline/page.tsx

@@ -397,13 +397,13 @@ export default function OcrPipelinePage() {
   const renderStep = () => {
     switch (currentStep) {
       case 0:
-        return <StepOrientation sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
+        return <StepOrientation key={sessionId} sessionId={sessionId} onNext={handleOrientationComplete} onSubSessionsCreated={handleBoxSessionsCreated} />
       case 1:
-        return <StepDeskew sessionId={sessionId} onNext={handleNext} />
+        return <StepDeskew key={sessionId} sessionId={sessionId} onNext={handleNext} />
       case 2:
-        return <StepDewarp sessionId={sessionId} onNext={handleNext} />
+        return <StepDewarp key={sessionId} sessionId={sessionId} onNext={handleNext} />
       case 3:
-        return <StepCrop sessionId={sessionId} onNext={handleCropNext} />
+        return <StepCrop key={sessionId} sessionId={sessionId} onNext={handleCropNext} />
       case 4:
         return <StepColumnDetection sessionId={sessionId} onNext={handleNext} onBoxSessionsCreated={handleBoxSessionsCreated} />
       case 5:

admin-lehrer/components/ocr-pipeline/StepCrop.tsx

@@ -17,13 +17,6 @@ export function StepCrop({ sessionId, onNext }: StepCropProps) {
   const [error, setError] = useState<string | null>(null)
   const [hasRun, setHasRun] = useState(false)
 
-  // Reset state when sessionId changes (e.g. switching sub-sessions)
-  useEffect(() => {
-    setCropResult(null)
-    setHasRun(false)
-    setError(null)
-  }, [sessionId])
-
   // Auto-trigger crop on mount
   useEffect(() => {
     if (!sessionId || hasRun) return

admin-lehrer/components/ocr-pipeline/StepDeskew.tsx

@@ -22,14 +22,6 @@ export function StepDeskew({ sessionId, onNext }: StepDeskewProps) {
   const [error, setError] = useState<string | null>(null)
   const [hasAutoRun, setHasAutoRun] = useState(false)
 
-  // Reset state when sessionId changes (e.g. switching sub-sessions)
-  useEffect(() => {
-    setSession(null)
-    setDeskewResult(null)
-    setHasAutoRun(false)
-    setError(null)
-  }, [sessionId])
-
   // Load session and auto-trigger deskew
   useEffect(() => {
     if (!sessionId || session) return

admin-lehrer/components/ocr-pipeline/StepDewarp.tsx

@@ -20,13 +20,6 @@ export function StepDewarp({ sessionId, onNext }: StepDewarpProps) {
   const [showGrid, setShowGrid] = useState(true)
   const [error, setError] = useState<string | null>(null)
 
-  // Reset state when sessionId changes (e.g. switching sub-sessions)
-  useEffect(() => {
-    setDewarpResult(null)
-    setDeskewResult(null)
-    setError(null)
-  }, [sessionId])
-
   // Load session info to get deskew_result (for fine-tuning init values)
   useEffect(() => {
     if (!sessionId) return

admin-lehrer/components/ocr-pipeline/StepOrientation.tsx

@@ -30,14 +30,6 @@ export function StepOrientation({ sessionId: existingSessionId, onNext, onSubSes
   const [dragOver, setDragOver] = useState(false)
   const [sessionName, setSessionName] = useState('')
 
-  // Reset state when sessionId changes
-  useEffect(() => {
-    setSession(null)
-    setOrientationResult(null)
-    setPageSplitResult(null)
-    setError(null)
-  }, [existingSessionId])
-
   // Reload session data when navigating back
   useEffect(() => {
     if (!existingSessionId || session) return