yaver-feedback-react-native 0.9.0 → 0.9.3

package/src/FeedbackModal.tsx

@@ -4,6 +4,7 @@ import {
   DeviceEventEmitter,
   Keyboard,
   KeyboardAvoidingView,
+  Linking,
   Modal,
   Platform,
   Pressable,
@@ -25,6 +26,7 @@ import {
   // stopVideoRecording,
 } from './capture';
 import { uploadFeedback } from './upload';
+import { resolveReportIdentity } from './P2PClient';
 import {
   DeviceInfo,
   FeedbackBundle,
@@ -34,9 +36,12 @@ import {
 } from './types';
 import { AuthOverlay } from './AuthOverlay';
 import { QuickActionIcon } from './QuickActionIcon';
+import { YaverModeBadge } from './YaverModeBadge';
 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,
@@ -45,6 +50,14 @@ import {
   setPreferredModel,
   setPreferredRunner,
 } from './preferences';
+import {
+  DogfoodController,
+  defaultDogfoodLane,
+  dogfoodLaneOptions,
+  type DogfoodLane,
+  type DogfoodSnapshot,
+} from './DogfoodRuntime';
+import { createP2PDogfoodDriver } from './P2PDogfoodDriver';
 
 /**
  * Simplified feedback modal — launch scope is 3 actions:
@@ -88,6 +101,7 @@ type RunnerCardState = {
   detail?: string;
   actionLabel?: string;
   actionRunner?: string;
+  models?: Array<{ id: string; name?: string; provider?: string; isDefault?: boolean }>;
 };
 
 type ProviderEditorState = {
@@ -98,6 +112,14 @@ type ProviderEditorState = {
   apiKey: string;
 };
 
+type DogfoodProjectChoice = {
+  name: string;
+  path: string;
+  framework?: string;
+  frameworks?: string[];
+  surfaces?: string[];
+};
+
 const PRIMARY_RUNNER_IDS = ['claude', 'codex', 'opencode'] as const;
 
 function normalizeRunnerStatusRows(rows: RunnerAuthStatusRow[]): RunnerCardState[] {
@@ -139,6 +161,7 @@ function normalizeRunnerStatusRows(rows: RunnerAuthStatusRow[]): RunnerCardState
         version: row.version,
         tone: 'warning',
         statusLine: 'Not installed on the selected machine',
+        models: row.models,
         detail,
       };
     }
@@ -156,6 +179,7 @@ function normalizeRunnerStatusRows(rows: RunnerAuthStatusRow[]): RunnerCardState
         statusLine: configured
           ? `${versionPrefix}Configured on the selected machine`
           : `${versionPrefix}Needs provider config on the selected machine`,
+        models: row.models,
         detail,
       };
     }
@@ -172,6 +196,7 @@ function normalizeRunnerStatusRows(rows: RunnerAuthStatusRow[]): RunnerCardState
       statusLine: authed
         ? `${versionPrefix}Signed in on the selected machine`
         : `${versionPrefix}Not signed in on the selected machine`,
+      models: row.models,
       detail,
       actionLabel: authed ? 'Re-auth' : 'Sign in',
       actionRunner: id,
@@ -179,6 +204,36 @@ function normalizeRunnerStatusRows(rows: RunnerAuthStatusRow[]): RunnerCardState
   });
 }
 
+
+/**
+ * Renders the "inside Yaver" mark unless the app opted out.
+ *
+ * Lives here rather than in YaverModeBadge so the component stays a dumb view
+ * and the DEFAULT (`modeBadge !== false` → on) is expressed in exactly one
+ * place. Mounted from FeedbackModal because that is the component integrating
+ * apps already render — a default that required a new mount point would not be
+ * a default, it would be a feature request.
+ */
+const YaverModeBadgeGate: React.FC = () => {
+  const [, refresh] = useState(0);
+  useEffect(() => {
+    const sub = DeviceEventEmitter.addListener('yaverFeedback:dogfoodChanged', () => refresh((n) => n + 1));
+    return () => sub.remove();
+  }, []);
+  const cfg = YaverFeedback.getConfig();
+  if (cfg?.modeBadge === false) return null;
+  const dogfood = YaverFeedback.getDogfoodStatus();
+  return (
+    <YaverModeBadge
+      position={cfg?.modeBadgePosition ?? 'bottom-left'}
+      force={dogfood.active}
+      dogfood={dogfood.active}
+      dogfoodLabel={dogfood.label}
+      onExitDogfood={() => YaverFeedback.exitDogfoodMode()}
+    />
+  );
+};
+
 export const FeedbackModal: React.FC = () => {
   const { width: winW, height: winH } = useWindowDimensions();
   const isTablet = Math.min(winW, winH) >= 600;
@@ -186,6 +241,7 @@ export const FeedbackModal: React.FC = () => {
   // looks empty on a 1024pt iPad. Mobile keeps 3-col.
   const iconOptionWidthOverride = isTablet ? '18%' : undefined;
   const [visible, setVisible] = useState(false);
+  const [dogfoodActive, setDogfoodActive] = useState(() => YaverFeedback.getDogfoodStatus().active);
   const [action, setAction] = useState<ActionState>('idle');
   const [error, setError] = useState<string | null>(null);
   const [toast, setToast] = useState<string | null>(null);
@@ -195,6 +251,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
@@ -223,9 +284,108 @@ export const FeedbackModal: React.FC = () => {
   const [runnerStatusError, setRunnerStatusError] = useState<string | null>(null);
   const [preferredRunner, setPreferredRunnerState] = useState<string | null>(null);
   const [preferredModel, setPreferredModelState] = useState('');
+  const [activeTab, setActiveTab] = useState<'chat' | 'settings'>('chat');
   const [showOpenCodeConfig, setShowOpenCodeConfig] = useState(false);
+  const scrollRef = useRef<ScrollView>(null);
+  const [dogfoodEnrollment, setDogfoodEnrollment] = useState<{
+    status: string;
+    installationId?: string;
+    error?: string;
+  } | null>(null);
+  const [dogfoodProjects, setDogfoodProjects] = useState<DogfoodProjectChoice[]>([]);
+  const [dogfoodProject, setDogfoodProject] = useState<DogfoodProjectChoice | null>(null);
+  const [dogfoodLane, setDogfoodLane] = useState<DogfoodLane>('browser');
+  const [dogfoodNativeAvailable, setDogfoodNativeAvailable] = useState(false);
+  const [dogfoodRuntime, setDogfoodRuntime] = useState<DogfoodSnapshot | null>(null);
+  const [dogfoodSetupLoading, setDogfoodSetupLoading] = useState(false);
+  const dogfoodControllerRef = useRef<DogfoodController | null>(null);
   const mountedRef = useRef(true);
 
+  const loadDogfoodOnboarding = useCallback(async () => {
+    const onboarding = YaverFeedback.getDogfoodOnboarding();
+    if (!onboarding) return;
+    setDogfoodSetupLoading(true);
+    setDogfoodEnrollment({ status: 'checking' });
+    try {
+      const enrolled = await YaverFeedback.enableDeviceDogfood(onboarding);
+      if (!mountedRef.current) return;
+      setDogfoodEnrollment({ status: enrolled.status, installationId: enrolled.installationId });
+      if (enrolled.status !== 'active') return;
+      let client = YaverFeedback.getP2PClient();
+      if (!client && await YaverFeedback.reconnect()) client = YaverFeedback.getP2PClient();
+      if (!client) throw new Error('The selected Yaver machine is not reachable yet.');
+      const projects = await client.listDogfoodProjects();
+      if (!mountedRef.current) return;
+      setDogfoodProjects(projects);
+      const hint = String(onboarding.projectName || '').trim().toLowerCase();
+      const preferred = projects.find((item) => item.name.toLowerCase() === hint)
+        || projects.find((item) => hint && item.name.toLowerCase().includes(hint))
+        || projects[0]
+        || null;
+      setDogfoodProject((current) => current && projects.some((item) => item.path === current.path) ? current : preferred);
+      if (preferred) setDogfoodLane(defaultDogfoodLane(preferred.framework || onboarding.framework || 'expo'));
+    } catch (cause) {
+      if (mountedRef.current) setDogfoodEnrollment({ status: 'failed', error: cause instanceof Error ? cause.message : String(cause) });
+    } finally {
+      if (mountedRef.current) setDogfoodSetupLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    setDogfoodNativeAvailable(false);
+    const client = YaverFeedback.getP2PClient();
+    if (!client || !dogfoodProject) return () => { cancelled = true; };
+    const framework = dogfoodProject.framework || YaverFeedback.getDogfoodOnboarding()?.framework || 'expo';
+    void client.getDogfoodRemoteRuntimeCapabilities(dogfoodProject.path, framework)
+      .then((value) => {
+        if (!cancelled) setDogfoodNativeAvailable(value.targets.some((target) => target.enabled && target.id !== 'browser-window'));
+      })
+      .catch(() => {});
+    return () => { cancelled = true; };
+  }, [dogfoodProject]);
+
+  const startDogfoodRuntime = useCallback(async () => {
+    const client = YaverFeedback.getP2PClient();
+    const onboarding = YaverFeedback.getDogfoodOnboarding();
+    if (!client || !dogfoodProject || !onboarding) return;
+    await dogfoodControllerRef.current?.stop().catch(() => {});
+    const framework = dogfoodProject.framework || onboarding.framework || 'expo';
+    const controller = new DogfoodController({
+      name: dogfoodProject.name,
+      workDir: dogfoodProject.path,
+      framework,
+      lane: dogfoodLane,
+    }, createP2PDogfoodDriver(client), {
+      onChange: (snapshot) => { if (mountedRef.current) setDogfoodRuntime(snapshot); },
+    });
+    dogfoodControllerRef.current = controller;
+    setDogfoodRuntime(controller.snapshot());
+    await controller.trigger().catch(() => {});
+  }, [dogfoodLane, dogfoodProject]);
+
+  /**
+   * 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) {
@@ -261,9 +421,8 @@ export const FeedbackModal: React.FC = () => {
 
     try {
       const devices = await listReachableDevices(cfg.authToken);
-      const all = [...devices.owned, ...devices.shared];
       const device =
-        all.find((candidate) => candidate.deviceId === cfg.preferredDeviceId) ?? null;
+        devices.owned.find((candidate) => candidate.deviceId === cfg.preferredDeviceId) ?? null;
 
       if (!device) {
         if (mountedRef.current) {
@@ -285,9 +444,8 @@ export const FeedbackModal: React.FC = () => {
         reachable = await client.health();
       }
 
-      const hostHint = device.hostEmail ? ` via ${device.hostEmail}` : '';
       let status: MachineCardState['status'] = 'live';
-      let detail = `${device.platform}${hostHint}`;
+      let detail = device.platform;
 
       if (!device.isOnline) {
         status = 'offline';
@@ -360,7 +518,7 @@ export const FeedbackModal: React.FC = () => {
       if (!client) {
         throw new Error('Not connected to the selected machine yet.');
       }
-      const rows = await client.getRunnerAuthStatus();
+      const rows = await client.getAvailableRunners();
       if (mountedRef.current) {
         setRunnerCards(normalizeRunnerStatusRows(rows));
       }
@@ -394,13 +552,20 @@ export const FeedbackModal: React.FC = () => {
     mountedRef.current = true;
     const sub = DeviceEventEmitter.addListener('yaverFeedback:startReport', () => {
       if (YaverFeedback.isEnabled()) {
+        const onboarding = YaverFeedback.getDogfoodOnboarding();
+        const directDogfood = YaverFeedback.getDogfoodStatus().active;
+        setDogfoodActive(directDogfood);
         setVisible(true);
         setError(null);
         setToast(null);
         setProgress(null);
         setAction('idle');
-        setShowVibeInput(false);
+        setShowVibeInput(directDogfood);
         setVibePrompt('');
+        if (onboarding) {
+          setActiveTab('settings');
+          void loadDogfoodOnboarding();
+        }
         // Re-read the "user hid the quick icon" flag on every open so
         // the re-enable row reflects the latest preference (the user
         // might have hidden or shown it between opens).
@@ -418,6 +583,14 @@ export const FeedbackModal: React.FC = () => {
         void loadRunnerStatuses();
       }
     });
+    const dogfoodSub = DeviceEventEmitter.addListener(
+      'yaverFeedback:dogfoodChanged',
+      (payload: { active?: boolean; exited?: boolean }) => {
+        if (!mountedRef.current) return;
+        setDogfoodActive(payload?.active === true);
+        if (payload?.exited === true) setVisible(false);
+      },
+    );
     // Agent streams build / compile progress through the BlackBox
     // SSE command channel as `command: "status"`; YaverFeedback re-emits
     // it as `yaverFeedback:status`. Show the most recent message in the
@@ -442,18 +615,25 @@ export const FeedbackModal: React.FC = () => {
     return () => {
       mountedRef.current = false;
       sub.remove();
+      dogfoodSub.remove();
       statusSub.remove();
     };
-  }, [loadRunnerStatuses, loadSelectedMachine]);
+  }, [loadDogfoodOnboarding, 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);
-  }, [loadRunnerStatuses, loadSelectedMachine, visible]);
+  }, [loadRunnerStatuses, loadSelectedMachine, refreshDevSnapshot, visible]);
 
   useEffect(() => {
     if (!visible) {
@@ -475,6 +655,12 @@ export const FeedbackModal: React.FC = () => {
     };
   }, [visible]);
 
+  useEffect(() => {
+    if (!visible || !showVibeInput) return;
+    const timer = setTimeout(() => scrollRef.current?.scrollToEnd({ animated: true }), keyboardInset > 0 ? 120 : 40);
+    return () => clearTimeout(timer);
+  }, [keyboardInset, showVibeInput, visible]);
+
   const closeSoon = useCallback((delayMs = 1200) => {
     setTimeout(() => {
       if (mountedRef.current) setVisible(false);
@@ -490,6 +676,9 @@ export const FeedbackModal: React.FC = () => {
     setShowVibeInput(false);
     setVibePrompt('');
     setRunnerStatusError(null);
+    void dogfoodControllerRef.current?.stop().catch(() => {});
+    dogfoodControllerRef.current = null;
+    YaverFeedback.clearDogfoodOnboarding();
   }, []);
 
   // Helper: run a P2P call; on network failure, ask YaverFeedback to
@@ -542,7 +731,89 @@ 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 () => {
+          const renderClient = YaverFeedback.getRenderP2PClient();
+          if (!renderClient) throw new Error('Render machine is not connected yet.');
+          const ack = await renderClient.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);
@@ -569,8 +840,10 @@ export const FeedbackModal: React.FC = () => {
       // map this app to its MobileProject scan entry without needing
       // `yaver dev start` to have been run.
       let ackMessage = 'Reload request acknowledged.';
-      await runWithReconnect(async (client) => {
-        const ack = await client.reloadApp('bundle');
+      await runWithReconnect(async () => {
+        const renderClient = YaverFeedback.getRenderP2PClient();
+        if (!renderClient) throw new Error('Render machine is not connected yet.');
+        const ack = await renderClient.reloadApp('bundle');
         ackMessage = ack.message;
         setToast(ack.message);
         setProgress(0.2);
@@ -661,19 +934,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],
@@ -742,6 +1032,7 @@ export const FeedbackModal: React.FC = () => {
     taskId: string;
     initialPrompt: string;
     project?: string;
+    projectPath?: string;
     runner?: string;
     model?: string;
   } | null>(null);
@@ -810,6 +1101,7 @@ export const FeedbackModal: React.FC = () => {
         taskId: result.taskId,
         initialPrompt: promptText,
         project: identity.projectName,
+        projectPath: identity.projectPath,
         runner: preferredRunner ?? undefined,
         model: preferredModel ?? undefined,
       });
@@ -829,6 +1121,7 @@ export const FeedbackModal: React.FC = () => {
   */
 
   const busy = action !== 'idle';
+  const machineRouting = YaverFeedback.getMachineRouting();
   const readyRunnerCount = runnerCards.filter((row) => row.ready || row.authConfigured).length;
   const missingRunnerCount = runnerCards.filter((row) => !row.installed).length;
   const needsAuthRunnerCount = runnerCards.filter(
@@ -839,17 +1132,18 @@ export const FeedbackModal: React.FC = () => {
   // for the live chat screen. The chat manages its own SSE
   // subscription, multi-turn follow-ups, and Reload button. Closing
   // the chat returns to idle and clears the active vibe.
-  if (visible && activeVibe) {
+  if (activeVibe) {
     const client = YaverFeedback.getP2PClient();
     return (
       <>
         <AuthOverlay />
         <QuickActionIcon />
+        <YaverModeBadgeGate />
         <Modal
           visible={visible}
           animationType="slide"
           transparent
-          onRequestClose={() => setActiveVibe(null)}
+          onRequestClose={handleClose}
         >
           {client ? (
             <VibeChatScreen
@@ -857,11 +1151,20 @@ export const FeedbackModal: React.FC = () => {
               initialTaskId={activeVibe.taskId}
               initialUserPrompt={activeVibe.initialPrompt}
               project={activeVibe.project}
+              projectPath={activeVibe.projectPath}
               runner={activeVibe.runner}
               model={activeVibe.model}
+              voiceInputEnabled={YaverFeedback.getConfig()?.voiceInputEnabled === true}
               onClose={() => setActiveVibe(null)}
+              onNewTopic={() => {
+                setActiveVibe(null);
+                setShowVibeInput(true);
+              }}
+              onMinimize={handleClose}
+              codingMachine={YaverFeedback.getMachineRouting().codingDeviceId}
+              renderMachine={YaverFeedback.getMachineRouting().renderDeviceId}
               onReload={async () => {
-                const c = YaverFeedback.getP2PClient();
+                const c = YaverFeedback.getRenderP2PClient();
                 if (!c) throw new Error('Not connected');
                 await c.reloadApp();
               }}
@@ -876,6 +1179,7 @@ export const FeedbackModal: React.FC = () => {
     <>
       <AuthOverlay />
       <QuickActionIcon />
+      <YaverModeBadgeGate />
       {visible && (
         <Modal
           visible={visible}
@@ -912,6 +1216,7 @@ export const FeedbackModal: React.FC = () => {
               }}
             >
               <ScrollView
+                ref={scrollRef}
                 style={styles.scroll}
                 contentContainerStyle={[
                   styles.scrollContent,
@@ -921,9 +1226,13 @@ export const FeedbackModal: React.FC = () => {
                 ]}
                 keyboardShouldPersistTaps="handled"
                 keyboardDismissMode={Platform.OS === 'ios' ? 'interactive' : 'on-drag'}
+                contentInsetAdjustmentBehavior="always"
+                automaticallyAdjustKeyboardInsets={Platform.OS === 'ios'}
               >
               <View style={styles.header}>
-                <Text style={styles.title}>Send Feedback</Text>
+                <Text style={styles.title}>
+                  {dogfoodActive ? `${YaverFeedback.getDogfoodStatus().label || 'App'} Developer Mode` : 'Send Feedback'}
+                </Text>
                 <Pressable
                   onPress={handleClose}
                   hitSlop={12}
@@ -935,6 +1244,114 @@ export const FeedbackModal: React.FC = () => {
                 </Pressable>
               </View>
 
+              <View style={styles.tabs} accessibilityRole="tablist">
+                {(['chat', 'settings'] as const).map((tab) => (
+                  <Pressable
+                    key={tab}
+                    onPress={() => setActiveTab(tab)}
+                    style={[styles.tab, activeTab === tab && styles.tabSelected]}
+                    accessibilityRole="tab"
+                    accessibilityState={{ selected: activeTab === tab }}
+                  >
+                    <Text style={[styles.tabText, activeTab === tab && styles.tabTextSelected]}>{tab === 'chat' ? 'Chat' : 'Settings'}</Text>
+                  </Pressable>
+                ))}
+              </View>
+
+              <View style={[styles.tabContent, activeTab !== 'settings' && styles.hidden]}>
+              <>
+              {YaverFeedback.getDogfoodOnboarding() ? (
+                <View style={styles.dogfoodWizard}>
+                  <Text style={styles.dogfoodWizardTitle}>Dogfood this app</Text>
+                  <Text style={styles.dogfoodWizardHint}>
+                    OAuth ✓ · machine {machineCard.device ? '✓' : 'required'} · installation {dogfoodEnrollment?.status || 'checking'}
+                  </Text>
+                  {dogfoodEnrollment?.installationId ? (
+                    <Text selectable style={styles.dogfoodInstallationId}>
+                      This device · {dogfoodEnrollment.installationId}
+                    </Text>
+                  ) : null}
+                  {dogfoodEnrollment?.status !== 'active' ? (
+                    <View style={styles.dogfoodPendingBox}>
+                      <Text style={styles.dogfoodPendingText}>
+                        {dogfoodEnrollment?.error
+                          || 'Approve this installation from Yaver → Settings → Third-party app testing. A UUID alone never grants access.'}
+                      </Text>
+                      <Pressable
+                        onPress={() => void loadDogfoodOnboarding()}
+                        style={({ pressed }) => [styles.runnerRefreshBtn, pressed && styles.buttonPressed]}
+                      >
+                        <Text style={styles.runnerRefreshBtnText}>{dogfoodSetupLoading ? 'Checking…' : 'Check approval'}</Text>
+                      </Pressable>
+                    </View>
+                  ) : (
+                    <>
+                      <Text style={styles.dogfoodStepLabel}>Project on selected machine</Text>
+                      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.dogfoodChoiceRow}>
+                        {dogfoodProjects.map((project) => (
+                          <Pressable
+                            key={project.path}
+                            onPress={() => {
+                              setDogfoodProject(project);
+                              setDogfoodLane(defaultDogfoodLane(project.framework || YaverFeedback.getDogfoodOnboarding()?.framework || 'expo'));
+                              setDogfoodRuntime(null);
+                            }}
+                            style={[styles.dogfoodChoice, dogfoodProject?.path === project.path && styles.dogfoodChoiceSelected]}
+                          >
+                            <Text style={[styles.dogfoodChoiceText, dogfoodProject?.path === project.path && styles.dogfoodChoiceTextSelected]}>{project.name}</Text>
+                          </Pressable>
+                        ))}
+                      </ScrollView>
+                      <Text style={styles.dogfoodStepLabel}>Runtime lane</Text>
+                      <View style={styles.dogfoodChoiceRow}>
+                        {dogfoodLaneOptions(
+                          dogfoodProject?.framework || YaverFeedback.getDogfoodOnboarding()?.framework || 'expo',
+                          { nativeRuntimeAvailable: dogfoodNativeAvailable },
+                        ).map((option) => (
+                          <Pressable
+                            key={option.lane}
+                            onPress={() => option.supported && setDogfoodLane(option.lane)}
+                            style={[
+                              styles.dogfoodChoice,
+                              dogfoodLane === option.lane && styles.dogfoodChoiceSelected,
+                              !option.supported && styles.actionBtnDisabled,
+                            ]}
+                            accessibilityState={{ disabled: !option.supported, selected: dogfoodLane === option.lane }}
+                          >
+                            <Text style={[styles.dogfoodChoiceText, dogfoodLane === option.lane && styles.dogfoodChoiceTextSelected]}>{option.label}</Text>
+                          </Pressable>
+                        ))}
+                      </View>
+                      <Text style={styles.dogfoodWizardHint}>
+                        Runner: {[preferredRunner || 'automatic', preferredModel].filter(Boolean).join(' · ')}. Change it under Coding Agents below.
+                      </Text>
+                      <ActionRow
+                        label={dogfoodRuntime && !['idle', 'ready', 'failed', 'stopped'].includes(dogfoodRuntime.phase) ? dogfoodRuntime.message : 'Start Dogfood'}
+                        tint="#818cf8"
+                        onPress={() => void startDogfoodRuntime()}
+                        disabled={!dogfoodProject || !!(dogfoodRuntime && !['idle', 'ready', 'failed', 'stopped'].includes(dogfoodRuntime.phase))}
+                        busy={!!dogfoodRuntime && !['idle', 'ready', 'failed', 'stopped'].includes(dogfoodRuntime.phase)}
+                      />
+                      {dogfoodRuntime ? (
+                        <View style={styles.dogfoodConsole}>
+                          <Text style={styles.dogfoodConsoleStatus}>{dogfoodRuntime.message}</Text>
+                          {dogfoodRuntime.logs.slice(-80).map((line, index) => (
+                            <Text key={`${line.at}-${index}`} selectable style={styles.dogfoodConsoleLine}>{line.text}</Text>
+                          ))}
+                          {dogfoodRuntime.failure ? (
+                            <Text style={styles.dogfoodConsoleError}>{dogfoodRuntime.failure.error}{'\n'}{dogfoodRuntime.failure.remedy}</Text>
+                          ) : null}
+                          {dogfoodRuntime.result?.url ? (
+                            <Pressable onPress={() => void Linking.openURL(dogfoodRuntime.result!.url!)} style={styles.dogfoodOpenPreview}>
+                              <Text style={styles.dogfoodOpenPreviewText}>Open dogfooded app</Text>
+                            </Pressable>
+                          ) : null}
+                        </View>
+                      ) : null}
+                    </>
+                  )}
+                </View>
+              ) : null}
               <Pressable
                 onPress={() => {
                   if (!YaverFeedback.isAuthed()) {
@@ -960,7 +1377,7 @@ export const FeedbackModal: React.FC = () => {
                         machineCard.status === 'offline' && styles.machineDotOffline,
                       ]}
                     />
-                    <Text style={styles.machineLabel}>Selected Machine</Text>
+                    <Text style={styles.machineLabel}>Coding Machine</Text>
                   </View>
                   <Text style={styles.machineAction}>
                     {machineCard.loading ? 'Refreshing…' : 'Change'}
@@ -972,6 +1389,17 @@ export const FeedbackModal: React.FC = () => {
                 <Text style={styles.machineMeta}>{machineCard.detail}</Text>
               </Pressable>
 
+              <View style={styles.machineRoutes}>
+                <View style={styles.machineRouteCard}>
+                  <Text style={styles.machineRouteLabel}>Coding machine</Text>
+                  <Text style={styles.machineRouteValue} numberOfLines={1}>{machineRouting.codingDeviceId || machineCard.title}</Text>
+                </View>
+                <View style={styles.machineRouteCard}>
+                  <Text style={styles.machineRouteLabel}>Render machine</Text>
+                  <Text style={styles.machineRouteValue} numberOfLines={1}>{machineRouting.renderDeviceId || machineRouting.codingDeviceId || machineCard.title}</Text>
+                </View>
+              </View>
+
               <View style={styles.runnerSection}>
                 <View style={styles.runnerSectionHeader}>
                   <View style={{ flex: 1 }}>
@@ -997,6 +1425,13 @@ export const FeedbackModal: React.FC = () => {
                   </Pressable>
                 </View>
 
+                <View style={styles.routingSummary}>
+                  <Text style={styles.routingSummaryLabel}>Vibing uses</Text>
+                  <Text style={styles.routingSummaryValue} numberOfLines={1}>
+                    {[preferredRunner || 'automatic runner', preferredModel].filter(Boolean).join(' · ')}
+                  </Text>
+                </View>
+
                 {runnerCards.map((row) => (
                   <View
                     key={row.id}
@@ -1021,20 +1456,53 @@ export const FeedbackModal: React.FC = () => {
                           {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 style={styles.runnerCardActions}>
+                        {row.ready ? (
+                          <Pressable
+                            onPress={() => {
+                              const nextModel = row.models?.find((model) => model.isDefault)?.id || row.models?.[0]?.id || '';
+                              setPreferredRunnerState(row.id);
+                              setPreferredModelState(nextModel);
+                              void setPreferredRunner(row.id);
+                              void setPreferredModel(nextModel || null);
+                            }}
+                            style={({ pressed }) => [styles.runnerActionBtn, preferredRunner === row.id && styles.runnerActionBtnSelected, pressed && styles.buttonPressed]}
+                            accessibilityRole="button"
+                            accessibilityLabel={`Use ${row.name} for Vibing`}
+                          >
+                            <Text style={styles.runnerActionBtnText}>{preferredRunner === row.id ? 'Using' : 'Use'}</Text>
+                          </Pressable>
+                        ) : null}
+                        {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>
                     </View>
+                    {preferredRunner === row.id && (row.models?.length || 0) > 0 ? (
+                      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.modelChoiceRow}>
+                        {row.models!.map((model) => (
+                          <Pressable
+                            key={model.id}
+                            onPress={() => {
+                              setPreferredModelState(model.id);
+                              void setPreferredModel(model.id);
+                            }}
+                            style={[styles.modelChoice, preferredModel === model.id && styles.modelChoiceSelected]}
+                            accessibilityRole="button"
+                            accessibilityLabel={`Use ${model.name || model.id} model`}
+                          >
+                            <Text style={[styles.modelChoiceText, preferredModel === model.id && styles.modelChoiceTextSelected]}>{model.name || model.id}</Text>
+                          </Pressable>
+                        ))}
+                      </ScrollView>
+                    ) : null}
                     {row.detail ? (
                       <Text style={styles.runnerCardDetail}>{row.detail}</Text>
                     ) : null}
@@ -1115,17 +1583,40 @@ 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>
+              ))}
+              </>
+              </View>
 
+              <View style={[styles.tabContent, activeTab !== 'chat' && styles.hidden]}>
               {/* 3. Vibing — expands to an input box on first tap
                    so the user says WHAT they want to vibe on, just
                    like the Yaver mobile app's Vibing tab. Second
@@ -1186,13 +1677,13 @@ export const FeedbackModal: React.FC = () => {
               )}
 
               {/* Screenshot & Fix */}
-              <ActionRow
+              {!dogfoodActive ? <ActionRow
                 label={action === 'capturing' ? 'Working…' : 'Screenshot & Fix'}
                 tint="#22c55e"
                 onPress={handleScreenshotAndFix}
                 disabled={busy}
                 busy={action === 'capturing'}
-              />
+              /> : null}
 
               {/* Deploy — opens an inline panel that talks to
                   /fleet/deploy-options on the agent and lets the user
@@ -1200,7 +1691,7 @@ export const FeedbackModal: React.FC = () => {
                   it on. Capabilities (e.g. "Linux can't TestFlight")
                   come from the agent's doctor probes — no client-side
                   platform smarts here. */}
-              {!showDeploy ? (
+              {!dogfoodActive && (!showDeploy ? (
                 <ActionRow
                   label="Deploy"
                   tint="#7f8cf7"
@@ -1209,7 +1700,8 @@ export const FeedbackModal: React.FC = () => {
                 />
               ) : (
                 <DeployPanel onClose={() => setShowDeploy(false)} />
-              )}
+              ))}
+              </View>
 
               {progress !== null && (
                 <View style={styles.progressTrack}>
@@ -1293,6 +1785,33 @@ const ActionRow: React.FC<ActionRowProps> = ({
 );
 
 const styles = StyleSheet.create({
+  dogfoodWizard: { gap: 10, borderRadius: 14, borderWidth: 1, borderColor: 'rgba(129,140,248,0.38)', backgroundColor: 'rgba(129,140,248,0.08)', padding: 13 },
+  dogfoodWizardTitle: { color: '#222229', fontSize: 17, fontWeight: '800' },
+  dogfoodWizardHint: { color: '#6f6f7b', fontSize: 12, lineHeight: 17 },
+  dogfoodInstallationId: { color: '#6555df', fontSize: 11, fontFamily: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'monospace' }) },
+  dogfoodPendingBox: { gap: 9, borderRadius: 11, padding: 10, backgroundColor: 'rgba(245,158,11,0.10)' },
+  dogfoodPendingText: { color: '#8a5a10', fontSize: 12, lineHeight: 17 },
+  dogfoodStepLabel: { color: '#555561', fontSize: 11, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.7 },
+  dogfoodChoiceRow: { flexDirection: 'row', gap: 7 },
+  dogfoodChoice: { borderRadius: 9, borderWidth: 1, borderColor: '#d8d8e3', backgroundColor: '#fff', paddingHorizontal: 10, paddingVertical: 8 },
+  dogfoodChoiceSelected: { borderColor: '#818cf8', backgroundColor: 'rgba(129,140,248,0.18)' },
+  dogfoodChoiceText: { color: '#666671', fontSize: 12, fontWeight: '700' },
+  dogfoodChoiceTextSelected: { color: '#5645d8' },
+  dogfoodConsole: { maxHeight: 260, gap: 4, borderRadius: 11, padding: 10, backgroundColor: '#15151b' },
+  dogfoodConsoleStatus: { color: '#a5b4fc', fontSize: 12, fontWeight: '800' },
+  dogfoodConsoleLine: { color: '#d1d5db', fontSize: 10, lineHeight: 14, fontFamily: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'monospace' }) },
+  dogfoodConsoleError: { color: '#fca5a5', fontSize: 11, lineHeight: 16, marginTop: 5 },
+  dogfoodOpenPreview: { alignSelf: 'flex-start', borderRadius: 9, paddingHorizontal: 11, paddingVertical: 8, marginTop: 6, backgroundColor: '#6555df' },
+  dogfoodOpenPreviewText: { color: '#fff', fontSize: 12, fontWeight: '800' },
+  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)',
@@ -1302,7 +1821,7 @@ const styles = StyleSheet.create({
     gap: 10,
   },
   vibeInput: {
-    color: '#fff',
+    color: '#24242b',
     fontSize: 15,
     minHeight: 64,
     textAlignVertical: 'top',
@@ -1353,7 +1872,7 @@ const styles = StyleSheet.create({
     justifyContent: 'flex-end',
   },
   modal: {
-    backgroundColor: '#141422',
+    backgroundColor: '#f8f8fb',
     borderTopLeftRadius: 22,
     borderTopRightRadius: 22,
     padding: 22,
@@ -1377,7 +1896,7 @@ const styles = StyleSheet.create({
   title: {
     fontSize: 20,
     fontWeight: '700',
-    color: '#fff',
+    color: '#17171d',
   },
   closeBtn: {
     width: 36,
@@ -1385,10 +1904,10 @@ const styles = StyleSheet.create({
     borderRadius: 18,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'rgba(255,255,255,0.08)',
+    backgroundColor: '#ededf3',
   },
   closeIcon: {
-    color: '#fff',
+    color: '#656570',
     fontSize: 22,
     lineHeight: 24,
     fontWeight: '400',
@@ -1407,12 +1926,19 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: '700',
   },
+  tabs: { flexDirection: 'row', gap: 6, padding: 3, borderRadius: 12, backgroundColor: '#ededf3' },
+  tab: { flex: 1, minHeight: 36, borderRadius: 9, alignItems: 'center', justifyContent: 'center' },
+  tabSelected: { backgroundColor: '#fff' },
+  tabText: { color: '#858590', fontSize: 12, fontWeight: '700' },
+  tabTextSelected: { color: '#6252e8' },
+  tabContent: { gap: 12 },
+  hidden: { display: 'none' },
   machineCard: {
     borderRadius: 14,
     borderWidth: 1,
     padding: 14,
-    backgroundColor: 'rgba(255,255,255,0.04)',
-    borderColor: 'rgba(255,255,255,0.12)',
+    backgroundColor: '#fff',
+    borderColor: '#e1e1e8',
   },
   machineCardLive: {
     backgroundColor: 'rgba(34,197,94,0.10)',
@@ -1426,6 +1952,10 @@ const styles = StyleSheet.create({
     backgroundColor: 'rgba(239,68,68,0.10)',
     borderColor: 'rgba(239,68,68,0.35)',
   },
+  machineRoutes: { flexDirection: 'row', gap: 8 },
+  machineRouteCard: { flex: 1, minWidth: 0, borderRadius: 11, padding: 10, gap: 3, backgroundColor: '#fff', borderWidth: 1, borderColor: '#e1e1e8' },
+  machineRouteLabel: { color: '#7b7b86', fontSize: 10, fontWeight: '700', textTransform: 'uppercase' },
+  machineRouteValue: { color: '#222229', fontSize: 12, fontWeight: '700' },
   machineHeader: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -1453,7 +1983,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#ef4444',
   },
   machineLabel: {
-    color: '#cbd5e1',
+    color: '#73737e',
     fontSize: 12,
     fontWeight: '700',
     textTransform: 'uppercase',
@@ -1465,12 +1995,12 @@ const styles = StyleSheet.create({
     fontWeight: '700',
   },
   machineName: {
-    color: '#fff',
+    color: '#222229',
     fontSize: 16,
     fontWeight: '700',
   },
   machineMeta: {
-    color: '#cbd5e1',
+    color: '#73737e',
     fontSize: 12,
     marginTop: 4,
     lineHeight: 17,
@@ -1485,33 +2015,33 @@ const styles = StyleSheet.create({
     gap: 10,
   },
   runnerSectionTitle: {
-    color: '#f8fafc',
+    color: '#222229',
     fontSize: 16,
     fontWeight: '700',
   },
   runnerSectionSubtitle: {
     marginTop: 2,
-    color: '#94a3b8',
+    color: '#83838e',
     fontSize: 12,
   },
   runnerRefreshBtn: {
     borderRadius: 10,
     borderWidth: 1,
-    borderColor: 'rgba(148,163,184,0.22)',
-    backgroundColor: 'rgba(15,23,42,0.65)',
+    borderColor: '#dedee7',
+    backgroundColor: '#fff',
     paddingHorizontal: 10,
     paddingVertical: 8,
   },
   runnerRefreshBtnText: {
-    color: '#cbd5e1',
+    color: '#5f5f69',
     fontSize: 12,
     fontWeight: '600',
   },
   runnerCard: {
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: 'rgba(148,163,184,0.14)',
-    backgroundColor: 'rgba(15,23,42,0.45)',
+    borderColor: '#e2e2e9',
+    backgroundColor: '#fff',
     paddingHorizontal: 12,
     paddingVertical: 11,
     gap: 6,
@@ -1533,15 +2063,16 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 10,
   },
+  runnerCardActions: { flexDirection: 'row', alignItems: 'center', gap: 6 },
   runnerCardTitle: {
-    color: '#f8fafc',
+    color: '#222229',
     fontSize: 14,
     fontWeight: '700',
   },
   runnerCardStatus: {
     marginTop: 2,
     fontSize: 12,
-    color: '#cbd5e1',
+    color: '#666671',
   },
   runnerCardStatusOk: {
     color: '#86efac',
@@ -1553,7 +2084,7 @@ const styles = StyleSheet.create({
     color: '#fca5a5',
   },
   runnerCardDetail: {
-    color: '#94a3b8',
+    color: '#858590',
     fontSize: 11,
     lineHeight: 16,
   },
@@ -1570,6 +2101,15 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: '700',
   },
+  runnerActionBtnSelected: { borderColor: '#818cf8', backgroundColor: 'rgba(79,70,229,0.44)' },
+  routingSummary: { flexDirection: 'row', alignItems: 'center', gap: 8, paddingHorizontal: 2 },
+  routingSummaryLabel: { color: '#7c7c87', fontSize: 11, fontWeight: '600' },
+  routingSummaryValue: { flex: 1, color: '#6555df', fontSize: 12, fontWeight: '700', textAlign: 'right' },
+  modelChoiceRow: { gap: 6, paddingTop: 2 },
+  modelChoice: { borderRadius: 9, borderWidth: 1, borderColor: 'rgba(148,163,184,0.18)', paddingHorizontal: 9, paddingVertical: 6 },
+  modelChoiceSelected: { borderColor: '#818cf8', backgroundColor: 'rgba(79,70,229,0.30)' },
+  modelChoiceText: { color: '#73737e', fontSize: 11 },
+  modelChoiceTextSelected: { color: '#5e4ce6', fontWeight: '700' },
   runnerSectionError: {
     color: '#fca5a5',
     fontSize: 12,
@@ -1581,7 +2121,7 @@ const styles = StyleSheet.create({
   progressTrack: {
     height: 6,
     borderRadius: 3,
-    backgroundColor: 'rgba(255,255,255,0.08)',
+    backgroundColor: '#e5e5eb',
     overflow: 'hidden',
     marginTop: 4,
   },
@@ -1608,10 +2148,10 @@ const styles = StyleSheet.create({
     paddingVertical: 6,
     paddingHorizontal: 10,
     borderRadius: 10,
-    backgroundColor: 'rgba(255,255,255,0.05)',
+    backgroundColor: '#ededf3',
   },
   quickIconToggleText: {
-    color: '#cbd5e1',
+    color: '#5f5f69',
     fontSize: 12,
     fontWeight: '700',
   },
@@ -1623,25 +2163,25 @@ const styles = StyleSheet.create({
     padding: 12,
   },
   quickIconNoteText: {
-    color: '#fde68a',
+    color: '#8a5a12',
     fontSize: 12,
     lineHeight: 17,
   },
   iconSelector: {
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.09)',
-    backgroundColor: 'rgba(255,255,255,0.03)',
+    borderColor: '#e1e1e8',
+    backgroundColor: '#fff',
     padding: 12,
     gap: 10,
   },
   iconSelectorTitle: {
-    color: '#f8fafc',
+    color: '#222229',
     fontSize: 13,
     fontWeight: '700',
   },
   iconSelectorText: {
-    color: '#cbd5e1',
+    color: '#73737e',
     fontSize: 12,
     lineHeight: 17,
   },
@@ -1655,8 +2195,8 @@ const styles = StyleSheet.create({
     minWidth: 84,
     borderRadius: 12,
     borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.08)',
-    backgroundColor: 'rgba(255,255,255,0.02)',
+    borderColor: '#e4e4ea',
+    backgroundColor: '#f8f8fb',
     paddingVertical: 10,
     paddingHorizontal: 8,
     alignItems: 'center',
@@ -1683,7 +2223,7 @@ const styles = StyleSheet.create({
     fontWeight: '700',
   },
   iconOptionText: {
-    color: '#e2e8f0',
+    color: '#555561',
     fontSize: 11,
     fontWeight: '600',
   },
@@ -1691,14 +2231,14 @@ const styles = StyleSheet.create({
     marginTop: 4,
     borderRadius: 14,
     borderWidth: 1,
-    borderColor: 'rgba(255,255,255,0.1)',
+    borderColor: '#e1e1e8',
     paddingVertical: 15,
     alignItems: 'center',
     justifyContent: 'center',
-    backgroundColor: 'rgba(255,255,255,0.04)',
+    backgroundColor: '#fff',
   },
   cancelBtnText: {
-    color: '#e5e7eb',
+    color: '#555561',
     fontSize: 15,
     fontWeight: '700',
   },