yaver-feedback-react-native 0.3.0 → 0.4.0

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

@@ -0,0 +1,188 @@
+package io.yaver.feedback;
+
+import android.app.Activity;
+import android.content.Context;
+import android.content.SharedPreferences;
+import android.os.Handler;
+import android.os.Looper;
+import android.util.Log;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.ReadableMap;
+import com.facebook.react.bridge.WritableMap;
+import com.facebook.react.bridge.Arguments;
+import com.facebook.react.ReactApplication;
+import com.facebook.react.ReactInstanceManager;
+
+import java.io.File;
+import java.io.FileOutputStream;
+import java.io.InputStream;
+import java.net.HttpURLConnection;
+import java.net.URL;
+import java.util.concurrent.Executors;
+
+/**
+ * Hot reload native module for the Yaver Feedback SDK (Android).
+ *
+ * Downloads a Hermes bytecode bundle from the agent, saves it to the app's
+ * files directory, and recreates the React Native context to load the new bundle.
+ *
+ * Supports N reloads — each reload recreates the ReactContext with the updated bundle.
+ */
+public class YaverHotReloadModule extends ReactContextBaseJavaModule {
+
+    private static final String TAG = "YaverHotReload";
+    private static final String MODULE_NAME = "YaverHotReload";
+    private static final String BUNDLE_DIR = "yaver-hot-reload";
+    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";
+
+    public YaverHotReloadModule(ReactApplicationContext context) {
+        super(context);
+    }
+
+    @Override
+    @NonNull
+    public String getName() {
+        return MODULE_NAME;
+    }
+
+    /**
+     * Download a Hermes bundle from the agent and trigger a bridge reload.
+     */
+    @ReactMethod
+    public void loadBundle(String urlString, ReadableMap headers, Promise promise) {
+        Executors.newSingleThreadExecutor().execute(() -> {
+            try {
+                URL url = new URL(urlString);
+                HttpURLConnection conn = (HttpURLConnection) url.openConnection();
+                conn.setConnectTimeout(60000);
+                conn.setReadTimeout(60000);
+
+                // Set auth headers
+                if (headers != null) {
+                    if (headers.hasKey("Authorization")) {
+                        conn.setRequestProperty("Authorization", headers.getString("Authorization"));
+                    }
+                }
+
+                int responseCode = conn.getResponseCode();
+                if (responseCode != 200) {
+                    promise.reject("HTTP_ERROR", "Status " + responseCode);
+                    return;
+                }
+
+                InputStream is = conn.getInputStream();
+                File dir = new File(getReactApplicationContext().getFilesDir(), BUNDLE_DIR);
+                if (!dir.exists()) dir.mkdirs();
+                File bundleFile = new File(dir, BUNDLE_FILE);
+
+                FileOutputStream fos = new FileOutputStream(bundleFile);
+                byte[] buffer = new byte[8192];
+                int bytesRead;
+                int totalBytes = 0;
+                while ((bytesRead = is.read(buffer)) != -1) {
+                    fos.write(buffer, 0, bytesRead);
+                    totalBytes += bytesRead;
+                }
+                fos.close();
+                is.close();
+                conn.disconnect();
+
+                Log.i(TAG, "saved " + totalBytes + " bytes to " + bundleFile.getAbsolutePath());
+
+                // Validate Hermes bytecode (magic bytes at offset 4)
+                if (totalBytes >= 12) {
+                    java.io.RandomAccessFile raf = new java.io.RandomAccessFile(bundleFile, "r");
+                    raf.seek(4);
+                    int magic = Integer.reverseBytes(raf.readInt());
+                    if (magic == 0x1F1903C1) {
+                        int bcVersion = Integer.reverseBytes(raf.readInt());
+                        Log.i(TAG, "Hermes bytecode BC" + bcVersion);
+                    } else {
+                        Log.w(TAG, "not Hermes bytecode (magic=0x" + Integer.toHexString(magic) + ")");
+                    }
+                    raf.close();
+                }
+
+                // Save bundle path to SharedPreferences for next app launch
+                SharedPreferences prefs = getReactApplicationContext()
+                        .getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
+                prefs.edit().putString(PREFS_KEY_BUNDLE, bundleFile.getAbsolutePath()).apply();
+
+                WritableMap result = Arguments.createMap();
+                result.putBoolean("loaded", true);
+                result.putInt("size", totalBytes);
+                promise.resolve(result);
+
+                // Reload the bridge on the main thread
+                new Handler(Looper.getMainLooper()).post(() -> reloadBridge());
+
+            } catch (Exception e) {
+                Log.e(TAG, "download failed", e);
+                promise.reject("DOWNLOAD_FAILED", e.getMessage(), e);
+            }
+        });
+    }
+
+    @ReactMethod
+    public void hasBundle(Promise promise) {
+        File bundleFile = getSavedBundleFile(getReactApplicationContext());
+        promise.resolve(bundleFile != null && bundleFile.exists());
+    }
+
+    @ReactMethod
+    public void clearBundle(Promise promise) {
+        File dir = new File(getReactApplicationContext().getFilesDir(), BUNDLE_DIR);
+        if (dir.exists()) {
+            for (File f : dir.listFiles()) f.delete();
+            dir.delete();
+        }
+        SharedPreferences prefs = getReactApplicationContext()
+                .getSharedPreferences(PREFS_NAME, Context.MODE_PRIVATE);
+        prefs.edit().remove(PREFS_KEY_BUNDLE).apply();
+        promise.resolve(true);
+    }
+
+    /**
+     * Recreate the React Native context with the new bundle.
+     */
+    private void reloadBridge() {
+        Activity activity = getCurrentActivity();
+        if (activity == null) {
+            Log.e(TAG, "no current activity");
+            return;
+        }
+
+        if (activity.getApplication() instanceof ReactApplication) {
+            ReactApplication app = (ReactApplication) activity.getApplication();
+            ReactInstanceManager manager = app.getReactNativeHost().getReactInstanceManager();
+            Log.i(TAG, "recreating React context with new bundle");
+            manager.recreateReactContextInBackground();
+        } else {
+            Log.e(TAG, "Application does not implement ReactApplication");
+        }
+    }
+
+    // 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.
+     */
+    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;
+        }
+        return null;
+    }
+}

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

@@ -0,0 +1,33 @@
+package io.yaver.feedback;
+
+import androidx.annotation.NonNull;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+/**
+ * React Native package that registers the YaverHotReload native module.
+ * Auto-linked via the Expo config plugin.
+ */
+public class YaverHotReloadPackage implements ReactPackage {
+
+    @NonNull
+    @Override
+    public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        modules.add(new YaverHotReloadModule(reactContext));
+        return modules;
+    }
+
+    @NonNull
+    @Override
+    public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+}

package/app.plugin.js

@@ -1,18 +1,30 @@
 /**
  * Expo config plugin for yaver-feedback-react-native.
  *
- * Adds required native permissions for the feedback SDK:
- * - iOS: Camera + Microphone usage descriptions
- * - Android: CAMERA + RECORD_AUDIO permissions
+ * Adds:
+ * - iOS/Android permissions for camera + microphone (feedback screenshots/voice)
+ * - iOS: YaverHotReload native module for Hermes bundle hot reload
+ * - AppDelegate hook to load hot-reloaded bundles on startup
  *
  * Usage in app.json:
  *   { "expo": { "plugins": ["yaver-feedback-react-native"] } }
  */
+// Resolve @expo/config-plugins from the host project's node_modules
+// (not from the SDK's directory, which may be symlinked)
+const configPluginsPath = require.resolve("@expo/config-plugins", {
+  paths: [process.cwd()],
+});
 const {
   withInfoPlist,
   withAndroidManifest,
+  withXcodeProject,
+  withAppDelegate,
+  withMainApplication,
+  withDangerousMod,
   createRunOncePlugin,
-} = require("@expo/config-plugins");
+} = require(configPluginsPath);
+const path = require("path");
+const fs = require("fs");
 
 const pkg = require("./package.json");
 
@@ -57,9 +69,255 @@ function withYaverFeedbackAndroid(config) {
   });
 }
 
-function withYaverFeedback(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.
+ */
+function withYaverHotReloadNativeModule(config) {
+  return withDangerousMod(config, [
+    "ios",
+    (config) => {
+      const sdkIosDir = path.resolve(__dirname, "ios");
+      const appName = config.modRequest.projectName || "SFMG";
+      const targetDir = path.join(
+        config.modRequest.platformProjectRoot,
+        appName
+      );
+
+      const filesToCopy = ["YaverHotReload.swift", "YaverHotReload.m"];
+      for (const fileName of filesToCopy) {
+        const src = path.join(sdkIosDir, fileName);
+        const dst = path.join(targetDir, fileName);
+        if (fs.existsSync(src) && !fs.existsSync(dst)) {
+          fs.copyFileSync(src, dst);
+        }
+      }
+
+      return config;
+    },
+  ]);
+}
+
+/**
+ * Patch AppDelegate to:
+ * 1. Return hot-reloaded bundle URL on startup (so reloaded bundle persists)
+ * 2. Handle YaverHotReloadBundle notification to recreate the RN bridge
+ *    with the new bundle (enables N reloads without app restart)
+ *
+ * Uses the same pattern as Yaver's own AppDelegate: tear down old bridge,
+ * create new ExpoReactNativeFactory with overrideBundleURL, startReactNative.
+ */
+function withYaverAppDelegateHook(config) {
+  return withAppDelegate(config, (config) => {
+    const contents = config.modResults.contents;
+
+    // Only patch if not already patched
+    if (contents.includes("YaverHotReload")) {
+      return config;
+    }
+
+    // For Swift AppDelegate (Expo SDK 50+)
+    let patched = contents;
+
+    // 1. Hook bundleURL() to return hot bundle on startup
+    if (patched.includes("func bundleURL()")) {
+      patched = patched.replace(
+        /func bundleURL\(\) -> URL\? \{/,
+        `func bundleURL() -> URL? {
+    // Yaver Feedback SDK: load hot-reloaded bundle if available
+    if let yaverBundle = YaverHotReload.bundleURL() { return yaverBundle }`
+      );
+    }
+
+    // 2. Add reload notification handler and bridge recreation logic
+    // Insert before the closing brace of the class
+    const classCloseIndex = patched.lastIndexOf("}");
+    if (classCloseIndex > 0) {
+      const reloadHandler = `
+  // MARK: - Yaver Feedback SDK Hot Reload
+
+  private var yaverIsReloading = false
+
+  private func setupYaverHotReload() {
+    NotificationCenter.default.addObserver(
+      self,
+      selector: #selector(yaverHandleHotReload(_:)),
+      name: Notification.Name("YaverHotReloadBundle"),
+      object: nil
+    )
+  }
+
+  @objc private func yaverHandleHotReload(_ notification: Notification) {
+    guard !yaverIsReloading else { return }
+    yaverIsReloading = true
+
+    guard let bundlePath = notification.userInfo?["bundlePath"] as? String else {
+      yaverIsReloading = false
+      return
+    }
+
+    let bundleURL = URL(fileURLWithPath: bundlePath)
+    guard FileManager.default.fileExists(atPath: bundlePath) else {
+      NSLog("[YaverHotReload] bundle not found at %@", bundlePath)
+      yaverIsReloading = false
+      return
+    }
+
+    NSLog("[YaverHotReload] reloading bridge with %@", bundlePath)
+
+    guard let window = self.window else {
+      yaverIsReloading = false
+      return
+    }
+
+    // Show loading placeholder
+    let placeholder = UIView(frame: window.bounds)
+    placeholder.backgroundColor = .black
+    let spinner = UIActivityIndicatorView(style: .large)
+    spinner.color = .white
+    spinner.center = placeholder.center
+    spinner.startAnimating()
+    placeholder.addSubview(spinner)
+    window.rootViewController?.view = placeholder
+
+    // Brief delay for old bridge to tear down
+    DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) { [weak self] in
+      guard let self = self else { return }
+
+      let delegate = ReactNativeDelegate()
+      delegate.overrideBundleURL = bundleURL
+      delegate.dependencyProvider = RCTAppDependencyProvider()
+
+      let factory = ExpoReactNativeFactory(delegate: delegate)
+      self.reactNativeDelegate = delegate
+      self.reactNativeFactory = factory
+      self.bindReactNativeFactory(factory)
+
+      factory.startReactNative(
+        withModuleName: "main",
+        in: window,
+        launchOptions: nil
+      )
+      self.yaverIsReloading = false
+      NSLog("[YaverHotReload] bridge recreated successfully")
+    }
+  }
+`;
+
+      patched =
+        patched.slice(0, classCloseIndex) +
+        reloadHandler +
+        patched.slice(classCloseIndex);
+    }
+
+    // 3. Call setupYaverHotReload() in didFinishLaunchingWithOptions
+    if (patched.includes("super.application(application, didFinishLaunchingWithOptions:")) {
+      patched = patched.replace(
+        "super.application(application, didFinishLaunchingWithOptions:",
+        "setupYaverHotReload()\n    return super.application(application, didFinishLaunchingWithOptions:"
+      );
+      // Remove the duplicate "return" if the original already had one
+      patched = patched.replace("return setupYaverHotReload()", "setupYaverHotReload()");
+    }
+
+    config.modResults.contents = patched;
+    return config;
+  });
+}
+
+/**
+ * Copy Android native module source files and register the package.
+ * Also patches MainApplication to use hot-reloaded bundle on startup.
+ */
+function withYaverAndroidHotReload(config) {
+  // Copy Java source files
+  config = withDangerousMod(config, [
+    "android",
+    (config) => {
+      const sdkAndroidDir = path.resolve(__dirname, "android", "src", "main", "java", "io", "yaver", "feedback");
+      const targetDir = path.join(
+        config.modRequest.platformProjectRoot,
+        "app", "src", "main", "java", "io", "yaver", "feedback"
+      );
+
+      if (fs.existsSync(sdkAndroidDir)) {
+        fs.mkdirSync(targetDir, { recursive: true });
+        for (const file of fs.readdirSync(sdkAndroidDir)) {
+          fs.copyFileSync(
+            path.join(sdkAndroidDir, file),
+            path.join(targetDir, file)
+          );
+        }
+      }
+      return config;
+    },
+  ]);
+
+  // Patch MainApplication to register the package and use hot bundle
+  config = withMainApplication(config, (config) => {
+    let contents = config.modResults.contents;
+
+    if (contents.includes("YaverHotReload")) {
+      return config;
+    }
+
+    // Add import
+    contents = contents.replace(
+      "import com.facebook.react.ReactApplication",
+      "import com.facebook.react.ReactApplication;\nimport io.yaver.feedback.YaverHotReloadPackage;\nimport io.yaver.feedback.YaverHotReloadModule;"
+    );
+
+    // Register package in getPackages()
+    if (contents.includes("packages.add(")) {
+      // Find the last packages.add() and add ours after
+      const lastAdd = contents.lastIndexOf("packages.add(");
+      const lineEnd = contents.indexOf("\n", lastAdd);
+      contents =
+        contents.slice(0, lineEnd + 1) +
+        "      packages.add(new YaverHotReloadPackage());\n" +
+        contents.slice(lineEnd + 1);
+    }
+
+    // Override getJSBundleFile to check for hot bundle
+    if (contents.includes("getJSMainModuleName()") && !contents.includes("getJSBundleFile")) {
+      const mainModuleIdx = contents.indexOf("getJSMainModuleName()");
+      const methodStart = contents.lastIndexOf("@Override", mainModuleIdx);
+      contents =
+        contents.slice(0, methodStart) +
+        `@Override
+    protected String getJSBundleFile() {
+      // Yaver Feedback SDK: load hot-reloaded bundle if available
+      java.io.File hotBundle = YaverHotReloadModule.getSavedBundleFile(getApplicationContext());
+      if (hotBundle != null) return hotBundle.getAbsolutePath();
+      return super.getJSBundleFile();
+    }
+
+    ` +
+        contents.slice(methodStart);
+    }
+
+    config.modResults.contents = contents;
+    return config;
+  });
+
+  return config;
+}
+
+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;
+  if (enableHotReload) {
+    config = withYaverHotReloadNativeModule(config);
+    config = withYaverAppDelegateHook(config);
+    config = withYaverAndroidHotReload(config);
+  }
+
   return config;
 }
 

package/ios/YaverHotReload.m

@@ -0,0 +1,16 @@
+#import <React/RCTBridgeModule.h>
+
+@interface RCT_EXTERN_MODULE(YaverHotReload, NSObject)
+
+RCT_EXTERN_METHOD(loadBundle:(NSString *)urlString
+                  headers:(NSDictionary *)headers
+                  resolver:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(hasBundle:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+
+RCT_EXTERN_METHOD(clearBundle:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+
+@end

package/ios/YaverHotReload.swift

@@ -0,0 +1,112 @@
+import Foundation
+import React
+import UIKit
+
+/**
+ * Hot reload native module for the Yaver Feedback SDK.
+ *
+ * Downloads a Hermes bytecode bundle from the agent, saves it to Documents,
+ * and posts a notification that the AppDelegate handler (injected by the Expo
+ * config plugin) catches to recreate the RN bridge with the new bundle.
+ *
+ * Supports N reloads — each reload tears down the old bridge and creates
+ * a fresh one pointing to the updated bundle file.
+ */
+@objc(YaverHotReload)
+class YaverHotReload: NSObject {
+
+  static let bundleDir = "yaver-hot-reload"
+  static let bundleFile = "main.jsbundle"
+  static let reloadNotification = Notification.Name("YaverHotReloadBundle")
+
+  override static func requiresMainQueueSetup() -> Bool { return true }
+
+  /// Download a Hermes bundle from the agent and trigger a bridge reload.
+  @objc func loadBundle(_ urlString: String,
+                        headers: NSDictionary?,
+                        resolver resolve: @escaping RCTPromiseResolveBlock,
+                        rejecter reject: @escaping RCTPromiseRejectBlock) {
+    guard let bundleURL = URL(string: urlString) else {
+      reject("INVALID_URL", "Invalid bundle URL", nil); return
+    }
+
+    var request = URLRequest(url: bundleURL)
+    request.timeoutInterval = 60
+    if let headers = headers as? [String: String] {
+      for (key, value) in headers { request.setValue(value, forHTTPHeaderField: key) }
+    }
+
+    NSLog("[YaverHotReload] downloading bundle from %@...", urlString)
+    URLSession.shared.dataTask(with: request) { data, response, error in
+      if let error = error {
+        reject("DOWNLOAD_FAILED", error.localizedDescription, error); return
+      }
+      guard let data = data, data.count > 0 else {
+        reject("EMPTY_BUNDLE", "Empty bundle response", nil); return
+      }
+      guard let http = response as? HTTPURLResponse, http.statusCode == 200 else {
+        let code = (response as? HTTPURLResponse)?.statusCode ?? 0
+        reject("HTTP_ERROR", "Status \(code)", nil); return
+      }
+
+      // Basic Hermes bytecode validation
+      if data.count >= 12 {
+        let magic: UInt32 = data.withUnsafeBytes { $0.load(fromByteOffset: 4, as: UInt32.self) }
+        if magic == 0x1F1903C1 {
+          let bcVersion: UInt32 = data.withUnsafeBytes { $0.load(fromByteOffset: 8, as: UInt32.self) }
+          NSLog("[YaverHotReload] Hermes bytecode BC%d, %d bytes", bcVersion, data.count)
+        } else {
+          NSLog("[YaverHotReload] WARNING: not Hermes bytecode (magic=0x%08X)", magic)
+        }
+      }
+
+      do {
+        let savePath = YaverHotReload.savedBundlePath()
+        let dir = savePath.deletingLastPathComponent()
+        try FileManager.default.createDirectory(at: dir, withIntermediateDirectories: true)
+        try data.write(to: savePath, options: .atomic)
+
+        NSLog("[YaverHotReload] saved %d bytes, posting reload notification", data.count)
+        resolve(["loaded": true, "size": data.count])
+
+        // Post notification — AppDelegate handler recreates the bridge
+        DispatchQueue.main.async {
+          NotificationCenter.default.post(
+            name: YaverHotReload.reloadNotification,
+            object: nil,
+            userInfo: ["bundlePath": savePath.path]
+          )
+        }
+      } catch {
+        reject("SAVE_FAILED", error.localizedDescription, error)
+      }
+    }.resume()
+  }
+
+  @objc func hasBundle(_ resolve: @escaping RCTPromiseResolveBlock,
+                       rejecter reject: @escaping RCTPromiseRejectBlock) {
+    resolve(FileManager.default.fileExists(atPath: YaverHotReload.savedBundlePath().path))
+  }
+
+  @objc func clearBundle(_ resolve: @escaping RCTPromiseResolveBlock,
+                         rejecter reject: @escaping RCTPromiseRejectBlock) {
+    let dir = YaverHotReload.savedBundlePath().deletingLastPathComponent()
+    try? FileManager.default.removeItem(at: dir)
+    resolve(true)
+  }
+
+  // MARK: - Static helpers
+
+  static func savedBundlePath() -> URL {
+    let docs = FileManager.default.urls(for: .documentDirectory, in: .userDomainMask).first!
+    return docs
+      .appendingPathComponent(bundleDir, isDirectory: true)
+      .appendingPathComponent(bundleFile)
+  }
+
+  /// Returns the hot-reloaded bundle URL if one exists on disk.
+  @objc static func bundleURL() -> URL? {
+    let path = savedBundlePath()
+    return FileManager.default.fileExists(atPath: path.path) ? path : nil
+  }
+}

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "yaver-feedback-react-native",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Visual feedback SDK for Yaver — shake-to-report, screen recording, voice annotations for vibe coding",
   "main": "src/index.ts",
   "types": "src/index.ts",
   "files": [
     "src/",
+    "ios/",
+    "android/",
     "app.plugin.js"
   ],
   "license": "MIT",

package/src/Discovery.ts

@@ -1,4 +1,14 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
+// AsyncStorage is an optional peer dep — gracefully degrade if missing
+let AsyncStorage: {
+  getItem: (key: string) => Promise<string | null>;
+  setItem: (key: string, value: string) => Promise<void>;
+  removeItem: (key: string) => Promise<void>;
+} | null = null;
+try {
+  AsyncStorage = require('@react-native-async-storage/async-storage').default;
+} catch {
+  // Not installed — discovery caching disabled, auto-discovery still works
+}
 
 const STORAGE_KEY = 'yaver_feedback_agent';
 const DEFAULT_PORT = 18080;
@@ -123,9 +133,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,8 +302,9 @@ 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> {
+    if (!AsyncStorage) return null;
     try {
       const raw = await AsyncStorage.getItem(STORAGE_KEY);
       if (!raw) return null;
@@ -200,8 +318,9 @@ export class YaverDiscovery {
     }
   }
 
-  /** Store a successful discovery result in AsyncStorage. */
+  /** Store a successful discovery result. */
   static async store(result: DiscoveryResult): Promise<void> {
+    if (!AsyncStorage) return;
     try {
       await AsyncStorage.setItem(
         STORAGE_KEY,
@@ -214,6 +333,7 @@ export class YaverDiscovery {
 
   /** Clear the stored agent connection. */
   static async clear(): Promise<void> {
+    if (!AsyncStorage) return;
     try {
       await AsyncStorage.removeItem(STORAGE_KEY);
     } catch {

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/YaverFeedback.ts

@@ -49,6 +49,10 @@ export class YaverFeedback {
       p2pClient = new P2PClient(config.agentUrl, config.authToken);
     } else {
       p2pClient = null;
+      // Auto-discover agent in the background when convexUrl or LAN is available
+      if (enabled) {
+        YaverFeedback.discoverAgent();
+      }
     }
 
     // Set up error capture buffer size
@@ -80,21 +84,15 @@ export class YaverFeedback {
           if (cfg.onReload) {
             cfg.onReload();
           } else {
-            // Default: try DevSettings.reload() in dev mode
-            try {
-              const { DevSettings } = require('react-native');
-              if (typeof DevSettings?.reload === 'function') {
-                DevSettings.reload();
-              }
-            } catch {
-              // Not in dev mode or DevSettings unavailable
-            }
+            YaverFeedback.defaultReload();
           }
         } else if (cmd.command === 'reload_bundle' && cmd.data) {
           const bundleUrl = cmd.data.bundleUrl as string;
           const assetsUrl = cmd.data.assetsUrl as string | undefined;
           if (cfg.onReloadBundle) {
             cfg.onReloadBundle(bundleUrl, assetsUrl);
+          } else {
+            YaverFeedback.defaultReloadBundle(bundleUrl, assetsUrl);
           }
         }
       });
@@ -111,6 +109,30 @@ export class YaverFeedback {
     //     pass-through wrapper they insert into their own error chain
   }
 
+  /**
+   * Run agent discovery in the background.
+   * Called automatically from init() when no agentUrl is provided.
+   * Sets config.agentUrl and creates P2PClient on success.
+   */
+  static async discoverAgent(): Promise<void> {
+    if (!config || !enabled) return;
+    if (config.agentUrl) return; // already have a URL
+
+    try {
+      const result = await YaverDiscovery.discover({
+        convexUrl: config.convexUrl,
+        authToken: config.authToken,
+        preferredDeviceId: config.preferredDeviceId,
+      });
+      if (result && config) {
+        config.agentUrl = result.url;
+        p2pClient = new P2PClient(result.url, config.authToken);
+      }
+    } catch {
+      // Discovery failed — FloatingButton will show disconnected, user can retry
+    }
+  }
+
   /**
    * Manually trigger the feedback collection flow.
    * Opens the feedback modal if the SDK is initialized and enabled.
@@ -360,6 +382,85 @@ export class YaverFeedback {
     }
   }
 
+  /**
+   * Default reload handler. Tries three strategies in order:
+   *
+   * 1. **YaverBundleLoader** — running inside Yaver's native container.
+   *    Pulls fresh Hermes bundle from agent and reloads the RN bridge.
+   *
+   * 2. **YaverHotReload** — standalone app with feedback SDK's native module
+   *    (added via Expo config plugin). Downloads Hermes bundle from agent,
+   *    saves to Documents, and reloads the RN bridge.
+   *
+   * 3. **DevSettings.reload()** — standalone dev build connected to Metro.
+   */
+  private static defaultReload(): void {
+    if (!config?.agentUrl) return;
+    const bundleUrl = `${config.agentUrl}/dev/native-bundle`;
+    const headers = { Authorization: `Bearer ${config.authToken}` };
+    YaverFeedback.loadBundleAndReload(bundleUrl, headers);
+  }
+
+  /**
+   * Default reload_bundle handler. Receives a compiled Hermes bundle URL
+   * from the agent and loads it via the best available native mechanism.
+   */
+  private static defaultReloadBundle(bundleUrl: string, _assetsUrl?: string): void {
+    if (!config?.agentUrl) return;
+
+    const fullUrl = bundleUrl.startsWith('http')
+      ? bundleUrl
+      : `${config.agentUrl}${bundleUrl}`;
+    const headers = { Authorization: `Bearer ${config.authToken}` };
+    YaverFeedback.loadBundleAndReload(fullUrl, headers);
+  }
+
+  /**
+   * Core bundle reload logic. Tries native loaders in order:
+   *
+   * 1. YaverBundleLoader (Yaver container — full validation + bridge reload)
+   * 2. YaverHotReload (SDK's own native module — download + bridge reload)
+   * 3. DevSettings.reload() (Metro dev server fallback)
+   */
+  private static loadBundleAndReload(
+    bundleUrl: string,
+    headers: Record<string, string>,
+  ): void {
+    const { NativeModules } = require('react-native');
+
+    // Strategy 1: YaverBundleLoader (running inside Yaver container)
+    if (NativeModules.YaverBundleLoader) {
+      NativeModules.YaverBundleLoader.loadBundle(bundleUrl, 'main', headers)
+        .catch((err: Error) => {
+          console.warn('[YaverFeedback] YaverBundleLoader reload failed:', err);
+        });
+      return;
+    }
+
+    // Strategy 2: YaverHotReload (SDK's native module, added by Expo config plugin)
+    if (NativeModules.YaverHotReload) {
+      NativeModules.YaverHotReload.loadBundle(bundleUrl, headers)
+        .catch((err: Error) => {
+          console.warn('[YaverFeedback] YaverHotReload reload failed:', err);
+        });
+      return;
+    }
+
+    // Strategy 3: DevSettings.reload() for Metro dev builds
+    console.warn(
+      '[YaverFeedback] No native bundle loader available. ' +
+      'Add "yaver-feedback-react-native" to your app.json plugins to enable hot reload.',
+    );
+    try {
+      const { DevSettings } = require('react-native');
+      if (typeof DevSettings?.reload === 'function') {
+        DevSettings.reload();
+      }
+    } catch {
+      // Not in dev mode
+    }
+  }
+
   /** Tear down the SDK (stop shake detector, clear state). */
   static destroy(): void {
     if (shakeDetector) {