yaver-feedback-react-native 0.2.0 → 0.3.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/app.plugin.js

@@ -1,12 +1,12 @@
 /**
- * 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
  *
  * Usage in app.json:
- *   { "expo": { "plugins": ["@yaver/feedback-react-native"] } }
+ *   { "expo": { "plugins": ["yaver-feedback-react-native"] } }
  */
 const {
   withInfoPlist,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaver-feedback-react-native",
-  "version": "0.2.0",
+  "version": "0.3.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",

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 {

package/src/FeedbackModal.tsx

@@ -224,13 +224,13 @@ export const FeedbackModal: React.FC = () => {
 
     setIsReloading(true);
     try {
-      const response = await fetch(`${config.agentUrl.replace(/\/$/, '')}/exec`, {
+      const response = await fetch(`${config.agentUrl.replace(/\/$/, '')}/dev/reload-app`, {
         method: 'POST',
         headers: {
           Authorization: `Bearer ${config.authToken}`,
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ command: 'reload', type: 'hot-reload' }),
+        body: JSON.stringify({ mode: 'dev' }),
       });
       if (response.ok) {
         BlackBox.lifecycle('Hot reload triggered from feedback SDK');

package/src/P2PClient.ts

@@ -214,6 +214,32 @@ export class P2PClient {
     };
   }
 
+  /**
+   * Trigger a reload of the third-party app.
+   * In dev mode, this tells the dev server to hot-reload.
+   * In bundle mode, this rebuilds the native bundle and pushes it.
+   * The reload command is also broadcast to all connected SDK devices
+   * via the BlackBox command channel.
+   * @param mode - "dev" for hot reload, "bundle" for native bundle rebuild
+   */
+  async reloadApp(mode: 'dev' | 'bundle' = 'dev'): Promise<{ ok: boolean }> {
+    const response = await fetch(`${this.baseUrl}/dev/reload-app`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ mode }),
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      throw new Error(`[P2PClient] Reload app failed (${response.status}): ${text}`);
+    }
+
+    return response.json();
+  }
+
   /** Get the download URL for a build artifact. */
   getArtifactUrl(buildId: string): string {
     return `${this.baseUrl}/builds/${buildId}/artifact`;

package/src/YaverFeedback.ts

@@ -71,6 +71,35 @@ export class YaverFeedback {
       });
     }
 
+    // Wire up BlackBox command handlers for reload signals from the agent.
+    // This enables the vibe coder to trigger reload from the Yaver mobile app
+    // and have the third-party app (with this SDK) automatically reload.
+    if (enabled) {
+      BlackBox.onCommand((cmd) => {
+        if (cmd.command === 'reload') {
+          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
+            }
+          }
+        } 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);
+          }
+        }
+      });
+    }
+
     // NOTE: We intentionally do NOT hook ErrorUtils.setGlobalHandler().
     // Sentry, Crashlytics, Bugsnag, and other tools all compete for that
     // single slot. Hijacking it would break whichever tool the developer

package/src/index.ts

@@ -49,6 +49,6 @@ export type {
   TestFix,
   TestSession,
 } from './types';
-export type { BlackBoxEvent, BlackBoxConfig } from './BlackBox';
+export type { BlackBoxEvent, BlackBoxConfig, BlackBoxCommand, CommandHandler } from './BlackBox';
 export type { DiscoveryResult } from './Discovery';
 export type { FeedbackEvent } from './P2PClient';

package/src/types.ts

@@ -102,6 +102,30 @@ export interface FeedbackConfig {
    * panelBackgroundColor: '#333333'  // neutral dark gray
    */
   panelBackgroundColor?: string;
+  /**
+   * Callback invoked when the agent pushes a reload command.
+   * This happens when the vibe coder triggers a reload from the Yaver mobile app
+   * or from another connected device.
+   *
+   * If not provided, the SDK will attempt `DevSettings.reload()` in dev mode
+   * or ignore the command in production.
+   *
+   * @example
+   * onReload: () => {
+   *   // Custom reload logic, e.g. re-fetch bundle from agent
+   *   Updates.reloadAsync();
+   * }
+   */
+  onReload?: () => void;
+  /**
+   * Callback invoked when the agent pushes a reload_bundle command with a new
+   * native bundle URL. The SDK passes the bundle URL and assets URL so the app
+   * can fetch and load the new bundle.
+   *
+   * If not provided, the SDK will attempt to POST the bundle to localhost:8347
+   * (Yaver's on-device HTTP server) for native container reload.
+   */
+  onReloadBundle?: (bundleUrl: string, assetsUrl?: string) => void;
   /**
    * TLS certificate fingerprint (SHA256) for HTTPS on LAN.
    * When set, the SDK prefers HTTPS connections and verifies the agent's