yaver-feedback-react-native 0.7.9 → 0.7.10

package/dist/FeedbackModal.js

@@ -45,6 +45,7 @@ const FeedbackModal = () => {
     const [action, setAction] = (0, react_1.useState)('idle');
     const [error, setError] = (0, react_1.useState)(null);
     const [toast, setToast] = (0, react_1.useState)(null);
+    const [progress, setProgress] = (0, react_1.useState)(null);
     const [isRecordingVideo, setIsRecordingVideo] = (0, react_1.useState)(false);
     const [lastVideo, setLastVideo] = (0, react_1.useState)(null);
     const mountedRef = (0, react_1.useRef)(true);
@@ -69,6 +70,14 @@ const FeedbackModal = () => {
             const msg = payload?.message || payload?.phase || '';
             if (msg)
                 setToast(msg);
+            if (typeof payload?.progress === 'number') {
+                setProgress(payload.progress);
+            }
+            // On final phases, fade the bar to 100% so the user sees
+            // completion before the modal auto-dismisses.
+            if (payload?.phase === 'done' || payload?.phase === 'error') {
+                setProgress(1);
+            }
         });
         return () => {
             mountedRef.current = false;
@@ -141,15 +150,26 @@ const FeedbackModal = () => {
     const handleHotReload = (0, react_1.useCallback)(async () => {
         setAction('hot-reloading');
         setError(null);
+        setProgress(0);
+        setToast('Sending…');
         try {
+            // Default mode: bundle. Always rebuilds via the agent regardless
+            // of Metro state. P2PClient.reloadApp auto-resolves projectName +
+            // bundleId from expo-constants / NativeModules so the agent can
+            // map this app to its MobileProject scan entry without needing
+            // `yaver dev start` to have been run.
             await runWithReconnect(async (client) => {
-                await client.reloadApp('dev');
+                await client.reloadApp('bundle');
             });
-            setToast('Reload sent');
-            closeSoon(800);
+            // We don't auto-close here — the agent's BlackBox status pings
+            // will keep the modal updated, and the on-device YaverBundleLoader
+            // will reload the JS once the fresh bundle arrives. Modal stays
+            // up for a beat so the user sees the final progress state.
+            closeSoon(2500);
         }
         catch (err) {
             setError(err instanceof Error ? err.message : String(err));
+            setProgress(null);
         }
         finally {
             if (mountedRef.current)
@@ -387,6 +407,12 @@ const FeedbackModal = () => {
                     ? `Send Video · ${Math.round(lastVideo.duration)}s`
                     : 'Send Video'} tint="#a78bfa" onPress={handleSendVideo} disabled={busy || !lastVideo} busy={action === 'sending-video'}/>
 
+              {progress !== null && (<react_native_1.View style={styles.progressTrack}>
+                  <react_native_1.View style={[
+                    styles.progressFill,
+                    { width: `${Math.round(progress * 100)}%` },
+                ]}/>
+                </react_native_1.View>)}
               {toast && <react_native_1.Text style={styles.toast}>{toast}</react_native_1.Text>}
               {error && <react_native_1.Text style={styles.error}>{error}</react_native_1.Text>}
             </react_native_1.Pressable>
@@ -459,6 +485,18 @@ const styles = react_native_1.StyleSheet.create({
         fontSize: 15,
         fontWeight: '700',
     },
+    progressTrack: {
+        height: 6,
+        borderRadius: 3,
+        backgroundColor: 'rgba(255,255,255,0.08)',
+        overflow: 'hidden',
+        marginTop: 4,
+    },
+    progressFill: {
+        height: '100%',
+        backgroundColor: '#818cf8',
+        borderRadius: 3,
+    },
     toast: {
         color: '#22c55e',
         fontSize: 13,

package/dist/P2PClient.d.ts

@@ -65,7 +65,11 @@ export declare class P2PClient {
      * via the BlackBox command channel.
      * @param mode - "dev" for hot reload, "bundle" for native bundle rebuild
      */
-    reloadApp(mode?: 'dev' | 'bundle'): Promise<{
+    reloadApp(mode?: 'dev' | 'bundle', opts?: {
+        projectName?: string;
+        bundleId?: string;
+        projectPath?: string;
+    }): Promise<{
         ok: boolean;
     }>;
     /**

package/dist/P2PClient.js

@@ -2,6 +2,54 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.P2PClient = void 0;
 const react_native_1 = require("react-native");
+/**
+ * Try to resolve `{projectName, bundleId}` for the running app so the
+ * agent can map the reload request to a MobileProject in its scan
+ * cache. Order: caller-supplied opts → Expo Constants → react-native
+ * NativeModules. None of the lookups throw — missing data just means
+ * the agent will fall back to its own dev-server resolution.
+ */
+function resolveAppIdentity(opts) {
+    let projectName = opts?.projectName;
+    let bundleId = opts?.bundleId;
+    const projectPath = opts?.projectPath;
+    if (!projectName || !bundleId) {
+        try {
+            const Constants = require('expo-constants').default ?? require('expo-constants');
+            const cfg = Constants?.expoConfig ?? Constants?.manifest ?? {};
+            projectName = projectName || cfg?.name;
+            bundleId =
+                bundleId ||
+                    cfg?.ios?.bundleIdentifier ||
+                    cfg?.android?.package;
+        }
+        catch {
+            // expo-constants not installed (bare RN). Fall through.
+        }
+    }
+    if (!bundleId) {
+        try {
+            const { Platform, NativeModules } = require('react-native');
+            if (Platform.OS === 'ios') {
+                bundleId = NativeModules?.SettingsManager?.settings?.CFBundleIdentifier;
+            }
+            else if (Platform.OS === 'android') {
+                bundleId = NativeModules?.PlatformConstants?.Package;
+            }
+        }
+        catch {
+            // SettingsManager/PlatformConstants missing on some RN versions.
+        }
+    }
+    const out = {};
+    if (projectName)
+        out.projectName = projectName;
+    if (bundleId)
+        out.bundleId = bundleId;
+    if (projectPath)
+        out.projectPath = projectPath;
+    return out;
+}
 /**
  * Translate a raw Go-agent error into something a user can act on.
  *
@@ -215,7 +263,7 @@ class P2PClient {
      * via the BlackBox command channel.
      * @param mode - "dev" for hot reload, "bundle" for native bundle rebuild
      */
-    async reloadApp(mode = 'bundle') {
+    async reloadApp(mode = 'bundle', opts) {
         // Default path: always rebuild a fresh Hermes bundle.
         //
         // Rationale: the SDK's common caller is a phone user who's not
@@ -242,13 +290,25 @@ class P2PClient {
             // than surfacing the raw error, so the user never has to know
             // Metro wasn't running.
         }
+        // Auto-resolve identity if the caller didn't pass it. Reads from
+        // expo-constants when present (host can pin via app.json
+        // `expo.name` / `ios.bundleIdentifier` / `android.package`); falls
+        // back to react-native's NativeModules.SettingsManager.settings
+        // (iOS `CFBundleIdentifier`, `CFBundleName`) and Application
+        // (Android packageName). On the agent side these resolve to the
+        // matching MobileProject in the cached scan, so we don't need
+        // `yaver dev start` to have run on the host.
+        const identity = resolveAppIdentity(opts);
         const res = await fetch(`${this.baseUrl}/dev/reload-app`, {
             method: 'POST',
             headers: {
                 Authorization: `Bearer ${this.authToken}`,
                 'Content-Type': 'application/json',
             },
-            body: JSON.stringify({ mode: 'bundle' }),
+            body: JSON.stringify({
+                mode: 'bundle',
+                ...identity,
+            }),
         });
         if (!res.ok) {
             const text = await res.text().catch(() => '');

package/dist/YaverFeedback.js

@@ -155,18 +155,22 @@ class YaverFeedback {
                 }
                 else if (cmd.command === 'status') {
                     // Pipe agent progress pings to the UI. The FeedbackModal
-                    // subscribes to this event and renders the message while a
-                    // reload / build is in flight.
+                    // subscribes to this event and renders the message + a
+                    // progress bar while a reload / build is in flight.
                     const message = typeof cmd.data?.message === 'string'
                         ? cmd.data.message
                         : '';
                     const phase = typeof cmd.data?.phase === 'string'
                         ? cmd.data.phase
                         : '';
+                    const progress = typeof cmd.data?.progress === 'number'
+                        ? Math.max(0, Math.min(1, cmd.data.progress))
+                        : undefined;
                     const { DeviceEventEmitter } = require('react-native');
                     DeviceEventEmitter.emit('yaverFeedback:status', {
                         message,
                         phase,
+                        progress,
                         at: Date.now(),
                     });
                 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yaver-feedback-react-native",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "description": "Visual feedback SDK for Yaver — bug reports, screen recording, voice annotations, and local-first developer workflows",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/FeedbackModal.tsx

@@ -53,6 +53,7 @@ export const FeedbackModal: React.FC = () => {
   const [action, setAction] = useState<ActionState>('idle');
   const [error, setError] = useState<string | null>(null);
   const [toast, setToast] = useState<string | null>(null);
+  const [progress, setProgress] = useState<number | null>(null);
   const [isRecordingVideo, setIsRecordingVideo] = useState(false);
   const [lastVideo, setLastVideo] = useState<LastVideo | null>(null);
   const mountedRef = useRef(true);
@@ -74,10 +75,18 @@ export const FeedbackModal: React.FC = () => {
     // "stuck".
     const statusSub = DeviceEventEmitter.addListener(
       'yaverFeedback:status',
-      (payload: { message?: string; phase?: string }) => {
+      (payload: { message?: string; phase?: string; progress?: number }) => {
         if (!mountedRef.current) return;
         const msg = payload?.message || payload?.phase || '';
         if (msg) setToast(msg);
+        if (typeof payload?.progress === 'number') {
+          setProgress(payload.progress);
+        }
+        // On final phases, fade the bar to 100% so the user sees
+        // completion before the modal auto-dismisses.
+        if (payload?.phase === 'done' || payload?.phase === 'error') {
+          setProgress(1);
+        }
       },
     );
     return () => {
@@ -154,14 +163,25 @@ export const FeedbackModal: React.FC = () => {
   const handleHotReload = useCallback(async () => {
     setAction('hot-reloading');
     setError(null);
+    setProgress(0);
+    setToast('Sending…');
     try {
+      // Default mode: bundle. Always rebuilds via the agent regardless
+      // of Metro state. P2PClient.reloadApp auto-resolves projectName +
+      // bundleId from expo-constants / NativeModules so the agent can
+      // map this app to its MobileProject scan entry without needing
+      // `yaver dev start` to have been run.
       await runWithReconnect(async (client) => {
-        await client.reloadApp('dev');
+        await client.reloadApp('bundle');
       });
-      setToast('Reload sent');
-      closeSoon(800);
+      // We don't auto-close here — the agent's BlackBox status pings
+      // will keep the modal updated, and the on-device YaverBundleLoader
+      // will reload the JS once the fresh bundle arrives. Modal stays
+      // up for a beat so the user sees the final progress state.
+      closeSoon(2500);
     } catch (err: unknown) {
       setError(err instanceof Error ? err.message : String(err));
+      setProgress(null);
     } finally {
       if (mountedRef.current) setAction('idle');
     }
@@ -449,6 +469,16 @@ export const FeedbackModal: React.FC = () => {
                 busy={action === 'sending-video'}
               />
 
+              {progress !== null && (
+                <View style={styles.progressTrack}>
+                  <View
+                    style={[
+                      styles.progressFill,
+                      { width: `${Math.round(progress * 100)}%` },
+                    ]}
+                  />
+                </View>
+              )}
               {toast && <Text style={styles.toast}>{toast}</Text>}
               {error && <Text style={styles.error}>{error}</Text>}
             </Pressable>
@@ -550,6 +580,18 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: '700',
   },
+  progressTrack: {
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: 'rgba(255,255,255,0.08)',
+    overflow: 'hidden',
+    marginTop: 4,
+  },
+  progressFill: {
+    height: '100%',
+    backgroundColor: '#818cf8',
+    borderRadius: 3,
+  },
   toast: {
     color: '#22c55e',
     fontSize: 13,

package/src/P2PClient.ts

@@ -7,6 +7,56 @@ export interface FeedbackEvent {
   data: any;
 }
 
+/**
+ * Try to resolve `{projectName, bundleId}` for the running app so the
+ * agent can map the reload request to a MobileProject in its scan
+ * cache. Order: caller-supplied opts → Expo Constants → react-native
+ * NativeModules. None of the lookups throw — missing data just means
+ * the agent will fall back to its own dev-server resolution.
+ */
+function resolveAppIdentity(opts?: {
+  projectName?: string;
+  bundleId?: string;
+  projectPath?: string;
+}): { projectName?: string; bundleId?: string; projectPath?: string } {
+  let projectName = opts?.projectName;
+  let bundleId = opts?.bundleId;
+  const projectPath = opts?.projectPath;
+
+  if (!projectName || !bundleId) {
+    try {
+      const Constants = require('expo-constants').default ?? require('expo-constants');
+      const cfg = Constants?.expoConfig ?? Constants?.manifest ?? {};
+      projectName = projectName || cfg?.name;
+      bundleId =
+        bundleId ||
+        cfg?.ios?.bundleIdentifier ||
+        cfg?.android?.package;
+    } catch {
+      // expo-constants not installed (bare RN). Fall through.
+    }
+  }
+
+  if (!bundleId) {
+    try {
+      const { Platform, NativeModules } = require('react-native');
+      if (Platform.OS === 'ios') {
+        bundleId = NativeModules?.SettingsManager?.settings?.CFBundleIdentifier;
+      } else if (Platform.OS === 'android') {
+        bundleId = NativeModules?.PlatformConstants?.Package;
+      }
+    } catch {
+      // SettingsManager/PlatformConstants missing on some RN versions.
+    }
+  }
+
+  const out: { projectName?: string; bundleId?: string; projectPath?: string } = {};
+  if (projectName) out.projectName = projectName;
+  if (bundleId) out.bundleId = bundleId;
+  if (projectPath) out.projectPath = projectPath;
+  return out;
+}
+
 /**
  * Translate a raw Go-agent error into something a user can act on.
  *
@@ -256,7 +306,10 @@ export class P2PClient {
    * via the BlackBox command channel.
    * @param mode - "dev" for hot reload, "bundle" for native bundle rebuild
    */
-  async reloadApp(mode: 'dev' | 'bundle' = 'bundle'): Promise<{ ok: boolean }> {
+  async reloadApp(
+    mode: 'dev' | 'bundle' = 'bundle',
+    opts?: { projectName?: string; bundleId?: string; projectPath?: string },
+  ): Promise<{ ok: boolean }> {
     // Default path: always rebuild a fresh Hermes bundle.
     //
     // Rationale: the SDK's common caller is a phone user who's not
@@ -284,13 +337,26 @@ export class P2PClient {
       // Metro wasn't running.
     }
 
+    // Auto-resolve identity if the caller didn't pass it. Reads from
+    // expo-constants when present (host can pin via app.json
+    // `expo.name` / `ios.bundleIdentifier` / `android.package`); falls
+    // back to react-native's NativeModules.SettingsManager.settings
+    // (iOS `CFBundleIdentifier`, `CFBundleName`) and Application
+    // (Android packageName). On the agent side these resolve to the
+    // matching MobileProject in the cached scan, so we don't need
+    // `yaver dev start` to have run on the host.
+    const identity = resolveAppIdentity(opts);
+
     const res = await fetch(`${this.baseUrl}/dev/reload-app`, {
       method: 'POST',
       headers: {
         Authorization: `Bearer ${this.authToken}`,
         'Content-Type': 'application/json',
       },
-      body: JSON.stringify({ mode: 'bundle' }),
+      body: JSON.stringify({
+        mode: 'bundle',
+        ...identity,
+      }),
     });
     if (!res.ok) {
       const text = await res.text().catch(() => '');

package/src/YaverFeedback.ts

@@ -167,8 +167,8 @@ export class YaverFeedback {
           }
         } else if (cmd.command === 'status') {
           // Pipe agent progress pings to the UI. The FeedbackModal
-          // subscribes to this event and renders the message while a
-          // reload / build is in flight.
+          // subscribes to this event and renders the message + a
+          // progress bar while a reload / build is in flight.
           const message =
             typeof cmd.data?.message === 'string'
               ? (cmd.data.message as string)
@@ -177,10 +177,15 @@ export class YaverFeedback {
             typeof cmd.data?.phase === 'string'
               ? (cmd.data.phase as string)
               : '';
+          const progress =
+            typeof cmd.data?.progress === 'number'
+              ? Math.max(0, Math.min(1, cmd.data.progress as number))
+              : undefined;
           const { DeviceEventEmitter } = require('react-native');
           DeviceEventEmitter.emit('yaverFeedback:status', {
             message,
             phase,
+            progress,
             at: Date.now(),
           });
         }