yaver-feedback-react-native 0.6.1 → 0.7.1

package/src/MachinePickerScreen.tsx

@@ -72,7 +72,12 @@ export const YaverMachinePickerScreen: React.FC<YaverMachinePickerProps> = ({
 
   const renderDevice = (device: RemoteDevice) => {
     const selected = device.deviceId === currentDeviceId;
-    const stale = Date.now() - device.lastHeartbeat > 60_000;
+    // Match the Yaver mobile app: HEARTBEAT_STALE_MS is 90 s. Using
+    // 60 s here flashed yellow on a single missed agent beat even
+    // though the Mac was up.
+    const stale =
+      device.lastHeartbeat > 0 &&
+      Date.now() - device.lastHeartbeat > 90_000;
     const healthColor = !device.isOnline
       ? '#ef4444'
       : device.needsAuth || device.runnerDown || stale

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,
     };
@@ -203,6 +201,33 @@ export class YaverFeedback {
     }
   }
 
+  /**
+   * Force a fresh Convex lookup for the agent URL — ignoring any
+   * cached URL. Callers use this after a P2P request fails
+   * (connection refused / timeout) because the most common cause is
+   * the Mac's LAN IP rotating. Convex has the fresh one, so we
+   * re-query and probe `[quicHost, ...localIps]` in parallel.
+   *
+   * Returns true when a new URL was adopted.
+   */
+  static async reconnect(): Promise<boolean> {
+    if (!config || !enabled) return false;
+    if (!config.authToken || !config.convexUrl) return false;
+    try {
+      const result = await YaverDiscovery.refreshFromConvex({
+        convexUrl: config.convexUrl,
+        authToken: config.authToken,
+        preferredDeviceId: config.preferredDeviceId,
+      });
+      if (!result) return false;
+      config.agentUrl = result.url;
+      p2pClient = new P2PClient(result.url, config.authToken ?? '');
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
   /**
    * Pull a cached session token + selected device from AsyncStorage (populated
    * by the in-SDK login + machine-picker screens). When present the SDK can
@@ -488,16 +513,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/auth.ts

@@ -409,7 +409,17 @@ export interface RemoteDevice {
   accessScope: 'owner' | 'shared-scoped' | 'shared-legacy';
   quicHost: string;
   quicPort: number;
+  /** Agent HTTP port — preferred over quicPort when present. */
+  httpPort?: number;
   publicKey?: string;
+  /** Hardware identifier — used for dedup across re-pair events. */
+  hwid?: string;
+  /**
+   * Every LAN IP the agent reported in its last heartbeat. Useful on
+   * multi-homed hosts — probing all of them in parallel is the same
+   * trick the Yaver mobile app uses to "just work" on the same Wi-Fi.
+   */
+  localIps?: string[];
 }
 
 export interface DeviceList {
@@ -420,6 +430,10 @@ export interface DeviceList {
 /**
  * Fetch the set of remote dev machines this user can reach. Splits into
  * owned (user is the host) vs shared (host invited them as a guest).
+ *
+ * Collapses duplicate rows before splitting — Convex can return multiple
+ * rows per physical machine after a re-pair or hostname change, and the
+ * raw list used to render as "Kvancs-MacBook-Air.local ×3" in the picker.
  */
 export async function listReachableDevices(
   token: string,
@@ -430,10 +444,39 @@ export async function listReachableDevices(
     });
     if (!res.ok) return { owned: [], shared: [] };
     const data = await res.json();
-    const all = (data.devices ?? []) as RemoteDevice[];
+    const raw = (data.devices ?? []) as any[];
+    // Normalise Convex field names → SDK's RemoteDevice shape. The
+    // backend returns `localIps`, sometimes the mobile-side mapping
+    // surfaces `lanIps` — accept either so the field survives.
+    const normalised: RemoteDevice[] = raw.map((d) => ({
+      deviceId: d.deviceId ?? d.id,
+      name: d.name ?? '',
+      platform: d.platform ?? d.os ?? '',
+      isOnline: !!d.isOnline,
+      needsAuth: !!d.needsAuth,
+      runnerDown: !!d.runnerDown,
+      lastHeartbeat: d.lastHeartbeat ?? 0,
+      isGuest: !!d.isGuest,
+      hostName: d.hostName,
+      hostEmail: d.hostEmail,
+      accessScope: d.accessScope ?? 'owner',
+      quicHost: d.quicHost ?? d.host ?? '',
+      quicPort: d.quicPort ?? 0,
+      httpPort: d.httpPort ?? d.quicPort,
+      publicKey: d.publicKey,
+      hwid: d.hardwareId ?? d.hwid,
+      localIps: Array.isArray(d.localIps)
+        ? d.localIps
+        : Array.isArray(d.lanIps)
+          ? d.lanIps
+          : undefined,
+    }));
+    // Lazy require so Jest + tree-shakers don't choke on a circular import.
+    const { collapseRemoteDevices } = require('./deviceDedup') as typeof import('./deviceDedup');
+    const deduped = collapseRemoteDevices(normalised);
     return {
-      owned: all.filter((d) => !d.isGuest),
-      shared: all.filter((d) => d.isGuest),
+      owned: deduped.filter((d) => !d.isGuest),
+      shared: deduped.filter((d) => d.isGuest),
     };
   } catch {
     return { owned: [], shared: [] };

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;
+}