yaver-feedback-react-native 0.9.6 → 0.9.8

package/dist/DogfoodQuickControls.js

@@ -0,0 +1,394 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DogfoodQuickControls = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const YaverFeedback_1 = require("./YaverFeedback");
+const preferences_1 = require("./preferences");
+const FALLBACK_SIZE = 36;
+const DOCK_VISIBLE = 21;
+const SAFE_TOP = 64;
+const SAFE_BOTTOM = 92;
+const EMPTY_STATE = {
+    configured: false,
+    authorized: false,
+    gestureSupported: false,
+    gestureEnabled: false,
+    fallbackVisible: false,
+    presentation: 'auto',
+    onboardingSeen: false,
+    reason: 'not-configured',
+};
+function preferenceScope(state) {
+    return state.appId && state.installationId ? `${state.appId}:${state.installationId}` : undefined;
+}
+/**
+ * The standalone SDK's only persistent chrome. A newly authorized tester sees
+ * this edge-docked Y until first-run onboarding is completed in Convex. After
+ * that, capable devices default to a passive three-finger hold; unsupported
+ * devices keep the Y. Both entry points open exactly the same compact card.
+ */
+const DogfoodQuickControls = () => {
+    const { width, height } = (0, react_native_1.useWindowDimensions)();
+    const orientation = width > height ? 'landscape' : 'portrait';
+    const defaultPosition = (0, react_1.useMemo)(() => ({
+        x: Math.max(width - DOCK_VISIBLE, 0),
+        y: Math.max(Math.round(height * 0.45), SAFE_TOP),
+    }), [height, width]);
+    const pan = (0, react_1.useRef)(new react_native_1.Animated.ValueXY(defaultPosition)).current;
+    const opacity = (0, react_1.useRef)(new react_native_1.Animated.Value(0.72)).current;
+    const lastPosition = (0, react_1.useRef)(defaultPosition);
+    const dragStart = (0, react_1.useRef)(defaultPosition);
+    const dragged = (0, react_1.useRef)(false);
+    const fadeTimer = (0, react_1.useRef)(null);
+    const [dockEdge, setDockEdge] = (0, react_1.useState)('right');
+    const [keyboardVisible, setKeyboardVisible] = (0, react_1.useState)(false);
+    const [state, setState] = (0, react_1.useState)(EMPTY_STATE);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [showControlSettings, setShowControlSettings] = (0, react_1.useState)(false);
+    const [busy, setBusy] = (0, react_1.useState)(null);
+    const [message, setMessage] = (0, react_1.useState)(null);
+    const scheduleFade = (0, react_1.useCallback)(() => {
+        if (fadeTimer.current)
+            clearTimeout(fadeTimer.current);
+        fadeTimer.current = setTimeout(() => {
+            react_native_1.Animated.timing(opacity, { toValue: 0.42, duration: 260, useNativeDriver: true }).start();
+        }, 1800);
+    }, [opacity]);
+    const wakeControl = (0, react_1.useCallback)(() => {
+        if (fadeTimer.current)
+            clearTimeout(fadeTimer.current);
+        react_native_1.Animated.timing(opacity, { toValue: 1, duration: 100, useNativeDriver: true }).start();
+    }, [opacity]);
+    const refresh = (0, react_1.useCallback)(async () => {
+        try {
+            setState(await YaverFeedback_1.YaverFeedback.syncDogfoodControlGesture());
+        }
+        catch {
+            setState(EMPTY_STATE);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        void refresh();
+        const trigger = react_native_1.DeviceEventEmitter.addListener('yaverDogfoodControlGesture', () => {
+            setMessage(null);
+            setShowControlSettings(false);
+            setOpen(true);
+        });
+        const capability = react_native_1.DeviceEventEmitter.addListener('yaverDogfoodControlCapability', () => {
+            void refresh();
+        });
+        return () => {
+            trigger.remove();
+            capability.remove();
+        };
+    }, [refresh]);
+    (0, react_1.useEffect)(() => {
+        const show = react_native_1.Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
+        const hide = react_native_1.Keyboard.addListener('keyboardDidHide', () => setKeyboardVisible(false));
+        return () => { show.remove(); hide.remove(); };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        let cancelled = false;
+        void (async () => {
+            const saved = await (0, preferences_1.getDogfoodControlPosition)(orientation, preferenceScope(state));
+            if (cancelled)
+                return;
+            const edge = saved?.edge || 'right';
+            const minY = SAFE_TOP;
+            const maxY = Math.max(minY, height - FALLBACK_SIZE - SAFE_BOTTOM);
+            const y = saved
+                ? minY + (maxY - minY) * saved.yRatio
+                : Math.max(minY, Math.min(maxY, Math.round(height * 0.45)));
+            const next = { x: edge === 'left' ? -FALLBACK_SIZE + DOCK_VISIBLE : width - DOCK_VISIBLE, y };
+            setDockEdge(edge);
+            lastPosition.current = next;
+            pan.setValue(next);
+            scheduleFade();
+        })();
+        return () => { cancelled = true; };
+    }, [height, orientation, pan, scheduleFade, state.appId, state.installationId, width]);
+    (0, react_1.useEffect)(() => () => {
+        if (fadeTimer.current)
+            clearTimeout(fadeTimer.current);
+    }, []);
+    const panResponder = (0, react_1.useMemo)(() => react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, gesture) => Math.abs(gesture.dx) > 3 || Math.abs(gesture.dy) > 3,
+        onPanResponderGrant: () => {
+            wakeControl();
+            dragged.current = false;
+            dragStart.current = lastPosition.current;
+            pan.setOffset(lastPosition.current);
+            pan.setValue({ x: 0, y: 0 });
+        },
+        onPanResponderMove: (_, gesture) => {
+            if (Math.abs(gesture.dx) > 3 || Math.abs(gesture.dy) > 3)
+                dragged.current = true;
+            react_native_1.Animated.event([null, { dx: pan.x, dy: pan.y }], { useNativeDriver: false })(_, gesture);
+        },
+        onPanResponderRelease: (_, gesture) => {
+            pan.flattenOffset();
+            const minY = SAFE_TOP;
+            const maxY = Math.max(minY, height - FALLBACK_SIZE - SAFE_BOTTOM);
+            const rawX = dragStart.current.x + gesture.dx;
+            const y = Math.max(minY, Math.min(maxY, dragStart.current.y + gesture.dy));
+            const edge = rawX + FALLBACK_SIZE / 2 < width / 2 ? 'left' : 'right';
+            const x = edge === 'left' ? -FALLBACK_SIZE + DOCK_VISIBLE : width - DOCK_VISIBLE;
+            const next = { x, y };
+            const yRatio = maxY === minY ? 0.5 : (y - minY) / (maxY - minY);
+            setDockEdge(edge);
+            lastPosition.current = next;
+            react_native_1.Animated.spring(pan, { toValue: next, useNativeDriver: false, friction: 7 }).start(scheduleFade);
+            void (0, preferences_1.setDogfoodControlPosition)(orientation, { edge, yRatio }, preferenceScope(state));
+        },
+        onPanResponderTerminate: scheduleFade,
+    }), [height, orientation, pan, scheduleFade, state.appId, state.installationId, wakeControl, width]);
+    const choosePresentation = (0, react_1.useCallback)(async (presentation) => {
+        if (busy)
+            return;
+        setBusy('preference');
+        setMessage(null);
+        try {
+            const next = await YaverFeedback_1.YaverFeedback.setDogfoodControlPresentation(presentation);
+            setState(next);
+            setShowControlSettings(false);
+        }
+        catch (error) {
+            setMessage(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [busy]);
+    const fastReload = (0, react_1.useCallback)(async () => {
+        if (busy)
+            return;
+        setBusy('reload');
+        setMessage(null);
+        try {
+            const ack = await YaverFeedback_1.YaverFeedback.requestDogfoodFastReload();
+            setMessage(ack || 'Fast Reload requested.');
+            setTimeout(() => setOpen(false), 650);
+        }
+        catch (error) {
+            setMessage(error instanceof Error ? error.message : String(error));
+        }
+        finally {
+            setBusy(null);
+        }
+    }, [busy]);
+    const openChat = (0, react_1.useCallback)(async () => {
+        if (busy)
+            return;
+        setBusy('chat');
+        setMessage(null);
+        setOpen(false);
+        const result = await YaverFeedback_1.YaverFeedback.openDogfood();
+        if (result.phase === 'denied' || result.phase === 'error') {
+            setMessage(result.error || 'Dogfood access is not available on this installation.');
+            setOpen(true);
+        }
+        setBusy(null);
+    }, [busy]);
+    const openSessionSetup = (0, react_1.useCallback)(async () => {
+        if (busy)
+            return;
+        setOpen(false);
+        setShowControlSettings(false);
+        const result = await YaverFeedback_1.YaverFeedback.openDogfood();
+        if (result.phase === 'denied' || result.phase === 'error') {
+            setMessage(result.error || 'Dogfood session settings are not available on this installation.');
+            setOpen(true);
+            setShowControlSettings(true);
+        }
+    }, [busy]);
+    if (!state.configured || !state.authorized)
+        return null;
+    const onboarding = !state.onboardingSeen;
+    return (<>
+      {state.fallbackVisible && !keyboardVisible && !open ? (<react_native_1.Animated.View pointerEvents="box-none" style={[react_native_1.StyleSheet.absoluteFill, styles.layer]}>
+          <react_native_1.Animated.View {...panResponder.panHandlers} style={[
+                styles.fallbackPosition,
+                { opacity, transform: [{ translateX: pan.x }, { translateY: pan.y }] },
+            ]}>
+            <react_native_1.Pressable testID="yaver-dogfood-minimized-control" accessibilityRole="button" accessibilityLabel="Open Dogfood controls" hitSlop={10} onPressIn={wakeControl} onPress={() => {
+                if (dragged.current) {
+                    dragged.current = false;
+                    return;
+                }
+                setMessage(null);
+                setShowControlSettings(false);
+                setOpen(true);
+            }} style={({ pressed }) => [styles.fallback, pressed && styles.pressed]}>
+              <react_native_1.Text style={[
+                styles.fallbackText,
+                dockEdge === 'right' ? styles.rightDockText : styles.leftDockText,
+            ]}>y</react_native_1.Text>
+            </react_native_1.Pressable>
+          </react_native_1.Animated.View>
+        </react_native_1.Animated.View>) : null}
+
+      <react_native_1.Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <react_native_1.Pressable style={styles.backdrop} onPress={() => setOpen(false)}>
+          <react_native_1.Pressable style={styles.card} onPress={(event) => event.stopPropagation()}>
+            {onboarding ? (<>
+                <react_native_1.Text style={styles.title}>Dogfood ready</react_native_1.Text>
+                <react_native_1.Text style={styles.explanation}>
+                  {state.gestureSupported
+                ? 'Dogfood starts with the edge Y so you always know how to return. You can switch to a three-finger hold later from Controls.'
+                : 'This device cannot reliably use the three-finger hold, so the edge Y stays available.'}
+                </react_native_1.Text>
+                <ModeButton title={busy === 'preference' ? 'Saving…' : 'Continue with Y'} hint="Open Fast Reload and Chat from the edge" disabled={busy !== null} onPress={() => void choosePresentation('minimized-y')}/>
+              </>) : showControlSettings ? (<>
+                <react_native_1.Text style={styles.title}>Dogfood settings</react_native_1.Text>
+                {state.gestureSupported ? (<react_native_1.Text style={styles.supported}>Three-finger hold supported on this device</react_native_1.Text>) : null}
+                <react_native_1.View style={styles.stackedActions}>
+                  {state.gestureSupported ? (<>
+                      <ModeButton title="Three-finger hold" hint="No persistent Y over the app" selected={state.presentation === 'auto'} disabled={busy !== null} onPress={() => void choosePresentation('auto')}/>
+                      <ModeButton title="Always show Y" hint="Keep the draggable edge control" selected={state.presentation === 'minimized-y'} disabled={busy !== null} onPress={() => void choosePresentation('minimized-y')}/>
+                    </>) : null}
+                  <ModeButton title="Session setup" hint="Change machine, coding agent, model, or runtime lane" disabled={busy !== null} onPress={() => void openSessionSetup()}/>
+                </react_native_1.View>
+              </>) : (<>
+                <react_native_1.View style={styles.titleRow}>
+                  <react_native_1.Text style={styles.title}>Dogfood</react_native_1.Text>
+                  <react_native_1.Pressable accessibilityRole="button" accessibilityLabel="Dogfood settings" onPress={() => setShowControlSettings(true)} style={styles.settingsButton}>
+                    <react_native_1.Text style={styles.settingsText}>Settings</react_native_1.Text>
+                  </react_native_1.Pressable>
+                </react_native_1.View>
+                <react_native_1.View style={styles.actions}>
+                  <react_native_1.Pressable testID="yaver-dogfood-fast-reload" accessibilityRole="button" disabled={busy !== null} onPress={() => void fastReload()} style={({ pressed }) => [styles.action, pressed && styles.actionPressed]}>
+                    <react_native_1.Text style={styles.actionTitle}>{busy === 'reload' ? 'Reloading…' : 'Fast Reload'}</react_native_1.Text>
+                    <react_native_1.Text style={styles.actionHint}>Refresh the selected render target</react_native_1.Text>
+                  </react_native_1.Pressable>
+                  <react_native_1.Pressable testID="yaver-dogfood-chat" accessibilityRole="button" disabled={busy !== null} onPress={() => void openChat()} style={({ pressed }) => [styles.action, pressed && styles.actionPressed]}>
+                    <react_native_1.Text style={styles.actionTitle}>{busy === 'chat' ? 'Opening…' : 'Chat'}</react_native_1.Text>
+                    <react_native_1.Text style={styles.actionHint}>Open the current Yaver vibing session</react_native_1.Text>
+                  </react_native_1.Pressable>
+                </react_native_1.View>
+              </>)}
+            {message ? <react_native_1.Text style={styles.message}>{message}</react_native_1.Text> : null}
+          </react_native_1.Pressable>
+        </react_native_1.Pressable>
+      </react_native_1.Modal>
+    </>);
+};
+exports.DogfoodQuickControls = DogfoodQuickControls;
+const ModeButton = ({ title, hint, selected, disabled, onPress }) => (<react_native_1.Pressable accessibilityRole="button" disabled={disabled} onPress={onPress} style={({ pressed }) => [styles.modeAction, selected && styles.modeSelected, pressed && styles.actionPressed]}>
+    {typeof selected === 'boolean' ? <react_native_1.View style={[styles.radio, selected && styles.radioSelected]}/> : null}
+    <react_native_1.View style={styles.modeCopy}>
+      <react_native_1.Text style={styles.actionTitle}>{title}</react_native_1.Text>
+      <react_native_1.Text style={styles.actionHint}>{hint}</react_native_1.Text>
+    </react_native_1.View>
+  </react_native_1.Pressable>);
+const styles = react_native_1.StyleSheet.create({
+    layer: { zIndex: 9997 },
+    fallbackPosition: { position: 'absolute', left: 0, top: 0 },
+    fallback: {
+        width: FALLBACK_SIZE,
+        height: FALLBACK_SIZE,
+        borderRadius: FALLBACK_SIZE / 2,
+        backgroundColor: '#f97316',
+        borderWidth: 1.5,
+        borderColor: 'rgba(255,255,255,0.92)',
+        shadowColor: '#000',
+        shadowOpacity: 0.28,
+        shadowRadius: 5,
+        shadowOffset: { width: 0, height: 2 },
+        elevation: 6,
+        overflow: 'hidden',
+    },
+    fallbackText: { position: 'absolute', top: 7, color: '#111827', fontSize: 17, lineHeight: 20, fontWeight: '800' },
+    rightDockText: { left: 6 },
+    leftDockText: { right: 6 },
+    pressed: { opacity: 0.78 },
+    backdrop: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+        backgroundColor: 'rgba(2,6,23,0.28)',
+    },
+    card: {
+        width: '100%',
+        maxWidth: 360,
+        borderRadius: 20,
+        padding: 16,
+        backgroundColor: '#111827',
+        shadowColor: '#000',
+        shadowOpacity: 0.3,
+        shadowRadius: 16,
+        shadowOffset: { width: 0, height: 8 },
+        elevation: 12,
+    },
+    titleRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 },
+    title: { color: '#f9fafb', fontSize: 16, fontWeight: '700', marginBottom: 12 },
+    explanation: { color: '#cbd5e1', fontSize: 13, lineHeight: 19, marginBottom: 14 },
+    supported: { color: '#9ca3af', fontSize: 12, lineHeight: 17, marginBottom: 14 },
+    settingsButton: { paddingVertical: 5, paddingHorizontal: 8, marginTop: -6 },
+    settingsText: { color: '#fdba74', fontSize: 12, fontWeight: '700' },
+    actions: { flexDirection: 'row', gap: 10 },
+    stackedActions: { gap: 9 },
+    action: {
+        flex: 1,
+        minHeight: 92,
+        borderRadius: 14,
+        padding: 12,
+        justifyContent: 'space-between',
+        backgroundColor: '#1f2937',
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderColor: '#4b5563',
+    },
+    modeAction: {
+        minHeight: 62,
+        borderRadius: 14,
+        padding: 12,
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: '#1f2937',
+        borderWidth: react_native_1.StyleSheet.hairlineWidth,
+        borderColor: '#4b5563',
+    },
+    modeSelected: { borderColor: '#f97316', backgroundColor: '#292524' },
+    radio: { width: 15, height: 15, borderRadius: 8, borderWidth: 1.5, borderColor: '#64748b', marginRight: 11 },
+    radioSelected: { borderWidth: 4, borderColor: '#f97316', backgroundColor: '#111827' },
+    modeCopy: { flex: 1, gap: 3 },
+    actionPressed: { backgroundColor: '#374151' },
+    actionTitle: { color: '#f9fafb', fontSize: 15, fontWeight: '700' },
+    actionHint: { color: '#9ca3af', fontSize: 11, lineHeight: 15 },
+    message: { color: '#fdba74', fontSize: 12, lineHeight: 17, marginTop: 12 },
+});

package/dist/DogfoodSessionUi.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { DogfoodFailure, DogfoodLane, DogfoodLaneOption, DogfoodLogLine, DogfoodPhase } from './DogfoodRuntime';
+export type DogfoodStatusTone = 'ready' | 'attention' | 'blocked' | 'pending';
+export interface DogfoodStatusStep {
+    key: string;
+    label: string;
+    detail: string;
+    tone: DogfoodStatusTone;
+    actionLabel?: string;
+    actionDisabled?: boolean;
+    expanded?: boolean;
+    onAction?: () => void;
+}
+export interface DogfoodUiColors {
+    background: string;
+    border: string;
+    text: string;
+    muted: string;
+    accent: string;
+    accentSoft: string;
+    ready: string;
+    attention: string;
+    blocked: string;
+    console: string;
+}
+/** Shared readiness rail used by Yaver itself and every embedded SDK host. */
+export declare const DogfoodStatusRail: React.FC<{
+    steps: readonly DogfoodStatusStep[];
+    colors?: Partial<DogfoodUiColors>;
+}>;
+/** One lane selector and one default policy across Yaver, SFMG, and Talos. */
+export declare const DogfoodLanePicker: React.FC<{
+    options: readonly DogfoodLaneOption[];
+    selected: DogfoodLane;
+    onSelect: (lane: DogfoodLane) => void;
+    colors?: Partial<DogfoodUiColors>;
+    showUnsupportedReasons?: boolean;
+}>;
+/** Shared second-stage live console. Browser lane deliberately names Browser
+ * Logs; Hermes/WebRTC use the same lifecycle and failure/remedy treatment. */
+export declare const DogfoodLiveConsole: React.FC<{
+    lane: DogfoodLane;
+    phase: DogfoodPhase;
+    message: string;
+    logs: readonly DogfoodLogLine[];
+    failure?: DogfoodFailure;
+    maxLines?: number;
+    colors?: Partial<DogfoodUiColors>;
+    renderText?: (text: string) => React.ReactNode;
+}>;

package/dist/DogfoodSessionUi.js

@@ -0,0 +1,135 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DogfoodLiveConsole = exports.DogfoodLanePicker = exports.DogfoodStatusRail = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const DEFAULT_COLORS = {
+    background: '#111827',
+    border: '#334155',
+    text: '#f8fafc',
+    muted: '#94a3b8',
+    accent: '#818cf8',
+    accentSoft: '#312e81',
+    ready: '#22c55e',
+    attention: '#f59e0b',
+    blocked: '#ef4444',
+    console: '#070b12',
+};
+function resolvedColors(colors) {
+    return { ...DEFAULT_COLORS, ...colors };
+}
+function toneColor(tone, colors) {
+    if (tone === 'ready')
+        return colors.ready;
+    if (tone === 'blocked')
+        return colors.blocked;
+    if (tone === 'attention')
+        return colors.attention;
+    return colors.muted;
+}
+/** Shared readiness rail used by Yaver itself and every embedded SDK host. */
+const DogfoodStatusRail = ({ steps, colors: colorOverrides }) => {
+    const colors = resolvedColors(colorOverrides);
+    return (<react_native_1.View style={styles.rail} accessibilityLabel="Dogfood session readiness">
+      {steps.map((step) => {
+            const tone = toneColor(step.tone, colors);
+            return (<react_native_1.View key={step.key} style={styles.statusRow}>
+            <react_native_1.View style={[styles.statusDot, { backgroundColor: tone }]}/>
+            <react_native_1.View style={styles.statusCopy}>
+              <react_native_1.Text style={[styles.statusLabel, { color: colors.text }]}>{step.label}</react_native_1.Text>
+              <react_native_1.Text style={[styles.statusDetail, { color: tone }]}>{step.detail}</react_native_1.Text>
+            </react_native_1.View>
+            {step.actionLabel && step.onAction ? (<react_native_1.Pressable accessibilityRole="button" accessibilityLabel={`${step.actionLabel} ${step.label}`} accessibilityState={{ expanded: step.expanded, disabled: step.actionDisabled }} disabled={step.actionDisabled} onPress={step.onAction} style={({ pressed }) => [
+                        styles.statusAction,
+                        { borderColor: colors.border, opacity: step.actionDisabled ? 0.5 : pressed ? 0.7 : 1 },
+                    ]}>
+                <react_native_1.Text style={[styles.statusActionText, { color: colors.accent }]}>{step.actionLabel}</react_native_1.Text>
+              </react_native_1.Pressable>) : null}
+          </react_native_1.View>);
+        })}
+    </react_native_1.View>);
+};
+exports.DogfoodStatusRail = DogfoodStatusRail;
+/** One lane selector and one default policy across Yaver, SFMG, and Talos. */
+const DogfoodLanePicker = ({ options, selected, onSelect, colors: colorOverrides, showUnsupportedReasons = true }) => {
+    const colors = resolvedColors(colorOverrides);
+    return (<react_native_1.View accessibilityRole="radiogroup" accessibilityLabel="Dogfood runtime lane">
+      <react_native_1.View style={styles.choiceRow}>
+        {options.map((option) => {
+            const active = selected === option.lane;
+            return (<react_native_1.Pressable key={option.lane} disabled={!option.supported} onPress={() => onSelect(option.lane)} accessibilityRole="radio" accessibilityState={{ checked: active, disabled: !option.supported }} style={({ pressed }) => [
+                    styles.choice,
+                    {
+                        borderColor: active ? colors.accent : colors.border,
+                        backgroundColor: active ? colors.accentSoft : colors.background,
+                        opacity: !option.supported ? 0.45 : pressed ? 0.72 : 1,
+                    },
+                ]}>
+              <react_native_1.Text style={[styles.choiceText, { color: colors.text }, active && styles.choiceTextActive]}>
+                {option.label}{option.default ? ' · default' : ''}
+              </react_native_1.Text>
+            </react_native_1.Pressable>);
+        })}
+      </react_native_1.View>
+      {showUnsupportedReasons ? options.filter((option) => !option.supported && option.reason).map((option) => (<react_native_1.Text key={`${option.lane}-reason`} style={[styles.reason, { color: colors.muted }]}>
+          {option.label}: {option.reason}
+        </react_native_1.Text>)) : null}
+    </react_native_1.View>);
+};
+exports.DogfoodLanePicker = DogfoodLanePicker;
+function runtimeTone(phase, colors) {
+    if (phase === 'ready')
+        return colors.ready;
+    if (phase === 'failed')
+        return colors.blocked;
+    if (phase === 'idle' || phase === 'stopped')
+        return colors.muted;
+    return colors.attention;
+}
+/** Shared second-stage live console. Browser lane deliberately names Browser
+ * Logs; Hermes/WebRTC use the same lifecycle and failure/remedy treatment. */
+const DogfoodLiveConsole = ({ lane, phase, message, logs, failure, maxLines = 80, colors: colorOverrides, renderText }) => {
+    const colors = resolvedColors(colorOverrides);
+    const text = logs.slice(-maxLines).map((line) => line.text).join('\n');
+    const title = lane === 'browser' ? 'Browser Logs' : lane === 'hermes' ? 'Hermes Logs' : 'WebRTC Logs';
+    return (<react_native_1.View style={[styles.console, { backgroundColor: colors.console, borderColor: colors.border }]} accessibilityLabel={title}>
+      <react_native_1.View style={styles.consoleHeader}>
+        <react_native_1.View style={[styles.statusDot, { backgroundColor: runtimeTone(phase, colors) }]}/>
+        <react_native_1.Text style={[styles.consoleTitle, { color: colors.text }]}>{title}</react_native_1.Text>
+      </react_native_1.View>
+      <react_native_1.Text style={[styles.consoleStatus, { color: colors.muted }]}>{message}</react_native_1.Text>
+      {text ? (renderText ? renderText(text) : <react_native_1.Text selectable style={[styles.consoleText, { color: colors.text }]}>{text}</react_native_1.Text>) : (<react_native_1.Text style={[styles.consoleEmpty, { color: colors.muted }]}>Waiting for the first line from the remote PC…</react_native_1.Text>)}
+      {failure ? (<react_native_1.View style={[styles.failure, { borderColor: colors.blocked }]}>
+          <react_native_1.Text style={[styles.failureText, { color: colors.text }]}>{failure.error}</react_native_1.Text>
+          <react_native_1.Text style={[styles.failureRemedy, { color: colors.muted }]}>{failure.remedy}</react_native_1.Text>
+        </react_native_1.View>) : null}
+    </react_native_1.View>);
+};
+exports.DogfoodLiveConsole = DogfoodLiveConsole;
+const styles = react_native_1.StyleSheet.create({
+    rail: { gap: 4 },
+    statusRow: { minHeight: 46, flexDirection: 'row', alignItems: 'center', gap: 9 },
+    statusDot: { width: 8, height: 8, borderRadius: 4 },
+    statusCopy: { flex: 1 },
+    statusLabel: { fontSize: 12, fontWeight: '700' },
+    statusDetail: { fontSize: 11, lineHeight: 16, marginTop: 1 },
+    statusAction: { borderWidth: 1, borderRadius: 8, paddingHorizontal: 10, paddingVertical: 7 },
+    statusActionText: { fontSize: 11, fontWeight: '700' },
+    choiceRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+    choice: { borderWidth: 1, borderRadius: 8, paddingHorizontal: 11, paddingVertical: 8 },
+    choiceText: { fontSize: 12, fontWeight: '500' },
+    choiceTextActive: { fontWeight: '700' },
+    reason: { fontSize: 10, lineHeight: 14, marginTop: 5 },
+    console: { width: '100%', maxHeight: 320, overflow: 'hidden', marginTop: 10, borderWidth: 1, borderRadius: 10, padding: 11, gap: 7 },
+    consoleHeader: { flexDirection: 'row', alignItems: 'center', gap: 7 },
+    consoleTitle: { fontSize: 12, fontWeight: '800' },
+    consoleStatus: { fontSize: 11, lineHeight: 16 },
+    consoleText: { fontFamily: 'monospace', fontSize: 10, lineHeight: 15 },
+    consoleEmpty: { fontSize: 10, fontStyle: 'italic' },
+    failure: { borderWidth: 1, borderRadius: 8, padding: 9, gap: 4 },
+    failureText: { fontSize: 11, fontWeight: '700' },
+    failureRemedy: { fontSize: 10, lineHeight: 15 },
+});