yaver-feedback-react-native 0.2.0 → 0.4.0

package/README.md

@@ -1,11 +1,11 @@
-# @yaver/feedback-react-native
+# yaver-feedback-react-native
 
 Visual feedback SDK for Yaver. Lets testers and developers shake their phone (or tap a floating button) to capture screenshots, record voice notes, and send bug reports directly to a Yaver agent running on a dev machine. Built for vibe coding workflows where feedback needs to flow fast.
 
 ## Installation
 
 ```bash
-npm install @yaver/feedback-react-native
+npm install yaver-feedback-react-native
 ```
 
 ### Peer dependencies
@@ -26,7 +26,7 @@ npm install react-native-audio-recorder-player
 ## Quick Start
 
 ```tsx
-import { YaverFeedback, BlackBox, FeedbackModal } from '@yaver/feedback-react-native';
+import { YaverFeedback, BlackBox, FeedbackModal } from 'yaver-feedback-react-native';
 
 // Initialize once at app startup
 YaverFeedback.init({
@@ -164,7 +164,7 @@ yaver sdk-token create --expires 24h
 Continuous streaming of app events to the agent. The agent keeps a ring buffer (last 1000 events per device) and injects context into fix prompts — so the AI agent already knows what the app was doing when you ask for a fix.
 
 ```tsx
-import { BlackBox } from '@yaver/feedback-react-native';
+import { BlackBox } from 'yaver-feedback-react-native';
 
 // Start streaming (call after YaverFeedback.init)
 BlackBox.start({
@@ -219,6 +219,102 @@ BlackBox.isStreaming;       // check if active
 | `state` | State mutations | `BlackBox.stateChange('theme toggled')` |
 | `render` | Component render with duration | `BlackBox.render('FlatList', 32.1)` |
 
+## Remote Reload (Agent Command Channel)
+
+The SDK maintains a persistent SSE connection to the agent that receives commands. The primary use case: a vibe coder is away from their desk, coding on their phone via the Yaver mobile app, and wants to hot-reload the third-party app (with this SDK) running on the same or a different device.
+
+```
+Yaver Mobile App                    Agent                     Third-Party App (SDK)
+  tap "Reload"                                                
+  ───POST /dev/reload-app──►  process reload                  
+                               ├─ dev server reload           
+                               └─ BroadcastCommand("reload")  
+                                  ───SSE push──────────────►  BlackBox receives command
+                                                               ├─ onReload() callback
+                                                               └─ DevSettings.reload()
+```
+
+Works over both direct LAN and relay connections since it's standard HTTP/SSE.
+
+### Setup
+
+```tsx
+import { YaverFeedback, BlackBox } from 'yaver-feedback-react-native';
+
+YaverFeedback.init({
+  authToken: 'your-sdk-token',
+  agentUrl: 'http://192.168.1.10:18080',
+
+  // Called when the vibe coder triggers reload from Yaver mobile app
+  onReload: () => {
+    console.log('Remote reload triggered!');
+    // Default behavior if omitted: DevSettings.reload() in dev mode
+  },
+
+  // Called when agent pushes a new native bundle
+  onReloadBundle: (bundleUrl, assetsUrl) => {
+    console.log('New bundle available at:', bundleUrl);
+    // Default: no-op. Implement custom bundle loading if needed.
+  },
+});
+
+// Start BlackBox — this also connects the command channel
+BlackBox.start({ appName: 'AcmeStore' });
+```
+
+### Custom Command Handlers
+
+For advanced use cases, register handlers directly on BlackBox:
+
+```tsx
+// Listen for any command from the agent
+const unsubscribe = BlackBox.onCommand((cmd) => {
+  switch (cmd.command) {
+    case 'reload':
+      // Hot reload from dev server
+      DevSettings.reload();
+      break;
+    case 'reload_bundle':
+      // Fetch new native bundle
+      const { bundleUrl, assetsUrl } = cmd.data;
+      loadNewBundle(bundleUrl, assetsUrl);
+      break;
+    default:
+      console.log('Unknown command:', cmd.command);
+  }
+});
+
+// Check connection status
+BlackBox.isCommandChannelConnected; // boolean
+
+// Clean up
+unsubscribe();
+```
+
+### Triggering Reload from P2PClient
+
+The SDK can also trigger reload programmatically (e.g., from a "Reload" button in the Feedback modal):
+
+```tsx
+import { P2PClient } from 'yaver-feedback-react-native';
+
+const client = new P2PClient('http://192.168.1.10:18080', 'your-token');
+
+// Hot reload (dev server restart)
+await client.reloadApp('dev');
+
+// Rebuild native bundle + push to all connected SDK devices
+await client.reloadApp('bundle');
+```
+
+### How It Works
+
+1. `BlackBox.start()` connects to `/blackbox/command-stream` via SSE
+2. The connection auto-reconnects on disconnect (5s backoff)
+3. When the agent receives `POST /dev/reload` or `POST /dev/reload-app`, it broadcasts a command to all connected SDK sessions
+4. The SDK invokes `onReload` / `onReloadBundle` callbacks, or falls back to `DevSettings.reload()` in dev mode
+5. Events are still sent via batch POST to `/blackbox/events` (unchanged)
+
 ### Resilience
 
 - Failed flushes re-add events to the buffer (capped at 2x maxBufferSize)
@@ -258,7 +354,7 @@ YaverFeedback.init({
 ### Manual discovery
 
 ```typescript
-import { YaverDiscovery } from '@yaver/feedback-react-native';
+import { YaverDiscovery } from 'yaver-feedback-react-native';
 
 // Full discovery (Convex → stored → LAN scan)
 const result = await YaverDiscovery.discover({
@@ -281,7 +377,7 @@ await YaverDiscovery.clear();
 A full-screen UI for discovering and connecting to a Yaver agent. Shows connection status, URL/token inputs, auto-discover button, and a Start/Stop testing toggle with recording timer.
 
 ```tsx
-import { YaverConnectionScreen } from '@yaver/feedback-react-native';
+import { YaverConnectionScreen } from 'yaver-feedback-react-native';
 
 function App() {
   return (
@@ -445,6 +541,10 @@ YaverFeedback.init({
   feedbackMode: 'batch',                   // 'live' | 'narrated' | 'batch' (default: 'batch')
   agentCommentaryLevel: 0,                 // 0-10 (default: 0, only relevant in live mode)
   maxCapturedErrors: 5,                    // Error ring buffer size (default: 5)
+
+  // Remote reload callbacks (from Yaver mobile app or another SDK device)
+  onReload: () => { ... },                 // Called on hot reload command (default: DevSettings.reload())
+  onReloadBundle: (url, assets) => { ... },// Called on native bundle rebuild command
 });
 ```
 
@@ -463,7 +563,7 @@ YaverFeedback.init({ authToken, trigger: 'shake' });
 A small draggable "Y" button overlays the app. Tap to open the feedback modal.
 
 ```tsx
-import { FloatingButton, FeedbackModal, YaverFeedback } from '@yaver/feedback-react-native';
+import { FloatingButton, FeedbackModal, YaverFeedback } from 'yaver-feedback-react-native';
 
 function App() {
   return (
@@ -481,7 +581,7 @@ function App() {
 Trigger feedback collection programmatically from anywhere in your app.
 
 ```typescript
-import { YaverFeedback } from '@yaver/feedback-react-native';
+import { YaverFeedback } from 'yaver-feedback-react-native';
 
 // In a button handler, debug menu, etc.
 YaverFeedback.startReport();
@@ -492,7 +592,7 @@ YaverFeedback.startReport();
 For direct communication with the Yaver agent beyond feedback:
 
 ```typescript
-import { P2PClient } from '@yaver/feedback-react-native';
+import { P2PClient } from 'yaver-feedback-react-native';
 
 const client = new P2PClient('http://192.168.1.10:18080', 'your-token');
 
@@ -608,6 +708,8 @@ YaverFeedback.setEnabled(false);
 | `wrapConsole()` | Intercept console.log/warn/error |
 | `unwrapConsole()` | Restore original console methods |
 | `wrapErrorHandler(next?)` | Pass-through error handler with real-time streaming |
+| `onCommand(handler)` | Register handler for agent commands (reload, etc.). Returns unsubscribe fn |
+| `isCommandChannelConnected` | Whether the SSE command channel is connected (getter) |
 
 ### P2PClient
 
@@ -622,6 +724,7 @@ YaverFeedback.setEnabled(false);
 | `getArtifactUrl(buildId)` | Get download URL for a build artifact |
 | `voiceStatus()` | Get voice capability info |
 | `transcribeVoice(audioUri)` | Send audio for transcription |
+| `reloadApp(mode)` | Trigger remote reload: `'dev'` (hot reload) or `'bundle'` (rebuild + push) |
 | `startTestSession()` | Start autonomous test session |
 | `stopTestSession()` | Stop test session |
 | `getTestSession()` | Get test session status + fixes |
@@ -655,8 +758,10 @@ The SDK communicates with these agent HTTP endpoints:
 | `/feedback` | POST | Upload feedback bundle (multipart) |
 | `/feedback/stream` | POST | Stream live feedback events |
 | `/blackbox/events` | POST | Batch stream Black Box events |
+| `/blackbox/command-stream` | GET | SSE command channel (agent pushes reload, etc.) |
 | `/blackbox/subscribe` | GET | SSE live log stream |
 | `/blackbox/context` | GET | Get generated prompt context |
+| `/dev/reload-app` | POST | Trigger remote reload of SDK-connected apps |
 | `/builds` | GET/POST | List or start builds |
 | `/voice/status` | GET | Voice capability info |
 | `/voice/transcribe` | POST | Send audio for transcription |
@@ -667,23 +772,24 @@ The SDK communicates with these agent HTTP endpoints:
 ## Architecture
 
 ```
-┌──────────────────┐     HTTP (Bearer auth)     ┌──────────────────┐
-│  Your App        │────────────────────────────►│  Yaver Agent     │
-│  + Feedback SDK  │  feedback, blackbox events  │  (Go CLI)        │
-│  + BlackBox      │  screenshots, voice, video  │  on your machine │
-│                  │◄────────────────────────────│                  │
-│                  │  fixes, build status, voice │  runs AI agent   │
-└──────────────────┘                             └──────────────────┘
-       │                                                │
-       │  Auth only                                     │  Auth only
-       ▼                                                ▼
-┌─────────────────────────────────────────────────────────────────────┐
-│                        Convex Backend                               │
-│  Token validation + device registry (no task data stored)           │
-└─────────────────────────────────────────────────────────────────────┘
-```
-
-All feedback data flows P2P between your app and the agent. Convex handles only auth and device discovery.
+┌──────────────────┐     HTTP (Bearer auth)     ┌──────────────────┐     HTTP/SSE      ┌──────────────────┐
+│  Your App        │────────────────────────────►│  Yaver Agent     │◄────────────────── │  Yaver Mobile    │
+│  + Feedback SDK  │  feedback, blackbox events  │  (Go CLI)        │  tasks, reload     │  App (phone)     │
+│  + BlackBox      │  screenshots, voice, video  │  on your machine │  commands           │  vibe coding     │
+│                  │◄────────────────────────────│                  │                    │                  │
+│                  │  reload commands (SSE),     │  runs AI agent   │                    │                  │
+│                  │  fixes, build status, voice │                  │                    │                  │
+└──────────────────┘                             └──────────────────┘                    └──────────────────┘
+       │                                                │                                       │
+       │  Auth only                                     │  Auth only                             │
+       ▼                                                ▼                                       ▼
+┌──────────────────────────────────────────────────────────────────────────────────────────────────────────┐
+│                        Convex Backend                                                                    │
+│  Token validation + device registry (no task data stored)                                                │
+└──────────────────────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+All feedback data flows P2P between your app and the agent. The Yaver mobile app can trigger remote reloads that reach your app via the agent's command channel. Convex handles only auth and device discovery.
 
 ## License
 

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();
+    }
+}