@wasto/cms-components 1.5.10 → 1.5.11

package/src/components/vision/Vision.tsx

@@ -1,447 +1,447 @@
-/**
- * Bloc CMS Vision — parcours Lens : photo → tap → carte post-scan (ADR-003 / Phase 6).
- * WebRTC /offer n’est pas utilisé (MVP).
- */
-import { useCallback, useState } from "react";
-import {
-    ActivityIndicator,
-    Modal,
-    Platform,
-    StyleSheet,
-    Text,
-    View,
-} from "react-native";
-import { useTheme } from "../../contexts/ThemeContext";
-import { useLocal } from "../../contexts/LocalContext";
-import { useWastoClient } from "../../hooks/useWastoClient";
-import { Button } from "../button/Button";
-import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
-import { SPACE } from "../../helpers/layout";
-import { VisionCapture } from "./VisionCapture";
-import { VisionTapOverlay } from "./VisionTapOverlay";
-import { VisionActionCard, type VisionSuggestion } from "./VisionActionCard";
-
-const DEFAULT_TITLE = "Wast’O Scan";
-const DEFAULT_DESCRIPTION =
-    "Photographiez un déchet, touchez-le sur la photo, puis suivez la consigne locale.";
-const TIPS =
-    "Astuce : bonne lumière, objet centré, un déchet à la fois si possible.";
-
-const MIN_CARD_HEIGHT = 120;
-const MAX_CARD_HEIGHT = 800;
-const DEFAULT_CARD_HEIGHT = 280;
-
-const VISION_SESSION_START_PATH = "/public/vision/sessions/start";
-
-const LOG_TAG = "[Vision]";
-
-function visionDebug(...args: unknown[]) {
-    if (__DEV__) console.log(LOG_TAG, ...args);
-}
-
-function visionWarn(message: string, detail?: unknown) {
-    if (detail !== undefined) console.warn(LOG_TAG, message, detail);
-    else console.warn(LOG_TAG, message);
-}
-
-export type VisionCaptureResult = {
-    uri: string;
-};
-
-export type VisionProps = {
-    /** URL POST /detect (sinon fournie par startSession). */
-    detectUrl?: string;
-    /** @deprecated conservé pour compat CMS ; non utilisé en parcours Lens. */
-    offerUrl?: string;
-    title?: string;
-    description?: string;
-    height?: number;
-    /** Override ville ; sinon LocalContext.selectedCityId. */
-    cityId?: string;
-    /**
-     * Capture custom (sinon expo-image-picker si installé dans l’app hôte).
-     */
-    onRequestCapture?: () => Promise<VisionCaptureResult | null>;
-};
-
-type Phase = "idle" | "capture" | "tap" | "loading" | "card" | "error";
-
-type SessionUrls = {
-    sessionId: string;
-    detectUrl: string;
-};
-
-function clampHeight(h: number | undefined): number {
-    if (typeof h !== "number" || !Number.isFinite(h)) return DEFAULT_CARD_HEIGHT;
-    return Math.max(MIN_CARD_HEIGHT, Math.min(MAX_CARD_HEIGHT, h));
-}
-
-async function defaultCapturePhoto(): Promise<VisionCaptureResult | null> {
-    try {
-        // Peer optional — app hôte doit installer expo-image-picker
-        // eslint-disable-next-line @typescript-eslint/no-require-imports
-        const ImagePicker = require("expo-image-picker") as {
-            requestCameraPermissionsAsync: () => Promise<{ status: string }>;
-            launchCameraAsync: (opts: Record<string, unknown>) => Promise<{
-                canceled: boolean;
-                assets?: Array<{ uri: string }>;
-            }>;
-        };
-        const perm = await ImagePicker.requestCameraPermissionsAsync();
-        if (perm.status !== "granted") {
-            throw new Error("Permission caméra refusée.");
-        }
-        const result = await ImagePicker.launchCameraAsync({
-            quality: 0.85,
-            exif: false,
-        });
-        if (result.canceled || !result.assets?.[0]?.uri) return null;
-        return { uri: result.assets[0].uri };
-    } catch (e) {
-        visionWarn("expo-image-picker indisponible", e);
-        throw new Error(
-            "Installez expo-image-picker dans l’app, ou fournissez onRequestCapture.",
-        );
-    }
-}
-
-export function Vision({
-    detectUrl: detectUrlProp = "",
-    title,
-    description,
-    height: heightProp,
-    cityId: cityIdProp,
-    onRequestCapture,
-}: VisionProps) {
-    const { theme } = useTheme();
-    const t = resolveTheme(theme);
-    const { selectedCityId } = useLocal();
-    const client = useWastoClient();
-    const cityId = cityIdProp?.trim() || selectedCityId || undefined;
-
-    const [modalVisible, setModalVisible] = useState(false);
-    const [phase, setPhase] = useState<Phase>("idle");
-    const [errorMessage, setErrorMessage] = useState<string | null>(null);
-    const [imageUri, setImageUri] = useState<string | null>(null);
-    const [tap, setTap] = useState<{ x: number; y: number } | null>(null);
-    const [session, setSession] = useState<SessionUrls | null>(null);
-    const [suggestions, setSuggestions] = useState<VisionSuggestion[]>([]);
-    const [primaryLabel, setPrimaryLabel] = useState<string | null>(null);
-    const [confidence, setConfidence] = useState<number | null>(null);
-    const [requireConfirm, setRequireConfirm] = useState(true);
-    const [busy, setBusy] = useState(false);
-
-    const cardMinHeight = clampHeight(heightProp);
-    const displayTitle = (title && title.trim()) || DEFAULT_TITLE;
-    const displayDescription =
-        (description && description.trim()) || DEFAULT_DESCRIPTION;
-
-    const resetFlow = useCallback(() => {
-        setPhase("capture");
-        setErrorMessage(null);
-        setImageUri(null);
-        setTap(null);
-        setSuggestions([]);
-        setPrimaryLabel(null);
-        setConfidence(null);
-        setBusy(false);
-    }, []);
-
-    const ensureSession = useCallback(async (): Promise<SessionUrls> => {
-        if (session?.detectUrl && session.sessionId) return session;
-
-        const propDetect = detectUrlProp.trim();
-        const res = (await client.request(VISION_SESSION_START_PATH, {
-            method: "POST",
-            body: JSON.stringify({
-                cityId: cityId || undefined,
-            }),
-        })) as {
-            sessionId: string;
-            detectUrl?: string;
-            offerUrl?: string;
-        };
-
-        const detect =
-            propDetect ||
-            res.detectUrl?.trim() ||
-            (res.offerUrl ? res.offerUrl.replace(/\/offer\/?$/, "/detect") : "");
-
-        if (!res.sessionId || !detect) {
-            throw new Error(
-                "Session vision incomplète (sessionId / detectUrl). Vérifiez WASTO_VISION_URL.",
-            );
-        }
-
-        const next = { sessionId: res.sessionId, detectUrl: detect };
-        setSession(next);
-        return next;
-    }, [session, detectUrlProp, client, cityId]);
-
-    const openScan = useCallback(() => {
-        setModalVisible(true);
-        resetFlow();
-    }, [resetFlow]);
-
-    const closeModal = useCallback(() => {
-        setModalVisible(false);
-        setPhase("idle");
-        setBusy(false);
-    }, []);
-
-    const handleCapture = useCallback(async () => {
-        setBusy(true);
-        setErrorMessage(null);
-        try {
-            const capture = onRequestCapture
-                ? await onRequestCapture()
-                : await defaultCapturePhoto();
-            if (!capture?.uri) {
-                setBusy(false);
-                return;
-            }
-            setImageUri(capture.uri);
-            setTap(null);
-            setPhase("tap");
-        } catch (e: unknown) {
-            const msg = e instanceof Error ? e.message : String(e);
-            setErrorMessage(msg);
-            setPhase("error");
-        } finally {
-            setBusy(false);
-        }
-    }, [onRequestCapture]);
-
-    const runDetectAndFinalize = useCallback(
-        async (tapCoords: { x: number; y: number } | null) => {
-            if (!imageUri) return;
-            setBusy(true);
-            setPhase("loading");
-            setErrorMessage(null);
-            try {
-                const sess = await ensureSession();
-
-                const form = new FormData();
-                form.append("image", {
-                    uri: imageUri,
-                    name: "scan.jpg",
-                    type: "image/jpeg",
-                } as unknown as Blob);
-                if (tapCoords) {
-                    form.append("tapX", String(tapCoords.x));
-                    form.append("tapY", String(tapCoords.y));
-                }
-
-                visionDebug("POST detect", { detectUrl: sess.detectUrl, tap: tapCoords });
-                const detectRes = await fetch(sess.detectUrl, {
-                    method: "POST",
-                    body: form,
-                });
-                const detectText = await detectRes.text();
-                if (!detectRes.ok) {
-                    throw new Error(detectText || `Detect HTTP ${detectRes.status}`);
-                }
-                const detectJson = JSON.parse(detectText) as {
-                    detections?: Array<{
-                        label: string;
-                        confidence: number;
-                        bbox?: number[];
-                        tap?: { x: number; y: number };
-                        ts?: number;
-                    }>;
-                };
-
-                const finalizePath = `/public/vision/sessions/${sess.sessionId}/finalize`;
-                const finalized = (await client.request(finalizePath, {
-                    method: "POST",
-                    body: JSON.stringify({
-                        detections: detectJson.detections ?? [],
-                        cityId: cityId || undefined,
-                        tap: tapCoords ?? undefined,
-                    }),
-                })) as {
-                    suggestions?: VisionSuggestion[];
-                    primaryLabel?: string | null;
-                    confidence?: number | null;
-                    requireUserConfirm?: boolean;
-                };
-
-                setSuggestions(finalized.suggestions ?? []);
-                setPrimaryLabel(finalized.primaryLabel ?? null);
-                setConfidence(finalized.confidence ?? null);
-                setRequireConfirm(finalized.requireUserConfirm !== false);
-                setPhase("card");
-            } catch (e: unknown) {
-                const msg = e instanceof Error ? e.message : String(e);
-                visionWarn("detect/finalize failed", e);
-                setErrorMessage(msg);
-                setPhase("error");
-            } finally {
-                setBusy(false);
-            }
-        },
-        [imageUri, ensureSession, client, cityId],
-    );
-
-    const handleConfirm = useCallback(async () => {
-        if (!session?.sessionId) return;
-        setBusy(true);
-        try {
-            await client.request(`/public/vision/sessions/${session.sessionId}/report`, {
-                method: "POST",
-                body: JSON.stringify({
-                    userConfirmed: true,
-                    label: primaryLabel ?? undefined,
-                    confidence: confidence ?? undefined,
-                    actionKind: suggestions.find((s) => s.kind === "SORT_BIN")?.kind,
-                }),
-            });
-            closeModal();
-        } catch (e: unknown) {
-            const msg = e instanceof Error ? e.message : String(e);
-            setErrorMessage(msg);
-            setPhase("error");
-        } finally {
-            setBusy(false);
-        }
-    }, [session, client, primaryLabel, confidence, suggestions, closeModal]);
-
-    const handleWrong = useCallback(async () => {
-        if (session?.sessionId) {
-            try {
-                await client.request(`/public/vision/sessions/${session.sessionId}/report`, {
-                    method: "POST",
-                    body: JSON.stringify({
-                        userConfirmed: false,
-                        metadata: { feedback: "wrong_detection" },
-                    }),
-                });
-            } catch (e) {
-                visionWarn("report wrong failed", e);
-            }
-        }
-        resetFlow();
-    }, [session, client, resetFlow]);
-
-    return (
-        <View
-            style={[
-                cardStyle(theme),
-                styles.card,
-                { minHeight: cardMinHeight },
-            ]}
-        >
-            <Text style={[styles.cardTitle, { color: t.colors.onSurface }]}>
-                {displayTitle}
-            </Text>
-            <Text style={[styles.cardDescription, { color: t.colors.muted }]}>
-                {displayDescription}
-            </Text>
-            {errorMessage && !modalVisible ? (
-                <Text style={[styles.errorInline, { color: t.colors.error }]}>
-                    {errorMessage}
-                </Text>
-            ) : null}
-            <Button onPress={openScan}>Scanner un déchet</Button>
-
-            <Modal
-                visible={modalVisible}
-                animationType="fade"
-                presentationStyle={Platform.OS === "ios" ? "fullScreen" : undefined}
-                statusBarTranslucent
-                onRequestClose={closeModal}
-            >
-                <View style={[styles.modalRoot, { backgroundColor: t.colors.background }]}>
-                    <View style={styles.modalHeader}>
-                        <Text style={[styles.modalTitle, { color: t.colors.onSurface }]}>
-                            {displayTitle}
-                        </Text>
-                        <Button variant="ghost" onPress={closeModal}>
-                            Fermer
-                        </Button>
-                    </View>
-
-                    <View style={styles.modalBody}>
-                        {phase === "capture" ? (
-                            <VisionCapture
-                                tips={TIPS}
-                                onCapture={() => void handleCapture()}
-                                busy={busy}
-                            />
-                        ) : null}
-
-                        {phase === "tap" && imageUri ? (
-                            <VisionTapOverlay
-                                imageUri={imageUri}
-                                tap={tap}
-                                onTap={setTap}
-                                onAnalyzeFull={() => void runDetectAndFinalize(null)}
-                                onConfirmTap={() => void runDetectAndFinalize(tap)}
-                                onRetake={resetFlow}
-                                busy={busy}
-                            />
-                        ) : null}
-
-                        {phase === "loading" ? (
-                            <View style={styles.center}>
-                                <ActivityIndicator size="large" color={t.colors.primary} />
-                                <Text style={{ color: t.colors.muted, marginTop: 12 }}>
-                                    Analyse en cours…
-                                </Text>
-                            </View>
-                        ) : null}
-
-                        {phase === "card" ? (
-                            <VisionActionCard
-                                suggestions={suggestions}
-                                primaryLabel={primaryLabel}
-                                confidence={confidence}
-                                requireConfirm={requireConfirm}
-                                onConfirm={() => void handleConfirm()}
-                                onRetake={resetFlow}
-                                onWrong={() => void handleWrong()}
-                                busy={busy}
-                            />
-                        ) : null}
-
-                        {phase === "error" ? (
-                            <View style={styles.center}>
-                                <Text style={{ color: t.colors.error, fontWeight: "700" }}>
-                                    Impossible d’analyser
-                                </Text>
-                                <Text style={{ color: t.colors.muted, marginTop: 8 }}>
-                                    {errorMessage}
-                                </Text>
-                                <Button onPress={resetFlow} style={styles.retry}>
-                                    Réessayer
-                                </Button>
-                            </View>
-                        ) : null}
-                    </View>
-                </View>
-            </Modal>
-        </View>
-    );
-}
-
-const styles = StyleSheet.create({
-    card: {
-        padding: SPACE.cardPad,
-        gap: 10,
-    },
-    cardTitle: { fontSize: 18, fontWeight: "700" },
-    cardDescription: { fontSize: 14, lineHeight: 20 },
-    errorInline: { fontSize: 13 },
-    modalRoot: { flex: 1, paddingTop: Platform.OS === "ios" ? 56 : 24 },
-    modalHeader: {
-        flexDirection: "row",
-        justifyContent: "space-between",
-        alignItems: "center",
-        paddingHorizontal: SPACE.pageX,
-        marginBottom: 8,
-    },
-    modalTitle: { fontSize: 18, fontWeight: "700", flex: 1 },
-    modalBody: { flex: 1, padding: SPACE.pageX },
-    center: { flex: 1, alignItems: "center", justifyContent: "center", gap: 8 },
-    retry: { marginTop: 16, alignSelf: "center", minWidth: 140 },
-});
+/**
+ * Bloc CMS Vision — parcours Lens : photo → tap → carte post-scan (ADR-003 / Phase 6).
+ * WebRTC /offer n’est pas utilisé (MVP).
+ */
+import { useCallback, useState } from "react";
+import {
+    ActivityIndicator,
+    Modal,
+    Platform,
+    StyleSheet,
+    Text,
+    View,
+} from "react-native";
+import { useTheme } from "../../contexts/ThemeContext";
+import { useLocal } from "../../contexts/LocalContext";
+import { useWastoClient } from "../../hooks/useWastoClient";
+import { Button } from "../button/Button";
+import { cardStyle, resolveTheme } from "../../helpers/themeStyles";
+import { SPACE } from "../../helpers/layout";
+import { VisionCapture } from "./VisionCapture";
+import { VisionTapOverlay } from "./VisionTapOverlay";
+import { VisionActionCard, type VisionSuggestion } from "./VisionActionCard";
+
+const DEFAULT_TITLE = "Wast’O Scan";
+const DEFAULT_DESCRIPTION =
+    "Photographiez un déchet, touchez-le sur la photo, puis suivez la consigne locale.";
+const TIPS =
+    "Astuce : bonne lumière, objet centré, un déchet à la fois si possible.";
+
+const MIN_CARD_HEIGHT = 120;
+const MAX_CARD_HEIGHT = 800;
+const DEFAULT_CARD_HEIGHT = 280;
+
+const VISION_SESSION_START_PATH = "/public/vision/sessions/start";
+
+const LOG_TAG = "[Vision]";
+
+function visionDebug(...args: unknown[]) {
+    if (__DEV__) console.log(LOG_TAG, ...args);
+}
+
+function visionWarn(message: string, detail?: unknown) {
+    if (detail !== undefined) console.warn(LOG_TAG, message, detail);
+    else console.warn(LOG_TAG, message);
+}
+
+export type VisionCaptureResult = {
+    uri: string;
+};
+
+export type VisionProps = {
+    /** URL POST /detect (sinon fournie par startSession). */
+    detectUrl?: string;
+    /** @deprecated conservé pour compat CMS ; non utilisé en parcours Lens. */
+    offerUrl?: string;
+    title?: string;
+    description?: string;
+    height?: number;
+    /** Override ville ; sinon LocalContext.selectedCityId. */
+    cityId?: string;
+    /**
+     * Capture custom (sinon expo-image-picker si installé dans l’app hôte).
+     */
+    onRequestCapture?: () => Promise<VisionCaptureResult | null>;
+};
+
+type Phase = "idle" | "capture" | "tap" | "loading" | "card" | "error";
+
+type SessionUrls = {
+    sessionId: string;
+    detectUrl: string;
+};
+
+function clampHeight(h: number | undefined): number {
+    if (typeof h !== "number" || !Number.isFinite(h)) return DEFAULT_CARD_HEIGHT;
+    return Math.max(MIN_CARD_HEIGHT, Math.min(MAX_CARD_HEIGHT, h));
+}
+
+async function defaultCapturePhoto(): Promise<VisionCaptureResult | null> {
+    try {
+        // Peer optional — app hôte doit installer expo-image-picker
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const ImagePicker = require("expo-image-picker") as {
+            requestCameraPermissionsAsync: () => Promise<{ status: string }>;
+            launchCameraAsync: (opts: Record<string, unknown>) => Promise<{
+                canceled: boolean;
+                assets?: Array<{ uri: string }>;
+            }>;
+        };
+        const perm = await ImagePicker.requestCameraPermissionsAsync();
+        if (perm.status !== "granted") {
+            throw new Error("Permission caméra refusée.");
+        }
+        const result = await ImagePicker.launchCameraAsync({
+            quality: 0.85,
+            exif: false,
+        });
+        if (result.canceled || !result.assets?.[0]?.uri) return null;
+        return { uri: result.assets[0].uri };
+    } catch (e) {
+        visionWarn("expo-image-picker indisponible", e);
+        throw new Error(
+            "Installez expo-image-picker dans l’app, ou fournissez onRequestCapture.",
+        );
+    }
+}
+
+export function Vision({
+    detectUrl: detectUrlProp = "",
+    title,
+    description,
+    height: heightProp,
+    cityId: cityIdProp,
+    onRequestCapture,
+}: VisionProps) {
+    const { theme } = useTheme();
+    const t = resolveTheme(theme);
+    const { selectedCityId } = useLocal();
+    const client = useWastoClient();
+    const cityId = cityIdProp?.trim() || selectedCityId || undefined;
+
+    const [modalVisible, setModalVisible] = useState(false);
+    const [phase, setPhase] = useState<Phase>("idle");
+    const [errorMessage, setErrorMessage] = useState<string | null>(null);
+    const [imageUri, setImageUri] = useState<string | null>(null);
+    const [tap, setTap] = useState<{ x: number; y: number } | null>(null);
+    const [session, setSession] = useState<SessionUrls | null>(null);
+    const [suggestions, setSuggestions] = useState<VisionSuggestion[]>([]);
+    const [primaryLabel, setPrimaryLabel] = useState<string | null>(null);
+    const [confidence, setConfidence] = useState<number | null>(null);
+    const [requireConfirm, setRequireConfirm] = useState(true);
+    const [busy, setBusy] = useState(false);
+
+    const cardMinHeight = clampHeight(heightProp);
+    const displayTitle = (title && title.trim()) || DEFAULT_TITLE;
+    const displayDescription =
+        (description && description.trim()) || DEFAULT_DESCRIPTION;
+
+    const resetFlow = useCallback(() => {
+        setPhase("capture");
+        setErrorMessage(null);
+        setImageUri(null);
+        setTap(null);
+        setSuggestions([]);
+        setPrimaryLabel(null);
+        setConfidence(null);
+        setBusy(false);
+    }, []);
+
+    const ensureSession = useCallback(async (): Promise<SessionUrls> => {
+        if (session?.detectUrl && session.sessionId) return session;
+
+        const propDetect = detectUrlProp.trim();
+        const res = (await client.request(VISION_SESSION_START_PATH, {
+            method: "POST",
+            body: JSON.stringify({
+                cityId: cityId || undefined,
+            }),
+        })) as {
+            sessionId: string;
+            detectUrl?: string;
+            offerUrl?: string;
+        };
+
+        const detect =
+            propDetect ||
+            res.detectUrl?.trim() ||
+            (res.offerUrl ? res.offerUrl.replace(/\/offer\/?$/, "/detect") : "");
+
+        if (!res.sessionId || !detect) {
+            throw new Error(
+                "Session vision incomplète (sessionId / detectUrl). Vérifiez WASTO_VISION_URL.",
+            );
+        }
+
+        const next = { sessionId: res.sessionId, detectUrl: detect };
+        setSession(next);
+        return next;
+    }, [session, detectUrlProp, client, cityId]);
+
+    const openScan = useCallback(() => {
+        setModalVisible(true);
+        resetFlow();
+    }, [resetFlow]);
+
+    const closeModal = useCallback(() => {
+        setModalVisible(false);
+        setPhase("idle");
+        setBusy(false);
+    }, []);
+
+    const handleCapture = useCallback(async () => {
+        setBusy(true);
+        setErrorMessage(null);
+        try {
+            const capture = onRequestCapture
+                ? await onRequestCapture()
+                : await defaultCapturePhoto();
+            if (!capture?.uri) {
+                setBusy(false);
+                return;
+            }
+            setImageUri(capture.uri);
+            setTap(null);
+            setPhase("tap");
+        } catch (e: unknown) {
+            const msg = e instanceof Error ? e.message : String(e);
+            setErrorMessage(msg);
+            setPhase("error");
+        } finally {
+            setBusy(false);
+        }
+    }, [onRequestCapture]);
+
+    const runDetectAndFinalize = useCallback(
+        async (tapCoords: { x: number; y: number } | null) => {
+            if (!imageUri) return;
+            setBusy(true);
+            setPhase("loading");
+            setErrorMessage(null);
+            try {
+                const sess = await ensureSession();
+
+                const form = new FormData();
+                form.append("image", {
+                    uri: imageUri,
+                    name: "scan.jpg",
+                    type: "image/jpeg",
+                } as unknown as Blob);
+                if (tapCoords) {
+                    form.append("tapX", String(tapCoords.x));
+                    form.append("tapY", String(tapCoords.y));
+                }
+
+                visionDebug("POST detect", { detectUrl: sess.detectUrl, tap: tapCoords });
+                const detectRes = await fetch(sess.detectUrl, {
+                    method: "POST",
+                    body: form,
+                });
+                const detectText = await detectRes.text();
+                if (!detectRes.ok) {
+                    throw new Error(detectText || `Detect HTTP ${detectRes.status}`);
+                }
+                const detectJson = JSON.parse(detectText) as {
+                    detections?: Array<{
+                        label: string;
+                        confidence: number;
+                        bbox?: number[];
+                        tap?: { x: number; y: number };
+                        ts?: number;
+                    }>;
+                };
+
+                const finalizePath = `/public/vision/sessions/${sess.sessionId}/finalize`;
+                const finalized = (await client.request(finalizePath, {
+                    method: "POST",
+                    body: JSON.stringify({
+                        detections: detectJson.detections ?? [],
+                        cityId: cityId || undefined,
+                        tap: tapCoords ?? undefined,
+                    }),
+                })) as {
+                    suggestions?: VisionSuggestion[];
+                    primaryLabel?: string | null;
+                    confidence?: number | null;
+                    requireUserConfirm?: boolean;
+                };
+
+                setSuggestions(finalized.suggestions ?? []);
+                setPrimaryLabel(finalized.primaryLabel ?? null);
+                setConfidence(finalized.confidence ?? null);
+                setRequireConfirm(finalized.requireUserConfirm !== false);
+                setPhase("card");
+            } catch (e: unknown) {
+                const msg = e instanceof Error ? e.message : String(e);
+                visionWarn("detect/finalize failed", e);
+                setErrorMessage(msg);
+                setPhase("error");
+            } finally {
+                setBusy(false);
+            }
+        },
+        [imageUri, ensureSession, client, cityId],
+    );
+
+    const handleConfirm = useCallback(async () => {
+        if (!session?.sessionId) return;
+        setBusy(true);
+        try {
+            await client.request(`/public/vision/sessions/${session.sessionId}/report`, {
+                method: "POST",
+                body: JSON.stringify({
+                    userConfirmed: true,
+                    label: primaryLabel ?? undefined,
+                    confidence: confidence ?? undefined,
+                    actionKind: suggestions.find((s) => s.kind === "SORT_BIN")?.kind,
+                }),
+            });
+            closeModal();
+        } catch (e: unknown) {
+            const msg = e instanceof Error ? e.message : String(e);
+            setErrorMessage(msg);
+            setPhase("error");
+        } finally {
+            setBusy(false);
+        }
+    }, [session, client, primaryLabel, confidence, suggestions, closeModal]);
+
+    const handleWrong = useCallback(async () => {
+        if (session?.sessionId) {
+            try {
+                await client.request(`/public/vision/sessions/${session.sessionId}/report`, {
+                    method: "POST",
+                    body: JSON.stringify({
+                        userConfirmed: false,
+                        metadata: { feedback: "wrong_detection" },
+                    }),
+                });
+            } catch (e) {
+                visionWarn("report wrong failed", e);
+            }
+        }
+        resetFlow();
+    }, [session, client, resetFlow]);
+
+    return (
+        <View
+            style={[
+                cardStyle(theme),
+                styles.card,
+                { minHeight: cardMinHeight },
+            ]}
+        >
+            <Text style={[styles.cardTitle, { color: t.colors.onSurface }]}>
+                {displayTitle}
+            </Text>
+            <Text style={[styles.cardDescription, { color: t.colors.muted }]}>
+                {displayDescription}
+            </Text>
+            {errorMessage && !modalVisible ? (
+                <Text style={[styles.errorInline, { color: t.colors.error }]}>
+                    {errorMessage}
+                </Text>
+            ) : null}
+            <Button onPress={openScan}>Scanner un déchet</Button>
+
+            <Modal
+                visible={modalVisible}
+                animationType="fade"
+                presentationStyle={Platform.OS === "ios" ? "fullScreen" : undefined}
+                statusBarTranslucent
+                onRequestClose={closeModal}
+            >
+                <View style={[styles.modalRoot, { backgroundColor: t.colors.background }]}>
+                    <View style={styles.modalHeader}>
+                        <Text style={[styles.modalTitle, { color: t.colors.onSurface }]}>
+                            {displayTitle}
+                        </Text>
+                        <Button variant="ghost" onPress={closeModal}>
+                            Fermer
+                        </Button>
+                    </View>
+
+                    <View style={styles.modalBody}>
+                        {phase === "capture" ? (
+                            <VisionCapture
+                                tips={TIPS}
+                                onCapture={() => void handleCapture()}
+                                busy={busy}
+                            />
+                        ) : null}
+
+                        {phase === "tap" && imageUri ? (
+                            <VisionTapOverlay
+                                imageUri={imageUri}
+                                tap={tap}
+                                onTap={setTap}
+                                onAnalyzeFull={() => void runDetectAndFinalize(null)}
+                                onConfirmTap={() => void runDetectAndFinalize(tap)}
+                                onRetake={resetFlow}
+                                busy={busy}
+                            />
+                        ) : null}
+
+                        {phase === "loading" ? (
+                            <View style={styles.center}>
+                                <ActivityIndicator size="large" color={t.colors.primary} />
+                                <Text style={{ color: t.colors.muted, marginTop: 12 }}>
+                                    Analyse en cours…
+                                </Text>
+                            </View>
+                        ) : null}
+
+                        {phase === "card" ? (
+                            <VisionActionCard
+                                suggestions={suggestions}
+                                primaryLabel={primaryLabel}
+                                confidence={confidence}
+                                requireConfirm={requireConfirm}
+                                onConfirm={() => void handleConfirm()}
+                                onRetake={resetFlow}
+                                onWrong={() => void handleWrong()}
+                                busy={busy}
+                            />
+                        ) : null}
+
+                        {phase === "error" ? (
+                            <View style={styles.center}>
+                                <Text style={{ color: t.colors.error, fontWeight: "700" }}>
+                                    Impossible d’analyser
+                                </Text>
+                                <Text style={{ color: t.colors.muted, marginTop: 8 }}>
+                                    {errorMessage}
+                                </Text>
+                                <Button onPress={resetFlow} style={styles.retry}>
+                                    Réessayer
+                                </Button>
+                            </View>
+                        ) : null}
+                    </View>
+                </View>
+            </Modal>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    card: {
+        padding: SPACE.cardPad,
+        gap: 10,
+    },
+    cardTitle: { fontSize: 18, fontWeight: "700" },
+    cardDescription: { fontSize: 14, lineHeight: 20 },
+    errorInline: { fontSize: 13 },
+    modalRoot: { flex: 1, paddingTop: Platform.OS === "ios" ? 56 : 24 },
+    modalHeader: {
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: SPACE.pageX,
+        marginBottom: 8,
+    },
+    modalTitle: { fontSize: 18, fontWeight: "700", flex: 1 },
+    modalBody: { flex: 1, padding: SPACE.pageX },
+    center: { flex: 1, alignItems: "center", justifyContent: "center", gap: 8 },
+    retry: { marginTop: 16, alignSelf: "center", minWidth: 140 },
+});