yaver-feedback-react-native 0.2.0

package/src/__tests__/YaverFeedback.test.ts

@@ -0,0 +1,189 @@
+import { YaverFeedback } from '../YaverFeedback';
+
+// Mock react-native DeviceEventEmitter
+jest.mock('react-native', () => ({
+  DeviceEventEmitter: {
+    emit: jest.fn(),
+  },
+}));
+
+// Mock Discovery
+jest.mock('../Discovery', () => ({
+  YaverDiscovery: {
+    discover: jest.fn(),
+  },
+}));
+
+// Reset module-level state between tests by re-requiring
+beforeEach(() => {
+  // YaverFeedback uses module-level variables (config, enabled, p2pClient).
+  // We reset them by calling init with a known state or relying on isInitialized checks.
+  // For a clean slate, we re-init with enabled=false then verify.
+  jest.clearAllMocks();
+});
+
+describe('YaverFeedback', () => {
+  describe('init()', () => {
+    it('sets config correctly with defaults', () => {
+      YaverFeedback.init({
+        authToken: 'test-token',
+        agentUrl: 'http://localhost:18080',
+      });
+
+      const cfg = YaverFeedback.getConfig();
+      expect(cfg).not.toBeNull();
+      expect(cfg!.authToken).toBe('test-token');
+      expect(cfg!.agentUrl).toBe('http://localhost:18080');
+      expect(cfg!.trigger).toBe('shake');
+      expect(cfg!.maxRecordingDuration).toBe(120);
+      expect(cfg!.feedbackMode).toBe('batch');
+      expect(cfg!.agentCommentaryLevel).toBe(0);
+    });
+
+    it('respects user-provided values over defaults', () => {
+      YaverFeedback.init({
+        authToken: 'tok',
+        trigger: 'floating-button',
+        maxRecordingDuration: 60,
+        feedbackMode: 'live',
+        agentCommentaryLevel: 7,
+      });
+
+      const cfg = YaverFeedback.getConfig();
+      expect(cfg!.trigger).toBe('floating-button');
+      expect(cfg!.maxRecordingDuration).toBe(60);
+      expect(cfg!.feedbackMode).toBe('live');
+      expect(cfg!.agentCommentaryLevel).toBe(7);
+    });
+
+    it('with enabled=false sets enabled to false', () => {
+      YaverFeedback.init({
+        authToken: 'tok',
+        enabled: false,
+      });
+
+      expect(YaverFeedback.isInitialized()).toBe(true);
+      expect(YaverFeedback.isEnabled()).toBe(false);
+    });
+
+    it('with enabled=true sets enabled to true', () => {
+      YaverFeedback.init({
+        authToken: 'tok',
+        enabled: true,
+      });
+
+      expect(YaverFeedback.isEnabled()).toBe(true);
+    });
+
+    it('creates P2PClient when agentUrl is provided', () => {
+      YaverFeedback.init({
+        authToken: 'tok',
+        agentUrl: 'http://192.168.1.10:18080',
+      });
+
+      expect(YaverFeedback.getP2PClient()).not.toBeNull();
+    });
+
+    it('does not create P2PClient when agentUrl is omitted', () => {
+      YaverFeedback.init({
+        authToken: 'tok',
+      });
+
+      expect(YaverFeedback.getP2PClient()).toBeNull();
+    });
+  });
+
+  describe('isInitialized()', () => {
+    it('returns true after init()', () => {
+      YaverFeedback.init({ authToken: 'tok' });
+      expect(YaverFeedback.isInitialized()).toBe(true);
+    });
+  });
+
+  describe('setEnabled()', () => {
+    it('toggles enabled state', () => {
+      YaverFeedback.init({ authToken: 'tok', enabled: true });
+      expect(YaverFeedback.isEnabled()).toBe(true);
+
+      YaverFeedback.setEnabled(false);
+      expect(YaverFeedback.isEnabled()).toBe(false);
+
+      YaverFeedback.setEnabled(true);
+      expect(YaverFeedback.isEnabled()).toBe(true);
+    });
+  });
+
+  describe('getConfig()', () => {
+    it('returns the config after init', () => {
+      YaverFeedback.init({
+        authToken: 'my-token',
+        agentUrl: 'http://10.0.0.1:18080',
+      });
+
+      const cfg = YaverFeedback.getConfig();
+      expect(cfg).toBeDefined();
+      expect(cfg!.authToken).toBe('my-token');
+      expect(cfg!.agentUrl).toBe('http://10.0.0.1:18080');
+    });
+  });
+
+  describe('getFeedbackMode()', () => {
+    it('defaults to batch when no config', () => {
+      // After any init, feedbackMode defaults to 'batch'
+      YaverFeedback.init({ authToken: 'tok' });
+      expect(YaverFeedback.getFeedbackMode()).toBe('batch');
+    });
+
+    it('returns configured mode', () => {
+      YaverFeedback.init({ authToken: 'tok', feedbackMode: 'narrated' });
+      expect(YaverFeedback.getFeedbackMode()).toBe('narrated');
+    });
+
+    it('returns live when configured', () => {
+      YaverFeedback.init({ authToken: 'tok', feedbackMode: 'live' });
+      expect(YaverFeedback.getFeedbackMode()).toBe('live');
+    });
+  });
+
+  describe('getCommentaryLevel()', () => {
+    it('defaults to 0', () => {
+      YaverFeedback.init({ authToken: 'tok' });
+      expect(YaverFeedback.getCommentaryLevel()).toBe(0);
+    });
+
+    it('returns configured level', () => {
+      YaverFeedback.init({ authToken: 'tok', agentCommentaryLevel: 5 });
+      expect(YaverFeedback.getCommentaryLevel()).toBe(5);
+    });
+
+    it('returns max level when set to 10', () => {
+      YaverFeedback.init({ authToken: 'tok', agentCommentaryLevel: 10 });
+      expect(YaverFeedback.getCommentaryLevel()).toBe(10);
+    });
+  });
+
+  describe('startReport()', () => {
+    it('does nothing when not enabled', async () => {
+      YaverFeedback.init({ authToken: 'tok', enabled: false });
+
+      // Should not throw
+      await YaverFeedback.startReport();
+
+      const { DeviceEventEmitter } = require('react-native');
+      expect(DeviceEventEmitter.emit).not.toHaveBeenCalled();
+    });
+
+    it('emits event when enabled and agentUrl is set', async () => {
+      YaverFeedback.init({
+        authToken: 'tok',
+        enabled: true,
+        agentUrl: 'http://localhost:18080',
+      });
+
+      await YaverFeedback.startReport();
+
+      const { DeviceEventEmitter } = require('react-native');
+      expect(DeviceEventEmitter.emit).toHaveBeenCalledWith('yaverFeedback:startReport');
+    });
+  });
+});

package/src/__tests__/types.test.ts

@@ -0,0 +1,247 @@
+import type {
+  FeedbackConfig,
+  FeedbackBundle,
+  FeedbackMetadata,
+  TimelineEvent,
+  DeviceInfo,
+  AppInfo,
+  FeedbackReport,
+  AgentCommentary,
+  FeedbackStreamEvent,
+} from '../types';
+
+describe('React Native SDK types', () => {
+  describe('FeedbackConfig', () => {
+    it('can be constructed with only required fields', () => {
+      const config: FeedbackConfig = {
+        authToken: 'test-token',
+      };
+      expect(config.authToken).toBe('test-token');
+      expect(config.agentUrl).toBeUndefined();
+      expect(config.trigger).toBeUndefined();
+      expect(config.enabled).toBeUndefined();
+      expect(config.maxRecordingDuration).toBeUndefined();
+      expect(config.feedbackMode).toBeUndefined();
+      expect(config.agentCommentaryLevel).toBeUndefined();
+    });
+
+    it('can be constructed with all optional fields', () => {
+      const config: FeedbackConfig = {
+        authToken: 'tok',
+        agentUrl: 'http://192.168.1.10:18080',
+        trigger: 'shake',
+        enabled: true,
+        maxRecordingDuration: 60,
+        feedbackMode: 'live',
+        agentCommentaryLevel: 7,
+      };
+      expect(config.trigger).toBe('shake');
+      expect(config.feedbackMode).toBe('live');
+      expect(config.agentCommentaryLevel).toBe(7);
+    });
+
+    it('accepts all trigger types', () => {
+      const triggers: FeedbackConfig['trigger'][] = ['shake', 'floating-button', 'manual'];
+      triggers.forEach((trigger) => {
+        const config: FeedbackConfig = { authToken: 'tok', trigger };
+        expect(config.trigger).toBe(trigger);
+      });
+    });
+
+    it('accepts all feedback modes', () => {
+      const modes: FeedbackConfig['feedbackMode'][] = ['live', 'narrated', 'batch'];
+      modes.forEach((mode) => {
+        const config: FeedbackConfig = { authToken: 'tok', feedbackMode: mode };
+        expect(config.feedbackMode).toBe(mode);
+      });
+    });
+  });
+
+  describe('FeedbackBundle', () => {
+    it('can be constructed with required fields', () => {
+      const bundle: FeedbackBundle = {
+        metadata: {
+          timestamp: '2026-03-24T12:00:00Z',
+          device: {
+            platform: 'ios',
+            osVersion: '18.0',
+            model: 'iPhone 16 Pro',
+            screenWidth: 393,
+            screenHeight: 852,
+          },
+          app: {
+            bundleId: 'com.example.app',
+            version: '1.0.0',
+            buildNumber: '42',
+          },
+        },
+        screenshots: [],
+      };
+
+      expect(bundle.metadata.timestamp).toBe('2026-03-24T12:00:00Z');
+      expect(bundle.metadata.device.platform).toBe('ios');
+      expect(bundle.screenshots).toEqual([]);
+      expect(bundle.video).toBeUndefined();
+      expect(bundle.audio).toBeUndefined();
+    });
+
+    it('can include optional video, audio, and screenshots', () => {
+      const bundle: FeedbackBundle = {
+        metadata: {
+          timestamp: '2026-03-24T12:00:00Z',
+          device: {
+            platform: 'android',
+            osVersion: '15',
+            model: 'Pixel 9',
+            screenWidth: 412,
+            screenHeight: 915,
+          },
+          app: {},
+          userNote: 'This button does not work',
+        },
+        video: '/tmp/recording.mp4',
+        audio: '/tmp/voice.m4a',
+        screenshots: ['/tmp/ss1.png', '/tmp/ss2.png'],
+      };
+
+      expect(bundle.video).toBe('/tmp/recording.mp4');
+      expect(bundle.audio).toBe('/tmp/voice.m4a');
+      expect(bundle.screenshots).toHaveLength(2);
+      expect(bundle.metadata.userNote).toBe('This button does not work');
+    });
+  });
+
+  describe('TimelineEvent', () => {
+    it('has correct structure for screenshot event', () => {
+      const event: TimelineEvent = {
+        type: 'screenshot',
+        path: '/tmp/screenshot.png',
+        timestamp: '2026-03-24T12:00:05Z',
+      };
+      expect(event.type).toBe('screenshot');
+      expect(event.path).toBe('/tmp/screenshot.png');
+      expect(event.duration).toBeUndefined();
+    });
+
+    it('supports optional duration for audio/video events', () => {
+      const event: TimelineEvent = {
+        type: 'audio',
+        path: '/tmp/voice.m4a',
+        timestamp: '2026-03-24T12:00:10Z',
+        duration: 15.5,
+      };
+      expect(event.duration).toBe(15.5);
+    });
+
+    it('accepts all event types', () => {
+      const types: TimelineEvent['type'][] = ['screenshot', 'audio', 'video'];
+      types.forEach((type) => {
+        const event: TimelineEvent = { type, path: '/tmp/file', timestamp: 'now' };
+        expect(event.type).toBe(type);
+      });
+    });
+  });
+
+  describe('DeviceInfo', () => {
+    it('has all required fields', () => {
+      const device: DeviceInfo = {
+        platform: 'ios',
+        osVersion: '18.0',
+        model: 'iPhone 16 Pro Max',
+        screenWidth: 430,
+        screenHeight: 932,
+      };
+      expect(device.platform).toBe('ios');
+      expect(device.screenWidth).toBe(430);
+      expect(device.screenHeight).toBe(932);
+    });
+  });
+
+  describe('AppInfo', () => {
+    it('can be empty (all fields optional)', () => {
+      const app: AppInfo = {};
+      expect(app.bundleId).toBeUndefined();
+      expect(app.version).toBeUndefined();
+      expect(app.buildNumber).toBeUndefined();
+    });
+
+    it('can have all fields populated', () => {
+      const app: AppInfo = {
+        bundleId: 'com.yaver.test',
+        version: '2.0.0',
+        buildNumber: '100',
+      };
+      expect(app.bundleId).toBe('com.yaver.test');
+    });
+  });
+
+  describe('FeedbackReport', () => {
+    it('has correct structure', () => {
+      const report: FeedbackReport = {
+        id: 'report-123',
+        bundle: {
+          metadata: {
+            timestamp: 'now',
+            device: { platform: 'ios', osVersion: '18', model: 'iPhone', screenWidth: 393, screenHeight: 852 },
+            app: {},
+          },
+          screenshots: [],
+        },
+        status: 'pending',
+      };
+      expect(report.status).toBe('pending');
+      expect(report.error).toBeUndefined();
+    });
+
+    it('accepts all status values', () => {
+      const statuses: FeedbackReport['status'][] = ['pending', 'uploading', 'uploaded', 'failed'];
+      statuses.forEach((status) => {
+        const report: FeedbackReport = {
+          id: '1',
+          bundle: {
+            metadata: {
+              timestamp: 'now',
+              device: { platform: 'ios', osVersion: '18', model: 'iPhone', screenWidth: 393, screenHeight: 852 },
+              app: {},
+            },
+            screenshots: [],
+          },
+          status,
+        };
+        expect(report.status).toBe(status);
+      });
+    });
+  });
+
+  describe('AgentCommentary', () => {
+    it('has correct structure', () => {
+      const commentary: AgentCommentary = {
+        id: 'cmt-1',
+        timestamp: '2026-03-24T12:00:00Z',
+        message: 'I see a layout issue on the login screen',
+        type: 'observation',
+      };
+      expect(commentary.type).toBe('observation');
+    });
+
+    it('accepts all commentary types', () => {
+      const types: AgentCommentary['type'][] = ['observation', 'suggestion', 'question', 'action'];
+      types.forEach((type) => {
+        const c: AgentCommentary = { id: '1', timestamp: 'now', message: 'test', type };
+        expect(c.type).toBe(type);
+      });
+    });
+  });
+
+  describe('FeedbackStreamEvent', () => {
+    it('has correct structure', () => {
+      const event: FeedbackStreamEvent = {
+        type: 'tap',
+        timestamp: '2026-03-24T12:00:00Z',
+        data: { x: 100, y: 200 },
+      };
+      expect(event.type).toBe('tap');
+      expect(event.data.x).toBe(100);
+    });
+  });
+});

package/src/capture.ts

@@ -0,0 +1,84 @@
+/**
+ * Screen capture and audio recording helpers.
+ *
+ * Screenshot capture requires `react-native-view-shot` as a peer dependency.
+ * Audio recording requires `react-native-audio-recorder-player` or a
+ * similar library — the implementation below uses a minimal approach
+ * that works when one of those is available.
+ */
+
+let audioRecorderModule: any = null;
+
+/**
+ * Capture the current screen as a PNG image.
+ * Requires `react-native-view-shot` to be installed.
+ * @returns File path of the captured screenshot.
+ */
+export async function captureScreenshot(): Promise<string> {
+  try {
+    const ViewShot = require('react-native-view-shot');
+    const uri = await ViewShot.captureScreen({
+      format: 'png',
+      quality: 0.9,
+    });
+    return uri;
+  } catch (err) {
+    throw new Error(
+      '[YaverFeedback] Screenshot capture failed. Make sure react-native-view-shot is installed. ' +
+        String(err),
+    );
+  }
+}
+
+/**
+ * Start recording an audio voice note.
+ * Requires `react-native-audio-recorder-player` to be installed.
+ */
+export async function startAudioRecording(): Promise<void> {
+  try {
+    const AudioRecorderPlayer =
+      require('react-native-audio-recorder-player').default;
+    audioRecorderModule = new AudioRecorderPlayer();
+    await audioRecorderModule.startRecorder();
+  } catch (err) {
+    audioRecorderModule = null;
+    throw new Error(
+      '[YaverFeedback] Audio recording failed to start. Make sure react-native-audio-recorder-player is installed. ' +
+        String(err),
+    );
+  }
+}
+
+/**
+ * Stop the current audio recording.
+ * @returns Object with the file path and duration in seconds.
+ */
+export async function stopAudioRecording(): Promise<{
+  path: string;
+  duration: number;
+}> {
+  if (!audioRecorderModule) {
+    throw new Error('[YaverFeedback] No audio recording in progress.');
+  }
+
+  try {
+    const result = await audioRecorderModule.stopRecorder();
+    const recorder = audioRecorderModule;
+    audioRecorderModule = null;
+
+    // result is the file path on most implementations
+    const path = typeof result === 'string' ? result : result?.uri ?? '';
+    // Duration tracking — recorder-player provides currentPosition in ms
+    const durationMs =
+      typeof recorder.currentPosition === 'number'
+        ? recorder.currentPosition
+        : 0;
+
+    return { path, duration: durationMs / 1000 };
+  } catch (err) {
+    audioRecorderModule = null;
+    throw new Error(
+      '[YaverFeedback] Failed to stop audio recording. ' + String(err),
+    );
+  }
+}

package/src/expo.ts

@@ -0,0 +1,62 @@
+/**
+ * Expo-specific auto-initialization for the Yaver Feedback SDK.
+ *
+ * Reads agent URL from Expo Constants manifest extra if available,
+ * otherwise falls back to LAN auto-discovery.
+ *
+ * @example
+ * ```tsx
+ * import { initExpo, FeedbackModal } from '@yaver/feedback-react-native';
+ *
+ * initExpo(); // auto-discovers your dev machine
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <YourApp />
+ *       <FeedbackModal />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+import { YaverFeedback } from './YaverFeedback';
+import type { FeedbackConfig } from './types';
+
+/**
+ * Initialize the Yaver Feedback SDK for Expo projects.
+ *
+ * Attempts to read the agent URL from Expo Constants (`expo.extra.yaverAgentUrl`
+ * in app.json). If not set, the SDK auto-discovers agents on the local network.
+ *
+ * Defaults:
+ * - trigger: 'shake'
+ * - feedbackMode: 'batch'
+ * - enabled: __DEV__ (only active in development)
+ *
+ * @param overrides - Optional partial config to override defaults
+ */
+export function initExpo(overrides?: Partial<FeedbackConfig>): void {
+  let agentUrl: string | undefined;
+
+  // Try reading agent URL from Expo Constants manifest extra
+  try {
+    // Dynamic require so this doesn't hard-fail if expo-constants isn't installed
+    const Constants = require('expo-constants').default;
+    agentUrl =
+      Constants.expoConfig?.extra?.yaverAgentUrl ??
+      Constants.manifest?.extra?.yaverAgentUrl ??
+      Constants.manifest2?.extra?.expoClient?.extra?.yaverAgentUrl;
+  } catch {
+    // expo-constants not available — auto-discovery will be used
+  }
+
+  YaverFeedback.init({
+    authToken: '', // LAN auto-discovery doesn't require a token
+    trigger: 'shake',
+    feedbackMode: 'batch',
+    enabled: __DEV__,
+    ...overrides,
+    ...(agentUrl ? { agentUrl } : {}),
+  });
+}

package/src/index.ts

@@ -0,0 +1,54 @@
+/**
+ * @yaver/feedback-react-native — Visual feedback SDK for Yaver.
+ *
+ * Shake-to-report, screenshots, voice annotations, P2P connection,
+ * device discovery, and live/narrated/batch feedback modes for vibe coding.
+ *
+ * @example
+ * ```tsx
+ * import { YaverFeedback, FeedbackProvider } from '@yaver/feedback-react-native';
+ *
+ * YaverFeedback.init({
+ *   agentUrl: 'http://192.168.1.10:18080',
+ *   authToken: 'your-token',
+ *   trigger: 'shake',
+ *   feedbackMode: 'live',
+ * });
+ *
+ * // Wrap your app root:
+ * <FeedbackProvider>
+ *   <App />
+ * </FeedbackProvider>
+ * ```
+ */
+
+export { YaverFeedback } from './YaverFeedback';
+export { BlackBox } from './BlackBox';
+export { initExpo } from './expo';
+export { YaverDiscovery } from './Discovery';
+export { P2PClient } from './P2PClient';
+export { YaverConnectionScreen } from './ConnectionScreen';
+export { ShakeDetector } from './ShakeDetector';
+export { FloatingButton } from './FloatingButton';
+export { FeedbackModal } from './FeedbackModal';
+export { FixReport } from './FixReport';
+export { captureScreenshot, startAudioRecording, stopAudioRecording } from './capture';
+export { uploadFeedback } from './upload';
+export type {
+  FeedbackConfig,
+  FeedbackBundle,
+  FeedbackMetadata,
+  DeviceInfo,
+  AppInfo,
+  TimelineEvent,
+  FeedbackReport,
+  AgentCommentary,
+  FeedbackStreamEvent,
+  VoiceCapability,
+  CapturedError,
+  TestFix,
+  TestSession,
+} from './types';
+export type { BlackBoxEvent, BlackBoxConfig } from './BlackBox';
+export type { DiscoveryResult } from './Discovery';
+export type { FeedbackEvent } from './P2PClient';