yaver-feedback-react-native 0.8.13 → 0.9.2

package/dist/FeedbackModal.js

@@ -39,12 +39,89 @@ const react_native_1 = require("react-native");
 const YaverFeedback_1 = require("./YaverFeedback");
 const capture_1 = require("./capture");
 const upload_1 = require("./upload");
+const P2PClient_1 = require("./P2PClient");
 const AuthOverlay_1 = require("./AuthOverlay");
 const QuickActionIcon_1 = require("./QuickActionIcon");
 const VibeChatScreen_1 = require("./VibeChatScreen");
 const DeployPanel_1 = require("./DeployPanel");
 const auth_1 = require("./auth");
+const reloadActions_1 = require("./reloadActions");
 const preferences_1 = require("./preferences");
+const PRIMARY_RUNNER_IDS = ['claude', 'codex', 'opencode'];
+function normalizeRunnerStatusRows(rows) {
+    const byId = new Map();
+    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))
+            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,
+        };
+    });
+}
 const FeedbackModal = () => {
     const { width: winW, height: winH } = (0, react_native_1.useWindowDimensions)();
     const isTablet = Math.min(winW, winH) >= 600;
@@ -61,6 +138,11 @@ 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);
+    // 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] = (0, react_1.useState)(null);
+    // Which reload action is in flight, so only that button spins.
+    const [reloadingId, setReloadingId] = (0, react_1.useState)(null);
     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
@@ -81,7 +163,35 @@ const FeedbackModal = () => {
         title: 'No machine selected',
         detail: 'Pick a remote dev machine before using the feedback actions.',
     });
+    const [runnerCards, setRunnerCards] = (0, react_1.useState)(() => normalizeRunnerStatusRows([]));
+    const [runnerStatusLoading, setRunnerStatusLoading] = (0, react_1.useState)(false);
+    const [runnerStatusError, setRunnerStatusError] = (0, react_1.useState)(null);
+    const [preferredRunner, setPreferredRunnerState] = (0, react_1.useState)(null);
+    const [preferredModel, setPreferredModelState] = (0, react_1.useState)('');
+    const [showOpenCodeConfig, setShowOpenCodeConfig] = (0, react_1.useState)(false);
     const mountedRef = (0, react_1.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 = (0, react_1.useCallback)(async () => {
+        try {
+            const client = YaverFeedback_1.YaverFeedback.getP2PClient();
+            if (!client) {
+                setDevSnapshot(null);
+                return;
+            }
+            setDevSnapshot(await client.getDevServerStatus());
+        }
+        catch {
+            setDevSnapshot(null);
+        }
+    }, []);
     const loadSelectedMachine = (0, react_1.useCallback)(async () => {
         const cfg = YaverFeedback_1.YaverFeedback.getConfig();
         if (!cfg?.authToken) {
@@ -178,6 +288,72 @@ const FeedbackModal = () => {
             }
         }
     }, []);
+    const loadRunnerStatuses = (0, react_1.useCallback)(async () => {
+        const cfg = YaverFeedback_1.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_1.YaverFeedback.getP2PClient();
+            if (!client) {
+                const ok = await YaverFeedback_1.YaverFeedback.reconnect();
+                if (ok)
+                    client = YaverFeedback_1.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 = (0, react_1.useCallback)(async () => {
+        try {
+            const [runner, model] = await Promise.all([
+                (0, preferences_1.getPreferredRunner)(),
+                (0, preferences_1.getPreferredModel)(),
+            ]);
+            if (!mountedRef.current)
+                return;
+            setPreferredRunnerState(runner);
+            setPreferredModelState(model ?? '');
+        }
+        catch {
+            if (!mountedRef.current)
+                return;
+            setPreferredRunnerState(null);
+            setPreferredModelState('');
+        }
+    }, []);
     (0, react_1.useEffect)(() => {
         mountedRef.current = true;
         const sub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startReport', () => {
@@ -205,6 +381,7 @@ const FeedbackModal = () => {
                 })
                     .catch(() => { });
                 void loadSelectedMachine();
+                void loadRunnerStatuses();
             }
         });
         // Agent streams build / compile progress through the BlackBox
@@ -232,15 +409,22 @@ const FeedbackModal = () => {
             sub.remove();
             statusSub.remove();
         };
-    }, [loadSelectedMachine]);
+    }, [loadRunnerStatuses, loadSelectedMachine]);
     (0, react_1.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]);
     (0, react_1.useEffect)(() => {
         if (!visible) {
             setKeyboardInset(0);
@@ -273,6 +457,7 @@ const FeedbackModal = () => {
         setAction('idle');
         setShowVibeInput(false);
         setVibePrompt('');
+        setRunnerStatusError(null);
     }, []);
     // Helper: run a P2P call; on network failure, ask YaverFeedback to
     // re-query Convex for the fresh IP and retry once. Solves the common
@@ -323,7 +508,81 @@ const FeedbackModal = () => {
             await fn(fresh);
         }
     }, []);
-    // ─── 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 = (0, reloadActions_1.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 = (0, react_1.useCallback)(async (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_1.YaverFeedback.getSelectedRemoteDevice();
+            if (!selected) {
+                YaverFeedback_1.YaverFeedback.showMachinePicker();
+                throw new Error('No machine selected. Pick a machine and try again.');
+            }
+            if (selected.needsAuth) {
+                YaverFeedback_1.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) {
+            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 = (0, react_1.useCallback)(async () => {
         setAction('hot-reloading');
         setError(null);
@@ -429,19 +688,36 @@ const FeedbackModal = () => {
         try {
             const { Dimensions } = require('react-native');
             const { width, height } = Dimensions.get('window');
+            const cfg = YaverFeedback_1.YaverFeedback.getConfig();
+            const identity = (0, P2PClient_1.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 = {
                 platform: react_native_1.Platform.OS,
                 osVersion: String(react_native_1.Platform.Version),
                 model: react_native_1.Platform.OS === 'ios' ? 'iOS Device' : 'Android Device',
                 screenWidth: width,
                 screenHeight: height,
+                appName: identity.appName,
             };
             const capturedErrors = YaverFeedback_1.YaverFeedback.getCapturedErrors();
             const bundle = {
                 metadata: {
                     timestamp: new Date().toISOString(),
-                    device: deviceInfo,
-                    app: {},
+                    deviceInfo,
+                    app: identity.app,
+                    project: identity.project,
                     userNote: '[Screenshot + Fix]',
                 },
                 screenshots: [path],
@@ -557,7 +833,13 @@ const FeedbackModal = () => {
             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);
         }
@@ -575,6 +857,9 @@ const FeedbackModal = () => {
     }, [closeSoon, isRecordingVideo, lastVideo]);
     */
     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
     // subscription, multi-turn follow-ups, and Reload button. Closing
@@ -585,7 +870,7 @@ const FeedbackModal = () => {
         <AuthOverlay_1.AuthOverlay />
         <QuickActionIcon_1.QuickActionIcon />
         <react_native_1.Modal visible={visible} animationType="slide" transparent onRequestClose={() => setActiveVibe(null)}>
-          {client ? (<VibeChatScreen_1.VibeChatScreen client={client} initialTaskId={activeVibe.taskId} initialUserPrompt={activeVibe.initialPrompt} onClose={() => setActiveVibe(null)} onReload={async () => {
+          {client ? (<VibeChatScreen_1.VibeChatScreen 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_1.YaverFeedback.getP2PClient();
                     if (!c)
                         throw new Error('Not connected');
@@ -664,6 +949,57 @@ const FeedbackModal = () => {
                 <react_native_1.Text style={styles.machineMeta}>{machineCard.detail}</react_native_1.Text>
               </react_native_1.Pressable>
 
+              <react_native_1.View style={styles.runnerSection}>
+                <react_native_1.View style={styles.runnerSectionHeader}>
+                  <react_native_1.View style={{ flex: 1 }}>
+                    <react_native_1.Text style={styles.runnerSectionTitle}>Coding Agents</react_native_1.Text>
+                    <react_native_1.Text style={styles.runnerSectionSubtitle}>
+                      {runnerStatusLoading
+                ? 'Refreshing runner status on the selected machine…'
+                : `${readyRunnerCount} ready · ${needsAuthRunnerCount} need sign-in · ${missingRunnerCount} missing`}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.Pressable onPress={() => void loadRunnerStatuses()} style={({ pressed }) => [
+                styles.runnerRefreshBtn,
+                pressed && styles.buttonPressed,
+            ]} accessibilityRole="button" accessibilityLabel="Refresh coding-agent status">
+                    <react_native_1.Text style={styles.runnerRefreshBtnText}>
+                      {runnerStatusLoading ? 'Refreshing…' : 'Refresh'}
+                    </react_native_1.Text>
+                  </react_native_1.Pressable>
+                </react_native_1.View>
+
+                {runnerCards.map((row) => (<react_native_1.View key={row.id} style={[
+                    styles.runnerCard,
+                    row.tone === 'ok' && styles.runnerCardOk,
+                    row.tone === 'warning' && styles.runnerCardWarning,
+                    row.tone === 'error' && styles.runnerCardError,
+                ]}>
+                    <react_native_1.View style={styles.runnerCardTop}>
+                      <react_native_1.View style={{ flex: 1 }}>
+                        <react_native_1.Text style={styles.runnerCardTitle}>{row.name}</react_native_1.Text>
+                        <react_native_1.Text style={[
+                    styles.runnerCardStatus,
+                    row.tone === 'ok' && styles.runnerCardStatusOk,
+                    row.tone === 'warning' && styles.runnerCardStatusWarning,
+                    row.tone === 'error' && styles.runnerCardStatusError,
+                ]}>
+                          {row.statusLine}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                      {row.actionRunner ? (<react_native_1.Pressable onPress={() => setRunnerAuthModal(row.actionRunner ?? null)} style={({ pressed }) => [
+                        styles.runnerActionBtn,
+                        pressed && styles.buttonPressed,
+                    ]} accessibilityRole="button" accessibilityLabel={`${row.actionLabel} ${row.name}`}>
+                          <react_native_1.Text style={styles.runnerActionBtnText}>{row.actionLabel}</react_native_1.Text>
+                        </react_native_1.Pressable>) : null}
+                    </react_native_1.View>
+                    {row.detail ? (<react_native_1.Text style={styles.runnerCardDetail}>{row.detail}</react_native_1.Text>) : null}
+                  </react_native_1.View>))}
+
+                {runnerStatusError ? (<react_native_1.Text style={styles.runnerSectionError}>{runnerStatusError}</react_native_1.Text>) : null}
+              </react_native_1.View>
+
               {quickIconHidden && (<react_native_1.View style={styles.quickIconNote}>
                   <react_native_1.Text style={styles.quickIconNoteText}>
                     Quick access icon is hidden. Shake the phone if you want feedback back fast.
@@ -716,8 +1052,27 @@ const FeedbackModal = () => {
                 </react_native_1.View>
               </react_native_1.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) => (<react_native_1.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}/>
+                  <react_native_1.Text style={styles.reloadHint}>
+                    {reloadAction.enabled
+                    ? reloadAction.hint
+                    : reloadAction.disabledReason}
+                  </react_native_1.Text>
+                </react_native_1.View>))}
 
               {/* 3. Vibing — expands to an input box on first tap
                  so the user says WHAT they want to vibe on, just
@@ -755,29 +1110,6 @@ const FeedbackModal = () => {
                 platform smarts here. */}
               {!showDeploy ? (<ActionRow label="Deploy" tint="#7f8cf7" onPress={() => setShowDeploy(true)} disabled={busy}/>) : (<DeployPanel_1.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. */}
-              <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,
@@ -798,7 +1130,10 @@ const FeedbackModal = () => {
             </react_native_1.KeyboardAvoidingView>
           </react_native_1.Pressable>
         </react_native_1.Modal>)}
-      {runnerAuthModal ? (<RunnerAuthNativeModal runner={runnerAuthModal} onClose={() => setRunnerAuthModal(null)}/>) : null}
+      {runnerAuthModal ? (<RunnerAuthNativeModal runner={runnerAuthModal} onClose={() => {
+                setRunnerAuthModal(null);
+                void loadRunnerStatuses();
+            }}/>) : null}
     </>);
 };
 exports.FeedbackModal = FeedbackModal;
@@ -814,6 +1149,15 @@ const ActionRow = ({ label, tint, onPress, disabled, busy, }) => (<react_native_
     {busy ? (<react_native_1.ActivityIndicator color={tint} size="small"/>) : (<react_native_1.Text style={[styles.actionText, { color: tint }]}>{label}</react_native_1.Text>)}
   </react_native_1.Pressable>);
 const styles = react_native_1.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)',
@@ -996,6 +1340,106 @@ const styles = react_native_1.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,
     },
@@ -1328,39 +1772,6 @@ const RunnerAuthNativeModal = ({ runner, onClose }) => {
       </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,