yaver-feedback-react-native 0.8.2 → 0.8.4

package/src/GuestOnboardingScreen.tsx

@@ -0,0 +1,307 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  SafeAreaView,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  View,
+} from 'react-native';
+import {
+  acceptGuestByCode,
+  acceptGuestInvitation,
+  fetchGuestHosts,
+  findInviteByCode,
+  type GuestHostsResponse,
+  type InvitationPreview,
+} from './auth';
+
+export interface YaverGuestOnboardingScreenProps {
+  token: string;
+  initialInviteCode?: string;
+  onContinue: () => void;
+  onCancel?: () => void;
+}
+
+export const YaverGuestOnboardingScreen: React.FC<YaverGuestOnboardingScreenProps> = ({
+  token,
+  initialInviteCode,
+  onContinue,
+  onCancel,
+}) => {
+  const [code, setCode] = useState((initialInviteCode ?? '').toUpperCase());
+  const [preview, setPreview] = useState<InvitationPreview | null>(null);
+  const [hosts, setHosts] = useState<GuestHostsResponse>({ pending: [], active: [] });
+  const [loading, setLoading] = useState(true);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const cleanedCode = useMemo(() => code.toUpperCase().replace(/[^A-Z0-9]/g, '').slice(0, 6), [code]);
+
+  const loadHosts = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await fetchGuestHosts(token);
+      setHosts(result);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [token]);
+
+  useEffect(() => {
+    void loadHosts();
+  }, [loadHosts]);
+
+  useEffect(() => {
+    let cancelled = false;
+    if (cleanedCode.length !== 6) {
+      setPreview(null);
+      return;
+    }
+    (async () => {
+      try {
+        const result = await 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 = useCallback(async () => {
+    if (cleanedCode.length !== 6) {
+      setError('Enter the 6-character invite code from the host.');
+      return;
+    }
+    setBusy(true);
+    setError(null);
+    try {
+      await 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 = useCallback(async (hostUserId: string) => {
+    setBusy(true);
+    setError(null);
+    try {
+      await acceptGuestInvitation(token, hostUserId);
+      await loadHosts();
+      onContinue();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  }, [loadHosts, onContinue, token]);
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView contentContainerStyle={styles.content} keyboardShouldPersistTaps="handled">
+        <View style={styles.header}>
+          <View>
+            <Text style={styles.title}>Guest Access</Text>
+            <Text style={styles.subtitle}>
+              Join a host&apos;s repo-scoped Feedback SDK access without leaving the app.
+            </Text>
+          </View>
+          {onCancel && (
+            <Pressable onPress={onCancel} style={styles.skipBtn}>
+              <Text style={styles.skipText}>Skip</Text>
+            </Pressable>
+          )}
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>Have an invite code?</Text>
+          <Text style={styles.cardText}>
+            Enter the 6-character code from the host. After redemption you can pick the shared machine directly here.
+          </Text>
+          <TextInput
+            style={styles.input}
+            value={cleanedCode}
+            onChangeText={setCode}
+            placeholder="ABC123"
+            placeholderTextColor="#667085"
+            autoCapitalize="characters"
+            autoCorrect={false}
+            maxLength={6}
+          />
+          {preview && (
+            <View style={styles.previewBox}>
+              <Text style={styles.previewTitle}>{preview.hostName}</Text>
+              <Text style={styles.previewMeta}>{preview.hostEmail}</Text>
+              <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'}
+              </Text>
+            </View>
+          )}
+          <Pressable
+            onPress={() => void handleAcceptCode()}
+            disabled={busy || cleanedCode.length !== 6}
+            style={({ pressed }) => [
+              styles.primaryBtn,
+              (pressed || busy || cleanedCode.length !== 6) && styles.primaryBtnPressed,
+            ]}
+          >
+            {busy ? <ActivityIndicator color="#fff" /> : <Text style={styles.primaryBtnText}>Redeem Code</Text>}
+          </Pressable>
+        </View>
+
+        <View style={styles.card}>
+          <Text style={styles.cardTitle}>Pending host invites</Text>
+          <Text style={styles.cardText}>
+            If a host invited your email directly, it should appear here after you sign up.
+          </Text>
+          {loading ? (
+            <ActivityIndicator color="#98a2b3" style={{ marginTop: 12 }} />
+          ) : hosts.pending.length > 0 ? (
+            hosts.pending.map((invite) => (
+              <View key={`${invite.hostUserId}:${invite.createdAt}`} style={styles.inviteRow}>
+                <View style={{ flex: 1 }}>
+                  <Text style={styles.inviteName}>{invite.hostName}</Text>
+                  <Text style={styles.inviteMeta}>{invite.hostEmail}</Text>
+                </View>
+                <Pressable
+                  onPress={() => void handleAcceptPending(invite.hostUserId)}
+                  disabled={busy}
+                  style={({ pressed }) => [
+                    styles.secondaryBtn,
+                    (pressed || busy) && styles.secondaryBtnPressed,
+                  ]}
+                >
+                  <Text style={styles.secondaryBtnText}>Accept</Text>
+                </Pressable>
+              </View>
+            ))
+          ) : (
+            <Text style={styles.emptyText}>No pending host invites on this account yet.</Text>
+          )}
+        </View>
+
+        <View style={styles.cardMuted}>
+          <Text style={styles.cardTitle}>No machine yet?</Text>
+          <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.
+          </Text>
+        </View>
+
+        {error ? <Text style={styles.error}>{error}</Text> : null}
+
+        <Pressable
+          onPress={onContinue}
+          style={({ pressed }) => [styles.linkBtn, pressed && { opacity: 0.7 }]}
+        >
+          <Text style={styles.linkBtnText}>Continue to machine picker</Text>
+        </Pressable>
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = 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/src/LoginScreen.tsx

@@ -113,9 +113,11 @@ const iconStyles = StyleSheet.create({
 
 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;
 }
 
 /**
@@ -126,6 +128,7 @@ export interface YaverLoginScreenProps {
 export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
   onLoggedIn,
   onCancel,
+  initialInviteCode,
 }) => {
   const [busyProvider, setBusyProvider] = useState<OAuthProvider | 'apple' | null>(null);
   const [showEmailForm, setShowEmailForm] = useState(false);
@@ -134,6 +137,7 @@ export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
+  const [inviteCode, setInviteCode] = useState((initialInviteCode ?? '').toUpperCase());
   const [emailBusy, setEmailBusy] = useState(false);
   const [emailError, setEmailError] = useState('');
 
@@ -141,7 +145,8 @@ export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
     const user = await validateToken(token);
     await saveToken(token);
     if (user) await 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 () => {
@@ -231,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>
@@ -241,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)
@@ -321,6 +330,20 @@ export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
                     secureTextEntry
                   />
                 )}
+                {isSignUp && (
+                  <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 ? (
                   <Text style={styles.errorText}>{emailError}</Text>
@@ -372,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,8 +55,29 @@ 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('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) {
       setError(err instanceof Error ? err.message : String(err));
@@ -77,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
@@ -93,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/P2PClient.ts

@@ -449,6 +449,39 @@ export class P2PClient {
     return response.json();
   }
 
+  async getVibingEligibility(
+    opts?: { projectName?: string; bundleId?: string; projectPath?: string },
+  ): Promise<{
+    canVibe: boolean;
+    reason?: string;
+    guidance?: string;
+    projectName?: string;
+    projectPath?: string;
+    provider?: string;
+    repoFullName?: string;
+  }> {
+    const identity = resolveAppIdentity(opts);
+    const params = new URLSearchParams();
+    if (identity.projectName ?? opts?.projectName) {
+      params.set('projectName', identity.projectName ?? opts?.projectName ?? '');
+    }
+    if (identity.bundleId ?? opts?.bundleId) {
+      params.set('bundleId', identity.bundleId ?? opts?.bundleId ?? '');
+    }
+    if (identity.projectPath ?? opts?.projectPath) {
+      params.set('projectPath', identity.projectPath ?? opts?.projectPath ?? '');
+    }
+    const response = await fetch(`${this.baseUrl}/vibing/eligibility?${params.toString()}`, {
+      method: 'GET',
+      headers: { Authorization: `Bearer ${this.authToken}` },
+    });
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      throw new Error(`[P2PClient] Vibing eligibility failed (${response.status}): ${text}`);
+    }
+    return response.json();
+  }
+
   /**
    * After uploading a feedback bundle with `uploadFeedback`, call this
    * with the returned report id to create a fix task on the agent. The

package/src/YaverFeedback.ts

@@ -10,6 +10,7 @@ import {
   getToken,
   getSelectedDeviceId,
   listReachableDevices,
+  mintGuestSdkToken,
   clearToken,
   clearSelectedDeviceId,
   DEFAULT_CONVEX_SITE_URL,
@@ -49,6 +50,7 @@ let config: FeedbackConfig | null = null;
 let enabled = false;
 let p2pClient: P2PClient | null = null;
 let shakeDetector: ShakeDetector | null = null;
+let p2pAuthToken: string | null = null;
 
 /** Ring buffer of captured errors. */
 let errorBuffer: CapturedError[] = [];
@@ -77,6 +79,44 @@ const flagCache: Map<string, { value: unknown; at: number }> = new Map();
  * Call `YaverFeedback.init()` once at app startup.
  */
 export class YaverFeedback {
+  private static async resolveP2PAuthToken(): Promise<string | null> {
+    if (!config?.authToken) return null;
+    if (!config.preferredDeviceId) return config.authToken;
+    const devices = await listReachableDevices(config.authToken);
+    const all = [...devices.owned, ...devices.shared];
+    const selected = all.find((device) => device.deviceId === config?.preferredDeviceId);
+    if (!selected || !selected.isGuest || selected.accessScope !== 'shared-scoped') {
+      return config.authToken;
+    }
+    if (!selected.hostUserId) {
+      return config.authToken;
+    }
+    const delegated = await mintGuestSdkToken(
+      config.authToken,
+      selected.hostUserId,
+      selected.deviceId,
+    );
+    return delegated.token;
+  }
+
+  private static async rebuildP2PClient(agentUrl?: string): Promise<void> {
+    if (!config) return;
+    const effectiveUrl = agentUrl ?? config.agentUrl;
+    if (!effectiveUrl) {
+      p2pClient = null;
+      p2pAuthToken = null;
+      return;
+    }
+    const token = await YaverFeedback.resolveP2PAuthToken();
+    if (!token) {
+      p2pClient = null;
+      p2pAuthToken = null;
+      return;
+    }
+    p2pAuthToken = token;
+    p2pClient = new P2PClient(effectiveUrl, token);
+  }
+
   /**
    * Initialize the feedback SDK with the given configuration.
    * Typically called in your app's root component or entry file.
@@ -130,7 +170,11 @@ export class YaverFeedback {
 
     // Create P2P client if we have a URL
     if (config.agentUrl) {
+      p2pAuthToken = config.authToken ?? null;
       p2pClient = new P2PClient(config.agentUrl, config.authToken ?? '');
+      if (config.authToken) {
+        void YaverFeedback.rebuildP2PClient(config.agentUrl);
+      }
     } else {
       p2pClient = null;
       // Auto-discover agent in the background when convexUrl or LAN is available
@@ -251,7 +295,7 @@ export class YaverFeedback {
       });
       if (result && config) {
         config.agentUrl = result.url;
-        p2pClient = new P2PClient(result.url, config.authToken ?? '');
+        await YaverFeedback.rebuildP2PClient(result.url);
       }
     } catch {
       // Discovery failed — FloatingButton will show disconnected, user can retry
@@ -278,7 +322,7 @@ export class YaverFeedback {
       });
       if (!result) return false;
       config.agentUrl = result.url;
-      p2pClient = new P2PClient(result.url, config.authToken ?? '');
+      await YaverFeedback.rebuildP2PClient(result.url);
       return true;
     } catch {
       return false;
@@ -322,7 +366,7 @@ export class YaverFeedback {
     if (!config) return;
     config.authToken = token;
     if (config.agentUrl) {
-      p2pClient = new P2PClient(config.agentUrl, token);
+      await YaverFeedback.rebuildP2PClient(config.agentUrl);
     } else {
       await YaverFeedback.discoverAgent();
     }
@@ -363,6 +407,7 @@ export class YaverFeedback {
     config.preferredDeviceId = deviceId;
     config.agentUrl = undefined;
     p2pClient = null;
+    p2pAuthToken = null;
     await YaverFeedback.discoverAgent();
   }
 
@@ -388,6 +433,7 @@ export class YaverFeedback {
       config.agentUrl = undefined;
     }
     p2pClient = null;
+    p2pAuthToken = null;
   }
 
   /**
@@ -427,7 +473,7 @@ export class YaverFeedback {
         });
         if (result) {
           config.agentUrl = result.url;
-          p2pClient = new P2PClient(result.url, config.authToken ?? '');
+          await YaverFeedback.rebuildP2PClient(result.url);
         } else if (config.autoLogin !== false && !config.preferredDeviceId) {
           // No agent discovered and no device picked yet — prompt the user
           // to pick one of their machines (handles the non-LAN case where