yaver-feedback-react-native 0.8.3 → 0.8.6

package/dist/AuthOverlay.js

@@ -61,6 +61,31 @@ const AuthOverlay = () => {
     const [pickerVisible, setPickerVisible] = (0, react_1.useState)(false);
     const [token, setToken] = (0, react_1.useState)(null);
     const [pendingInviteCode, setPendingInviteCode] = (0, react_1.useState)(null);
+    const activeOverlayRef = (0, react_1.useRef)('none');
+    const openLogin = (0, react_1.useCallback)(() => {
+        activeOverlayRef.current = 'login';
+        setGuestVisible(false);
+        setPickerVisible(false);
+        setLoginVisible(true);
+    }, []);
+    const openGuest = (0, react_1.useCallback)(() => {
+        activeOverlayRef.current = 'guest';
+        setLoginVisible(false);
+        setPickerVisible(false);
+        setGuestVisible(true);
+    }, []);
+    const openPicker = (0, react_1.useCallback)(() => {
+        activeOverlayRef.current = 'picker';
+        setLoginVisible(false);
+        setGuestVisible(false);
+        setPickerVisible(true);
+    }, []);
+    const closeAll = (0, react_1.useCallback)(() => {
+        activeOverlayRef.current = 'none';
+        setLoginVisible(false);
+        setGuestVisible(false);
+        setPickerVisible(false);
+    }, []);
     (0, react_1.useEffect)(() => {
         let mounted = true;
         (async () => {
@@ -68,65 +93,67 @@ const AuthOverlay = () => {
             if (mounted && cached)
                 setToken(cached);
         })();
-        const loginSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startLogin', () => setLoginVisible(true));
+        const loginSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startLogin', () => {
+            if (activeOverlayRef.current !== 'none')
+                return;
+            openLogin();
+        });
         const pickerSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startMachinePicker', async () => {
+            if (activeOverlayRef.current !== 'none')
+                return;
             const cached = await (0, auth_1.getToken)();
             if (cached)
                 setToken(cached);
             if (cached)
-                setPickerVisible(true);
+                openPicker();
         });
         return () => {
             mounted = false;
             loginSub.remove();
             pickerSub.remove();
         };
-    }, []);
+    }, [openLogin, openPicker]);
     const continueAfterAuth = async (newToken, inviteCode) => {
         setToken(newToken);
         await YaverFeedback_1.YaverFeedback.setAuthToken(newToken);
         const devices = await (0, auth_1.listReachableDevices)(newToken).catch(() => ({ owned: [], shared: [] }));
-        setLoginVisible(false);
         const cleanedInviteCode = (inviteCode ?? '').trim().toUpperCase();
         if (cleanedInviteCode) {
             setPendingInviteCode(cleanedInviteCode);
-            setGuestVisible(true);
+            openGuest();
             return;
         }
         if (devices.owned.length === 0 && devices.shared.length === 0) {
-            setGuestVisible(true);
+            openGuest();
             return;
         }
-        setPickerVisible(true);
+        openPicker();
     };
     const handleLoggedIn = async (newToken, opts) => {
         await continueAfterAuth(newToken, opts?.inviteCode);
     };
     const handleDevicePicked = async (device) => {
         await YaverFeedback_1.YaverFeedback.setPreferredDevice(device.deviceId);
-        setPickerVisible(false);
-        setGuestVisible(false);
+        closeAll();
         // Continue straight into the feedback flow the user originally triggered.
         react_native_1.DeviceEventEmitter.emit('yaverFeedback:startReport');
     };
     return (<>
-      <react_native_1.Modal visible={loginVisible} animationType="slide" presentationStyle="fullScreen" onRequestClose={() => setLoginVisible(false)}>
-        <LoginScreen_1.YaverLoginScreen onLoggedIn={handleLoggedIn} onCancel={() => setLoginVisible(false)} initialInviteCode={pendingInviteCode ?? YaverFeedback_1.YaverFeedback.getConfig()?.guestInviteCode}/>
+      <react_native_1.Modal visible={loginVisible} animationType="slide" presentationStyle="fullScreen" onRequestClose={closeAll}>
+        <LoginScreen_1.YaverLoginScreen onLoggedIn={handleLoggedIn} onCancel={closeAll} initialInviteCode={pendingInviteCode ?? YaverFeedback_1.YaverFeedback.getConfig()?.guestInviteCode}/>
       </react_native_1.Modal>
 
-      <react_native_1.Modal visible={pickerVisible && !!token} animationType="slide" presentationStyle="fullScreen" onRequestClose={() => setPickerVisible(false)}>
-        {token && (<MachinePickerScreen_1.YaverMachinePickerScreen token={token} currentDeviceId={YaverFeedback_1.YaverFeedback.getConfig()?.preferredDeviceId} onPick={handleDevicePicked} onCancel={() => setPickerVisible(false)}/>)}
+      <react_native_1.Modal visible={pickerVisible && !!token} animationType="slide" presentationStyle="fullScreen" onRequestClose={closeAll}>
+        {token && (<MachinePickerScreen_1.YaverMachinePickerScreen token={token} currentDeviceId={YaverFeedback_1.YaverFeedback.getConfig()?.preferredDeviceId} onPick={handleDevicePicked} onCancel={closeAll}/>)}
       </react_native_1.Modal>
 
-      <react_native_1.Modal visible={guestVisible && !!token} animationType="slide" presentationStyle="fullScreen" onRequestClose={() => setGuestVisible(false)}>
+      <react_native_1.Modal visible={guestVisible && !!token} animationType="slide" presentationStyle="fullScreen" onRequestClose={closeAll}>
         {token && (<GuestOnboardingScreen_1.YaverGuestOnboardingScreen token={token} initialInviteCode={pendingInviteCode ?? YaverFeedback_1.YaverFeedback.getConfig()?.guestInviteCode} onContinue={() => {
-                setGuestVisible(false);
                 setPendingInviteCode(null);
-                setPickerVisible(true);
+                openPicker();
             }} onCancel={() => {
-                setGuestVisible(false);
                 setPendingInviteCode(null);
-                setPickerVisible(true);
+                openPicker();
             }}/>)}
       </react_native_1.Modal>
     </>);

package/dist/FeedbackModal.js

@@ -54,6 +54,7 @@ const FeedbackModal = () => {
     // is our guaranteed UI for bringing the icon back — we surface a
     // small "Show quick icon" row when this is true.
     const [quickIconHidden, setQuickIconHidden] = (0, react_1.useState)(false);
+    const [runnerAuthModal, setRunnerAuthModal] = (0, react_1.useState)(null);
     // Vibing-input mode: same expand-on-tap pattern as email login.
     // Tap "Vibing" once → the button reveals an input + Send; that lets
     // the user say WHAT they want to vibe on instead of firing a canned
@@ -63,6 +64,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 +233,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 +535,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">
@@ -642,6 +667,29 @@ const FeedbackModal = () => {
               {/* Screenshot & Fix */}
               <ActionRow label={action === 'capturing' ? 'Working…' : 'Screenshot & Fix'} tint="#22c55e" onPress={handleScreenshotAndFix} disabled={busy} busy={action === 'capturing'}/>
 
+              {/* Remote sign-in buttons — trigger codex/claude device-auth
+                on the selected agent without leaving the app. Opens a
+                small native modal showing the verification URL + 8-char
+                code the user enters in any browser. No API keys. */}
+              <react_native_1.View style={runnerAuthRowStyles.container}>
+                <react_native_1.Pressable onPress={() => setRunnerAuthModal('codex')} disabled={busy} style={({ pressed }) => [
+                runnerAuthRowStyles.button,
+                pressed && runnerAuthRowStyles.buttonPressed,
+                busy && runnerAuthRowStyles.buttonDisabled,
+            ]} accessibilityRole="button" accessibilityLabel="Remote sign-in Codex">
+                  <react_native_1.Text style={runnerAuthRowStyles.buttonLabel}>Remote sign-in</react_native_1.Text>
+                  <react_native_1.Text style={runnerAuthRowStyles.buttonName}>Codex</react_native_1.Text>
+                </react_native_1.Pressable>
+                <react_native_1.Pressable onPress={() => setRunnerAuthModal('claude')} disabled={busy} style={({ pressed }) => [
+                runnerAuthRowStyles.button,
+                pressed && runnerAuthRowStyles.buttonPressed,
+                busy && runnerAuthRowStyles.buttonDisabled,
+            ]} accessibilityRole="button" accessibilityLabel="Remote sign-in Claude">
+                  <react_native_1.Text style={runnerAuthRowStyles.buttonLabel}>Remote sign-in</react_native_1.Text>
+                  <react_native_1.Text style={runnerAuthRowStyles.buttonName}>Claude</react_native_1.Text>
+                </react_native_1.Pressable>
+              </react_native_1.View>
+
               {progress !== null && (<react_native_1.View style={styles.progressTrack}>
                   <react_native_1.View style={[
                     styles.progressFill,
@@ -662,6 +710,7 @@ const FeedbackModal = () => {
             </react_native_1.KeyboardAvoidingView>
           </react_native_1.Pressable>
         </react_native_1.Modal>)}
+      {runnerAuthModal ? (<RunnerAuthNativeModal runner={runnerAuthModal} onClose={() => setRunnerAuthModal(null)}/>) : null}
     </>);
 };
 exports.FeedbackModal = FeedbackModal;
@@ -990,3 +1039,259 @@ const styles = react_native_1.StyleSheet.create({
         opacity: 0.7,
     },
 });
+/**
+ * Minimal native modal for the codex/claude remote sign-in flow. Opens
+ * the device-auth session on the connected agent, surfaces the
+ * verification URL + one-time code, polls every 1.5 s, and turns green
+ * the moment the CLI writes its auth.json. No API keys, no SSH.
+ */
+const RunnerAuthNativeModal = ({ runner, onClose }) => {
+    const [session, setSession] = (0, react_1.useState)(null);
+    const [startError, setStartError] = (0, react_1.useState)(null);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const startedRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (startedRef.current)
+            return;
+        startedRef.current = true;
+        (async () => {
+            try {
+                const s = await YaverFeedback_1.YaverFeedback.startRunnerBrowserAuth(runner);
+                setSession(s);
+            }
+            catch (err) {
+                setStartError(err instanceof Error ? err.message : String(err));
+            }
+        })();
+    }, [runner]);
+    (0, react_1.useEffect)(() => {
+        if (!session)
+            return;
+        if (['completed', 'failed', 'cancelled'].includes(session.status))
+            return;
+        const iv = setInterval(async () => {
+            try {
+                const s = await YaverFeedback_1.YaverFeedback.getRunnerBrowserAuthStatus(session.id);
+                setSession(s);
+            }
+            catch {
+                // keep polling
+            }
+        }, 1500);
+        return () => clearInterval(iv);
+    }, [session?.id, session?.status]);
+    const terminal = session && ['completed', 'failed', 'cancelled'].includes(session.status);
+    const runnerLabel = runner === 'codex' ? 'OpenAI Codex' : runner === 'claude' ? 'Claude Code' : runner;
+    const handleClose = () => {
+        if (session && !terminal) {
+            YaverFeedback_1.YaverFeedback.cancelRunnerBrowserAuth(session.id).catch(() => { });
+        }
+        onClose();
+    };
+    const copyCode = () => {
+        if (!session?.code)
+            return;
+        try {
+            // Avoid a hard Clipboard dep — host app can polyfill.
+            const Clipboard = require('react-native').Clipboard;
+            if (Clipboard?.setString) {
+                Clipboard.setString(session.code);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 1500);
+            }
+        }
+        catch {
+            // best-effort — code is visible on screen regardless
+        }
+    };
+    const openUrl = () => {
+        if (!session?.openUrl)
+            return;
+        try {
+            const { Linking } = require('react-native');
+            Linking.openURL(session.openUrl).catch(() => { });
+        }
+        catch {
+            /* ignore */
+        }
+    };
+    return (<react_native_1.Modal visible={true} transparent animationType="fade" onRequestClose={handleClose}>
+      <react_native_1.View style={runnerAuthModalStyles.overlay}>
+        <react_native_1.View style={runnerAuthModalStyles.card}>
+          <react_native_1.View style={runnerAuthModalStyles.header}>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={runnerAuthModalStyles.title}>Sign in to {runnerLabel}</react_native_1.Text>
+              <react_native_1.Text style={runnerAuthModalStyles.subtitle}>
+                Opens a one-time URL + code. Enter it in any browser.
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Pressable onPress={handleClose} hitSlop={10}>
+              <react_native_1.Text style={runnerAuthModalStyles.close}>×</react_native_1.Text>
+            </react_native_1.Pressable>
+          </react_native_1.View>
+
+          {startError ? (<react_native_1.View style={runnerAuthModalStyles.errorBox}>
+              <react_native_1.Text style={runnerAuthModalStyles.errorTitle}>Couldn't start</react_native_1.Text>
+              <react_native_1.Text style={runnerAuthModalStyles.errorBody}>{startError}</react_native_1.Text>
+            </react_native_1.View>) : !session ? (<react_native_1.Text style={runnerAuthModalStyles.dim}>
+              Starting the sign-in flow on the remote machine…
+            </react_native_1.Text>) : session.status === 'completed' ? (<react_native_1.View style={runnerAuthModalStyles.successBox}>
+              <react_native_1.Text style={runnerAuthModalStyles.successTitle}>✓ Signed in</react_native_1.Text>
+              <react_native_1.Text style={runnerAuthModalStyles.successBody}>
+                {session.detail || 'Auth stored on the remote machine.'}
+              </react_native_1.Text>
+            </react_native_1.View>) : session.status === 'failed' || session.status === 'cancelled' ? (<react_native_1.View style={runnerAuthModalStyles.errorBox}>
+              <react_native_1.Text style={runnerAuthModalStyles.errorTitle}>
+                {session.status === 'cancelled' ? 'Cancelled' : 'Failed'}
+              </react_native_1.Text>
+              <react_native_1.Text style={runnerAuthModalStyles.errorBody}>
+                {session.error || session.detail || 'The CLI exited before sign-in completed.'}
+              </react_native_1.Text>
+            </react_native_1.View>) : (<react_native_1.View>
+              {session.openUrl ? (<react_native_1.Pressable onPress={openUrl} style={runnerAuthModalStyles.urlBox}>
+                  <react_native_1.Text style={runnerAuthModalStyles.urlText} numberOfLines={2}>
+                    ↗ {session.openUrl}
+                  </react_native_1.Text>
+                </react_native_1.Pressable>) : (<react_native_1.Text style={runnerAuthModalStyles.dim}>
+                  Waiting for verification URL from the remote CLI…
+                </react_native_1.Text>)}
+              {session.code ? (<react_native_1.View style={{ marginTop: 12 }}>
+                  <react_native_1.Text style={runnerAuthModalStyles.codeLabel}>ENTER THIS CODE</react_native_1.Text>
+                  <react_native_1.Pressable onPress={copyCode} style={runnerAuthModalStyles.codeBox}>
+                    <react_native_1.Text style={runnerAuthModalStyles.codeText}>{session.code}</react_native_1.Text>
+                    <react_native_1.Text style={runnerAuthModalStyles.codeHint}>
+                      {copied ? 'copied' : 'tap to copy'}
+                    </react_native_1.Text>
+                  </react_native_1.Pressable>
+                </react_native_1.View>) : null}
+              <react_native_1.Text style={runnerAuthModalStyles.phishingHint}>
+                Device codes are a common phishing target. Never share this code. This dialog
+                turns green automatically once sign-in completes.
+              </react_native_1.Text>
+            </react_native_1.View>)}
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+const runnerAuthRowStyles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 8,
+        flexWrap: 'wrap',
+    },
+    button: {
+        flexGrow: 1,
+        flexBasis: 0,
+        minWidth: 120,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(148,163,184,0.22)',
+        backgroundColor: 'rgba(15,23,42,0.6)',
+    },
+    buttonPressed: { opacity: 0.7 },
+    buttonDisabled: { opacity: 0.4 },
+    buttonLabel: {
+        fontSize: 10,
+        color: '#94a3b8',
+        textTransform: 'uppercase',
+        letterSpacing: 0.8,
+    },
+    buttonName: {
+        marginTop: 2,
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#f1f5f9',
+    },
+});
+const runnerAuthModalStyles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(2,6,23,0.75)',
+        padding: 16,
+    },
+    card: {
+        width: '100%',
+        maxWidth: 420,
+        backgroundColor: '#0f172a',
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: 'rgba(148,163,184,0.18)',
+        padding: 18,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        marginBottom: 12,
+    },
+    title: { color: '#f1f5f9', fontSize: 16, fontWeight: '600' },
+    subtitle: { color: '#94a3b8', fontSize: 11, marginTop: 2 },
+    close: { color: '#94a3b8', fontSize: 22, lineHeight: 22, paddingHorizontal: 4 },
+    dim: {
+        color: '#94a3b8',
+        fontSize: 12,
+        padding: 12,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(148,163,184,0.2)',
+        backgroundColor: 'rgba(15,23,42,0.6)',
+    },
+    errorBox: {
+        padding: 12,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(248,113,113,0.35)',
+        backgroundColor: 'rgba(248,113,113,0.1)',
+    },
+    errorTitle: { color: '#fca5a5', fontWeight: '600', marginBottom: 4, fontSize: 13 },
+    errorBody: { color: '#fca5a5', fontSize: 12 },
+    successBox: {
+        padding: 14,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(34,197,94,0.35)',
+        backgroundColor: 'rgba(34,197,94,0.1)',
+    },
+    successTitle: { color: '#4ade80', fontSize: 14, fontWeight: '600', marginBottom: 4 },
+    successBody: { color: '#86efac', fontSize: 12 },
+    urlBox: {
+        padding: 12,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(99,102,241,0.35)',
+        backgroundColor: 'rgba(99,102,241,0.1)',
+    },
+    urlText: { color: '#c7d2fe', fontSize: 13 },
+    codeLabel: {
+        fontSize: 10,
+        fontWeight: '600',
+        color: '#94a3b8',
+        letterSpacing: 0.8,
+        marginBottom: 4,
+    },
+    codeBox: {
+        padding: 14,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(148,163,184,0.22)',
+        backgroundColor: 'rgba(15,23,42,0.8)',
+        alignItems: 'center',
+    },
+    codeText: {
+        color: '#f1f5f9',
+        fontSize: 22,
+        letterSpacing: 6,
+        fontFamily: 'Menlo',
+    },
+    codeHint: { color: '#64748b', fontSize: 10, marginTop: 4, textTransform: 'uppercase' },
+    phishingHint: {
+        color: '#475569',
+        fontSize: 10,
+        marginTop: 12,
+        lineHeight: 14,
+    },
+});

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/P2PClient.d.ts

@@ -1,4 +1,4 @@
-import { FeedbackBundle, TestSession, VoiceCapability } from './types';
+import { FeedbackBundle, RunnerBrowserAuthSession, TestSession, VoiceCapability } from './types';
 export interface FeedbackEvent {
     type: string;
     timestamp: string;
@@ -21,11 +21,32 @@ export interface ReloadAck {
 export declare class P2PClient {
     private baseUrl;
     private authToken;
-    constructor(baseUrl: string, authToken: string);
+    /**
+     * Shared relay password. Required when baseUrl points through the
+     * Yaver managed relay (e.g. https://public.yaver.io/d/<deviceId>) —
+     * the relay rejects unauthenticated requests with 401. Attached as
+     * X-Relay-Password on every agent request.
+     */
+    private relayPassword;
+    constructor(baseUrl: string, authToken: string, relayPassword?: string);
     /** Update the base URL (e.g. after re-discovery). */
     setBaseUrl(url: string): void;
     /** Update the auth token. */
     setAuthToken(token: string): void;
+    /** Update the relay password (used for managed-relay baseUrls). */
+    setRelayPassword(password: string): void;
+    /** Merge in Authorization + (optional) X-Relay-Password on top of a header block. */
+    private authHeaders;
+    /**
+     * Start a remote browser-style sign-in for a runner (codex --device-auth
+     * / claude auth login --console). Returns a session id; callers poll
+     * getRunnerBrowserAuthStatus to surface the verification URL + one-time
+     * code. No API keys involved — the CLI writes its own auth.json once
+     * the user completes the flow in any browser.
+     */
+    startRunnerBrowserAuth(runner: string): Promise<RunnerBrowserAuthSession>;
+    getRunnerBrowserAuthStatus(sessionId: string): Promise<RunnerBrowserAuthSession>;
+    cancelRunnerBrowserAuth(sessionId: string): Promise<void>;
     /** Health check — returns true if the agent is reachable. */
     health(): Promise<boolean>;
     /** Get agent info (hostname, version, platform). */