yaver-feedback-react-native 0.8.1 → 0.8.3

package/src/YaverFeedback.ts

@@ -9,13 +9,18 @@ import {
   setStrictNativeAuth,
   getToken,
   getSelectedDeviceId,
+  listReachableDevices,
+  mintGuestSdkToken,
   clearToken,
   clearSelectedDeviceId,
   DEFAULT_CONVEX_SITE_URL,
 } from './auth';
 import {
   getQuickIconDisabled,
+  getQuickIconColorPreset,
   setQuickIconDisabled,
+  setQuickIconColorPreset,
+  QuickIconColorPreset,
 } from './preferences';
 
 // Is this JS runtime the Yaver mobile app's super-host bridge? The
@@ -45,6 +50,7 @@ let config: FeedbackConfig | null = null;
 let enabled = false;
 let p2pClient: P2PClient | null = null;
 let shakeDetector: ShakeDetector | null = null;
+let p2pAuthToken: string | null = null;
 
 /** Ring buffer of captured errors. */
 let errorBuffer: CapturedError[] = [];
@@ -73,6 +79,44 @@ const flagCache: Map<string, { value: unknown; at: number }> = new Map();
  * Call `YaverFeedback.init()` once at app startup.
  */
 export class YaverFeedback {
+  private static async resolveP2PAuthToken(): Promise<string | null> {
+    if (!config?.authToken) return null;
+    if (!config.preferredDeviceId) return config.authToken;
+    const devices = await listReachableDevices(config.authToken);
+    const all = [...devices.owned, ...devices.shared];
+    const selected = all.find((device) => device.deviceId === config?.preferredDeviceId);
+    if (!selected || !selected.isGuest || selected.accessScope !== 'shared-scoped') {
+      return config.authToken;
+    }
+    if (!selected.hostUserId) {
+      return config.authToken;
+    }
+    const delegated = await mintGuestSdkToken(
+      config.authToken,
+      selected.hostUserId,
+      selected.deviceId,
+    );
+    return delegated.token;
+  }
+
+  private static async rebuildP2PClient(agentUrl?: string): Promise<void> {
+    if (!config) return;
+    const effectiveUrl = agentUrl ?? config.agentUrl;
+    if (!effectiveUrl) {
+      p2pClient = null;
+      p2pAuthToken = null;
+      return;
+    }
+    const token = await YaverFeedback.resolveP2PAuthToken();
+    if (!token) {
+      p2pClient = null;
+      p2pAuthToken = null;
+      return;
+    }
+    p2pAuthToken = token;
+    p2pClient = new P2PClient(effectiveUrl, token);
+  }
+
   /**
    * Initialize the feedback SDK with the given configuration.
    * Typically called in your app's root component or entry file.
@@ -126,7 +170,11 @@ export class YaverFeedback {
 
     // Create P2P client if we have a URL
     if (config.agentUrl) {
+      p2pAuthToken = config.authToken ?? null;
       p2pClient = new P2PClient(config.agentUrl, config.authToken ?? '');
+      if (config.authToken) {
+        void YaverFeedback.rebuildP2PClient(config.agentUrl);
+      }
     } else {
       p2pClient = null;
       // Auto-discover agent in the background when convexUrl or LAN is available
@@ -247,7 +295,7 @@ export class YaverFeedback {
       });
       if (result && config) {
         config.agentUrl = result.url;
-        p2pClient = new P2PClient(result.url, config.authToken ?? '');
+        await YaverFeedback.rebuildP2PClient(result.url);
       }
     } catch {
       // Discovery failed — FloatingButton will show disconnected, user can retry
@@ -274,7 +322,7 @@ export class YaverFeedback {
       });
       if (!result) return false;
       config.agentUrl = result.url;
-      p2pClient = new P2PClient(result.url, config.authToken ?? '');
+      await YaverFeedback.rebuildP2PClient(result.url);
       return true;
     } catch {
       return false;
@@ -318,7 +366,7 @@ export class YaverFeedback {
     if (!config) return;
     config.authToken = token;
     if (config.agentUrl) {
-      p2pClient = new P2PClient(config.agentUrl, token);
+      await YaverFeedback.rebuildP2PClient(config.agentUrl);
     } else {
       await YaverFeedback.discoverAgent();
     }
@@ -359,9 +407,19 @@ export class YaverFeedback {
     config.preferredDeviceId = deviceId;
     config.agentUrl = undefined;
     p2pClient = null;
+    p2pAuthToken = null;
     await YaverFeedback.discoverAgent();
   }
 
+  /** Resolve the currently selected remote machine from the authenticated device list. */
+  static async getSelectedRemoteDevice() {
+    if (!config?.authToken || !config.preferredDeviceId) return null;
+    const preferredDeviceId = config.preferredDeviceId;
+    const devices = await listReachableDevices(config.authToken);
+    const all = [...devices.owned, ...devices.shared];
+    return all.find((device) => device.deviceId === preferredDeviceId) ?? null;
+  }
+
   /**
    * Sign out: clear cached token + device, tear down the P2P client. The
    * SDK stays enabled; the next feedback trigger will re-prompt for login.
@@ -375,6 +433,7 @@ export class YaverFeedback {
       config.agentUrl = undefined;
     }
     p2pClient = null;
+    p2pAuthToken = null;
   }
 
   /**
@@ -414,7 +473,7 @@ export class YaverFeedback {
         });
         if (result) {
           config.agentUrl = result.url;
-          p2pClient = new P2PClient(result.url, config.authToken ?? '');
+          await YaverFeedback.rebuildP2PClient(result.url);
         } else if (config.autoLogin !== false && !config.preferredDeviceId) {
           // No agent discovered and no device picked yet — prompt the user
           // to pick one of their machines (handles the non-LAN case where
@@ -859,6 +918,22 @@ export class YaverFeedback {
     return getQuickIconDisabled();
   }
 
+  static async setQuickIconColorPreset(
+    preset: QuickIconColorPreset | null,
+  ): Promise<void> {
+    await setQuickIconColorPreset(preset);
+    try {
+      const { DeviceEventEmitter } = require('react-native');
+      DeviceEventEmitter.emit('yaverFeedback:quickIconColorChange', { preset });
+    } catch {
+      // emitter unavailable — preference is still persisted
+    }
+  }
+
+  static async getQuickIconColorPreset(): Promise<QuickIconColorPreset | null> {
+    return getQuickIconColorPreset();
+  }
+
   /** Clear the persisted "user hid the icon" flag. */
   static async resetQuickIconPreference(): Promise<void> {
     await YaverFeedback.setQuickIconVisible(true);

package/src/__tests__/P2PClient.test.ts

@@ -215,4 +215,44 @@ describe('P2PClient', () => {
       expect(result).toEqual(builds);
     });
   });
+
+  describe('reloadApp()', () => {
+    it('returns an acknowledgement for dev reloads', async () => {
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve({ ok: true, changeClass: 'js_only' }),
+      });
+
+      const client = new P2PClient('http://localhost:18080', 'tok');
+      const result = await client.reloadApp('dev');
+
+      expect(result).toEqual(
+        expect.objectContaining({
+          ok: true,
+          mode: 'dev',
+          acknowledged: true,
+          message: 'Hot reload request accepted.',
+        }),
+      );
+    });
+
+    it('returns an acknowledgement for bundle reloads', async () => {
+      mockFetch.mockResolvedValue({
+        ok: true,
+        json: () => Promise.resolve({ ok: true }),
+      });
+
+      const client = new P2PClient('http://localhost:18080', 'tok');
+      const result = await client.reloadApp('bundle');
+
+      expect(result).toEqual(
+        expect.objectContaining({
+          ok: true,
+          mode: 'bundle',
+          acknowledged: true,
+          message: 'Reload request acknowledged. Agent is rebuilding the bundle.',
+        }),
+      );
+    });
+  });
 });

package/src/__tests__/YaverFeedback.test.ts

@@ -17,6 +17,34 @@ jest.mock('../Discovery', () => ({
   },
 }));
 
+jest.mock('../auth', () => ({
+  configureAuthEndpoints: jest.fn(),
+  setStrictNativeAuth: jest.fn(),
+  getToken: jest.fn(async () => null),
+  getSelectedDeviceId: jest.fn(async () => null),
+  clearToken: jest.fn(async () => {}),
+  clearSelectedDeviceId: jest.fn(async () => {}),
+  listReachableDevices: jest.fn(async () => ({
+    owned: [
+      {
+        deviceId: 'device-1',
+        name: 'Dev Mac',
+        platform: 'darwin',
+        isOnline: true,
+        needsAuth: false,
+        runnerDown: false,
+        lastHeartbeat: Date.now(),
+        isGuest: false,
+        accessScope: 'owner',
+        quicHost: '127.0.0.1',
+        quicPort: 18080,
+      },
+    ],
+    shared: [],
+  })),
+  DEFAULT_CONVEX_SITE_URL: 'https://example.convex.site',
+}));
+
 // Reset module-level state between tests by re-requiring
 beforeEach(() => {
   // YaverFeedback uses module-level variables (config, enabled, p2pClient).
@@ -126,6 +154,20 @@ describe('YaverFeedback', () => {
     });
   });
 
+  describe('getSelectedRemoteDevice()', () => {
+    it('returns the selected device from the reachable device list', async () => {
+      YaverFeedback.init({
+        authToken: 'tok',
+        preferredDeviceId: 'device-1',
+        enabled: true,
+      });
+
+      const device = await YaverFeedback.getSelectedRemoteDevice();
+      expect(device?.deviceId).toBe('device-1');
+      expect(device?.name).toBe('Dev Mac');
+    });
+  });
+
   describe('startReport()', () => {
     it('does nothing when not enabled', async () => {
       YaverFeedback.init({ authToken: 'tok', enabled: false });

package/src/auth.ts

@@ -410,8 +410,10 @@ export interface RemoteDevice {
   runnerDown: boolean;
   lastHeartbeat: number;
   isGuest: boolean;
+  hostUserId?: string;
   hostName?: string;
   hostEmail?: string;
+  hostUserIdString?: string;
   accessScope: 'owner' | 'shared-scoped' | 'shared-legacy';
   quicHost: string;
   quicPort: number;
@@ -433,6 +435,49 @@ export interface DeviceList {
   shared: RemoteDevice[];
 }
 
+export interface GuestInvitation {
+  hostUserId: string;
+  hostName: string;
+  hostEmail: string;
+  hostUserIdString?: string;
+  createdAt: number;
+  expiresAt: number;
+  inviteCode?: string;
+}
+
+export interface ActiveGuestHost {
+  hostUserId: string;
+  hostName: string;
+  hostEmail: string;
+  grantedAt: number;
+}
+
+export interface GuestHostsResponse {
+  pending: GuestInvitation[];
+  active: ActiveGuestHost[];
+}
+
+export interface InvitationHostDevice {
+  deviceId: string;
+  name: string;
+  platform: string;
+  lastHeartbeat?: number;
+  proposed: boolean;
+}
+
+export interface InvitationPreview {
+  inviteCode: string;
+  hostUserId: string;
+  hostName: string;
+  hostEmail: string;
+  hostUserIdString?: string;
+  proposedDeviceIds?: string[];
+  hostDevices: InvitationHostDevice[];
+  invitedByUserId?: boolean;
+  expiresAt: number;
+  createdAt: number;
+}
+
 /**
  * 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).
@@ -463,8 +508,10 @@ export async function listReachableDevices(
       runnerDown: !!d.runnerDown,
       lastHeartbeat: d.lastHeartbeat ?? 0,
       isGuest: !!d.isGuest,
+      hostUserId: d.hostUserId,
       hostName: d.hostName,
       hostEmail: d.hostEmail,
+      hostUserIdString: d.hostUserIdString,
       accessScope: d.accessScope ?? 'owner',
       quicHost: d.quicHost ?? d.host ?? '',
       quicPort: d.quicPort ?? 0,
@@ -488,3 +535,93 @@ export async function listReachableDevices(
     return { owned: [], shared: [] };
   }
 }
+
+export async function mintGuestSdkToken(
+  token: string,
+  hostUserId: string,
+  targetDeviceId: string,
+): Promise<{ token: string; expiresAt: number; allowedProjects?: string[] }> {
+  const res = await fetch(`${convexSiteUrl}/guests/sdk-token`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ hostUserId, targetDeviceId }),
+  });
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}));
+    throw new Error(data.error || 'Failed to mint delegated SDK token');
+  }
+  return res.json();
+}
+
+export async function fetchGuestHosts(token: string): Promise<GuestHostsResponse> {
+  const res = await fetch(`${convexSiteUrl}/guests/hosts`, {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}));
+    throw new Error(data.error || 'Failed to fetch guest hosts');
+  }
+  return res.json();
+}
+
+export async function findInviteByCode(
+  token: string,
+  code: string,
+): Promise<InvitationPreview | null> {
+  const cleaned = code.toUpperCase().trim();
+  const res = await fetch(
+    `${convexSiteUrl}/guests/find-by-code?code=${encodeURIComponent(cleaned)}`,
+    { headers: { Authorization: `Bearer ${token}` } },
+  );
+  if (res.status === 404) return null;
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}));
+    throw new Error(data.error || 'Failed to load invite');
+  }
+  return res.json();
+}
+
+export async function acceptGuestByCode(
+  token: string,
+  code: string,
+  approvedDeviceIds?: string[],
+): Promise<{ hostName: string; hostEmail: string }> {
+  const res = await fetch(`${convexSiteUrl}/guests/accept-code`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+      code: code.toUpperCase().trim(),
+      approvedDeviceIds,
+    }),
+  });
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}));
+    throw new Error(data.error || 'Invalid invite code');
+  }
+  return res.json();
+}
+
+export async function acceptGuestInvitation(
+  token: string,
+  hostUserId: string,
+  approvedDeviceIds?: string[],
+): Promise<void> {
+  const res = await fetch(`${convexSiteUrl}/guests/accept`, {
+    method: 'POST',
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({ hostUserId, approvedDeviceIds }),
+  });
+  if (!res.ok) {
+    const data = await res.json().catch(() => ({}));
+    throw new Error(data.error || 'Failed to accept invitation');
+  }
+}

package/src/index.ts

@@ -1,12 +1,11 @@
 /**
  * yaver-feedback-react-native — Visual feedback SDK for Yaver.
  *
- * Shake-to-report surface with four core actions:
+ * Shake-to-report surface with three launch actions:
  *  1. Hot Reload              — instant JS reload
  *  2. Vibing                  — open a vibing session on the agent
- *  3. Screenshot / Upload     — capture the screen under the modal or
- *                               upload existing media
- *  4. Screen Recording        — start, then stop + upload
+ *  3. Screenshot & Fix        — capture the current screen and trigger
+ *                               the fix loop
  *
  * The small quick-access icon stays hidden until the first shake by
  * default on mobile, then remains available unless the user hides it.
@@ -41,6 +40,8 @@ export { YaverLoginScreen } from './LoginScreen';
 export type { YaverLoginScreenProps } from './LoginScreen';
 export { YaverMachinePickerScreen } from './MachinePickerScreen';
 export type { YaverMachinePickerProps } from './MachinePickerScreen';
+export { YaverGuestOnboardingScreen } from './GuestOnboardingScreen';
+export type { YaverGuestOnboardingScreenProps } from './GuestOnboardingScreen';
 export { PairDeviceModal } from './PairDeviceModal';
 export type { PairDeviceModalProps } from './PairDeviceModal';
 export { AuthOverlay } from './AuthOverlay';
@@ -73,6 +74,10 @@ export {
   signupWithEmail,
   loginWithEmail,
   listReachableDevices,
+  fetchGuestHosts,
+  findInviteByCode,
+  acceptGuestByCode,
+  acceptGuestInvitation,
   DEFAULT_CONVEX_SITE_URL,
   DEFAULT_WEB_BASE_URL,
   DEFAULT_OAUTH_REDIRECT,
@@ -82,6 +87,11 @@ export type {
   User,
   RemoteDevice,
   DeviceList,
+  GuestInvitation,
+  ActiveGuestHost,
+  GuestHostsResponse,
+  InvitationHostDevice,
+  InvitationPreview,
 } from './auth';
 export {
   captureScreenshot,

package/src/preferences.ts

@@ -25,6 +25,69 @@ try {
 }
 
 const QUICK_ICON_DISABLED_KEY = 'yaver_feedback_quickicon_disabled';
+const QUICK_ICON_COLOR_KEY = 'yaver_feedback_quickicon_color';
+
+export type QuickIconColorPreset =
+  | 'orange'
+  | 'lime'
+  | 'cyan'
+  | 'pink'
+  | 'yellow'
+  | 'slate';
+
+export const QUICK_ICON_COLOR_PRESETS: Record<
+  QuickIconColorPreset,
+  {
+    label: string;
+    backgroundColor: string;
+    foregroundColor: string;
+    borderColor: string;
+    shadowColor: string;
+  }
+> = {
+  orange: {
+    label: 'Orange',
+    backgroundColor: '#ff6b2c',
+    foregroundColor: '#111111',
+    borderColor: 'rgba(255,255,255,0.92)',
+    shadowColor: '#000000',
+  },
+  lime: {
+    label: 'Lime',
+    backgroundColor: '#a3e635',
+    foregroundColor: '#111111',
+    borderColor: 'rgba(255,255,255,0.85)',
+    shadowColor: '#365314',
+  },
+  cyan: {
+    label: 'Cyan',
+    backgroundColor: '#22d3ee',
+    foregroundColor: '#082f49',
+    borderColor: 'rgba(255,255,255,0.82)',
+    shadowColor: '#083344',
+  },
+  pink: {
+    label: 'Pink',
+    backgroundColor: '#fb7185',
+    foregroundColor: '#fff1f2',
+    borderColor: 'rgba(255,255,255,0.78)',
+    shadowColor: '#4c0519',
+  },
+  yellow: {
+    label: 'Yellow',
+    backgroundColor: '#facc15',
+    foregroundColor: '#1c1917',
+    borderColor: 'rgba(255,255,255,0.88)',
+    shadowColor: '#713f12',
+  },
+  slate: {
+    label: 'Slate',
+    backgroundColor: '#475569',
+    foregroundColor: '#f8fafc',
+    borderColor: 'rgba(255,255,255,0.68)',
+    shadowColor: '#020617',
+  },
+};
 
 /** True if the user has long-pressed the icon and chosen "Hide". */
 export async function getQuickIconDisabled(): Promise<boolean> {
@@ -53,3 +116,36 @@ export async function setQuickIconDisabled(disabled: boolean): Promise<void> {
 export async function clearQuickIconDisabled(): Promise<void> {
   await setQuickIconDisabled(false);
 }
+
+export async function getQuickIconColorPreset(): Promise<QuickIconColorPreset | null> {
+  if (!AsyncStorage) return null;
+  try {
+    const v = await AsyncStorage.getItem(QUICK_ICON_COLOR_KEY);
+    if (!v) return null;
+    if (Object.prototype.hasOwnProperty.call(QUICK_ICON_COLOR_PRESETS, v)) {
+      return v as QuickIconColorPreset;
+    }
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export async function setQuickIconColorPreset(
+  preset: QuickIconColorPreset | null,
+): Promise<void> {
+  if (!AsyncStorage) return;
+  try {
+    if (!preset) {
+      await AsyncStorage.removeItem(QUICK_ICON_COLOR_KEY);
+      return;
+    }
+    await AsyncStorage.setItem(QUICK_ICON_COLOR_KEY, preset);
+  } catch {
+    // best-effort
+  }
+}
+
+export async function clearQuickIconColorPreset(): Promise<void> {
+  await setQuickIconColorPreset(null);
+}

package/src/types.ts

@@ -206,6 +206,13 @@ export interface FeedbackConfig {
    * Default: false (preserve historical behavior).
    */
   strictNativeAuth?: boolean;
+  /**
+   * Optional host invite code to prefill into the in-SDK guest onboarding
+   * flow. Useful when your app receives the code from a deep link, QR flow,
+   * or an out-of-band host handoff and you want the user to redeem it
+   * without typing.
+   */
+  guestInviteCode?: string;
 }
 
 export interface FeedbackBundle {