yaver-feedback-react-native 0.6.1 → 0.7.0

package/src/P2PClient.ts

@@ -79,14 +79,6 @@ export class P2PClient {
       } 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,
@@ -223,20 +215,82 @@ export class P2PClient {
    * @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`, {
+    // Primary path: /dev/reload — same endpoint the Yaver mobile app uses.
+    // Triggers Metro/Expo HMR synchronously and emits an SSE `reload` event
+    // on /dev/events that the FeedbackModal can subscribe to for progress.
+    //
+    // Only fall back to /dev/reload-app (the BlackBox-SSE-broadcast path)
+    // when the primary path reports "no dev server running" — that mode is
+    // really for the mobile app remotely kicking a third-party app, not
+    // for the app kicking itself.
+    const primary = await fetch(`${this.baseUrl}/dev/reload`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${this.authToken}` },
+    });
+    if (primary.ok) {
+      return primary.json().catch(() => ({ ok: true }));
+    }
+    if (primary.status >= 500 || primary.status === 404 || mode === 'bundle') {
+      const fallback = await fetch(`${this.baseUrl}/dev/reload-app`, {
+        method: 'POST',
+        headers: {
+          Authorization: `Bearer ${this.authToken}`,
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ mode }),
+      });
+      if (!fallback.ok) {
+        const text = await fallback.text().catch(() => '');
+        throw new Error(`[P2PClient] Reload failed (${fallback.status}): ${text}`);
+      }
+      return fallback.json().catch(() => ({ ok: true }));
+    }
+    const text = await primary.text().catch(() => '');
+    throw new Error(`[P2PClient] Reload failed (${primary.status}): ${text}`);
+  }
+
+  /**
+   * Open a vibing session on the connected agent. Vibing is the Yaver
+   * interactive coding-agent flow — `/vibing/execute` creates a task with
+   * the project context plus the user's prompt. Returns the task id the
+   * caller can poll via `/tasks/{id}` if needed.
+   *
+   * Requires an owner/CLI/paired token — the `/vibing*` routes do not
+   * currently accept SDK-minted tokens. Power users typically drive
+   * vibing from Claude Code / the Yaver mobile app; this method is a
+   * convenience for the SDK's one-tap bug-report-to-vibing path.
+   */
+  async vibing(prompt: string, projectPath?: string): Promise<{ taskId: string }> {
+    const response = await fetch(`${this.baseUrl}/vibing/execute`, {
       method: 'POST',
       headers: {
         Authorization: `Bearer ${this.authToken}`,
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ mode }),
+      body: JSON.stringify({ prompt, projectPath: projectPath ?? '' }),
     });
-
     if (!response.ok) {
       const text = await response.text().catch(() => '');
-      throw new Error(`[P2PClient] Reload app failed (${response.status}): ${text}`);
+      throw new Error(`[P2PClient] Vibing failed (${response.status}): ${text}`);
     }
+    return response.json();
+  }
 
+  /**
+   * After uploading a feedback bundle with `uploadFeedback`, call this
+   * with the returned report id to create a fix task on the agent. The
+   * task includes the feedback's screenshots, errors, and (when available)
+   * the BlackBox context for the originating device.
+   */
+  async triggerFix(feedbackId: string): Promise<{ taskId: string; prompt: string }> {
+    const response = await fetch(`${this.baseUrl}/feedback/${encodeURIComponent(feedbackId)}/fix`, {
+      method: 'POST',
+      headers: { Authorization: `Bearer ${this.authToken}` },
+    });
+    if (!response.ok) {
+      const text = await response.text().catch(() => '');
+      throw new Error(`[P2PClient] Fix trigger failed (${response.status}): ${text}`);
+    }
     return response.json();
   }
 

package/src/YaverFeedback.ts

@@ -77,8 +77,6 @@ export class YaverFeedback {
     config = {
       trigger: 'shake',
       maxRecordingDuration: 120,
-      feedbackMode: 'batch',
-      agentCommentaryLevel: 0,
       autoLogin: true,
       ...cfg,
     };
@@ -488,16 +486,6 @@ export class YaverFeedback {
     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;
-  }
-
   // ─── One-stop SaaS replacement methods ─────────────────────────
   //
   // These are the three solo-dev SaaS-replacement entry points

package/src/__tests__/YaverFeedback.test.ts

@@ -39,8 +39,6 @@ describe('YaverFeedback', () => {
       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', () => {
@@ -48,15 +46,13 @@ describe('YaverFeedback', () => {
         authToken: 'tok',
         trigger: 'floating-button',
         maxRecordingDuration: 60,
-        feedbackMode: 'live',
-        agentCommentaryLevel: 7,
+        strictNativeAuth: true,
       });
 
       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);
+      expect(cfg!.strictNativeAuth).toBe(true);
     });
 
     it('with enabled=false sets enabled to false', () => {
@@ -130,41 +126,6 @@ describe('YaverFeedback', () => {
     });
   });
 
-  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 });

package/src/__tests__/types.test.ts

@@ -6,7 +6,6 @@ import type {
   DeviceInfo,
   AppInfo,
   FeedbackReport,
-  AgentCommentary,
   FeedbackStreamEvent,
 } from '../types';
 
@@ -21,8 +20,6 @@ describe('React Native SDK types', () => {
       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', () => {
@@ -32,12 +29,10 @@ describe('React Native SDK types', () => {
         trigger: 'shake',
         enabled: true,
         maxRecordingDuration: 60,
-        feedbackMode: 'live',
-        agentCommentaryLevel: 7,
+        strictNativeAuth: true,
       };
       expect(config.trigger).toBe('shake');
-      expect(config.feedbackMode).toBe('live');
-      expect(config.agentCommentaryLevel).toBe(7);
+      expect(config.strictNativeAuth).toBe(true);
     });
 
     it('accepts all trigger types', () => {
@@ -47,14 +42,6 @@ describe('React Native SDK types', () => {
         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', () => {
@@ -82,10 +69,9 @@ describe('React Native SDK types', () => {
       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', () => {
+    it('can include optional video + screenshots', () => {
       const bundle: FeedbackBundle = {
         metadata: {
           timestamp: '2026-03-24T12:00:00Z',
@@ -100,12 +86,10 @@ describe('React Native SDK types', () => {
           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');
     });
@@ -213,26 +197,6 @@ describe('React Native SDK types', () => {
     });
   });
 
-  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 = {

package/src/capture.ts

@@ -1,18 +1,24 @@
 /**
- * Screen capture and audio recording helpers.
+ * Screen capture helpers — screenshot + video recording.
  *
- * 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.
+ * Peer deps (all optional — loaded lazily):
+ *   - `react-native-view-shot`        — screenshot
+ *   - `react-native-record-screen`    — video recording (iOS ReplayKit /
+ *                                       Android MediaProjection)
+ *
+ * Each helper surfaces a clear error if the module is missing so a host
+ * app knows exactly which peer dep to add. Audio-note / voice-command
+ * recording was removed in 0.7.0 — see FeedbackModal for the new
+ * 5-button surface.
  */
 
-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.
+ *
+ * Note: the feedback modal should hide itself *before* calling this so the
+ * screenshot contains the underlying app state (the actual bug), not the
+ * modal. See `FeedbackModal.handleScreenshotForFix`.
  */
 export async function captureScreenshot(): Promise<string> {
   try {
@@ -24,61 +30,91 @@ export async function captureScreenshot(): Promise<string> {
     return uri;
   } catch (err) {
     throw new Error(
-      '[YaverFeedback] Screenshot capture failed. Make sure react-native-view-shot is installed. ' +
+      '[YaverFeedback] Screenshot capture failed. Install react-native-view-shot as a peer dep. ' +
         String(err),
     );
   }
 }
 
+let videoRecorderModule: any = null;
+let videoRecordingActive = false;
+
 /**
- * Start recording an audio voice note.
- * Requires `react-native-audio-recorder-player` to be installed.
+ * Start a screen-recording session. Requires
+ * `react-native-record-screen` as a peer dep.
+ *
+ * The user must grant the iOS ReplayKit / Android MediaProjection
+ * permission the first time; the prompt is shown by the native module,
+ * not the SDK.
  */
-export async function startAudioRecording(): Promise<void> {
+export async function startVideoRecording(): Promise<void> {
+  if (videoRecordingActive) {
+    throw new Error('[YaverFeedback] A video recording is already in progress.');
+  }
   try {
-    const AudioRecorderPlayer =
-      require('react-native-audio-recorder-player').default;
-    audioRecorderModule = new AudioRecorderPlayer();
-    await audioRecorderModule.startRecorder();
+    videoRecorderModule = require('react-native-record-screen').default ??
+      require('react-native-record-screen');
+    if (typeof videoRecorderModule.startRecording !== 'function') {
+      throw new Error('react-native-record-screen missing startRecording()');
+    }
+    const result = await videoRecorderModule.startRecording({
+      mic: false,
+      width: 720,
+      bitrate: 1024 * 1000,
+    });
+    if (result && result.status && result.status !== 'success') {
+      throw new Error(`startRecording returned ${result.status}`);
+    }
+    videoRecordingActive = true;
   } catch (err) {
-    audioRecorderModule = null;
+    videoRecorderModule = null;
+    videoRecordingActive = false;
     throw new Error(
-      '[YaverFeedback] Audio recording failed to start. Make sure react-native-audio-recorder-player is installed. ' +
+      '[YaverFeedback] Could not start screen recording. Install react-native-record-screen. ' +
         String(err),
     );
   }
 }
 
 /**
- * Stop the current audio recording.
- * @returns Object with the file path and duration in seconds.
+ * Stop the current video recording and return the on-device file path.
  */
-export async function stopAudioRecording(): Promise<{
+export async function stopVideoRecording(): Promise<{
   path: string;
   duration: number;
 }> {
-  if (!audioRecorderModule) {
-    throw new Error('[YaverFeedback] No audio recording in progress.');
+  if (!videoRecordingActive || !videoRecorderModule) {
+    throw new Error('[YaverFeedback] No video 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 res = await videoRecorderModule.stopRecording();
+    videoRecordingActive = false;
+    const path =
+      typeof res === 'string'
+        ? res
+        : (res?.result?.outputURL as string) ??
+          (res?.outputURL as string) ??
+          (res?.uri as string) ??
+          '';
     const durationMs =
-      typeof recorder.currentPosition === 'number'
-        ? recorder.currentPosition
-        : 0;
-
+      typeof res?.result?.duration === 'number'
+        ? res.result.duration
+        : typeof res?.duration === 'number'
+          ? res.duration
+          : 0;
+    if (!path) {
+      throw new Error('stopRecording() returned no file path');
+    }
     return { path, duration: durationMs / 1000 };
   } catch (err) {
-    audioRecorderModule = null;
+    videoRecordingActive = false;
     throw new Error(
-      '[YaverFeedback] Failed to stop audio recording. ' + String(err),
+      '[YaverFeedback] Failed to stop screen recording. ' + String(err),
     );
   }
 }
+
+/** Whether a video recording is currently active. */
+export function isVideoRecording(): boolean {
+  return videoRecordingActive;
+}

package/src/expo.ts

@@ -31,7 +31,6 @@ import type { FeedbackConfig } from './types';
  *
  * Defaults:
  * - trigger: 'shake'
- * - feedbackMode: 'batch'
  * - enabled: __DEV__ (only active in development)
  *
  * @param overrides - Optional partial config to override defaults
@@ -54,7 +53,6 @@ export function initExpo(overrides?: Partial<FeedbackConfig>): void {
   YaverFeedback.init({
     authToken: '', // LAN auto-discovery doesn't require a token
     trigger: 'shake',
-    feedbackMode: 'batch',
     enabled: __DEV__,
     ...overrides,
     ...(agentUrl ? { agentUrl } : {}),

package/src/index.ts

@@ -1,24 +1,29 @@
 /**
- * @yaver/feedback-react-native — Visual feedback SDK for Yaver.
+ * 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.
+ * Shake-to-report surface with five one-tap actions:
+ *  1. Hot Reload              — instant JS reload
+ *  2. Screenshot & Fix        — capture the screen under the modal and
+ *                               kick a fix task on the agent
+ *  3. Vibing                  — open a vibing session on the agent
+ *  4. Start / Stop Recording  — screen recording toggle
+ *  5. Send Video              — submit the last recording
  *
  * @example
  * ```tsx
- * import { YaverFeedback, FeedbackProvider } from '@yaver/feedback-react-native';
+ * import { YaverFeedback, FeedbackModal } from 'yaver-feedback-react-native';
  *
  * YaverFeedback.init({
  *   agentUrl: 'http://192.168.1.10:18080',
  *   authToken: 'your-token',
  *   trigger: 'shake',
- *   feedbackMode: 'live',
+ *   strictNativeAuth: true,
  * });
  *
- * // Wrap your app root:
- * <FeedbackProvider>
+ * <>
  *   <App />
- * </FeedbackProvider>
+ *   <FeedbackModal />
+ * </>
  * ```
  */
 
@@ -67,7 +72,12 @@ export type {
   RemoteDevice,
   DeviceList,
 } from './auth';
-export { captureScreenshot, startAudioRecording, stopAudioRecording } from './capture';
+export {
+  captureScreenshot,
+  startVideoRecording,
+  stopVideoRecording,
+  isVideoRecording,
+} from './capture';
 export { uploadFeedback } from './upload';
 export type {
   FeedbackConfig,
@@ -77,7 +87,6 @@ export type {
   AppInfo,
   TimelineEvent,
   FeedbackReport,
-  AgentCommentary,
   FeedbackStreamEvent,
   VoiceCapability,
   CapturedError,

package/src/types.ts

@@ -65,27 +65,6 @@ export interface FeedbackConfig {
   reportingOnly?: boolean;
   /** Max screen recording duration in seconds. Default: 120 */
   maxRecordingDuration?: number;
-  /**
-   * Feedback mode:
-   * - 'live': stream events to the agent as they happen
-   * - 'narrated': record everything, send on stop
-   * - 'batch': dump everything at end (default)
-   */
-  feedbackMode?: 'live' | 'narrated' | 'batch';
-  /**
-   * Agent commentary level (0-10).
-   * 0 = silent, 10 = agent comments on everything it sees.
-   * Only relevant in live mode. Default: 0.
-   */
-  agentCommentaryLevel?: number;
-  /**
-   * Enable voice input for feedback annotations. Always true by default.
-   * Audio is recorded on the device and sent to the agent for transcription.
-   * Works regardless of whether a speech-to-speech provider is configured —
-   * if STT is available on the agent, audio is auto-transcribed; otherwise
-   * raw audio is attached to the feedback report.
-   */
-  voiceEnabled?: boolean;
   /**
    * Maximum number of captured errors to keep in memory (ring buffer).
    * Oldest errors are evicted when the buffer is full.
@@ -180,13 +159,10 @@ export interface FeedbackConfig {
 
 export interface FeedbackBundle {
   metadata: FeedbackMetadata;
+  /** Screen-recording file path, when produced by the "Start Recording" action. */
   video?: string;
-  /** Voice annotation audio file path (WAV). Always available when voiceEnabled. */
-  audio?: string;
-  /** Transcribed text from voice annotation (if STT/S2S provider is available on agent). */
-  audioTranscript?: string;
   screenshots: string[];
-  /** Captured errors with stack traces, attached automatically when captureErrors is enabled. */
+  /** Captured errors with stack traces, attached via attachError / wrapErrorHandler. */
   errors?: CapturedError[];
 }
 
@@ -239,13 +215,6 @@ export interface FeedbackReport {
   error?: string;
 }
 
-export interface AgentCommentary {
-  id: string;
-  timestamp: string;
-  message: string;
-  type: 'observation' | 'suggestion' | 'question' | 'action';
-}
-
 export interface FeedbackStreamEvent {
   type: string;
   timestamp: string;

package/src/upload.ts

@@ -7,16 +7,17 @@ import { FeedbackBundle } from './types';
  * The agent receives the bundle at POST /feedback with:
  * - `metadata` (JSON string)
  * - `screenshot_0`, `screenshot_1`, ... (image files)
- * - `audio` (audio file, if present)
  * - `video` (video file, if present)
  *
- * @returns The feedback report ID from the agent response.
+ * Returns the parsed agent response — typically `{ ok, id, reportId }`.
+ * Callers can inspect `.id` / `.reportId` to drive a follow-up
+ * `/feedback/{id}/fix` kick.
  */
 export async function uploadFeedback(
   agentUrl: string,
   authToken: string,
   bundle: FeedbackBundle,
-): Promise<string> {
+): Promise<{ id?: string; reportId?: string; [k: string]: unknown }> {
   const formData = new FormData();
 
   // Attach metadata as JSON
@@ -32,16 +33,6 @@ export async function uploadFeedback(
     } as any);
   }
 
-  // Attach audio
-  if (bundle.audio) {
-    formData.append('audio', {
-      uri:
-        Platform.OS === 'android' ? `file://${bundle.audio}` : bundle.audio,
-      type: 'audio/m4a',
-      name: 'voice_note.m4a',
-    } as any);
-  }
-
   // Attach video
   if (bundle.video) {
     formData.append('video', {
@@ -69,6 +60,6 @@ export async function uploadFeedback(
     );
   }
 
-  const result = await response.json();
-  return result.id ?? result.reportId ?? 'unknown';
+  const result = await response.json().catch(() => ({}));
+  return result as { id?: string; reportId?: string; [k: string]: unknown };
 }