yaver-feedback-react-native 0.8.4 → 0.8.6

package/dist/AuthOverlay.js

@@ -61,6 +61,31 @@ const AuthOverlay = () => {
     const [pickerVisible, setPickerVisible] = (0, react_1.useState)(false);
     const [token, setToken] = (0, react_1.useState)(null);
     const [pendingInviteCode, setPendingInviteCode] = (0, react_1.useState)(null);
+    const activeOverlayRef = (0, react_1.useRef)('none');
+    const openLogin = (0, react_1.useCallback)(() => {
+        activeOverlayRef.current = 'login';
+        setGuestVisible(false);
+        setPickerVisible(false);
+        setLoginVisible(true);
+    }, []);
+    const openGuest = (0, react_1.useCallback)(() => {
+        activeOverlayRef.current = 'guest';
+        setLoginVisible(false);
+        setPickerVisible(false);
+        setGuestVisible(true);
+    }, []);
+    const openPicker = (0, react_1.useCallback)(() => {
+        activeOverlayRef.current = 'picker';
+        setLoginVisible(false);
+        setGuestVisible(false);
+        setPickerVisible(true);
+    }, []);
+    const closeAll = (0, react_1.useCallback)(() => {
+        activeOverlayRef.current = 'none';
+        setLoginVisible(false);
+        setGuestVisible(false);
+        setPickerVisible(false);
+    }, []);
     (0, react_1.useEffect)(() => {
         let mounted = true;
         (async () => {
@@ -68,65 +93,67 @@ const AuthOverlay = () => {
             if (mounted && cached)
                 setToken(cached);
         })();
-        const loginSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startLogin', () => setLoginVisible(true));
+        const loginSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startLogin', () => {
+            if (activeOverlayRef.current !== 'none')
+                return;
+            openLogin();
+        });
         const pickerSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startMachinePicker', async () => {
+            if (activeOverlayRef.current !== 'none')
+                return;
             const cached = await (0, auth_1.getToken)();
             if (cached)
                 setToken(cached);
             if (cached)
-                setPickerVisible(true);
+                openPicker();
         });
         return () => {
             mounted = false;
             loginSub.remove();
             pickerSub.remove();
         };
-    }, []);
+    }, [openLogin, openPicker]);
     const continueAfterAuth = async (newToken, inviteCode) => {
         setToken(newToken);
         await YaverFeedback_1.YaverFeedback.setAuthToken(newToken);
         const devices = await (0, auth_1.listReachableDevices)(newToken).catch(() => ({ owned: [], shared: [] }));
-        setLoginVisible(false);
         const cleanedInviteCode = (inviteCode ?? '').trim().toUpperCase();
         if (cleanedInviteCode) {
             setPendingInviteCode(cleanedInviteCode);
-            setGuestVisible(true);
+            openGuest();
             return;
         }
         if (devices.owned.length === 0 && devices.shared.length === 0) {
-            setGuestVisible(true);
+            openGuest();
             return;
         }
-        setPickerVisible(true);
+        openPicker();
     };
     const handleLoggedIn = async (newToken, opts) => {
         await continueAfterAuth(newToken, opts?.inviteCode);
     };
     const handleDevicePicked = async (device) => {
         await YaverFeedback_1.YaverFeedback.setPreferredDevice(device.deviceId);
-        setPickerVisible(false);
-        setGuestVisible(false);
+        closeAll();
         // Continue straight into the feedback flow the user originally triggered.
         react_native_1.DeviceEventEmitter.emit('yaverFeedback:startReport');
     };
     return (<>
-      <react_native_1.Modal visible={loginVisible} animationType="slide" presentationStyle="fullScreen" onRequestClose={() => setLoginVisible(false)}>
-        <LoginScreen_1.YaverLoginScreen onLoggedIn={handleLoggedIn} onCancel={() => setLoginVisible(false)} initialInviteCode={pendingInviteCode ?? YaverFeedback_1.YaverFeedback.getConfig()?.guestInviteCode}/>
+      <react_native_1.Modal visible={loginVisible} animationType="slide" presentationStyle="fullScreen" onRequestClose={closeAll}>
+        <LoginScreen_1.YaverLoginScreen onLoggedIn={handleLoggedIn} onCancel={closeAll} initialInviteCode={pendingInviteCode ?? YaverFeedback_1.YaverFeedback.getConfig()?.guestInviteCode}/>
       </react_native_1.Modal>
 
-      <react_native_1.Modal visible={pickerVisible && !!token} animationType="slide" presentationStyle="fullScreen" onRequestClose={() => setPickerVisible(false)}>
-        {token && (<MachinePickerScreen_1.YaverMachinePickerScreen token={token} currentDeviceId={YaverFeedback_1.YaverFeedback.getConfig()?.preferredDeviceId} onPick={handleDevicePicked} onCancel={() => setPickerVisible(false)}/>)}
+      <react_native_1.Modal visible={pickerVisible && !!token} animationType="slide" presentationStyle="fullScreen" onRequestClose={closeAll}>
+        {token && (<MachinePickerScreen_1.YaverMachinePickerScreen token={token} currentDeviceId={YaverFeedback_1.YaverFeedback.getConfig()?.preferredDeviceId} onPick={handleDevicePicked} onCancel={closeAll}/>)}
       </react_native_1.Modal>
 
-      <react_native_1.Modal visible={guestVisible && !!token} animationType="slide" presentationStyle="fullScreen" onRequestClose={() => setGuestVisible(false)}>
+      <react_native_1.Modal visible={guestVisible && !!token} animationType="slide" presentationStyle="fullScreen" onRequestClose={closeAll}>
         {token && (<GuestOnboardingScreen_1.YaverGuestOnboardingScreen token={token} initialInviteCode={pendingInviteCode ?? YaverFeedback_1.YaverFeedback.getConfig()?.guestInviteCode} onContinue={() => {
-                setGuestVisible(false);
                 setPendingInviteCode(null);
-                setPickerVisible(true);
+                openPicker();
             }} onCancel={() => {
-                setGuestVisible(false);
                 setPendingInviteCode(null);
-                setPickerVisible(true);
+                openPicker();
             }}/>)}
       </react_native_1.Modal>
     </>);

package/dist/FeedbackModal.js

@@ -54,6 +54,7 @@ const FeedbackModal = () => {
     // is our guaranteed UI for bringing the icon back — we surface a
     // small "Show quick icon" row when this is true.
     const [quickIconHidden, setQuickIconHidden] = (0, react_1.useState)(false);
+    const [runnerAuthModal, setRunnerAuthModal] = (0, react_1.useState)(null);
     // Vibing-input mode: same expand-on-tap pattern as email login.
     // Tap "Vibing" once → the button reveals an input + Send; that lets
     // the user say WHAT they want to vibe on instead of firing a canned
@@ -666,6 +667,29 @@ const FeedbackModal = () => {
               {/* Screenshot & Fix */}
               <ActionRow label={action === 'capturing' ? 'Working…' : 'Screenshot & Fix'} tint="#22c55e" onPress={handleScreenshotAndFix} disabled={busy} busy={action === 'capturing'}/>
 
+              {/* Remote sign-in buttons — trigger codex/claude device-auth
+                on the selected agent without leaving the app. Opens a
+                small native modal showing the verification URL + 8-char
+                code the user enters in any browser. No API keys. */}
+              <react_native_1.View style={runnerAuthRowStyles.container}>
+                <react_native_1.Pressable onPress={() => setRunnerAuthModal('codex')} disabled={busy} style={({ pressed }) => [
+                runnerAuthRowStyles.button,
+                pressed && runnerAuthRowStyles.buttonPressed,
+                busy && runnerAuthRowStyles.buttonDisabled,
+            ]} accessibilityRole="button" accessibilityLabel="Remote sign-in Codex">
+                  <react_native_1.Text style={runnerAuthRowStyles.buttonLabel}>Remote sign-in</react_native_1.Text>
+                  <react_native_1.Text style={runnerAuthRowStyles.buttonName}>Codex</react_native_1.Text>
+                </react_native_1.Pressable>
+                <react_native_1.Pressable onPress={() => setRunnerAuthModal('claude')} disabled={busy} style={({ pressed }) => [
+                runnerAuthRowStyles.button,
+                pressed && runnerAuthRowStyles.buttonPressed,
+                busy && runnerAuthRowStyles.buttonDisabled,
+            ]} accessibilityRole="button" accessibilityLabel="Remote sign-in Claude">
+                  <react_native_1.Text style={runnerAuthRowStyles.buttonLabel}>Remote sign-in</react_native_1.Text>
+                  <react_native_1.Text style={runnerAuthRowStyles.buttonName}>Claude</react_native_1.Text>
+                </react_native_1.Pressable>
+              </react_native_1.View>
+
               {progress !== null && (<react_native_1.View style={styles.progressTrack}>
                   <react_native_1.View style={[
                     styles.progressFill,
@@ -686,6 +710,7 @@ const FeedbackModal = () => {
             </react_native_1.KeyboardAvoidingView>
           </react_native_1.Pressable>
         </react_native_1.Modal>)}
+      {runnerAuthModal ? (<RunnerAuthNativeModal runner={runnerAuthModal} onClose={() => setRunnerAuthModal(null)}/>) : null}
     </>);
 };
 exports.FeedbackModal = FeedbackModal;
@@ -1014,3 +1039,259 @@ const styles = react_native_1.StyleSheet.create({
         opacity: 0.7,
     },
 });
+/**
+ * Minimal native modal for the codex/claude remote sign-in flow. Opens
+ * the device-auth session on the connected agent, surfaces the
+ * verification URL + one-time code, polls every 1.5 s, and turns green
+ * the moment the CLI writes its auth.json. No API keys, no SSH.
+ */
+const RunnerAuthNativeModal = ({ runner, onClose }) => {
+    const [session, setSession] = (0, react_1.useState)(null);
+    const [startError, setStartError] = (0, react_1.useState)(null);
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const startedRef = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        if (startedRef.current)
+            return;
+        startedRef.current = true;
+        (async () => {
+            try {
+                const s = await YaverFeedback_1.YaverFeedback.startRunnerBrowserAuth(runner);
+                setSession(s);
+            }
+            catch (err) {
+                setStartError(err instanceof Error ? err.message : String(err));
+            }
+        })();
+    }, [runner]);
+    (0, react_1.useEffect)(() => {
+        if (!session)
+            return;
+        if (['completed', 'failed', 'cancelled'].includes(session.status))
+            return;
+        const iv = setInterval(async () => {
+            try {
+                const s = await YaverFeedback_1.YaverFeedback.getRunnerBrowserAuthStatus(session.id);
+                setSession(s);
+            }
+            catch {
+                // keep polling
+            }
+        }, 1500);
+        return () => clearInterval(iv);
+    }, [session?.id, session?.status]);
+    const terminal = session && ['completed', 'failed', 'cancelled'].includes(session.status);
+    const runnerLabel = runner === 'codex' ? 'OpenAI Codex' : runner === 'claude' ? 'Claude Code' : runner;
+    const handleClose = () => {
+        if (session && !terminal) {
+            YaverFeedback_1.YaverFeedback.cancelRunnerBrowserAuth(session.id).catch(() => { });
+        }
+        onClose();
+    };
+    const copyCode = () => {
+        if (!session?.code)
+            return;
+        try {
+            // Avoid a hard Clipboard dep — host app can polyfill.
+            const Clipboard = require('react-native').Clipboard;
+            if (Clipboard?.setString) {
+                Clipboard.setString(session.code);
+                setCopied(true);
+                setTimeout(() => setCopied(false), 1500);
+            }
+        }
+        catch {
+            // best-effort — code is visible on screen regardless
+        }
+    };
+    const openUrl = () => {
+        if (!session?.openUrl)
+            return;
+        try {
+            const { Linking } = require('react-native');
+            Linking.openURL(session.openUrl).catch(() => { });
+        }
+        catch {
+            /* ignore */
+        }
+    };
+    return (<react_native_1.Modal visible={true} transparent animationType="fade" onRequestClose={handleClose}>
+      <react_native_1.View style={runnerAuthModalStyles.overlay}>
+        <react_native_1.View style={runnerAuthModalStyles.card}>
+          <react_native_1.View style={runnerAuthModalStyles.header}>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={runnerAuthModalStyles.title}>Sign in to {runnerLabel}</react_native_1.Text>
+              <react_native_1.Text style={runnerAuthModalStyles.subtitle}>
+                Opens a one-time URL + code. Enter it in any browser.
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Pressable onPress={handleClose} hitSlop={10}>
+              <react_native_1.Text style={runnerAuthModalStyles.close}>×</react_native_1.Text>
+            </react_native_1.Pressable>
+          </react_native_1.View>
+
+          {startError ? (<react_native_1.View style={runnerAuthModalStyles.errorBox}>
+              <react_native_1.Text style={runnerAuthModalStyles.errorTitle}>Couldn't start</react_native_1.Text>
+              <react_native_1.Text style={runnerAuthModalStyles.errorBody}>{startError}</react_native_1.Text>
+            </react_native_1.View>) : !session ? (<react_native_1.Text style={runnerAuthModalStyles.dim}>
+              Starting the sign-in flow on the remote machine…
+            </react_native_1.Text>) : session.status === 'completed' ? (<react_native_1.View style={runnerAuthModalStyles.successBox}>
+              <react_native_1.Text style={runnerAuthModalStyles.successTitle}>✓ Signed in</react_native_1.Text>
+              <react_native_1.Text style={runnerAuthModalStyles.successBody}>
+                {session.detail || 'Auth stored on the remote machine.'}
+              </react_native_1.Text>
+            </react_native_1.View>) : session.status === 'failed' || session.status === 'cancelled' ? (<react_native_1.View style={runnerAuthModalStyles.errorBox}>
+              <react_native_1.Text style={runnerAuthModalStyles.errorTitle}>
+                {session.status === 'cancelled' ? 'Cancelled' : 'Failed'}
+              </react_native_1.Text>
+              <react_native_1.Text style={runnerAuthModalStyles.errorBody}>
+                {session.error || session.detail || 'The CLI exited before sign-in completed.'}
+              </react_native_1.Text>
+            </react_native_1.View>) : (<react_native_1.View>
+              {session.openUrl ? (<react_native_1.Pressable onPress={openUrl} style={runnerAuthModalStyles.urlBox}>
+                  <react_native_1.Text style={runnerAuthModalStyles.urlText} numberOfLines={2}>
+                    ↗ {session.openUrl}
+                  </react_native_1.Text>
+                </react_native_1.Pressable>) : (<react_native_1.Text style={runnerAuthModalStyles.dim}>
+                  Waiting for verification URL from the remote CLI…
+                </react_native_1.Text>)}
+              {session.code ? (<react_native_1.View style={{ marginTop: 12 }}>
+                  <react_native_1.Text style={runnerAuthModalStyles.codeLabel}>ENTER THIS CODE</react_native_1.Text>
+                  <react_native_1.Pressable onPress={copyCode} style={runnerAuthModalStyles.codeBox}>
+                    <react_native_1.Text style={runnerAuthModalStyles.codeText}>{session.code}</react_native_1.Text>
+                    <react_native_1.Text style={runnerAuthModalStyles.codeHint}>
+                      {copied ? 'copied' : 'tap to copy'}
+                    </react_native_1.Text>
+                  </react_native_1.Pressable>
+                </react_native_1.View>) : null}
+              <react_native_1.Text style={runnerAuthModalStyles.phishingHint}>
+                Device codes are a common phishing target. Never share this code. This dialog
+                turns green automatically once sign-in completes.
+              </react_native_1.Text>
+            </react_native_1.View>)}
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+const runnerAuthRowStyles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        gap: 8,
+        marginTop: 8,
+        flexWrap: 'wrap',
+    },
+    button: {
+        flexGrow: 1,
+        flexBasis: 0,
+        minWidth: 120,
+        paddingHorizontal: 12,
+        paddingVertical: 10,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(148,163,184,0.22)',
+        backgroundColor: 'rgba(15,23,42,0.6)',
+    },
+    buttonPressed: { opacity: 0.7 },
+    buttonDisabled: { opacity: 0.4 },
+    buttonLabel: {
+        fontSize: 10,
+        color: '#94a3b8',
+        textTransform: 'uppercase',
+        letterSpacing: 0.8,
+    },
+    buttonName: {
+        marginTop: 2,
+        fontSize: 14,
+        fontWeight: '600',
+        color: '#f1f5f9',
+    },
+});
+const runnerAuthModalStyles = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: 'rgba(2,6,23,0.75)',
+        padding: 16,
+    },
+    card: {
+        width: '100%',
+        maxWidth: 420,
+        backgroundColor: '#0f172a',
+        borderRadius: 14,
+        borderWidth: 1,
+        borderColor: 'rgba(148,163,184,0.18)',
+        padding: 18,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+        marginBottom: 12,
+    },
+    title: { color: '#f1f5f9', fontSize: 16, fontWeight: '600' },
+    subtitle: { color: '#94a3b8', fontSize: 11, marginTop: 2 },
+    close: { color: '#94a3b8', fontSize: 22, lineHeight: 22, paddingHorizontal: 4 },
+    dim: {
+        color: '#94a3b8',
+        fontSize: 12,
+        padding: 12,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(148,163,184,0.2)',
+        backgroundColor: 'rgba(15,23,42,0.6)',
+    },
+    errorBox: {
+        padding: 12,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(248,113,113,0.35)',
+        backgroundColor: 'rgba(248,113,113,0.1)',
+    },
+    errorTitle: { color: '#fca5a5', fontWeight: '600', marginBottom: 4, fontSize: 13 },
+    errorBody: { color: '#fca5a5', fontSize: 12 },
+    successBox: {
+        padding: 14,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(34,197,94,0.35)',
+        backgroundColor: 'rgba(34,197,94,0.1)',
+    },
+    successTitle: { color: '#4ade80', fontSize: 14, fontWeight: '600', marginBottom: 4 },
+    successBody: { color: '#86efac', fontSize: 12 },
+    urlBox: {
+        padding: 12,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(99,102,241,0.35)',
+        backgroundColor: 'rgba(99,102,241,0.1)',
+    },
+    urlText: { color: '#c7d2fe', fontSize: 13 },
+    codeLabel: {
+        fontSize: 10,
+        fontWeight: '600',
+        color: '#94a3b8',
+        letterSpacing: 0.8,
+        marginBottom: 4,
+    },
+    codeBox: {
+        padding: 14,
+        borderRadius: 10,
+        borderWidth: 1,
+        borderColor: 'rgba(148,163,184,0.22)',
+        backgroundColor: 'rgba(15,23,42,0.8)',
+        alignItems: 'center',
+    },
+    codeText: {
+        color: '#f1f5f9',
+        fontSize: 22,
+        letterSpacing: 6,
+        fontFamily: 'Menlo',
+    },
+    codeHint: { color: '#64748b', fontSize: 10, marginTop: 4, textTransform: 'uppercase' },
+    phishingHint: {
+        color: '#475569',
+        fontSize: 10,
+        marginTop: 12,
+        lineHeight: 14,
+    },
+});

package/dist/P2PClient.d.ts

@@ -1,4 +1,4 @@
-import { FeedbackBundle, TestSession, VoiceCapability } from './types';
+import { FeedbackBundle, RunnerBrowserAuthSession, TestSession, VoiceCapability } from './types';
 export interface FeedbackEvent {
     type: string;
     timestamp: string;
@@ -21,11 +21,32 @@ export interface ReloadAck {
 export declare class P2PClient {
     private baseUrl;
     private authToken;
-    constructor(baseUrl: string, authToken: string);
+    /**
+     * Shared relay password. Required when baseUrl points through the
+     * Yaver managed relay (e.g. https://public.yaver.io/d/<deviceId>) —
+     * the relay rejects unauthenticated requests with 401. Attached as
+     * X-Relay-Password on every agent request.
+     */
+    private relayPassword;
+    constructor(baseUrl: string, authToken: string, relayPassword?: string);
     /** Update the base URL (e.g. after re-discovery). */
     setBaseUrl(url: string): void;
     /** Update the auth token. */
     setAuthToken(token: string): void;
+    /** Update the relay password (used for managed-relay baseUrls). */
+    setRelayPassword(password: string): void;
+    /** Merge in Authorization + (optional) X-Relay-Password on top of a header block. */
+    private authHeaders;
+    /**
+     * Start a remote browser-style sign-in for a runner (codex --device-auth
+     * / claude auth login --console). Returns a session id; callers poll
+     * getRunnerBrowserAuthStatus to surface the verification URL + one-time
+     * code. No API keys involved — the CLI writes its own auth.json once
+     * the user completes the flow in any browser.
+     */
+    startRunnerBrowserAuth(runner: string): Promise<RunnerBrowserAuthSession>;
+    getRunnerBrowserAuthStatus(sessionId: string): Promise<RunnerBrowserAuthSession>;
+    cancelRunnerBrowserAuth(sessionId: string): Promise<void>;
     /** Health check — returns true if the agent is reachable. */
     health(): Promise<boolean>;
     /** Get agent info (hostname, version, platform). */

package/dist/P2PClient.js

@@ -92,9 +92,10 @@ function friendlyReloadError(status, body) {
  * support for streaming feedback, listing builds, and triggering builds.
  */
 class P2PClient {
-    constructor(baseUrl, authToken) {
+    constructor(baseUrl, authToken, relayPassword = '') {
         this.baseUrl = baseUrl.replace(/\/$/, '');
         this.authToken = authToken;
+        this.relayPassword = relayPassword;
     }
     /** Update the base URL (e.g. after re-discovery). */
     setBaseUrl(url) {
@@ -104,6 +105,56 @@ class P2PClient {
     setAuthToken(token) {
         this.authToken = token;
     }
+    /** Update the relay password (used for managed-relay baseUrls). */
+    setRelayPassword(password) {
+        this.relayPassword = password;
+    }
+    /** Merge in Authorization + (optional) X-Relay-Password on top of a header block. */
+    authHeaders(extra = {}) {
+        const h = { ...extra };
+        if (this.authToken)
+            h.Authorization = `Bearer ${this.authToken}`;
+        if (this.relayPassword)
+            h['X-Relay-Password'] = this.relayPassword;
+        return h;
+    }
+    /**
+     * Start a remote browser-style sign-in for a runner (codex --device-auth
+     * / claude auth login --console). Returns a session id; callers poll
+     * getRunnerBrowserAuthStatus to surface the verification URL + one-time
+     * code. No API keys involved — the CLI writes its own auth.json once
+     * the user completes the flow in any browser.
+     */
+    async startRunnerBrowserAuth(runner) {
+        const resp = await fetch(`${this.baseUrl}/runner-auth/browser/start`, {
+            method: 'POST',
+            headers: this.authHeaders({ 'Content-Type': 'application/json' }),
+            body: JSON.stringify({ runner }),
+        });
+        if (!resp.ok) {
+            const text = await resp.text().catch(() => '');
+            throw new Error(`startRunnerBrowserAuth(${runner}) HTTP ${resp.status}: ${text}`);
+        }
+        const data = await resp.json();
+        return data.session;
+    }
+    async getRunnerBrowserAuthStatus(sessionId) {
+        const url = `${this.baseUrl}/runner-auth/browser/status?id=${encodeURIComponent(sessionId)}`;
+        const resp = await fetch(url, { headers: this.authHeaders() });
+        if (!resp.ok) {
+            const text = await resp.text().catch(() => '');
+            throw new Error(`getRunnerBrowserAuthStatus HTTP ${resp.status}: ${text}`);
+        }
+        const data = await resp.json();
+        return data.session;
+    }
+    async cancelRunnerBrowserAuth(sessionId) {
+        const url = `${this.baseUrl}/runner-auth/browser/cancel?id=${encodeURIComponent(sessionId)}`;
+        try {
+            await fetch(url, { method: 'POST', headers: this.authHeaders() });
+        }
+        catch { /* best-effort */ }
+    }
     /** Health check — returns true if the agent is reachable. */
     async health() {
         try {
@@ -563,9 +614,7 @@ class P2PClient {
     async request(method, path) {
         const response = await fetch(`${this.baseUrl}${path}`, {
             method,
-            headers: {
-                Authorization: `Bearer ${this.authToken}`,
-            },
+            headers: this.authHeaders(),
         });
         if (!response.ok) {
             const text = await response.text().catch(() => '');

package/dist/QuickActionIcon.js

@@ -115,6 +115,7 @@ const QuickActionIcon = ({ color: colorProp, backgroundColor: backgroundColorPro
     const [shakenThisSession, setShakenThisSession] = (0, react_1.useState)(false);
     const [menuOpen, setMenuOpen] = (0, react_1.useState)(false);
     const [hostSuppressed] = (0, react_1.useState)(() => isRunningInsideYaverHost());
+    const [launching, setLaunching] = (0, react_1.useState)(false);
     // Load the persisted disable flag once on mount. Until it resolves we
     // render nothing — a one-frame flash of the icon before hiding would
     // be worse than a tiny delayed appearance.
@@ -162,6 +163,24 @@ const QuickActionIcon = ({ color: colorProp, backgroundColor: backgroundColorPro
             colorSub.remove();
         };
     }, []);
+    (0, react_1.useEffect)(() => {
+        const launchSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:reportLaunch', (event) => {
+            if (event?.state === 'starting') {
+                setLaunching(true);
+                return;
+            }
+            setLaunching(false);
+        });
+        const reportSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startReport', () => setLaunching(false));
+        const loginSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startLogin', () => setLaunching(false));
+        const pickerSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startMachinePicker', () => setLaunching(false));
+        return () => {
+            launchSub.remove();
+            reportSub.remove();
+            loginSub.remove();
+            pickerSub.remove();
+        };
+    }, []);
     const panResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
         onStartShouldSetPanResponder: () => true,
         onMoveShouldSetPanResponder: (_, g) => Math.abs(g.dx) > 3 || Math.abs(g.dy) > 3,
@@ -195,9 +214,11 @@ const QuickActionIcon = ({ color: colorProp, backgroundColor: backgroundColorPro
         },
     })).current;
     const openFeedback = (0, react_1.useCallback)(() => {
+        if (launching)
+            return;
         setMenuOpen(false);
         void YaverFeedback_1.YaverFeedback.startReport();
-    }, []);
+    }, [launching]);
     const hideForever = (0, react_1.useCallback)(() => {
         setMenuOpen(false);
         setUserDisabled(true);
@@ -233,10 +254,14 @@ const QuickActionIcon = ({ color: colorProp, backgroundColor: backgroundColorPro
                 didDrag.current = false;
                 return;
             }
+            if (launching)
+                return;
             openFeedback();
         }} onLongPress={() => {
             if (didDrag.current)
                 return;
+            if (launching)
+                return;
             setMenuOpen((m) => !m);
         }} delayLongPress={LONG_PRESS_MS} hitSlop={6} accessibilityRole="button" accessibilityLabel="Open Yaver feedback" style={({ pressed }) => [
             styles.icon,
@@ -247,7 +272,7 @@ const QuickActionIcon = ({ color: colorProp, backgroundColor: backgroundColorPro
                 backgroundColor: presetColors?.backgroundColor ?? backgroundColor,
                 borderColor: presetColors?.borderColor ?? borderColor,
                 shadowColor: presetColors?.shadowColor ?? shadowColor,
-                opacity: pressed ? 0.85 : 1,
+                opacity: launching ? 0.62 : pressed ? 0.85 : 1,
             },
         ]}>
           <react_native_1.Text style={[

package/dist/YaverFeedback.d.ts

@@ -65,6 +65,19 @@ export declare class YaverFeedback {
     static setPreferredDevice(deviceId: string): Promise<void>;
     /** Resolve the currently selected remote machine from the authenticated device list. */
     static getSelectedRemoteDevice(): Promise<import("./auth").RemoteDevice | null>;
+    /**
+     * Trigger remote device-auth for a CLI runner on the selected agent
+     * (codex login --device-auth / claude auth login --console). Returns
+     * the session so the host UI can render the verification URL + code.
+     *
+     * RN UI layer owns the modal (see FeedbackModal's runner sign-in
+     * buttons). This method just proxies into P2PClient — no browser
+     * launch, no API keys, works through the relay with an SDK token
+     * that carries the runner-auth scope.
+     */
+    static startRunnerBrowserAuth(runner: string): Promise<import('./types').RunnerBrowserAuthSession>;
+    static getRunnerBrowserAuthStatus(sessionId: string): Promise<import('./types').RunnerBrowserAuthSession>;
+    static cancelRunnerBrowserAuth(sessionId: string): Promise<void>;
     /**
      * Sign out: clear cached token + device, tear down the P2P client. The
      * SDK stays enabled; the next feedback trigger will re-prompt for login.