yaver-feedback-react-native 0.7.10 → 0.7.12

package/android/src/main/java/io/yaver/feedback/YaverHotReloadModule.java

@@ -42,6 +42,9 @@ public class YaverHotReloadModule extends ReactContextBaseJavaModule {
     private static final String BUNDLE_FILE = "index.android.bundle";
     private static final String PREFS_NAME = "yaver_hot_reload";
     private static final String PREFS_KEY_BUNDLE = "bundle_path";
+    private static final String PREFS_KEY_BOOT_ATTEMPTS = "boot_attempts";
+    private static final String PREFS_KEY_BUNDLE_MTIME = "bundle_mtime";
+    private static final int MAX_BOOT_ATTEMPTS = 3;
 
     public YaverHotReloadModule(ReactApplicationContext context) {
         super(context);
@@ -173,16 +176,72 @@ public class YaverHotReloadModule extends ReactContextBaseJavaModule {
     // MARK: - Static helpers for Application/MainApplication
 
     /**
-     * Returns the hot-reloaded bundle file if it exists.
-     * Call from MainApplication.getJSBundleFile() to load the hot bundle on startup.
+     * Returns the hot-reloaded bundle file if it exists AND has not
+     * crashed on boot {@link #MAX_BOOT_ATTEMPTS} times in a row.
+     * Call from MainApplication.getJSBundleFile() to load the hot bundle
+     * on startup.
+     *
+     * Safety net for the vibe-coding loop: if a pushed bundle crashes
+     * on boot, without this guard the saved bundle persists across
+     * cold starts and bricks the app. Counter increments on each cold
+     * start, resets on {@link #markBootSuccessful(Context)} (called
+     * from MainApplication's ReactInstanceEventListener after JS
+     * context init, and a 10-s fallback timer). If the counter hits
+     * {@link #MAX_BOOT_ATTEMPTS}, delete the saved bundle and return
+     * null so MainApplication falls back to the APK-bundled bundle.
+     * See YaverHotReload.swift for the matching iOS implementation.
      */
     public static File getSavedBundleFile(Context context) {
         SharedPreferences prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
         String path = prefs.getString(PREFS_KEY_BUNDLE, null);
-        if (path != null) {
-            File f = new File(path);
-            if (f.exists()) return f;
+        if (path == null) return null;
+        File f = new File(path);
+        if (!f.exists()) return null;
+
+        long currentMtime = f.lastModified();
+        long lastMtime = prefs.getLong(PREFS_KEY_BUNDLE_MTIME, 0);
+        SharedPreferences.Editor editor = prefs.edit();
+
+        // Fresh bundle since the counter was last reset → start over.
+        if (currentMtime != lastMtime) {
+            editor.putInt(PREFS_KEY_BOOT_ATTEMPTS, 0);
+            editor.putLong(PREFS_KEY_BUNDLE_MTIME, currentMtime);
         }
-        return null;
+
+        int attempts = prefs.getInt(PREFS_KEY_BOOT_ATTEMPTS, 0);
+        if (attempts >= MAX_BOOT_ATTEMPTS) {
+            Log.w(TAG, "hot bundle failed " + attempts + " consecutive boot attempts — reverting to APK-bundled bundle.");
+            File dir = new File(context.getFilesDir(), BUNDLE_DIR);
+            if (dir.exists()) {
+                File[] list = dir.listFiles();
+                if (list != null) for (File child : list) child.delete();
+                dir.delete();
+            }
+            editor.remove(PREFS_KEY_BOOT_ATTEMPTS)
+                  .remove(PREFS_KEY_BUNDLE_MTIME)
+                  .remove(PREFS_KEY_BUNDLE)
+                  .apply();
+            return null;
+        }
+
+        // Pre-increment: this boot counts as a failure unless the JS
+        // side reaches context-initialized and calls markBootSuccessful.
+        editor.putInt(PREFS_KEY_BOOT_ATTEMPTS, attempts + 1).apply();
+        Log.i(TAG, "loading hot bundle (boot attempt " + (attempts + 1) + "/" + MAX_BOOT_ATTEMPTS + ")");
+        return f;
+    }
+
+    /**
+     * Clear the boot-attempt counter. MainApplication should call this
+     * from a ReactInstanceEventListener after JS context init, AND via
+     * a 10-s fallback Handler in case the listener never fires.
+     */
+    public static void markBootSuccessful(Context context) {
+        SharedPreferences prefs = context.getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
+        int attempts = prefs.getInt(PREFS_KEY_BOOT_ATTEMPTS, 0);
+        if (attempts > 0) {
+            Log.i(TAG, "boot confirmed successful — reset boot-attempt counter.");
+        }
+        prefs.edit().putInt(PREFS_KEY_BOOT_ATTEMPTS, 0).apply();
     }
 }

package/app.plugin.js

@@ -70,16 +70,24 @@ function withYaverFeedbackAndroid(config) {
 }
 
 /**
- * Copy YaverHotReload native module files into the iOS project directory.
- * Uses withDangerousMod to copy files during prebuild. The files are
- * automatically picked up by Xcode since they're in the project directory.
+ * Copy YaverHotReload native module files into the iOS project directory
+ * AND register them in project.pbxproj so Xcode actually compiles them.
+ *
+ * The file-copy step uses withDangerousMod; the project registration
+ * uses withXcodeProject. Both are needed — if we only copy the files
+ * they sit in the filesystem unreferenced, Xcode ignores them, the
+ * final .ipa has no `YaverHotReload` class, and the agent's
+ * `reload_bundle` broadcast silently fails to load a new Hermes bundle.
+ * This is a bug we've hit repeatedly; keep both steps wired.
  */
 function withYaverHotReloadNativeModule(config) {
-  return withDangerousMod(config, [
+  // Step 1 — copy source files onto disk.
+  config = withDangerousMod(config, [
     "ios",
     (config) => {
       const sdkIosDir = path.resolve(__dirname, "ios");
-      const appName = config.modRequest.projectName || "SFMG";
+      const appName = config.modRequest.projectName;
+      if (!appName) return config;
       const targetDir = path.join(
         config.modRequest.platformProjectRoot,
         appName
@@ -89,7 +97,10 @@ function withYaverHotReloadNativeModule(config) {
       for (const fileName of filesToCopy) {
         const src = path.join(sdkIosDir, fileName);
         const dst = path.join(targetDir, fileName);
-        if (fs.existsSync(src) && !fs.existsSync(dst)) {
+        if (fs.existsSync(src)) {
+          // Always overwrite so bumping the SDK version actually
+          // picks up the new native code on the next prebuild
+          // instead of silently keeping a stale copy.
           fs.copyFileSync(src, dst);
         }
       }
@@ -97,6 +108,98 @@ function withYaverHotReloadNativeModule(config) {
       return config;
     },
   ]);
+
+  // Step 2 — register the files in project.pbxproj so Xcode compiles
+  // them into the app target. Without this, the files exist on disk
+  // but are invisible to the build system.
+  config = withXcodeProject(config, (config) => {
+    const pbx = config.modResults;
+    const appName = config.modRequest.projectName;
+    if (!appName) return config;
+
+    // Ensure the PBX group we'll attach files to exists (it's the
+    // app's main Sources group — same one that holds AppDelegate.swift).
+    const group = pbx.pbxGroupByName(appName);
+    if (!group) return config;
+
+    // Find the group UUID by walking the pbxGroup section.
+    const groupSection = pbx.pbxGroupSection();
+    let groupUuid = null;
+    for (const uuid of Object.keys(groupSection)) {
+      if (uuid.endsWith("_comment")) continue;
+      if (groupSection[uuid] === group) {
+        groupUuid = uuid;
+        break;
+      }
+    }
+    if (!groupUuid) return config;
+
+    // Locate the app's "Sources" build phase so we can attach
+    // YaverHotReload.swift as a compile unit. AppDelegate.swift is
+    // already there — find its PBXBuildFile to get the build phase UUID.
+    const nativeTargetSection = pbx.pbxNativeTargetSection();
+    let sourcesBuildPhase = null;
+    for (const uuid of Object.keys(nativeTargetSection)) {
+      if (uuid.endsWith("_comment")) continue;
+      const target = nativeTargetSection[uuid];
+      if (target.name !== appName && target.productReference_comment !== appName) continue;
+      for (const phase of target.buildPhases || []) {
+        const phaseComment = (phase.comment || "").toLowerCase();
+        if (phaseComment.includes("sources")) {
+          sourcesBuildPhase = phase.value;
+          break;
+        }
+      }
+      if (sourcesBuildPhase) break;
+    }
+
+    const swiftName = "YaverHotReload.swift";
+    const objcName = "YaverHotReload.m";
+
+    // addSourceFile registers the file as a PBXFileReference, adds a
+    // PBXBuildFile entry, drops it into the pbx group, and adds it to
+    // the sources build phase — exactly what we need.
+    if (!pbxHasFile(pbx, swiftName)) {
+      pbx.addSourceFile(
+        `${appName}/${swiftName}`,
+        { target: findTargetUuidByName(pbx, appName) },
+        groupUuid,
+      );
+    }
+    if (!pbxHasFile(pbx, objcName)) {
+      pbx.addSourceFile(
+        `${appName}/${objcName}`,
+        { target: findTargetUuidByName(pbx, appName) },
+        groupUuid,
+      );
+    }
+
+    return config;
+  });
+
+  return config;
+}
+
+function pbxHasFile(pbx, basename) {
+  const refs = pbx.pbxFileReferenceSection();
+  for (const uuid of Object.keys(refs)) {
+    if (uuid.endsWith("_comment")) continue;
+    const ref = refs[uuid];
+    if (!ref || typeof ref !== "object") continue;
+    const pathValue = (ref.path || "").replace(/"/g, "");
+    if (pathValue.endsWith(basename)) return true;
+  }
+  return false;
+}
+
+function findTargetUuidByName(pbx, appName) {
+  const section = pbx.pbxNativeTargetSection();
+  for (const uuid of Object.keys(section)) {
+    if (uuid.endsWith("_comment")) continue;
+    const target = section[uuid];
+    if (target && target.name === appName) return uuid;
+  }
+  return undefined;
 }
 
 /**
@@ -146,6 +249,20 @@ function withYaverAppDelegateHook(config) {
       name: Notification.Name("YaverHotReloadBundle"),
       object: nil
     )
+    // Crash-revert safety net: clear the boot-attempt counter once
+    // RN renders its first frame, OR after 10 s of uptime — whichever
+    // fires first. If neither fires (bundle crashes before render),
+    // YaverHotReload.bundleURL() will eventually revert to the
+    // TestFlight-installed bundle after 3 failed boots. See
+    // YaverHotReload.swift for the full state machine.
+    NotificationCenter.default.addObserver(
+      forName: NSNotification.Name(rawValue: "RCTContentDidAppearNotification"),
+      object: nil,
+      queue: .main
+    ) { _ in YaverHotReload.markBootSuccessful() }
+    DispatchQueue.main.asyncAfter(deadline: .now() + 10) {
+      YaverHotReload.markBootSuccessful()
+    }
   }
 
   @objc private func yaverHandleHotReload(_ notification: Notification) {
@@ -297,6 +414,44 @@ function withYaverAndroidHotReload(config) {
         contents.slice(methodStart);
     }
 
+    // Crash-revert safety net: clear the boot-attempt counter once
+    // the React context initializes (bundle loaded successfully), AND
+    // via a 10-s fallback Handler in case that listener never fires
+    // (e.g. infinite loop in root component). If neither fires,
+    // YaverHotReloadModule.getSavedBundleFile() reverts to the
+    // APK-bundled bundle after 3 failed cold starts. Parity with
+    // YaverHotReload.swift on iOS.
+    if (contents.includes("onCreate()") && !contents.includes("yaverHotReloadBootListener")) {
+      const onCreateIdx = contents.indexOf("onCreate()");
+      const braceIdx = contents.indexOf("{", onCreateIdx);
+      const insertionPoint = braceIdx + 1;
+      const bootGuard = `
+    // Yaver Feedback SDK hot-reload crash-revert safety net
+    final android.content.Context yaverHotReloadCtx = getApplicationContext();
+    new android.os.Handler(android.os.Looper.getMainLooper()).postDelayed(
+        new Runnable() {
+          @Override public void run() {
+            io.yaver.feedback.YaverHotReloadModule.markBootSuccessful(yaverHotReloadCtx);
+          }
+        },
+        10000
+    );
+    try {
+      com.facebook.react.ReactInstanceManager yaverRim = getReactNativeHost().getReactInstanceManager();
+      yaverRim.addReactInstanceEventListener(new com.facebook.react.ReactInstanceEventListener() {
+        @Override public void onReactContextInitialized(com.facebook.react.bridge.ReactContext ctx) {
+          io.yaver.feedback.YaverHotReloadModule.markBootSuccessful(yaverHotReloadCtx);
+        }
+      });
+    } catch (Throwable yaverHotReloadBootListener) {
+      // Older/newer RN versions may not expose ReactInstanceEventListener
+      // exactly like this; the 10-s fallback above still covers us.
+    }
+`;
+      contents =
+        contents.slice(0, insertionPoint) + bootGuard + contents.slice(insertionPoint);
+    }
+
     config.modResults.contents = contents;
     return config;
   });
@@ -308,10 +463,15 @@ function withYaverFeedback(config, props) {
   config = withYaverFeedbackIOS(config);
   config = withYaverFeedbackAndroid(config);
 
-  // Hot reload native module is opt-in via enableHotReload: true
-  // Skip by default — apps running inside Yaver container get hot reload
-  // via YaverBundleLoader, standalone dev builds use DevSettings.reload()
-  const enableHotReload = props?.enableHotReload === true;
+  // Hot reload native module is ON by default — it's the SDK's whole
+  // point. TestFlight / Play Store standalone builds have no Metro
+  // dev server, so without the YaverHotReload native module the
+  // agent's `reload_bundle` broadcast silently no-ops: the SDK falls
+  // through to DevSettings.reload() which does nothing in Release
+  // builds. Apps that specifically don't want the plugin mutating
+  // their AppDelegate / MainApplication can opt out with
+  //   ["yaver-feedback-react-native", { "enableHotReload": false }]
+  const enableHotReload = props?.enableHotReload !== false;
   if (enableHotReload) {
     config = withYaverHotReloadNativeModule(config);
     config = withYaverAppDelegateHook(config);

package/dist/LoginScreen.js

@@ -37,6 +37,55 @@ exports.YaverLoginScreen = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const auth_1 = require("./auth");
+const PROVIDER_THEME = {
+    apple: { ion: 'logo-apple', letter: '', fg: '#FFFFFF', bg: 'transparent' },
+    google: { ion: 'logo-google', letter: 'G', fg: '#EA4335', bg: 'transparent' },
+    github: { ion: 'logo-github', letter: 'G', fg: '#FFFFFF', bg: 'transparent' },
+    gitlab: { ion: 'logo-gitlab', letter: 'G', fg: '#FC6D26', bg: 'transparent' },
+    microsoft: { ion: 'logo-microsoft', letter: 'M', fg: '#00A4EF', bg: 'transparent' },
+    // Email is the universal fallback option — render a mail glyph so
+    // it visually matches the OAuth rows instead of being a naked
+    // label in a row of iconed buttons.
+    email: { ion: 'mail-outline', letter: '@', fg: '#E0E0E0', bg: 'transparent' },
+};
+const ProviderLogo = ({ provider, }) => {
+    const theme = PROVIDER_THEME[provider] ?? PROVIDER_THEME.apple;
+    // Soft-require @expo/vector-icons so the SDK works in bare-RN apps
+    // that don't ship Expo. If present, render the brand glyph; if
+    // not, render a coloured monogram fallback.
+    let Ionicons = null;
+    try {
+        const mod = require('@expo/vector-icons');
+        Ionicons = mod?.Ionicons ?? null;
+    }
+    catch {
+        // package not installed — use letter fallback
+    }
+    if (Ionicons) {
+        return (<Ionicons name={theme.ion} size={18} color={theme.fg} style={iconStyles.icon}/>);
+    }
+    if (!theme.letter) {
+        return null;
+    }
+    return (<react_native_1.View style={[iconStyles.fallback, { backgroundColor: theme.fg + '22' }]}>
+      <react_native_1.Text style={[iconStyles.fallbackText, { color: theme.fg }]}>{theme.letter}</react_native_1.Text>
+    </react_native_1.View>);
+};
+const iconStyles = react_native_1.StyleSheet.create({
+    icon: { marginRight: 12 },
+    fallback: {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    fallbackText: {
+        fontSize: 12,
+        fontWeight: '700',
+    },
+});
 /**
  * Full-screen in-SDK login. Mirrors the Yaver mobile app login UX: native
  * Apple Sign-In on iOS, in-app browser OAuth for Google/GitHub/GitLab/
@@ -120,7 +169,10 @@ const YaverLoginScreen = ({ onLoggedIn, onCancel, }) => {
             pressed && styles.buttonPressed,
             busyProvider === id && { opacity: 0.6 },
         ]} onPress={onPress} disabled={busyProvider !== null}>
-      {busyProvider === id ? (<react_native_1.ActivityIndicator color="#e0e0e0"/>) : (<react_native_1.Text style={styles.buttonText}>{label}</react_native_1.Text>)}
+      {busyProvider === id ? (<react_native_1.ActivityIndicator color="#e0e0e0"/>) : (<react_native_1.View style={styles.buttonContent}>
+          <ProviderLogo provider={id}/>
+          <react_native_1.Text style={[styles.buttonText, styles.buttonTextWithIcon]}>{label}</react_native_1.Text>
+        </react_native_1.View>)}
     </react_native_1.Pressable>);
     return (<react_native_1.SafeAreaView style={styles.safeArea}>
       <react_native_1.KeyboardAvoidingView style={{ flex: 1 }} behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined}>
@@ -146,7 +198,10 @@ const YaverLoginScreen = ({ onLoggedIn, onCancel, }) => {
                 styles.button,
                 pressed && styles.buttonPressed,
             ]} onPress={() => setShowEmailForm(true)} disabled={busyProvider !== null}>
-                <react_native_1.Text style={styles.buttonText}>Continue with Email</react_native_1.Text>
+                <react_native_1.View style={styles.buttonContent}>
+                  <ProviderLogo provider="email"/>
+                  <react_native_1.Text style={[styles.buttonText, styles.buttonTextWithIcon]}>Continue with Email</react_native_1.Text>
+                </react_native_1.View>
               </react_native_1.Pressable>) : (<>
                 <react_native_1.View style={styles.divider}>
                   <react_native_1.View style={styles.dividerLine}/>
@@ -211,6 +266,14 @@ const styles = react_native_1.StyleSheet.create({
     },
     buttonPressed: { opacity: 0.7 },
     buttonText: { color: '#e0e0e0', fontSize: 15, fontWeight: '600' },
+    buttonContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonTextWithIcon: {
+    // No extra spacing — ProviderLogo provides its own marginRight.
+    },
     divider: {
         flexDirection: 'row',
         alignItems: 'center',

package/ios/YaverHotReload.swift

@@ -104,9 +104,68 @@ class YaverHotReload: NSObject {
       .appendingPathComponent(bundleFile)
   }
 
-  /// Returns the hot-reloaded bundle URL if one exists on disk.
+  /// Returns the hot-reloaded bundle URL if one exists AND hasn't
+  /// crashed on boot N times in a row.
+  ///
+  /// Vibe-coding loop: a developer pushes dozens of Hermes bundles over
+  /// the course of a session; eventually one of them crashes on boot
+  /// (missing native module, syntax error, TurboModule assert). Without
+  /// this guard, the crashing bundle persists across cold starts and
+  /// bricks the app — user has to delete + reinstall from TestFlight.
+  ///
+  /// Guard: on each cold-start bundleURL() call, increment a boot
+  /// counter. Reset it on first successful render (RCTContentDidAppear)
+  /// or after 10 s of uptime. If the counter hits kMaxBootAttempts
+  /// without being reset, the bundle has crashed every boot so far —
+  /// delete it and return nil so the app falls back to the
+  /// TestFlight-installed bundle.
+  ///
+  /// Bundle mtime is tracked separately: pushing a NEW bundle resets
+  /// the counter so each pushed bundle gets its own 3 attempts.
   @objc static func bundleURL() -> URL? {
     let path = savedBundlePath()
-    return FileManager.default.fileExists(atPath: path.path) ? path : nil
+    guard FileManager.default.fileExists(atPath: path.path) else { return nil }
+
+    let defaults = UserDefaults.standard
+    let attrs = try? FileManager.default.attributesOfItem(atPath: path.path)
+    let currentMtime = (attrs?[.modificationDate] as? Date)?.timeIntervalSince1970 ?? 0
+    let lastMtime = defaults.double(forKey: kKeyBundleMtime)
+
+    // Fresh bundle pushed since the counter was last reset → start over.
+    if currentMtime != lastMtime {
+      defaults.set(0, forKey: kKeyBootAttempts)
+      defaults.set(currentMtime, forKey: kKeyBundleMtime)
+    }
+
+    let attempts = defaults.integer(forKey: kKeyBootAttempts)
+    if attempts >= kMaxBootAttempts {
+      NSLog("[YaverHotReload] hot bundle failed %d consecutive boot attempts — reverting to app-bundled TestFlight bundle.", attempts)
+      let dir = path.deletingLastPathComponent()
+      try? FileManager.default.removeItem(at: dir)
+      defaults.removeObject(forKey: kKeyBootAttempts)
+      defaults.removeObject(forKey: kKeyBundleMtime)
+      return nil
+    }
+
+    // Pre-increment: this boot will count as a failure unless the JS
+    // side reaches first render and calls markBootSuccessful().
+    defaults.set(attempts + 1, forKey: kKeyBootAttempts)
+    NSLog("[YaverHotReload] loading hot bundle (boot attempt %d/%d)", attempts + 1, kMaxBootAttempts)
+    return path
   }
+
+  /// Clear the boot-attempt counter. Call this from AppDelegate after
+  /// first successful RN render (RCTContentDidAppearNotification) or
+  /// after a short uptime safety timer — whichever fires first.
+  @objc static func markBootSuccessful() {
+    let defaults = UserDefaults.standard
+    if defaults.integer(forKey: kKeyBootAttempts) > 0 {
+      NSLog("[YaverHotReload] boot confirmed successful — reset boot-attempt counter.")
+    }
+    defaults.set(0, forKey: kKeyBootAttempts)
+  }
+
+  static let kKeyBootAttempts = "yaverHotReloadBootAttempts"
+  static let kKeyBundleMtime = "yaverHotReloadBundleMtime"
+  static let kMaxBootAttempts = 3
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaver-feedback-react-native",
-  "version": "0.7.10",
+  "version": "0.7.12",
   "description": "Visual feedback SDK for Yaver — bug reports, screen recording, voice annotations, and local-first developer workflows",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/LoginScreen.tsx

@@ -23,6 +23,94 @@ import {
   type OAuthProvider,
 } from './auth';
 
+// ── ProviderLogo ─────────────────────────────────────────────────────
+//
+// Mirrors the Yaver mobile app's login screen — Apple, Google, GitHub,
+// GitLab, Microsoft each get their brand mark next to the label.
+// Mobile uses `Ionicons` from `@expo/vector-icons`. We soft-require
+// the same package so apps that have it (every Expo app does) get
+// real logos automatically; bare-RN apps without the package fall
+// back to a single-letter monogram in a tinted circle.
+//
+// Each entry holds: Ionicons name, fallback letter, brand colour,
+// optional Apple-on-light invert (Apple's wordmark needs the
+// alternate "logo-apple-appstore" / dark variant on dark backgrounds).
+type ProviderTheme = {
+  ion: string;
+  letter: string;
+  fg: string;
+  bg: string;
+};
+
+type LoginOption = OAuthProvider | 'apple' | 'email';
+
+const PROVIDER_THEME: Record<LoginOption, ProviderTheme> = {
+  apple:     { ion: 'logo-apple',     letter: '', fg: '#FFFFFF', bg: 'transparent' },
+  google:    { ion: 'logo-google',    letter: 'G', fg: '#EA4335', bg: 'transparent' },
+  github:    { ion: 'logo-github',    letter: 'G', fg: '#FFFFFF', bg: 'transparent' },
+  gitlab:    { ion: 'logo-gitlab',    letter: 'G', fg: '#FC6D26', bg: 'transparent' },
+  microsoft: { ion: 'logo-microsoft', letter: 'M', fg: '#00A4EF', bg: 'transparent' },
+  // Email is the universal fallback option — render a mail glyph so
+  // it visually matches the OAuth rows instead of being a naked
+  // label in a row of iconed buttons.
+  email:     { ion: 'mail-outline',   letter: '@', fg: '#E0E0E0', bg: 'transparent' },
+};
+
+const ProviderLogo: React.FC<{ provider: LoginOption }> = ({
+  provider,
+}) => {
+  const theme = PROVIDER_THEME[provider] ?? PROVIDER_THEME.apple;
+  // Soft-require @expo/vector-icons so the SDK works in bare-RN apps
+  // that don't ship Expo. If present, render the brand glyph; if
+  // not, render a coloured monogram fallback.
+  let Ionicons: React.ComponentType<{
+    name: string;
+    size?: number;
+    color?: string;
+    style?: object;
+  }> | null = null;
+  try {
+    const mod = require('@expo/vector-icons');
+    Ionicons = mod?.Ionicons ?? null;
+  } catch {
+    // package not installed — use letter fallback
+  }
+  if (Ionicons) {
+    return (
+      <Ionicons
+        name={theme.ion}
+        size={18}
+        color={theme.fg}
+        style={iconStyles.icon}
+      />
+    );
+  }
+  if (!theme.letter) {
+    return null;
+  }
+  return (
+    <View style={[iconStyles.fallback, { backgroundColor: theme.fg + '22' }]}>
+      <Text style={[iconStyles.fallbackText, { color: theme.fg }]}>{theme.letter}</Text>
+    </View>
+  );
+};
+
+const iconStyles = StyleSheet.create({
+  icon: { marginRight: 12 },
+  fallback: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  fallbackText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+});
+
 export interface YaverLoginScreenProps {
   /** Invoked once a session token is issued and the user is loaded. */
   onLoggedIn: (token: string) => void;
@@ -125,7 +213,10 @@ export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
       {busyProvider === id ? (
         <ActivityIndicator color="#e0e0e0" />
       ) : (
-        <Text style={styles.buttonText}>{label}</Text>
+        <View style={styles.buttonContent}>
+          <ProviderLogo provider={id} />
+          <Text style={[styles.buttonText, styles.buttonTextWithIcon]}>{label}</Text>
+        </View>
       )}
     </Pressable>
   );
@@ -178,7 +269,10 @@ export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
                 onPress={() => setShowEmailForm(true)}
                 disabled={busyProvider !== null}
               >
-                <Text style={styles.buttonText}>Continue with Email</Text>
+                <View style={styles.buttonContent}>
+                  <ProviderLogo provider="email" />
+                  <Text style={[styles.buttonText, styles.buttonTextWithIcon]}>Continue with Email</Text>
+                </View>
               </Pressable>
             ) : (
               <>
@@ -295,6 +389,14 @@ const styles = StyleSheet.create({
   },
   buttonPressed: { opacity: 0.7 },
   buttonText: { color: '#e0e0e0', fontSize: 15, fontWeight: '600' },
+  buttonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonTextWithIcon: {
+    // No extra spacing — ProviderLogo provides its own marginRight.
+  },
   divider: {
     flexDirection: 'row',
     alignItems: 'center',