yaver-feedback-react-native 0.6.1 → 0.7.1

package/dist/FeedbackModal.js

@@ -37,233 +37,253 @@ exports.FeedbackModal = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const YaverFeedback_1 = require("./YaverFeedback");
-const BlackBox_1 = require("./BlackBox");
 const capture_1 = require("./capture");
 const upload_1 = require("./upload");
 const AuthOverlay_1 = require("./AuthOverlay");
-const MODE_LABELS = {
-    live: 'Live',
-    narrated: 'Narrated',
-    batch: 'Batch',
-};
-/**
- * Full-screen modal for composing and sending a feedback report.
- * Renders when triggered by shake, floating button, or manual call.
- *
- * Supports three feedback modes:
- * - Live: stream events to the agent as they happen
- * - Narrated: record everything, send on stop
- * - Batch: dump everything at end (default)
- */
 const FeedbackModal = () => {
     const [visible, setVisible] = (0, react_1.useState)(false);
-    const [timeline, setTimeline] = (0, react_1.useState)([]);
-    const [isRecordingAudio, setIsRecordingAudio] = (0, react_1.useState)(false);
-    const [isSending, setIsSending] = (0, react_1.useState)(false);
+    const [action, setAction] = (0, react_1.useState)('idle');
     const [error, setError] = (0, react_1.useState)(null);
-    const [sent, setSent] = (0, react_1.useState)(false);
-    const [mode, setMode] = (0, react_1.useState)('batch');
-    const [commentary, setCommentary] = (0, react_1.useState)([]);
-    const [isVoiceCommand, setIsVoiceCommand] = (0, react_1.useState)(false);
-    const [isReloading, setIsReloading] = (0, react_1.useState)(false);
+    const [toast, setToast] = (0, react_1.useState)(null);
+    const [isRecordingVideo, setIsRecordingVideo] = (0, react_1.useState)(false);
+    const [lastVideo, setLastVideo] = (0, react_1.useState)(null);
     const mountedRef = (0, react_1.useRef)(true);
-    const commentaryListRef = (0, react_1.useRef)(null);
     (0, react_1.useEffect)(() => {
         mountedRef.current = true;
         const sub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startReport', () => {
             if (YaverFeedback_1.YaverFeedback.isEnabled()) {
                 setVisible(true);
-                setTimeline([]);
                 setError(null);
-                setSent(false);
-                setCommentary([]);
-                setMode(YaverFeedback_1.YaverFeedback.getFeedbackMode());
-            }
-        });
-        // Listen for agent commentary events
-        const commentarySub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:commentary', (event) => {
-            if (mountedRef.current) {
-                setCommentary((prev) => [...prev, event]);
+                setToast(null);
+                setAction('idle');
             }
         });
         return () => {
             mountedRef.current = false;
             sub.remove();
-            commentarySub.remove();
         };
     }, []);
-    const handleScreenshot = (0, react_1.useCallback)(async () => {
+    const closeSoon = (0, react_1.useCallback)((delayMs = 1200) => {
+        setTimeout(() => {
+            if (mountedRef.current)
+                setVisible(false);
+        }, delayMs);
+    }, []);
+    const handleClose = (0, react_1.useCallback)(() => {
+        setVisible(false);
+        setError(null);
+        setToast(null);
+        setAction('idle');
+    }, []);
+    // Helper: run a P2P call; on network failure, ask YaverFeedback to
+    // re-query Convex for the fresh IP and retry once. Solves the common
+    // case where the Mac's LAN IP rotated while the SDK held a stale URL.
+    const runWithReconnect = (0, react_1.useCallback)(async (fn) => {
+        let client = YaverFeedback_1.YaverFeedback.getP2PClient();
+        if (!client) {
+            const ok = await YaverFeedback_1.YaverFeedback.reconnect();
+            if (ok)
+                client = YaverFeedback_1.YaverFeedback.getP2PClient();
+        }
+        if (!client) {
+            throw new Error('Not connected to the agent yet.');
+        }
         try {
-            const path = await (0, capture_1.captureScreenshot)();
-            if (mountedRef.current) {
-                const event = {
-                    type: 'screenshot',
-                    path,
-                    timestamp: new Date().toISOString(),
-                };
-                setTimeline((prev) => [...prev, event]);
-                // In live mode, stream the event immediately
-                if (mode === 'live') {
-                    const client = YaverFeedback_1.YaverFeedback.getP2PClient();
-                    if (client) {
-                        try {
-                            await client.streamFeedback((async function* () {
-                                yield {
-                                    type: 'screenshot',
-                                    timestamp: event.timestamp,
-                                    data: { path },
-                                };
-                            })());
-                        }
-                        catch (err) {
-                            console.warn('[YaverFeedback] Live stream failed:', err);
-                        }
-                    }
-                }
-            }
+            await fn(client);
         }
         catch (err) {
-            if (mountedRef.current) {
-                setError(String(err));
-            }
+            const msg = err instanceof Error ? err.message : String(err);
+            const transient = /Network request failed|timeout|ECONNREFUSED|Failed to fetch|fetch failed|aborted/i.test(msg);
+            if (!transient)
+                throw err;
+            const ok = await YaverFeedback_1.YaverFeedback.reconnect();
+            if (!ok)
+                throw err;
+            const fresh = YaverFeedback_1.YaverFeedback.getP2PClient();
+            if (!fresh)
+                throw err;
+            await fn(fresh);
         }
-    }, [mode]);
-    const handleToggleAudio = (0, react_1.useCallback)(async () => {
-        if (isRecordingAudio) {
-            try {
-                const result = await (0, capture_1.stopAudioRecording)();
-                if (mountedRef.current) {
-                    setIsRecordingAudio(false);
-                    const event = {
-                        type: 'audio',
-                        path: result.path,
-                        timestamp: new Date().toISOString(),
-                        duration: result.duration,
-                    };
-                    setTimeline((prev) => [...prev, event]);
-                    // In live mode, stream the audio event
-                    if (mode === 'live') {
-                        const client = YaverFeedback_1.YaverFeedback.getP2PClient();
-                        if (client) {
-                            try {
-                                await client.streamFeedback((async function* () {
-                                    yield {
-                                        type: 'audio',
-                                        timestamp: event.timestamp,
-                                        data: { path: result.path, duration: result.duration },
-                                    };
-                                })());
-                            }
-                            catch (err) {
-                                console.warn('[YaverFeedback] Live stream failed:', err);
-                            }
-                        }
-                    }
-                }
-            }
-            catch (err) {
-                if (mountedRef.current) {
-                    setIsRecordingAudio(false);
-                    setError(String(err));
-                }
-            }
+    }, []);
+    // ─── 1. Hot reload ─────────────────────────────────────────────────
+    const handleHotReload = (0, react_1.useCallback)(async () => {
+        setAction('hot-reloading');
+        setError(null);
+        try {
+            await runWithReconnect(async (client) => {
+                await client.reloadApp('dev');
+            });
+            setToast('Reload sent');
+            closeSoon(800);
         }
-        else {
-            try {
-                await (0, capture_1.startAudioRecording)();
-                if (mountedRef.current) {
-                    setIsRecordingAudio(true);
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            if (mountedRef.current)
+                setAction('idle');
+        }
+    }, [closeSoon, runWithReconnect]);
+    // ─── 2. Screenshot + Fix ───────────────────────────────────────────
+    //
+    // Hide the modal first so the screenshot captures the actual screen
+    // (the bug) — not the modal card. Await a short animation delay,
+    // snapshot, upload the feedback bundle with any buffered errors, then
+    // kick `/feedback/{id}/fix` to create the repair task.
+    const handleScreenshotAndFix = (0, react_1.useCallback)(async () => {
+        const client = YaverFeedback_1.YaverFeedback.getP2PClient();
+        const config = YaverFeedback_1.YaverFeedback.getConfig();
+        if (!client || !config?.agentUrl) {
+            setError('Not connected to the agent yet.');
+            return;
+        }
+        setAction('capturing');
+        setError(null);
+        // Step 1: Hide the modal so the screenshot contains the real screen.
+        setVisible(false);
+        // Wait out the slide-down animation on both platforms.
+        await new Promise((resolve) => setTimeout(resolve, 350));
+        let path = null;
+        try {
+            path = await (0, capture_1.captureScreenshot)();
+        }
+        catch (err) {
+            setVisible(true);
+            setError(err instanceof Error ? err.message : String(err));
+            setAction('idle');
+            return;
+        }
+        // Step 2: Re-show the modal for progress + ack.
+        setVisible(true);
+        await new Promise((resolve) => setTimeout(resolve, 150));
+        try {
+            const { Dimensions } = require('react-native');
+            const { width, height } = Dimensions.get('window');
+            const deviceInfo = {
+                platform: react_native_1.Platform.OS,
+                osVersion: String(react_native_1.Platform.Version),
+                model: react_native_1.Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
+                screenWidth: width,
+                screenHeight: height,
+            };
+            const capturedErrors = YaverFeedback_1.YaverFeedback.getCapturedErrors();
+            const bundle = {
+                metadata: {
+                    timestamp: new Date().toISOString(),
+                    device: deviceInfo,
+                    app: {},
+                    userNote: '[Screenshot + Fix]',
+                },
+                screenshots: [path],
+                errors: capturedErrors.length > 0 ? capturedErrors : undefined,
+            };
+            const uploaded = await (0, upload_1.uploadFeedback)(config.agentUrl, config.authToken ?? '', bundle);
+            // The agent returns the new report id as `id` (see
+            // feedback_http.go::ReceiveFeedback). Trigger the fix loop if we got
+            // one back; otherwise just ack the upload.
+            const reportId = uploaded?.id ??
+                uploaded?.reportId;
+            if (reportId) {
+                try {
+                    await client.triggerFix(reportId);
+                    setToast('Fix task started');
                 }
-            }
-            catch (err) {
-                if (mountedRef.current) {
-                    setError(String(err));
+                catch (err) {
+                    setToast('Report uploaded — fix trigger failed');
+                    setError(err instanceof Error ? err.message : String(err));
                 }
             }
+            else {
+                setToast('Report uploaded');
+            }
+            closeSoon(1400);
         }
-    }, [isRecordingAudio, mode]);
-    const handleVoiceCommand = (0, react_1.useCallback)(async () => {
-        if (isVoiceCommand) {
-            // Stop voice command and send as a task
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            if (mountedRef.current)
+                setAction('idle');
+        }
+    }, [closeSoon]);
+    // ─── 3. Vibing ─────────────────────────────────────────────────────
+    const handleVibing = (0, react_1.useCallback)(async () => {
+        const client = YaverFeedback_1.YaverFeedback.getP2PClient();
+        if (!client) {
+            setError('Not connected to the agent yet.');
+            return;
+        }
+        setAction('vibing');
+        setError(null);
+        try {
+            const capturedErrors = YaverFeedback_1.YaverFeedback.getCapturedErrors();
+            const errNote = capturedErrors.length > 0
+                ? `\n\nRecent captured errors:\n` +
+                    capturedErrors
+                        .slice(-3)
+                        .map((e) => `- ${e.message}`)
+                        .join('\n')
+                : '';
+            const prompt = 'The user opened the feedback modal on their phone and tapped Vibing. ' +
+                'Investigate whatever they are likely to be asking about — pick the ' +
+                'next small improvement or fix based on recent activity and the ' +
+                'current screen.' +
+                errNote;
+            await client.vibing(prompt);
+            setToast('Vibing task created');
+            closeSoon(1200);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            if (mountedRef.current)
+                setAction('idle');
+        }
+    }, [closeSoon]);
+    // ─── 4. Toggle screen recording ────────────────────────────────────
+    const handleToggleRecording = (0, react_1.useCallback)(async () => {
+        setError(null);
+        if (isRecordingVideo) {
             try {
-                const result = await (0, capture_1.stopAudioRecording)();
+                const result = await (0, capture_1.stopVideoRecording)();
                 if (mountedRef.current) {
-                    setIsVoiceCommand(false);
-                    const client = YaverFeedback_1.YaverFeedback.getP2PClient();
-                    if (client) {
-                        try {
-                            await client.streamFeedback((async function* () {
-                                yield {
-                                    type: 'voice_command',
-                                    timestamp: new Date().toISOString(),
-                                    data: { path: result.path, duration: result.duration },
-                                };
-                            })());
-                        }
-                        catch (err) {
-                            console.warn('[YaverFeedback] Voice command send failed:', err);
-                            if (mountedRef.current) {
-                                setError('Failed to send voice command.');
-                            }
-                        }
-                    }
+                    setIsRecordingVideo(false);
+                    setLastVideo(result);
+                    setToast(`Recording stopped — ${Math.round(result.duration)}s`);
                 }
             }
             catch (err) {
-                if (mountedRef.current) {
-                    setIsVoiceCommand(false);
-                    setError(String(err));
-                }
+                setIsRecordingVideo(false);
+                setError(err instanceof Error ? err.message : String(err));
             }
         }
         else {
             try {
-                await (0, capture_1.startAudioRecording)();
+                await (0, capture_1.startVideoRecording)();
                 if (mountedRef.current) {
-                    setIsVoiceCommand(true);
+                    setIsRecordingVideo(true);
+                    setToast('Recording…');
+                    setLastVideo(null);
                 }
             }
             catch (err) {
-                if (mountedRef.current) {
-                    setError(String(err));
-                }
+                setError(err instanceof Error ? err.message : String(err));
             }
         }
-    }, [isVoiceCommand]);
-    const handleReload = (0, react_1.useCallback)(async () => {
+    }, [isRecordingVideo]);
+    // ─── 5. Send the last recorded video ───────────────────────────────
+    const handleSendVideo = (0, react_1.useCallback)(async () => {
         const config = YaverFeedback_1.YaverFeedback.getConfig();
-        if (!config?.agentUrl)
+        if (!config?.agentUrl) {
+            setError('Not connected to the agent yet.');
             return;
-        setIsReloading(true);
-        try {
-            const response = await fetch(`${config.agentUrl.replace(/\/$/, '')}/dev/reload-app`, {
-                method: 'POST',
-                headers: {
-                    Authorization: `Bearer ${config.authToken}`,
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({ mode: 'dev' }),
-            });
-            if (response.ok) {
-                BlackBox_1.BlackBox.lifecycle('Hot reload triggered from feedback SDK');
-            }
-        }
-        catch (err) {
-            if (mountedRef.current) {
-                setError('Reload failed: ' + String(err));
-            }
         }
-        finally {
-            if (mountedRef.current) {
-                setIsReloading(false);
-            }
-        }
-    }, []);
-    const handleSend = (0, react_1.useCallback)(async () => {
-        const config = YaverFeedback_1.YaverFeedback.getConfig();
-        if (!config || !config.agentUrl)
+        if (!lastVideo) {
+            setError('No video recorded yet.');
             return;
-        setIsSending(true);
+        }
+        setAction('sending-video');
         setError(null);
         try {
             const { Dimensions } = require('react-native');
@@ -275,349 +295,148 @@ const FeedbackModal = () => {
                 screenWidth: width,
                 screenHeight: height,
             };
-            const screenshots = timeline
-                .filter((e) => e.type === 'screenshot')
-                .map((e) => e.path);
-            const audioEvent = timeline.find((e) => e.type === 'audio');
-            // Include captured errors from the error buffer
-            const capturedErrors = YaverFeedback_1.YaverFeedback.getCapturedErrors();
             const bundle = {
                 metadata: {
                     timestamp: new Date().toISOString(),
                     device: deviceInfo,
                     app: {},
+                    userNote: '[Screen recording]',
                 },
-                screenshots,
-                audio: audioEvent?.path,
-                errors: capturedErrors.length > 0 ? capturedErrors : undefined,
+                screenshots: [],
+                video: lastVideo.path,
+                errors: YaverFeedback_1.YaverFeedback.getCapturedErrors().length
+                    ? YaverFeedback_1.YaverFeedback.getCapturedErrors()
+                    : undefined,
             };
-            await (0, upload_1.uploadFeedback)(config.agentUrl, config.authToken, bundle);
-            if (mountedRef.current) {
-                setSent(true);
-                // Auto-close after a short delay
-                setTimeout(() => {
-                    if (mountedRef.current) {
-                        setVisible(false);
-                    }
-                }, 1500);
-            }
+            await (0, upload_1.uploadFeedback)(config.agentUrl, config.authToken ?? '', bundle);
+            setToast('Video sent');
+            setLastVideo(null);
+            closeSoon(1200);
         }
         catch (err) {
-            if (mountedRef.current) {
-                setError(String(err));
-            }
+            setError(err instanceof Error ? err.message : String(err));
         }
         finally {
-            if (mountedRef.current) {
-                setIsSending(false);
-            }
+            if (mountedRef.current)
+                setAction('idle');
         }
-    }, [timeline]);
-    const handleCancel = (0, react_1.useCallback)(() => {
-        setVisible(false);
-        setTimeline([]);
-        setError(null);
-        setSent(false);
-        setIsRecordingAudio(false);
-        setIsVoiceCommand(false);
-        setCommentary([]);
-    }, []);
-    const renderCommentaryItem = (0, react_1.useCallback)(({ item }) => (<react_native_1.View style={styles.commentaryBubble}>
-        <react_native_1.Text style={styles.commentaryType}>{item.type}</react_native_1.Text>
-        <react_native_1.Text style={styles.commentaryMessage}>{item.message}</react_native_1.Text>
-      </react_native_1.View>), []);
-    // The AuthOverlay must stay mounted so it can respond to login / picker
-    // events even when the feedback modal itself isn't visible. The wrapping
-    // fragment keeps the original return shape intact for the modal branch.
+    }, [lastVideo, closeSoon]);
+    const busy = action !== 'idle';
     return (<>
       <AuthOverlay_1.AuthOverlay />
-      {visible && (<react_native_1.Modal visible={visible} animationType="slide" transparent onRequestClose={handleCancel}>
-      <react_native_1.View style={styles.overlay}>
-        <react_native_1.View style={styles.modal}>
-          <react_native_1.Text style={styles.title}>Send Feedback</react_native_1.Text>
-
-          {/* Mode selector */}
-          <react_native_1.View style={styles.modeSelector}>
-            {['live', 'narrated', 'batch'].map((m) => (<react_native_1.TouchableOpacity key={m} style={[styles.modeButton, mode === m && styles.modeButtonActive]} onPress={() => setMode(m)}>
-                <react_native_1.Text style={[styles.modeButtonText, mode === m && styles.modeButtonTextActive]}>
-                  {MODE_LABELS[m]}
-                </react_native_1.Text>
-              </react_native_1.TouchableOpacity>))}
-          </react_native_1.View>
-
-          {/* Agent commentary (chat-like view) */}
-          {commentary.length > 0 && (<react_native_1.FlatList ref={commentaryListRef} data={commentary} renderItem={renderCommentaryItem} keyExtractor={(item) => item.id} style={styles.commentaryList} onContentSizeChange={() => commentaryListRef.current?.scrollToEnd({ animated: true })}/>)}
-
-          {/* Timeline of captured items */}
-          {timeline.length > 0 && (<react_native_1.ScrollView style={styles.timeline} horizontal>
-              {timeline.map((event, idx) => (<react_native_1.View key={idx} style={styles.timelineItem}>
-                  <react_native_1.Text style={styles.timelineIcon}>
-                    {event.type === 'screenshot'
-                        ? '[img]'
-                        : event.type === 'audio'
-                            ? '[mic]'
-                            : '[vid]'}
-                  </react_native_1.Text>
-                  <react_native_1.Text style={styles.timelineLabel}>{event.type}</react_native_1.Text>
-                  {event.duration != null && (<react_native_1.Text style={styles.timelineDuration}>
-                      {Math.round(event.duration)}s
-                    </react_native_1.Text>)}
-                </react_native_1.View>))}
-            </react_native_1.ScrollView>)}
-
-          {/* Action buttons */}
-          <react_native_1.View style={styles.actions}>
-            <react_native_1.TouchableOpacity style={styles.actionButton} onPress={handleScreenshot}>
-              <react_native_1.Text style={styles.actionText}>Take Screenshot</react_native_1.Text>
-            </react_native_1.TouchableOpacity>
+      {visible && (<react_native_1.Modal visible={visible} animationType="slide" transparent onRequestClose={handleClose}>
+          <react_native_1.Pressable style={styles.overlay} onPress={handleClose}>
+            <react_native_1.Pressable style={styles.modal} onPress={(e) => e.stopPropagation()}>
+              <react_native_1.View style={styles.header}>
+                <react_native_1.Text style={styles.title}>Send Feedback</react_native_1.Text>
+                <react_native_1.Pressable onPress={handleClose} hitSlop={12} style={styles.closeBtn} accessibilityRole="button" accessibilityLabel="Close">
+                  <react_native_1.Text style={styles.closeIcon}>×</react_native_1.Text>
+                </react_native_1.Pressable>
+              </react_native_1.View>
 
-            <react_native_1.TouchableOpacity style={[styles.actionButton, isRecordingAudio && styles.actionButtonActive]} onPress={handleToggleAudio} disabled={isVoiceCommand}>
-              <react_native_1.Text style={styles.actionText}>
-                {isRecordingAudio ? 'Stop Recording' : 'Voice Note'}
-              </react_native_1.Text>
-            </react_native_1.TouchableOpacity>
-          </react_native_1.View>
+              {/* 1. Hot Reload — the common path */}
+              <ActionRow label={action === 'hot-reloading' ? 'Reloading…' : 'Hot Reload'} tint="#fbbf24" onPress={handleHotReload} disabled={busy} busy={action === 'hot-reloading'}/>
 
-          {/* Hot Reload + Streaming status */}
-          <react_native_1.View style={styles.actions}>
-            <react_native_1.TouchableOpacity style={[styles.actionButton, styles.reloadButton]} onPress={handleReload} disabled={isReloading}>
-              <react_native_1.Text style={styles.actionText}>
-                {isReloading ? 'Reloading...' : 'Hot Reload'}
-              </react_native_1.Text>
-            </react_native_1.TouchableOpacity>
+              {/* 2. Screenshot + Fix — for bug fixes */}
+              <ActionRow label={action === 'capturing'
+                ? 'Capturing…'
+                : 'Screenshot & Fix'} tint="#22c55e" onPress={handleScreenshotAndFix} disabled={busy} busy={action === 'capturing'}/>
 
-            <react_native_1.View style={[styles.actionButton, styles.streamingIndicator]}>
-              <react_native_1.View style={[styles.streamingDot, BlackBox_1.BlackBox.isStreaming && styles.streamingDotActive]}/>
-              <react_native_1.Text style={styles.streamingText}>
-                {BlackBox_1.BlackBox.isStreaming ? 'Streaming' : 'Not streaming'}
-              </react_native_1.Text>
-            </react_native_1.View>
-          </react_native_1.View>
+              {/* 3. Vibing */}
+              <ActionRow label={action === 'vibing' ? 'Starting…' : 'Vibing'} tint="#818cf8" onPress={handleVibing} disabled={busy} busy={action === 'vibing'}/>
 
-          {/* Voice command button */}
-          {mode === 'live' && (<react_native_1.TouchableOpacity style={[styles.voiceCommandButton, isVoiceCommand && styles.voiceCommandActive]} onPress={handleVoiceCommand} disabled={isRecordingAudio}>
-              <react_native_1.Text style={styles.voiceCommandText}>
-                {isVoiceCommand ? 'Stop & Send Command' : 'Speak to Fix'}
-              </react_native_1.Text>
-            </react_native_1.TouchableOpacity>)}
+              {/* 4. Start/Stop Recording */}
+              <ActionRow label={isRecordingVideo ? 'Stop Recording' : 'Start Recording'} tint={isRecordingVideo ? '#ef4444' : '#60a5fa'} onPress={handleToggleRecording} disabled={busy && action !== 'idle' && !isRecordingVideo}/>
 
-          {/* Error display */}
-          {error && <react_native_1.Text style={styles.error}>{error}</react_native_1.Text>}
+              {/* 5. Send Video (only tappable when a clip is ready) */}
+              <ActionRow label={action === 'sending-video'
+                ? 'Sending…'
+                : lastVideo
+                    ? `Send Video · ${Math.round(lastVideo.duration)}s`
+                    : 'Send Video'} tint="#a78bfa" onPress={handleSendVideo} disabled={busy || !lastVideo} busy={action === 'sending-video'}/>
 
-          {/* Send / Cancel */}
-          <react_native_1.View style={styles.footer}>
-            <react_native_1.TouchableOpacity style={styles.cancelButton} onPress={handleCancel}>
-              <react_native_1.Text style={styles.cancelText}>Cancel</react_native_1.Text>
-            </react_native_1.TouchableOpacity>
-
-            {sent ? (<react_native_1.View style={styles.sendButton}>
-                <react_native_1.Text style={styles.sendText}>Sent!</react_native_1.Text>
-              </react_native_1.View>) : (<react_native_1.TouchableOpacity style={[styles.sendButton, isSending && styles.sendButtonDisabled]} onPress={handleSend} disabled={isSending || timeline.length === 0}>
-                {isSending ? (<react_native_1.ActivityIndicator color="#fff" size="small"/>) : (<react_native_1.Text style={styles.sendText}>Send Report</react_native_1.Text>)}
-              </react_native_1.TouchableOpacity>)}
-          </react_native_1.View>
-        </react_native_1.View>
-      </react_native_1.View>
-    </react_native_1.Modal>)}
+              {toast && <react_native_1.Text style={styles.toast}>{toast}</react_native_1.Text>}
+              {error && <react_native_1.Text style={styles.error}>{error}</react_native_1.Text>}
+            </react_native_1.Pressable>
+          </react_native_1.Pressable>
+        </react_native_1.Modal>)}
     </>);
 };
 exports.FeedbackModal = FeedbackModal;
+const ActionRow = ({ label, tint, onPress, disabled, busy, }) => (<react_native_1.Pressable onPress={onPress} disabled={disabled} style={({ pressed }) => [
+        styles.actionBtn,
+        {
+            borderColor: tint + '66',
+            backgroundColor: tint + '1f',
+        },
+        disabled && styles.actionBtnDisabled,
+        pressed && !disabled && { opacity: 0.7 },
+    ]} accessibilityRole="button" accessibilityLabel={label}>
+    {busy ? (<react_native_1.ActivityIndicator color={tint} size="small"/>) : (<react_native_1.Text style={[styles.actionText, { color: tint }]}>{label}</react_native_1.Text>)}
+  </react_native_1.Pressable>);
 const styles = react_native_1.StyleSheet.create({
     overlay: {
         flex: 1,
-        backgroundColor: 'rgba(0,0,0,0.5)',
+        backgroundColor: 'rgba(0,0,0,0.55)',
         justifyContent: 'flex-end',
     },
     modal: {
-        backgroundColor: '#1a1a2e',
-        borderTopLeftRadius: 20,
-        borderTopRightRadius: 20,
-        padding: 24,
-        paddingBottom: 40,
-        maxHeight: '90%',
+        backgroundColor: '#141422',
+        borderTopLeftRadius: 22,
+        borderTopRightRadius: 22,
+        padding: 22,
+        paddingBottom: 36,
+        gap: 12,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 6,
     },
     title: {
         fontSize: 20,
         fontWeight: '700',
         color: '#fff',
-        marginBottom: 12,
     },
-    modeSelector: {
-        flexDirection: 'row',
-        gap: 8,
-        marginBottom: 16,
-    },
-    modeButton: {
-        flex: 1,
-        paddingVertical: 8,
-        borderRadius: 8,
+    closeBtn: {
+        width: 36,
+        height: 36,
+        borderRadius: 18,
         alignItems: 'center',
+        justifyContent: 'center',
         backgroundColor: 'rgba(255,255,255,0.08)',
-        borderWidth: 1,
-        borderColor: 'rgba(255,255,255,0.1)',
-    },
-    modeButtonActive: {
-        backgroundColor: 'rgba(99,102,241,0.3)',
-        borderColor: '#6366f1',
-    },
-    modeButtonText: {
-        color: '#999',
-        fontSize: 13,
-        fontWeight: '600',
-    },
-    modeButtonTextActive: {
-        color: '#c7c8ff',
-    },
-    commentaryList: {
-        maxHeight: 140,
-        marginBottom: 12,
-    },
-    commentaryBubble: {
-        backgroundColor: 'rgba(99,102,241,0.15)',
-        borderRadius: 10,
-        padding: 10,
-        marginBottom: 6,
-        borderLeftWidth: 3,
-        borderLeftColor: '#6366f1',
-    },
-    commentaryType: {
-        color: '#8b8bf5',
-        fontSize: 10,
-        fontWeight: '700',
-        textTransform: 'uppercase',
-        marginBottom: 2,
-    },
-    commentaryMessage: {
-        color: '#d0d0e0',
-        fontSize: 13,
-        lineHeight: 18,
     },
-    timeline: {
-        maxHeight: 80,
-        marginBottom: 16,
+    closeIcon: {
+        color: '#fff',
+        fontSize: 22,
+        lineHeight: 24,
+        fontWeight: '400',
     },
-    timelineItem: {
+    actionBtn: {
+        paddingVertical: 16,
+        borderRadius: 14,
         alignItems: 'center',
-        marginRight: 16,
-        backgroundColor: 'rgba(255,255,255,0.1)',
-        borderRadius: 12,
-        padding: 10,
-        minWidth: 70,
-    },
-    timelineIcon: {
-        fontSize: 14,
-        color: '#ccc',
-        fontWeight: '600',
-    },
-    timelineLabel: {
-        color: '#ccc',
-        fontSize: 11,
-        marginTop: 4,
-    },
-    timelineDuration: {
-        color: '#999',
-        fontSize: 10,
-    },
-    actions: {
-        flexDirection: 'row',
-        gap: 12,
-        marginBottom: 12,
-    },
-    actionButton: {
-        flex: 1,
-        backgroundColor: 'rgba(99,102,241,0.2)',
+        justifyContent: 'center',
         borderWidth: 1,
-        borderColor: 'rgba(99,102,241,0.4)',
-        borderRadius: 12,
-        paddingVertical: 14,
-        alignItems: 'center',
     },
-    actionButtonActive: {
-        backgroundColor: 'rgba(239,68,68,0.3)',
-        borderColor: 'rgba(239,68,68,0.6)',
+    actionBtnDisabled: {
+        opacity: 0.35,
     },
     actionText: {
-        color: '#fff',
-        fontSize: 14,
-        fontWeight: '600',
-    },
-    voiceCommandButton: {
-        backgroundColor: 'rgba(34,197,94,0.2)',
-        borderWidth: 1,
-        borderColor: 'rgba(34,197,94,0.4)',
-        borderRadius: 12,
-        paddingVertical: 14,
-        alignItems: 'center',
-        marginBottom: 12,
-    },
-    voiceCommandActive: {
-        backgroundColor: 'rgba(34,197,94,0.4)',
-        borderColor: '#22c55e',
+        fontSize: 15,
+        fontWeight: '700',
     },
-    voiceCommandText: {
+    toast: {
         color: '#22c55e',
-        fontSize: 14,
-        fontWeight: '600',
+        fontSize: 13,
+        textAlign: 'center',
+        marginTop: 4,
     },
     error: {
         color: '#ef4444',
         fontSize: 12,
-        marginBottom: 12,
-    },
-    footer: {
-        flexDirection: 'row',
-        gap: 12,
-    },
-    cancelButton: {
-        flex: 1,
-        paddingVertical: 14,
-        alignItems: 'center',
-        borderRadius: 12,
-        borderWidth: 1,
-        borderColor: 'rgba(255,255,255,0.2)',
-    },
-    cancelText: {
-        color: '#999',
-        fontSize: 16,
-        fontWeight: '600',
-    },
-    sendButton: {
-        flex: 2,
-        backgroundColor: '#6366f1',
-        paddingVertical: 14,
-        alignItems: 'center',
-        borderRadius: 12,
-    },
-    sendButtonDisabled: {
-        opacity: 0.5,
-    },
-    sendText: {
-        color: '#fff',
-        fontSize: 16,
-        fontWeight: '700',
-    },
-    reloadButton: {
-        backgroundColor: 'rgba(251,191,36,0.2)',
-        borderColor: 'rgba(251,191,36,0.4)',
-    },
-    streamingIndicator: {
-        flexDirection: 'row',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(255,255,255,0.05)',
-        borderColor: 'rgba(255,255,255,0.1)',
-    },
-    streamingDot: {
-        width: 8,
-        height: 8,
-        borderRadius: 4,
-        backgroundColor: '#555',
-        marginRight: 6,
-    },
-    streamingDotActive: {
-        backgroundColor: '#22c55e',
-    },
-    streamingText: {
-        color: '#999',
-        fontSize: 12,
+        textAlign: 'center',
+        marginTop: 4,
     },
 });