yaver-feedback-react-native 0.9.2 → 0.9.3

package/dist/FeedbackModal.js

@@ -42,11 +42,14 @@ const upload_1 = require("./upload");
 const P2PClient_1 = require("./P2PClient");
 const AuthOverlay_1 = require("./AuthOverlay");
 const QuickActionIcon_1 = require("./QuickActionIcon");
+const YaverModeBadge_1 = require("./YaverModeBadge");
 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 DogfoodRuntime_1 = require("./DogfoodRuntime");
+const P2PDogfoodDriver_1 = require("./P2PDogfoodDriver");
 const PRIMARY_RUNNER_IDS = ['claude', 'codex', 'opencode'];
 function normalizeRunnerStatusRows(rows) {
     const byId = new Map();
@@ -85,6 +88,7 @@ function normalizeRunnerStatusRows(rows) {
                 version: row.version,
                 tone: 'warning',
                 statusLine: 'Not installed on the selected machine',
+                models: row.models,
                 detail,
             };
         }
@@ -101,6 +105,7 @@ function normalizeRunnerStatusRows(rows) {
                 statusLine: configured
                     ? `${versionPrefix}Configured on the selected machine`
                     : `${versionPrefix}Needs provider config on the selected machine`,
+                models: row.models,
                 detail,
             };
         }
@@ -116,12 +121,34 @@ function normalizeRunnerStatusRows(rows) {
             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,
         };
     });
 }
+/**
+ * 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 = () => {
+    const [, refresh] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const sub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:dogfoodChanged', () => refresh((n) => n + 1));
+        return () => sub.remove();
+    }, []);
+    const cfg = YaverFeedback_1.YaverFeedback.getConfig();
+    if (cfg?.modeBadge === false)
+        return null;
+    const dogfood = YaverFeedback_1.YaverFeedback.getDogfoodStatus();
+    return (<YaverModeBadge_1.YaverModeBadge position={cfg?.modeBadgePosition ?? 'bottom-left'} force={dogfood.active} dogfood={dogfood.active} dogfoodLabel={dogfood.label} onExitDogfood={() => YaverFeedback_1.YaverFeedback.exitDogfoodMode()}/>);
+};
 const FeedbackModal = () => {
     const { width: winW, height: winH } = (0, react_native_1.useWindowDimensions)();
     const isTablet = Math.min(winW, winH) >= 600;
@@ -129,6 +156,7 @@ const FeedbackModal = () => {
     // looks empty on a 1024pt iPad. Mobile keeps 3-col.
     const iconOptionWidthOverride = isTablet ? '18%' : undefined;
     const [visible, setVisible] = (0, react_1.useState)(false);
+    const [dogfoodActive, setDogfoodActive] = (0, react_1.useState)(() => YaverFeedback_1.YaverFeedback.getDogfoodStatus().active);
     const [action, setAction] = (0, react_1.useState)('idle');
     const [error, setError] = (0, react_1.useState)(null);
     const [toast, setToast] = (0, react_1.useState)(null);
@@ -168,8 +196,93 @@ const FeedbackModal = () => {
     const [runnerStatusError, setRunnerStatusError] = (0, react_1.useState)(null);
     const [preferredRunner, setPreferredRunnerState] = (0, react_1.useState)(null);
     const [preferredModel, setPreferredModelState] = (0, react_1.useState)('');
+    const [activeTab, setActiveTab] = (0, react_1.useState)('chat');
     const [showOpenCodeConfig, setShowOpenCodeConfig] = (0, react_1.useState)(false);
+    const scrollRef = (0, react_1.useRef)(null);
+    const [dogfoodEnrollment, setDogfoodEnrollment] = (0, react_1.useState)(null);
+    const [dogfoodProjects, setDogfoodProjects] = (0, react_1.useState)([]);
+    const [dogfoodProject, setDogfoodProject] = (0, react_1.useState)(null);
+    const [dogfoodLane, setDogfoodLane] = (0, react_1.useState)('browser');
+    const [dogfoodNativeAvailable, setDogfoodNativeAvailable] = (0, react_1.useState)(false);
+    const [dogfoodRuntime, setDogfoodRuntime] = (0, react_1.useState)(null);
+    const [dogfoodSetupLoading, setDogfoodSetupLoading] = (0, react_1.useState)(false);
+    const dogfoodControllerRef = (0, react_1.useRef)(null);
     const mountedRef = (0, react_1.useRef)(true);
+    const loadDogfoodOnboarding = (0, react_1.useCallback)(async () => {
+        const onboarding = YaverFeedback_1.YaverFeedback.getDogfoodOnboarding();
+        if (!onboarding)
+            return;
+        setDogfoodSetupLoading(true);
+        setDogfoodEnrollment({ status: 'checking' });
+        try {
+            const enrolled = await YaverFeedback_1.YaverFeedback.enableDeviceDogfood(onboarding);
+            if (!mountedRef.current)
+                return;
+            setDogfoodEnrollment({ status: enrolled.status, installationId: enrolled.installationId });
+            if (enrolled.status !== 'active')
+                return;
+            let client = YaverFeedback_1.YaverFeedback.getP2PClient();
+            if (!client && await YaverFeedback_1.YaverFeedback.reconnect())
+                client = YaverFeedback_1.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((0, DogfoodRuntime_1.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);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        setDogfoodNativeAvailable(false);
+        const client = YaverFeedback_1.YaverFeedback.getP2PClient();
+        if (!client || !dogfoodProject)
+            return () => { cancelled = true; };
+        const framework = dogfoodProject.framework || YaverFeedback_1.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 = (0, react_1.useCallback)(async () => {
+        const client = YaverFeedback_1.YaverFeedback.getP2PClient();
+        const onboarding = YaverFeedback_1.YaverFeedback.getDogfoodOnboarding();
+        if (!client || !dogfoodProject || !onboarding)
+            return;
+        await dogfoodControllerRef.current?.stop().catch(() => { });
+        const framework = dogfoodProject.framework || onboarding.framework || 'expo';
+        const controller = new DogfoodRuntime_1.DogfoodController({
+            name: dogfoodProject.name,
+            workDir: dogfoodProject.path,
+            framework,
+            lane: dogfoodLane,
+        }, (0, P2PDogfoodDriver_1.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.
@@ -225,8 +338,7 @@ const FeedbackModal = () => {
         }
         try {
             const devices = await (0, auth_1.listReachableDevices)(cfg.authToken);
-            const all = [...devices.owned, ...devices.shared];
-            const device = all.find((candidate) => candidate.deviceId === cfg.preferredDeviceId) ?? null;
+            const device = devices.owned.find((candidate) => candidate.deviceId === cfg.preferredDeviceId) ?? null;
             if (!device) {
                 if (mountedRef.current) {
                     setMachineCard({
@@ -245,9 +357,8 @@ const FeedbackModal = () => {
             if (device.isOnline && !device.needsAuth && client) {
                 reachable = await client.health();
             }
-            const hostHint = device.hostEmail ? ` via ${device.hostEmail}` : '';
             let status = 'live';
-            let detail = `${device.platform}${hostHint}`;
+            let detail = device.platform;
             if (!device.isOnline) {
                 status = 'offline';
                 detail = 'Machine offline. Start `yaver serve` on the selected machine.';
@@ -320,7 +431,7 @@ const FeedbackModal = () => {
             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));
             }
@@ -358,13 +469,20 @@ const FeedbackModal = () => {
         mountedRef.current = true;
         const sub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:startReport', () => {
             if (YaverFeedback_1.YaverFeedback.isEnabled()) {
+                const onboarding = YaverFeedback_1.YaverFeedback.getDogfoodOnboarding();
+                const directDogfood = YaverFeedback_1.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).
@@ -384,6 +502,13 @@ const FeedbackModal = () => {
                 void loadRunnerStatuses();
             }
         });
+        const dogfoodSub = react_native_1.DeviceEventEmitter.addListener('yaverFeedback:dogfoodChanged', (payload) => {
+            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
@@ -407,9 +532,10 @@ const FeedbackModal = () => {
         return () => {
             mountedRef.current = false;
             sub.remove();
+            dogfoodSub.remove();
             statusSub.remove();
         };
-    }, [loadRunnerStatuses, loadSelectedMachine]);
+    }, [loadDogfoodOnboarding, loadRunnerStatuses, loadSelectedMachine]);
     (0, react_1.useEffect)(() => {
         if (!visible)
             return;
@@ -443,6 +569,12 @@ const FeedbackModal = () => {
             hideSub.remove();
         };
     }, [visible]);
+    (0, react_1.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 = (0, react_1.useCallback)((delayMs = 1200) => {
         setTimeout(() => {
             if (mountedRef.current)
@@ -458,6 +590,9 @@ const FeedbackModal = () => {
         setShowVibeInput(false);
         setVibePrompt('');
         setRunnerStatusError(null);
+        void dogfoodControllerRef.current?.stop().catch(() => { });
+        dogfoodControllerRef.current = null;
+        YaverFeedback_1.YaverFeedback.clearDogfoodOnboarding();
     }, []);
     // Helper: run a P2P call; on network failure, ask YaverFeedback to
     // re-query Convex for the fresh IP and retry once. Solves the common
@@ -555,8 +690,11 @@ const FeedbackModal = () => {
                 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);
+            await runWithReconnect(async () => {
+                const renderClient = YaverFeedback_1.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);
@@ -608,8 +746,11 @@ const FeedbackModal = () => {
             // 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_1.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);
@@ -837,6 +978,7 @@ const FeedbackModal = () => {
                 taskId: result.taskId,
                 initialPrompt: promptText,
                 project: identity.projectName,
+                projectPath: identity.projectPath,
                 runner: preferredRunner ?? undefined,
                 model: preferredModel ?? undefined,
             });
@@ -857,6 +999,7 @@ const FeedbackModal = () => {
     }, [closeSoon, isRecordingVideo, lastVideo]);
     */
     const busy = action !== 'idle';
+    const machineRouting = YaverFeedback_1.YaverFeedback.getMachineRouting();
     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;
@@ -864,14 +1007,18 @@ const FeedbackModal = () => {
     // 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_1.YaverFeedback.getP2PClient();
         return (<>
         <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} project={activeVibe.project} runner={activeVibe.runner} model={activeVibe.model} onClose={() => setActiveVibe(null)} onReload={async () => {
-                    const c = YaverFeedback_1.YaverFeedback.getP2PClient();
+        <YaverModeBadgeGate />
+        <react_native_1.Modal visible={visible} animationType="slide" transparent onRequestClose={handleClose}>
+          {client ? (<VibeChatScreen_1.VibeChatScreen client={client} initialTaskId={activeVibe.taskId} initialUserPrompt={activeVibe.initialPrompt} project={activeVibe.project} projectPath={activeVibe.projectPath} runner={activeVibe.runner} model={activeVibe.model} voiceInputEnabled={YaverFeedback_1.YaverFeedback.getConfig()?.voiceInputEnabled === true} onClose={() => setActiveVibe(null)} onNewTopic={() => {
+                    setActiveVibe(null);
+                    setShowVibeInput(true);
+                }} onMinimize={handleClose} codingMachine={YaverFeedback_1.YaverFeedback.getMachineRouting().codingDeviceId} renderMachine={YaverFeedback_1.YaverFeedback.getMachineRouting().renderDeviceId} onReload={async () => {
+                    const c = YaverFeedback_1.YaverFeedback.getRenderP2PClient();
                     if (!c)
                         throw new Error('Not connected');
                     await c.reloadApp();
@@ -882,6 +1029,7 @@ const FeedbackModal = () => {
     return (<>
       <AuthOverlay_1.AuthOverlay />
       <QuickActionIcon_1.QuickActionIcon />
+      <YaverModeBadgeGate />
       {visible && (<react_native_1.Modal visible={visible} animationType="slide" transparent onRequestClose={handleClose}>
           <react_native_1.Pressable style={styles.overlay} onPress={handleClose}>
             <react_native_1.KeyboardAvoidingView behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={react_native_1.Platform.OS === 'ios' ? 12 : 0} style={styles.kbAvoider} pointerEvents="box-none">
@@ -904,19 +1052,80 @@ const FeedbackModal = () => {
                 e.stopPropagation();
                 react_native_1.Keyboard.dismiss();
             }}>
-              <react_native_1.ScrollView style={styles.scroll} contentContainerStyle={[
+              <react_native_1.ScrollView ref={scrollRef} style={styles.scroll} contentContainerStyle={[
                 styles.scrollContent,
                 showVibeInput && keyboardInset > 0
                     ? { paddingBottom: 8 + keyboardInset }
                     : null,
-            ]} keyboardShouldPersistTaps="handled" keyboardDismissMode={react_native_1.Platform.OS === 'ios' ? 'interactive' : 'on-drag'}>
+            ]} keyboardShouldPersistTaps="handled" keyboardDismissMode={react_native_1.Platform.OS === 'ios' ? 'interactive' : 'on-drag'} contentInsetAdjustmentBehavior="always" automaticallyAdjustKeyboardInsets={react_native_1.Platform.OS === 'ios'}>
               <react_native_1.View style={styles.header}>
-                <react_native_1.Text style={styles.title}>Send Feedback</react_native_1.Text>
+                <react_native_1.Text style={styles.title}>
+                  {dogfoodActive ? `${YaverFeedback_1.YaverFeedback.getDogfoodStatus().label || 'App'} Developer Mode` : 'Send Feedback'}
+                </react_native_1.Text>
                 <react_native_1.Pressable onPress={handleClose} hitSlop={12} style={styles.closeBtn} accessibilityRole="button" accessibilityLabel="Close">
                   <react_native_1.Text style={styles.closeIcon}>×</react_native_1.Text>
                 </react_native_1.Pressable>
               </react_native_1.View>
 
+              <react_native_1.View style={styles.tabs} accessibilityRole="tablist">
+                {['chat', 'settings'].map((tab) => (<react_native_1.Pressable key={tab} onPress={() => setActiveTab(tab)} style={[styles.tab, activeTab === tab && styles.tabSelected]} accessibilityRole="tab" accessibilityState={{ selected: activeTab === tab }}>
+                    <react_native_1.Text style={[styles.tabText, activeTab === tab && styles.tabTextSelected]}>{tab === 'chat' ? 'Chat' : 'Settings'}</react_native_1.Text>
+                  </react_native_1.Pressable>))}
+              </react_native_1.View>
+
+              <react_native_1.View style={[styles.tabContent, activeTab !== 'settings' && styles.hidden]}>
+              <>
+              {YaverFeedback_1.YaverFeedback.getDogfoodOnboarding() ? (<react_native_1.View style={styles.dogfoodWizard}>
+                  <react_native_1.Text style={styles.dogfoodWizardTitle}>Dogfood this app</react_native_1.Text>
+                  <react_native_1.Text style={styles.dogfoodWizardHint}>
+                    OAuth ✓ · machine {machineCard.device ? '✓' : 'required'} · installation {dogfoodEnrollment?.status || 'checking'}
+                  </react_native_1.Text>
+                  {dogfoodEnrollment?.installationId ? (<react_native_1.Text selectable style={styles.dogfoodInstallationId}>
+                      This device · {dogfoodEnrollment.installationId}
+                    </react_native_1.Text>) : null}
+                  {dogfoodEnrollment?.status !== 'active' ? (<react_native_1.View style={styles.dogfoodPendingBox}>
+                      <react_native_1.Text style={styles.dogfoodPendingText}>
+                        {dogfoodEnrollment?.error
+                        || 'Approve this installation from Yaver → Settings → Third-party app testing. A UUID alone never grants access.'}
+                      </react_native_1.Text>
+                      <react_native_1.Pressable onPress={() => void loadDogfoodOnboarding()} style={({ pressed }) => [styles.runnerRefreshBtn, pressed && styles.buttonPressed]}>
+                        <react_native_1.Text style={styles.runnerRefreshBtnText}>{dogfoodSetupLoading ? 'Checking…' : 'Check approval'}</react_native_1.Text>
+                      </react_native_1.Pressable>
+                    </react_native_1.View>) : (<>
+                      <react_native_1.Text style={styles.dogfoodStepLabel}>Project on selected machine</react_native_1.Text>
+                      <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.dogfoodChoiceRow}>
+                        {dogfoodProjects.map((project) => (<react_native_1.Pressable key={project.path} onPress={() => {
+                            setDogfoodProject(project);
+                            setDogfoodLane((0, DogfoodRuntime_1.defaultDogfoodLane)(project.framework || YaverFeedback_1.YaverFeedback.getDogfoodOnboarding()?.framework || 'expo'));
+                            setDogfoodRuntime(null);
+                        }} style={[styles.dogfoodChoice, dogfoodProject?.path === project.path && styles.dogfoodChoiceSelected]}>
+                            <react_native_1.Text style={[styles.dogfoodChoiceText, dogfoodProject?.path === project.path && styles.dogfoodChoiceTextSelected]}>{project.name}</react_native_1.Text>
+                          </react_native_1.Pressable>))}
+                      </react_native_1.ScrollView>
+                      <react_native_1.Text style={styles.dogfoodStepLabel}>Runtime lane</react_native_1.Text>
+                      <react_native_1.View style={styles.dogfoodChoiceRow}>
+                        {(0, DogfoodRuntime_1.dogfoodLaneOptions)(dogfoodProject?.framework || YaverFeedback_1.YaverFeedback.getDogfoodOnboarding()?.framework || 'expo', { nativeRuntimeAvailable: dogfoodNativeAvailable }).map((option) => (<react_native_1.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 }}>
+                            <react_native_1.Text style={[styles.dogfoodChoiceText, dogfoodLane === option.lane && styles.dogfoodChoiceTextSelected]}>{option.label}</react_native_1.Text>
+                          </react_native_1.Pressable>))}
+                      </react_native_1.View>
+                      <react_native_1.Text style={styles.dogfoodWizardHint}>
+                        Runner: {[preferredRunner || 'automatic', preferredModel].filter(Boolean).join(' · ')}. Change it under Coding Agents below.
+                      </react_native_1.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 ? (<react_native_1.View style={styles.dogfoodConsole}>
+                          <react_native_1.Text style={styles.dogfoodConsoleStatus}>{dogfoodRuntime.message}</react_native_1.Text>
+                          {dogfoodRuntime.logs.slice(-80).map((line, index) => (<react_native_1.Text key={`${line.at}-${index}`} selectable style={styles.dogfoodConsoleLine}>{line.text}</react_native_1.Text>))}
+                          {dogfoodRuntime.failure ? (<react_native_1.Text style={styles.dogfoodConsoleError}>{dogfoodRuntime.failure.error}{'\n'}{dogfoodRuntime.failure.remedy}</react_native_1.Text>) : null}
+                          {dogfoodRuntime.result?.url ? (<react_native_1.Pressable onPress={() => void react_native_1.Linking.openURL(dogfoodRuntime.result.url)} style={styles.dogfoodOpenPreview}>
+                              <react_native_1.Text style={styles.dogfoodOpenPreviewText}>Open dogfooded app</react_native_1.Text>
+                            </react_native_1.Pressable>) : null}
+                        </react_native_1.View>) : null}
+                    </>)}
+                </react_native_1.View>) : null}
               <react_native_1.Pressable onPress={() => {
                 if (!YaverFeedback_1.YaverFeedback.isAuthed()) {
                     YaverFeedback_1.YaverFeedback.showLogin();
@@ -937,7 +1146,7 @@ const FeedbackModal = () => {
                 machineCard.status === 'attention' && styles.machineDotAttention,
                 machineCard.status === 'offline' && styles.machineDotOffline,
             ]}/>
-                    <react_native_1.Text style={styles.machineLabel}>Selected Machine</react_native_1.Text>
+                    <react_native_1.Text style={styles.machineLabel}>Coding Machine</react_native_1.Text>
                   </react_native_1.View>
                   <react_native_1.Text style={styles.machineAction}>
                     {machineCard.loading ? 'Refreshing…' : 'Change'}
@@ -949,6 +1158,17 @@ 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.machineRoutes}>
+                <react_native_1.View style={styles.machineRouteCard}>
+                  <react_native_1.Text style={styles.machineRouteLabel}>Coding machine</react_native_1.Text>
+                  <react_native_1.Text style={styles.machineRouteValue} numberOfLines={1}>{machineRouting.codingDeviceId || machineCard.title}</react_native_1.Text>
+                </react_native_1.View>
+                <react_native_1.View style={styles.machineRouteCard}>
+                  <react_native_1.Text style={styles.machineRouteLabel}>Render machine</react_native_1.Text>
+                  <react_native_1.Text style={styles.machineRouteValue} numberOfLines={1}>{machineRouting.renderDeviceId || machineRouting.codingDeviceId || machineCard.title}</react_native_1.Text>
+                </react_native_1.View>
+              </react_native_1.View>
+
               <react_native_1.View style={styles.runnerSection}>
                 <react_native_1.View style={styles.runnerSectionHeader}>
                   <react_native_1.View style={{ flex: 1 }}>
@@ -969,6 +1189,13 @@ const FeedbackModal = () => {
                   </react_native_1.Pressable>
                 </react_native_1.View>
 
+                <react_native_1.View style={styles.routingSummary}>
+                  <react_native_1.Text style={styles.routingSummaryLabel}>Vibing uses</react_native_1.Text>
+                  <react_native_1.Text style={styles.routingSummaryValue} numberOfLines={1}>
+                    {[preferredRunner || 'automatic runner', preferredModel].filter(Boolean).join(' · ')}
+                  </react_native_1.Text>
+                </react_native_1.View>
+
                 {runnerCards.map((row) => (<react_native_1.View key={row.id} style={[
                     styles.runnerCard,
                     row.tone === 'ok' && styles.runnerCardOk,
@@ -987,13 +1214,29 @@ const FeedbackModal = () => {
                           {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 style={styles.runnerCardActions}>
+                        {row.ready ? (<react_native_1.Pressable onPress={() => {
+                        const nextModel = row.models?.find((model) => model.isDefault)?.id || row.models?.[0]?.id || '';
+                        setPreferredRunnerState(row.id);
+                        setPreferredModelState(nextModel);
+                        void (0, preferences_1.setPreferredRunner)(row.id);
+                        void (0, preferences_1.setPreferredModel)(nextModel || null);
+                    }} style={({ pressed }) => [styles.runnerActionBtn, preferredRunner === row.id && styles.runnerActionBtnSelected, pressed && styles.buttonPressed]} accessibilityRole="button" accessibilityLabel={`Use ${row.name} for Vibing`}>
+                            <react_native_1.Text style={styles.runnerActionBtnText}>{preferredRunner === row.id ? 'Using' : 'Use'}</react_native_1.Text>
+                          </react_native_1.Pressable>) : null}
+                        {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>
                     </react_native_1.View>
+                    {preferredRunner === row.id && (row.models?.length || 0) > 0 ? (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.modelChoiceRow}>
+                        {row.models.map((model) => (<react_native_1.Pressable key={model.id} onPress={() => {
+                            setPreferredModelState(model.id);
+                            void (0, preferences_1.setPreferredModel)(model.id);
+                        }} style={[styles.modelChoice, preferredModel === model.id && styles.modelChoiceSelected]} accessibilityRole="button" accessibilityLabel={`Use ${model.name || model.id} model`}>
+                            <react_native_1.Text style={[styles.modelChoiceText, preferredModel === model.id && styles.modelChoiceTextSelected]}>{model.name || model.id}</react_native_1.Text>
+                          </react_native_1.Pressable>))}
+                      </react_native_1.ScrollView>) : null}
                     {row.detail ? (<react_native_1.Text style={styles.runnerCardDetail}>{row.detail}</react_native_1.Text>) : null}
                   </react_native_1.View>))}
 
@@ -1073,7 +1316,10 @@ const FeedbackModal = () => {
                     : reloadAction.disabledReason}
                   </react_native_1.Text>
                 </react_native_1.View>))}
+              </>
+              </react_native_1.View>
 
+              <react_native_1.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
@@ -1100,7 +1346,7 @@ const FeedbackModal = () => {
                 </react_native_1.Text>)}
 
               {/* Screenshot & Fix */}
-              <ActionRow label={action === 'capturing' ? 'Working…' : 'Screenshot & Fix'} tint="#22c55e" onPress={handleScreenshotAndFix} disabled={busy} busy={action === 'capturing'}/>
+              {!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
@@ -1108,7 +1354,8 @@ const FeedbackModal = () => {
                 it on. Capabilities (e.g. "Linux can't TestFlight")
                 come from the agent's doctor probes — no client-side
                 platform smarts here. */}
-              {!showDeploy ? (<ActionRow label="Deploy" tint="#7f8cf7" onPress={() => setShowDeploy(true)} disabled={busy}/>) : (<DeployPanel_1.DeployPanel onClose={() => setShowDeploy(false)}/>)}
+              {!dogfoodActive && (!showDeploy ? (<ActionRow label="Deploy" tint="#7f8cf7" onPress={() => setShowDeploy(true)} disabled={busy}/>) : (<DeployPanel_1.DeployPanel onClose={() => setShowDeploy(false)}/>))}
+              </react_native_1.View>
 
               {progress !== null && (<react_native_1.View style={styles.progressTrack}>
                   <react_native_1.View style={[
@@ -1149,6 +1396,24 @@ 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({
+    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: react_native_1.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: react_native_1.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,
     },
@@ -1167,7 +1432,7 @@ const styles = react_native_1.StyleSheet.create({
         gap: 10,
     },
     vibeInput: {
-        color: '#fff',
+        color: '#24242b',
         fontSize: 15,
         minHeight: 64,
         textAlignVertical: 'top',
@@ -1218,7 +1483,7 @@ const styles = react_native_1.StyleSheet.create({
         justifyContent: 'flex-end',
     },
     modal: {
-        backgroundColor: '#141422',
+        backgroundColor: '#f8f8fb',
         borderTopLeftRadius: 22,
         borderTopRightRadius: 22,
         padding: 22,
@@ -1242,7 +1507,7 @@ const styles = react_native_1.StyleSheet.create({
     title: {
         fontSize: 20,
         fontWeight: '700',
-        color: '#fff',
+        color: '#17171d',
     },
     closeBtn: {
         width: 36,
@@ -1250,10 +1515,10 @@ const styles = react_native_1.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',
@@ -1272,12 +1537,19 @@ const styles = react_native_1.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)',
@@ -1291,6 +1563,10 @@ const styles = react_native_1.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',
@@ -1318,7 +1594,7 @@ const styles = react_native_1.StyleSheet.create({
         backgroundColor: '#ef4444',
     },
     machineLabel: {
-        color: '#cbd5e1',
+        color: '#73737e',
         fontSize: 12,
         fontWeight: '700',
         textTransform: 'uppercase',
@@ -1330,12 +1606,12 @@ const styles = react_native_1.StyleSheet.create({
         fontWeight: '700',
     },
     machineName: {
-        color: '#fff',
+        color: '#222229',
         fontSize: 16,
         fontWeight: '700',
     },
     machineMeta: {
-        color: '#cbd5e1',
+        color: '#73737e',
         fontSize: 12,
         marginTop: 4,
         lineHeight: 17,
@@ -1350,33 +1626,33 @@ const styles = react_native_1.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,
@@ -1398,15 +1674,16 @@ const styles = react_native_1.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',
@@ -1418,7 +1695,7 @@ const styles = react_native_1.StyleSheet.create({
         color: '#fca5a5',
     },
     runnerCardDetail: {
-        color: '#94a3b8',
+        color: '#858590',
         fontSize: 11,
         lineHeight: 16,
     },
@@ -1435,6 +1712,15 @@ const styles = react_native_1.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,
@@ -1446,7 +1732,7 @@ const styles = react_native_1.StyleSheet.create({
     progressTrack: {
         height: 6,
         borderRadius: 3,
-        backgroundColor: 'rgba(255,255,255,0.08)',
+        backgroundColor: '#e5e5eb',
         overflow: 'hidden',
         marginTop: 4,
     },
@@ -1473,10 +1759,10 @@ const styles = react_native_1.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',
     },
@@ -1488,25 +1774,25 @@ const styles = react_native_1.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,
     },
@@ -1520,8 +1806,8 @@ const styles = react_native_1.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',
@@ -1548,7 +1834,7 @@ const styles = react_native_1.StyleSheet.create({
         fontWeight: '700',
     },
     iconOptionText: {
-        color: '#e2e8f0',
+        color: '#555561',
         fontSize: 11,
         fontWeight: '600',
     },
@@ -1556,14 +1842,14 @@ const styles = react_native_1.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',
     },