yaver-feedback-react-native 0.8.12 → 0.8.13

package/app.plugin.js

@@ -51,9 +51,22 @@ function withYaverFeedbackAndroid(config) {
     }
 
     const permissions = manifest["uses-permission"];
+    // Camera + mic for screenshot/voice. The rest are required to
+    // make `react-native-record-screen` actually start on modern
+    // Android — without FOREGROUND_SERVICE_MEDIA_PROJECTION
+    // (API 34+, mandatory) startRecording throws SecurityException,
+    // and without POST_NOTIFICATIONS (API 33+) the recording
+    // notification fails to post which some OEMs use as a signal
+    // to kill the projection a few seconds in. Inject all five
+    // unconditionally — listing them does NOT trigger any user
+    // prompt; the actual runtime dialogs only fire if the app
+    // calls startVideoRecording().
     const requiredPermissions = [
       "android.permission.CAMERA",
       "android.permission.RECORD_AUDIO",
+      "android.permission.FOREGROUND_SERVICE",
+      "android.permission.FOREGROUND_SERVICE_MEDIA_PROJECTION",
+      "android.permission.POST_NOTIFICATIONS",
     ];
 
     for (const perm of requiredPermissions) {

package/dist/DeployPanel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface DeployPanelProps {
+    /** Called when the user taps Cancel or after a successful deploy starts. */
+    onClose: () => void;
+}
+export declare const DeployPanel: React.FC<DeployPanelProps>;
+export {};

package/dist/DeployPanel.js

@@ -0,0 +1,354 @@
+"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.DeployPanel = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const YaverFeedback_1 = require("./YaverFeedback");
+const TARGET_LABELS = {
+    testflight: 'TestFlight',
+    playstore: 'Play Store',
+};
+const DeployPanel = ({ onClose }) => {
+    const [options, setOptions] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [status, setStatus] = (0, react_1.useState)(null);
+    const [statusTone, setStatusTone] = (0, react_1.useState)('progress');
+    const [selected, setSelected] = (0, react_1.useState)('both');
+    const [shipping, setShipping] = (0, react_1.useState)(false);
+    const resolveAppSlug = (0, react_1.useCallback)(() => {
+        const cfg = YaverFeedback_1.YaverFeedback.getConfig();
+        const explicit = cfg?.deployAppSlug;
+        if (explicit && explicit.trim().length > 0)
+            return explicit.trim();
+        // Best-effort fallback: bundleId's last dot-segment. iOS gives us
+        // `io.yaver.sfmg`; Android gives the same shape. The agent's
+        // workspace manifest typically names apps after the project basename
+        // which is usually the same word, but the user can override via
+        // config.deployAppSlug if it isn't.
+        const bundleId = cfg?.bundleId;
+        if (bundleId) {
+            const tail = bundleId.split('.').pop();
+            if (tail)
+                return tail;
+        }
+        return 'main';
+    }, []);
+    const baseAuthHeaders = (0, react_1.useCallback)(() => {
+        const cfg = YaverFeedback_1.YaverFeedback.getConfig();
+        const headers = {};
+        if (cfg?.authToken)
+            headers.Authorization = `Bearer ${cfg.authToken}`;
+        const relay = YaverFeedback_1.YaverFeedback.getRelayPassword();
+        if (relay)
+            headers['X-Relay-Password'] = relay;
+        return headers;
+    }, []);
+    const fetchOptions = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        setError(null);
+        const cfg = YaverFeedback_1.YaverFeedback.getConfig();
+        if (!cfg?.agentUrl) {
+            setError('Not connected to a Yaver agent yet.');
+            setLoading(false);
+            return;
+        }
+        const app = resolveAppSlug();
+        const url = `${cfg.agentUrl.replace(/\/$/, '')}/fleet/deploy-options?app=${encodeURIComponent(app)}`;
+        try {
+            const resp = await fetch(url, { headers: baseAuthHeaders() });
+            if (!resp.ok) {
+                const text = await resp.text().catch(() => '');
+                throw new Error(`fetch failed (${resp.status}): ${text || resp.statusText}`);
+            }
+            const json = (await resp.json());
+            setOptions(json);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [baseAuthHeaders, resolveAppSlug]);
+    (0, react_1.useEffect)(() => {
+        void fetchOptions();
+    }, [fetchOptions]);
+    const pickedTargets = () => {
+        switch (selected) {
+            case 'testflight':
+                return ['testflight'];
+            case 'playstore':
+                return ['playstore'];
+            default:
+                return ['testflight', 'playstore'];
+        }
+    };
+    const machineRow = (d) => {
+        const targets = pickedTargets();
+        const blockers = [];
+        let allOK = true;
+        for (const t of targets) {
+            const cap = d.capabilities.find((c) => c.target === t);
+            if (!cap) {
+                allOK = false;
+                blockers.push(`${TARGET_LABELS[t] ?? t}: no capability data`);
+                continue;
+            }
+            if (!cap.ok) {
+                allOK = false;
+                if (cap.reason)
+                    blockers.push(`${TARGET_LABELS[t] ?? t}: ${cap.reason}`);
+            }
+        }
+        if (!d.probed && allOK) {
+            allOK = false;
+            blockers.push(d.probeError || "couldn't reach this machine");
+        }
+        const label = (d.alias && d.alias.length > 0 ? d.alias : d.name) +
+            (d.isLocal ? ' (this phone’s primary)' : '');
+        return (<react_native_1.Pressable key={d.deviceId} disabled={!allOK || shipping} onPress={() => triggerDeploy(d.deviceId)} style={({ pressed }) => [
+                styles.row,
+                !allOK && styles.rowDisabled,
+                pressed && allOK && styles.rowPressed,
+            ]}>
+        <react_native_1.Text style={styles.rowName}>{label}</react_native_1.Text>
+        <react_native_1.Text style={[styles.rowMeta, !allOK && styles.rowMetaWarning]}>
+          {d.platform} {'·'} {allOK ? 'ready' : blockers.join(' · ')}
+        </react_native_1.Text>
+      </react_native_1.Pressable>);
+    };
+    const triggerDeploy = async (machine) => {
+        if (!options)
+            return;
+        setShipping(true);
+        setStatus(`starting deploy on ${prettyMachineName(machine)}…`);
+        setStatusTone('progress');
+        const cfg = YaverFeedback_1.YaverFeedback.getConfig();
+        if (!cfg?.agentUrl) {
+            setStatus('Not connected to a Yaver agent yet.');
+            setStatusTone('error');
+            setShipping(false);
+            return;
+        }
+        const targets = pickedTargets();
+        const body = {
+            app: options.app,
+            machine,
+        };
+        if (targets.length === 1) {
+            body.target = targets[0];
+        }
+        else {
+            body.targets = targets;
+        }
+        try {
+            const resp = await fetch(`${cfg.agentUrl.replace(/\/$/, '')}/deploy/ship`, {
+                method: 'POST',
+                headers: { ...baseAuthHeaders(), 'Content-Type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+            if (!resp.ok) {
+                const text = await resp.text().catch(() => '');
+                throw new Error(`ship failed (${resp.status}): ${text || resp.statusText}`);
+            }
+            setStatus('deploy started — track progress in the desktop / web tab');
+            setStatusTone('success');
+            // Auto-close shortly so the user can keep using their app. Keep
+            // this in sync with the iOS / Android pane delays.
+            setTimeout(() => onClose(), 1600);
+        }
+        catch (err) {
+            setStatus(err instanceof Error ? err.message : String(err));
+            setStatusTone('error');
+        }
+        finally {
+            setShipping(false);
+        }
+    };
+    const prettyMachineName = (id) => {
+        const d = options?.devices.find((x) => x.deviceId === id);
+        if (!d)
+            return id;
+        return d.alias && d.alias.length > 0 ? d.alias : d.name;
+    };
+    const targetButton = (value, label) => (<react_native_1.Pressable key={value} onPress={() => setSelected(value)} style={[styles.segBtn, selected === value && styles.segBtnSelected]}>
+      <react_native_1.Text style={[styles.segText, selected === value && styles.segTextSelected]}>{label}</react_native_1.Text>
+    </react_native_1.Pressable>);
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.headerRow}>
+        <react_native_1.Text style={styles.title}>Deploy</react_native_1.Text>
+        <react_native_1.Pressable onPress={onClose} hitSlop={10}>
+          <react_native_1.Text style={styles.closeIcon}>✕</react_native_1.Text>
+        </react_native_1.Pressable>
+      </react_native_1.View>
+      <react_native_1.Text style={styles.subtitle}>
+        {loading
+            ? 'loading machines…'
+            : options
+                ? `${options.devices.length} machine${options.devices.length === 1 ? '' : 's'} — pick a target, then tap to deploy`
+                : 'no data yet'}
+      </react_native_1.Text>
+
+      <react_native_1.View style={styles.segment}>
+        {targetButton('testflight', 'TestFlight')}
+        {targetButton('playstore', 'Play Store')}
+        {targetButton('both', 'Both')}
+      </react_native_1.View>
+
+      {loading ? (<react_native_1.View style={styles.loading}>
+          <react_native_1.ActivityIndicator color="rgba(255,255,255,0.6)"/>
+        </react_native_1.View>) : error ? (<react_native_1.Text style={styles.error}>{error}</react_native_1.Text>) : options ? (<react_native_1.ScrollView style={styles.list}>{options.devices.map(machineRow)}</react_native_1.ScrollView>) : null}
+
+      {status && (<react_native_1.Text style={[
+                styles.status,
+                statusTone === 'success' && styles.statusSuccess,
+                statusTone === 'error' && styles.statusError,
+            ]}>
+          {status}
+        </react_native_1.Text>)}
+    </react_native_1.View>);
+};
+exports.DeployPanel = DeployPanel;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: 'rgba(14,12,28,0.92)',
+        borderRadius: 16,
+        paddingHorizontal: 16,
+        paddingTop: 14,
+        paddingBottom: 18,
+        marginVertical: 8,
+        borderWidth: 1,
+        borderColor: 'rgba(255,255,255,0.08)',
+    },
+    headerRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    title: {
+        color: '#fff',
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    closeIcon: {
+        color: 'rgba(255,255,255,0.55)',
+        fontSize: 18,
+        paddingHorizontal: 4,
+    },
+    subtitle: {
+        color: 'rgba(255,255,255,0.55)',
+        fontSize: 12,
+        marginTop: 2,
+    },
+    segment: {
+        flexDirection: 'row',
+        backgroundColor: 'rgba(255,255,255,0.08)',
+        borderRadius: 10,
+        padding: 3,
+        marginTop: 14,
+    },
+    segBtn: {
+        flex: 1,
+        alignItems: 'center',
+        paddingVertical: 7,
+        borderRadius: 8,
+    },
+    segBtnSelected: {
+        backgroundColor: 'rgba(127,140,247,0.65)',
+    },
+    segText: {
+        color: 'rgba(255,255,255,0.65)',
+        fontSize: 13,
+        fontWeight: '500',
+    },
+    segTextSelected: {
+        color: '#fff',
+        fontWeight: '600',
+    },
+    loading: {
+        paddingVertical: 32,
+        alignItems: 'center',
+    },
+    error: {
+        color: 'rgb(255,115,115)',
+        fontSize: 12,
+        marginTop: 14,
+    },
+    list: {
+        marginTop: 14,
+        maxHeight: 260,
+    },
+    row: {
+        backgroundColor: 'rgba(255,255,255,0.06)',
+        borderRadius: 12,
+        paddingHorizontal: 14,
+        paddingVertical: 12,
+        marginBottom: 8,
+    },
+    rowPressed: {
+        backgroundColor: 'rgba(255,255,255,0.10)',
+    },
+    rowDisabled: {
+        opacity: 0.55,
+        backgroundColor: 'rgba(255,255,255,0.03)',
+    },
+    rowName: {
+        color: '#fff',
+        fontSize: 15,
+        fontWeight: '600',
+    },
+    rowMeta: {
+        color: 'rgba(255,255,255,0.55)',
+        fontSize: 12,
+        marginTop: 2,
+    },
+    rowMetaWarning: {
+        color: 'rgb(255,178,115)',
+    },
+    status: {
+        color: 'rgba(255,255,255,0.55)',
+        fontSize: 12,
+        marginTop: 12,
+        textAlign: 'center',
+    },
+    statusSuccess: {
+        color: 'rgb(34,197,94)',
+    },
+    statusError: {
+        color: 'rgb(255,115,115)',
+    },
+});

package/dist/FeedbackModal.js

@@ -41,9 +41,16 @@ const capture_1 = require("./capture");
 const upload_1 = require("./upload");
 const AuthOverlay_1 = require("./AuthOverlay");
 const QuickActionIcon_1 = require("./QuickActionIcon");
+const VibeChatScreen_1 = require("./VibeChatScreen");
+const DeployPanel_1 = require("./DeployPanel");
 const auth_1 = require("./auth");
 const preferences_1 = require("./preferences");
 const FeedbackModal = () => {
+    const { width: winW, height: winH } = (0, react_native_1.useWindowDimensions)();
+    const isTablet = Math.min(winW, winH) >= 600;
+    // Tablet color/icon picker fans out to 5/6 cols — 31% (3-col)
+    // looks empty on a 1024pt iPad. Mobile keeps 3-col.
+    const iconOptionWidthOverride = isTablet ? '18%' : undefined;
     const [visible, setVisible] = (0, react_1.useState)(false);
     const [action, setAction] = (0, react_1.useState)('idle');
     const [error, setError] = (0, react_1.useState)(null);
@@ -61,6 +68,7 @@ const FeedbackModal = () => {
     // "pick something for me" prompt (which in 0.7.13 pointed Claude at
     // the wrong project because the matcher grepped the prompt itself).
     const [showVibeInput, setShowVibeInput] = (0, react_1.useState)(false);
+    const [showDeploy, setShowDeploy] = (0, react_1.useState)(false);
     const [vibePrompt, setVibePrompt] = (0, react_1.useState)('');
     const [lastVibeTaskId, setLastVibeTaskId] = (0, react_1.useState)(null);
     const [quickIconColorPreset, setQuickIconColorPreset] = (0, react_1.useState)(null);
@@ -488,6 +496,13 @@ const FeedbackModal = () => {
             setShowVibeInput(false);
         }
     }, [showVibeInput, vibePrompt]);
+    // Hold the active vibe-chat session — set when handleVibingSubmit
+    // returns a fresh taskId. Renders <VibeChatScreen> which streams the
+    // SSE transcript, supports multi-turn follow-ups via /tasks/{id}/
+    // resume, and exposes a Reload button. Mirrors the in-Yaver native
+    // pane's transcript-mode behaviour, just rendered in RN here.
+    const [activeVibe, setActiveVibe] = (0, react_1.useState)(null);
+    const [includeScreenshot, setIncludeScreenshot] = (0, react_1.useState)(true);
     const handleVibingSubmit = (0, react_1.useCallback)(async () => {
         const client = YaverFeedback_1.YaverFeedback.getP2PClient();
         if (!client) {
@@ -506,13 +521,43 @@ const FeedbackModal = () => {
                         .join('\n')
                 : '';
             const userPrompt = vibePrompt.trim();
-            const prompt = userPrompt
+            const promptText = userPrompt
                 ? userPrompt + errNote
                 : 'Pick the next small improvement or fix for this app based on recent activity and the current screen.' +
                     errNote;
-            const result = await client.vibing(prompt);
+            // Optional screenshot — captured from the host app's window.
+            // captureScreenshotBase64 returns null when react-native-view-
+            // shot isn't installed; we skip the screenshot rather than
+            // abort the whole feedback in that case.
+            let screenshotBase64;
+            if (includeScreenshot) {
+                const cap = await Promise.resolve().then(() => __importStar(require('./capture')));
+                const captured = await cap.captureScreenshotBase64();
+                if (captured?.base64) {
+                    screenshotBase64 = captured.base64;
+                }
+            }
+            // Resolve project context the same way reloadApp / vibing did.
+            const { resolveAppIdentity } = await Promise.resolve().then(() => __importStar(require('./P2PClient')));
+            const identity = resolveAppIdentity();
+            // Pull the user's preferred runner / model from local prefs.
+            // Both are optional — the agent falls back to whatever runner
+            // is signed in if neither is provided.
+            const prefs = await Promise.resolve().then(() => __importStar(require('./preferences')));
+            const preferredRunner = (await prefs.getPreferredRunner?.()) ?? null;
+            const preferredModel = (await prefs.getPreferredModel?.()) ?? null;
+            const result = await client.createFeedbackTask({
+                userPrompt: promptText,
+                projectName: identity.projectName,
+                projectPath: identity.projectPath,
+                runner: preferredRunner ?? undefined,
+                model: preferredModel ?? undefined,
+                screenshotBase64,
+            });
             setLastVibeTaskId(result.taskId);
-            setToast(`Vibing task ${result.taskId.slice(0, 8)} created`);
+            // Hand off to VibeChatScreen — it streams the SSE transcript,
+            // accepts follow-ups, and surfaces a Reload button.
+            setActiveVibe({ taskId: result.taskId, initialPrompt: promptText });
             setVibePrompt('');
             setShowVibeInput(false);
         }
@@ -523,20 +568,54 @@ const FeedbackModal = () => {
             if (mountedRef.current)
                 setAction('idle');
         }
-    }, [vibePrompt]);
+    }, [vibePrompt, includeScreenshot]);
     /*
     const handleScreenRecording = useCallback(async () => {
       ...
     }, [closeSoon, isRecordingVideo, lastVideo]);
     */
     const busy = action !== 'idle';
+    // Once the user fires off a vibe task, swap the entire modal body
+    // for the live chat screen. The chat manages its own SSE
+    // subscription, multi-turn follow-ups, and Reload button. Closing
+    // the chat returns to idle and clears the active vibe.
+    if (visible && 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} onClose={() => setActiveVibe(null)} onReload={async () => {
+                    const c = YaverFeedback_1.YaverFeedback.getP2PClient();
+                    if (!c)
+                        throw new Error('Not connected');
+                    await c.reloadApp();
+                }}/>) : null}
+        </react_native_1.Modal>
+      </>);
+    }
     return (<>
       <AuthOverlay_1.AuthOverlay />
       <QuickActionIcon_1.QuickActionIcon />
       {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">
-            <react_native_1.Pressable style={styles.modal} onPress={(e) => {
+            <react_native_1.Pressable 
+        // Tablet: cap modal width and center as a card-style
+        // sheet rather than a phone bottom sheet that stretches
+        // across a 12.9" iPad. Phone behaviour unchanged.
+        style={[
+                styles.modal,
+                isTablet
+                    ? {
+                        width: '100%',
+                        maxWidth: 640,
+                        alignSelf: 'center',
+                        borderTopLeftRadius: 22,
+                        borderTopRightRadius: 22,
+                    }
+                    : null,
+            ]} onPress={(e) => {
                 e.stopPropagation();
                 react_native_1.Keyboard.dismiss();
             }}>
@@ -613,6 +692,7 @@ const FeedbackModal = () => {
                         void YaverFeedback_1.YaverFeedback.setQuickIconColorPreset(preset);
                     }} style={[
                         styles.iconOption,
+                        iconOptionWidthOverride ? { width: iconOptionWidthOverride } : null,
                         selected && styles.iconOptionSelected,
                     ]}>
                         <react_native_1.View style={[
@@ -667,6 +747,14 @@ const FeedbackModal = () => {
               {/* Screenshot & Fix */}
               <ActionRow label={action === 'capturing' ? 'Working…' : 'Screenshot & Fix'} tint="#22c55e" onPress={handleScreenshotAndFix} disabled={busy} busy={action === 'capturing'}/>
 
+              {/* Deploy — opens an inline panel that talks to
+                /fleet/deploy-options on the agent and lets the user
+                pick TestFlight / Play / Both, then a machine to run
+                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)}/>)}
+
               {/* Remote sign-in buttons — trigger codex/claude device-auth
                 on the selected agent without leaving the app. Opens a
                 small native modal showing the verification URL + 8-char

package/dist/FloatingButton.js

@@ -41,6 +41,14 @@ const FixReport_1 = require("./FixReport");
 const BlackBox_1 = require("./BlackBox");
 const DEFAULT_SIZE = 40;
 const DEFAULT_COLOR = '#6366f1';
+// Tablet detection — short-edge dp >= 600 means iPad / 7"+ Android
+// tablet / Z Fold open. The SDK has no app-side responsive context
+// to lean on (it's a guest in third-party apps), so we infer
+// locally and bump the button + panel to tablet sizes.
+const TABLET_SHORT_EDGE = 600;
+function isTabletWindow(width, height) {
+    return Math.min(width, height) >= TABLET_SHORT_EDGE;
+}
 const DEFAULT_PANEL_BG = '#2d2d2d';
 /**
  * Draggable debug console button for the Yaver Feedback SDK.
@@ -71,7 +79,16 @@ const DEFAULT_PANEL_BG = '#2d2d2d';
  * - **"quit"** → disable the SDK
  */
 const FloatingButton = ({ onPress, initialPosition, size = DEFAULT_SIZE, color = DEFAULT_COLOR, showStatusDot = true, style: stylePreset = 'terminal', icon, agentUrl: agentUrlProp, authToken: authTokenProp, healthCheckInterval = 5000, panelBackgroundColor, }) => {
-    const { width: screenWidth } = react_native_1.Dimensions.get('window');
+    // Read window size live so the SDK overlay re-pins itself when
+    // the host app rotates or splits. The legacy snapshot via
+    // Dimensions.get only ran once and parked the button off-screen
+    // after orientation changes on iPad.
+    const { width: screenWidth, height: screenHeight } = (0, react_native_1.useWindowDimensions)();
+    const isTablet = isTabletWindow(screenWidth, screenHeight);
+    // Tablets get a larger touch target and a wider panel — phones
+    // keep the existing 40 / 280 defaults so guest apps aren't
+    // disrupted on small screens.
+    const effectiveSize = isTablet ? Math.max(size, 52) : size;
     const defaultX = initialPosition?.x ?? 10;
     const defaultY = initialPosition?.y ?? 90;
     const pan = (0, react_1.useRef)(new react_native_1.Animated.ValueXY({ x: defaultX, y: defaultY })).current;
@@ -516,7 +533,12 @@ const FloatingButton = ({ onPress, initialPosition, size = DEFAULT_SIZE, color =
     const isTerminal = stylePreset === 'terminal';
     const buttonIcon = icon ?? 'y';
     const btnBg = isConnected ? color : `${color}88`;
-    const panelWidth = fullSize ? screenWidth - 24 : 280;
+    // Panel sizing — tablets get a wider compact panel (420) and a
+    // capped full-size panel (max 720 instead of full window) so the
+    // overlay doesn't dwarf the host app on a 12.9" iPad.
+    const compactPanelWidth = isTablet ? 420 : 280;
+    const fullPanelWidth = isTablet ? Math.min(screenWidth - 24, 720) : screenWidth - 24;
+    const panelWidth = fullSize ? fullPanelWidth : compactPanelWidth;
     return (<react_native_1.Animated.View style={[s.root, { transform: [{ translateX: pan.x }, { translateY: pan.y }] }]} {...panResponder.panHandlers}>
       {/* Console panel */}
       {chatOpen && (<react_native_1.View style={[
@@ -642,7 +664,7 @@ const FloatingButton = ({ onPress, initialPosition, size = DEFAULT_SIZE, color =
       <react_native_1.TouchableOpacity style={[
             s.button,
             isTerminal ? s.buttonTerminal : s.buttonMinimal,
-            { backgroundColor: btnBg, width: size, height: size },
+            { backgroundColor: btnBg, width: effectiveSize, height: effectiveSize },
             !isTerminal && { borderRadius: size / 2 },
         ]} activeOpacity={0.7} onPress={handleTap}>
         <react_native_1.Text style={[s.buttonIcon, isTerminal && s.mono, { fontSize: 22 }]}>