yaver-feedback-react-native 0.8.13 → 0.9.2

package/src/FeedbackModal.tsx

@@ -25,15 +25,28 @@ import {
   // stopVideoRecording,
 } from './capture';
 import { uploadFeedback } from './upload';
-import { DeviceInfo, FeedbackBundle } from './types';
+import { resolveReportIdentity } from './P2PClient';
+import {
+  DeviceInfo,
+  FeedbackBundle,
+  OpenCodeConfigSummary,
+  OpenCodeProviderSummary,
+  RunnerAuthStatusRow,
+} from './types';
 import { AuthOverlay } from './AuthOverlay';
 import { QuickActionIcon } from './QuickActionIcon';
 import { VibeChatScreen } from './VibeChatScreen';
 import { DeployPanel } from './DeployPanel';
 import { listReachableDevices, RemoteDevice } from './auth';
+import { reloadActions } from './reloadActions';
+import type { DevServerSnapshot, ReloadAction } from './reloadActions';
 import {
   QUICK_ICON_COLOR_PRESETS,
   QuickIconColorPreset,
+  getPreferredModel,
+  getPreferredRunner,
+  setPreferredModel,
+  setPreferredRunner,
 } from './preferences';
 
 /**
@@ -64,6 +77,111 @@ type MachineCardState = {
   detail: string;
 };
 
+type RunnerTone = 'ok' | 'warning' | 'error' | 'neutral';
+
+type RunnerCardState = {
+  id: string;
+  name: string;
+  installed: boolean;
+  authConfigured: boolean;
+  ready: boolean;
+  version?: string;
+  tone: RunnerTone;
+  statusLine: string;
+  detail?: string;
+  actionLabel?: string;
+  actionRunner?: string;
+};
+
+type ProviderEditorState = {
+  mode: 'add' | 'edit';
+  id: string;
+  name: string;
+  baseUrl: string;
+  apiKey: string;
+};
+
+const PRIMARY_RUNNER_IDS = ['claude', 'codex', 'opencode'] as const;
+
+function normalizeRunnerStatusRows(rows: RunnerAuthStatusRow[]): RunnerCardState[] {
+  const byId = new Map<string, RunnerAuthStatusRow>();
+  for (const row of rows) {
+    const raw = String(row.id || '').trim().toLowerCase();
+    if (!raw) continue;
+    const normalized = raw === 'claude-code' ? 'claude' : raw;
+    if (!PRIMARY_RUNNER_IDS.includes(normalized as (typeof PRIMARY_RUNNER_IDS)[number])) continue;
+    byId.set(normalized, { ...row, id: normalized });
+  }
+
+  return PRIMARY_RUNNER_IDS.map((id) => {
+    const baseName =
+      id === 'claude' ? 'Claude Code' : id === 'codex' ? 'OpenAI Codex' : 'OpenCode';
+    const row = byId.get(id);
+    if (!row) {
+      return {
+        id,
+        name: baseName,
+        installed: false,
+        authConfigured: false,
+        ready: false,
+        tone: 'warning',
+        statusLine: 'Not installed on the selected machine',
+      };
+    }
+
+    const versionPrefix = row.version?.trim() ? `${row.version.trim()} · ` : '';
+    const detail = row.error?.trim() || row.warning?.trim() || row.detail?.trim() || undefined;
+
+    if (!row.installed) {
+      return {
+        id,
+        name: row.name || baseName,
+        installed: false,
+        authConfigured: false,
+        ready: false,
+        version: row.version,
+        tone: 'warning',
+        statusLine: 'Not installed on the selected machine',
+        detail,
+      };
+    }
+
+    if (id === 'opencode') {
+      const configured = row.authConfigured || row.ready;
+      return {
+        id,
+        name: row.name || baseName,
+        installed: row.installed,
+        authConfigured: row.authConfigured,
+        ready: row.ready,
+        version: row.version,
+        tone: configured ? 'ok' : 'warning',
+        statusLine: configured
+          ? `${versionPrefix}Configured on the selected machine`
+          : `${versionPrefix}Needs provider config on the selected machine`,
+        detail,
+      };
+    }
+
+    const authed = row.authConfigured || row.ready;
+    return {
+      id,
+      name: row.name || baseName,
+      installed: row.installed,
+      authConfigured: row.authConfigured,
+      ready: row.ready,
+      version: row.version,
+      tone: authed ? 'ok' : 'warning',
+      statusLine: authed
+        ? `${versionPrefix}Signed in on the selected machine`
+        : `${versionPrefix}Not signed in on the selected machine`,
+      detail,
+      actionLabel: authed ? 'Re-auth' : 'Sign in',
+      actionRunner: id,
+    };
+  });
+}
+
 export const FeedbackModal: React.FC = () => {
   const { width: winW, height: winH } = useWindowDimensions();
   const isTablet = Math.min(winW, winH) >= 600;
@@ -80,6 +198,11 @@ 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);
+  // Dev-server snapshot behind the reload buttons. `null` means "we have not
+  // been able to ask" — rendered as "not connected", never as "no dev server".
+  const [devSnapshot, setDevSnapshot] = useState<DevServerSnapshot | null>(null);
+  // Which reload action is in flight, so only that button spins.
+  const [reloadingId, setReloadingId] = useState<string | null>(null);
   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
@@ -101,8 +224,38 @@ export const FeedbackModal: React.FC = () => {
     title: 'No machine selected',
     detail: 'Pick a remote dev machine before using the feedback actions.',
   });
+  const [runnerCards, setRunnerCards] = useState<RunnerCardState[]>(() =>
+    normalizeRunnerStatusRows([]),
+  );
+  const [runnerStatusLoading, setRunnerStatusLoading] = useState(false);
+  const [runnerStatusError, setRunnerStatusError] = useState<string | null>(null);
+  const [preferredRunner, setPreferredRunnerState] = useState<string | null>(null);
+  const [preferredModel, setPreferredModelState] = useState('');
+  const [showOpenCodeConfig, setShowOpenCodeConfig] = useState(false);
   const mountedRef = useRef(true);
 
+  /**
+   * Ask the machine what its dev server is doing, so the reload actions can
+   * be enabled/disabled against reality rather than against a guess.
+   *
+   * Best-effort and deliberately null-on-failure: null means "we could not
+   * ask", which the seam renders as "not connected to a machine yet" — a
+   * different sentence from "no dev server is running", because they have
+   * different fixes.
+   */
+  const refreshDevSnapshot = useCallback(async () => {
+    try {
+      const client = YaverFeedback.getP2PClient();
+      if (!client) {
+        setDevSnapshot(null);
+        return;
+      }
+      setDevSnapshot(await client.getDevServerStatus());
+    } catch {
+      setDevSnapshot(null);
+    }
+  }, []);
+
   const loadSelectedMachine = useCallback(async () => {
     const cfg = YaverFeedback.getConfig();
     if (!cfg?.authToken) {
@@ -204,6 +357,69 @@ export const FeedbackModal: React.FC = () => {
     }
   }, []);
 
+  const loadRunnerStatuses = useCallback(async () => {
+    const cfg = YaverFeedback.getConfig();
+    if (!cfg?.authToken) {
+      if (mountedRef.current) {
+        setRunnerCards(normalizeRunnerStatusRows([]));
+        setRunnerStatusError('Sign in to inspect coding-agent status.');
+        setRunnerStatusLoading(false);
+      }
+      return;
+    }
+    if (!cfg.preferredDeviceId) {
+      if (mountedRef.current) {
+        setRunnerCards(normalizeRunnerStatusRows([]));
+        setRunnerStatusError('Pick a machine to inspect coding-agent status.');
+        setRunnerStatusLoading(false);
+      }
+      return;
+    }
+
+    if (mountedRef.current) {
+      setRunnerStatusLoading(true);
+      setRunnerStatusError(null);
+    }
+
+    try {
+      let client = YaverFeedback.getP2PClient();
+      if (!client) {
+        const ok = await YaverFeedback.reconnect();
+        if (ok) client = YaverFeedback.getP2PClient();
+      }
+      if (!client) {
+        throw new Error('Not connected to the selected machine yet.');
+      }
+      const rows = await client.getRunnerAuthStatus();
+      if (mountedRef.current) {
+        setRunnerCards(normalizeRunnerStatusRows(rows));
+      }
+    } catch (err) {
+      if (mountedRef.current) {
+        setRunnerCards(normalizeRunnerStatusRows([]));
+        setRunnerStatusError(err instanceof Error ? err.message : String(err));
+      }
+    } finally {
+      if (mountedRef.current) setRunnerStatusLoading(false);
+    }
+  }, []);
+
+  const loadRoutingPrefs = useCallback(async () => {
+    try {
+      const [runner, model] = await Promise.all([
+        getPreferredRunner(),
+        getPreferredModel(),
+      ]);
+      if (!mountedRef.current) return;
+      setPreferredRunnerState(runner);
+      setPreferredModelState(model ?? '');
+    } catch {
+      if (!mountedRef.current) return;
+      setPreferredRunnerState(null);
+      setPreferredModelState('');
+    }
+  }, []);
+
   useEffect(() => {
     mountedRef.current = true;
     const sub = DeviceEventEmitter.addListener('yaverFeedback:startReport', () => {
@@ -229,6 +445,7 @@ export const FeedbackModal: React.FC = () => {
           })
           .catch(() => {});
         void loadSelectedMachine();
+        void loadRunnerStatuses();
       }
     });
     // Agent streams build / compile progress through the BlackBox
@@ -257,15 +474,22 @@ export const FeedbackModal: React.FC = () => {
       sub.remove();
       statusSub.remove();
     };
-  }, [loadSelectedMachine]);
+  }, [loadRunnerStatuses, loadSelectedMachine]);
 
   useEffect(() => {
     if (!visible) return;
+    // Poll the dev server alongside the machine + runners. A reload button
+    // whose enabled state was decided once, when the sheet opened, goes
+    // stale the moment the user starts Metro from another surface — and a
+    // stale "no dev server is running" reads as the product being broken.
+    void refreshDevSnapshot();
     const interval = setInterval(() => {
       void loadSelectedMachine();
+      void loadRunnerStatuses();
+      void refreshDevSnapshot();
     }, 5000);
     return () => clearInterval(interval);
-  }, [loadSelectedMachine, visible]);
+  }, [loadRunnerStatuses, loadSelectedMachine, refreshDevSnapshot, visible]);
 
   useEffect(() => {
     if (!visible) {
@@ -301,6 +525,7 @@ export const FeedbackModal: React.FC = () => {
     setAction('idle');
     setShowVibeInput(false);
     setVibePrompt('');
+    setRunnerStatusError(null);
   }, []);
 
   // Helper: run a P2P call; on network failure, ask YaverFeedback to
@@ -353,7 +578,87 @@ export const FeedbackModal: React.FC = () => {
     [],
   );
 
-  // ─── 1. Hot reload ─────────────────────────────────────────────────
+  // ─── 1. Reload ─────────────────────────────────────────────────────
+  //
+  // Three actions now, not one: Hot Reload (mode=fast), Full Reload
+  // (mode=full — Flutter's hot RESTART), and Rebuild Bundle
+  // (/dev/reload-app, the only one that works with Metro down).
+  //
+  // WHICH of them render, and which are disabled with what reason, is
+  // decided by the pure `reloadActions()` seam — never inline here, so the
+  // same policy holds on web, Flutter, Unity, Swift and Kotlin. In
+  // particular: a production build (`__DEV__ === false`) gets NONE of them.
+
+  const availableReloadActions = reloadActions(devSnapshot, {
+    // __DEV__ is React Native's own build flag. A release bundle sets it
+    // false, so a shipped app renders no reload UI at all — which is the
+    // point, and is what reloadActions.test.ts pins.
+    isDevBuild: typeof __DEV__ !== 'undefined' && __DEV__ === true,
+    connected: devSnapshot !== null,
+    machineLabel: machineCard.device?.name || undefined,
+    includeRebuild: true,
+  });
+
+  const handleReloadAction = useCallback(
+    async (reloadAction: ReloadAction) => {
+      if (!reloadAction.enabled) {
+        // Pressing a disabled action must SAY why. A row that does nothing
+        // is the same defect as a spinner that never resolves.
+        setToast(reloadAction.disabledReason || 'Reload is unavailable right now.');
+        setError(reloadAction.disabledReason || null);
+        return;
+      }
+      setReloadingId(reloadAction.id);
+      setAction('hot-reloading');
+      setError(null);
+      setProgress(0);
+      setToast(`${reloadAction.label}…`);
+      try {
+        await loadSelectedMachine();
+        const selected = await YaverFeedback.getSelectedRemoteDevice();
+        if (!selected) {
+          YaverFeedback.showMachinePicker();
+          throw new Error('No machine selected. Pick a machine and try again.');
+        }
+        if (selected.needsAuth) {
+          YaverFeedback.showMachinePicker();
+          throw new Error('Selected machine needs pairing again.');
+        }
+        if (!selected.isOnline) {
+          throw new Error('Selected machine is offline. Start `yaver serve` on it first.');
+        }
+
+        let ackMessage = `${reloadAction.label} requested.`;
+        await runWithReconnect(async (client) => {
+          const ack = await client.reloadWithMode(reloadAction.mode, devSnapshot);
+          ackMessage = ack.message;
+          setToast(ack.message);
+          setProgress(0.2);
+        });
+        setToast(ackMessage);
+        if (reloadAction.mode === 'bundle') closeSoon(2500);
+      } catch (err: unknown) {
+        const message = err instanceof Error ? err.message : String(err);
+        setError(message);
+        setToast(
+          message.toLowerCase().indexOf('session expired') >= 0
+            ? 'Session expired. Sign in again.'
+            : message,
+        );
+        await loadSelectedMachine();
+        setProgress(null);
+      } finally {
+        if (mountedRef.current) {
+          setAction('idle');
+          setReloadingId(null);
+          void refreshDevSnapshot();
+        }
+      }
+    },
+    [closeSoon, devSnapshot, loadSelectedMachine, refreshDevSnapshot, runWithReconnect],
+  );
+
+  /** Kept for the legacy one-tap path (BlackBox command, chat Reload button). */
   const handleHotReload = useCallback(async () => {
     setAction('hot-reloading');
     setError(null);
@@ -472,19 +777,36 @@ export const FeedbackModal: React.FC = () => {
     try {
       const { Dimensions } = require('react-native');
       const { width, height } = Dimensions.get('window');
+      const cfg = YaverFeedback.getConfig();
+      const identity = resolveReportIdentity({
+        projectName: cfg?.projectName,
+        bundleId: cfg?.bundleId,
+        surface: cfg?.surface,
+        surfaces: cfg?.surfaces,
+        stack: cfg?.stack,
+        stacks: cfg?.stacks,
+        testSurfaces: cfg?.testSurfaces,
+        feedbackSdk: cfg?.feedbackSdk,
+        feedbackTransport: cfg?.feedbackTransport,
+        voiceCapabilities: cfg?.voiceCapabilities,
+        sttProvider: cfg?.sttProvider,
+        ttsProvider: cfg?.ttsProvider,
+      });
       const deviceInfo: DeviceInfo = {
         platform: Platform.OS,
         osVersion: String(Platform.Version),
         model: Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
         screenWidth: width,
         screenHeight: height,
+        appName: identity.appName,
       };
       const capturedErrors = YaverFeedback.getCapturedErrors();
       const bundle: FeedbackBundle = {
         metadata: {
           timestamp: new Date().toISOString(),
-          device: deviceInfo,
-          app: {},
+          deviceInfo,
+          app: identity.app,
+          project: identity.project,
           userNote: '[Screenshot + Fix]',
         },
         screenshots: [path],
@@ -552,6 +874,9 @@ export const FeedbackModal: React.FC = () => {
   const [activeVibe, setActiveVibe] = useState<{
     taskId: string;
     initialPrompt: string;
+    project?: string;
+    runner?: string;
+    model?: string;
   } | null>(null);
   const [includeScreenshot, setIncludeScreenshot] = useState<boolean>(true);
 
@@ -614,7 +939,13 @@ export const FeedbackModal: React.FC = () => {
       setLastVibeTaskId(result.taskId);
       // Hand off to VibeChatScreen — it streams the SSE transcript,
       // accepts follow-ups, and surfaces a Reload button.
-      setActiveVibe({ taskId: result.taskId, initialPrompt: promptText });
+      setActiveVibe({
+        taskId: result.taskId,
+        initialPrompt: promptText,
+        project: identity.projectName,
+        runner: preferredRunner ?? undefined,
+        model: preferredModel ?? undefined,
+      });
       setVibePrompt('');
       setShowVibeInput(false);
     } catch (err: unknown) {
@@ -631,6 +962,11 @@ export const FeedbackModal: React.FC = () => {
   */
 
   const busy = action !== 'idle';
+  const readyRunnerCount = runnerCards.filter((row) => row.ready || row.authConfigured).length;
+  const missingRunnerCount = runnerCards.filter((row) => !row.installed).length;
+  const needsAuthRunnerCount = runnerCards.filter(
+    (row) => row.installed && !row.authConfigured && !row.ready,
+  ).length;
 
   // Once the user fires off a vibe task, swap the entire modal body
   // for the live chat screen. The chat manages its own SSE
@@ -653,6 +989,9 @@ export const FeedbackModal: React.FC = () => {
               client={client}
               initialTaskId={activeVibe.taskId}
               initialUserPrompt={activeVibe.initialPrompt}
+              project={activeVibe.project}
+              runner={activeVibe.runner}
+              model={activeVibe.model}
               onClose={() => setActiveVibe(null)}
               onReload={async () => {
                 const c = YaverFeedback.getP2PClient();
@@ -766,6 +1105,80 @@ export const FeedbackModal: React.FC = () => {
                 <Text style={styles.machineMeta}>{machineCard.detail}</Text>
               </Pressable>
 
+              <View style={styles.runnerSection}>
+                <View style={styles.runnerSectionHeader}>
+                  <View style={{ flex: 1 }}>
+                    <Text style={styles.runnerSectionTitle}>Coding Agents</Text>
+                    <Text style={styles.runnerSectionSubtitle}>
+                      {runnerStatusLoading
+                        ? 'Refreshing runner status on the selected machine…'
+                        : `${readyRunnerCount} ready · ${needsAuthRunnerCount} need sign-in · ${missingRunnerCount} missing`}
+                    </Text>
+                  </View>
+                  <Pressable
+                    onPress={() => void loadRunnerStatuses()}
+                    style={({ pressed }) => [
+                      styles.runnerRefreshBtn,
+                      pressed && styles.buttonPressed,
+                    ]}
+                    accessibilityRole="button"
+                    accessibilityLabel="Refresh coding-agent status"
+                  >
+                    <Text style={styles.runnerRefreshBtnText}>
+                      {runnerStatusLoading ? 'Refreshing…' : 'Refresh'}
+                    </Text>
+                  </Pressable>
+                </View>
+
+                {runnerCards.map((row) => (
+                  <View
+                    key={row.id}
+                    style={[
+                      styles.runnerCard,
+                      row.tone === 'ok' && styles.runnerCardOk,
+                      row.tone === 'warning' && styles.runnerCardWarning,
+                      row.tone === 'error' && styles.runnerCardError,
+                    ]}
+                  >
+                    <View style={styles.runnerCardTop}>
+                      <View style={{ flex: 1 }}>
+                        <Text style={styles.runnerCardTitle}>{row.name}</Text>
+                        <Text
+                          style={[
+                            styles.runnerCardStatus,
+                            row.tone === 'ok' && styles.runnerCardStatusOk,
+                            row.tone === 'warning' && styles.runnerCardStatusWarning,
+                            row.tone === 'error' && styles.runnerCardStatusError,
+                          ]}
+                        >
+                          {row.statusLine}
+                        </Text>
+                      </View>
+                      {row.actionRunner ? (
+                        <Pressable
+                          onPress={() => setRunnerAuthModal(row.actionRunner ?? null)}
+                          style={({ pressed }) => [
+                            styles.runnerActionBtn,
+                            pressed && styles.buttonPressed,
+                          ]}
+                          accessibilityRole="button"
+                          accessibilityLabel={`${row.actionLabel} ${row.name}`}
+                        >
+                          <Text style={styles.runnerActionBtnText}>{row.actionLabel}</Text>
+                        </Pressable>
+                      ) : null}
+                    </View>
+                    {row.detail ? (
+                      <Text style={styles.runnerCardDetail}>{row.detail}</Text>
+                    ) : null}
+                  </View>
+                ))}
+
+                {runnerStatusError ? (
+                  <Text style={styles.runnerSectionError}>{runnerStatusError}</Text>
+                ) : null}
+              </View>
+
               {quickIconHidden && (
                 <View style={styles.quickIconNote}>
                   <Text style={styles.quickIconNoteText}>
@@ -835,16 +1248,36 @@ export const FeedbackModal: React.FC = () => {
                 </View>
               </View>
 
-              {/* 1. Hot Reload — the common path */}
-              <ActionRow
-                label={
-                  action === 'hot-reloading' ? 'Reloading…' : 'Hot Reload'
-                }
-                tint="#fbbf24"
-                onPress={handleHotReload}
-                disabled={busy}
-                busy={action === 'hot-reloading'}
-              />
+              {/* 1. Reload — Hot / Full / Rebuild Bundle.
+                   Rendered from the shared decision seam, so a production
+                   build (__DEV__ false) renders nothing here at all, and a
+                   blocked action shows greyed WITH its reason underneath
+                   rather than vanishing. */}
+              {availableReloadActions.map((reloadAction) => (
+                <View key={reloadAction.id} style={styles.reloadRow}>
+                  <ActionRow
+                    label={
+                      reloadingId === reloadAction.id
+                        ? `${reloadAction.label}…`
+                        : reloadAction.label
+                    }
+                    tint={reloadAction.id === 'rebuild' ? '#38bdf8' : '#fbbf24'}
+                    onPress={() => {
+                      void handleReloadAction(reloadAction);
+                    }}
+                    // Never `disabled` at the Pressable level for a blocked
+                    // action: we WANT the tap so we can say why. Only a
+                    // genuinely busy modal blocks the press.
+                    disabled={busy && reloadingId !== reloadAction.id}
+                    busy={reloadingId === reloadAction.id}
+                  />
+                  <Text style={styles.reloadHint}>
+                    {reloadAction.enabled
+                      ? reloadAction.hint
+                      : reloadAction.disabledReason}
+                  </Text>
+                </View>
+              ))}
 
               {/* 3. Vibing — expands to an input box on first tap
                    so the user says WHAT they want to vibe on, just
@@ -931,41 +1364,6 @@ export const FeedbackModal: React.FC = () => {
                 <DeployPanel onClose={() => setShowDeploy(false)} />
               )}
 
-              {/* 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
@@ -999,7 +1397,10 @@ export const FeedbackModal: React.FC = () => {
       {runnerAuthModal ? (
         <RunnerAuthNativeModal
           runner={runnerAuthModal}
-          onClose={() => setRunnerAuthModal(null)}
+          onClose={() => {
+            setRunnerAuthModal(null);
+            void loadRunnerStatuses();
+          }}
         />
       ) : null}
     </>
@@ -1045,6 +1446,15 @@ const ActionRow: React.FC<ActionRowProps> = ({
 );
 
 const styles = StyleSheet.create({
+  reloadRow: {
+    gap: 4,
+  },
+  reloadHint: {
+    color: '#8b8b93',
+    fontSize: 11,
+    lineHeight: 15,
+    paddingHorizontal: 4,
+  },
   vibeInputRow: {
     backgroundColor: 'rgba(129,140,248,0.08)',
     borderColor: 'rgba(129,140,248,0.4)',
@@ -1227,6 +1637,106 @@ const styles = StyleSheet.create({
     marginTop: 4,
     lineHeight: 17,
   },
+  runnerSection: {
+    marginTop: 2,
+    gap: 10,
+  },
+  runnerSectionHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  runnerSectionTitle: {
+    color: '#f8fafc',
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  runnerSectionSubtitle: {
+    marginTop: 2,
+    color: '#94a3b8',
+    fontSize: 12,
+  },
+  runnerRefreshBtn: {
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(148,163,184,0.22)',
+    backgroundColor: 'rgba(15,23,42,0.65)',
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+  },
+  runnerRefreshBtnText: {
+    color: '#cbd5e1',
+    fontSize: 12,
+    fontWeight: '600',
+  },
+  runnerCard: {
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(148,163,184,0.14)',
+    backgroundColor: 'rgba(15,23,42,0.45)',
+    paddingHorizontal: 12,
+    paddingVertical: 11,
+    gap: 6,
+  },
+  runnerCardOk: {
+    borderColor: 'rgba(34,197,94,0.28)',
+    backgroundColor: 'rgba(20,83,45,0.20)',
+  },
+  runnerCardWarning: {
+    borderColor: 'rgba(251,191,36,0.28)',
+    backgroundColor: 'rgba(120,53,15,0.18)',
+  },
+  runnerCardError: {
+    borderColor: 'rgba(248,113,113,0.28)',
+    backgroundColor: 'rgba(127,29,29,0.18)',
+  },
+  runnerCardTop: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+  },
+  runnerCardTitle: {
+    color: '#f8fafc',
+    fontSize: 14,
+    fontWeight: '700',
+  },
+  runnerCardStatus: {
+    marginTop: 2,
+    fontSize: 12,
+    color: '#cbd5e1',
+  },
+  runnerCardStatusOk: {
+    color: '#86efac',
+  },
+  runnerCardStatusWarning: {
+    color: '#fcd34d',
+  },
+  runnerCardStatusError: {
+    color: '#fca5a5',
+  },
+  runnerCardDetail: {
+    color: '#94a3b8',
+    fontSize: 11,
+    lineHeight: 16,
+  },
+  runnerActionBtn: {
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: 'rgba(129,140,248,0.35)',
+    backgroundColor: 'rgba(67,56,202,0.22)',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  runnerActionBtnText: {
+    color: '#c7d2fe',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  runnerSectionError: {
+    color: '#fca5a5',
+    fontSize: 12,
+    lineHeight: 18,
+  },
   captureChoices: {
     gap: 10,
   },
@@ -1604,40 +2114,6 @@ const RunnerAuthNativeModal: React.FC<{
   );
 };
 
-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,