Merge dare proof of completion into staging

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/mobile/src/__tests__/hooks/useDares.test.ts

@@ -7,7 +7,7 @@ import type { SentDare } from "@/features/dares/types";
 const incoming: SentDare = {
     id: "dare-1", couple_id: "couple-1", dare_id: "catalogue-1", text: "A dare", intensity: 2,
     is_custom: false, sender_id: "partner", recipient_id: "me", direction: "incoming",
-    status: "pending", sender_notes: null, sent_at: "2026-08-28T10:00:00.000Z",
+    status: "pending", sender_notes: null, proof_type: "none", proof_media_id: null, sent_at: "2026-08-28T10:00:00.000Z",
     accepted_at: null, submitted_at: null, completed_at: null, expires_at: null,
 };
 
@@ -55,6 +55,23 @@ describe("useDares", () => {
         expect(postSpy).toHaveBeenCalledWith("/v1/dares/dare-1/respond", { action: "accept" });
     });
 
+    it("attaches proof media to a submit when one is supplied", async () => {
+        mockLoad();
+        const postSpy = jest.spyOn(apiClient, "post").mockResolvedValue({ dare: { ...incoming, status: "submitted" } } as never);
+        const { result } = renderHook(() => useDares());
+        await waitFor(() => expect(result.current.loading).toBe(false));
+
+        await act(async () => {
+            await result.current.submit("dare-1", "media-1");
+        });
+        expect(postSpy).toHaveBeenCalledWith("/v1/dares/dare-1/submit", { proof_media_id: "media-1" });
+
+        await act(async () => {
+            await result.current.submit("dare-1");
+        });
+        expect(postSpy).toHaveBeenLastCalledWith("/v1/dares/dare-1/submit", undefined);
+    });
+
     it("routes a premium refusal to the paywall rather than the error banner", async () => {
         mockLoad();
         jest.spyOn(apiClient, "post").mockRejectedValue(new ApiError("Custom dares require premium", 402));

apps/mobile/src/features/dares/DaresScreen.tsx

@@ -6,9 +6,9 @@ import Animated, { FadeIn } from "react-native-reanimated";
 import { GradientBackground } from "../../components/ui";
 import { Paywall } from "../../components/paywall";
 import { colors, featureColors, radius, spacing, typography } from "../../theme";
-import { DareCard, DarePackGrid, SendDareSheet } from "./components";
+import { DareCard, DarePackGrid, DareProofSheet, SendDareSheet } from "./components";
 import { useDares } from "./hooks/useDares";
-import type { DarePack } from "./types";
+import type { DarePack, SentDare } from "./types";
 
 const ACCENT = featureColors.dares.accent;
 
@@ -27,6 +27,7 @@ export function DaresScreen() {
     const [sheetPack, setSheetPack] = useState<DarePack | null>(null);
     const [sheetOpen, setSheetOpen] = useState(false);
     const [paywallOpen, setPaywallOpen] = useState(false);
+    const [proofDare, setProofDare] = useState<SentDare | null>(null);
 
     const openPaywall = useCallback(() => {
         setSheetOpen(false);
@@ -68,6 +69,14 @@ export function DaresScreen() {
                 void dares.respond(dareId, action);
                 return;
             }
+            if (action === "submit") {
+                // Proof-required dares detour through the capture sheet before submitting.
+                const dare = dares.active.find((candidate) => candidate.id === dareId);
+                if (dare && dare.proof_type !== "none") {
+                    setProofDare(dare);
+                    return;
+                }
+            }
             void dares[action](dareId);
         },
         [dares],
@@ -173,6 +182,12 @@ export function DaresScreen() {
                 onRequestPremium={openPaywall}
             />
 
+            <DareProofSheet
+                dare={proofDare}
+                onClose={() => setProofDare(null)}
+                onSubmit={(dareId, proofMediaId) => dares.submit(dareId, proofMediaId)}
+            />
+
             <Paywall
                 visible={paywallOpen}
                 onClose={closePaywall}

apps/mobile/src/features/dares/components/DareCard.tsx

@@ -2,6 +2,7 @@ import { memo } from "react";
 import { ActivityIndicator, Pressable, StyleSheet, Text, View } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { colors, featureColors, radius, spacing, typography } from "../../../theme";
+import { DareProofView } from "./DareProofView";
 import type { SentDare } from "../types";
 
 const ACCENT = featureColors.dares.accent;
@@ -92,6 +93,23 @@ export const DareCard = memo(function DareCard({ dare, busy, onAction }: DareCar
 
             {dare.sender_notes ? <Text style={styles.notes}>“{dare.sender_notes}”</Text> : null}
 
+            {dare.proof_type !== "none" ? (
+                <View style={styles.proofRow}>
+                    <Ionicons
+                        name={dare.proof_type === "photo" ? "camera-outline" : "mic-outline"}
+                        size={13}
+                        color={ACCENT}
+                    />
+                    <Text style={styles.proofLabel}>
+                        {dare.proof_type === "photo" ? "Photo proof required" : "Audio proof required"}
+                    </Text>
+                </View>
+            ) : null}
+
+            {dare.proof_media_id && dare.proof_type !== "none" ? (
+                <DareProofView proofMediaId={dare.proof_media_id} proofType={dare.proof_type} />
+            ) : null}
+
             {deadline ? (
                 <View style={styles.deadlineRow}>
                     <Ionicons name="time-outline" size={13} color={colors.textTertiary} />
@@ -157,6 +175,13 @@ const styles = StyleSheet.create({
         fontStyle: "italic",
         marginTop: spacing.sm,
     },
+    proofRow: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xs,
+        marginTop: spacing.sm,
+    },
+    proofLabel: { ...typography.caption1, color: ACCENT, fontWeight: "600" },
     deadlineRow: {
         flexDirection: "row",
         alignItems: "center",

apps/mobile/src/features/dares/components/DareProofSheet.tsx

@@ -0,0 +1,243 @@
+import { useCallback, useEffect, useState } from "react";
+import {
+    ActivityIndicator, Image, Modal, Platform, Pressable, StyleSheet, Text, View,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as ImagePicker from "expo-image-picker";
+import { useAudioRecorder } from "../../../hooks/useAudioRecorder";
+import { uploadMedia } from "../../../lib/mediaApi";
+import { colors, featureColors, radius, spacing, typography } from "../../../theme";
+import type { SentDare } from "../types";
+
+const ACCENT = featureColors.dares.accent;
+
+const MAX_AUDIO_SECONDS = 60;
+
+export interface DareProofSheetProps {
+    /** The active incoming dare being submitted; null closes the sheet. */
+    dare: SentDare | null;
+    onClose: () => void;
+    /** Uploads have already happened; the id is ready to attach to the submit call. */
+    onSubmit: (dareId: string, proofMediaId: string) => Promise<void> | void;
+}
+
+function imageMime(uri: string): string {
+    const ext = uri.split(".").pop()?.toLowerCase() ?? "jpg";
+    if (ext === "png") return "image/png";
+    if (ext === "webp") return "image/webp";
+    return "image/jpeg";
+}
+
+/** expo-av records .m4a on both platforms; web lands on webm. */
+function audioMime(uri: string): string {
+    const ext = uri.split(".").pop()?.toLowerCase() ?? "m4a";
+    if (ext === "webm") return "audio/webm";
+    if (ext === "wav") return "audio/wav";
+    if (ext === "mp3") return "audio/mpeg";
+    if (ext === "caf") return "audio/x-caf";
+    return "audio/mp4";
+}
+
+export function DareProofSheet({ dare, onClose, onSubmit }: DareProofSheetProps) {
+    const [photoUri, setPhotoUri] = useState<string | null>(null);
+    const [sending, setSending] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const recorder = useAudioRecorder({ maxDurationSeconds: MAX_AUDIO_SECONDS });
+    const visible = dare !== null;
+    const mode = dare?.proof_type ?? "none";
+
+    useEffect(() => {
+        if (!visible) return;
+        setPhotoUri(null);
+        setError(null);
+        setSending(false);
+        recorder.resetRecording();
+        // Reset only when a new dare opens the sheet, not on recorder identity churn.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [visible, dare?.id]);
+
+    const pickPhoto = useCallback(async (fromCamera: boolean) => {
+        setError(null);
+        if (fromCamera) {
+            const permission = await ImagePicker.requestCameraPermissionsAsync();
+            if (!permission.granted) {
+                setError("Camera access is needed to take a proof photo.");
+                return;
+            }
+        }
+        const result = fromCamera
+            ? await ImagePicker.launchCameraAsync({ allowsEditing: false, quality: 0.7 })
+            : await ImagePicker.launchImageLibraryAsync({
+                  mediaTypes: ImagePicker.MediaTypeOptions.Images,
+                  allowsEditing: false,
+                  quality: 0.7,
+              });
+        if (!result.canceled) setPhotoUri(result.assets[0].uri);
+    }, []);
+
+    const proofUri = mode === "photo" ? photoUri : recorder.recordingUri;
+    const canSend = proofUri !== null && !sending && recorder.state !== "recording";
+
+    const handleSend = useCallback(async () => {
+        if (!dare || !proofUri) return;
+        setSending(true);
+        setError(null);
+        try {
+            const mimeType = mode === "photo" ? imageMime(proofUri) : audioMime(proofUri);
+            const upload = await uploadMedia(proofUri, { kind: "dare_proof", mimeType });
+            await onSubmit(dare.id, upload.media.id);
+            onClose();
+        } catch {
+            setError("Could not send your proof. Check your connection and try again.");
+        } finally {
+            setSending(false);
+        }
+    }, [dare, proofUri, mode, onSubmit, onClose]);
+
+    return (
+        <Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
+            <View style={styles.backdrop}>
+                <View style={styles.sheet}>
+                    <View style={styles.handle} />
+                    <View style={styles.header}>
+                        <Text style={styles.title}>
+                            {mode === "photo" ? "Photo proof" : "Audio proof"}
+                        </Text>
+                        <Pressable onPress={onClose} hitSlop={12} disabled={sending}>
+                            <Ionicons name="close" size={22} color={colors.textSecondary} />
+                        </Pressable>
+                    </View>
+
+                    <Text style={styles.subtitle}>
+                        {mode === "photo"
+                            ? "Your partner asked for a photo to prove this one."
+                            : "Your partner asked for a voice note to prove this one."}
+                    </Text>
+
+                    {mode === "photo" ? (
+                        <View style={styles.captureArea}>
+                            {photoUri ? (
+                                <Image source={{ uri: photoUri }} style={styles.preview} resizeMode="cover" />
+                            ) : (
+                                <View style={styles.placeholder}>
+                                    <Ionicons name="camera-outline" size={32} color={colors.textTertiary} />
+                                </View>
+                            )}
+                            <View style={styles.captureButtons}>
+                                {Platform.OS !== "web" ? (
+                                    <Pressable style={styles.captureButton} onPress={() => void pickPhoto(true)}>
+                                        <Ionicons name="camera" size={16} color={ACCENT} />
+                                        <Text style={styles.captureButtonText}>Take photo</Text>
+                                    </Pressable>
+                                ) : null}
+                                <Pressable style={styles.captureButton} onPress={() => void pickPhoto(false)}>
+                                    <Ionicons name="images-outline" size={16} color={ACCENT} />
+                                    <Text style={styles.captureButtonText}>
+                                        {photoUri ? "Choose another" : "Choose photo"}
+                                    </Text>
+                                </Pressable>
+                            </View>
+                        </View>
+                    ) : (
+                        <View style={styles.captureArea}>
+                            <Pressable
+                                style={[styles.recordButton, recorder.state === "recording" && styles.recordButtonActive]}
+                                onPress={() => {
+                                    if (recorder.state === "recording") void recorder.stopRecording();
+                                    else void recorder.startRecording();
+                                }}
+                                disabled={sending}
+                            >
+                                <Ionicons
+                                    name={recorder.state === "recording" ? "stop" : "mic"}
+                                    size={28}
+                                    color={recorder.state === "recording" ? colors.background : ACCENT}
+                                />
+                            </Pressable>
+                            <Text style={styles.recordStatus}>
+                                {recorder.state === "recording"
+                                    ? `Recording… ${recorder.durationSeconds}s`
+                                    : recorder.recordingUri
+                                      ? `Recorded ${recorder.durationSeconds}s — tap the mic to redo`
+                                      : `Tap to record (up to ${MAX_AUDIO_SECONDS}s)`}
+                            </Text>
+                        </View>
+                    )}
+
+                    {error ? <Text style={styles.error}>{error}</Text> : null}
+
+                    <Pressable
+                        onPress={() => void handleSend()}
+                        disabled={!canSend}
+                        style={[styles.sendButton, !canSend && styles.sendButtonDisabled]}
+                    >
+                        {sending ? (
+                            <ActivityIndicator size="small" color={colors.background} />
+                        ) : (
+                            <Text style={styles.sendButtonText}>Send proof & finish dare</Text>
+                        )}
+                    </Pressable>
+                </View>
+            </View>
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    backdrop: { flex: 1, backgroundColor: "rgba(0,0,0,0.6)", justifyContent: "flex-end" },
+    sheet: {
+        backgroundColor: colors.background,
+        borderTopLeftRadius: radius.xxl,
+        borderTopRightRadius: radius.xxl,
+        paddingHorizontal: spacing.lg,
+        paddingBottom: Platform.OS === "ios" ? spacing.xl : spacing.lg,
+    },
+    handle: {
+        width: 36, height: 4, borderRadius: radius.full,
+        backgroundColor: colors.border, alignSelf: "center", marginTop: spacing.sm,
+    },
+    header: {
+        flexDirection: "row", alignItems: "center", justifyContent: "space-between",
+        paddingVertical: spacing.md,
+    },
+    title: { ...typography.title3, color: colors.text },
+    subtitle: { ...typography.subhead, color: colors.textSecondary, marginBottom: spacing.lg },
+    captureArea: { alignItems: "center", gap: spacing.md, marginBottom: spacing.lg },
+    preview: {
+        width: "100%", height: 220,
+        borderRadius: radius.lg, borderWidth: 1, borderColor: colors.border,
+    },
+    placeholder: {
+        width: "100%", height: 220,
+        borderRadius: radius.lg, borderWidth: 1, borderColor: colors.border,
+        backgroundColor: colors.backgroundLight,
+        alignItems: "center", justifyContent: "center",
+    },
+    captureButtons: { flexDirection: "row", gap: spacing.sm },
+    captureButton: {
+        flexDirection: "row", alignItems: "center", gap: spacing.xs,
+        paddingHorizontal: spacing.md, paddingVertical: spacing.sm,
+        borderRadius: radius.full, borderWidth: 1, borderColor: ACCENT,
+    },
+    captureButtonText: { ...typography.subhead, color: ACCENT, fontWeight: "600" },
+    recordButton: {
+        width: 72, height: 72, borderRadius: radius.full,
+        borderWidth: 2, borderColor: ACCENT,
+        alignItems: "center", justifyContent: "center",
+        backgroundColor: colors.backgroundLight,
+    },
+    recordButtonActive: { backgroundColor: ACCENT },
+    recordStatus: { ...typography.footnote, color: colors.textSecondary },
+    error: { ...typography.footnote, color: colors.error, marginBottom: spacing.md },
+    sendButton: {
+        backgroundColor: ACCENT,
+        borderRadius: radius.full,
+        paddingVertical: spacing.md,
+        alignItems: "center",
+        justifyContent: "center",
+        minHeight: 50,
+    },
+    sendButtonDisabled: { opacity: 0.4 },
+    sendButtonText: { ...typography.headline, color: colors.background, fontWeight: "700" },
+});

apps/mobile/src/features/dares/components/DareProofView.tsx

@@ -0,0 +1,112 @@
+import { useCallback, useEffect, useState } from "react";
+import { ActivityIndicator, Image, Pressable, StyleSheet, Text, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { Audio } from "expo-av";
+import { getMediaUrl } from "../../../lib/mediaApi";
+import { colors, featureColors, radius, spacing, typography } from "../../../theme";
+import type { DareProofType } from "../types";
+
+const ACCENT = featureColors.dares.accent;
+
+export interface DareProofViewProps {
+    proofMediaId: string;
+    proofType: DareProofType;
+}
+
+/**
+ * Renders the attached proof inline on a dare card: the photo itself, or a
+ * play button for audio. Signed URLs are short-lived, so the URL is resolved
+ * lazily on first render (photo) or first play (audio).
+ */
+export function DareProofView({ proofMediaId, proofType }: DareProofViewProps) {
+    const [url, setUrl] = useState<string | null>(null);
+    const [failed, setFailed] = useState(false);
+    const [sound, setSound] = useState<Audio.Sound | null>(null);
+    const [playing, setPlaying] = useState(false);
+    const [loadingAudio, setLoadingAudio] = useState(false);
+
+    useEffect(() => {
+        if (proofType !== "photo") return;
+        let cancelled = false;
+        getMediaUrl(proofMediaId)
+            .then((result) => { if (!cancelled) setUrl(result.url); })
+            .catch(() => { if (!cancelled) setFailed(true); });
+        return () => { cancelled = true; };
+    }, [proofMediaId, proofType]);
+
+    useEffect(() => {
+        return () => { if (sound) void sound.unloadAsync(); };
+    }, [sound]);
+
+    const togglePlayback = useCallback(async () => {
+        try {
+            if (sound) {
+                const status = await sound.getStatusAsync();
+                if (status.isLoaded && status.isPlaying) {
+                    await sound.pauseAsync();
+                    setPlaying(false);
+                } else {
+                    await sound.replayAsync();
+                    setPlaying(true);
+                }
+                return;
+            }
+            setLoadingAudio(true);
+            const { url: signedUrl } = await getMediaUrl(proofMediaId);
+            const created = await Audio.Sound.createAsync(
+                { uri: signedUrl },
+                { shouldPlay: true },
+                (status) => {
+                    if (status.isLoaded && status.didJustFinish) setPlaying(false);
+                },
+            );
+            setSound(created.sound);
+            setPlaying(true);
+        } catch {
+            setFailed(true);
+        } finally {
+            setLoadingAudio(false);
+        }
+    }, [sound, proofMediaId]);
+
+    if (failed) {
+        return <Text style={styles.failed}>Proof could not be loaded.</Text>;
+    }
+
+    if (proofType === "photo") {
+        return url ? (
+            <Image source={{ uri: url }} style={styles.photo} resizeMode="cover" />
+        ) : (
+            <ActivityIndicator size="small" color={ACCENT} style={styles.loader} />
+        );
+    }
+
+    return (
+        <Pressable style={styles.audioRow} onPress={() => void togglePlayback()} disabled={loadingAudio}>
+            {loadingAudio ? (
+                <ActivityIndicator size="small" color={ACCENT} />
+            ) : (
+                <Ionicons name={playing ? "pause-circle" : "play-circle"} size={28} color={ACCENT} />
+            )}
+            <Text style={styles.audioLabel}>{playing ? "Playing proof…" : "Play audio proof"}</Text>
+        </Pressable>
+    );
+}
+
+const styles = StyleSheet.create({
+    photo: {
+        width: "100%", height: 180, marginTop: spacing.sm,
+        borderRadius: radius.md, borderWidth: 1, borderColor: colors.border,
+    },
+    loader: { marginTop: spacing.sm, alignSelf: "flex-start" },
+    audioRow: {
+        flexDirection: "row", alignItems: "center", gap: spacing.sm,
+        marginTop: spacing.sm,
+        paddingHorizontal: spacing.md, paddingVertical: spacing.sm,
+        borderRadius: radius.md, borderWidth: 1, borderColor: colors.border,
+        backgroundColor: colors.background,
+        alignSelf: "flex-start",
+    },
+    audioLabel: { ...typography.subhead, color: colors.text, fontWeight: "600" },
+    failed: { ...typography.footnote, color: colors.textTertiary, marginTop: spacing.sm },
+});

apps/mobile/src/features/dares/components/SendDareSheet.tsx

@@ -6,7 +6,7 @@ import {
 import { Ionicons } from "@expo/vector-icons";
 import { daresApi } from "../../../lib/daresApi";
 import { colors, featureColors, radius, spacing, typography } from "../../../theme";
-import { DURATION_OPTIONS, type DareItem, type DarePack, type SendDarePayload } from "../types";
+import { DURATION_OPTIONS, PROOF_OPTIONS, type DareItem, type DarePack, type DareProofType, type SendDarePayload } from "../types";
 
 const ACCENT = featureColors.dares.accent;
 
@@ -26,6 +26,7 @@ export function SendDareSheet({ visible, pack, canSendCustom, onClose, onSend, o
     const [selectedId, setSelectedId] = useState<string | null>(null);
     const [customText, setCustomText] = useState("");
     const [durationHours, setDurationHours] = useState<number | null>(24);
+    const [proofType, setProofType] = useState<DareProofType>("none");
     const [notes, setNotes] = useState("");
     const [sending, setSending] = useState(false);
 
@@ -35,6 +36,7 @@ export function SendDareSheet({ visible, pack, canSendCustom, onClose, onSend, o
         setSelectedId(null);
         setCustomText("");
         setNotes("");
+        setProofType("none");
         daresApi
             .packDares(pack.id)
             .then((result) => setDares(result.dares))
@@ -52,10 +54,11 @@ export function SendDareSheet({ visible, pack, canSendCustom, onClose, onSend, o
             ? { custom_dare_text: customText.trim(), custom_dare_intensity: 3, duration_hours: durationHours }
             : { dare_id: selectedId!, duration_hours: durationHours };
         if (notes.trim()) payload.sender_notes = notes.trim();
+        if (proofType !== "none") payload.proof_type = proofType;
         const sent = await onSend(payload);
         setSending(false);
         if (sent) onClose();
-    }, [canSubmit, sending, isCustom, customText, selectedId, durationHours, notes, onSend, onClose]);
+    }, [canSubmit, sending, isCustom, customText, selectedId, durationHours, proofType, notes, onSend, onClose]);
 
     return (
         <Modal visible={visible} animationType="slide" transparent onRequestClose={onClose}>
@@ -135,6 +138,29 @@ export function SendDareSheet({ visible, pack, canSendCustom, onClose, onSend, o
                             })}
                         </View>
 
+                        <Text style={styles.sectionLabel}>REQUIRE PROOF</Text>
+                        <View style={styles.durationRow}>
+                            {PROOF_OPTIONS.map((option) => {
+                                const selected = option.value === proofType;
+                                return (
+                                    <Pressable
+                                        key={option.value}
+                                        onPress={() => setProofType(option.value)}
+                                        style={[styles.chip, styles.proofChip, selected && styles.chipSelected]}
+                                    >
+                                        <Ionicons
+                                            name={option.icon as keyof typeof Ionicons.glyphMap}
+                                            size={14}
+                                            color={selected ? ACCENT : colors.textSecondary}
+                                        />
+                                        <Text style={[styles.chipText, selected && styles.chipTextSelected]}>
+                                            {option.label}
+                                        </Text>
+                                    </Pressable>
+                                );
+                            })}
+                        </View>
+
                         <Text style={styles.sectionLabel}>ADD A NOTE</Text>
                         <TextInput
                             style={styles.notesInput}
@@ -229,6 +255,7 @@ const styles = StyleSheet.create({
         paddingHorizontal: spacing.md, paddingVertical: spacing.sm - 2,
         borderRadius: radius.full, borderWidth: 1, borderColor: colors.border,
     },
+    proofChip: { flexDirection: "row", alignItems: "center", gap: spacing.xs },
     chipSelected: { borderColor: ACCENT, backgroundColor: "rgba(212,175,55,0.12)" },
     chipText: { ...typography.footnote, color: colors.textSecondary },
     chipTextSelected: { color: ACCENT, fontWeight: "600" },

apps/mobile/src/features/dares/components/index.ts

@@ -4,3 +4,7 @@ export { DarePackGrid } from "./DarePackGrid";
 export type { DarePackGridProps } from "./DarePackGrid";
 export { SendDareSheet } from "./SendDareSheet";
 export type { SendDareSheetProps } from "./SendDareSheet";
+export { DareProofSheet } from "./DareProofSheet";
+export type { DareProofSheetProps } from "./DareProofSheet";
+export { DareProofView } from "./DareProofView";
+export type { DareProofViewProps } from "./DareProofView";

apps/mobile/src/features/dares/hooks/useDares.ts

@@ -30,7 +30,7 @@ export interface UseDaresReturn {
     refresh: () => Promise<void>;
     send: (payload: SendDarePayload) => Promise<boolean>;
     respond: (dareId: string, action: "accept" | "decline") => Promise<void>;
-    submit: (dareId: string) => Promise<void>;
+    submit: (dareId: string, proofMediaId?: string) => Promise<void>;
     complete: (dareId: string) => Promise<void>;
     cancel: (dareId: string) => Promise<void>;
 }
@@ -167,7 +167,7 @@ export function useDares({ isFocused = true }: UseDaresConfig = {}): UseDaresRet
         refresh,
         send,
         respond: useCallback((dareId, action) => act(dareId, () => daresApi.respond(dareId, action)), [act]),
-        submit: useCallback((dareId) => act(dareId, () => daresApi.submit(dareId)), [act]),
+        submit: useCallback((dareId, proofMediaId) => act(dareId, () => daresApi.submit(dareId, proofMediaId)), [act]),
         complete: useCallback((dareId) => act(dareId, () => daresApi.complete(dareId)), [act]),
         cancel: useCallback((dareId) => act(dareId, () => daresApi.cancel(dareId)), [act]),
     };

apps/mobile/src/features/dares/types.ts

@@ -1,6 +1,9 @@
 export type DareStatus =
     | "pending" | "active" | "submitted" | "completed" | "expired" | "declined" | "cancelled";
 
+/** Sender-chosen proof of completion; "none" means a plain "I did it" suffices. */
+export type DareProofType = "none" | "photo" | "audio";
+
 export interface DarePack {
     id: string;
     name: string;
@@ -36,6 +39,8 @@ export interface SentDare {
     direction: "incoming" | "outgoing";
     status: DareStatus;
     sender_notes: string | null;
+    proof_type: DareProofType;
+    proof_media_id: string | null;
     sent_at: string;
     accepted_at: string | null;
     submitted_at: string | null;
@@ -70,8 +75,15 @@ export interface SendDarePayload {
     custom_dare_intensity?: number;
     duration_hours?: number | null;
     sender_notes?: string | null;
+    proof_type?: DareProofType;
 }
 
+export const PROOF_OPTIONS: { label: string; value: DareProofType; icon: string }[] = [
+    { label: "No proof", value: "none", icon: "checkmark-circle-outline" },
+    { label: "Photo", value: "photo", icon: "camera-outline" },
+    { label: "Audio", value: "audio", icon: "mic-outline" },
+];
+
 export const DURATION_OPTIONS: { label: string; hours: number | null }[] = [
     { label: "1 hour", hours: 1 },
     { label: "6 hours", hours: 6 },

apps/mobile/src/lib/daresApi.ts

@@ -13,7 +13,11 @@ export const daresApi = {
     send: (payload: SendDarePayload) => apiClient.post<{ dare: SentDare }>("/v1/dares", payload),
     respond: (dareId: string, action: "accept" | "decline") =>
         apiClient.post<{ dare: SentDare }>(`${dare(dareId)}/respond`, { action }),
-    submit: (dareId: string) => apiClient.post<{ dare: SentDare }>(`${dare(dareId)}/submit`),
+    submit: (dareId: string, proofMediaId?: string) =>
+        apiClient.post<{ dare: SentDare }>(
+            `${dare(dareId)}/submit`,
+            proofMediaId ? { proof_media_id: proofMediaId } : undefined,
+        ),
     complete: (dareId: string) => apiClient.post<{ dare: SentDare }>(`${dare(dareId)}/complete`),
     cancel: (dareId: string) => apiClient.post<{ dare: SentDare }>(`${dare(dareId)}/cancel`),
 };

apps/mobile/src/lib/mediaApi.ts

@@ -3,7 +3,7 @@ import * as FileSystem from 'expo-file-system/legacy';
 import { decode } from 'base64-arraybuffer';
 import { ApiError, apiClient, authenticatedFetch } from './apiClient';
 
-export type MediaKind = 'avatar' | 'response' | 'chat' | 'feedback';
+export type MediaKind = 'avatar' | 'response' | 'chat' | 'feedback' | 'dare_proof';
 export interface UploadMediaOptions { kind: MediaKind; mimeType: string; questionId?: string; matchId?: string }
 export interface MediaUploadResponse { reference: string; media: { id: string; mime_type: string; byte_size: number }; message?: Record<string, unknown> }