yaver-feedback-react-native 0.5.3 → 0.5.5

package/dist/FeedbackModal.js

@@ -0,0 +1,623 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+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 [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 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]);
+            }
+        });
+        return () => {
+            mountedRef.current = false;
+            sub.remove();
+            commentarySub.remove();
+        };
+    }, []);
+    const handleScreenshot = (0, react_1.useCallback)(async () => {
+        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);
+                        }
+                    }
+                }
+            }
+        }
+        catch (err) {
+            if (mountedRef.current) {
+                setError(String(err));
+            }
+        }
+    }, [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));
+                }
+            }
+        }
+        else {
+            try {
+                await (0, capture_1.startAudioRecording)();
+                if (mountedRef.current) {
+                    setIsRecordingAudio(true);
+                }
+            }
+            catch (err) {
+                if (mountedRef.current) {
+                    setError(String(err));
+                }
+            }
+        }
+    }, [isRecordingAudio, mode]);
+    const handleVoiceCommand = (0, react_1.useCallback)(async () => {
+        if (isVoiceCommand) {
+            // Stop voice command and send as a task
+            try {
+                const result = await (0, capture_1.stopAudioRecording)();
+                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.');
+                            }
+                        }
+                    }
+                }
+            }
+            catch (err) {
+                if (mountedRef.current) {
+                    setIsVoiceCommand(false);
+                    setError(String(err));
+                }
+            }
+        }
+        else {
+            try {
+                await (0, capture_1.startAudioRecording)();
+                if (mountedRef.current) {
+                    setIsVoiceCommand(true);
+                }
+            }
+            catch (err) {
+                if (mountedRef.current) {
+                    setError(String(err));
+                }
+            }
+        }
+    }, [isVoiceCommand]);
+    const handleReload = (0, react_1.useCallback)(async () => {
+        const config = YaverFeedback_1.YaverFeedback.getConfig();
+        if (!config?.agentUrl)
+            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)
+            return;
+        setIsSending(true);
+        setError(null);
+        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 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: {},
+                },
+                screenshots,
+                audio: audioEvent?.path,
+                errors: capturedErrors.length > 0 ? capturedErrors : 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);
+            }
+        }
+        catch (err) {
+            if (mountedRef.current) {
+                setError(String(err));
+            }
+        }
+        finally {
+            if (mountedRef.current) {
+                setIsSending(false);
+            }
+        }
+    }, [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.
+    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>
+
+            <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>
+
+          {/* 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>
+
+            <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>
+
+          {/* 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>)}
+
+          {/* Error display */}
+          {error && <react_native_1.Text style={styles.error}>{error}</react_native_1.Text>}
+
+          {/* 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>)}
+    </>);
+};
+exports.FeedbackModal = FeedbackModal;
+const styles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        justifyContent: 'flex-end',
+    },
+    modal: {
+        backgroundColor: '#1a1a2e',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        padding: 24,
+        paddingBottom: 40,
+        maxHeight: '90%',
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: '700',
+        color: '#fff',
+        marginBottom: 12,
+    },
+    modeSelector: {
+        flexDirection: 'row',
+        gap: 8,
+        marginBottom: 16,
+    },
+    modeButton: {
+        flex: 1,
+        paddingVertical: 8,
+        borderRadius: 8,
+        alignItems: '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,
+    },
+    timelineItem: {
+        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)',
+        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)',
+    },
+    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',
+    },
+    voiceCommandText: {
+        color: '#22c55e',
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    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,
+    },
+});

package/dist/FixReport.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { TestSession } from './types';
+export interface FixReportProps {
+    /** Test session data with fixes list */
+    session: TestSession | null;
+    /** Whether the modal is visible */
+    visible: boolean;
+    /** Called when the user closes the report */
+    onClose: () => void;
+    /** Accent color (matches FloatingButton) */
+    color?: string;
+}
+/**
+ * Fix Report viewer — shows a markdown-style list of all fixes
+ * applied by the AI agent during a test session.
+ *
+ * Each fix shows the file, description, and error that triggered it.
+ * Tap a fix to expand and see the diff/code snippet.
+ *
+ * Fixes are NOT committed — they're staged changes the developer
+ * can review, accept, or revert.
+ */
+export declare const FixReport: React.FC<FixReportProps>;