yaver-feedback-react-native 0.8.0 → 0.8.2

package/dist/FeedbackModal.js

@@ -41,18 +41,14 @@ const capture_1 = require("./capture");
 const upload_1 = require("./upload");
 const AuthOverlay_1 = require("./AuthOverlay");
 const QuickActionIcon_1 = require("./QuickActionIcon");
+const auth_1 = require("./auth");
+const preferences_1 = require("./preferences");
 const FeedbackModal = () => {
     const [visible, setVisible] = (0, react_1.useState)(false);
     const [action, setAction] = (0, react_1.useState)('idle');
     const [error, setError] = (0, react_1.useState)(null);
     const [toast, setToast] = (0, react_1.useState)(null);
     const [progress, setProgress] = (0, react_1.useState)(null);
-    const [isRecordingVideo, setIsRecordingVideo] = (0, react_1.useState)(false);
-    const [isRecordingVoice, setIsRecordingVoice] = (0, react_1.useState)(false);
-    // Cached once on mount — bare-RN apps without expo-av get a clean
-    // hidden button instead of a runtime error.
-    const voiceSupported = (0, react_1.useRef)((0, capture_1.isVoiceCaptureSupported)()).current;
-    const [lastVideo, setLastVideo] = (0, react_1.useState)(null);
     // Tracks whether the user has hidden the QuickActionIcon via its
     // long-press menu. Shake is always available, so the feedback modal
     // is our guaranteed UI for bringing the icon back — we surface a
@@ -66,7 +62,112 @@ const FeedbackModal = () => {
     const [showVibeInput, setShowVibeInput] = (0, react_1.useState)(false);
     const [vibePrompt, setVibePrompt] = (0, react_1.useState)('');
     const [lastVibeTaskId, setLastVibeTaskId] = (0, react_1.useState)(null);
+    const [quickIconColorPreset, setQuickIconColorPreset] = (0, react_1.useState)(null);
+    const [machineCard, setMachineCard] = (0, react_1.useState)({
+        device: null,
+        reachable: null,
+        loading: false,
+        status: 'none',
+        title: 'No machine selected',
+        detail: 'Pick a remote dev machine before using the feedback actions.',
+    });
     const mountedRef = (0, react_1.useRef)(true);
+    const loadSelectedMachine = (0, react_1.useCallback)(async () => {
+        const cfg = YaverFeedback_1.YaverFeedback.getConfig();
+        if (!cfg?.authToken) {
+            if (mountedRef.current) {
+                setMachineCard({
+                    device: null,
+                    reachable: null,
+                    loading: false,
+                    status: 'none',
+                    title: 'Not signed in',
+                    detail: 'Sign in to pick and monitor a remote dev machine.',
+                });
+            }
+            return;
+        }
+        if (!cfg.preferredDeviceId) {
+            if (mountedRef.current) {
+                setMachineCard({
+                    device: null,
+                    reachable: null,
+                    loading: false,
+                    status: 'none',
+                    title: 'No machine selected',
+                    detail: 'Choose which machine this SDK should talk to.',
+                });
+            }
+            return;
+        }
+        if (mountedRef.current) {
+            setMachineCard((prev) => ({ ...prev, loading: true }));
+        }
+        try {
+            const devices = await (0, auth_1.listReachableDevices)(cfg.authToken);
+            const all = [...devices.owned, ...devices.shared];
+            const device = all.find((candidate) => candidate.deviceId === cfg.preferredDeviceId) ?? null;
+            if (!device) {
+                if (mountedRef.current) {
+                    setMachineCard({
+                        device: null,
+                        reachable: null,
+                        loading: false,
+                        status: 'offline',
+                        title: 'Selected machine missing',
+                        detail: 'The saved machine was not returned by the device list. Re-select it.',
+                    });
+                }
+                return;
+            }
+            let reachable = null;
+            const client = YaverFeedback_1.YaverFeedback.getP2PClient();
+            if (device.isOnline && !device.needsAuth && client) {
+                reachable = await client.health();
+            }
+            const hostHint = device.hostEmail ? ` via ${device.hostEmail}` : '';
+            let status = 'live';
+            let detail = `${device.platform}${hostHint}`;
+            if (!device.isOnline) {
+                status = 'offline';
+                detail = 'Machine offline. Start `yaver serve` on the selected machine.';
+            }
+            else if (device.needsAuth) {
+                status = 'attention';
+                detail = 'Machine needs pairing again before feedback actions can run.';
+            }
+            else if (device.runnerDown) {
+                status = 'attention';
+                detail = 'Machine is online but the coding agent is down.';
+            }
+            else if (reachable === false) {
+                status = 'offline';
+                detail = 'Machine selected, but the agent is not responding.';
+            }
+            if (mountedRef.current) {
+                setMachineCard({
+                    device,
+                    reachable,
+                    loading: false,
+                    status,
+                    title: device.name || device.deviceId,
+                    detail,
+                });
+            }
+        }
+        catch (err) {
+            if (mountedRef.current) {
+                setMachineCard({
+                    device: null,
+                    reachable: null,
+                    loading: false,
+                    status: 'offline',
+                    title: 'Machine status unavailable',
+                    detail: err instanceof Error ? err.message : String(err),
+                });
+            }
+        }
+    }, []);
     (0, react_1.useEffect)(() => {
         mountedRef.current = true;
         const sub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startReport', () => {
@@ -74,7 +175,10 @@ const FeedbackModal = () => {
                 setVisible(true);
                 setError(null);
                 setToast(null);
+                setProgress(null);
                 setAction('idle');
+                setShowVibeInput(false);
+                setVibePrompt('');
                 // Re-read the "user hid the quick icon" flag on every open so
                 // the re-enable row reflects the latest preference (the user
                 // might have hidden or shown it between opens).
@@ -84,6 +188,13 @@ const FeedbackModal = () => {
                         setQuickIconHidden(v);
                 })
                     .catch(() => { });
+                YaverFeedback_1.YaverFeedback.getQuickIconColorPreset()
+                    .then((preset) => {
+                    if (mountedRef.current)
+                        setQuickIconColorPreset(preset);
+                })
+                    .catch(() => { });
+                void loadSelectedMachine();
             }
         });
         // Agent streams build / compile progress through the BlackBox
@@ -111,7 +222,15 @@ const FeedbackModal = () => {
             sub.remove();
             statusSub.remove();
         };
-    }, []);
+    }, [loadSelectedMachine]);
+    (0, react_1.useEffect)(() => {
+        if (!visible)
+            return;
+        const interval = setInterval(() => {
+            void loadSelectedMachine();
+        }, 5000);
+        return () => clearInterval(interval);
+    }, [loadSelectedMachine, visible]);
     const closeSoon = (0, react_1.useCallback)((delayMs = 1200) => {
         setTimeout(() => {
             if (mountedRef.current)
@@ -122,7 +241,10 @@ const FeedbackModal = () => {
         setVisible(false);
         setError(null);
         setToast(null);
+        setProgress(null);
         setAction('idle');
+        setShowVibeInput(false);
+        setVibePrompt('');
     }, []);
     // Helper: run a P2P call; on network failure, ask YaverFeedback to
     // re-query Convex for the fresh IP and retry once. Solves the common
@@ -178,51 +300,93 @@ const FeedbackModal = () => {
         setAction('hot-reloading');
         setError(null);
         setProgress(0);
-        setToast('Sending…');
+        setToast('Contacting selected machine…');
         try {
+            await loadSelectedMachine();
+            const selected = await YaverFeedback_1.YaverFeedback.getSelectedRemoteDevice();
+            if (!selected) {
+                YaverFeedback_1.YaverFeedback.showMachinePicker();
+                throw new Error('No machine selected. Pick a machine and try again.');
+            }
+            if (selected.needsAuth) {
+                YaverFeedback_1.YaverFeedback.showMachinePicker();
+                throw new Error('Selected machine needs pairing again.');
+            }
+            if (!selected.isOnline) {
+                throw new Error('Selected machine is offline. Start `yaver serve` on it first.');
+            }
             // Default mode: bundle. Always rebuilds via the agent regardless
             // of Metro state. P2PClient.reloadApp auto-resolves projectName +
             // bundleId from expo-constants / NativeModules so the agent can
             // map this app to its MobileProject scan entry without needing
             // `yaver dev start` to have been run.
+            let ackMessage = 'Reload request acknowledged.';
             await runWithReconnect(async (client) => {
-                await client.reloadApp('bundle');
+                const ack = await client.reloadApp('bundle');
+                ackMessage = ack.message;
+                setToast(ack.message);
+                setProgress(0.2);
             });
             // We don't auto-close here — the agent's BlackBox status pings
             // will keep the modal updated, and the on-device YaverBundleLoader
             // will reload the JS once the fresh bundle arrives. Modal stays
             // up for a beat so the user sees the final progress state.
+            setToast(ackMessage);
             closeSoon(2500);
         }
         catch (err) {
-            setError(err instanceof Error ? err.message : String(err));
+            const message = err instanceof Error ? err.message : String(err);
+            setError(message);
+            setToast(message.toLowerCase().indexOf('session expired') >= 0
+                ? 'Session expired. Sign in again.'
+                : 'Hot reload did not start.');
+            await loadSelectedMachine();
             setProgress(null);
         }
         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 () => {
+    }, [closeSoon, loadSelectedMachine, runWithReconnect]);
+    const uploadBundleWithOptionalFix = (0, react_1.useCallback)(async (bundle, fixOnUpload, successToast, failureToast) => {
         const client = YaverFeedback_1.YaverFeedback.getP2PClient();
         const config = YaverFeedback_1.YaverFeedback.getConfig();
         if (!client || !config?.agentUrl) {
             setError('Not connected to the agent yet.');
             return;
         }
+        try {
+            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 && fixOnUpload) {
+                try {
+                    await client.triggerFix(reportId);
+                    setToast(successToast);
+                }
+                catch (err) {
+                    setToast(failureToast ?? 'Report uploaded — fix trigger failed');
+                    setError(err instanceof Error ? err.message : String(err));
+                }
+            }
+            else {
+                setToast(successToast);
+            }
+            closeSoon(1400);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+    }, [closeSoon]);
+    const handleScreenshotAndFix = (0, react_1.useCallback)(async () => {
         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;
+        let path;
         try {
             path = await (0, capture_1.captureScreenshot)();
         }
@@ -232,7 +396,6 @@ const FeedbackModal = () => {
             setAction('idle');
             return;
         }
-        // Step 2: Re-show the modal for progress + ack.
         setVisible(true);
         await new Promise((resolve) => setTimeout(resolve, 150));
         try {
@@ -256,35 +419,18 @@ const FeedbackModal = () => {
                 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) {
-                    setToast('Report uploaded — fix trigger failed');
-                    setError(err instanceof Error ? err.message : String(err));
-                }
-            }
-            else {
-                setToast('Report uploaded');
-            }
-            closeSoon(1400);
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : String(err));
+            await uploadBundleWithOptionalFix(bundle, true, 'Fix task started');
         }
         finally {
             if (mountedRef.current)
                 setAction('idle');
         }
-    }, [closeSoon]);
+    }, [uploadBundleWithOptionalFix]);
+    /*
+    const handleFileUpload = useCallback(async () => {
+      ...
+    }, [uploadBundleWithOptionalFix]);
+    */
     // ─── 3. Vibing ─────────────────────────────────────────────────────
     // First tap expands the input; second submit fires the actual
     // /vibing/execute. Mirrors the Yaver mobile app's Vibing tab —
@@ -337,184 +483,23 @@ const FeedbackModal = () => {
                 setAction('idle');
         }
     }, [vibePrompt]);
-    // ─── 4. Toggle screen recording ────────────────────────────────────
-    const handleToggleRecording = (0, react_1.useCallback)(async () => {
-        setError(null);
-        if (isRecordingVideo) {
-            try {
-                const result = await (0, capture_1.stopVideoRecording)();
-                if (mountedRef.current) {
-                    setIsRecordingVideo(false);
-                    setLastVideo(result);
-                    setToast(`Recording stopped — ${Math.round(result.duration)}s`);
-                }
-            }
-            catch (err) {
-                setIsRecordingVideo(false);
-                setError(err instanceof Error ? err.message : String(err));
-            }
-        }
-        else {
-            try {
-                await (0, capture_1.startVideoRecording)();
-                if (mountedRef.current) {
-                    setIsRecordingVideo(true);
-                    setToast('Recording…');
-                    setLastVideo(null);
-                }
-            }
-            catch (err) {
-                setError(err instanceof Error ? err.message : String(err));
-            }
-        }
-    }, [isRecordingVideo]);
-    // ─── Voice note: record → transcribe → send as feedback ───────────
-    // Tap once to start; tap again to stop. On stop: upload the audio
-    // to the agent's /voice/transcribe (which routes through whichever
-    // STT provider is configured — Whisper / Deepgram / OpenAI / etc.),
-    // then file the transcript as a bug report. The audio file itself
-    // is also attached to the feedback bundle so the agent can re-play
-    // it if the transcript is wrong.
-    const handleToggleVoice = (0, react_1.useCallback)(async () => {
-        setError(null);
-        if (!isRecordingVoice) {
-            try {
-                await (0, capture_1.startAudioRecording)();
-                if (mountedRef.current) {
-                    setIsRecordingVoice(true);
-                    setAction('recording-voice');
-                    setToast('Recording voice note…');
-                }
-            }
-            catch (err) {
-                setIsRecordingVoice(false);
-                setAction('idle');
-                setError(err instanceof Error ? err.message : String(err));
-            }
-            return;
-        }
-        // Stopping → transcribe → send.
-        try {
-            const audio = await (0, capture_1.stopAudioRecording)();
-            setIsRecordingVoice(false);
-            if (!audio) {
-                setAction('idle');
-                return;
-            }
-            setAction('transcribing-voice');
-            setToast('Transcribing…');
-            const config = YaverFeedback_1.YaverFeedback.getConfig();
-            if (!config?.agentUrl) {
-                setError('Not connected to the agent yet.');
-                setAction('idle');
-                return;
-            }
-            let transcript = '';
-            try {
-                const client = YaverFeedback_1.YaverFeedback.getP2PClient();
-                if (client) {
-                    const res = await client.transcribeVoice(audio.path);
-                    transcript = res.text ?? '';
-                }
-            }
-            catch {
-                // Transcription can fail (no STT provider configured on the
-                // agent, network blip, etc.). Don't block the flow — ship
-                // the raw audio file with a "[no transcript]" note so the
-                // agent + human reviewer can still play it back.
-            }
-            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 bundle = {
-                metadata: {
-                    timestamp: new Date().toISOString(),
-                    device: deviceInfo,
-                    app: {},
-                    userNote: transcript.length > 0
-                        ? `[Voice note] ${transcript}`
-                        : `[Voice note · ${Math.round(audio.duration)}s — transcription unavailable]`,
-                },
-                screenshots: [],
-                audio: audio.path,
-                errors: YaverFeedback_1.YaverFeedback.getCapturedErrors().length
-                    ? YaverFeedback_1.YaverFeedback.getCapturedErrors()
-                    : undefined,
-            };
-            await (0, upload_1.uploadFeedback)(config.agentUrl, config.authToken ?? '', bundle);
-            setToast(transcript ? `Sent: "${transcript.slice(0, 60)}${transcript.length > 60 ? '…' : ''}"` : 'Voice note sent');
-            closeSoon(1800);
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : String(err));
-        }
-        finally {
-            if (mountedRef.current)
-                setAction('idle');
-        }
-    }, [isRecordingVoice, closeSoon]);
-    // ─── 5. Send the last recorded video ───────────────────────────────
-    const handleSendVideo = (0, react_1.useCallback)(async () => {
-        const config = YaverFeedback_1.YaverFeedback.getConfig();
-        if (!config?.agentUrl) {
-            setError('Not connected to the agent yet.');
-            return;
-        }
-        if (!lastVideo) {
-            setError('No video recorded yet.');
-            return;
-        }
-        setAction('sending-video');
-        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 bundle = {
-                metadata: {
-                    timestamp: new Date().toISOString(),
-                    device: deviceInfo,
-                    app: {},
-                    userNote: '[Screen recording]',
-                },
-                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);
-            setToast('Video sent');
-            setLastVideo(null);
-            closeSoon(1200);
-        }
-        catch (err) {
-            setError(err instanceof Error ? err.message : String(err));
-        }
-        finally {
-            if (mountedRef.current)
-                setAction('idle');
-        }
-    }, [lastVideo, closeSoon]);
+    /*
+    const handleScreenRecording = useCallback(async () => {
+      ...
+    }, [closeSoon, isRecordingVideo, lastVideo]);
+    */
     const busy = action !== 'idle';
     return (<>
       <AuthOverlay_1.AuthOverlay />
       <QuickActionIcon_1.QuickActionIcon />
       {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.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.kbAvoider} pointerEvents="box-none">
+            <react_native_1.Pressable style={styles.modal} onPress={(e) => {
+                e.stopPropagation();
+                react_native_1.Keyboard.dismiss();
+            }}>
+              <react_native_1.ScrollView style={styles.scroll} contentContainerStyle={styles.scrollContent} keyboardShouldPersistTaps="handled">
               <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">
@@ -522,14 +507,92 @@ const FeedbackModal = () => {
                 </react_native_1.Pressable>
               </react_native_1.View>
 
+              <react_native_1.Pressable onPress={() => {
+                if (!YaverFeedback_1.YaverFeedback.isAuthed()) {
+                    YaverFeedback_1.YaverFeedback.showLogin();
+                    return;
+                }
+                YaverFeedback_1.YaverFeedback.showMachinePicker();
+            }} style={[
+                styles.machineCard,
+                machineCard.status === 'live' && styles.machineCardLive,
+                machineCard.status === 'attention' && styles.machineCardAttention,
+                machineCard.status === 'offline' && styles.machineCardOffline,
+            ]}>
+                <react_native_1.View style={styles.machineHeader}>
+                  <react_native_1.View style={styles.machineTitleWrap}>
+                    <react_native_1.View style={[
+                styles.machineDot,
+                machineCard.status === 'live' && styles.machineDotLive,
+                machineCard.status === 'attention' && styles.machineDotAttention,
+                machineCard.status === 'offline' && styles.machineDotOffline,
+            ]}/>
+                    <react_native_1.Text style={styles.machineLabel}>Selected Machine</react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.Text style={styles.machineAction}>
+                    {machineCard.loading ? 'Refreshing…' : 'Change'}
+                  </react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Text style={styles.machineName}>
+                  {machineCard.loading ? 'Checking machine…' : machineCard.title}
+                </react_native_1.Text>
+                <react_native_1.Text style={styles.machineMeta}>{machineCard.detail}</react_native_1.Text>
+              </react_native_1.Pressable>
+
+              {quickIconHidden && (<react_native_1.View style={styles.quickIconNote}>
+                  <react_native_1.Text style={styles.quickIconNoteText}>
+                    Quick access icon is hidden. Shake the phone if you want feedback back fast.
+                  </react_native_1.Text>
+                  <react_native_1.Pressable onPress={() => {
+                    void YaverFeedback_1.YaverFeedback.setQuickIconVisible(true);
+                    setQuickIconHidden(false);
+                }} style={({ pressed }) => [
+                    styles.quickIconToggle,
+                    pressed && styles.buttonPressed,
+                ]}>
+                    <react_native_1.Text style={styles.quickIconToggleText}>Show quick icon again</react_native_1.Text>
+                  </react_native_1.Pressable>
+                </react_native_1.View>)}
+
+              <react_native_1.View style={styles.iconSelector}>
+                <react_native_1.Text style={styles.iconSelectorTitle}>Quick Icon Color</react_native_1.Text>
+                <react_native_1.Text style={styles.iconSelectorText}>
+                  Pick a runtime color so the floating y icon does not overlap with your app UI.
+                </react_native_1.Text>
+                <react_native_1.View style={styles.iconSelectorGrid}>
+                  {Object.entries(preferences_1.QUICK_ICON_COLOR_PRESETS).map(([preset, colors]) => {
+                const selected = quickIconColorPreset === preset;
+                return (<react_native_1.Pressable key={preset} onPress={() => {
+                        setQuickIconColorPreset(preset);
+                        void YaverFeedback_1.YaverFeedback.setQuickIconColorPreset(preset);
+                    }} style={[
+                        styles.iconOption,
+                        selected && styles.iconOptionSelected,
+                    ]}>
+                        <react_native_1.View style={[
+                        styles.iconOptionCircle,
+                        {
+                            backgroundColor: colors.backgroundColor,
+                            borderColor: colors.borderColor,
+                            shadowColor: colors.shadowColor,
+                        },
+                    ]}>
+                          <react_native_1.Text style={[
+                        styles.iconOptionLabel,
+                        { color: colors.foregroundColor },
+                    ]}>
+                            y
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                        <react_native_1.Text style={styles.iconOptionText}>{colors.label}</react_native_1.Text>
+                      </react_native_1.Pressable>);
+            })}
+                </react_native_1.View>
+              </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'}/>
 
-              {/* 2. Screenshot + Fix — for bug fixes */}
-              <ActionRow label={action === 'capturing'
-                ? 'Capturing…'
-                : 'Screenshot & Fix'} tint="#22c55e" onPress={handleScreenshotAndFix} disabled={busy} busy={action === 'capturing'}/>
-
               {/* 3. Vibing — expands to an input box on first tap
                  so the user says WHAT they want to vibe on, just
                  like the Yaver mobile app's Vibing tab. Second
@@ -555,24 +618,8 @@ const FeedbackModal = () => {
                   Last vibing task: {lastVibeTaskId.slice(0, 12)}…
                 </react_native_1.Text>)}
 
-              {/* Voice note — only rendered when expo-av is installed.
-                Tap to start, tap again to stop → transcribes via
-                the agent and files as a feedback report. */}
-              {voiceSupported && (<ActionRow label={action === 'transcribing-voice'
-                    ? 'Transcribing…'
-                    : isRecordingVoice
-                        ? 'Stop & Send Voice'
-                        : 'Voice Note'} tint={isRecordingVoice ? '#ef4444' : '#f472b6'} onPress={handleToggleVoice} disabled={busy && action !== 'recording-voice' && action !== 'idle'} busy={action === 'transcribing-voice'}/>)}
-
-              {/* 4. Start/Stop Recording */}
-              <ActionRow label={isRecordingVideo ? 'Stop Recording' : 'Start Recording'} tint={isRecordingVideo ? '#ef4444' : '#60a5fa'} onPress={handleToggleRecording} disabled={busy && action !== 'idle' && !isRecordingVideo}/>
-
-              {/* 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'}/>
+              {/* Screenshot & Fix */}
+              <ActionRow label={action === 'capturing' ? 'Working…' : 'Screenshot & Fix'} tint="#22c55e" onPress={handleScreenshotAndFix} disabled={busy} busy={action === 'capturing'}/>
 
               {progress !== null && (<react_native_1.View style={styles.progressTrack}>
                   <react_native_1.View style={[
@@ -583,27 +630,15 @@ const FeedbackModal = () => {
               {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>}
 
-              {/* Quick-icon toggle. The user's three ways to control
-                the floating icon are: (1) long-press the icon →
-                Hide, (2) tap this row to toggle it on/off, (3) shake
-                → this modal → tap this row. Shake is the unkillable
-                back-door when the icon is hidden and the dev hasn't
-                exposed their own settings UI. */}
-              <react_native_1.Pressable onPress={async () => {
-                const next = !quickIconHidden;
-                setQuickIconHidden(next);
-                await YaverFeedback_1.YaverFeedback.setQuickIconVisible(!next);
-            }} style={({ pressed }) => [
-                styles.quickIconToggle,
-                pressed && { opacity: 0.7 },
-            ]} accessibilityRole="button" accessibilityLabel={quickIconHidden ? 'Show quick icon' : 'Hide quick icon'}>
-                <react_native_1.Text style={styles.quickIconToggleText}>
-                  {quickIconHidden
-                ? '◯  Show quick-access icon'
-                : '●  Hide quick-access icon'}
-                </react_native_1.Text>
+              <react_native_1.Pressable onPress={handleClose} style={({ pressed }) => [
+                styles.cancelBtn,
+                pressed && styles.buttonPressed,
+            ]} accessibilityRole="button" accessibilityLabel="Cancel">
+                <react_native_1.Text style={styles.cancelBtnText}>Cancel</react_native_1.Text>
               </react_native_1.Pressable>
+              </react_native_1.ScrollView>
             </react_native_1.Pressable>
+            </react_native_1.KeyboardAvoidingView>
           </react_native_1.Pressable>
         </react_native_1.Modal>)}
     </>);
@@ -676,6 +711,10 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: 'rgba(0,0,0,0.55)',
         justifyContent: 'flex-end',
     },
+    kbAvoider: {
+        width: '100%',
+        justifyContent: 'flex-end',
+    },
     modal: {
         backgroundColor: '#141422',
         borderTopLeftRadius: 22,
@@ -683,6 +722,14 @@ const styles = react_native_1.StyleSheet.create({
         padding: 22,
         paddingBottom: 36,
         gap: 12,
+        maxHeight: '92%',
+    },
+    scroll: {
+        maxHeight: '100%',
+    },
+    scrollContent: {
+        gap: 12,
+        paddingBottom: 8,
     },
     header: {
         flexDirection: 'row',
@@ -723,6 +770,77 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 15,
         fontWeight: '700',
     },
+    machineCard: {
+        borderRadius: 14,
+        borderWidth: 1,
+        padding: 14,
+        backgroundColor: 'rgba(255,255,255,0.04)',
+        borderColor: 'rgba(255,255,255,0.12)',
+    },
+    machineCardLive: {
+        backgroundColor: 'rgba(34,197,94,0.10)',
+        borderColor: 'rgba(34,197,94,0.35)',
+    },
+    machineCardAttention: {
+        backgroundColor: 'rgba(245,158,11,0.10)',
+        borderColor: 'rgba(245,158,11,0.35)',
+    },
+    machineCardOffline: {
+        backgroundColor: 'rgba(239,68,68,0.10)',
+        borderColor: 'rgba(239,68,68,0.35)',
+    },
+    machineHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        marginBottom: 6,
+    },
+    machineTitleWrap: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+    },
+    machineDot: {
+        width: 10,
+        height: 10,
+        borderRadius: 5,
+        backgroundColor: '#6b7280',
+    },
+    machineDotLive: {
+        backgroundColor: '#22c55e',
+    },
+    machineDotAttention: {
+        backgroundColor: '#f59e0b',
+    },
+    machineDotOffline: {
+        backgroundColor: '#ef4444',
+    },
+    machineLabel: {
+        color: '#cbd5e1',
+        fontSize: 12,
+        fontWeight: '700',
+        textTransform: 'uppercase',
+        letterSpacing: 0.8,
+    },
+    machineAction: {
+        color: '#a5b4fc',
+        fontSize: 12,
+        fontWeight: '700',
+    },
+    machineName: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '700',
+    },
+    machineMeta: {
+        color: '#cbd5e1',
+        fontSize: 12,
+        marginTop: 4,
+        lineHeight: 17,
+    },
+    captureChoices: {
+        gap: 10,
+    },
     progressTrack: {
         height: 6,
         borderRadius: 3,
@@ -748,14 +866,106 @@ const styles = react_native_1.StyleSheet.create({
         marginTop: 4,
     },
     quickIconToggle: {
-        marginTop: 4,
-        alignSelf: 'center',
+        marginTop: 6,
+        alignSelf: 'flex-start',
         paddingVertical: 6,
-        paddingHorizontal: 12,
+        paddingHorizontal: 10,
+        borderRadius: 10,
+        backgroundColor: 'rgba(255,255,255,0.05)',
     },
     quickIconToggleText: {
-        color: '#9ca3af',
+        color: '#cbd5e1',
+        fontSize: 12,
+        fontWeight: '700',
+    },
+    quickIconNote: {
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: 'rgba(251,191,36,0.28)',
+        backgroundColor: 'rgba(251,191,36,0.08)',
+        padding: 12,
+    },
+    quickIconNoteText: {
+        color: '#fde68a',
+        fontSize: 12,
+        lineHeight: 17,
+    },
+    iconSelector: {
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.09)',
+        backgroundColor: 'rgba(255,255,255,0.03)',
+        padding: 12,
+        gap: 10,
+    },
+    iconSelectorTitle: {
+        color: '#f8fafc',
+        fontSize: 13,
+        fontWeight: '700',
+    },
+    iconSelectorText: {
+        color: '#cbd5e1',
         fontSize: 12,
-        fontWeight: '500',
+        lineHeight: 17,
+    },
+    iconSelectorGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        gap: 10,
+    },
+    iconOption: {
+        width: '31%',
+        minWidth: 84,
+        borderRadius: 12,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.08)',
+        backgroundColor: 'rgba(255,255,255,0.02)',
+        paddingVertical: 10,
+        paddingHorizontal: 8,
+        alignItems: 'center',
+        gap: 8,
+    },
+    iconOptionSelected: {
+        borderColor: 'rgba(129,140,248,0.72)',
+        backgroundColor: 'rgba(129,140,248,0.12)',
+    },
+    iconOptionCircle: {
+        width: 38,
+        height: 38,
+        borderRadius: 19,
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 2,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.28,
+        shadowRadius: 5,
+        elevation: 5,
+    },
+    iconOptionLabel: {
+        fontSize: 18,
+        fontWeight: '700',
+    },
+    iconOptionText: {
+        color: '#e2e8f0',
+        fontSize: 11,
+        fontWeight: '600',
+    },
+    cancelBtn: {
+        marginTop: 4,
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.1)',
+        paddingVertical: 15,
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: 'rgba(255,255,255,0.04)',
+    },
+    cancelBtnText: {
+        color: '#e5e7eb',
+        fontSize: 15,
+        fontWeight: '700',
+    },
+    buttonPressed: {
+        opacity: 0.7,
     },
 });