yaver-feedback-react-native 0.8.2 → 0.8.4

package/dist/AuthOverlay.js

@@ -38,6 +38,7 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const LoginScreen_1 = require("./LoginScreen");
 const MachinePickerScreen_1 = require("./MachinePickerScreen");
+const GuestOnboardingScreen_1 = require("./GuestOnboardingScreen");
 const YaverFeedback_1 = require("./YaverFeedback");
 const auth_1 = require("./auth");
 /**
@@ -56,8 +57,10 @@ const auth_1 = require("./auth");
  */
 const AuthOverlay = () => {
     const [loginVisible, setLoginVisible] = (0, react_1.useState)(false);
+    const [guestVisible, setGuestVisible] = (0, react_1.useState)(false);
     const [pickerVisible, setPickerVisible] = (0, react_1.useState)(false);
     const [token, setToken] = (0, react_1.useState)(null);
+    const [pendingInviteCode, setPendingInviteCode] = (0, react_1.useState)(null);
     (0, react_1.useEffect)(() => {
         let mounted = true;
         (async () => {
@@ -79,26 +82,53 @@ const AuthOverlay = () => {
             pickerSub.remove();
         };
     }, []);
-    const handleLoggedIn = async (newToken) => {
+    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);
+            return;
+        }
+        if (devices.owned.length === 0 && devices.shared.length === 0) {
+            setGuestVisible(true);
+            return;
+        }
         setPickerVisible(true);
     };
+    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);
         // 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)}/>
+        <LoginScreen_1.YaverLoginScreen onLoggedIn={handleLoggedIn} onCancel={() => setLoginVisible(false)} 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>
+
+      <react_native_1.Modal visible={guestVisible && !!token} animationType="slide" presentationStyle="fullScreen" onRequestClose={() => setGuestVisible(false)}>
+        {token && (<GuestOnboardingScreen_1.YaverGuestOnboardingScreen token={token} initialInviteCode={pendingInviteCode ?? YaverFeedback_1.YaverFeedback.getConfig()?.guestInviteCode} onContinue={() => {
+                setGuestVisible(false);
+                setPendingInviteCode(null);
+                setPickerVisible(true);
+            }} onCancel={() => {
+                setGuestVisible(false);
+                setPendingInviteCode(null);
+                setPickerVisible(true);
+            }}/>)}
+      </react_native_1.Modal>
     </>);
 };
 exports.AuthOverlay = AuthOverlay;

package/dist/Discovery.js

@@ -174,8 +174,10 @@ class YaverDiscovery {
                 runnerDown: !!d.runnerDown,
                 lastHeartbeat: d.lastHeartbeat ?? 0,
                 isGuest: !!d.isGuest,
+                hostUserId: d.hostUserId,
                 hostName: d.hostName,
                 hostEmail: d.hostEmail,
+                hostUserIdString: d.hostUserIdString,
                 accessScope: d.accessScope ?? 'owner',
                 quicHost: d.quicHost ?? d.host ?? '',
                 quicPort: d.quicPort ?? 0,

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)
@@ -437,8 +456,29 @@ const FeedbackModal = () => {
     // user types what they want, hits Send, sees the task id back. If
     // left blank, we default to "pick the next small improvement"
     // so a one-tap workflow still works for lazy days.
-    const handleVibingButton = (0, react_1.useCallback)(() => {
+    const handleVibingButton = (0, react_1.useCallback)(async () => {
         if (!showVibeInput) {
+            const client = YaverFeedback_1.YaverFeedback.getP2PClient();
+            if (!client) {
+                setError('Not connected to the agent yet.');
+                return;
+            }
+            setError(null);
+            try {
+                const eligibility = await client.getVibingEligibility();
+                if (!eligibility.canVibe) {
+                    const message = eligibility.guidance && eligibility.guidance.trim()
+                        ? `${eligibility.reason ?? 'Vibe coding is unavailable.'} ${eligibility.guidance}`
+                        : eligibility.reason ?? 'Vibe coding is unavailable.';
+                    setError(message);
+                    setToast('Vibe coding unavailable for this project.');
+                    return;
+                }
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : String(err));
+                return;
+            }
             setShowVibeInput(true);
             return;
         }
@@ -494,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/GuestOnboardingScreen.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface YaverGuestOnboardingScreenProps {
+    token: string;
+    initialInviteCode?: string;
+    onContinue: () => void;
+    onCancel?: () => void;
+}
+export declare const YaverGuestOnboardingScreen: React.FC<YaverGuestOnboardingScreenProps>;

package/dist/GuestOnboardingScreen.js

@@ -0,0 +1,282 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YaverGuestOnboardingScreen = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const auth_1 = require("./auth");
+const YaverGuestOnboardingScreen = ({ token, initialInviteCode, onContinue, onCancel, }) => {
+    const [code, setCode] = (0, react_1.useState)((initialInviteCode ?? '').toUpperCase());
+    const [preview, setPreview] = (0, react_1.useState)(null);
+    const [hosts, setHosts] = (0, react_1.useState)({ pending: [], active: [] });
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [busy, setBusy] = (0, react_1.useState)(false);
+    const [error, setError] = (0, react_1.useState)(null);
+    const cleanedCode = (0, react_1.useMemo)(() => code.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 6), [code]);
+    const loadHosts = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const result = await (0, auth_1.fetchGuestHosts)(token);
+            setHosts(result);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [token]);
+    (0, react_1.useEffect)(() => {
+        void loadHosts();
+    }, [loadHosts]);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        if (cleanedCode.length !== 6) {
+            setPreview(null);
+            return;
+        }
+        (async () => {
+            try {
+                const result = await (0, auth_1.findInviteByCode)(token, cleanedCode);
+                if (!cancelled) {
+                    setPreview(result);
+                    if (!result) {
+                        setError('Invite code not found or expired.');
+                    }
+                    else {
+                        setError(null);
+                    }
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setPreview(null);
+                    setError(err instanceof Error ? err.message : String(err));
+                }
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [cleanedCode, token]);
+    const handleAcceptCode = (0, react_1.useCallback)(async () => {
+        if (cleanedCode.length !== 6) {
+            setError('Enter the 6-character invite code from the host.');
+            return;
+        }
+        setBusy(true);
+        setError(null);
+        try {
+            await (0, auth_1.acceptGuestByCode)(token, cleanedCode, preview?.proposedDeviceIds);
+            await loadHosts();
+            onContinue();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [cleanedCode, loadHosts, onContinue, preview?.proposedDeviceIds, token]);
+    const handleAcceptPending = (0, react_1.useCallback)(async (hostUserId) => {
+        setBusy(true);
+        setError(null);
+        try {
+            await (0, auth_1.acceptGuestInvitation)(token, hostUserId);
+            await loadHosts();
+            onContinue();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusy(false);
+        }
+    }, [loadHosts, onContinue, token]);
+    return (<react_native_1.SafeAreaView style={styles.container}>
+      <react_native_1.ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
+        <react_native_1.View style={styles.header}>
+          <react_native_1.View>
+            <react_native_1.Text style={styles.title}>Guest Access</react_native_1.Text>
+            <react_native_1.Text style={styles.subtitle}>
+              Join a host&apos;s repo-scoped Feedback SDK access without leaving the app.
+            </react_native_1.Text>
+          </react_native_1.View>
+          {onCancel && (<react_native_1.Pressable onPress={onCancel} style={styles.skipBtn}>
+              <react_native_1.Text style={styles.skipText}>Skip</react_native_1.Text>
+            </react_native_1.Pressable>)}
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.card}>
+          <react_native_1.Text style={styles.cardTitle}>Have an invite code?</react_native_1.Text>
+          <react_native_1.Text style={styles.cardText}>
+            Enter the 6-character code from the host. After redemption you can pick the shared machine directly here.
+          </react_native_1.Text>
+          <react_native_1.TextInput style={styles.input} value={cleanedCode} onChangeText={setCode} placeholder="ABC123" placeholderTextColor="#667085" autoCapitalize="characters" autoCorrect={false} maxLength={6}/>
+          {preview && (<react_native_1.View style={styles.previewBox}>
+              <react_native_1.Text style={styles.previewTitle}>{preview.hostName}</react_native_1.Text>
+              <react_native_1.Text style={styles.previewMeta}>{preview.hostEmail}</react_native_1.Text>
+              <react_native_1.Text style={styles.previewMeta}>
+                {preview.hostDevices.length > 0
+                ? `${preview.hostDevices.length} host machine${preview.hostDevices.length === 1 ? '' : 's'} shared`
+                : 'Host machine list will appear after acceptance'}
+              </react_native_1.Text>
+            </react_native_1.View>)}
+          <react_native_1.Pressable onPress={() => void handleAcceptCode()} disabled={busy || cleanedCode.length !== 6} style={({ pressed }) => [
+            styles.primaryBtn,
+            (pressed || busy || cleanedCode.length !== 6) && styles.primaryBtnPressed,
+        ]}>
+            {busy ? <react_native_1.ActivityIndicator color="#fff"/> : <react_native_1.Text style={styles.primaryBtnText}>Redeem Code</react_native_1.Text>}
+          </react_native_1.Pressable>
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.card}>
+          <react_native_1.Text style={styles.cardTitle}>Pending host invites</react_native_1.Text>
+          <react_native_1.Text style={styles.cardText}>
+            If a host invited your email directly, it should appear here after you sign up.
+          </react_native_1.Text>
+          {loading ? (<react_native_1.ActivityIndicator color="#98a2b3" style={{ marginTop: 12 }}/>) : hosts.pending.length > 0 ? (hosts.pending.map((invite) => (<react_native_1.View key={`${invite.hostUserId}:${invite.createdAt}`} style={styles.inviteRow}>
+                <react_native_1.View style={{ flex: 1 }}>
+                  <react_native_1.Text style={styles.inviteName}>{invite.hostName}</react_native_1.Text>
+                  <react_native_1.Text style={styles.inviteMeta}>{invite.hostEmail}</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.Pressable onPress={() => void handleAcceptPending(invite.hostUserId)} disabled={busy} style={({ pressed }) => [
+                styles.secondaryBtn,
+                (pressed || busy) && styles.secondaryBtnPressed,
+            ]}>
+                  <react_native_1.Text style={styles.secondaryBtnText}>Accept</react_native_1.Text>
+                </react_native_1.Pressable>
+              </react_native_1.View>))) : (<react_native_1.Text style={styles.emptyText}>No pending host invites on this account yet.</react_native_1.Text>)}
+        </react_native_1.View>
+
+        <react_native_1.View style={styles.cardMuted}>
+          <react_native_1.Text style={styles.cardTitle}>No machine yet?</react_native_1.Text>
+          <react_native_1.Text style={styles.cardText}>
+            That is fine. You can still sign up here and redeem the host&apos;s guest access. Shared machines will appear once the host has one running. Later you can install Yaver on your own machine too.
+          </react_native_1.Text>
+        </react_native_1.View>
+
+        {error ? <react_native_1.Text style={styles.error}>{error}</react_native_1.Text> : null}
+
+        <react_native_1.Pressable onPress={onContinue} style={({ pressed }) => [styles.linkBtn, pressed && { opacity: 0.7 }]}>
+          <react_native_1.Text style={styles.linkBtnText}>Continue to machine picker</react_native_1.Text>
+        </react_native_1.Pressable>
+      </react_native_1.ScrollView>
+    </react_native_1.SafeAreaView>);
+};
+exports.YaverGuestOnboardingScreen = YaverGuestOnboardingScreen;
+const styles = react_native_1.StyleSheet.create({
+    container: { flex: 1, backgroundColor: '#0f172a' },
+    content: { padding: 20, gap: 16 },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        marginBottom: 8,
+    },
+    title: { color: '#f8fafc', fontSize: 24, fontWeight: '700' },
+    subtitle: { color: '#94a3b8', fontSize: 14, marginTop: 6, maxWidth: 280 },
+    skipBtn: { paddingVertical: 6, paddingHorizontal: 10 },
+    skipText: { color: '#cbd5e1', fontSize: 13, fontWeight: '600' },
+    card: {
+        backgroundColor: 'rgba(15,23,42,0.82)',
+        borderWidth: 1,
+        borderColor: 'rgba(148,163,184,0.18)',
+        borderRadius: 16,
+        padding: 16,
+    },
+    cardMuted: {
+        backgroundColor: 'rgba(30,41,59,0.9)',
+        borderRadius: 16,
+        padding: 16,
+    },
+    cardTitle: { color: '#e2e8f0', fontSize: 16, fontWeight: '700' },
+    cardText: { color: '#94a3b8', fontSize: 13, lineHeight: 20, marginTop: 8 },
+    input: {
+        marginTop: 14,
+        borderWidth: 1,
+        borderColor: 'rgba(148,163,184,0.28)',
+        borderRadius: 12,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        backgroundColor: 'rgba(2,6,23,0.88)',
+        color: '#f8fafc',
+        fontSize: 18,
+        letterSpacing: 3,
+        textAlign: 'center',
+    },
+    previewBox: {
+        marginTop: 12,
+        padding: 12,
+        borderRadius: 12,
+        backgroundColor: 'rgba(30,41,59,0.75)',
+    },
+    previewTitle: { color: '#f8fafc', fontSize: 15, fontWeight: '600' },
+    previewMeta: { color: '#94a3b8', fontSize: 12, marginTop: 4 },
+    primaryBtn: {
+        marginTop: 14,
+        backgroundColor: '#2563eb',
+        borderRadius: 12,
+        minHeight: 46,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    primaryBtnPressed: { opacity: 0.6 },
+    primaryBtnText: { color: '#fff', fontSize: 15, fontWeight: '700' },
+    inviteRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 12,
+        marginTop: 12,
+        paddingTop: 12,
+        borderTopWidth: 1,
+        borderTopColor: 'rgba(148,163,184,0.12)',
+    },
+    inviteName: { color: '#f8fafc', fontSize: 14, fontWeight: '600' },
+    inviteMeta: { color: '#94a3b8', fontSize: 12, marginTop: 4 },
+    secondaryBtn: {
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderRadius: 10,
+        backgroundColor: 'rgba(37,99,235,0.16)',
+    },
+    secondaryBtnPressed: { opacity: 0.6 },
+    secondaryBtnText: { color: '#bfdbfe', fontSize: 13, fontWeight: '700' },
+    emptyText: { color: '#64748b', fontSize: 13, marginTop: 12 },
+    error: { color: '#f87171', fontSize: 13, marginTop: 4 },
+    linkBtn: { alignItems: 'center', paddingVertical: 8 },
+    linkBtnText: { color: '#cbd5e1', fontSize: 14, fontWeight: '600' },
+});

package/dist/LoginScreen.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
 export interface YaverLoginScreenProps {
     /** Invoked once a session token is issued and the user is loaded. */
-    onLoggedIn: (token: string) => void;
+    onLoggedIn: (token: string, opts?: {
+        inviteCode?: string;
+    }) => void;
     /** Optional cancel button shown in header. */
     onCancel?: () => void;
+    /** Optional prefilled guest invite code from config / deep link. */
+    initialInviteCode?: string;
 }
 /**
  * Full-screen in-SDK login. Mirrors the Yaver mobile app login UX: native

package/dist/LoginScreen.js

@@ -91,7 +91,7 @@ const iconStyles = react_native_1.StyleSheet.create({
  * Apple Sign-In on iOS, in-app browser OAuth for Google/GitHub/GitLab/
  * Microsoft (no codes, no leaving the app), and inline email/password.
  */
-const YaverLoginScreen = ({ onLoggedIn, onCancel, }) => {
+const YaverLoginScreen = ({ onLoggedIn, onCancel, initialInviteCode, }) => {
     const [busyProvider, setBusyProvider] = (0, react_1.useState)(null);
     const [showEmailForm, setShowEmailForm] = (0, react_1.useState)(false);
     const [isSignUp, setIsSignUp] = (0, react_1.useState)(false);
@@ -99,6 +99,7 @@ const YaverLoginScreen = ({ onLoggedIn, onCancel, }) => {
     const [email, setEmail] = (0, react_1.useState)('');
     const [password, setPassword] = (0, react_1.useState)('');
     const [confirmPassword, setConfirmPassword] = (0, react_1.useState)('');
+    const [inviteCode, setInviteCode] = (0, react_1.useState)((initialInviteCode ?? '').toUpperCase());
     const [emailBusy, setEmailBusy] = (0, react_1.useState)(false);
     const [emailError, setEmailError] = (0, react_1.useState)('');
     const finish = async (token) => {
@@ -106,7 +107,8 @@ const YaverLoginScreen = ({ onLoggedIn, onCancel, }) => {
         await (0, auth_1.saveToken)(token);
         if (user)
             await (0, auth_1.saveUser)(user);
-        onLoggedIn(token);
+        const cleanedInviteCode = inviteCode.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 6);
+        onLoggedIn(token, cleanedInviteCode ? { inviteCode: cleanedInviteCode } : undefined);
     };
     const handleApple = async () => {
         setBusyProvider('apple');
@@ -177,14 +179,18 @@ const YaverLoginScreen = ({ onLoggedIn, onCancel, }) => {
     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)
@@ -212,6 +218,7 @@ const YaverLoginScreen = ({ onLoggedIn, onCancel, }) => {
                 <react_native_1.TextInput style={styles.input} placeholder="Email" placeholderTextColor="#666" value={email} onChangeText={setEmail} keyboardType="email-address" autoCapitalize="none" autoCorrect={false}/>
                 <react_native_1.TextInput style={styles.input} placeholder="Password" placeholderTextColor="#666" value={password} onChangeText={setPassword} secureTextEntry autoCapitalize="none"/>
                 {isSignUp && (<react_native_1.TextInput style={styles.input} placeholder="Confirm Password" placeholderTextColor="#666" value={confirmPassword} onChangeText={setConfirmPassword} secureTextEntry/>)}
+                {isSignUp && (<react_native_1.TextInput style={styles.input} placeholder="Invite Code (optional)" placeholderTextColor="#666" value={inviteCode} onChangeText={(value) => setInviteCode(value.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 6))} autoCapitalize="characters" autoCorrect={false} maxLength={6}/>)}
 
                 {emailError ? (<react_native_1.Text style={styles.errorText}>{emailError}</react_native_1.Text>) : null}
 
@@ -249,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,8 +61,25 @@ 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('Hiç makine bulunamadı — önce bir makinede `yaver auth` + `yaver serve` çalıştır.');
+                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.');
             }
         }
         catch (err) {
@@ -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';
         }