yaver-feedback-react-native 0.8.0 → 0.8.2

package/src/P2PClient.ts

@@ -7,6 +7,15 @@ export interface FeedbackEvent {
   data: any;
 }
 
+export interface ReloadAck {
+  ok: boolean;
+  mode: 'dev' | 'bundle';
+  acknowledged: boolean;
+  message: string;
+  nativeChangesDetected?: boolean;
+  changeClass?: string;
+}
+
 /**
  * Try to resolve `{projectName, bundleId}` for the running app so the
  * agent can map the reload request to a MobileProject in its scan
@@ -179,6 +188,14 @@ 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);
+    }
+
     const response = await fetch(`${this.baseUrl}/feedback`, {
       method: 'POST',
       headers: {
@@ -309,7 +326,7 @@ export class P2PClient {
   async reloadApp(
     mode: 'dev' | 'bundle' = 'bundle',
     opts?: { projectName?: string; bundleId?: string; projectPath?: string },
-  ): Promise<{ ok: boolean }> {
+  ): Promise<ReloadAck> {
     // Default path: always rebuild a fresh Hermes bundle.
     //
     // Rationale: the SDK's common caller is a phone user who's not
@@ -330,7 +347,19 @@ export class P2PClient {
         headers: { Authorization: `Bearer ${this.authToken}` },
       });
       if (primary.ok) {
-        return primary.json().catch(() => ({ ok: true }));
+        const payload = await primary.json().catch(() => ({} as Record<string, unknown>));
+        const nativeChangesDetected = payload.nativeChangesDetected === true;
+        return {
+          ok: true,
+          mode: 'dev',
+          acknowledged: true,
+          nativeChangesDetected,
+          changeClass:
+            typeof payload.changeClass === 'string' ? payload.changeClass : undefined,
+          message: nativeChangesDetected
+            ? 'Reload accepted, but native changes need a rebuild.'
+            : 'Hot reload request accepted.',
+        };
       }
       // Dev mode failed — fall through to bundle rebuild below rather
       // than surfacing the raw error, so the user never has to know
@@ -362,7 +391,19 @@ export class P2PClient {
       const text = await res.text().catch(() => '');
       throw new Error(friendlyReloadError(res.status, text));
     }
-    return res.json().catch(() => ({ ok: true }));
+    const payload = await res.json().catch(() => ({} as Record<string, unknown>));
+    return {
+      ok: true,
+      mode: 'bundle',
+      acknowledged: true,
+      changeClass:
+        typeof payload.changeClass === 'string' ? payload.changeClass : undefined,
+      nativeChangesDetected: payload.nativeChangesDetected === true,
+      message:
+        typeof payload.message === 'string' && payload.message.trim()
+          ? payload.message
+          : 'Reload request acknowledged. Agent is rebuilding the bundle.',
+    };
   }
 
   /**

package/src/QuickActionIcon.tsx

@@ -12,7 +12,13 @@ import {
   View,
 } from 'react-native';
 import { YaverFeedback } from './YaverFeedback';
-import { getQuickIconDisabled, setQuickIconDisabled } from './preferences';
+import {
+  getQuickIconColorPreset,
+  getQuickIconDisabled,
+  QUICK_ICON_COLOR_PRESETS,
+  setQuickIconColorPreset,
+  setQuickIconDisabled,
+} from './preferences';
 
 // Mirror the suppression rule used by YaverFeedback + ShakeDetector:
 // when loaded through Yaver's super-host Hermes bundle, the host owns
@@ -26,12 +32,23 @@ function isRunningInsideYaverHost(): boolean {
 }
 
 const DEFAULT_SIZE = 44;
-const DEFAULT_COLOR = '#6366f1';
+const DEFAULT_BACKGROUND_COLOR = '#ff6b2c';
+const DEFAULT_LABEL_COLOR = '#111111';
+const DEFAULT_BORDER_COLOR = 'rgba(255,255,255,0.92)';
+const DEFAULT_SHADOW_COLOR = '#000000';
 const LONG_PRESS_MS = 550;
 
 export interface QuickActionIconProps {
-  /** Override the color from FeedbackConfig.quickIconColor. */
+  /** Deprecated alias for `backgroundColor`. */
   color?: string;
+  /** Override the background from FeedbackConfig.quickIconBackgroundColor. */
+  backgroundColor?: string;
+  /** Override the label color from FeedbackConfig.quickIconForegroundColor. */
+  foregroundColor?: string;
+  /** Override the border color from FeedbackConfig.quickIconBorderColor. */
+  borderColor?: string;
+  /** Override the shadow color from FeedbackConfig.quickIconShadowColor. */
+  shadowColor?: string;
   /** Override the initial position from FeedbackConfig.quickIconInitialPosition. */
   initialPosition?: { x: number; y: number };
   /** Override the icon diameter. Default 44. */
@@ -52,7 +69,7 @@ export interface QuickActionIconProps {
  * hidden the user can still shake to open feedback.
  *
  * Visibility is controlled by `FeedbackConfig.quickIcon`:
- *  - `'auto'` (default) → `'always'` on iOS/Android, `'off'` on web.
+ *  - `'auto'` (default) → `'after-shake'` on iOS/Android, `'off'` on web.
  *  - `'always'` → visible from first render.
  *  - `'after-shake'` → hidden until `yaverFeedback:firstShake` fires.
  *  - `'off'` → never rendered.
@@ -62,6 +79,10 @@ export interface QuickActionIconProps {
  */
 export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
   color: colorProp,
+  backgroundColor: backgroundColorProp,
+  foregroundColor: foregroundColorProp,
+  borderColor: borderColorProp,
+  shadowColor: shadowColorProp,
   initialPosition: initialPositionProp,
   size = DEFAULT_SIZE,
 }) => {
@@ -70,12 +91,29 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
   const mode: 'always' | 'after-shake' | 'off' = (() => {
     const raw = config?.quickIcon ?? 'auto';
     if (raw === 'auto') {
-      return Platform.OS === 'web' ? 'off' : 'always';
+      return Platform.OS === 'web' ? 'off' : 'after-shake';
     }
     return raw;
   })();
 
-  const color = colorProp ?? config?.quickIconColor ?? DEFAULT_COLOR;
+  const backgroundColor =
+    backgroundColorProp ??
+    colorProp ??
+    config?.quickIconBackgroundColor ??
+    config?.quickIconColor ??
+    DEFAULT_BACKGROUND_COLOR;
+  const foregroundColor =
+    foregroundColorProp ??
+    config?.quickIconForegroundColor ??
+    DEFAULT_LABEL_COLOR;
+  const borderColor =
+    borderColorProp ??
+    config?.quickIconBorderColor ??
+    DEFAULT_BORDER_COLOR;
+  const shadowColor =
+    shadowColorProp ??
+    config?.quickIconShadowColor ??
+    DEFAULT_SHADOW_COLOR;
 
   const { width, height } = Dimensions.get('window');
   const defaultStart =
@@ -91,6 +129,7 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
   const didDrag = useRef(false);
 
   const [userDisabled, setUserDisabled] = useState<boolean | null>(null);
+  const [colorPreset, setColorPreset] = useState<keyof typeof QUICK_ICON_COLOR_PRESETS | null>(null);
   const [shakenThisSession, setShakenThisSession] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
   const [hostSuppressed] = useState<boolean>(() => isRunningInsideYaverHost());
@@ -103,6 +142,9 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
     getQuickIconDisabled().then((v) => {
       if (alive) setUserDisabled(v);
     });
+    getQuickIconColorPreset().then((v) => {
+      if (alive) setColorPreset(v);
+    });
     return () => {
       alive = false;
     };
@@ -137,9 +179,18 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
         setMenuOpen(false);
       },
     );
+    const colorSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:quickIconColorChange',
+      (next: { preset?: keyof typeof QUICK_ICON_COLOR_PRESETS | null }) => {
+        const preset = next?.preset ?? null;
+        setColorPreset(preset);
+        void setQuickIconColorPreset(preset);
+      },
+    );
     return () => {
       showSub.remove();
       hideSub.remove();
+      colorSub.remove();
     };
   }, []);
 
@@ -197,6 +248,7 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
   if (mode === 'after-shake' && !shakenThisSession) return null;
   if (!YaverFeedback.isEnabled()) return null;
 
+  const presetColors = colorPreset ? QUICK_ICON_COLOR_PRESETS[colorPreset] : null;
   const visualSize = size;
   const radius = visualSize / 2;
 
@@ -239,12 +291,24 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
               width: visualSize,
               height: visualSize,
               borderRadius: radius,
-              backgroundColor: color,
+              backgroundColor: presetColors?.backgroundColor ?? backgroundColor,
+              borderColor: presetColors?.borderColor ?? borderColor,
+              shadowColor: presetColors?.shadowColor ?? shadowColor,
               opacity: pressed ? 0.85 : 1,
             },
           ]}
         >
-          <Text style={[styles.iconLabel, { fontSize: Math.round(visualSize * 0.5) }]}>y</Text>
+          <Text
+            style={[
+              styles.iconLabel,
+              {
+                color: presetColors?.foregroundColor ?? foregroundColor,
+                fontSize: Math.round(visualSize * 0.5),
+              },
+            ]}
+          >
+            y
+          </Text>
         </Pressable>
         {menuOpen ? (
           <View style={styles.menu}>
@@ -286,14 +350,13 @@ const styles = StyleSheet.create({
   icon: {
     alignItems: 'center',
     justifyContent: 'center',
-    shadowColor: '#000',
     shadowOffset: { width: 0, height: 2 },
-    shadowOpacity: 0.25,
-    shadowRadius: 4,
-    elevation: 4,
+    shadowOpacity: 0.34,
+    shadowRadius: 6,
+    elevation: 7,
+    borderWidth: 2,
   },
   iconLabel: {
-    color: '#ffffff',
     fontWeight: '700',
     includeFontPadding: false,
   },

package/src/YaverFeedback.ts

@@ -9,13 +9,17 @@ import {
   setStrictNativeAuth,
   getToken,
   getSelectedDeviceId,
+  listReachableDevices,
   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
@@ -92,6 +96,7 @@ export class YaverFeedback {
       autoLogin: true,
       ...cfg,
     };
+    firstShakeFired = false;
 
     // Route the in-SDK login screen to prod yaver.io by default; callers may
     // override for staging via authConvexSiteUrl / authWebBaseUrl.
@@ -361,6 +366,15 @@ export class YaverFeedback {
     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.
@@ -858,6 +872,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);
@@ -869,6 +899,7 @@ export class YaverFeedback {
       shakeDetector.stop();
       shakeDetector = null;
     }
+    firstShakeFired = false;
     enabled = false;
     config = null;
     p2pClient = null;

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/capture.ts

@@ -38,6 +38,80 @@ export async function captureScreenshot(): Promise<string> {
   }
 }
 
+export interface PickedFeedbackFile {
+  path: string;
+  name: string;
+  mimeType?: string;
+  kind: 'image' | 'video' | 'audio' | 'unknown';
+}
+
+function classifyPickedFile(name: string, mimeType?: string): PickedFeedbackFile['kind'] {
+  const lowerName = name.toLowerCase();
+  const lowerMime = (mimeType ?? '').toLowerCase();
+  if (
+    lowerMime.startsWith('image/') ||
+    lowerName.endsWith('.png') ||
+    lowerName.endsWith('.jpg') ||
+    lowerName.endsWith('.jpeg') ||
+    lowerName.endsWith('.webp')
+  ) {
+    return 'image';
+  }
+  if (
+    lowerMime.startsWith('video/') ||
+    lowerName.endsWith('.mp4') ||
+    lowerName.endsWith('.mov') ||
+    lowerName.endsWith('.m4v')
+  ) {
+    return 'video';
+  }
+  if (
+    lowerMime.startsWith('audio/') ||
+    lowerName.endsWith('.m4a') ||
+    lowerName.endsWith('.aac') ||
+    lowerName.endsWith('.wav') ||
+    lowerName.endsWith('.mp3')
+  ) {
+    return 'audio';
+  }
+  return 'unknown';
+}
+
+/**
+ * Pick an existing media file from the device. Requires
+ * `expo-document-picker` to be installed.
+ */
+export async function pickFeedbackFile(): Promise<PickedFeedbackFile> {
+  try {
+    const picker = require('expo-document-picker');
+    const result = await picker.getDocumentAsync({
+      copyToCacheDirectory: true,
+      multiple: false,
+      type: ['image/*', 'video/*', 'audio/*'],
+    });
+    if (result?.canceled) {
+      throw new Error('File selection canceled.');
+    }
+    const asset = result?.assets?.[0];
+    if (!asset?.uri) {
+      throw new Error('No file selected.');
+    }
+    const name = asset.name || asset.uri.split('/').pop() || 'attachment';
+    const mimeType = asset.mimeType as string | undefined;
+    return {
+      path: asset.uri,
+      name,
+      mimeType,
+      kind: classifyPickedFile(name, mimeType),
+    };
+  } catch (err) {
+    throw new Error(
+      '[YaverFeedback] File upload needs `expo-document-picker` as an optional peer dependency. ' +
+        String(err),
+    );
+  }
+}
+
 let videoRecorderModule: any = null;
 let videoRecordingActive = false;
 

package/src/index.ts

@@ -1,13 +1,14 @@
 /**
  * yaver-feedback-react-native — Visual feedback SDK for Yaver.
  *
- * Shake-to-report surface with five one-tap actions:
+ * Shake-to-report surface with three launch 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
+ *  2. Vibing                  — open a vibing session on the agent
+ *  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.
  *
  * @example
  * ```tsx
@@ -83,6 +84,7 @@ export type {
 } from './auth';
 export {
   captureScreenshot,
+  pickFeedbackFile,
   startVideoRecording,
   stopVideoRecording,
   isVideoRecording,

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