its functionning

src/components/three/gameplay/RepairGame.tsx

@@ -2,7 +2,6 @@ import { Suspense, useEffect, useMemo, useState } from "react";
 import { useGLTF } from "@react-three/drei";
 import { ExplodableModel } from "@/components/three/models/ExplodableModel";
 import type { RepairCasePlaceholder } from "@/components/three/gameplay/RepairCaseModel";
-import { RepairCompletionStep } from "@/components/three/gameplay/RepairCompletionStep";
 import { RepairInspectionObject } from "@/components/three/gameplay/RepairInspectionObject";
 import { RepairMissionCase } from "@/components/three/gameplay/RepairMissionCase";
 import { RepairRepairingStep } from "@/components/three/gameplay/RepairRepairingStep";
@@ -10,7 +9,9 @@ import { RepairReassemblyStep } from "@/components/three/gameplay/RepairReassemb
 import { RepairScanSequence } from "@/components/three/gameplay/RepairScanSequence";
 import { REPAIR_CASE_MODEL_PATH } from "@/data/gameplay/repairCaseConfig";
 import { REPAIR_FRAGMENTATION_SEQUENCE_SECONDS } from "@/data/gameplay/repairGameConfig";
+import { getNextMissionStep } from "@/data/gameplay/repairMissionState";
 import { REPAIR_MISSIONS } from "@/data/gameplay/repairMissions";
+import { useRepairTransitionStore } from "@/managers/stores/useRepairTransitionStore";
 import { useRepairFragmentationInput } from "@/hooks/gameplay/useRepairFragmentationInput";
 import { useRepairMissionStep } from "@/hooks/gameplay/useRepairMissionStep";
 import { useTerrainSnappedPosition } from "@/hooks/three/useTerrainHeight";
@@ -30,6 +31,8 @@ interface RepairGameProps extends Required<
   mission: RepairMissionId;
   rotation?: Vector3Tuple;
   scale?: ModelTransformProps["scale"];
+  /** Set to false in isolated scenes with no terrain (e.g. RepairGameScene). */
+  snapToTerrain?: boolean;
 }
 
 interface RepairMissionAssetPreloaderProps {
@@ -54,6 +57,7 @@ export function RepairGame({
   position,
   rotation = [0, 0, 0],
   scale = 1,
+  snapToTerrain = true,
 }: RepairGameProps): React.JSX.Element | null {
   const config = REPAIR_MISSIONS[mission];
   const mainState = useGameStore((state) => state.mainState);
@@ -67,7 +71,11 @@ export function RepairGame({
     readonly RepairScannedBrokenPart[]
   >([]);
   const parsedScale = toVector3Scale(scale);
-  const snappedPosition = useTerrainSnappedPosition(position);
+  // useTerrainSnappedPosition must always be called (rules of hooks) but we
+  // only use its result when snapToTerrain is true — in the isolated repair
+  // scene there is no terrain, so we use the raw position directly.
+  const snappedByTerrain = useTerrainSnappedPosition(position);
+  const snappedPosition = snapToTerrain ? snappedByTerrain : position;
   const readyForFragmentation = step === "inspected";
 
   useRepairFragmentationInput({
@@ -103,6 +111,24 @@ export function RepairGame({
     };
   }, [mainState, mission, setMissionStep, step]);
 
+  // When "done" is reached: set pendingCompletion in the transition store.
+  // useRepairGameStatus detects this and triggers the fade back to world.
+  // page.tsx waits for the world to fully load, THEN executes the completion.
+  // This ensures the player sees a loading screen rather than a black flash.
+  useEffect(() => {
+    if (mainState !== mission || step !== "done") return undefined;
+
+    const timeoutId = window.setTimeout(() => {
+      const nextStep = getNextMissionStep("done", mission);
+      useRepairTransitionStore.getState().setPendingCompletion({
+        mission,
+        nextStep,
+      });
+    }, 200);
+
+    return () => window.clearTimeout(timeoutId);
+  }, [mainState, mission, step]);
+
   if (mainState !== mission) return null;
   if (step === "locked") return null;
 
@@ -149,12 +175,9 @@ export function RepairGame({
             onComplete={() => setMissionStep(mission, "done")}
           />
         ) : null}
-        {step === "done" ? (
-          <RepairCompletionStep
-            config={config}
-            onComplete={() => completeMission(mission)}
-          />
-        ) : null}
+        {/* done step: auto-advance is handled by useEffect above — no manual
+            case-closing interaction needed. Scene is intentionally empty
+            for the 200ms before completeMission/setMissionStep fires. */}
         {step !== "waiting" && step !== "done" && step !== "reassembling" ? (
           <RepairMissionCase
             config={config}

src/components/three/gameplay/RepairScanSequence.tsx

@@ -41,16 +41,16 @@ export function RepairScanSequence({
   useEffect(() => {
     if (parts.length === 0) return undefined;
 
+    // Do NOT call onComplete inside a setState updater — updaters run during
+    // React's render phase, which would trigger a setState on RepairGame and
+    // cause a "setState during render" error. Call it directly in the timeout.
     const timeoutId = window.setTimeout(() => {
-      setActivePartIndex((currentIndex) => {
-        const nextIndex = currentIndex + 1;
-        if (nextIndex >= parts.length) {
-          onComplete(getScannedBrokenParts(parts, config));
-          return currentIndex;
-        }
-
-        return nextIndex;
-      });
+      const nextIndex = activePartIndex + 1;
+      if (nextIndex >= parts.length) {
+        onComplete(getScannedBrokenParts(parts, config));
+      } else {
+        setActivePartIndex(nextIndex);
+      }
     }, scanPartSeconds * 1000);
 
     return () => {