yaver-feedback-react-native 0.2.0

package/src/P2PClient.ts

@@ -0,0 +1,303 @@
+import { Platform } from 'react-native';
+import { FeedbackBundle, TestSession, VoiceCapability } from './types';
+
+export interface FeedbackEvent {
+  type: string;
+  timestamp: string;
+  data: any;
+}
+
+/**
+ * Lightweight P2P HTTP client for communicating with a Yaver agent.
+ *
+ * Reuses the same endpoint patterns as the main upload module but adds
+ * support for streaming feedback, listing builds, and triggering builds.
+ */
+export class P2PClient {
+  private baseUrl: string;
+  private authToken: string;
+
+  constructor(baseUrl: string, authToken: string) {
+    this.baseUrl = baseUrl.replace(/\/$/, '');
+    this.authToken = authToken;
+  }
+
+  /** Update the base URL (e.g. after re-discovery). */
+  setBaseUrl(url: string): void {
+    this.baseUrl = url.replace(/\/$/, '');
+  }
+
+  /** Update the auth token. */
+  setAuthToken(token: string): void {
+    this.authToken = token;
+  }
+
+  /** Health check — returns true if the agent is reachable. */
+  async health(): Promise<boolean> {
+    try {
+      const controller = new AbortController();
+      const timeoutId = setTimeout(() => controller.abort(), 3000);
+
+      const response = await fetch(`${this.baseUrl}/health`, {
+        method: 'GET',
+        signal: controller.signal,
+      });
+
+      clearTimeout(timeoutId);
+      return response.ok;
+    } catch {
+      return false;
+    }
+  }
+
+  /** Get agent info (hostname, version, platform). */
+  async info(): Promise<{ hostname: string; version: string; platform: string }> {
+    const response = await this.request('GET', '/health');
+    const data = await response.json();
+    return {
+      hostname: data.hostname ?? data.name ?? 'Unknown',
+      version: data.version ?? 'unknown',
+      platform: data.platform ?? 'unknown',
+    };
+  }
+
+  /**
+   * Upload a feedback bundle via multipart POST.
+   * @returns The feedback report ID from the agent.
+   */
+  async uploadFeedback(bundle: FeedbackBundle): Promise<string> {
+    const formData = new FormData();
+
+    formData.append('metadata', JSON.stringify(bundle.metadata));
+
+    for (let i = 0; i < bundle.screenshots.length; i++) {
+      const path = bundle.screenshots[i];
+      formData.append(`screenshot_${i}`, {
+        uri: Platform.OS === 'android' ? `file://${path}` : path,
+        type: 'image/png',
+        name: `screenshot_${i}.png`,
+      } as any);
+    }
+
+    if (bundle.audio) {
+      formData.append('audio', {
+        uri: Platform.OS === 'android' ? `file://${bundle.audio}` : bundle.audio,
+        type: 'audio/m4a',
+        name: 'voice_note.m4a',
+      } as any);
+    }
+
+    if (bundle.video) {
+      formData.append('video', {
+        uri: Platform.OS === 'android' ? `file://${bundle.video}` : bundle.video,
+        type: 'video/mp4',
+        name: 'screen_recording.mp4',
+      } as any);
+    }
+
+    const response = await fetch(`${this.baseUrl}/feedback`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+      },
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      throw new Error(`[P2PClient] Upload failed (${response.status}): ${text}`);
+    }
+
+    const result = await response.json();
+    return result.id ?? result.reportId ?? 'unknown';
+  }
+
+  /**
+   * Stream feedback events to the agent in live mode.
+   * Sends each event as a JSON POST to `/feedback/stream`.
+   */
+  async streamFeedback(events: AsyncIterable<FeedbackEvent>): Promise<void> {
+    for await (const event of events) {
+      const response = await fetch(`${this.baseUrl}/feedback/stream`, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${this.authToken}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(event),
+      });
+
+      if (!response.ok) {
+        const text = await response.text().catch(() => '');
+        throw new Error(
+          `[P2PClient] Stream event failed (${response.status}): ${text}`,
+        );
+      }
+    }
+  }
+
+  /** List available builds from the agent. */
+  async listBuilds(): Promise<any[]> {
+    const response = await this.request('GET', '/builds');
+    const data = await response.json();
+    return data.builds ?? data ?? [];
+  }
+
+  /** Start a build for the given platform. */
+  async startBuild(platform: string): Promise<any> {
+    const response = await fetch(`${this.baseUrl}/builds`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ platform }),
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      throw new Error(`[P2PClient] Start build failed (${response.status}): ${text}`);
+    }
+
+    return response.json();
+  }
+
+  /**
+   * Get voice capability info from the agent.
+   * voiceInputEnabled is always true — mobile can always record and send audio.
+   * s2sProvider/sttProvider indicate whether transcription is available.
+   */
+  async voiceStatus(): Promise<VoiceCapability> {
+    const response = await this.request('GET', '/voice/status');
+    const data = await response.json();
+    return {
+      voiceInputEnabled: data.voiceInputEnabled ?? true,
+      s2sProvider: data.s2sProvider ?? undefined,
+      s2sReady: data.s2sReady ?? false,
+      sttProvider: data.sttProvider ?? undefined,
+      sttReady: data.sttReady ?? false,
+    };
+  }
+
+  /**
+   * Send voice audio to the agent for transcription.
+   * Works with any configured STT or S2S provider on the agent.
+   * If no provider is configured, audio is saved for manual review.
+   * @returns Transcribed text (or empty string if no provider available).
+   */
+  async transcribeVoice(audioUri: string): Promise<{ text: string; provider: string; audioFile?: string }> {
+    const formData = new FormData();
+    formData.append('audio', {
+      uri: Platform.OS === 'android' ? `file://${audioUri}` : audioUri,
+      type: 'audio/wav',
+      name: 'voice_input.wav',
+    } as any);
+
+    const response = await fetch(`${this.baseUrl}/voice/transcribe`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+      },
+      body: formData,
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      throw new Error(`[P2PClient] Voice transcribe failed (${response.status}): ${text}`);
+    }
+
+    const result = await response.json();
+    return {
+      text: result.text ?? '',
+      provider: result.provider ?? 'none',
+      audioFile: result.audioFile,
+    };
+  }
+
+  /** Get the download URL for a build artifact. */
+  getArtifactUrl(buildId: string): string {
+    return `${this.baseUrl}/builds/${buildId}/artifact`;
+  }
+
+  /**
+   * Start an autonomous test session.
+   * The agent reads the codebase for context, then navigates the app
+   * on the connected device/emulator, catches exceptions via BlackBox,
+   * writes fixes, and hot reloads — all without committing.
+   */
+  async startTestSession(): Promise<{ sessionId: string }> {
+    const response = await fetch(`${this.baseUrl}/test-app/start`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({ source: 'feedback-sdk' }),
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      throw new Error(`[P2PClient] Start test session failed (${response.status}): ${text}`);
+    }
+
+    return response.json();
+  }
+
+  /** Stop a running test session. */
+  async stopTestSession(): Promise<void> {
+    await fetch(`${this.baseUrl}/test-app/stop`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${this.authToken}` },
+    });
+  }
+
+  /** Get the current test session status and list of fixes. */
+  async getTestSession(): Promise<TestSession> {
+    const response = await this.request('GET', '/test-app/status');
+    return response.json();
+  }
+
+  /**
+   * Rotate the SDK token. The old token stays valid for 5 minutes (grace period).
+   * After rotation, the client automatically uses the new token.
+   * @returns The new token and its expiry time.
+   */
+  async rotateToken(): Promise<{ token: string; expiresAt: number }> {
+    const response = await fetch(`${this.baseUrl}/sdk/token/rotate`, {
+      method: 'POST',
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      throw new Error(`[P2PClient] Token rotation failed (${response.status}): ${text}`);
+    }
+
+    const result = await response.json();
+    // Auto-update to new token
+    this.authToken = result.token;
+    return { token: result.token, expiresAt: result.expiresAt };
+  }
+
+  /** Internal helper for authenticated GET/POST requests. */
+  private async request(method: string, path: string): Promise<Response> {
+    const response = await fetch(`${this.baseUrl}${path}`, {
+      method,
+      headers: {
+        Authorization: `Bearer ${this.authToken}`,
+      },
+    });
+
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      throw new Error(
+        `[P2PClient] ${method} ${path} failed (${response.status}): ${text}`,
+      );
+    }
+
+    return response;
+  }
+}

package/src/ShakeDetector.ts

@@ -0,0 +1,57 @@
+import { DeviceEventEmitter, Platform } from 'react-native';
+
+const SHAKE_THRESHOLD = 1.5; // g-force threshold
+const SHAKE_TIMEOUT_MS = 1000; // minimum time between shakes
+const SHAKE_REQUIRED_EVENTS = 3; // number of threshold-exceeding events to trigger
+
+/**
+ * Detects device shake gestures.
+ *
+ * On iOS, listens to the native 'shakeEvent' emitted by RCTDeviceEventEmitter.
+ * On Android, uses accelerometer data with threshold-based detection as a fallback.
+ */
+export class ShakeDetector {
+  private subscription: any = null;
+  private lastShakeTime = 0;
+
+  /**
+   * Start listening for shake gestures.
+   * @param onShake - Callback invoked when a shake is detected.
+   */
+  start(onShake: () => void): void {
+    this.stop();
+
+    // React Native emits a 'shakeEvent' on iOS when the device is shaken
+    // (available via DeviceEventEmitter in debug builds)
+    if (Platform.OS === 'ios') {
+      this.subscription = DeviceEventEmitter.addListener('shakeEvent', () => {
+        const now = Date.now();
+        if (now - this.lastShakeTime > SHAKE_TIMEOUT_MS) {
+          this.lastShakeTime = now;
+          onShake();
+        }
+      });
+      return;
+    }
+
+    // Android: listen for accelerometer-based shake detection
+    // Uses the same DeviceEventEmitter pattern — if a native module or
+    // react-native-shake is installed, it will emit 'ShakeEvent'.
+    // Otherwise this is a no-op (manual trigger or floating button can be used).
+    this.subscription = DeviceEventEmitter.addListener('ShakeEvent', () => {
+      const now = Date.now();
+      if (now - this.lastShakeTime > SHAKE_TIMEOUT_MS) {
+        this.lastShakeTime = now;
+        onShake();
+      }
+    });
+  }
+
+  /** Stop listening for shake gestures. */
+  stop(): void {
+    if (this.subscription) {
+      this.subscription.remove();
+      this.subscription = null;
+    }
+  }
+}

package/src/YaverFeedback.ts

@@ -0,0 +1,345 @@
+import { FeedbackConfig, CapturedError } from './types';
+import { YaverDiscovery } from './Discovery';
+import { BlackBox } from './BlackBox';
+import { P2PClient } from './P2PClient';
+import { ShakeDetector } from './ShakeDetector';
+
+let config: FeedbackConfig | null = null;
+let enabled = false;
+let p2pClient: P2PClient | null = null;
+let shakeDetector: ShakeDetector | null = null;
+
+/** Ring buffer of captured errors. */
+let errorBuffer: CapturedError[] = [];
+let maxErrors = 5;
+
+/** Track whether BlackBox was running before disable (to restart on enable). */
+let blackBoxWasStreaming = false;
+
+/**
+ * Main entry point for the Yaver Feedback SDK.
+ * Call `YaverFeedback.init()` once at app startup.
+ */
+export class YaverFeedback {
+  /**
+   * Initialize the feedback SDK with the given configuration.
+   * Typically called in your app's root component or entry file.
+   *
+   * If no `agentUrl` is provided, the SDK will attempt auto-discovery
+   * via `YaverDiscovery` on the first `startReport()` call.
+   */
+  static init(cfg: FeedbackConfig): void {
+    config = {
+      trigger: 'shake',
+      maxRecordingDuration: 120,
+      feedbackMode: 'batch',
+      agentCommentaryLevel: 0,
+      ...cfg,
+    };
+
+    // Default: enabled only in dev mode
+    if (cfg.enabled !== undefined) {
+      enabled = cfg.enabled;
+    } else {
+      enabled = typeof __DEV__ !== 'undefined' ? __DEV__ : false;
+    }
+
+    // Create P2P client if we have a URL
+    if (config.agentUrl) {
+      p2pClient = new P2PClient(config.agentUrl, config.authToken);
+    } else {
+      p2pClient = null;
+    }
+
+    // Set up error capture buffer size
+    maxErrors = cfg.maxCapturedErrors ?? 5;
+    errorBuffer = [];
+
+    // Wire up shake detection when trigger is 'shake'
+    if (shakeDetector) {
+      shakeDetector.stop();
+      shakeDetector = null;
+    }
+    if (enabled && config.trigger === 'shake') {
+      shakeDetector = new ShakeDetector();
+      shakeDetector.start(() => {
+        if (config?.reportingOnly) {
+          YaverFeedback.sendAutoReport();
+        } else {
+          YaverFeedback.startReport();
+        }
+      });
+    }
+
+    // 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
+    // already has installed, depending on init order.
+    //
+    // Instead, developers use:
+    //   - YaverFeedback.attachError(err) in catch blocks
+    //   - YaverFeedback.wrapErrorHandler(existingHandler) to create a
+    //     pass-through wrapper they insert into their own error chain
+  }
+
+  /**
+   * Manually trigger the feedback collection flow.
+   * Opens the feedback modal if the SDK is initialized and enabled.
+   *
+   * If no agentUrl was configured, runs auto-discovery first.
+   */
+  static async startReport(): Promise<void> {
+    if (!config) {
+      console.warn('[YaverFeedback] SDK not initialized. Call YaverFeedback.init() first.');
+      return;
+    }
+    if (!enabled) {
+      return;
+    }
+
+    // Auto-discover if no agent URL was provided
+    if (!config.agentUrl) {
+      try {
+        const result = await YaverDiscovery.discover({
+          convexUrl: config.convexUrl,
+          authToken: config.authToken,
+          preferredDeviceId: config.preferredDeviceId,
+        });
+        if (result) {
+          config.agentUrl = result.url;
+          p2pClient = new P2PClient(result.url, config.authToken);
+        } else {
+          console.warn('[YaverFeedback] No agent found. Set agentUrl, convexUrl, or ensure agent is running on the network.');
+        }
+      } catch (err) {
+        console.warn('[YaverFeedback] Auto-discovery failed:', err);
+      }
+    }
+
+    // Emit event that the FeedbackModal listens for
+    const { DeviceEventEmitter } = require('react-native');
+    DeviceEventEmitter.emit('yaverFeedback:startReport');
+  }
+
+  /** Returns true if the SDK has been initialized. */
+  static isInitialized(): boolean {
+    return config !== null;
+  }
+
+  /**
+   * Enable or disable the entire feedback SDK at runtime.
+   *
+   * **Disable (false):**
+   * - Stops BlackBox streaming (flushes remaining events first)
+   * - Restores console.log/warn/error if wrapped
+   * - Clears error buffer
+   * - All methods become no-ops (attachError, wrapErrorHandler still safe to call but do nothing)
+   * - P2P client is kept alive (no reconnection cost on re-enable)
+   *
+   * **Enable (true):**
+   * - Restarts BlackBox streaming if it was running before disable
+   * - Error buffer starts collecting again
+   * - All methods become active
+   */
+  static setEnabled(value: boolean): void {
+    if (enabled === value) return; // No-op if already in desired state
+
+    if (!value) {
+      // === DISABLE ===
+      blackBoxWasStreaming = BlackBox.isStreaming;
+      if (BlackBox.isStreaming) {
+        BlackBox.stop(); // flush + stop timer + unwrap console
+      }
+      BlackBox.unwrapConsole(); // ensure console is restored even if BlackBox wasn't started
+      errorBuffer = [];
+      if (shakeDetector) {
+        shakeDetector.stop();
+        shakeDetector = null;
+      }
+    } else {
+      // === ENABLE ===
+      if (blackBoxWasStreaming) {
+        BlackBox.start(); // restart with previous config
+      }
+      // Restart shake detector if trigger is 'shake'
+      if (config?.trigger === 'shake' && !shakeDetector) {
+        shakeDetector = new ShakeDetector();
+        shakeDetector.start(() => {
+          if (config?.reportingOnly) {
+            YaverFeedback.sendAutoReport();
+          } else {
+            YaverFeedback.startReport();
+          }
+        });
+      }
+    }
+
+    enabled = value;
+  }
+
+  /** Returns whether the SDK is currently enabled. */
+  static isEnabled(): boolean {
+    return enabled;
+  }
+
+  /** Returns the current config, or null if not initialized. */
+  static getConfig(): FeedbackConfig | null {
+    return config;
+  }
+
+  /**
+   * Manually attach an error with optional metadata.
+   * Use this in catch blocks to give the agent extra context.
+   */
+  static attachError(error: Error, metadata?: Record<string, unknown>): void {
+    if (!enabled) return; // No-op when disabled
+    const captured: CapturedError = {
+      message: error.message,
+      stack: (error.stack ?? '').split('\n').filter((l: string) => l.trim()),
+      isFatal: false,
+      timestamp: Date.now(),
+      metadata,
+    };
+    errorBuffer.push(captured);
+    if (errorBuffer.length > maxErrors) {
+      errorBuffer.shift();
+    }
+  }
+
+  /**
+   * Returns the current captured errors buffer.
+   * Called internally when building a FeedbackBundle.
+   */
+  static getCapturedErrors(): CapturedError[] {
+    return [...errorBuffer];
+  }
+
+  /** Clears the captured errors buffer. */
+  static clearCapturedErrors(): void {
+    errorBuffer = [];
+  }
+
+  /**
+   * Returns a pass-through error handler that records the error in Yaver's
+   * buffer and then calls `next`. Use this to insert Yaver into your
+   * existing error handler chain without replacing anything.
+   *
+   * @example
+   * // Works alongside Sentry, Crashlytics, or any other tool:
+   * const originalHandler = ErrorUtils.getGlobalHandler();
+   * ErrorUtils.setGlobalHandler(
+   *   YaverFeedback.wrapErrorHandler(originalHandler)
+   * );
+   * // Sentry can still be initialized after this — it will wrap our
+   * // wrapper, and the chain stays intact.
+   */
+  static wrapErrorHandler(
+    next?: ((error: Error, isFatal?: boolean) => void) | null,
+  ): (error: Error, isFatal?: boolean) => void {
+    return (error: Error, isFatal?: boolean) => {
+      YaverFeedback.attachError(error);
+      if (errorBuffer.length > 0) {
+        errorBuffer[errorBuffer.length - 1].isFatal = isFatal ?? false;
+      }
+      next?.(error, isFatal);
+    };
+  }
+
+  /**
+   * Returns the P2P client instance.
+   * Available after init if agentUrl is set, or after first successful discovery.
+   */
+  static getP2PClient(): P2PClient | null {
+    return p2pClient;
+  }
+
+  /** Returns the current feedback mode. */
+  static getFeedbackMode(): 'live' | 'narrated' | 'batch' {
+    return config?.feedbackMode ?? 'batch';
+  }
+
+  /** Returns the agent commentary level (0-10). */
+  static getCommentaryLevel(): number {
+    return config?.agentCommentaryLevel ?? 0;
+  }
+
+  /**
+   * Reporting-only mode: auto-capture screenshot + errors and send
+   * to the agent's /feedback endpoint. No modal UI — just shake and go.
+   *
+   * This is triggered by shake when `reportingOnly: true` is set.
+   * The agent receives the report via the same P2P channel and logs it.
+   */
+  static async sendAutoReport(): Promise<void> {
+    if (!config || !enabled) return;
+
+    // Resolve agent URL if needed
+    if (!config.agentUrl) {
+      try {
+        const result = await YaverDiscovery.discover({
+          convexUrl: config.convexUrl,
+          authToken: config.authToken,
+          preferredDeviceId: config.preferredDeviceId,
+        });
+        if (result) {
+          config.agentUrl = result.url;
+          p2pClient = new P2PClient(result.url, config.authToken);
+        }
+      } catch {}
+    }
+
+    if (!config.agentUrl) {
+      console.warn('[YaverFeedback] No agent URL — cannot send auto report.');
+      return;
+    }
+
+    try {
+      const { Platform, Dimensions } = require('react-native');
+      const { captureScreenshot } = require('./capture');
+      const { uploadFeedback } = require('./upload');
+      const { width, height } = Dimensions.get('window');
+
+      // Auto-capture screenshot
+      let screenshotPath: string | undefined;
+      try {
+        screenshotPath = await captureScreenshot();
+      } catch {
+        // Screenshot capture may fail (e.g. no view ref) — continue without it
+      }
+
+      const bundle = {
+        metadata: {
+          timestamp: new Date().toISOString(),
+          device: {
+            platform: Platform.OS,
+            osVersion: String(Platform.Version),
+            model: Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
+            screenWidth: width,
+            screenHeight: height,
+          },
+          app: {},
+          userNote: '[Auto-report via shake]',
+        },
+        screenshots: screenshotPath ? [screenshotPath] : [],
+        errors: errorBuffer.length > 0 ? [...errorBuffer] : undefined,
+      };
+
+      await uploadFeedback(config.agentUrl, config.authToken, bundle);
+      console.log('[YaverFeedback] Auto-report sent');
+    } catch (err) {
+      console.warn('[YaverFeedback] Auto-report failed:', err);
+    }
+  }
+
+  /** Tear down the SDK (stop shake detector, clear state). */
+  static destroy(): void {
+    if (shakeDetector) {
+      shakeDetector.stop();
+      shakeDetector = null;
+    }
+    enabled = false;
+    config = null;
+    p2pClient = null;
+    errorBuffer = [];
+  }
+}