yaver-feedback-react-native 0.8.3 → 0.8.6

package/src/FeedbackModal.tsx

@@ -72,6 +72,7 @@ export const FeedbackModal: React.FC = () => {
   // is our guaranteed UI for bringing the icon back — we surface a
   // small "Show quick icon" row when this is true.
   const [quickIconHidden, setQuickIconHidden] = useState(false);
+  const [runnerAuthModal, setRunnerAuthModal] = useState<string | null>(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
@@ -82,6 +83,7 @@ export const FeedbackModal: React.FC = () => {
   const [lastVibeTaskId, setLastVibeTaskId] = useState<string | null>(null);
   const [quickIconColorPreset, setQuickIconColorPreset] =
     useState<QuickIconColorPreset | null>(null);
+  const [keyboardInset, setKeyboardInset] = useState(0);
   const [machineCard, setMachineCard] = useState<MachineCardState>({
     device: null,
     reachable: null,
@@ -256,6 +258,26 @@ export const FeedbackModal: React.FC = () => {
     return () => clearInterval(interval);
   }, [loadSelectedMachine, visible]);
 
+  useEffect(() => {
+    if (!visible) {
+      setKeyboardInset(0);
+      return;
+    }
+
+    const showEvent = Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow';
+    const hideEvent = Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide';
+    const showSub = Keyboard.addListener(showEvent, (event) => {
+      setKeyboardInset(event.endCoordinates?.height ?? 0);
+    });
+    const hideSub = Keyboard.addListener(hideEvent, () => {
+      setKeyboardInset(0);
+    });
+    return () => {
+      showSub.remove();
+      hideSub.remove();
+    };
+  }, [visible]);
+
   const closeSoon = useCallback((delayMs = 1200) => {
     setTimeout(() => {
       if (mountedRef.current) setVisible(false);
@@ -569,6 +591,7 @@ export const FeedbackModal: React.FC = () => {
           <Pressable style={styles.overlay} onPress={handleClose}>
             <KeyboardAvoidingView
               behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+              keyboardVerticalOffset={Platform.OS === 'ios' ? 12 : 0}
               style={styles.kbAvoider}
               pointerEvents="box-none"
             >
@@ -581,8 +604,14 @@ export const FeedbackModal: React.FC = () => {
             >
               <ScrollView
                 style={styles.scroll}
-                contentContainerStyle={styles.scrollContent}
+                contentContainerStyle={[
+                  styles.scrollContent,
+                  showVibeInput && keyboardInset > 0
+                    ? { paddingBottom: 8 + keyboardInset }
+                    : null,
+                ]}
                 keyboardShouldPersistTaps="handled"
+                keyboardDismissMode={Platform.OS === 'ios' ? 'interactive' : 'on-drag'}
               >
               <View style={styles.header}>
                 <Text style={styles.title}>Send Feedback</Text>
@@ -781,6 +810,41 @@ export const FeedbackModal: React.FC = () => {
                 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. */}
+              <View style={runnerAuthRowStyles.container}>
+                <Pressable
+                  onPress={() => setRunnerAuthModal('codex')}
+                  disabled={busy}
+                  style={({ pressed }) => [
+                    runnerAuthRowStyles.button,
+                    pressed && runnerAuthRowStyles.buttonPressed,
+                    busy && runnerAuthRowStyles.buttonDisabled,
+                  ]}
+                  accessibilityRole="button"
+                  accessibilityLabel="Remote sign-in Codex"
+                >
+                  <Text style={runnerAuthRowStyles.buttonLabel}>Remote sign-in</Text>
+                  <Text style={runnerAuthRowStyles.buttonName}>Codex</Text>
+                </Pressable>
+                <Pressable
+                  onPress={() => setRunnerAuthModal('claude')}
+                  disabled={busy}
+                  style={({ pressed }) => [
+                    runnerAuthRowStyles.button,
+                    pressed && runnerAuthRowStyles.buttonPressed,
+                    busy && runnerAuthRowStyles.buttonDisabled,
+                  ]}
+                  accessibilityRole="button"
+                  accessibilityLabel="Remote sign-in Claude"
+                >
+                  <Text style={runnerAuthRowStyles.buttonLabel}>Remote sign-in</Text>
+                  <Text style={runnerAuthRowStyles.buttonName}>Claude</Text>
+                </Pressable>
+              </View>
+
               {progress !== null && (
                 <View style={styles.progressTrack}>
                   <View
@@ -811,6 +875,12 @@ export const FeedbackModal: React.FC = () => {
           </Pressable>
         </Modal>
       )}
+      {runnerAuthModal ? (
+        <RunnerAuthNativeModal
+          runner={runnerAuthModal}
+          onClose={() => setRunnerAuthModal(null)}
+        />
+      ) : null}
     </>
   );
 };
@@ -1167,3 +1237,281 @@ const styles = 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: React.FC<{
+  runner: string;
+  onClose: () => void;
+}> = ({ runner, onClose }) => {
+  const [session, setSession] = useState<import('./types').RunnerBrowserAuthSession | null>(null);
+  const [startError, setStartError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+  const startedRef = useRef(false);
+
+  useEffect(() => {
+    if (startedRef.current) return;
+    startedRef.current = true;
+    (async () => {
+      try {
+        const s = await YaverFeedback.startRunnerBrowserAuth(runner);
+        setSession(s);
+      } catch (err) {
+        setStartError(err instanceof Error ? err.message : String(err));
+      }
+    })();
+  }, [runner]);
+
+  useEffect(() => {
+    if (!session) return;
+    if (['completed', 'failed', 'cancelled'].includes(session.status)) return;
+    const iv = setInterval(async () => {
+      try {
+        const s = await 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.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 (
+    <Modal visible={true} transparent animationType="fade" onRequestClose={handleClose}>
+      <View style={runnerAuthModalStyles.overlay}>
+        <View style={runnerAuthModalStyles.card}>
+          <View style={runnerAuthModalStyles.header}>
+            <View style={{ flex: 1 }}>
+              <Text style={runnerAuthModalStyles.title}>Sign in to {runnerLabel}</Text>
+              <Text style={runnerAuthModalStyles.subtitle}>
+                Opens a one-time URL + code. Enter it in any browser.
+              </Text>
+            </View>
+            <Pressable onPress={handleClose} hitSlop={10}>
+              <Text style={runnerAuthModalStyles.close}>×</Text>
+            </Pressable>
+          </View>
+
+          {startError ? (
+            <View style={runnerAuthModalStyles.errorBox}>
+              <Text style={runnerAuthModalStyles.errorTitle}>Couldn't start</Text>
+              <Text style={runnerAuthModalStyles.errorBody}>{startError}</Text>
+            </View>
+          ) : !session ? (
+            <Text style={runnerAuthModalStyles.dim}>
+              Starting the sign-in flow on the remote machine…
+            </Text>
+          ) : session.status === 'completed' ? (
+            <View style={runnerAuthModalStyles.successBox}>
+              <Text style={runnerAuthModalStyles.successTitle}>✓ Signed in</Text>
+              <Text style={runnerAuthModalStyles.successBody}>
+                {session.detail || 'Auth stored on the remote machine.'}
+              </Text>
+            </View>
+          ) : session.status === 'failed' || session.status === 'cancelled' ? (
+            <View style={runnerAuthModalStyles.errorBox}>
+              <Text style={runnerAuthModalStyles.errorTitle}>
+                {session.status === 'cancelled' ? 'Cancelled' : 'Failed'}
+              </Text>
+              <Text style={runnerAuthModalStyles.errorBody}>
+                {session.error || session.detail || 'The CLI exited before sign-in completed.'}
+              </Text>
+            </View>
+          ) : (
+            <View>
+              {session.openUrl ? (
+                <Pressable onPress={openUrl} style={runnerAuthModalStyles.urlBox}>
+                  <Text style={runnerAuthModalStyles.urlText} numberOfLines={2}>
+                    ↗ {session.openUrl}
+                  </Text>
+                </Pressable>
+              ) : (
+                <Text style={runnerAuthModalStyles.dim}>
+                  Waiting for verification URL from the remote CLI…
+                </Text>
+              )}
+              {session.code ? (
+                <View style={{ marginTop: 12 }}>
+                  <Text style={runnerAuthModalStyles.codeLabel}>ENTER THIS CODE</Text>
+                  <Pressable onPress={copyCode} style={runnerAuthModalStyles.codeBox}>
+                    <Text style={runnerAuthModalStyles.codeText}>{session.code}</Text>
+                    <Text style={runnerAuthModalStyles.codeHint}>
+                      {copied ? 'copied' : 'tap to copy'}
+                    </Text>
+                  </Pressable>
+                </View>
+              ) : null}
+              <Text style={runnerAuthModalStyles.phishingHint}>
+                Device codes are a common phishing target. Never share this code. This dialog
+                turns green automatically once sign-in completes.
+              </Text>
+            </View>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const runnerAuthRowStyles = 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 = 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/src/LoginScreen.tsx

@@ -236,9 +236,8 @@ export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
           contentContainerStyle={styles.scrollContainer}
           keyboardShouldPersistTaps="handled"
         >
-          <View style={styles.header}>
-            <Text style={styles.logo}>Yaver</Text>
-            <Text style={styles.subtitle}>Sign in to send feedback</Text>
+          <View style={styles.topBar}>
+            <View style={styles.topBarSpacer} />
             {onCancel && (
               <Pressable onPress={onCancel} style={styles.cancel}>
                 <Text style={styles.cancelText}>Cancel</Text>
@@ -246,6 +245,11 @@ export const YaverLoginScreen: React.FC<YaverLoginScreenProps> = ({
             )}
           </View>
 
+          <View style={styles.header}>
+            <Text style={styles.logo}>Yaver</Text>
+            <Text style={styles.subtitle}>Sign in to send feedback</Text>
+          </View>
+
           <View style={styles.buttons}>
             {Platform.OS === 'ios'
               ? renderProvider('apple', 'Continue with Apple', handleApple)
@@ -391,11 +395,21 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24,
     justifyContent: 'center',
   },
+  topBar: {
+    minHeight: 32,
+    marginBottom: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  topBarSpacer: {
+    width: 56,
+  },
   header: { alignItems: 'center', marginBottom: 40 },
   logo: { fontSize: 44, fontWeight: '800', color: '#e0e0e0', letterSpacing: -1 },
   subtitle: { fontSize: 15, color: '#9ca3af', marginTop: 6 },
-  cancel: { position: 'absolute', right: 0, top: 0, padding: 8 },
-  cancelText: { color: '#9ca3af', fontSize: 14 },
+  cancel: { minWidth: 56, alignItems: 'flex-end', paddingVertical: 8 },
+  cancelText: { color: '#9ca3af', fontSize: 14, fontWeight: '500' },
   buttons: { gap: 12 },
   button: {
     backgroundColor: 'rgba(255,255,255,0.06)',

package/src/MachinePickerScreen.tsx

@@ -11,8 +11,10 @@ import {
 } from 'react-native';
 import {
   DeviceList,
+  DeviceReachability,
   RemoteDevice,
   listReachableDevices,
+  probeDeviceReachability,
   saveSelectedDeviceId,
 } from './auth';
 import { PairDeviceModal } from './PairDeviceModal';
@@ -45,6 +47,7 @@ export const YaverMachinePickerScreen: React.FC<YaverMachinePickerProps> = ({
   const [error, setError] = useState<string | null>(null);
   const [list, setList] = useState<DeviceList>({ owned: [], shared: [] });
   const [pairingDevice, setPairingDevice] = useState<RemoteDevice | null>(null);
+  const [reachability, setReachability] = useState<Record<string, DeviceReachability | undefined>>({});
 
   const load = useCallback(async (silent = false) => {
     if (!silent) setLoading(true);
@@ -52,6 +55,25 @@ export const YaverMachinePickerScreen: React.FC<YaverMachinePickerProps> = ({
     try {
       const result = await listReachableDevices(token);
       setList(result);
+      setReachability({});
+      void (async () => {
+        const devices = [...result.owned, ...result.shared];
+        const settled = await Promise.allSettled(
+          devices.map(async (device) => ({
+            deviceId: device.deviceId,
+            result: await probeDeviceReachability(device),
+          })),
+        );
+        setReachability((prev) => {
+          const next = { ...prev };
+          for (const entry of settled) {
+            if (entry.status === 'fulfilled') {
+              next[entry.value.deviceId] = entry.value.result;
+            }
+          }
+          return next;
+        });
+      })();
       if (result.owned.length === 0 && result.shared.length === 0) {
         setError(
           'No machines found yet. If you do not have your own computer, redeem a host invite code first. Otherwise run `yaver auth` + `yaver serve` on your machine.',
@@ -79,12 +101,19 @@ export const YaverMachinePickerScreen: React.FC<YaverMachinePickerProps> = ({
       setPairingDevice(device);
       return;
     }
+    const direct = await probeDeviceReachability(device);
+    if (!direct.reachable && !device.needsAuth) {
+      setError('Selected machine is not responding. Start `yaver serve` on it and try again.');
+      setReachability((prev) => ({ ...prev, [device.deviceId]: direct }));
+      return;
+    }
     await saveSelectedDeviceId(device.deviceId);
     onPick(device);
   };
 
   const renderDevice = (device: RemoteDevice) => {
     const selected = device.deviceId === currentDeviceId;
+    const probe = reachability[device.deviceId];
     // Trust Convex's `isOnline` — the backend already gates it on a
     // fresh 90 s heartbeat (see backend/convex/devices.ts
     // deriveIsOnline). Re-checking on the client produced false
@@ -95,18 +124,28 @@ export const YaverMachinePickerScreen: React.FC<YaverMachinePickerProps> = ({
     // healthy — a separate concern from "can I reach this machine?"
     // Mobile app surfaces runner issues via a separate badge, not
     // this dot. Picker's job is reachability, nothing more.
-    const healthColor = !device.isOnline
-      ? '#ef4444'
-      : device.needsAuth
-        ? '#f59e0b'
-        : '#22c55e';
+    const effectivelyReachable = probe?.reachable === true;
+    const explicitlyOffline = probe?.reachable === false;
+    const healthColor = device.needsAuth
+      ? '#f59e0b'
+      : effectivelyReachable
+        ? '#22c55e'
+        : explicitlyOffline || !device.isOnline
+          ? '#ef4444'
+          : '#22c55e';
     // Derive a single short status phrase the user can act on.
     let statusLine = device.platform;
-    if (!device.isOnline) {
+    if (probe === undefined) {
+      statusLine = 'Checking connection…';
+    } else if (!device.isOnline && effectivelyReachable) {
+      statusLine = 'Reachable now — waiting for cloud status to refresh';
+    } else if (!device.isOnline) {
       statusLine = 'Offline — start `yaver serve` on the Mac';
     } else if (device.needsAuth) {
       statusLine =
         'Needs pairing — open the Yaver app to adopt this machine';
+    } else if (explicitlyOffline) {
+      statusLine = 'Agent not responding on this machine';
     } else if (device.runnerDown) {
       statusLine = 'Runner down — restart the coding agent on the Mac';
     } else {

package/src/P2PClient.ts

@@ -1,5 +1,5 @@
 import { Platform } from 'react-native';
-import { FeedbackBundle, TestSession, VoiceCapability } from './types';
+import { FeedbackBundle, RunnerBrowserAuthSession, TestSession, VoiceCapability } from './types';
 
 export interface FeedbackEvent {
   type: string;
@@ -117,10 +117,18 @@ function friendlyReloadError(status: number, body: string): string {
 export class P2PClient {
   private baseUrl: string;
   private 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: string;
 
-  constructor(baseUrl: string, authToken: string) {
+  constructor(baseUrl: string, authToken: string, relayPassword: string = '') {
     this.baseUrl = baseUrl.replace(/\/$/, '');
     this.authToken = authToken;
+    this.relayPassword = relayPassword;
   }
 
   /** Update the base URL (e.g. after re-discovery). */
@@ -133,6 +141,56 @@ export class P2PClient {
     this.authToken = token;
   }
 
+  /** Update the relay password (used for managed-relay baseUrls). */
+  setRelayPassword(password: string): void {
+    this.relayPassword = password;
+  }
+
+  /** Merge in Authorization + (optional) X-Relay-Password on top of a header block. */
+  private authHeaders(extra: Record<string, string> = {}): Record<string, string> {
+    const h: Record<string, string> = { ...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: string): Promise<RunnerBrowserAuthSession> {
+    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 as RunnerBrowserAuthSession;
+  }
+
+  async getRunnerBrowserAuthStatus(sessionId: string): Promise<RunnerBrowserAuthSession> {
+    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 as RunnerBrowserAuthSession;
+  }
+
+  async cancelRunnerBrowserAuth(sessionId: string): Promise<void> {
+    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(): Promise<boolean> {
     try {
@@ -682,9 +740,7 @@ export class P2PClient {
   private async request(method: string, path: string): Promise<Response> {
     const response = await fetch(`${this.baseUrl}${path}`, {
       method,
-      headers: {
-        Authorization: `Bearer ${this.authToken}`,
-      },
+      headers: this.authHeaders(),
     });
 
     if (!response.ok) {