yaver-feedback-react-native 0.8.3 → 0.8.4

package/dist/FeedbackModal.js

@@ -63,6 +63,7 @@ const FeedbackModal = () => {
     const [vibePrompt, setVibePrompt] = (0, react_1.useState)('');
     const [lastVibeTaskId, setLastVibeTaskId] = (0, react_1.useState)(null);
     const [quickIconColorPreset, setQuickIconColorPreset] = (0, react_1.useState)(null);
+    const [keyboardInset, setKeyboardInset] = (0, react_1.useState)(0);
     const [machineCard, setMachineCard] = (0, react_1.useState)({
         device: null,
         reachable: null,
@@ -231,6 +232,24 @@ const FeedbackModal = () => {
         }, 5000);
         return () => clearInterval(interval);
     }, [loadSelectedMachine, visible]);
+    (0, react_1.useEffect)(() => {
+        if (!visible) {
+            setKeyboardInset(0);
+            return;
+        }
+        const showEvent = react_native_1.Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+        const hideEvent = react_native_1.Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+        const showSub = react_native_1.Keyboard.addListener(showEvent, (event) => {
+            setKeyboardInset(event.endCoordinates?.height ?? 0);
+        });
+        const hideSub = react_native_1.Keyboard.addListener(hideEvent, () => {
+            setKeyboardInset(0);
+        });
+        return () => {
+            showSub.remove();
+            hideSub.remove();
+        };
+    }, [visible]);
     const closeSoon = (0, react_1.useCallback)((delayMs = 1200) => {
         setTimeout(() => {
             if (mountedRef.current)
@@ -515,12 +534,17 @@ const FeedbackModal = () => {
       <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.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : 'height'} style={styles.kbAvoider} pointerEvents="box-none">
+            <react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={react_native_1.Platform.OS === 'ios' ? 12 : 0} 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.ScrollView style={styles.scroll} contentContainerStyle={[
+                styles.scrollContent,
+                showVibeInput && keyboardInset > 0
+                    ? { paddingBottom: 8 + keyboardInset }
+                    : null,
+            ]} keyboardShouldPersistTaps="handled" keyboardDismissMode={react_native_1.Platform.OS === 'ios' ? 'interactive' : 'on-drag'}>
               <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">

package/dist/LoginScreen.js

@@ -179,14 +179,18 @@ const YaverLoginScreen = ({ onLoggedIn, onCancel, initialInviteCode, }) => {
     return (<react_native_1.SafeAreaView style={styles.safeArea}>
       <react_native_1.KeyboardAvoidingView style={{ flex: 1 }} behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined}>
         <react_native_1.ScrollView contentContainerStyle={styles.scrollContainer} keyboardShouldPersistTaps="handled">
-          <react_native_1.View style={styles.header}>
-            <react_native_1.Text style={styles.logo}>Yaver</react_native_1.Text>
-            <react_native_1.Text style={styles.subtitle}>Sign in to send feedback</react_native_1.Text>
+          <react_native_1.View style={styles.topBar}>
+            <react_native_1.View style={styles.topBarSpacer}/>
             {onCancel && (<react_native_1.Pressable onPress={onCancel} style={styles.cancel}>
                 <react_native_1.Text style={styles.cancelText}>Cancel</react_native_1.Text>
               </react_native_1.Pressable>)}
           </react_native_1.View>
 
+          <react_native_1.View style={styles.header}>
+            <react_native_1.Text style={styles.logo}>Yaver</react_native_1.Text>
+            <react_native_1.Text style={styles.subtitle}>Sign in to send feedback</react_native_1.Text>
+          </react_native_1.View>
+
           <react_native_1.View style={styles.buttons}>
             {react_native_1.Platform.OS === 'ios'
             ? renderProvider('apple', 'Continue with Apple', handleApple)
@@ -252,11 +256,21 @@ const styles = react_native_1.StyleSheet.create({
         paddingHorizontal: 24,
         justifyContent: 'center',
     },
+    topBar: {
+        minHeight: 32,
+        marginBottom: 24,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    topBarSpacer: {
+        width: 56,
+    },
     header: { alignItems: 'center', marginBottom: 40 },
     logo: { fontSize: 44, fontWeight: '800', color: '#e0e0e0', letterSpacing: -1 },
     subtitle: { fontSize: 15, color: '#9ca3af', marginTop: 6 },
-    cancel: { position: 'absolute', right: 0, top: 0, padding: 8 },
-    cancelText: { color: '#9ca3af', fontSize: 14 },
+    cancel: { minWidth: 56, alignItems: 'flex-end', paddingVertical: 8 },
+    cancelText: { color: '#9ca3af', fontSize: 14, fontWeight: '500' },
     buttons: { gap: 12 },
     button: {
         backgroundColor: 'rgba(255,255,255,0.06)',

package/dist/MachinePickerScreen.js

@@ -53,6 +53,7 @@ const YaverMachinePickerScreen = ({ token, currentDeviceId, onPick, onCancel, })
     const [error, setError] = (0, react_1.useState)(null);
     const [list, setList] = (0, react_1.useState)({ owned: [], shared: [] });
     const [pairingDevice, setPairingDevice] = (0, react_1.useState)(null);
+    const [reachability, setReachability] = (0, react_1.useState)({});
     const load = (0, react_1.useCallback)(async (silent = false) => {
         if (!silent)
             setLoading(true);
@@ -60,6 +61,23 @@ const YaverMachinePickerScreen = ({ token, currentDeviceId, onPick, onCancel, })
         try {
             const result = await (0, auth_1.listReachableDevices)(token);
             setList(result);
+            setReachability({});
+            void (async () => {
+                const devices = [...result.owned, ...result.shared];
+                const settled = await Promise.allSettled(devices.map(async (device) => ({
+                    deviceId: device.deviceId,
+                    result: await (0, auth_1.probeDeviceReachability)(device),
+                })));
+                setReachability((prev) => {
+                    const next = { ...prev };
+                    for (const entry of settled) {
+                        if (entry.status === 'fulfilled') {
+                            next[entry.value.deviceId] = entry.value.result;
+                        }
+                    }
+                    return next;
+                });
+            })();
             if (result.owned.length === 0 && result.shared.length === 0) {
                 setError('No machines found yet. If you do not have your own computer, redeem a host invite code first. Otherwise run `yaver auth` + `yaver serve` on your machine.');
             }
@@ -85,11 +103,18 @@ const YaverMachinePickerScreen = ({ token, currentDeviceId, onPick, onCancel, })
             setPairingDevice(device);
             return;
         }
+        const direct = await (0, auth_1.probeDeviceReachability)(device);
+        if (!direct.reachable && !device.needsAuth) {
+            setError('Selected machine is not responding. Start `yaver serve` on it and try again.');
+            setReachability((prev) => ({ ...prev, [device.deviceId]: direct }));
+            return;
+        }
         await (0, auth_1.saveSelectedDeviceId)(device.deviceId);
         onPick(device);
     };
     const renderDevice = (device) => {
         const selected = device.deviceId === currentDeviceId;
+        const probe = reachability[device.deviceId];
         // Trust Convex's `isOnline` — the backend already gates it on a
         // fresh 90 s heartbeat (see backend/convex/devices.ts
         // deriveIsOnline). Re-checking on the client produced false
@@ -100,20 +125,33 @@ const YaverMachinePickerScreen = ({ token, currentDeviceId, onPick, onCancel, })
         // healthy — a separate concern from "can I reach this machine?"
         // Mobile app surfaces runner issues via a separate badge, not
         // this dot. Picker's job is reachability, nothing more.
-        const healthColor = !device.isOnline
-            ? '#ef4444'
-            : device.needsAuth
-                ? '#f59e0b'
-                : '#22c55e';
+        const effectivelyReachable = probe?.reachable === true;
+        const explicitlyOffline = probe?.reachable === false;
+        const healthColor = device.needsAuth
+            ? '#f59e0b'
+            : effectivelyReachable
+                ? '#22c55e'
+                : explicitlyOffline || !device.isOnline
+                    ? '#ef4444'
+                    : '#22c55e';
         // Derive a single short status phrase the user can act on.
         let statusLine = device.platform;
-        if (!device.isOnline) {
+        if (probe === undefined) {
+            statusLine = 'Checking connection…';
+        }
+        else if (!device.isOnline && effectivelyReachable) {
+            statusLine = 'Reachable now — waiting for cloud status to refresh';
+        }
+        else if (!device.isOnline) {
             statusLine = 'Offline — start `yaver serve` on the Mac';
         }
         else if (device.needsAuth) {
             statusLine =
                 'Needs pairing — open the Yaver app to adopt this machine';
         }
+        else if (explicitlyOffline) {
+            statusLine = 'Agent not responding on this machine';
+        }
         else if (device.runnerDown) {
             statusLine = 'Runner down — restart the coding agent on the Mac';
         }

package/dist/auth.d.ts

@@ -123,6 +123,10 @@ export interface DeviceList {
     owned: RemoteDevice[];
     shared: RemoteDevice[];
 }
+export interface DeviceReachability {
+    reachable: boolean;
+    url?: string;
+}
 export interface GuestInvitation {
     hostUserId: string;
     hostName: string;
@@ -170,6 +174,8 @@ export interface InvitationPreview {
  * raw list used to render as "Kvancs-MacBook-Air.local ×3" in the picker.
  */
 export declare function listReachableDevices(token: string): Promise<DeviceList>;
+export declare function buildDeviceCandidateUrls(device: RemoteDevice): string[];
+export declare function probeDeviceReachability(device: RemoteDevice, timeoutMs?: number): Promise<DeviceReachability>;
 export declare function mintGuestSdkToken(token: string, hostUserId: string, targetDeviceId: string): Promise<{
     token: string;
     expiresAt: number;

package/dist/auth.js

@@ -37,6 +37,8 @@ exports.signInWithOAuth = signInWithOAuth;
 exports.signupWithEmail = signupWithEmail;
 exports.loginWithEmail = loginWithEmail;
 exports.listReachableDevices = listReachableDevices;
+exports.buildDeviceCandidateUrls = buildDeviceCandidateUrls;
+exports.probeDeviceReachability = probeDeviceReachability;
 exports.mintGuestSdkToken = mintGuestSdkToken;
 exports.fetchGuestHosts = fetchGuestHosts;
 exports.findInviteByCode = findInviteByCode;
@@ -412,6 +414,45 @@ async function listReachableDevices(token) {
         return { owned: [], shared: [] };
     }
 }
+function buildDeviceCandidateUrls(device) {
+    const port = device.httpPort ?? device.quicPort ?? 18080;
+    const hosts = new Set();
+    if (device.quicHost)
+        hosts.add(device.quicHost);
+    for (const ip of device.localIps ?? []) {
+        if (ip)
+            hosts.add(ip);
+    }
+    return Array.from(hosts).map((host) => `http://${host}:${port}`);
+}
+async function probeDeviceReachability(device, timeoutMs = 2500) {
+    const candidates = buildDeviceCandidateUrls(device);
+    if (candidates.length === 0)
+        return { reachable: false };
+    const probeOne = async (baseUrl) => {
+        const controller = new AbortController();
+        const timer = setTimeout(() => controller.abort(), timeoutMs);
+        try {
+            const response = await fetch(`${baseUrl}/health`, {
+                method: 'GET',
+                signal: controller.signal,
+            });
+            if (!response.ok)
+                throw new Error(`health ${response.status}`);
+            return baseUrl;
+        }
+        finally {
+            clearTimeout(timer);
+        }
+    };
+    const settled = await Promise.allSettled(candidates.map((url) => probeOne(url)));
+    for (const result of settled) {
+        if (result.status === 'fulfilled') {
+            return { reachable: true, url: result.value };
+        }
+    }
+    return { reachable: false };
+}
 async function mintGuestSdkToken(token, hostUserId, targetDeviceId) {
     const res = await fetch(`${convexSiteUrl}/guests/sdk-token`, {
         method: 'POST',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaver-feedback-react-native",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "Visual feedback SDK for Yaver — bug reports, screen recording, voice annotations, and local-first developer workflows",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/FeedbackModal.tsx

@@ -82,6 +82,7 @@ export const FeedbackModal: React.FC = () => {
   const [lastVibeTaskId, setLastVibeTaskId] = useState<string | null>(null);
   const [quickIconColorPreset, setQuickIconColorPreset] =
     useState<QuickIconColorPreset | null>(null);
+  const [keyboardInset, setKeyboardInset] = useState(0);
   const [machineCard, setMachineCard] = useState<MachineCardState>({
     device: null,
     reachable: null,
@@ -256,6 +257,26 @@ export const FeedbackModal: React.FC = () => {
     return () => clearInterval(interval);
   }, [loadSelectedMachine, visible]);
 
+  useEffect(() => {
+    if (!visible) {
+      setKeyboardInset(0);
+      return;
+    }
+
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showSub = Keyboard.addListener(showEvent, (event) => {
+      setKeyboardInset(event.endCoordinates?.height ?? 0);
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      setKeyboardInset(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [visible]);
+
   const closeSoon = useCallback((delayMs = 1200) => {
     setTimeout(() => {
       if (mountedRef.current) setVisible(false);
@@ -569,6 +590,7 @@ export const FeedbackModal: React.FC = () => {
           <Pressable style={styles.overlay} onPress={handleClose}>
             <KeyboardAvoidingView
               behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+              keyboardVerticalOffset={Platform.OS === 'ios' ? 12 : 0}
               style={styles.kbAvoider}
               pointerEvents="box-none"
             >
@@ -581,8 +603,14 @@ export const FeedbackModal: React.FC = () => {
             >
               <ScrollView
                 style={styles.scroll}
-                contentContainerStyle={styles.scrollContent}
+                contentContainerStyle={[
+                  styles.scrollContent,
+                  showVibeInput && keyboardInset > 0
+                    ? { paddingBottom: 8 + keyboardInset }
+                    : null,
+                ]}
                 keyboardShouldPersistTaps="handled"
+                keyboardDismissMode={Platform.OS === 'ios' ? 'interactive' : 'on-drag'}
               >
               <View style={styles.header}>
                 <Text style={styles.title}>Send Feedback</Text>

package/src/LoginScreen.tsx

@@ -236,9 +236,8 @@ export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
           contentContainerStyle={styles.scrollContainer}
           keyboardShouldPersistTaps="handled"
         >
-          <View style={styles.header}>
-            <Text style={styles.logo}>Yaver</Text>
-            <Text style={styles.subtitle}>Sign in to send feedback</Text>
+          <View style={styles.topBar}>
+            <View style={styles.topBarSpacer} />
             {onCancel && (
               <Pressable onPress={onCancel} style={styles.cancel}>
                 <Text style={styles.cancelText}>Cancel</Text>
@@ -246,6 +245,11 @@ export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
             )}
           </View>
 
+          <View style={styles.header}>
+            <Text style={styles.logo}>Yaver</Text>
+            <Text style={styles.subtitle}>Sign in to send feedback</Text>
+          </View>
+
           <View style={styles.buttons}>
             {Platform.OS === 'ios'
               ? renderProvider('apple', 'Continue with Apple', handleApple)
@@ -391,11 +395,21 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     justifyContent: 'center',
   },
+  topBar: {
+    minHeight: 32,
+    marginBottom: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  topBarSpacer: {
+    width: 56,
+  },
   header: { alignItems: 'center', marginBottom: 40 },
   logo: { fontSize: 44, fontWeight: '800', color: '#e0e0e0', letterSpacing: -1 },
   subtitle: { fontSize: 15, color: '#9ca3af', marginTop: 6 },
-  cancel: { position: 'absolute', right: 0, top: 0, padding: 8 },
-  cancelText: { color: '#9ca3af', fontSize: 14 },
+  cancel: { minWidth: 56, alignItems: 'flex-end', paddingVertical: 8 },
+  cancelText: { color: '#9ca3af', fontSize: 14, fontWeight: '500' },
   buttons: { gap: 12 },
   button: {
     backgroundColor: 'rgba(255,255,255,0.06)',

package/src/MachinePickerScreen.tsx

@@ -11,8 +11,10 @@ import {
 } from 'react-native';
 import {
   DeviceList,
+  DeviceReachability,
   RemoteDevice,
   listReachableDevices,
+  probeDeviceReachability,
   saveSelectedDeviceId,
 } from './auth';
 import { PairDeviceModal } from './PairDeviceModal';
@@ -45,6 +47,7 @@ export const YaverMachinePickerScreen: React.FC<YaverMachinePickerProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [list, setList] = useState<DeviceList>({ owned: [], shared: [] });
   const [pairingDevice, setPairingDevice] = useState<RemoteDevice | null>(null);
+  const [reachability, setReachability] = useState<Record<string, DeviceReachability | undefined>>({});
 
   const load = useCallback(async (silent = false) => {
     if (!silent) setLoading(true);
@@ -52,6 +55,25 @@ export const YaverMachinePickerScreen: React.FC<YaverMachinePickerProps> = ({
     try {
       const result = await listReachableDevices(token);
       setList(result);
+      setReachability({});
+      void (async () => {
+        const devices = [...result.owned, ...result.shared];
+        const settled = await Promise.allSettled(
+          devices.map(async (device) => ({
+            deviceId: device.deviceId,
+            result: await probeDeviceReachability(device),
+          })),
+        );
+        setReachability((prev) => {
+          const next = { ...prev };
+          for (const entry of settled) {
+            if (entry.status === 'fulfilled') {
+              next[entry.value.deviceId] = entry.value.result;
+            }
+          }
+          return next;
+        });
+      })();
       if (result.owned.length === 0 && result.shared.length === 0) {
         setError(
           'No machines found yet. If you do not have your own computer, redeem a host invite code first. Otherwise run `yaver auth` + `yaver serve` on your machine.',
@@ -79,12 +101,19 @@ export const YaverMachinePickerScreen: React.FC<YaverMachinePickerProps> = ({
       setPairingDevice(device);
       return;
     }
+    const direct = await probeDeviceReachability(device);
+    if (!direct.reachable && !device.needsAuth) {
+      setError('Selected machine is not responding. Start `yaver serve` on it and try again.');
+      setReachability((prev) => ({ ...prev, [device.deviceId]: direct }));
+      return;
+    }
     await saveSelectedDeviceId(device.deviceId);
     onPick(device);
   };
 
   const renderDevice = (device: RemoteDevice) => {
     const selected = device.deviceId === currentDeviceId;
+    const probe = reachability[device.deviceId];
     // Trust Convex's `isOnline` — the backend already gates it on a
     // fresh 90 s heartbeat (see backend/convex/devices.ts
     // deriveIsOnline). Re-checking on the client produced false
@@ -95,18 +124,28 @@ export const YaverMachinePickerScreen: React.FC<YaverMachinePickerProps> = ({
     // healthy — a separate concern from "can I reach this machine?"
     // Mobile app surfaces runner issues via a separate badge, not
     // this dot. Picker's job is reachability, nothing more.
-    const healthColor = !device.isOnline
-      ? '#ef4444'
-      : device.needsAuth
-        ? '#f59e0b'
-        : '#22c55e';
+    const effectivelyReachable = probe?.reachable === true;
+    const explicitlyOffline = probe?.reachable === false;
+    const healthColor = device.needsAuth
+      ? '#f59e0b'
+      : effectivelyReachable
+        ? '#22c55e'
+        : explicitlyOffline || !device.isOnline
+          ? '#ef4444'
+          : '#22c55e';
     // Derive a single short status phrase the user can act on.
     let statusLine = device.platform;
-    if (!device.isOnline) {
+    if (probe === undefined) {
+      statusLine = 'Checking connection…';
+    } else if (!device.isOnline && effectivelyReachable) {
+      statusLine = 'Reachable now — waiting for cloud status to refresh';
+    } else if (!device.isOnline) {
       statusLine = 'Offline — start `yaver serve` on the Mac';
     } else if (device.needsAuth) {
       statusLine =
         'Needs pairing — open the Yaver app to adopt this machine';
+    } else if (explicitlyOffline) {
+      statusLine = 'Agent not responding on this machine';
     } else if (device.runnerDown) {
       statusLine = 'Runner down — restart the coding agent on the Mac';
     } else {

package/src/auth.ts

@@ -435,6 +435,11 @@ export interface DeviceList {
   shared: RemoteDevice[];
 }
 
+export interface DeviceReachability {
+  reachable: boolean;
+  url?: string;
+}
+
 export interface GuestInvitation {
   hostUserId: string;
   hostName: string;
@@ -536,6 +541,47 @@ export async function listReachableDevices(
   }
 }
 
+export function buildDeviceCandidateUrls(device: RemoteDevice): string[] {
+  const port = device.httpPort ?? device.quicPort ?? 18080;
+  const hosts = new Set<string>();
+  if (device.quicHost) hosts.add(device.quicHost);
+  for (const ip of device.localIps ?? []) {
+    if (ip) hosts.add(ip);
+  }
+  return Array.from(hosts).map((host) => `http://${host}:${port}`);
+}
+
+export async function probeDeviceReachability(
+  device: RemoteDevice,
+  timeoutMs = 2500,
+): Promise<DeviceReachability> {
+  const candidates = buildDeviceCandidateUrls(device);
+  if (candidates.length === 0) return { reachable: false };
+
+  const probeOne = async (baseUrl: string): Promise<string> => {
+    const controller = new AbortController();
+    const timer = setTimeout(() => controller.abort(), timeoutMs);
+    try {
+      const response = await fetch(`${baseUrl}/health`, {
+        method: 'GET',
+        signal: controller.signal,
+      });
+      if (!response.ok) throw new Error(`health ${response.status}`);
+      return baseUrl;
+    } finally {
+      clearTimeout(timer);
+    }
+  };
+
+  const settled = await Promise.allSettled(candidates.map((url) => probeOne(url)));
+  for (const result of settled) {
+    if (result.status === 'fulfilled') {
+      return { reachable: true, url: result.value };
+    }
+  }
+  return { reachable: false };
+}
+
 export async function mintGuestSdkToken(
   token: string,
   hostUserId: string,