yaver-feedback-react-native 0.8.1 → 0.8.2

package/dist/FeedbackModal.js

@@ -41,14 +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 [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
@@ -61,9 +61,113 @@ const FeedbackModal = () => {
     // the wrong project because the matcher grepped the prompt itself).
     const [showVibeInput, setShowVibeInput] = (0, react_1.useState)(false);
     const [vibePrompt, setVibePrompt] = (0, react_1.useState)('');
-    const [showCaptureChoices, setShowCaptureChoices] = (0, react_1.useState)(false);
     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', () => {
@@ -71,8 +175,10 @@ const FeedbackModal = () => {
                 setVisible(true);
                 setError(null);
                 setToast(null);
+                setProgress(null);
                 setAction('idle');
-                setShowCaptureChoices(false);
+                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).
@@ -82,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
@@ -109,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)
@@ -120,8 +241,10 @@ const FeedbackModal = () => {
         setVisible(false);
         setError(null);
         setToast(null);
+        setProgress(null);
         setAction('idle');
-        setShowCaptureChoices(false);
+        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
@@ -177,31 +300,54 @@ 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]);
+    }, [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();
@@ -235,14 +381,9 @@ const FeedbackModal = () => {
             setError(err instanceof Error ? err.message : String(err));
         }
     }, [closeSoon]);
-    // ─── 3. Screenshot / Upload ───────────────────────────────────────
-    const handleCaptureChoiceToggle = (0, react_1.useCallback)(() => {
-        setShowCaptureChoices((v) => !v);
-    }, []);
     const handleScreenshotAndFix = (0, react_1.useCallback)(async () => {
         setAction('capturing');
         setError(null);
-        setShowCaptureChoices(false);
         setVisible(false);
         await new Promise((resolve) => setTimeout(resolve, 350));
         let path;
@@ -285,50 +426,11 @@ const FeedbackModal = () => {
                 setAction('idle');
         }
     }, [uploadBundleWithOptionalFix]);
-    const handleFileUpload = (0, react_1.useCallback)(async () => {
-        setAction('capturing');
-        setError(null);
-        setShowCaptureChoices(false);
-        try {
-            const picked = await (0, capture_1.pickFeedbackFile)();
-            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: `[Uploaded file] ${picked.name}`,
-                },
-                screenshots: picked.kind === 'image' ? [picked.path] : [],
-                video: picked.kind === 'video' ? picked.path : undefined,
-                audio: picked.kind === 'audio' ? picked.path : undefined,
-                errors: capturedErrors.length > 0 ? capturedErrors : undefined,
-            };
-            if (picked.kind === 'unknown') {
-                throw new Error('Pick an image, video, or audio file.');
-            }
-            await uploadBundleWithOptionalFix(bundle, picked.kind === 'image', picked.kind === 'image' ? 'Fix task started' : 'File uploaded');
-        }
-        catch (err) {
-            const message = err instanceof Error ? err.message : String(err);
-            if (message !== 'File selection canceled.') {
-                setError(message);
-            }
-        }
-        finally {
-            if (mountedRef.current)
-                setAction('idle');
-        }
+    /*
+    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 —
@@ -381,127 +483,23 @@ const FeedbackModal = () => {
                 setAction('idle');
         }
     }, [vibePrompt]);
-    // ─── 4. Screen recording ───────────────────────────────────────────
-    const handleScreenRecording = (0, react_1.useCallback)(async () => {
-        setError(null);
-        if (!isRecordingVideo && lastVideo) {
-            const config = YaverFeedback_1.YaverFeedback.getConfig();
-            if (!config?.agentUrl) {
-                setError('Not connected to the agent yet.');
-                return;
-            }
-            setAction('uploading-video');
-            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);
-                if (mountedRef.current) {
-                    setToast(`Recording uploaded — ${Math.round(lastVideo.duration)}s`);
-                    setLastVideo(null);
-                }
-                closeSoon(1200);
-            }
-            catch (err) {
-                setError(err instanceof Error ? err.message : String(err));
-            }
-            finally {
-                if (mountedRef.current)
-                    setAction('idle');
-            }
-            return;
-        }
-        if (isRecordingVideo) {
-            try {
-                const result = await (0, capture_1.stopVideoRecording)();
-                if (mountedRef.current) {
-                    setIsRecordingVideo(false);
-                    setLastVideo(result);
-                    setAction('uploading-video');
-                    setToast('Uploading recording…');
-                }
-                const config = YaverFeedback_1.YaverFeedback.getConfig();
-                if (!config?.agentUrl) {
-                    throw new Error('Not connected to the agent yet.');
-                }
-                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: result.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) {
-                    setToast(`Recording uploaded — ${Math.round(result.duration)}s`);
-                    setLastVideo(null);
-                }
-                closeSoon(1200);
-            }
-            catch (err) {
-                setIsRecordingVideo(false);
-                setError(err instanceof Error ? err.message : String(err));
-            }
-            finally {
-                if (mountedRef.current)
-                    setAction('idle');
-            }
-        }
-        else {
-            try {
-                await (0, capture_1.startVideoRecording)();
-                if (mountedRef.current) {
-                    setIsRecordingVideo(true);
-                    setToast('Recording… tap again to stop and upload');
-                    setLastVideo(null);
-                }
-            }
-            catch (err) {
-                setError(err instanceof Error ? err.message : String(err));
-            }
-        }
+    /*
+    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">
@@ -509,6 +507,89 @@ 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'}/>
 
@@ -537,22 +618,8 @@ const FeedbackModal = () => {
                   Last vibing task: {lastVibeTaskId.slice(0, 12)}…
                 </react_native_1.Text>)}
 
-              {/* Screenshot / Upload */}
-              {!showCaptureChoices ? (<ActionRow label={action === 'capturing'
-                    ? 'Working…'
-                    : 'Screenshot / Upload'} tint="#22c55e" onPress={handleCaptureChoiceToggle} disabled={busy} busy={action === 'capturing'}/>) : (<react_native_1.View style={styles.captureChoices}>
-                  <ActionRow label="Take Screenshot" tint="#22c55e" onPress={handleScreenshotAndFix} disabled={busy}/>
-                  <ActionRow label="Upload File" tint="#34d399" onPress={handleFileUpload} disabled={busy}/>
-                </react_native_1.View>)}
-
-              {/* 4. Screen recording */}
-              <ActionRow label={action === 'uploading-video'
-                ? 'Uploading…'
-                : isRecordingVideo
-                    ? 'Stop & Upload Recording'
-                    : lastVideo
-                        ? `Retry Upload Recording · ${Math.round(lastVideo.duration)}s`
-                        : 'Screen Recording'} tint={isRecordingVideo ? '#ef4444' : '#60a5fa'} onPress={handleScreenRecording} disabled={busy && action !== 'uploading-video' && !isRecordingVideo} busy={action === 'uploading-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={[
@@ -563,34 +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>
-
               <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>)}
     </>);
@@ -663,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,
@@ -670,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',
@@ -710,6 +770,74 @@ 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,
     },
@@ -738,15 +866,89 @@ 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: '500',
+        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,
+        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,