yaver-feedback-react-native 0.2.0 → 0.4.0

package/app.plugin.js

@@ -1,18 +1,30 @@
 /**
- * Expo config plugin for @yaver/feedback-react-native.
+ * 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"] } }
+ *   { "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.2.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/BlackBox.ts

@@ -49,6 +49,15 @@ export interface BlackBoxConfig {
  * - Use `BlackBox.wrapConsole()` to intercept console.log/warn/error
  *   (only if you explicitly opt in — no auto-hooking)
  */
+/** Command received from the agent via the SSE command channel. */
+export interface BlackBoxCommand {
+  command: string; // "reload", "reload_bundle"
+  data?: Record<string, unknown>; // e.g. { bundleUrl: "/dev/native-bundle" }
+}
+
+/** Callback type for handling agent commands. */
+export type CommandHandler = (cmd: BlackBoxCommand) => void;
+
 export class BlackBox {
   private static baseUrl: string | null = null;
   private static authToken: string | null = null;
@@ -65,6 +74,12 @@ export class BlackBox {
     error: typeof console.error;
   } | null = null;
 
+  // SSE command channel — persistent connection to /blackbox/stream
+  private static sseAbortController: AbortController | null = null;
+  private static sseReconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private static commandHandlers: CommandHandler[] = [];
+  private static sseConnected = false;
+
   /**
    * Start the black box stream. Call after `YaverFeedback.init()`.
    *
@@ -97,6 +112,9 @@ export class BlackBox {
       message: 'Black box streaming started',
       timestamp: Date.now(),
     });
+
+    // Connect SSE command channel for receiving agent commands (reload, etc.)
+    BlackBox.connectSSE();
   }
 
   /** Stop the black box stream and flush remaining events. */
@@ -112,6 +130,7 @@ export class BlackBox {
       clearInterval(BlackBox.flushTimer);
       BlackBox.flushTimer = null;
     }
+    BlackBox.disconnectSSE();
     BlackBox.started = false;
   }
 
@@ -273,6 +292,137 @@ export class BlackBox {
     };
   }
 
+  // ─── Command channel (agent → SDK) ──────────────────────────────
+
+  /**
+   * Register a handler for commands pushed by the agent.
+   * The primary use case is receiving "reload" commands when the vibe coder
+   * triggers a reload from the Yaver mobile app.
+   *
+   * @example
+   * BlackBox.onCommand((cmd) => {
+   *   if (cmd.command === 'reload') {
+   *     DevSettings.reload(); // or Updates.reloadAsync()
+   *   }
+   * });
+   */
+  static onCommand(handler: CommandHandler): () => void {
+    BlackBox.commandHandlers.push(handler);
+    // Return unsubscribe function
+    return () => {
+      BlackBox.commandHandlers = BlackBox.commandHandlers.filter(h => h !== handler);
+    };
+  }
+
+  /** Whether the SSE command channel is connected. */
+  static get isCommandChannelConnected(): boolean {
+    return BlackBox.sseConnected;
+  }
+
+  /**
+   * Connect to the agent's /blackbox/stream SSE endpoint.
+   * This persistent connection allows the agent to push commands (reload, etc.)
+   * back to the SDK. Events are still sent via batch POST /blackbox/events.
+   */
+  private static async connectSSE(): Promise<void> {
+    if (!BlackBox.baseUrl || !BlackBox.authToken) return;
+
+    // Disconnect any existing connection
+    BlackBox.disconnectSSE();
+
+    const controller = new AbortController();
+    BlackBox.sseAbortController = controller;
+
+    const url = `${BlackBox.baseUrl}/blackbox/command-stream?device=${encodeURIComponent(BlackBox.deviceId)}`;
+
+    try {
+      const response = await fetch(url, {
+        method: 'GET',
+        headers: {
+          Authorization: `Bearer ${BlackBox.authToken}`,
+          'X-Device-ID': BlackBox.deviceId,
+          'X-Platform': Platform.OS,
+          'X-App-Name': BlackBox.appName,
+          Accept: 'text/event-stream',
+        },
+        // @ts-ignore — React Native supports signal on fetch
+        signal: controller.signal,
+      });
+
+      if (!response.ok || !response.body) {
+        BlackBox.scheduleSSEReconnect();
+        return;
+      }
+
+      BlackBox.sseConnected = true;
+
+      // Read SSE stream
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+      let buffer = '';
+
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split('\n');
+        buffer = lines.pop() ?? '';
+
+        for (const line of lines) {
+          if (!line.startsWith('data: ')) continue;
+          try {
+            const msg = JSON.parse(line.slice(6));
+            if (msg.type === 'command' && msg.command) {
+              const cmd: BlackBoxCommand = msg.command;
+              for (const handler of BlackBox.commandHandlers) {
+                try {
+                  handler(cmd);
+                } catch {
+                  // Handler error — don't break the loop
+                }
+              }
+            }
+          } catch {
+            // Malformed SSE data — skip
+          }
+        }
+      }
+    } catch (err: unknown) {
+      // AbortError is expected on disconnect
+      if (err instanceof Error && err.name === 'AbortError') return;
+    } finally {
+      BlackBox.sseConnected = false;
+    }
+
+    // Reconnect if still running
+    if (BlackBox.started) {
+      BlackBox.scheduleSSEReconnect();
+    }
+  }
+
+  private static disconnectSSE(): void {
+    if (BlackBox.sseAbortController) {
+      BlackBox.sseAbortController.abort();
+      BlackBox.sseAbortController = null;
+    }
+    if (BlackBox.sseReconnectTimer) {
+      clearTimeout(BlackBox.sseReconnectTimer);
+      BlackBox.sseReconnectTimer = null;
+    }
+    BlackBox.sseConnected = false;
+  }
+
+  private static scheduleSSEReconnect(): void {
+    if (!BlackBox.started) return;
+    if (BlackBox.sseReconnectTimer) return;
+    // Reconnect after 5s
+    BlackBox.sseReconnectTimer = setTimeout(() => {
+      BlackBox.sseReconnectTimer = null;
+      if (BlackBox.started) BlackBox.connectSSE();
+    }, 5000);
+  }
+
   // ─── Internal ────────────────────────────────────────────────────
 
   private static push(event: BlackBoxEvent): void {