yaver-feedback-react-native 0.3.0 → 0.5.0

package/src/Discovery.ts

@@ -1,4 +1,24 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
+// AsyncStorage is an optional peer dep — gracefully degrade if missing.
+// Resolved lazily on each call so unit-test mocks of
+// `@react-native-async-storage/async-storage` are picked up even when
+// Discovery.ts is imported before the mock is applied.
+type AsyncStorageLike = {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+};
+function getAsyncStorage(): AsyncStorageLike | null {
+  try {
+    const mod = require('@react-native-async-storage/async-storage');
+    const candidate = mod?.default ?? mod;
+    if (candidate && typeof candidate.getItem === 'function') {
+      return candidate as AsyncStorageLike;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
 
 const STORAGE_KEY = 'yaver_feedback_agent';
 const DEFAULT_PORT = 18080;
@@ -123,9 +143,116 @@ export class YaverDiscovery {
 
       if (!target?.quicHost) return null;
 
+      // Try direct connection first (same LAN)
       const port = target.httpPort ?? DEFAULT_PORT;
-      const url = `http://${target.quicHost}:${port}`;
-      return await YaverDiscovery.probe(url);
+      const directUrl = `http://${target.quicHost}:${port}`;
+      const directResult = await YaverDiscovery.probe(directUrl);
+      if (directResult) return directResult;
+
+      // Direct connection failed — try via HTTP relay (off-LAN)
+      const relayResult = await YaverDiscovery.discoverViaRelay(
+        base, authToken, target.deviceId,
+      );
+      if (relayResult) return relayResult;
+
+      return null;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Discover agent via relay HTTP proxy.
+   * Fetches relay server list from Convex platformConfig, then probes
+   * `{relayHttpUrl}/d/{deviceId}/health` to reach the agent over the internet.
+   */
+  static async discoverViaRelay(
+    convexUrl: string,
+    authToken: string,
+    deviceId: string,
+  ): Promise<DiscoveryResult | null> {
+    try {
+      // Fetch relay server list from user settings first, then platform config
+      const settingsRes = await fetch(`${convexUrl}/auth/validate`, {
+        headers: { Authorization: `Bearer ${authToken}` },
+      });
+      let relayUrl: string | undefined;
+      let relayPassword: string | undefined;
+
+      if (settingsRes.ok) {
+        const settingsData = await settingsRes.json();
+        relayUrl = settingsData.relayUrl;
+        relayPassword = settingsData.relayPassword;
+      }
+
+      // If no user-level relay, fetch platform relay servers
+      if (!relayUrl) {
+        const configRes = await fetch(`${convexUrl}/platform-config?key=relay_servers`);
+        if (configRes.ok) {
+          const configData = await configRes.json();
+          const servers = typeof configData.value === 'string'
+            ? JSON.parse(configData.value)
+            : configData.value;
+          if (Array.isArray(servers) && servers.length > 0) {
+            // Pick the first (highest priority) relay with an httpUrl
+            const relay = servers.find((s: { httpUrl?: string }) => s.httpUrl);
+            if (relay) {
+              relayUrl = relay.httpUrl;
+            }
+          }
+        }
+      }
+
+      if (!relayUrl) return null;
+
+      // Probe agent through relay: {relayHttpUrl}/d/{deviceId}/health
+      const relayBase = `${relayUrl.replace(/\/$/, '')}/d/${deviceId}`;
+      const result = await YaverDiscovery.probeWithHeaders(relayBase, {
+        'X-Relay-Password': relayPassword || '',
+      });
+      return result;
+    } catch {
+      return null;
+    }
+  }
+
+  /**
+   * Probe with extra headers (e.g. relay password).
+   */
+  static async probeWithHeaders(
+    url: string,
+    headers: Record<string, string>,
+  ): Promise<DiscoveryResult | null> {
+    const base = url.replace(/\/$/, '');
+    const start = Date.now();
+
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), TIMEOUT_MS + 3000); // relay adds latency
+
+      const response = await fetch(`${base}/health`, {
+        method: 'GET',
+        headers,
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+
+      if (!response.ok) return null;
+
+      const latency = Date.now() - start;
+      let hostname = 'Unknown';
+      let version = 'unknown';
+
+      try {
+        const data = await response.json();
+        hostname = data.hostname ?? data.name ?? 'Unknown';
+        version = data.version ?? 'unknown';
+      } catch {
+        // Health endpoint might return plain text
+      }
+
+      return { url: base, hostname, version, latency };
     } catch {
       return null;
     }
@@ -185,10 +312,12 @@ export class YaverDiscovery {
     return result;
   }
 
-  /** Get the cached agent connection from AsyncStorage. */
+  /** Get the cached agent connection from storage. */
   static async getStored(): Promise<{ url: string; hostname: string } | null> {
+    const storage = getAsyncStorage();
+    if (!storage) return null;
     try {
-      const raw = await AsyncStorage.getItem(STORAGE_KEY);
+      const raw = await storage.getItem(STORAGE_KEY);
       if (!raw) return null;
       const parsed = JSON.parse(raw);
       if (parsed && typeof parsed.url === 'string') {
@@ -200,10 +329,12 @@ export class YaverDiscovery {
     }
   }
 
-  /** Store a successful discovery result in AsyncStorage. */
+  /** Store a successful discovery result. */
   static async store(result: DiscoveryResult): Promise<void> {
+    const storage = getAsyncStorage();
+    if (!storage) return;
     try {
-      await AsyncStorage.setItem(
+      await storage.setItem(
         STORAGE_KEY,
         JSON.stringify({ url: result.url, hostname: result.hostname }),
       );
@@ -214,8 +345,10 @@ export class YaverDiscovery {
 
   /** Clear the stored agent connection. */
   static async clear(): Promise<void> {
+    const storage = getAsyncStorage();
+    if (!storage) return;
     try {
-      await AsyncStorage.removeItem(STORAGE_KEY);
+      await storage.removeItem(STORAGE_KEY);
     } catch {
       // Storage failure is non-fatal
     }

package/src/FeedbackModal.tsx

@@ -16,6 +16,7 @@ import { BlackBox } from './BlackBox';
 import { captureScreenshot, startAudioRecording, stopAudioRecording } from './capture';
 import { uploadFeedback } from './upload';
 import { TimelineEvent, DeviceInfo, FeedbackBundle, AgentCommentary } from './types';
+import { AuthOverlay } from './AuthOverlay';
 
 type FeedbackMode = 'live' | 'narrated' | 'batch';
 
@@ -327,9 +328,13 @@ export const FeedbackModal: React.FC = () => {
     [],
   );
 
-  if (!visible) return null;
-
+  // The AuthOverlay must stay mounted so it can respond to login / picker
+  // events even when the feedback modal itself isn't visible. The wrapping
+  // fragment keeps the original return shape intact for the modal branch.
   return (
+    <>
+      <AuthOverlay />
+      {visible && (
     <Modal
       visible={visible}
       animationType="slide"
@@ -474,6 +479,8 @@ export const FeedbackModal: React.FC = () => {
         </View>
       </View>
     </Modal>
+      )}
+    </>
   );
 };
 

package/src/FloatingButton.tsx

@@ -119,9 +119,13 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
   const testPollRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const outputScrollRef = useRef<ScrollView>(null);
 
-  // Resolve agent URL and token
+  // Resolve agent URL and token — re-read from config each render
+  // because discoverAgent() may set agentUrl asynchronously after init.
+  const [resolvedAgentUrl, setResolvedAgentUrl] = useState<string | undefined>(
+    agentUrlProp || YaverFeedback.getConfig()?.agentUrl,
+  );
   const config = YaverFeedback.getConfig();
-  const agentUrl = agentUrlProp || config?.agentUrl;
+  const agentUrl = resolvedAgentUrl;
   const authToken = authTokenProp || config?.authToken;
   const panelBg = panelBackgroundColor || config?.panelBackgroundColor || DEFAULT_PANEL_BG;
 
@@ -129,19 +133,27 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     setOutput((prev) => [...prev.slice(-20), line]);
   }, []);
 
-  // Connection health polling
+  // Connection health polling — also picks up agentUrl from config when
+  // it becomes available after background discovery completes.
   useEffect(() => {
-    if (!healthCheckInterval || !agentUrl) return;
+    if (!healthCheckInterval) return;
 
     const check = async () => {
+      // Re-read config in case discoverAgent() resolved since last check
+      const latestUrl = agentUrlProp || YaverFeedback.getConfig()?.agentUrl;
+      if (latestUrl && latestUrl !== resolvedAgentUrl) {
+        setResolvedAgentUrl(latestUrl);
+      }
+      if (!latestUrl) return;
+
       try {
         const client = YaverFeedback.getP2PClient();
         if (client) {
           setIsConnected(await client.health());
-        } else if (agentUrl) {
+        } else {
           const controller = new AbortController();
           const timeout = setTimeout(() => controller.abort(), 3000);
-          const resp = await fetch(`${agentUrl.replace(/\/$/, '')}/health`, {
+          const resp = await fetch(`${latestUrl.replace(/\/$/, '')}/health`, {
             signal: controller.signal,
           });
           clearTimeout(timeout);
@@ -155,7 +167,7 @@ export const FloatingButton: React.FC<FloatingButtonProps> = ({
     check();
     const interval = setInterval(check, healthCheckInterval);
     return () => clearInterval(interval);
-  }, [agentUrl, healthCheckInterval]);
+  }, [agentUrlProp, healthCheckInterval, resolvedAgentUrl]);
 
   const panResponder = useRef(
     PanResponder.create({

package/src/LoginScreen.tsx

@@ -0,0 +1,395 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+  SafeAreaView,
+  ScrollView,
+  Linking,
+  Platform,
+} from 'react-native';
+import {
+  loginWithEmail,
+  signupWithEmail,
+  pollDeviceCode,
+  startDeviceCode,
+  validateToken,
+  saveToken,
+  saveUser,
+  OAuthProvider,
+  DeviceCodeStart,
+} from './auth';
+
+export interface YaverLoginScreenProps {
+  /** Invoked once a session token is issued and the user is loaded. */
+  onLoggedIn: (token: string) => void;
+  /** Optional cancel button shown in header. */
+  onCancel?: () => void;
+}
+
+type Mode = 'device' | 'email';
+
+const PROVIDERS: { id: OAuthProvider; label: string; emoji: string }[] = [
+  { id: 'apple', label: 'Apple', emoji: '' },
+  { id: 'google', label: 'Google', emoji: 'G' },
+  { id: 'github', label: 'GitHub', emoji: '' },
+  { id: 'gitlab', label: 'GitLab', emoji: '' },
+  { id: 'microsoft', label: 'Microsoft', emoji: 'M' },
+];
+
+/**
+ * Full-screen in-SDK login. Device-code is the default flow — users sign in
+ * with any OAuth provider (Apple/Google/GitHub/GitLab/Microsoft) or email on
+ * yaver.io and the SDK polls for the issued session token. Email/password is
+ * available as an inline fallback for headless environments.
+ */
+export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
+  onLoggedIn,
+  onCancel,
+}) => {
+  const [mode, setMode] = useState<Mode>('device');
+
+  const [code, setCode] = useState<DeviceCodeStart | null>(null);
+  const [codeError, setCodeError] = useState<string | null>(null);
+  const [starting, setStarting] = useState(false);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
+  const expiredTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const [emailMode, setEmailMode] = useState<'login' | 'signup'>('login');
+  const [fullName, setFullName] = useState('');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [emailBusy, setEmailBusy] = useState(false);
+  const [emailError, setEmailError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (mode === 'device' && !code && !starting) {
+      void beginDeviceCode(undefined);
+    }
+    return () => {
+      stopPolling();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode]);
+
+  const stopPolling = () => {
+    if (pollRef.current) {
+      clearInterval(pollRef.current);
+      pollRef.current = null;
+    }
+    if (expiredTimerRef.current) {
+      clearTimeout(expiredTimerRef.current);
+      expiredTimerRef.current = null;
+    }
+  };
+
+  const beginDeviceCode = async (preferredProvider?: OAuthProvider) => {
+    setStarting(true);
+    setCodeError(null);
+    stopPolling();
+    try {
+      const result = await startDeviceCode({
+        platform: Platform.OS,
+        machineName: `feedback-sdk-${Platform.OS}`,
+        preferredProvider,
+      });
+      setCode(result);
+
+      pollRef.current = setInterval(async () => {
+        const poll = await pollDeviceCode(result.deviceCode);
+        if (poll.status === 'authorized') {
+          stopPolling();
+          const user = await validateToken(poll.token);
+          await saveToken(poll.token);
+          if (user) await saveUser(user);
+          onLoggedIn(poll.token);
+        } else if (poll.status === 'expired') {
+          stopPolling();
+          setCodeError('Kod doldu — tekrar başlat.');
+          setCode(null);
+        }
+      }, 3_000);
+
+      expiredTimerRef.current = setTimeout(() => {
+        stopPolling();
+        setCode(null);
+        setCodeError('Kod süresi doldu.');
+      }, Math.max(0, result.expiresAt - Date.now()));
+    } catch (err) {
+      setCodeError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setStarting(false);
+    }
+  };
+
+  const openVerification = () => {
+    if (!code) return;
+    Linking.openURL(code.verificationUrl).catch(() => {
+      setCodeError('Tarayıcı açılamadı — URL’yi elle aç.');
+    });
+  };
+
+  const handleEmailSubmit = async () => {
+    setEmailError(null);
+    if (!email.trim() || !password) {
+      setEmailError('E-posta ve parola zorunlu.');
+      return;
+    }
+    setEmailBusy(true);
+    try {
+      const result =
+        emailMode === 'signup'
+          ? await signupWithEmail(fullName.trim() || email.trim(), email.trim(), password)
+          : await loginWithEmail(email.trim(), password);
+      const user = await validateToken(result.token);
+      await saveToken(result.token);
+      if (user) await saveUser(user);
+      onLoggedIn(result.token);
+    } catch (err) {
+      setEmailError(err instanceof Error ? err.message : String(err));
+    } finally {
+      setEmailBusy(false);
+    }
+  };
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <ScrollView
+        contentContainerStyle={styles.content}
+        keyboardShouldPersistTaps="handled"
+      >
+        <View style={styles.header}>
+          <Text style={styles.title}>Yaver Girişi</Text>
+          {onCancel && (
+            <TouchableOpacity onPress={onCancel} style={styles.cancel}>
+              <Text style={styles.cancelText}>İptal</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        <View style={styles.tabRow}>
+          <TouchableOpacity
+            style={[styles.tab, mode === 'device' && styles.tabActive]}
+            onPress={() => setMode('device')}
+          >
+            <Text
+              style={[styles.tabText, mode === 'device' && styles.tabTextActive]}
+            >
+              Hızlı Giriş (OAuth)
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.tab, mode === 'email' && styles.tabActive]}
+            onPress={() => setMode('email')}
+          >
+            <Text
+              style={[styles.tabText, mode === 'email' && styles.tabTextActive]}
+            >
+              E-posta
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {mode === 'device' && (
+          <View style={styles.section}>
+            {starting ? (
+              <ActivityIndicator color="#6366f1" style={{ marginVertical: 40 }} />
+            ) : code ? (
+              <>
+                <Text style={styles.hint}>
+                  Tarayıcıda yaver.io/auth/device aç ve aşağıdaki kodu gir.
+                  Sağlayıcıyla giriş yaptığında buraya otomatik dönecek.
+                </Text>
+                <View style={styles.codeBox}>
+                  <Text style={styles.codeText}>{code.userCode}</Text>
+                </View>
+                <TouchableOpacity style={styles.primaryButton} onPress={openVerification}>
+                  <Text style={styles.primaryButtonText}>Tarayıcıda Aç</Text>
+                </TouchableOpacity>
+
+                <Text style={[styles.hint, { marginTop: 20 }]}>
+                  Sağlayıcıyı önceden seçmek istersen:
+                </Text>
+                <View style={styles.providerRow}>
+                  {PROVIDERS.map((p) => (
+                    <TouchableOpacity
+                      key={p.id}
+                      style={styles.providerButton}
+                      onPress={() => beginDeviceCode(p.id)}
+                    >
+                      <Text style={styles.providerButtonText}>{p.label}</Text>
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </>
+            ) : (
+              <TouchableOpacity
+                style={styles.primaryButton}
+                onPress={() => beginDeviceCode(undefined)}
+              >
+                <Text style={styles.primaryButtonText}>Tekrar Başlat</Text>
+              </TouchableOpacity>
+            )}
+            {codeError && <Text style={styles.error}>{codeError}</Text>}
+          </View>
+        )}
+
+        {mode === 'email' && (
+          <View style={styles.section}>
+            <View style={styles.tabRow}>
+              <TouchableOpacity
+                style={[styles.subTab, emailMode === 'login' && styles.subTabActive]}
+                onPress={() => setEmailMode('login')}
+              >
+                <Text style={styles.subTabText}>Giriş</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={[styles.subTab, emailMode === 'signup' && styles.subTabActive]}
+                onPress={() => setEmailMode('signup')}
+              >
+                <Text style={styles.subTabText}>Kayıt</Text>
+              </TouchableOpacity>
+            </View>
+
+            {emailMode === 'signup' && (
+              <>
+                <Text style={styles.label}>Ad Soyad</Text>
+                <TextInput
+                  style={styles.input}
+                  value={fullName}
+                  onChangeText={setFullName}
+                  placeholder="Adın Soyadın"
+                  placeholderTextColor="#666"
+                  autoCapitalize="words"
+                />
+              </>
+            )}
+
+            <Text style={styles.label}>E-posta</Text>
+            <TextInput
+              style={styles.input}
+              value={email}
+              onChangeText={setEmail}
+              placeholder="you@example.com"
+              placeholderTextColor="#666"
+              keyboardType="email-address"
+              autoCapitalize="none"
+              autoCorrect={false}
+            />
+
+            <Text style={styles.label}>Parola</Text>
+            <TextInput
+              style={styles.input}
+              value={password}
+              onChangeText={setPassword}
+              placeholder="••••••••"
+              placeholderTextColor="#666"
+              secureTextEntry
+              autoCapitalize="none"
+            />
+
+            <TouchableOpacity
+              style={styles.primaryButton}
+              onPress={handleEmailSubmit}
+              disabled={emailBusy}
+            >
+              {emailBusy ? (
+                <ActivityIndicator color="#fff" />
+              ) : (
+                <Text style={styles.primaryButtonText}>
+                  {emailMode === 'signup' ? 'Kayıt Ol' : 'Giriş Yap'}
+                </Text>
+              )}
+            </TouchableOpacity>
+
+            {emailError && <Text style={styles.error}>{emailError}</Text>}
+          </View>
+        )}
+      </ScrollView>
+    </SafeAreaView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: '#1a1a2e' },
+  content: { padding: 24, paddingTop: 16 },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 20,
+  },
+  title: { fontSize: 22, fontWeight: '700', color: '#e0e0e0' },
+  cancel: { padding: 8 },
+  cancelText: { color: '#9ca3af', fontSize: 14 },
+  tabRow: { flexDirection: 'row', gap: 8, marginBottom: 16 },
+  tab: {
+    flex: 1,
+    paddingVertical: 12,
+    borderRadius: 10,
+    backgroundColor: 'rgba(255,255,255,0.05)',
+    alignItems: 'center',
+  },
+  tabActive: { backgroundColor: 'rgba(99,102,241,0.25)' },
+  tabText: { color: '#9ca3af', fontSize: 14, fontWeight: '600' },
+  tabTextActive: { color: '#e0e0e0' },
+  subTab: {
+    flex: 1,
+    paddingVertical: 8,
+    borderRadius: 8,
+    alignItems: 'center',
+    backgroundColor: 'rgba(255,255,255,0.05)',
+  },
+  subTabActive: { backgroundColor: 'rgba(99,102,241,0.2)' },
+  subTabText: { color: '#e0e0e0', fontSize: 13 },
+  section: { marginTop: 4 },
+  hint: { color: '#9ca3af', fontSize: 13, lineHeight: 18 },
+  codeBox: {
+    backgroundColor: 'rgba(99,102,241,0.15)',
+    borderWidth: 1,
+    borderColor: 'rgba(99,102,241,0.35)',
+    borderRadius: 14,
+    paddingVertical: 24,
+    alignItems: 'center',
+    marginTop: 16,
+    marginBottom: 16,
+  },
+  codeText: {
+    color: '#e0e7ff',
+    fontSize: 36,
+    fontWeight: '800',
+    letterSpacing: 6,
+    fontVariant: ['tabular-nums'],
+  },
+  primaryButton: {
+    backgroundColor: '#6366f1',
+    borderRadius: 12,
+    paddingVertical: 14,
+    alignItems: 'center',
+    marginTop: 8,
+  },
+  primaryButtonText: { color: '#fff', fontWeight: '700', fontSize: 15 },
+  providerRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginTop: 10 },
+  providerButton: {
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    borderRadius: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+  },
+  providerButtonText: { color: '#e0e0e0', fontSize: 13, fontWeight: '600' },
+  label: { color: '#9ca3af', fontSize: 12, marginTop: 14, marginBottom: 6 },
+  input: {
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,255,255,0.15)',
+    borderRadius: 10,
+    paddingHorizontal: 14,
+    paddingVertical: 12,
+    color: '#e0e0e0',
+    fontSize: 15,
+  },
+  error: { color: '#ef4444', fontSize: 13, marginTop: 12 },
+});