yaver-feedback-react-native 0.9.2 → 0.9.4

package/dist/P2PDogfoodDriver.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createP2PDogfoodDriver = createP2PDogfoodDriver;
+const DogfoodRuntime_1 = require("./DogfoodRuntime");
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
+function reportedPreview(status) {
+    return String(status.previewUrl || status.bundleUrl || '').trim();
+}
+/**
+ * Ready-to-use driver for app owners who authenticate with Yaver's normal
+ * account flow. Their UI owns the trigger and preview surface; this adapter
+ * owns the existing Projects endpoints and raw build log stream.
+ */
+function createP2PDogfoodDriver(client, options = {}) {
+    const startupTimeoutMs = Math.max(1, options.startupTimeoutMs ?? 155000);
+    const pollIntervalMs = Math.max(1, options.pollIntervalMs ?? 600);
+    return {
+        async prepare(context) {
+            const close = client.subscribeDogfoodDevEvents((event) => (0, DogfoodRuntime_1.runtimeLogLinesFromDevEvent)(event).forEach((line) => context.log(line)), (health) => {
+                if (health)
+                    context.log({ text: `[logs] ${health.message}`, at: Date.now(), stream: 'system' });
+            });
+            context.registerCleanup(close, 'transient');
+        },
+        async start(context) {
+            const { project } = context;
+            if (project.lane === 'webrtc') {
+                context.setPhase('starting', `Finding a native runtime for ${project.name}…`);
+                const capabilities = await client.getDogfoodRemoteRuntimeCapabilities(project.workDir, project.framework);
+                const nativeTargets = capabilities.targets.filter((target) => target.enabled && target.id !== 'browser-window');
+                const target = project.nativeTargetId
+                    ? nativeTargets.find((candidate) => candidate.id === project.nativeTargetId)
+                    : nativeTargets[0];
+                if (!target) {
+                    throw new DogfoodRuntime_1.DogfoodRuntimeError({
+                        code: 'DOGFOOD_NATIVE_RUNTIME_UNAVAILABLE',
+                        error: project.nativeTargetId
+                            ? `Native runtime ${project.nativeTargetId} is not available.`
+                            : 'No native simulator, emulator, or device runtime is available.',
+                        remedy: 'Start or install a native runtime on the selected machine, then retry WebRTC; Browser lane remains available.',
+                        retryable: true,
+                    });
+                }
+                context.setPhase('starting', `Starting ${target.label} over WebRTC…`);
+                const session = await client.startDogfoodRemoteRuntime(project.workDir, project.framework, target.id);
+                context.registerCleanup(() => client.stopDogfoodRemoteRuntime(session.id), 'session');
+                return {
+                    lane: 'webrtc',
+                    sessionId: session.id,
+                    metadata: { target, session, framework: project.framework, workDir: project.workDir },
+                };
+            }
+            context.setPhase(project.lane === 'hermes' ? 'compiling' : 'starting', project.lane === 'hermes' ? `Compiling ${project.name} with Hermes…` : `Starting ${project.name} in the browser…`);
+            const status = await client.startDogfoodDevServer({
+                framework: project.framework,
+                workDir: project.workDir,
+                lane: project.lane,
+            });
+            // Browser Dogfood owns a long-lived dev server. Hermes is a one-shot
+            // build + delivery to the Yaver container; calling /dev/stop when that
+            // guest exits can kill an unrelated browser preview on the same box.
+            if (project.lane === 'browser') {
+                context.registerCleanup(() => client.stopDogfoodDevServer(), 'session');
+            }
+            if (status.error) {
+                throw new DogfoodRuntime_1.DogfoodRuntimeError({
+                    code: 'DOGFOOD_DEV_SERVER_FAILED', error: status.error,
+                    remedy: 'Fix the named project/runtime error, then retry Dogfood.', retryable: true,
+                });
+            }
+            let latest = status;
+            let reported = reportedPreview(latest);
+            if (project.lane === 'browser' && !reported) {
+                context.setPhase('compiling', `Compiling ${project.name} for the browser…`);
+                const deadline = Date.now() + startupTimeoutMs;
+                while (context.isCurrent() && Date.now() < deadline) {
+                    await delay(pollIntervalMs);
+                    const polled = await client.getDogfoodDevServerStatus();
+                    if (!polled)
+                        continue;
+                    latest = polled;
+                    if (latest.error && !latest.building) {
+                        throw new DogfoodRuntime_1.DogfoodRuntimeError({
+                            code: 'DOGFOOD_DEV_SERVER_FAILED', error: latest.error,
+                            remedy: 'Fix the named project/runtime error, then retry Dogfood.', retryable: true,
+                        });
+                    }
+                    reported = reportedPreview(latest);
+                    if (reported && (latest.running || latest.serving))
+                        break;
+                }
+                if (!context.isCurrent()) {
+                    throw new DogfoodRuntime_1.DogfoodRuntimeError({
+                        code: 'DOGFOOD_ATTEMPT_REPLACED', error: 'A newer Dogfood attempt replaced this compile.',
+                        remedy: 'Wait for the newer attempt.', retryable: true,
+                    });
+                }
+                if (!reported) {
+                    throw new DogfoodRuntime_1.DogfoodRuntimeError({
+                        code: 'DOGFOOD_NO_RENDER_URL',
+                        error: `The dev server did not report a browser preview URL within ${Math.ceil(startupTimeoutMs / 1000)} seconds.`,
+                        remedy: 'Read the live npm/compiler output above, fix the named failure, then retry. Flutter uses `-d web-server`; Expo/RN needs react-native-web.',
+                        retryable: true,
+                    });
+                }
+            }
+            return {
+                lane: project.lane,
+                url: reported ? client.resolveDogfoodUrl(reported) : undefined,
+                metadata: {
+                    framework: latest.framework || project.framework,
+                    workDir: latest.workDir || project.workDir,
+                    ...(project.lane === 'hermes' ? { delivered: latest.running === true } : {}),
+                },
+            };
+        },
+    };
+}

package/dist/PairDeviceModal.d.ts

@@ -16,9 +16,8 @@ import type { RemoteDevice } from './auth';
  *      report `needsAuth=false` in /devices/list.
  *
  * This avoids making the user bounce to the Yaver mobile app just to
- * adopt a machine. Works for owners and shared-scope guests since the
- * pair endpoint accepts any valid Convex session that matches the
- * expected account type.
+ * adopt one of their own machines. The pair endpoint verifies the signed-in
+ * account as the machine owner.
  */
 export interface PairDeviceModalProps {
     device: RemoteDevice | null;

package/dist/ShakeDetector.js

@@ -97,6 +97,13 @@ class ShakeDetector {
      * want the extra native surface get the Dev-menu path only.
      */
     subscribeAccelerometer(onShake) {
+        // expo-sensors exposes an Accelerometer facade on web, but browsers have
+        // no native shake gesture and some versions construct a NativeEventEmitter
+        // backed by a module without addListener/removeListeners. Subscribing then
+        // crashes the host app's React commit phase. Preserve the SDK's explicit
+        // controls on web and skip only this impossible sensor transport.
+        if (react_native_1.Platform.OS === 'web')
+            return;
         let Accelerometer = null;
         try {
             // Optional peer dep — if it isn't installed, we simply skip this path.
@@ -113,23 +120,30 @@ class ShakeDetector {
         catch {
             // Some platforms reject zero-value intervals; fall through with defaults
         }
-        this.accelSub = Accelerometer.addListener(({ x, y, z }) => {
-            // Magnitude of acceleration vector (in g). Subtract 1 so a stationary
-            // device reports ~0 rather than the 1g of gravity.
-            const mag = Math.sqrt(x * x + y * y + z * z);
-            if (mag - 1 < ACCEL_THRESHOLD_G - 1)
-                return;
-            const now = Date.now();
-            this.peakTimestamps.push(now);
-            // Drop peaks that fell out of the rolling window.
-            while (this.peakTimestamps.length > 0 &&
-                now - this.peakTimestamps[0] > ACCEL_WINDOW_MS) {
-                this.peakTimestamps.shift();
-            }
-            if (this.peakTimestamps.length >= ACCEL_MIN_HITS) {
-                this.fire(onShake);
-            }
-        });
+        try {
+            this.accelSub = Accelerometer.addListener(({ x, y, z }) => {
+                // Magnitude of acceleration vector (in g). Subtract 1 so a stationary
+                // device reports ~0 rather than the 1g of gravity.
+                const mag = Math.sqrt(x * x + y * y + z * z);
+                if (mag - 1 < ACCEL_THRESHOLD_G - 1)
+                    return;
+                const now = Date.now();
+                this.peakTimestamps.push(now);
+                // Drop peaks that fell out of the rolling window.
+                while (this.peakTimestamps.length > 0 &&
+                    now - this.peakTimestamps[0] > ACCEL_WINDOW_MS) {
+                    this.peakTimestamps.shift();
+                }
+                if (this.peakTimestamps.length >= ACCEL_MIN_HITS) {
+                    this.fire(onShake);
+                }
+            });
+        }
+        catch {
+            // A host may include expo-sensors without linking its native module.
+            // Optional shake support must never take down the host application.
+            this.accelSub = null;
+        }
     }
 }
 exports.ShakeDetector = ShakeDetector;

package/dist/VibeChatScreen.d.ts

@@ -18,8 +18,18 @@ interface Props {
     /** Optional context forwarded to the voice stream so the agent runs
      *  the task against the right project / runner / model. */
     project?: string;
+    projectPath?: string;
     model?: string;
     runner?: string;
+    /** Show the optional voice/STT controls. Defaults to keyboard-only. */
+    voiceInputEnabled?: boolean;
+    /** Standalone SDK hosts use this to fold back to the floating Y without
+     * destroying the live task subscription or transcript state. */
+    onMinimize?: () => void;
+    codingMachine?: string;
+    renderMachine?: string;
+    /** Return to the SDK prompt composer to create a separate task/topic. */
+    onNewTopic?: () => void;
 }
-export declare function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onReload, project, model, runner, }: Props): React.JSX.Element;
+export declare function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onReload, project, projectPath, model, runner, voiceInputEnabled, onMinimize, codingMachine, renderMachine, onNewTopic, }: Props): React.JSX.Element;
 export {};

package/dist/VibeChatScreen.js

@@ -55,7 +55,8 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const voice_1 = require("./voice");
 const capture_1 = require("./capture");
-function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onReload, project, model, runner, }) {
+function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onReload, project, projectPath, model, runner, voiceInputEnabled = false, onMinimize, codingMachine, renderMachine, onNewTopic, }) {
+    const [activeTab, setActiveTab] = (0, react_1.useState)('chat');
     const [taskId, setTaskId] = (0, react_1.useState)(initialTaskId);
     const [turns, setTurns] = (0, react_1.useState)(() => [
         {
@@ -72,12 +73,27 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
         },
     ]);
     const [streamBuffer, setStreamBuffer] = (0, react_1.useState)('');
+    const [streamEpoch, setStreamEpoch] = (0, react_1.useState)(0);
     const [status, setStatus] = (0, react_1.useState)('running');
     const [followUp, setFollowUp] = (0, react_1.useState)('');
     const [isResuming, setIsResuming] = (0, react_1.useState)(false);
     const [isReloading, setIsReloading] = (0, react_1.useState)(false);
+    const [reloadQueued, setReloadQueued] = (0, react_1.useState)(false);
+    const [threads, setThreads] = (0, react_1.useState)(() => [{
+            id: initialTaskId,
+            title: initialUserPrompt || 'New topic',
+            status: 'running',
+        }]);
     const scrollRef = (0, react_1.useRef)(null);
     const abortRef = (0, react_1.useRef)(null);
+    const refreshThreads = (0, react_1.useCallback)(async () => {
+        try {
+            const list = await client.listVibeThreads({ projectName: project, projectPath });
+            setThreads(list.slice(0, 12));
+        }
+        catch { /* history is advisory; keep the active conversation usable */ }
+    }, [client, project, projectPath]);
+    (0, react_1.useEffect)(() => { void refreshThreads(); }, [refreshThreads]);
     // ── Voice vibe coding ──────────────────────────────────────────────
     const [voiceState, setVoiceState] = (0, react_1.useState)('idle');
     const [voiceAvailable, setVoiceAvailable] = (0, react_1.useState)(false);
@@ -97,6 +113,8 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
         const close = client.streamTaskOutput(taskId, (line) => {
             if (!live)
                 return;
+            if (line.includes('YAVER_THREAD_TITLE'))
+                return;
             // Filter our internal error sentinel from the SSE helper.
             if (line.startsWith('__error__:')) {
                 setStatus('failed');
@@ -109,7 +127,7 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
         }, (terminal) => {
             if (!live)
                 return;
-            setStatus(terminal === 'completed' ? 'done' : 'failed');
+            setStatus(terminal === 'completed' || terminal === 'review' ? 'done' : 'failed');
             // Move the buffered stream into a real assistant turn so the
             // user sees a stable render and can scroll back, then clear
             // the buffer for any follow-up.
@@ -127,6 +145,8 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
                 return next;
             });
             setStreamBuffer('');
+            setThreads((prev) => prev.map((thread) => thread.id === taskId ? { ...thread, status: terminal } : thread));
+            void refreshThreads();
         });
         abortRef.current = close;
         return () => {
@@ -136,7 +156,44 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
             }
             catch { /* ignore */ }
         };
-    }, [client, taskId]);
+    }, [client, refreshThreads, streamEpoch, taskId]);
+    const selectThread = (0, react_1.useCallback)(async (thread) => {
+        abortRef.current?.();
+        try {
+            const task = await client.getVibeThread(thread.id);
+            setTaskId(task.id);
+            setStatus(task.status === 'running' || task.status === 'queued' ? 'running' : task.status === 'completed' || task.status === 'review' ? 'done' : 'failed');
+            setStreamBuffer('');
+            setTurns((task.turns || []).filter((turn) => turn.role === 'user' || turn.role === 'assistant').map((turn, index) => ({
+                id: `${task.id}-${index}`,
+                role: turn.role,
+                text: turn.content,
+                timestamp: turn.timestamp ? new Date(turn.timestamp).getTime() : Date.now() + index,
+            })));
+        }
+        catch (error) {
+            setTurns((prev) => [...prev, { id: `thread-error-${Date.now()}`, role: 'status', text: error instanceof Error ? error.message : 'Could not open topic', timestamp: Date.now() }]);
+        }
+    }, [client]);
+    const removeThread = (0, react_1.useCallback)((thread) => {
+        const message = thread.status === 'running' || thread.status === 'queued'
+            ? 'This also stops the coding turn that is still running.'
+            : 'This removes the conversation from your history.';
+        react_native_1.Alert.alert('Remove topic?', message, [
+            { text: 'Cancel', style: 'cancel' },
+            { text: 'Remove', style: 'destructive', onPress: () => {
+                    void client.deleteVibeThread(thread.id).then(() => {
+                        setThreads((prev) => prev.filter((item) => item.id !== thread.id));
+                        if (thread.id === taskId)
+                            onNewTopic?.();
+                    }).catch((error) => {
+                        setTurns((prev) => [...prev, { id: `delete-error-${Date.now()}`, role: 'status', text: error instanceof Error ? error.message : 'Could not remove topic', timestamp: Date.now() }]);
+                    });
+                } },
+        ]);
+    }, [client, onNewTopic, taskId]);
+    const runningThread = threads.find((thread) => thread.status === 'running' || thread.status === 'queued');
+    const codingLocked = status === 'running' || !!runningThread;
     // Auto-scroll the transcript when new content lands.
     (0, react_1.useEffect)(() => {
         const t = setTimeout(() => {
@@ -146,7 +203,7 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
     }, [streamBuffer, turns]);
     const handleSendFollowUp = (0, react_1.useCallback)(async () => {
         const text = followUp.trim();
-        if (!text || isResuming)
+        if (!text || isResuming || codingLocked)
             return;
         setIsResuming(true);
         // Add user turn immediately for snappy UX.
@@ -157,17 +214,13 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
         ]);
         setFollowUp('');
         setStatus('running');
+        setThreads((prev) => prev.map((thread) => thread.id === taskId ? { ...thread, status: 'running' } : thread));
         setStreamBuffer('');
         try {
             await client.resumeTask({ taskId, userPrompt: text });
-            // resumeTask reuses the same taskId, so the SSE subscription
-            // above will pick up the new output stream automatically. To
-            // force a fresh subscription we momentarily flip taskId to a
-            // sentinel and back; cleaner than tearing down + re-attaching
-            // the SSE manually.
-            const same = taskId;
-            setTaskId(`${same}#`);
-            setTimeout(() => setTaskId(same), 0);
+            // resumeTask reuses the same task id; advance the subscription epoch so
+            // the existing SSE path reconnects without inventing an invalid id.
+            setStreamEpoch((value) => value + 1);
         }
         catch (e) {
             setStatus('failed');
@@ -184,10 +237,14 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
         finally {
             setIsResuming(false);
         }
-    }, [client, followUp, isResuming, taskId]);
+    }, [client, codingLocked, followUp, isResuming, taskId]);
     const handleReload = (0, react_1.useCallback)(async () => {
         if (isReloading || !onReload)
             return;
+        if (status === 'running') {
+            setReloadQueued(true);
+            return;
+        }
         setIsReloading(true);
         try {
             await onReload();
@@ -206,13 +263,21 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
         finally {
             setIsReloading(false);
         }
-    }, [isReloading, onReload]);
+    }, [isReloading, onReload, status]);
+    (0, react_1.useEffect)(() => {
+        if (!reloadQueued || status === 'running' || isReloading)
+            return;
+        setReloadQueued(false);
+        void handleReload();
+    }, [handleReload, isReloading, reloadQueued, status]);
     // Probe whether voice is usable: deps present (expo-av + expo-file-
     // system + buffer) AND the agent reports STT/TTS ready. Hide the mic
     // entirely otherwise so users never tap a dead button.
     (0, react_1.useEffect)(() => {
         let cancelled = false;
         (async () => {
+            if (!voiceInputEnabled)
+                return;
             if (!(0, capture_1.isVoiceCaptureSupported)() || !(0, voice_1.isVoiceStreamSupported)())
                 return;
             try {
@@ -235,7 +300,7 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
             catch { /* leave hidden */ }
         })();
         return () => { cancelled = true; };
-    }, [client]);
+    }, [client, voiceInputEnabled]);
     (0, react_1.useEffect)(() => () => { voiceSessionRef.current?.close(); }, []);
     // Local TTS: the agent streams no audio for "local"/"device" engines,
     // so the client speaks the result text with the device synthesizer.
@@ -371,15 +436,50 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
         thinking: 'thinking…',
         speaking: 'speaking…',
     };
-    return (<react_native_1.View style={styles.container}>
+    return (<react_native_1.KeyboardAvoidingView style={styles.container} behavior={react_native_1.Platform.OS === 'ios' ? 'padding' : 'height'} keyboardVerticalOffset={0}>
       <react_native_1.View style={styles.header}>
-        <react_native_1.Text style={styles.title}>Vibe</react_native_1.Text>
-        {onClose && (<react_native_1.TouchableOpacity onPress={onClose} accessibilityLabel="Close vibe chat">
-            <react_native_1.Text style={styles.close}>✕</react_native_1.Text>
-          </react_native_1.TouchableOpacity>)}
+        <react_native_1.View>
+          <react_native_1.Text style={styles.title}>Vibing</react_native_1.Text>
+          <react_native_1.Text style={styles.routeCaption} numberOfLines={1}>
+            {[runner || 'automatic runner', model].filter(Boolean).join(' · ')}
+          </react_native_1.Text>
+        </react_native_1.View>
+        <react_native_1.View style={styles.headerActions}>
+          {onMinimize ? <react_native_1.TouchableOpacity onPress={onMinimize} accessibilityLabel="Minimize Vibing"><react_native_1.Text style={styles.close}>−</react_native_1.Text></react_native_1.TouchableOpacity> : null}
+          {onClose ? <react_native_1.TouchableOpacity onPress={onClose} accessibilityLabel="End vibe chat"><react_native_1.Text style={styles.close}>✕</react_native_1.Text></react_native_1.TouchableOpacity> : null}
+        </react_native_1.View>
       </react_native_1.View>
 
-      <react_native_1.ScrollView ref={scrollRef} style={styles.transcript} contentContainerStyle={styles.transcriptContent} keyboardShouldPersistTaps="handled">
+      <react_native_1.View style={styles.tabs} accessibilityRole="tablist">
+        {['chat', 'settings'].map((tab) => (<react_native_1.TouchableOpacity 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.TouchableOpacity>))}
+      </react_native_1.View>
+
+      {activeTab === 'chat' && threads.length > 1 ? <react_native_1.View style={styles.topicRailWrap}>
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.topicRail}>
+          <react_native_1.TouchableOpacity style={styles.newTopicCard} onPress={onNewTopic} accessibilityLabel="Start a new topic">
+            <react_native_1.Text style={styles.newTopicPlus}>＋</react_native_1.Text>
+            <react_native_1.Text style={styles.newTopicText}>New</react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+          {threads.map((thread) => (<react_native_1.TouchableOpacity key={thread.id} style={[styles.topicCard, thread.id === taskId && styles.topicCardSelected]} onPress={() => { void selectThread(thread); }} accessibilityLabel={`Open ${thread.title}`}>
+              <react_native_1.View style={styles.topicCardTopline}>
+                <react_native_1.View style={[styles.topicDot, (thread.status === 'running' || thread.status === 'queued') && styles.topicDotLive]}/>
+                <react_native_1.Text style={styles.topicStatus}>{thread.status === 'completed' ? 'done' : thread.status}</react_native_1.Text>
+                <react_native_1.TouchableOpacity onPress={() => removeThread(thread)} hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }} accessibilityLabel={`Remove ${thread.title}`}><react_native_1.Text style={styles.topicRemove}>×</react_native_1.Text></react_native_1.TouchableOpacity>
+              </react_native_1.View>
+              <react_native_1.Text style={styles.topicTitle} numberOfLines={2}>{thread.title}</react_native_1.Text>
+            </react_native_1.TouchableOpacity>))}
+        </react_native_1.ScrollView>
+      </react_native_1.View> : activeTab === 'chat' && threads.length === 1 ? <react_native_1.View style={styles.singleTopicBar}>
+        <react_native_1.TouchableOpacity style={styles.singleTopicTitleButton} onPress={() => { void selectThread(threads[0]); }} accessibilityLabel={`Open ${threads[0].title}`}>
+          <react_native_1.Text style={styles.singleTopicTitle} numberOfLines={1}>{threads[0].title || 'Current topic'}</react_native_1.Text>
+        </react_native_1.TouchableOpacity>
+        {onNewTopic ? <react_native_1.TouchableOpacity style={styles.singleTopicAction} onPress={onNewTopic} accessibilityLabel="Start a new topic"><react_native_1.Text style={styles.singleTopicActionText}>＋</react_native_1.Text></react_native_1.TouchableOpacity> : null}
+        <react_native_1.TouchableOpacity style={styles.singleTopicAction} onPress={() => removeThread(threads[0])} accessibilityLabel={`Remove ${threads[0].title}`}><react_native_1.Text style={styles.singleTopicRemove}>×</react_native_1.Text></react_native_1.TouchableOpacity>
+      </react_native_1.View> : null}
+
+      <react_native_1.ScrollView ref={scrollRef} style={[styles.transcript, activeTab !== 'chat' && styles.hidden]} contentContainerStyle={styles.transcriptContent} keyboardShouldPersistTaps="handled">
         {turns.map((turn) => (<react_native_1.View key={turn.id} style={[
                 styles.turn,
                 turn.role === 'user' && styles.turnUser,
@@ -401,14 +501,34 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
           </react_native_1.View>)}
       </react_native_1.ScrollView>
 
-      <react_native_1.View style={styles.footer}>
-        {voiceAvailable && voiceState !== 'idle' && (<react_native_1.Text style={styles.engineCaption}>
+      <react_native_1.ScrollView style={[styles.settings, activeTab !== 'settings' && styles.hidden]} contentContainerStyle={styles.settingsContent}>
+        <react_native_1.Text style={styles.settingsLabel}>Coding route</react_native_1.Text>
+        <react_native_1.View style={styles.settingsCard}>
+          <react_native_1.Text style={styles.settingsMeta}>Coding machine · {codingMachine || 'selected machine'}</react_native_1.Text>
+          <react_native_1.Text style={styles.settingsMeta}>Render machine · {renderMachine || codingMachine || 'same machine'}</react_native_1.Text>
+          <react_native_1.Text style={styles.settingsTitle}>{runner || 'Automatic runner'}</react_native_1.Text>
+          <react_native_1.Text style={styles.settingsMeta}>{model || 'Runner default model'}</react_native_1.Text>
+          {project ? <react_native_1.Text style={styles.settingsMeta}>{project}</react_native_1.Text> : null}
+        </react_native_1.View>
+        <react_native_1.Text style={styles.settingsLabel}>Preview</react_native_1.Text>
+        <react_native_1.View style={styles.settingsCard}>
+          <react_native_1.Text style={styles.settingsTitle}>Reload rendered app</react_native_1.Text>
+          <react_native_1.Text style={styles.settingsMeta}>{reloadQueued ? 'Reload queued. It will run when coding finishes.' : status === 'running' ? 'Reload will run when the current coding turn finishes.' : 'Apply the latest rendered output without ending this chat.'}</react_native_1.Text>
+          {onReload ? <react_native_1.TouchableOpacity style={[styles.settingsButton, isReloading && styles.actionBtnDisabled]} onPress={handleReload} disabled={isReloading}>
+            <react_native_1.Text style={styles.settingsButtonText}>{isReloading ? 'Reloading…' : reloadQueued ? 'Reload Queued' : status === 'running' ? 'Queue Reload' : 'Reload'}</react_native_1.Text>
+          </react_native_1.TouchableOpacity> : null}
+        </react_native_1.View>
+        {onMinimize ? <react_native_1.TouchableOpacity style={styles.returnButton} onPress={onMinimize} accessibilityLabel="Return to app and keep Vibing running"><react_native_1.Text style={styles.returnButtonText}>Return to App</react_native_1.Text></react_native_1.TouchableOpacity> : null}
+      </react_native_1.ScrollView>
+
+      <react_native_1.View style={[styles.footer, activeTab !== 'chat' && styles.hidden]}>
+        {voiceInputEnabled && voiceAvailable && voiceState !== 'idle' && (<react_native_1.Text style={styles.engineCaption}>
             {voiceState === 'recording' ? 'listening' : voiceState === 'uploading' ? 'sending' : voiceState === 'thinking' ? 'agent working' : 'speaking'}
             {activeEngine ? ` · ${activeEngine}` : ` · ${voiceMode === 'flux' ? 'Flux (Deepgram)' : 'Local (whisper)'}`}
           </react_native_1.Text>)}
-        <react_native_1.TextInput style={styles.input} value={followUp} onChangeText={setFollowUp} placeholder={status === 'running' ? 'wait for the agent…' : 'follow up…'} placeholderTextColor="#666" editable={status !== 'running' && !isResuming} multiline/>
+        <react_native_1.TextInput style={styles.input} value={followUp} onChangeText={setFollowUp} placeholder={codingLocked ? runningThread?.id !== taskId ? 'another topic is coding…' : 'wait for the agent…' : 'follow up…'} placeholderTextColor="#666" editable={!codingLocked && !isResuming} multiline/>
         <react_native_1.View style={styles.actions}>
-          {voiceAvailable && (<>
+          {voiceInputEnabled && voiceAvailable && (<>
               {/* Local ↔ Flux engine toggle. Only shows Flux when the
                 agent has a Deepgram key; otherwise the label just
                 states "Local" so the active engine is always clear. */}
@@ -438,18 +558,18 @@ function VibeChatScreen({ client, initialTaskId, initialUserPrompt, onClose, onR
           <react_native_1.TouchableOpacity style={[
             styles.actionBtn,
             styles.sendBtn,
-            (isResuming || status === 'running' || !followUp.trim()) && styles.actionBtnDisabled,
-        ]} onPress={handleSendFollowUp} disabled={isResuming || status === 'running' || !followUp.trim()}>
+            (isResuming || codingLocked || !followUp.trim()) && styles.actionBtnDisabled,
+        ]} onPress={handleSendFollowUp} disabled={isResuming || codingLocked || !followUp.trim()}>
             <react_native_1.Text style={styles.actionText}>
               {isResuming ? '…' : '↑ send'}
             </react_native_1.Text>
           </react_native_1.TouchableOpacity>
         </react_native_1.View>
       </react_native_1.View>
-    </react_native_1.View>);
+    </react_native_1.KeyboardAvoidingView>);
 }
 const styles = react_native_1.StyleSheet.create({
-    container: { flex: 1, backgroundColor: '#0a0a0a' },
+    container: { flex: 1, backgroundColor: '#f8f8fb' },
     header: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -458,10 +578,36 @@ const styles = react_native_1.StyleSheet.create({
         paddingTop: 14,
         paddingBottom: 8,
         borderBottomWidth: 1,
-        borderBottomColor: 'rgba(255,255,255,0.08)',
+        borderBottomColor: '#e5e5ec',
     },
-    title: { color: '#fff', fontSize: 17, fontWeight: '600' },
-    close: { color: '#9ca3af', fontSize: 18 },
+    title: { color: '#17171d', fontSize: 17, fontWeight: '700' },
+    routeCaption: { color: '#858590', fontSize: 10, marginTop: 2, maxWidth: 250 },
+    headerActions: { flexDirection: 'row', alignItems: 'center', gap: 22 },
+    close: { color: '#656570', fontSize: 20, fontWeight: '700' },
+    tabs: { flexDirection: 'row', gap: 6, marginHorizontal: 12, marginTop: 8, padding: 3, borderRadius: 12, backgroundColor: '#ededf3' },
+    tab: { flex: 1, minHeight: 34, borderRadius: 9, alignItems: 'center', justifyContent: 'center' },
+    tabSelected: { backgroundColor: '#fff' },
+    tabText: { color: '#858590', fontSize: 12, fontWeight: '700' },
+    tabTextSelected: { color: '#6252e8' },
+    topicRailWrap: { minHeight: 102, borderBottomWidth: 1, borderBottomColor: '#e5e5ec' },
+    topicRail: { paddingHorizontal: 12, paddingVertical: 10, gap: 9 },
+    singleTopicBar: { minHeight: 40, paddingLeft: 12, paddingRight: 8, flexDirection: 'row', alignItems: 'center', borderBottomWidth: 1, borderBottomColor: '#e5e5ec' },
+    singleTopicTitleButton: { flex: 1, minWidth: 0, minHeight: 38, justifyContent: 'center' },
+    singleTopicTitle: { color: '#656570', fontSize: 11, fontWeight: '700' },
+    singleTopicAction: { width: 34, height: 34, alignItems: 'center', justifyContent: 'center' },
+    singleTopicActionText: { color: '#6252e8', fontSize: 20, lineHeight: 22 },
+    singleTopicRemove: { color: '#9a9aa5', fontSize: 20, lineHeight: 22 },
+    newTopicCard: { width: 72, minHeight: 80, borderRadius: 14, alignItems: 'center', justifyContent: 'center', backgroundColor: '#ebe8ff', borderWidth: 1, borderColor: '#d9d3ff' },
+    newTopicPlus: { color: '#6252e8', fontSize: 22, lineHeight: 24 },
+    newTopicText: { color: '#6252e8', fontSize: 12, fontWeight: '800' },
+    topicCard: { width: 172, minHeight: 80, borderRadius: 14, padding: 10, gap: 7, backgroundColor: '#fff', borderWidth: 1.5, borderColor: '#e1e1e8' },
+    topicCardSelected: { borderColor: '#7568f8', backgroundColor: '#faf9ff' },
+    topicCardTopline: { flexDirection: 'row', alignItems: 'center', gap: 6 },
+    topicDot: { width: 7, height: 7, borderRadius: 4, backgroundColor: '#9ca3af' },
+    topicDotLive: { backgroundColor: '#f59e0b' },
+    topicStatus: { flex: 1, color: '#858590', fontSize: 10, fontWeight: '700', textTransform: 'uppercase' },
+    topicRemove: { color: '#9a9aa5', fontSize: 18, lineHeight: 18 },
+    topicTitle: { color: '#24242b', fontSize: 13, lineHeight: 17, fontWeight: '700' },
     transcript: { flex: 1 },
     transcriptContent: { padding: 12, paddingBottom: 24 },
     turn: {
@@ -475,8 +621,8 @@ const styles = react_native_1.StyleSheet.create({
         alignSelf: 'flex-end',
     },
     turnAssistant: {
-        backgroundColor: 'rgba(255,255,255,0.06)',
-        borderColor: 'rgba(255,255,255,0.10)',
+        backgroundColor: '#fff',
+        borderColor: '#e4e4ea',
         borderWidth: 1,
         alignSelf: 'flex-start',
     },
@@ -485,7 +631,7 @@ const styles = react_native_1.StyleSheet.create({
         alignSelf: 'flex-start',
         paddingHorizontal: 4,
     },
-    turnText: { color: '#f1f5f9', fontSize: 14, lineHeight: 20 },
+    turnText: { color: '#28282f', fontSize: 14, lineHeight: 20 },
     spinnerRow: {
         flexDirection: 'row',
         alignItems: 'center',
@@ -495,15 +641,17 @@ const styles = react_native_1.StyleSheet.create({
     spinnerText: { color: '#9ca3af', fontSize: 12, marginLeft: 8 },
     footer: {
         borderTopWidth: 1,
-        borderTopColor: 'rgba(255,255,255,0.08)',
+        borderTopColor: '#e5e5ec',
         padding: 10,
     },
     input: {
         minHeight: 40,
         maxHeight: 120,
-        color: '#f1f5f9',
+        color: '#28282f',
         fontSize: 14,
-        backgroundColor: 'rgba(255,255,255,0.04)',
+        backgroundColor: '#fff',
+        borderWidth: 1,
+        borderColor: '#e2e2e9',
         borderRadius: 10,
         paddingHorizontal: 12,
         paddingVertical: 8,
@@ -520,12 +668,23 @@ const styles = react_native_1.StyleSheet.create({
         marginLeft: 8,
     },
     actionBtnDisabled: { opacity: 0.5 },
-    reloadBtn: { backgroundColor: 'rgba(255,255,255,0.08)' },
+    reloadBtn: { backgroundColor: '#e9e9ef' },
     voiceBtn: { backgroundColor: 'rgba(16,185,129,0.18)' },
     voiceBtnActive: { backgroundColor: '#ef4444' },
-    engineToggle: { backgroundColor: 'rgba(255,255,255,0.06)', marginRight: 'auto', marginLeft: 0 },
-    engineToggleText: { color: '#cbd5e1', fontSize: 12, fontWeight: '600' },
+    engineToggle: { backgroundColor: '#e9e9ef', marginRight: 'auto', marginLeft: 0 },
+    engineToggleText: { color: '#555561', fontSize: 12, fontWeight: '600' },
     engineCaption: { color: '#9ca3af', fontSize: 11, marginBottom: 6, marginLeft: 4 },
     sendBtn: { backgroundColor: '#7582f5' },
     actionText: { color: '#fff', fontSize: 13, fontWeight: '600' },
+    settings: { flex: 1 },
+    settingsContent: { padding: 14, gap: 10, paddingBottom: 30 },
+    settingsLabel: { color: '#777782', fontSize: 11, fontWeight: '800', textTransform: 'uppercase', letterSpacing: 0.5, marginTop: 4 },
+    settingsCard: { borderRadius: 14, padding: 14, gap: 5, backgroundColor: '#fff', borderWidth: 1, borderColor: '#e3e3e9' },
+    settingsTitle: { color: '#222229', fontSize: 14, fontWeight: '800' },
+    settingsMeta: { color: '#777782', fontSize: 12, lineHeight: 17 },
+    settingsButton: { alignSelf: 'flex-start', marginTop: 8, borderRadius: 10, backgroundColor: '#6f58f5', paddingHorizontal: 14, paddingVertical: 9 },
+    settingsButtonText: { color: '#fff', fontSize: 12, fontWeight: '800' },
+    returnButton: { minHeight: 46, borderRadius: 13, alignItems: 'center', justifyContent: 'center', backgroundColor: '#6f58f5', marginTop: 4 },
+    returnButtonText: { color: '#fff', fontWeight: '800' },
+    hidden: { display: 'none' },
 });