yaver-feedback-react-native 0.3.0 → 0.5.0

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,14 +1,16 @@
 {
   "name": "yaver-feedback-react-native",
-  "version": "0.3.0",
+  "version": "0.5.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",
+  "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/kivanccakmak/yaver.io",
@@ -20,20 +22,35 @@
     "@react-native-async-storage/async-storage": ">=1.17.0"
   },
   "peerDependenciesMeta": {
-    "@expo/config-plugins": { "optional": true },
-    "expo-constants": { "optional": true }
+    "@expo/config-plugins": {
+      "optional": true
+    },
+    "expo-constants": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "jest": "^29.0.0",
     "@types/jest": "^29.0.0",
+    "ts-jest": "^29.1.0",
     "typescript": "^5.0.0"
   },
   "scripts": {
     "test": "jest"
   },
   "jest": {
-    "preset": "react-native",
-    "testPathPattern": "__tests__"
+    "preset": "ts-jest",
+    "testEnvironment": "node",
+    "testMatch": [
+      "**/src/__tests__/**/*.test.ts"
+    ]
   },
-  "keywords": ["yaver", "feedback", "bug-report", "screen-recording", "vibe-coding", "react-native"]
+  "keywords": [
+    "yaver",
+    "feedback",
+    "bug-report",
+    "screen-recording",
+    "vibe-coding",
+    "react-native"
+  ]
 }

package/src/AuthOverlay.tsx

@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from 'react';
+import { DeviceEventEmitter, Modal } from 'react-native';
+import { YaverLoginScreen } from './LoginScreen';
+import { YaverMachinePickerScreen } from './MachinePickerScreen';
+import { YaverFeedback } from './YaverFeedback';
+import { getToken, RemoteDevice } from './auth';
+
+/**
+ * Presentation layer for the SDK's auth + machine-picker modals.
+ *
+ * Mounts automatically inside `<FeedbackModal />`, so consumers of the SDK
+ * get in-app login with no extra wiring. It listens for events emitted by
+ * `YaverFeedback.showLogin()` / `showMachinePicker()`:
+ *
+ *   yaverFeedback:startLogin          → show login modal
+ *   yaverFeedback:startMachinePicker  → show machine picker
+ *
+ * The overlay closes itself once login/pick succeeds, then re-emits
+ * `yaverFeedback:startReport` so the user continues straight into the
+ * feedback flow they originally triggered.
+ */
+export const AuthOverlay: React.FC = () => {
+  const [loginVisible, setLoginVisible] = useState(false);
+  const [pickerVisible, setPickerVisible] = useState(false);
+  const [token, setToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      const cached = await getToken();
+      if (mounted && cached) setToken(cached);
+    })();
+
+    const loginSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:startLogin',
+      () => setLoginVisible(true),
+    );
+    const pickerSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:startMachinePicker',
+      async () => {
+        const cached = await getToken();
+        if (cached) setToken(cached);
+        if (cached) setPickerVisible(true);
+      },
+    );
+    return () => {
+      mounted = false;
+      loginSub.remove();
+      pickerSub.remove();
+    };
+  }, []);
+
+  const handleLoggedIn = async (newToken: string) => {
+    setToken(newToken);
+    await YaverFeedback.setAuthToken(newToken);
+    setLoginVisible(false);
+    setPickerVisible(true);
+  };
+
+  const handleDevicePicked = async (device: RemoteDevice) => {
+    await YaverFeedback.setPreferredDevice(device.deviceId);
+    setPickerVisible(false);
+    // Continue straight into the feedback flow the user originally triggered.
+    DeviceEventEmitter.emit('yaverFeedback:startReport');
+  };
+
+  return (
+    <>
+      <Modal
+        visible={loginVisible}
+        animationType="slide"
+        presentationStyle="fullScreen"
+        onRequestClose={() => setLoginVisible(false)}
+      >
+        <YaverLoginScreen
+          onLoggedIn={handleLoggedIn}
+          onCancel={() => setLoginVisible(false)}
+        />
+      </Modal>
+
+      <Modal
+        visible={pickerVisible && !!token}
+        animationType="slide"
+        presentationStyle="fullScreen"
+        onRequestClose={() => setPickerVisible(false)}
+      >
+        {token && (
+          <YaverMachinePickerScreen
+            token={token}
+            onPick={handleDevicePicked}
+            onCancel={() => setPickerVisible(false)}
+          />
+        )}
+      </Modal>
+    </>
+  );
+};

package/src/BlackBox.ts

@@ -7,7 +7,15 @@ import { YaverFeedback } from './YaverFeedback';
  * These mirror the Go BlackBoxEvent struct on the agent side.
  */
 export interface BlackBoxEvent {
-  type: 'log' | 'error' | 'navigation' | 'lifecycle' | 'network' | 'state' | 'render';
+  type:
+    | 'log'
+    | 'error'
+    | 'navigation'
+    | 'lifecycle'
+    | 'network'
+    | 'state'
+    | 'render'
+    | 'track';
   level?: 'info' | 'warn' | 'error';
   message: string;
   timestamp: number;
@@ -94,7 +102,7 @@ export class BlackBox {
     }
 
     BlackBox.baseUrl = feedbackConfig.agentUrl.replace(/\/$/, '');
-    BlackBox.authToken = feedbackConfig.authToken;
+    BlackBox.authToken = feedbackConfig.authToken ?? null;
     BlackBox.deviceId = config?.deviceId ?? BlackBox.generateDeviceId();
     BlackBox.appName = config?.appName ?? '';
     BlackBox.flushInterval = config?.flushInterval ?? 2000;
@@ -153,6 +161,37 @@ export class BlackBox {
     BlackBox.push({ type: 'log', level: 'error', message, timestamp: Date.now(), source, metadata });
   }
 
+  // ─── Track events ────────────────────────────────────────────────
+  //
+  // Business-event ingest. Routed into the agent's analytics ledger
+  // via the same BlackBox stream so the dev doesn't pay Mixpanel
+  // / Amplitude for "the user tapped Purchase." Zero dashboards in
+  // yaver; export to CSV / webhook into PostHog if you want charts.
+
+  /**
+   * Record a business event. Fires into the analytics ledger on
+   * the agent — see GET /analytics/events.csv.
+   *
+   * @example
+   * ```ts
+   * BlackBox.track('purchase_completed', {
+   *   amount: '9.99',
+   *   currency: 'USD',
+   *   plan: 'pro',
+   * });
+   * ```
+   */
+  static track(name: string, props?: Record<string, unknown>, route?: string): void {
+    if (!name) return;
+    BlackBox.push({
+      type: 'track',
+      message: name,
+      timestamp: Date.now(),
+      route,
+      metadata: props,
+    });
+  }
+
   // ─── Errors ──────────────────────────────────────────────────────
 
   /** Record a caught error with stack trace. Also adds to the feedback error buffer. */