yaver-feedback-react-native 0.8.1 → 0.8.3

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 () => {
@@ -321,6 +326,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>

package/src/MachinePickerScreen.tsx

@@ -53,7 +53,9 @@ export const YaverMachinePickerScreen: React.FC<YaverMachinePickerProps> = ({
       const result = await listReachableDevices(token);
       setList(result);
       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));

package/src/P2PClient.ts

@@ -7,6 +7,15 @@ export interface FeedbackEvent {
   data: any;
 }
 
+export interface ReloadAck {
+  ok: boolean;
+  mode: 'dev' | 'bundle';
+  acknowledged: boolean;
+  message: string;
+  nativeChangesDetected?: boolean;
+  changeClass?: string;
+}
+
 /**
  * Try to resolve `{projectName, bundleId}` for the running app so the
  * agent can map the reload request to a MobileProject in its scan
@@ -317,7 +326,7 @@ export class P2PClient {
   async reloadApp(
     mode: 'dev' | 'bundle' = 'bundle',
     opts?: { projectName?: string; bundleId?: string; projectPath?: string },
-  ): Promise<{ ok: boolean }> {
+  ): Promise<ReloadAck> {
     // Default path: always rebuild a fresh Hermes bundle.
     //
     // Rationale: the SDK's common caller is a phone user who's not
@@ -338,7 +347,19 @@ export class P2PClient {
         headers: { Authorization: `Bearer ${this.authToken}` },
       });
       if (primary.ok) {
-        return primary.json().catch(() => ({ ok: true }));
+        const payload = await primary.json().catch(() => ({} as Record<string, unknown>));
+        const nativeChangesDetected = payload.nativeChangesDetected === true;
+        return {
+          ok: true,
+          mode: 'dev',
+          acknowledged: true,
+          nativeChangesDetected,
+          changeClass:
+            typeof payload.changeClass === 'string' ? payload.changeClass : undefined,
+          message: nativeChangesDetected
+            ? 'Reload accepted, but native changes need a rebuild.'
+            : 'Hot reload request accepted.',
+        };
       }
       // Dev mode failed — fall through to bundle rebuild below rather
       // than surfacing the raw error, so the user never has to know
@@ -370,7 +391,19 @@ export class P2PClient {
       const text = await res.text().catch(() => '');
       throw new Error(friendlyReloadError(res.status, text));
     }
-    return res.json().catch(() => ({ ok: true }));
+    const payload = await res.json().catch(() => ({} as Record<string, unknown>));
+    return {
+      ok: true,
+      mode: 'bundle',
+      acknowledged: true,
+      changeClass:
+        typeof payload.changeClass === 'string' ? payload.changeClass : undefined,
+      nativeChangesDetected: payload.nativeChangesDetected === true,
+      message:
+        typeof payload.message === 'string' && payload.message.trim()
+          ? payload.message
+          : 'Reload request acknowledged. Agent is rebuilding the bundle.',
+    };
   }
 
   /**
@@ -416,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/QuickActionIcon.tsx

@@ -12,7 +12,13 @@ import {
   View,
 } from 'react-native';
 import { YaverFeedback } from './YaverFeedback';
-import { getQuickIconDisabled, setQuickIconDisabled } from './preferences';
+import {
+  getQuickIconColorPreset,
+  getQuickIconDisabled,
+  QUICK_ICON_COLOR_PRESETS,
+  setQuickIconColorPreset,
+  setQuickIconDisabled,
+} from './preferences';
 
 // Mirror the suppression rule used by YaverFeedback + ShakeDetector:
 // when loaded through Yaver's super-host Hermes bundle, the host owns
@@ -123,6 +129,7 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
   const didDrag = useRef(false);
 
   const [userDisabled, setUserDisabled] = useState<boolean | null>(null);
+  const [colorPreset, setColorPreset] = useState<keyof typeof QUICK_ICON_COLOR_PRESETS | null>(null);
   const [shakenThisSession, setShakenThisSession] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
   const [hostSuppressed] = useState<boolean>(() => isRunningInsideYaverHost());
@@ -135,6 +142,9 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
     getQuickIconDisabled().then((v) => {
       if (alive) setUserDisabled(v);
     });
+    getQuickIconColorPreset().then((v) => {
+      if (alive) setColorPreset(v);
+    });
     return () => {
       alive = false;
     };
@@ -169,9 +179,18 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
         setMenuOpen(false);
       },
     );
+    const colorSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:quickIconColorChange',
+      (next: { preset?: keyof typeof QUICK_ICON_COLOR_PRESETS | null }) => {
+        const preset = next?.preset ?? null;
+        setColorPreset(preset);
+        void setQuickIconColorPreset(preset);
+      },
+    );
     return () => {
       showSub.remove();
       hideSub.remove();
+      colorSub.remove();
     };
   }, []);
 
@@ -229,6 +248,7 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
   if (mode === 'after-shake' && !shakenThisSession) return null;
   if (!YaverFeedback.isEnabled()) return null;
 
+  const presetColors = colorPreset ? QUICK_ICON_COLOR_PRESETS[colorPreset] : null;
   const visualSize = size;
   const radius = visualSize / 2;
 
@@ -271,9 +291,9 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
               width: visualSize,
               height: visualSize,
               borderRadius: radius,
-              backgroundColor,
-              borderColor,
-              shadowColor,
+              backgroundColor: presetColors?.backgroundColor ?? backgroundColor,
+              borderColor: presetColors?.borderColor ?? borderColor,
+              shadowColor: presetColors?.shadowColor ?? shadowColor,
               opacity: pressed ? 0.85 : 1,
             },
           ]}
@@ -282,7 +302,7 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
             style={[
               styles.iconLabel,
               {
-                color: foregroundColor,
+                color: presetColors?.foregroundColor ?? foregroundColor,
                 fontSize: Math.round(visualSize * 0.5),
               },
             ]}