yaver-feedback-react-native 0.8.0 → 0.8.2

package/src/FeedbackModal.tsx

@@ -2,9 +2,12 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import {
   ActivityIndicator,
   DeviceEventEmitter,
+  Keyboard,
+  KeyboardAvoidingView,
   Modal,
   Platform,
   Pressable,
+  ScrollView,
   StyleSheet,
   Text,
   TextInput,
@@ -13,47 +16,50 @@ import {
 import { YaverFeedback } from './YaverFeedback';
 import {
   captureScreenshot,
-  startVideoRecording,
-  stopVideoRecording,
-  startAudioRecording,
-  stopAudioRecording,
-  isVoiceCaptureSupported,
+  // Launch scope for the feedback test SDK is intentionally smaller for now.
+  // Keep the dormant file-upload and screen-recording helpers nearby, but
+  // comment them out until we bring them back with stronger test coverage.
+  // pickFeedbackFile,
+  // startVideoRecording,
+  // stopVideoRecording,
 } from './capture';
 import { uploadFeedback } from './upload';
 import { DeviceInfo, FeedbackBundle } from './types';
 import { AuthOverlay } from './AuthOverlay';
 import { QuickActionIcon } from './QuickActionIcon';
+import { listReachableDevices, RemoteDevice } from './auth';
+import {
+  QUICK_ICON_COLOR_PRESETS,
+  QuickIconColorPreset,
+} from './preferences';
 
 /**
- * Simplified feedback modal — 5 actions:
+ * Simplified feedback modal — launch scope is 3 actions:
  *
  *  1. Hot Reload               — instant JS reload (most common use case)
- *  2. Screenshot + Fix         — capture the underlying app (modal hidden
- *                                during capture), attach errors, trigger
- *                                a fix task on the agent
- *  3. Vibing                   — open a vibing session on the agent
- *  4. Start / Stop Recording   — screen-recording toggle
- *  5. Send Video               — submit the last recorded video
+ *  2. Vibing                   — open a vibing session on the agent
+ *  3. Screenshot & Fix         — capture the underlying app (modal hidden
+ *                                during capture), upload it, and trigger
+ *                                the fix loop
  *
- * The header has an explicit X close icon on the right.
- * Live / Narrated / Batch modes, voice notes, and the streaming indicator
- * were removed in 0.7.0 — those flows never worked end-to-end against
- * the Go agent (see MISSINGS_FEEDBACK_SDK.md).
+ * The footer also has an explicit Cancel button so the icon tap path
+ * feels like a standard action sheet rather than a hidden modal.
  */
 
-interface LastVideo {
-  path: string;
-  duration: number;
-}
-
 type ActionState =
   | 'idle'
   | 'hot-reloading'
   | 'capturing'
-  | 'vibing'
-  | 'sending-video'
-  | 'recording-voice'
-  | 'transcribing-voice';
+  | 'vibing';
+
+type MachineCardState = {
+  device: RemoteDevice | null;
+  reachable: boolean | null;
+  loading: boolean;
+  status: 'none' | 'live' | 'attention' | 'offline';
+  title: string;
+  detail: string;
+};
 
 export const FeedbackModal: React.FC = () => {
   const [visible, setVisible] = useState(false);
@@ -61,12 +67,6 @@ export const FeedbackModal: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
   const [toast, setToast] = useState<string | null>(null);
   const [progress, setProgress] = useState<number | null>(null);
-  const [isRecordingVideo, setIsRecordingVideo] = useState(false);
-  const [isRecordingVoice, setIsRecordingVoice] = useState(false);
-  // Cached once on mount — bare-RN apps without expo-av get a clean
-  // hidden button instead of a runtime error.
-  const voiceSupported = useRef<boolean>(isVoiceCaptureSupported()).current;
-  const [lastVideo, setLastVideo] = useState<LastVideo | null>(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
@@ -80,8 +80,119 @@ export const FeedbackModal: React.FC = () => {
   const [showVibeInput, setShowVibeInput] = useState(false);
   const [vibePrompt, setVibePrompt] = useState('');
   const [lastVibeTaskId, setLastVibeTaskId] = useState<string | null>(null);
+  const [quickIconColorPreset, setQuickIconColorPreset] =
+    useState<QuickIconColorPreset | null>(null);
+  const [machineCard, setMachineCard] = useState<MachineCardState>({
+    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 = useRef(true);
 
+  const loadSelectedMachine = useCallback(async () => {
+    const cfg = 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 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: boolean | null = null;
+      const client = YaverFeedback.getP2PClient();
+      if (device.isOnline && !device.needsAuth && client) {
+        reachable = await client.health();
+      }
+
+      const hostHint = device.hostEmail ? ` via ${device.hostEmail}` : '';
+      let status: MachineCardState['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),
+        });
+      }
+    }
+  }, []);
+
   useEffect(() => {
     mountedRef.current = true;
     const sub = DeviceEventEmitter.addListener('yaverFeedback:startReport', () => {
@@ -89,7 +200,10 @@ export const FeedbackModal: React.FC = () => {
         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).
@@ -98,6 +212,12 @@ export const FeedbackModal: React.FC = () => {
             if (mountedRef.current) setQuickIconHidden(v);
           })
           .catch(() => {});
+        YaverFeedback.getQuickIconColorPreset()
+          .then((preset) => {
+            if (mountedRef.current) setQuickIconColorPreset(preset);
+          })
+          .catch(() => {});
+        void loadSelectedMachine();
       }
     });
     // Agent streams build / compile progress through the BlackBox
@@ -126,7 +246,15 @@ export const FeedbackModal: React.FC = () => {
       sub.remove();
       statusSub.remove();
     };
-  }, []);
+  }, [loadSelectedMachine]);
+
+  useEffect(() => {
+    if (!visible) return;
+    const interval = setInterval(() => {
+      void loadSelectedMachine();
+    }, 5000);
+    return () => clearInterval(interval);
+  }, [loadSelectedMachine, visible]);
 
   const closeSoon = useCallback((delayMs = 1200) => {
     setTimeout(() => {
@@ -138,7 +266,10 @@ export const FeedbackModal: React.FC = () => {
     setVisible(false);
     setError(null);
     setToast(null);
+    setProgress(null);
     setAction('idle');
+    setShowVibeInput(false);
+    setVibePrompt('');
   }, []);
 
   // Helper: run a P2P call; on network failure, ask YaverFeedback to
@@ -196,51 +327,104 @@ export const FeedbackModal: React.FC = () => {
     setAction('hot-reloading');
     setError(null);
     setProgress(0);
-    setToast('Sending…');
+    setToast('Contacting selected machine…');
     try {
+      await loadSelectedMachine();
+      const selected = await YaverFeedback.getSelectedRemoteDevice();
+      if (!selected) {
+        YaverFeedback.showMachinePicker();
+        throw new Error('No machine selected. Pick a machine and try again.');
+      }
+      if (selected.needsAuth) {
+        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: unknown) {
-      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 = useCallback(async () => {
+  }, [closeSoon, loadSelectedMachine, runWithReconnect]);
+
+  const uploadBundleWithOptionalFix = useCallback(async (
+    bundle: FeedbackBundle,
+    fixOnUpload: boolean,
+    successToast: string,
+    failureToast?: string,
+  ) => {
     const client = YaverFeedback.getP2PClient();
     const config = YaverFeedback.getConfig();
     if (!client || !config?.agentUrl) {
       setError('Not connected to the agent yet.');
       return;
     }
+    try {
+      const uploaded = await 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 as { id?: string; reportId?: string } | null | undefined)?.id ??
+        (uploaded as { reportId?: string } | null | undefined)?.reportId;
+      if (reportId && fixOnUpload) {
+        try {
+          await client.triggerFix(reportId);
+          setToast(successToast);
+        } catch (err: unknown) {
+          setToast(failureToast ?? 'Report uploaded — fix trigger failed');
+          setError(err instanceof Error ? err.message : String(err));
+        }
+      } else {
+        setToast(successToast);
+      }
+      closeSoon(1400);
+    } catch (err: unknown) {
+      setError(err instanceof Error ? err.message : String(err));
+    }
+  }, [closeSoon]);
+
+  const handleScreenshotAndFix = 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: string | null = null;
+    let path: string;
     try {
       path = await captureScreenshot();
     } catch (err: unknown) {
@@ -250,7 +434,6 @@ export const FeedbackModal: React.FC = () => {
       return;
     }
 
-    // Step 2: Re-show the modal for progress + ack.
     setVisible(true);
     await new Promise((resolve) => setTimeout(resolve, 150));
 
@@ -264,7 +447,6 @@ export const FeedbackModal: React.FC = () => {
         screenWidth: width,
         screenHeight: height,
       };
-
       const capturedErrors = YaverFeedback.getCapturedErrors();
       const bundle: FeedbackBundle = {
         metadata: {
@@ -276,36 +458,21 @@ export const FeedbackModal: React.FC = () => {
         screenshots: [path],
         errors: capturedErrors.length > 0 ? capturedErrors : undefined,
       };
-
-      const uploaded = await uploadFeedback(
-        config.agentUrl,
-        config.authToken ?? '',
+      await uploadBundleWithOptionalFix(
         bundle,
+        true,
+        'Fix task started',
       );
-      // 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 as { id?: string; reportId?: string } | null | undefined)?.id ??
-        (uploaded as { reportId?: string } | null | undefined)?.reportId;
-      if (reportId) {
-        try {
-          await client.triggerFix(reportId);
-          setToast('Fix task started');
-        } catch (err: unknown) {
-          setToast('Report uploaded — fix trigger failed');
-          setError(err instanceof Error ? err.message : String(err));
-        }
-      } else {
-        setToast('Report uploaded');
-      }
-      closeSoon(1400);
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : String(err));
     } 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
@@ -359,172 +526,11 @@ export const FeedbackModal: React.FC = () => {
     }
   }, [vibePrompt]);
 
-  // ─── 4. Toggle screen recording ────────────────────────────────────
-  const handleToggleRecording = useCallback(async () => {
-    setError(null);
-    if (isRecordingVideo) {
-      try {
-        const result = await stopVideoRecording();
-        if (mountedRef.current) {
-          setIsRecordingVideo(false);
-          setLastVideo(result);
-          setToast(`Recording stopped — ${Math.round(result.duration)}s`);
-        }
-      } catch (err: unknown) {
-        setIsRecordingVideo(false);
-        setError(err instanceof Error ? err.message : String(err));
-      }
-    } else {
-      try {
-        await startVideoRecording();
-        if (mountedRef.current) {
-          setIsRecordingVideo(true);
-          setToast('Recording…');
-          setLastVideo(null);
-        }
-      } catch (err: unknown) {
-        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 = useCallback(async () => {
-    setError(null);
-    if (!isRecordingVoice) {
-      try {
-        await startAudioRecording();
-        if (mountedRef.current) {
-          setIsRecordingVoice(true);
-          setAction('recording-voice');
-          setToast('Recording voice note…');
-        }
-      } catch (err: unknown) {
-        setIsRecordingVoice(false);
-        setAction('idle');
-        setError(err instanceof Error ? err.message : String(err));
-      }
-      return;
-    }
-
-    // Stopping → transcribe → send.
-    try {
-      const audio = await stopAudioRecording();
-      setIsRecordingVoice(false);
-      if (!audio) {
-        setAction('idle');
-        return;
-      }
-      setAction('transcribing-voice');
-      setToast('Transcribing…');
-
-      const config = YaverFeedback.getConfig();
-      if (!config?.agentUrl) {
-        setError('Not connected to the agent yet.');
-        setAction('idle');
-        return;
-      }
-      let transcript = '';
-      try {
-        const client = 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: DeviceInfo = {
-        platform: Platform.OS,
-        osVersion: String(Platform.Version),
-        model: Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
-        screenWidth: width,
-        screenHeight: height,
-      };
-      const bundle: FeedbackBundle = {
-        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.getCapturedErrors().length
-          ? YaverFeedback.getCapturedErrors()
-          : undefined,
-      };
-      await uploadFeedback(config.agentUrl, config.authToken ?? '', bundle);
-      setToast(transcript ? `Sent: "${transcript.slice(0, 60)}${transcript.length > 60 ? '…' : ''}"` : 'Voice note sent');
-      closeSoon(1800);
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : String(err));
-    } finally {
-      if (mountedRef.current) setAction('idle');
-    }
-  }, [isRecordingVoice, closeSoon]);
-
-  // ─── 5. Send the last recorded video ───────────────────────────────
-  const handleSendVideo = useCallback(async () => {
-    const config = 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: DeviceInfo = {
-        platform: Platform.OS,
-        osVersion: String(Platform.Version),
-        model: Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
-        screenWidth: width,
-        screenHeight: height,
-      };
-      const bundle: FeedbackBundle = {
-        metadata: {
-          timestamp: new Date().toISOString(),
-          device: deviceInfo,
-          app: {},
-          userNote: '[Screen recording]',
-        },
-        screenshots: [],
-        video: lastVideo.path,
-        errors: YaverFeedback.getCapturedErrors().length
-          ? YaverFeedback.getCapturedErrors()
-          : undefined,
-      };
-      await uploadFeedback(config.agentUrl, config.authToken ?? '', bundle);
-      setToast('Video sent');
-      setLastVideo(null);
-      closeSoon(1200);
-    } catch (err: unknown) {
-      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';
 
@@ -540,7 +546,23 @@ export const FeedbackModal: React.FC = () => {
           onRequestClose={handleClose}
         >
           <Pressable style={styles.overlay} onPress={handleClose}>
-            <Pressable style={styles.modal} onPress={(e) => e.stopPropagation()}>
+            <KeyboardAvoidingView
+              behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+              style={styles.kbAvoider}
+              pointerEvents="box-none"
+            >
+            <Pressable
+              style={styles.modal}
+              onPress={(e) => {
+                e.stopPropagation();
+                Keyboard.dismiss();
+              }}
+            >
+              <ScrollView
+                style={styles.scroll}
+                contentContainerStyle={styles.scrollContent}
+                keyboardShouldPersistTaps="handled"
+              >
               <View style={styles.header}>
                 <Text style={styles.title}>Send Feedback</Text>
                 <Pressable
@@ -554,6 +576,111 @@ export const FeedbackModal: React.FC = () => {
                 </Pressable>
               </View>
 
+              <Pressable
+                onPress={() => {
+                  if (!YaverFeedback.isAuthed()) {
+                    YaverFeedback.showLogin();
+                    return;
+                  }
+                  YaverFeedback.showMachinePicker();
+                }}
+                style={[
+                  styles.machineCard,
+                  machineCard.status === 'live' && styles.machineCardLive,
+                  machineCard.status === 'attention' && styles.machineCardAttention,
+                  machineCard.status === 'offline' && styles.machineCardOffline,
+                ]}
+              >
+                <View style={styles.machineHeader}>
+                  <View style={styles.machineTitleWrap}>
+                    <View
+                      style={[
+                        styles.machineDot,
+                        machineCard.status === 'live' && styles.machineDotLive,
+                        machineCard.status === 'attention' && styles.machineDotAttention,
+                        machineCard.status === 'offline' && styles.machineDotOffline,
+                      ]}
+                    />
+                    <Text style={styles.machineLabel}>Selected Machine</Text>
+                  </View>
+                  <Text style={styles.machineAction}>
+                    {machineCard.loading ? 'Refreshing…' : 'Change'}
+                  </Text>
+                </View>
+                <Text style={styles.machineName}>
+                  {machineCard.loading ? 'Checking machine…' : machineCard.title}
+                </Text>
+                <Text style={styles.machineMeta}>{machineCard.detail}</Text>
+              </Pressable>
+
+              {quickIconHidden && (
+                <View style={styles.quickIconNote}>
+                  <Text style={styles.quickIconNoteText}>
+                    Quick access icon is hidden. Shake the phone if you want feedback back fast.
+                  </Text>
+                  <Pressable
+                    onPress={() => {
+                      void YaverFeedback.setQuickIconVisible(true);
+                      setQuickIconHidden(false);
+                    }}
+                    style={({ pressed }) => [
+                      styles.quickIconToggle,
+                      pressed && styles.buttonPressed,
+                    ]}
+                  >
+                    <Text style={styles.quickIconToggleText}>Show quick icon again</Text>
+                  </Pressable>
+                </View>
+              )}
+
+              <View style={styles.iconSelector}>
+                <Text style={styles.iconSelectorTitle}>Quick Icon Color</Text>
+                <Text style={styles.iconSelectorText}>
+                  Pick a runtime color so the floating y icon does not overlap with your app UI.
+                </Text>
+                <View style={styles.iconSelectorGrid}>
+                  {(Object.entries(QUICK_ICON_COLOR_PRESETS) as Array<
+                    [QuickIconColorPreset, (typeof QUICK_ICON_COLOR_PRESETS)[QuickIconColorPreset]]
+                  >).map(([preset, colors]) => {
+                    const selected = quickIconColorPreset === preset;
+                    return (
+                      <Pressable
+                        key={preset}
+                        onPress={() => {
+                          setQuickIconColorPreset(preset);
+                          void YaverFeedback.setQuickIconColorPreset(preset);
+                        }}
+                        style={[
+                          styles.iconOption,
+                          selected && styles.iconOptionSelected,
+                        ]}
+                      >
+                        <View
+                          style={[
+                            styles.iconOptionCircle,
+                            {
+                              backgroundColor: colors.backgroundColor,
+                              borderColor: colors.borderColor,
+                              shadowColor: colors.shadowColor,
+                            },
+                          ]}
+                        >
+                          <Text
+                            style={[
+                              styles.iconOptionLabel,
+                              { color: colors.foregroundColor },
+                            ]}
+                          >
+                            y
+                          </Text>
+                        </View>
+                        <Text style={styles.iconOptionText}>{colors.label}</Text>
+                      </Pressable>
+                    );
+                  })}
+                </View>
+              </View>
+
               {/* 1. Hot Reload — the common path */}
               <ActionRow
                 label={
@@ -565,19 +692,6 @@ export const FeedbackModal: React.FC = () => {
                 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
@@ -637,46 +751,13 @@ export const FeedbackModal: React.FC = () => {
                 </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 */}
+              {/* Screenshot & Fix */}
               <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'}
+                label={action === 'capturing' ? 'Working…' : 'Screenshot & Fix'}
+                tint="#22c55e"
+                onPress={handleScreenshotAndFix}
+                disabled={busy}
+                busy={action === 'capturing'}
               />
 
               {progress !== null && (
@@ -692,34 +773,20 @@ export const FeedbackModal: React.FC = () => {
               {toast && <Text style={styles.toast}>{toast}</Text>}
               {error && <Text style={styles.error}>{error}</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. */}
               <Pressable
-                onPress={async () => {
-                  const next = !quickIconHidden;
-                  setQuickIconHidden(next);
-                  await YaverFeedback.setQuickIconVisible(!next);
-                }}
+                onPress={handleClose}
                 style={({ pressed }) => [
-                  styles.quickIconToggle,
-                  pressed && { opacity: 0.7 },
+                  styles.cancelBtn,
+                  pressed && styles.buttonPressed,
                 ]}
                 accessibilityRole="button"
-                accessibilityLabel={
-                  quickIconHidden ? 'Show quick icon' : 'Hide quick icon'
-                }
+                accessibilityLabel="Cancel"
               >
-                <Text style={styles.quickIconToggleText}>
-                  {quickIconHidden
-                    ? '◯  Show quick-access icon'
-                    : '●  Hide quick-access icon'}
-                </Text>
+                <Text style={styles.cancelBtnText}>Cancel</Text>
               </Pressable>
+              </ScrollView>
             </Pressable>
+            </KeyboardAvoidingView>
           </Pressable>
         </Modal>
       )}
@@ -821,6 +888,10 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(0,0,0,0.55)',
     justifyContent: 'flex-end',
   },
+  kbAvoider: {
+    width: '100%',
+    justifyContent: 'flex-end',
+  },
   modal: {
     backgroundColor: '#141422',
     borderTopLeftRadius: 22,
@@ -828,6 +899,14 @@ const styles = StyleSheet.create({
     padding: 22,
     paddingBottom: 36,
     gap: 12,
+    maxHeight: '92%',
+  },
+  scroll: {
+    maxHeight: '100%',
+  },
+  scrollContent: {
+    gap: 12,
+    paddingBottom: 8,
   },
   header: {
     flexDirection: 'row',
@@ -868,6 +947,77 @@ const styles = 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,
@@ -893,14 +1043,106 @@ const styles = 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,
+    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,
   },
 });