yaver-feedback-react-native 0.2.0 → 0.4.0

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/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/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/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

@@ -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
@@ -71,6 +75,29 @@ 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 {
+            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);
+          }
+        }
+      });
+    }
+
     // 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
@@ -82,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.
@@ -331,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) {

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