yaver-feedback-react-native 0.8.4 → 0.8.7

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
@@ -809,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
@@ -839,6 +875,12 @@ export const FeedbackModal: React.FC = () => {
           </Pressable>
         </Modal>
       )}
+      {runnerAuthModal ? (
+        <RunnerAuthNativeModal
+          runner={runnerAuthModal}
+          onClose={() => setRunnerAuthModal(null)}
+        />
+      ) : null}
     </>
   );
 };
@@ -1195,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/P2PClient.ts

@@ -1,5 +1,13 @@
 import { Platform } from 'react-native';
-import { FeedbackBundle, TestSession, VoiceCapability } from './types';
+import {
+  CapabilitySnapshot,
+  FeedbackBundle,
+  IncidentEvent,
+  OperationState,
+  RunnerBrowserAuthSession,
+  TestSession,
+  VoiceCapability,
+} from './types';
 
 export interface FeedbackEvent {
   type: string;
@@ -117,10 +125,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 +149,117 @@ 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 */ }
+  }
+
+  async capabilitySnapshot(): Promise<CapabilitySnapshot | null> {
+    try {
+      const resp = await fetch(`${this.baseUrl}/capabilities/snapshot`, { headers: this.authHeaders() });
+      if (!resp.ok) return null;
+      const data = await resp.json().catch(() => ({} as Record<string, unknown>));
+      return (data.snapshot ?? null) as CapabilitySnapshot | null;
+    } catch {
+      return null;
+    }
+  }
+
+  async incidents(opts: {
+    category?: string;
+    severity?: string;
+    code?: string;
+    deviceId?: string;
+    projectPath?: string;
+    includeResolved?: boolean;
+    limit?: number;
+  } = {}): Promise<IncidentEvent[]> {
+    try {
+      const url = new URL(`${this.baseUrl}/incidents`);
+      if (opts.category) url.searchParams.set('category', opts.category);
+      if (opts.severity) url.searchParams.set('severity', opts.severity);
+      if (opts.code) url.searchParams.set('code', opts.code);
+      if (opts.deviceId) url.searchParams.set('device', opts.deviceId);
+      if (opts.projectPath) url.searchParams.set('projectPath', opts.projectPath);
+      if (opts.includeResolved) url.searchParams.set('includeResolved', '1');
+      if (typeof opts.limit === 'number') url.searchParams.set('limit', String(opts.limit));
+      const resp = await fetch(url.toString(), { headers: this.authHeaders() });
+      if (!resp.ok) return [];
+      const data = await resp.json().catch(() => ({} as Record<string, unknown>));
+      return Array.isArray(data.incidents) ? (data.incidents as IncidentEvent[]) : [];
+    } catch {
+      return [];
+    }
+  }
+
+  async operations(opts: {
+    kind?: string;
+    status?: string;
+    deviceId?: string;
+    projectPath?: string;
+    limit?: number;
+  } = {}): Promise<OperationState[]> {
+    try {
+      const url = new URL(`${this.baseUrl}/operations`);
+      if (opts.kind) url.searchParams.set('kind', opts.kind);
+      if (opts.status) url.searchParams.set('status', opts.status);
+      if (opts.deviceId) url.searchParams.set('device', opts.deviceId);
+      if (opts.projectPath) url.searchParams.set('projectPath', opts.projectPath);
+      if (typeof opts.limit === 'number') url.searchParams.set('limit', String(opts.limit));
+      const resp = await fetch(url.toString(), { headers: this.authHeaders() });
+      if (!resp.ok) return [];
+      const data = await resp.json().catch(() => ({} as Record<string, unknown>));
+      return Array.isArray(data.operations) ? (data.operations as OperationState[]) : [];
+    } catch {
+      return [];
+    }
+  }
+
   /** Health check — returns true if the agent is reachable. */
   async health(): Promise<boolean> {
     try {
@@ -682,9 +809,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) {

package/src/QuickActionIcon.tsx

@@ -133,6 +133,7 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
   const [shakenThisSession, setShakenThisSession] = useState(false);
   const [menuOpen, setMenuOpen] = useState(false);
   const [hostSuppressed] = useState<boolean>(() => isRunningInsideYaverHost());
+  const [launching, setLaunching] = 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
@@ -194,6 +195,37 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    const launchSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:reportLaunch',
+      (event?: { state?: string }) => {
+        if (event?.state === 'starting') {
+          setLaunching(true);
+          return;
+        }
+        setLaunching(false);
+      },
+    );
+    const reportSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:startReport',
+      () => setLaunching(false),
+    );
+    const loginSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:startLogin',
+      () => setLaunching(false),
+    );
+    const pickerSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:startMachinePicker',
+      () => setLaunching(false),
+    );
+    return () => {
+      launchSub.remove();
+      reportSub.remove();
+      loginSub.remove();
+      pickerSub.remove();
+    };
+  }, []);
+
   const panResponder = useRef(
     PanResponder.create({
       onStartShouldSetPanResponder: () => true,
@@ -231,9 +263,10 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
   ).current;
 
   const openFeedback = useCallback(() => {
+    if (launching) return;
     setMenuOpen(false);
     void YaverFeedback.startReport();
-  }, []);
+  }, [launching]);
 
   const hideForever = useCallback(() => {
     setMenuOpen(false);
@@ -275,10 +308,12 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
               didDrag.current = false;
               return;
             }
+            if (launching) return;
             openFeedback();
           }}
           onLongPress={() => {
             if (didDrag.current) return;
+            if (launching) return;
             setMenuOpen((m) => !m);
           }}
           delayLongPress={LONG_PRESS_MS}
@@ -294,7 +329,7 @@ export const QuickActionIcon: React.FC<QuickActionIconProps> = ({
               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,
             },
           ]}
         >