yaver-feedback-react-native 0.7.9 → 0.7.11

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/LoginScreen.js

@@ -37,6 +37,51 @@ exports.YaverLoginScreen = void 0;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const auth_1 = require("./auth");
+const PROVIDER_THEME = {
+    apple: { ion: 'logo-apple', letter: '', fg: '#FFFFFF', bg: 'transparent' },
+    google: { ion: 'logo-google', letter: 'G', fg: '#EA4335', bg: 'transparent' },
+    github: { ion: 'logo-github', letter: 'G', fg: '#FFFFFF', bg: 'transparent' },
+    gitlab: { ion: 'logo-gitlab', letter: 'G', fg: '#FC6D26', bg: 'transparent' },
+    microsoft: { ion: 'logo-microsoft', letter: 'M', fg: '#00A4EF', bg: 'transparent' },
+};
+const ProviderLogo = ({ provider, }) => {
+    const theme = PROVIDER_THEME[provider] ?? PROVIDER_THEME.apple;
+    // Soft-require @expo/vector-icons so the SDK works in bare-RN apps
+    // that don't ship Expo. If present, render the brand glyph; if
+    // not, render a coloured monogram fallback.
+    let Ionicons = null;
+    try {
+        const mod = require('@expo/vector-icons');
+        Ionicons = mod?.Ionicons ?? null;
+    }
+    catch {
+        // package not installed — use letter fallback
+    }
+    if (Ionicons) {
+        return (<Ionicons name={theme.ion} size={18} color={theme.fg} style={iconStyles.icon}/>);
+    }
+    if (!theme.letter) {
+        return null;
+    }
+    return (<react_native_1.View style={[iconStyles.fallback, { backgroundColor: theme.fg + '22' }]}>
+      <react_native_1.Text style={[iconStyles.fallbackText, { color: theme.fg }]}>{theme.letter}</react_native_1.Text>
+    </react_native_1.View>);
+};
+const iconStyles = react_native_1.StyleSheet.create({
+    icon: { marginRight: 12 },
+    fallback: {
+        width: 22,
+        height: 22,
+        borderRadius: 11,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 12,
+    },
+    fallbackText: {
+        fontSize: 12,
+        fontWeight: '700',
+    },
+});
 /**
  * Full-screen in-SDK login. Mirrors the Yaver mobile app login UX: native
  * Apple Sign-In on iOS, in-app browser OAuth for Google/GitHub/GitLab/
@@ -120,7 +165,10 @@ const YaverLoginScreen = ({ onLoggedIn, onCancel, }) => {
             pressed && styles.buttonPressed,
             busyProvider === id && { opacity: 0.6 },
         ]} onPress={onPress} disabled={busyProvider !== null}>
-      {busyProvider === id ? (<react_native_1.ActivityIndicator color="#e0e0e0"/>) : (<react_native_1.Text style={styles.buttonText}>{label}</react_native_1.Text>)}
+      {busyProvider === id ? (<react_native_1.ActivityIndicator color="#e0e0e0"/>) : (<react_native_1.View style={styles.buttonContent}>
+          <ProviderLogo provider={id}/>
+          <react_native_1.Text style={[styles.buttonText, styles.buttonTextWithIcon]}>{label}</react_native_1.Text>
+        </react_native_1.View>)}
     </react_native_1.Pressable>);
     return (<react_native_1.SafeAreaView style={styles.safeArea}>
       <react_native_1.KeyboardAvoidingView style={{ flex: 1 }} behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : undefined}>
@@ -211,6 +259,14 @@ const styles = react_native_1.StyleSheet.create({
     },
     buttonPressed: { opacity: 0.7 },
     buttonText: { color: '#e0e0e0', fontSize: 15, fontWeight: '600' },
+    buttonContent: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonTextWithIcon: {
+    // No extra spacing — ProviderLogo provides its own marginRight.
+    },
     divider: {
         flexDirection: 'row',
         alignItems: 'center',

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.11",
   "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/LoginScreen.tsx

@@ -23,6 +23,88 @@ import {
   type OAuthProvider,
 } from './auth';
 
+// ── ProviderLogo ─────────────────────────────────────────────────────
+//
+// Mirrors the Yaver mobile app's login screen — Apple, Google, GitHub,
+// GitLab, Microsoft each get their brand mark next to the label.
+// Mobile uses `Ionicons` from `@expo/vector-icons`. We soft-require
+// the same package so apps that have it (every Expo app does) get
+// real logos automatically; bare-RN apps without the package fall
+// back to a single-letter monogram in a tinted circle.
+//
+// Each entry holds: Ionicons name, fallback letter, brand colour,
+// optional Apple-on-light invert (Apple's wordmark needs the
+// alternate "logo-apple-appstore" / dark variant on dark backgrounds).
+type ProviderTheme = {
+  ion: string;
+  letter: string;
+  fg: string;
+  bg: string;
+};
+
+const PROVIDER_THEME: Record<OAuthProvider | 'apple', ProviderTheme> = {
+  apple:     { ion: 'logo-apple',     letter: '', fg: '#FFFFFF', bg: 'transparent' },
+  google:    { ion: 'logo-google',    letter: 'G', fg: '#EA4335', bg: 'transparent' },
+  github:    { ion: 'logo-github',    letter: 'G', fg: '#FFFFFF', bg: 'transparent' },
+  gitlab:    { ion: 'logo-gitlab',    letter: 'G', fg: '#FC6D26', bg: 'transparent' },
+  microsoft: { ion: 'logo-microsoft', letter: 'M', fg: '#00A4EF', bg: 'transparent' },
+};
+
+const ProviderLogo: React.FC<{ provider: OAuthProvider | 'apple' }> = ({
+  provider,
+}) => {
+  const theme = PROVIDER_THEME[provider] ?? PROVIDER_THEME.apple;
+  // Soft-require @expo/vector-icons so the SDK works in bare-RN apps
+  // that don't ship Expo. If present, render the brand glyph; if
+  // not, render a coloured monogram fallback.
+  let Ionicons: React.ComponentType<{
+    name: string;
+    size?: number;
+    color?: string;
+    style?: object;
+  }> | null = null;
+  try {
+    const mod = require('@expo/vector-icons');
+    Ionicons = mod?.Ionicons ?? null;
+  } catch {
+    // package not installed — use letter fallback
+  }
+  if (Ionicons) {
+    return (
+      <Ionicons
+        name={theme.ion}
+        size={18}
+        color={theme.fg}
+        style={iconStyles.icon}
+      />
+    );
+  }
+  if (!theme.letter) {
+    return null;
+  }
+  return (
+    <View style={[iconStyles.fallback, { backgroundColor: theme.fg + '22' }]}>
+      <Text style={[iconStyles.fallbackText, { color: theme.fg }]}>{theme.letter}</Text>
+    </View>
+  );
+};
+
+const iconStyles = StyleSheet.create({
+  icon: { marginRight: 12 },
+  fallback: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  fallbackText: {
+    fontSize: 12,
+    fontWeight: '700',
+  },
+});
+
 export interface YaverLoginScreenProps {
   /** Invoked once a session token is issued and the user is loaded. */
   onLoggedIn: (token: string) => void;
@@ -125,7 +207,10 @@ export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
       {busyProvider === id ? (
         <ActivityIndicator color="#e0e0e0" />
       ) : (
-        <Text style={styles.buttonText}>{label}</Text>
+        <View style={styles.buttonContent}>
+          <ProviderLogo provider={id} />
+          <Text style={[styles.buttonText, styles.buttonTextWithIcon]}>{label}</Text>
+        </View>
       )}
     </Pressable>
   );
@@ -295,6 +380,14 @@ const styles = StyleSheet.create({
   },
   buttonPressed: { opacity: 0.7 },
   buttonText: { color: '#e0e0e0', fontSize: 15, fontWeight: '600' },
+  buttonContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonTextWithIcon: {
+    // No extra spacing — ProviderLogo provides its own marginRight.
+  },
   divider: {
     flexDirection: 'row',
     alignItems: 'center',

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(),
           });
         }