yaver-feedback-react-native 0.5.2 → 0.5.4

package/dist/FloatingButton.js

@@ -0,0 +1,778 @@
+"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.FloatingButton = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const YaverFeedback_1 = require("./YaverFeedback");
+const FixReport_1 = require("./FixReport");
+const BlackBox_1 = require("./BlackBox");
+const DEFAULT_SIZE = 40;
+const DEFAULT_COLOR = '#6366f1';
+const DEFAULT_PANEL_BG = '#2d2d2d';
+/**
+ * Draggable debug console button for the Yaver Feedback SDK.
+ *
+ * Drop this into any React Native app for an instant debug console
+ * with message back-and-forth, hot reload, and build+deploy:
+ *
+ * ```tsx
+ * import { FloatingButton } from '@yaver/feedback-react-native';
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <YourApp />
+ *       <FloatingButton />
+ *     </>
+ *   );
+ * }
+ * ```
+ *
+ * Features:
+ * - **Tap** → expand terminal-style console panel
+ * - **Drag** → reposition anywhere
+ * - **Type** → send tasks to the AI agent, see responses
+ * - **Hot Reload** → trigger hot reload
+ * - **Build iOS** → build + auto-submit to TestFlight
+ * - **Build Android** → build + auto-submit to Play Store
+ * - **"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');
+    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;
+    const isDragging = (0, react_1.useRef)(false);
+    const [chatOpen, setChatOpen] = (0, react_1.useState)(false);
+    const [fullSize, setFullSize] = (0, react_1.useState)(false);
+    const [message, setMessage] = (0, react_1.useState)('');
+    const [sending, setSending] = (0, react_1.useState)(false);
+    const [output, setOutput] = (0, react_1.useState)([]);
+    const [reloading, setReloading] = (0, react_1.useState)(false);
+    const [isConnected, setIsConnected] = (0, react_1.useState)(false);
+    const [testSession, setTestSession] = (0, react_1.useState)(null);
+    const [showFixReport, setShowFixReport] = (0, react_1.useState)(false);
+    const testPollRef = (0, react_1.useRef)(null);
+    const outputScrollRef = (0, react_1.useRef)(null);
+    // Resolve agent URL and token — re-read from config each render
+    // because discoverAgent() may set agentUrl asynchronously after init.
+    const [resolvedAgentUrl, setResolvedAgentUrl] = (0, react_1.useState)(agentUrlProp || YaverFeedback_1.YaverFeedback.getConfig()?.agentUrl);
+    const config = YaverFeedback_1.YaverFeedback.getConfig();
+    const agentUrl = resolvedAgentUrl;
+    const authToken = authTokenProp || config?.authToken;
+    const panelBg = panelBackgroundColor || config?.panelBackgroundColor || DEFAULT_PANEL_BG;
+    const addOutput = (0, react_1.useCallback)((line) => {
+        setOutput((prev) => [...prev.slice(-20), line]);
+    }, []);
+    // Connection health polling — also picks up agentUrl from config when
+    // it becomes available after background discovery completes.
+    (0, react_1.useEffect)(() => {
+        if (!healthCheckInterval)
+            return;
+        const check = async () => {
+            // Re-read config in case discoverAgent() resolved since last check
+            const latestUrl = agentUrlProp || YaverFeedback_1.YaverFeedback.getConfig()?.agentUrl;
+            if (latestUrl && latestUrl !== resolvedAgentUrl) {
+                setResolvedAgentUrl(latestUrl);
+            }
+            if (!latestUrl)
+                return;
+            try {
+                const client = YaverFeedback_1.YaverFeedback.getP2PClient();
+                if (client) {
+                    setIsConnected(await client.health());
+                }
+                else {
+                    const controller = new AbortController();
+                    const timeout = setTimeout(() => controller.abort(), 3000);
+                    const resp = await fetch(`${latestUrl.replace(/\/$/, '')}/health`, {
+                        signal: controller.signal,
+                    });
+                    clearTimeout(timeout);
+                    setIsConnected(resp.ok);
+                }
+            }
+            catch {
+                setIsConnected(false);
+            }
+        };
+        check();
+        const interval = setInterval(check, healthCheckInterval);
+        return () => clearInterval(interval);
+    }, [agentUrlProp, healthCheckInterval, resolvedAgentUrl]);
+    const panResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => true,
+        onMoveShouldSetPanResponder: (_, gs) => Math.abs(gs.dx) > 4 || Math.abs(gs.dy) > 4,
+        onPanResponderGrant: () => {
+            pan.extractOffset();
+            isDragging.current = false;
+        },
+        onPanResponderMove: (_, gs) => {
+            if (Math.abs(gs.dx) > 4 || Math.abs(gs.dy) > 4)
+                isDragging.current = true;
+            react_native_1.Animated.event([null, { dx: pan.x, dy: pan.y }], { useNativeDriver: false })(_, gs);
+        },
+        onPanResponderRelease: () => pan.flattenOffset(),
+    })).current;
+    const handleTap = (0, react_1.useCallback)(() => {
+        if (isDragging.current)
+            return;
+        if (onPress) {
+            onPress();
+        }
+        else {
+            setChatOpen((prev) => !prev);
+        }
+    }, [onPress]);
+    // Send message → create task → poll for response
+    const handleSend = (0, react_1.useCallback)(async () => {
+        if (!message.trim() || !agentUrl || !authToken)
+            return;
+        const msg = message.trim();
+        setSending(true);
+        setMessage('');
+        react_native_1.Keyboard.dismiss();
+        addOutput(`> ${msg}`);
+        try {
+            const url = agentUrl.replace(/\/$/, '');
+            const resp = await fetch(`${url}/tasks`, {
+                method: 'POST',
+                headers: { Authorization: `Bearer ${authToken}`, 'Content-Type': 'application/json' },
+                body: JSON.stringify({ title: msg, source: 'feedback-console' }),
+            });
+            if (!resp.ok) {
+                addOutput(`err: ${resp.status}`);
+                setSending(false);
+                return;
+            }
+            const data = await resp.json();
+            const taskId = data.taskId ?? data.id ?? data.task?.id;
+            if (!taskId) {
+                addOutput('task created (no id)');
+                setSending(false);
+                return;
+            }
+            addOutput(`task ${taskId} started...`);
+            BlackBox_1.BlackBox.log(`Console task: ${msg}`, 'FloatingButton');
+            // Poll task output for up to 60s
+            let attempts = 0;
+            const poll = setInterval(async () => {
+                attempts++;
+                try {
+                    const sr = await fetch(`${url}/tasks/${taskId}`, {
+                        headers: { Authorization: `Bearer ${authToken}` },
+                    });
+                    if (!sr.ok) {
+                        clearInterval(poll);
+                        setSending(false);
+                        return;
+                    }
+                    const task = await sr.json();
+                    const t = task.task ?? task;
+                    if (t.status === 'completed' || t.status === 'failed' || t.status === 'stopped') {
+                        const out = t.output ?? t.rawOutput ?? '';
+                        if (out) {
+                            const lines = out.split('\n').filter((l) => l.trim());
+                            for (const l of lines.slice(-5))
+                                addOutput(l.slice(0, 80));
+                        }
+                        addOutput(t.status === 'completed' ? 'done.' : `${t.status}.`);
+                        clearInterval(poll);
+                        setSending(false);
+                    }
+                    else if (attempts >= 30) {
+                        addOutput('running in background...');
+                        clearInterval(poll);
+                        setSending(false);
+                    }
+                }
+                catch {
+                    clearInterval(poll);
+                    setSending(false);
+                }
+            }, 2000);
+        }
+        catch (e) {
+            addOutput(`fail: ${String(e).slice(0, 50)}`);
+            setSending(false);
+        }
+    }, [message, agentUrl, authToken, addOutput]);
+    // Generic action: send task to agent, poll for output
+    const runAgentAction = (0, react_1.useCallback)(async (label, prompt) => {
+        if (!agentUrl || !authToken)
+            return;
+        addOutput(`> ${label}`);
+        setSending(true);
+        try {
+            const url = agentUrl.replace(/\/$/, '');
+            const resp = await fetch(`${url}/tasks`, {
+                method: 'POST',
+                headers: { Authorization: `Bearer ${authToken}`, 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    title: prompt,
+                    source: 'feedback-sdk',
+                    description: `[Feedback SDK] User triggered "${label}" from the debug console.`,
+                }),
+            });
+            if (!resp.ok) {
+                addOutput(`err: ${resp.status}`);
+                setSending(false);
+                return;
+            }
+            const data = await resp.json();
+            const taskId = data.taskId ?? data.id ?? data.task?.id;
+            if (!taskId) {
+                addOutput('started (no id)');
+                setSending(false);
+                return;
+            }
+            addOutput(`${label}: task ${taskId}...`);
+            BlackBox_1.BlackBox.log(`Action: ${label}`, 'FloatingButton');
+            // Poll output
+            let attempts = 0;
+            const poll = setInterval(async () => {
+                attempts++;
+                try {
+                    const sr = await fetch(`${url}/tasks/${taskId}`, {
+                        headers: { Authorization: `Bearer ${authToken}` },
+                    });
+                    if (!sr.ok) {
+                        clearInterval(poll);
+                        setSending(false);
+                        return;
+                    }
+                    const task = await sr.json();
+                    const t = task.task ?? task;
+                    if (t.status === 'completed' || t.status === 'failed' || t.status === 'stopped') {
+                        const out = t.output ?? t.rawOutput ?? '';
+                        if (out) {
+                            for (const l of out.split('\n').filter((l) => l.trim()).slice(-5)) {
+                                addOutput(l.slice(0, 80));
+                            }
+                        }
+                        addOutput(t.status === 'completed' ? 'done.' : `${t.status}.`);
+                        clearInterval(poll);
+                        setSending(false);
+                    }
+                    else if (attempts >= 60) {
+                        addOutput('running in background...');
+                        clearInterval(poll);
+                        setSending(false);
+                    }
+                }
+                catch {
+                    clearInterval(poll);
+                    setSending(false);
+                }
+            }, 2000);
+        }
+        catch (e) {
+            addOutput(`fail: ${String(e).slice(0, 50)}`);
+            setSending(false);
+        }
+    }, [agentUrl, authToken, addOutput]);
+    const handleReload = (0, react_1.useCallback)(() => {
+        // @ts-ignore — __DEV__ is defined by React Native bundler
+        const isDev = typeof __DEV__ !== 'undefined' ? __DEV__ : true;
+        if (isDev) {
+            runAgentAction('hot-reload', 'Hot reload the app. Send the reload signal to the dev server to trigger a fast refresh.');
+        }
+        else {
+            runAgentAction('rebuild', 'This is a release build — hot reload is not available. ' +
+                'Rebuild the app using native tools (xcodebuild for iOS, gradle for Android — no Expo) ' +
+                'and upload to TestFlight/Play Store. Auto-increment build number. Report progress.');
+        }
+    }, [runAgentAction]);
+    // Build config from SDK settings
+    const buildPlatforms = config?.buildPlatforms ?? 'both';
+    const autoDeploy = config?.autoDeploy !== false; // default true
+    const handleBuild = (0, react_1.useCallback)(() => {
+        const platforms = buildPlatforms === 'both' ? ['ios', 'android'] : [buildPlatforms];
+        const parts = [];
+        for (const p of platforms) {
+            if (p === 'ios') {
+                parts.push(autoDeploy
+                    ? 'Build the iOS app, archive, and upload to TestFlight. Auto-increment the build number.'
+                    : 'Build the iOS app and archive it locally. Auto-increment the build number. Do NOT upload to TestFlight.');
+            }
+            else if (p === 'android') {
+                parts.push(autoDeploy
+                    ? 'Build the Android app (release AAB) and upload to Google Play internal testing. Auto-increment the versionCode.'
+                    : 'Build the Android app (release AAB) locally. Auto-increment the versionCode. Do NOT upload to Play Store.');
+            }
+            else if (p === 'web') {
+                parts.push('Build the web app for production.');
+            }
+        }
+        const deployLabel = autoDeploy ? ' + deploy' : '';
+        const platformLabel = buildPlatforms === 'both' ? 'iOS & Android' : buildPlatforms;
+        runAgentAction(`build-${platformLabel}${deployLabel}`, parts.join(' Then, ') + ' Report progress and result.');
+    }, [runAgentAction, buildPlatforms, autoDeploy]);
+    const handleBugReport = (0, react_1.useCallback)(async () => {
+        if (!agentUrl || !authToken)
+            return;
+        addOutput('> bug report');
+        setSending(true);
+        try {
+            // Try to capture screenshot (without SDK overlay)
+            let screenshotUri;
+            try {
+                const { captureScreenshot } = require('./capture');
+                screenshotUri = await captureScreenshot();
+            }
+            catch {
+                // Screenshot capture not available — send text-only report
+            }
+            const url = agentUrl.replace(/\/$/, '');
+            if (screenshotUri) {
+                // Upload screenshot as feedback with bug flag
+                const formData = new FormData();
+                formData.append('metadata', JSON.stringify({
+                    timestamp: new Date().toISOString(),
+                    type: 'bug-report',
+                    source: 'feedback-sdk',
+                }));
+                formData.append('screenshot_0', {
+                    uri: screenshotUri,
+                    type: 'image/png',
+                    name: 'bug_screenshot.png',
+                });
+                const resp = await fetch(`${url}/feedback`, {
+                    method: 'POST',
+                    headers: { Authorization: `Bearer ${authToken}` },
+                    body: formData,
+                });
+                if (resp.ok) {
+                    addOutput('screenshot captured & sent');
+                }
+                else {
+                    addOutput(`screenshot upload err: ${resp.status}`);
+                }
+            }
+            // Also create a task so the agent investigates
+            const resp = await fetch(`${url}/tasks`, {
+                method: 'POST',
+                headers: { Authorization: `Bearer ${authToken}`, 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    title: 'Bug report from device — investigate the attached screenshot and fix any visible issues.',
+                    source: 'feedback-sdk',
+                    description: '[Feedback SDK] User tapped the bug report button. A screenshot of the current screen was captured and sent. Investigate the UI state and fix any issues.',
+                    hasScreenshot: !!screenshotUri,
+                }),
+            });
+            if (resp.ok) {
+                const data = await resp.json();
+                const taskId = data.taskId ?? data.id ?? data.task?.id;
+                addOutput(taskId ? `bug task ${taskId} created` : 'bug report sent');
+                BlackBox_1.BlackBox.log('Bug report submitted', 'FloatingButton');
+            }
+            else {
+                addOutput(`err: ${resp.status}`);
+            }
+        }
+        catch (e) {
+            addOutput(`fail: ${String(e).slice(0, 50)}`);
+        }
+        finally {
+            setSending(false);
+        }
+    }, [agentUrl, authToken, addOutput]);
+    // Start autonomous test session
+    const handleTestApp = (0, react_1.useCallback)(async () => {
+        if (!agentUrl || !authToken)
+            return;
+        const isRunning = testSession?.active;
+        if (isRunning) {
+            // Stop test session
+            addOutput('> stopping test...');
+            try {
+                await fetch(`${agentUrl.replace(/\/$/, '')}/test-app/stop`, {
+                    method: 'POST',
+                    headers: { Authorization: `Bearer ${authToken}` },
+                });
+                addOutput('test session stopped.');
+                if (testPollRef.current)
+                    clearInterval(testPollRef.current);
+                testPollRef.current = null;
+                // Fetch final report
+                try {
+                    const resp = await fetch(`${agentUrl.replace(/\/$/, '')}/test-app/status`, {
+                        headers: { Authorization: `Bearer ${authToken}` },
+                    });
+                    if (resp.ok) {
+                        const session = await resp.json();
+                        setTestSession(session);
+                        if (session.fixes.length > 0) {
+                            addOutput(`${session.fixes.length} fixes applied (not committed).`);
+                            addOutput('tap "fixes" to view report.');
+                            setShowFixReport(true);
+                        }
+                    }
+                }
+                catch { }
+            }
+            catch (e) {
+                addOutput(`fail: ${String(e).slice(0, 50)}`);
+            }
+            return;
+        }
+        // Start test session
+        addOutput('> starting autonomous test...');
+        setSending(true);
+        try {
+            const url = agentUrl.replace(/\/$/, '');
+            const resp = await fetch(`${url}/test-app/start`, {
+                method: 'POST',
+                headers: { Authorization: `Bearer ${authToken}`, 'Content-Type': 'application/json' },
+                body: JSON.stringify({ source: 'feedback-sdk' }),
+            });
+            if (!resp.ok) {
+                addOutput(`err: ${resp.status}`);
+                setSending(false);
+                return;
+            }
+            const data = await resp.json();
+            addOutput(`test session ${data.sessionId ?? 'started'}...`);
+            addOutput('agent reading codebase for context...');
+            BlackBox_1.BlackBox.log('Test session started', 'FloatingButton');
+            // Poll test status every 3s
+            testPollRef.current = setInterval(async () => {
+                try {
+                    const sr = await fetch(`${url}/test-app/status`, {
+                        headers: { Authorization: `Bearer ${authToken}` },
+                    });
+                    if (sr.ok) {
+                        const session = await sr.json();
+                        setTestSession(session);
+                        if (!session.active && testPollRef.current) {
+                            clearInterval(testPollRef.current);
+                            testPollRef.current = null;
+                            addOutput(`test complete: ${session.errorsFound} errors, ${session.fixes.length} fixes.`);
+                            if (session.fixes.length > 0) {
+                                addOutput('tap "fixes" to view report.');
+                            }
+                            setSending(false);
+                        }
+                    }
+                }
+                catch { }
+            }, 3000);
+        }
+        catch (e) {
+            addOutput(`fail: ${String(e).slice(0, 50)}`);
+            setSending(false);
+        }
+    }, [agentUrl, authToken, addOutput, testSession]);
+    // Cleanup test poll on unmount
+    (0, react_1.useEffect)(() => {
+        return () => {
+            if (testPollRef.current)
+                clearInterval(testPollRef.current);
+        };
+    }, []);
+    const handleDisable = (0, react_1.useCallback)(() => {
+        YaverFeedback_1.YaverFeedback.setEnabled(false);
+        setChatOpen(false);
+    }, []);
+    // Auto-scroll output
+    (0, react_1.useEffect)(() => {
+        if (outputScrollRef.current) {
+            setTimeout(() => outputScrollRef.current?.scrollToEnd({ animated: true }), 50);
+        }
+    }, [output]);
+    const isTerminal = stylePreset === 'terminal';
+    const buttonIcon = icon ?? 'y';
+    const btnBg = isConnected ? color : `${color}88`;
+    const panelWidth = fullSize ? screenWidth - 24 : 280;
+    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={[
+                s.panel,
+                isTerminal ? s.panelTerminal : s.panelMinimal,
+                { borderColor: `${color}44`, width: panelWidth, backgroundColor: panelBg },
+                fullSize && { position: 'absolute', left: 0, top: size + 8 },
+            ]}>
+          {/* Header */}
+          <react_native_1.View style={s.headerRow}>
+            <react_native_1.Text style={[s.headerTitle, isTerminal && s.mono, { color }]}>
+              {isTerminal ? 'YAVER DEBUG' : 'Yaver'}
+            </react_native_1.Text>
+            <react_native_1.View style={[s.dotSmall, isConnected ? s.green : s.red]}/>
+            <react_native_1.Text style={[s.headerStatus, isTerminal && s.mono]}>
+              {isConnected ? 'live' : 'off'}
+            </react_native_1.Text>
+            <react_native_1.TouchableOpacity onPress={() => setFullSize(!fullSize)} style={s.xBtn}>
+              <react_native_1.Text style={s.xBtnText}>{fullSize ? '\u25A1' : '\u2197'}</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.TouchableOpacity onPress={() => { setChatOpen(false); setFullSize(false); }} style={s.xBtn}>
+              <react_native_1.Text style={s.xBtnText}>{'\u2715'}</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+
+          {/* Output area */}
+          <react_native_1.ScrollView ref={outputScrollRef} style={[s.outputArea, fullSize && s.outputAreaFull]} contentContainerStyle={s.outputContent}>
+            {output.length > 0 ? output.map((line, i) => (<react_native_1.Text key={i} style={[
+                    s.outputLine,
+                    isTerminal && s.mono,
+                    fullSize && s.outputLineFull,
+                    line.startsWith('>')
+                        ? s.outputLineUser
+                        : line === 'done.' || line.startsWith('task ')
+                            ? s.outputLineStatus
+                            : s.outputLineAgent,
+                ]}>
+                {line}
+              </react_native_1.Text>)) : (<react_native_1.Text style={[s.outputLine, isTerminal && s.mono, { color: '#666' }]}>
+                {isConnected ? 'connected. type a message or use actions below.' : 'not connected to agent.'}
+              </react_native_1.Text>)}
+            {sending && <react_native_1.ActivityIndicator color={color} size="small" style={{ marginTop: 4 }}/>}
+          </react_native_1.ScrollView>
+
+          {/* Input */}
+          <react_native_1.View style={s.inputRow}>
+            {isTerminal && <react_native_1.Text style={[s.prompt, { color }]}>&gt;</react_native_1.Text>}
+            <react_native_1.TextInput style={[s.input, isTerminal && s.mono, fullSize && s.inputFull]} placeholder={isTerminal ? 'tell the agent...' : 'Type a message...'} placeholderTextColor="#444" value={message} onChangeText={setMessage} onSubmitEditing={handleSend} returnKeyType="send" multiline={fullSize}/>
+            <react_native_1.TouchableOpacity style={[s.goBtn, { backgroundColor: color }, (sending || !message.trim()) && s.dim]} onPress={handleSend} disabled={sending || !message.trim() || !isConnected}>
+              {sending ? (<react_native_1.ActivityIndicator color="#fff" size="small"/>) : (<react_native_1.Text style={[s.goBtnText, isTerminal && s.mono]}>
+                  {isTerminal ? 'run' : 'Send'}
+                </react_native_1.Text>)}
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+
+          {/* Action cards row 1 — Reload | Build | Bug */}
+          <react_native_1.View style={s.cardRow}>
+            <react_native_1.TouchableOpacity style={[s.card, fullSize && s.cardFull, !isConnected && s.dim]} onPress={handleReload} disabled={sending || !isConnected}>
+              <react_native_1.Text style={[s.cardIcon, { color: '#fbbf24' }]}>{'\u21BB'}</react_native_1.Text>
+              <react_native_1.Text style={[s.cardLabel, isTerminal && s.mono]}>Hot Reload</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.TouchableOpacity style={[s.card, fullSize && s.cardFull, !isConnected && s.dim]} onPress={handleBuild} disabled={sending || !isConnected}>
+              <react_native_1.Text style={[s.cardIcon, { color: '#60a5fa' }]}>{'\u2692'}</react_native_1.Text>
+              <react_native_1.Text style={[s.cardLabel, isTerminal && s.mono]}>
+                {buildPlatforms === 'both' ? 'Build' : `Build ${buildPlatforms}`}
+              </react_native_1.Text>
+              {autoDeploy && (<react_native_1.Text style={[s.cardSub, isTerminal && s.mono]}>
+                  {buildPlatforms === 'ios' ? '+ TestFlight'
+                    : buildPlatforms === 'android' ? '+ Play Store'
+                        : buildPlatforms === 'both' ? '+ Deploy'
+                            : ''}
+                </react_native_1.Text>)}
+            </react_native_1.TouchableOpacity>
+            <react_native_1.TouchableOpacity style={[s.card, fullSize && s.cardFull, !isConnected && s.dim]} onPress={handleBugReport} disabled={sending || !isConnected}>
+              <react_native_1.Text style={[s.cardIcon, { color: '#f87171' }]}>{'\u{1F41B}'}</react_native_1.Text>
+              <react_native_1.Text style={[s.cardLabel, isTerminal && s.mono]}>Report Bug</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+
+          {/* Action cards row 2 — Test | Fixes */}
+          <react_native_1.View style={[s.cardRow, { marginTop: -2 }]}>
+            <react_native_1.TouchableOpacity style={[s.card, fullSize && s.cardFull, !isConnected && s.dim,
+                testSession?.active && { borderColor: '#a78bfa44', backgroundColor: '#a78bfa08' }]} onPress={handleTestApp} disabled={!isConnected}>
+              <react_native_1.Text style={[s.cardIcon, { color: '#a78bfa' }]}>
+                {testSession?.active ? '\u23F8' : '\u25B6'}
+              </react_native_1.Text>
+              <react_native_1.Text style={[s.cardLabel, isTerminal && s.mono]}>
+                {testSession?.active ? 'Stop Test' : 'Test App'}
+              </react_native_1.Text>
+              {testSession?.active && (<react_native_1.Text style={[s.cardSub, isTerminal && s.mono]}>
+                  {testSession.screensTested}/{testSession.screensDiscovered}
+                </react_native_1.Text>)}
+            </react_native_1.TouchableOpacity>
+            {testSession && testSession.fixes.length > 0 && (<react_native_1.TouchableOpacity style={[s.card, fullSize && s.cardFull]} onPress={() => setShowFixReport(true)}>
+                <react_native_1.Text style={[s.cardIcon, { color: '#22c55e' }]}>{'\u2713'}</react_native_1.Text>
+                <react_native_1.Text style={[s.cardLabel, isTerminal && s.mono]}>
+                  {testSession.fixes.length} Fixes
+                </react_native_1.Text>
+              </react_native_1.TouchableOpacity>)}
+          </react_native_1.View>
+
+          {/* Bottom row */}
+          <react_native_1.View style={s.actionsRow}>
+            <react_native_1.TouchableOpacity style={s.actionBtn} onPress={() => setOutput([])}>
+              <react_native_1.Text style={[s.actionText, isTerminal && s.mono]}>clear</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.TouchableOpacity style={s.actionBtn} onPress={() => {
+                setChatOpen(false);
+                YaverFeedback_1.YaverFeedback.startReport();
+            }}>
+              <react_native_1.Text style={[s.actionText, isTerminal && s.mono]}>report</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+            <react_native_1.TouchableOpacity style={s.actionBtn} onPress={handleDisable}>
+              <react_native_1.Text style={[s.actionText, isTerminal && s.mono, { color: '#f87171' }]}>quit</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+        </react_native_1.View>)}
+
+      {/* Fix Report Modal */}
+      <FixReport_1.FixReport session={testSession} visible={showFixReport} onClose={() => setShowFixReport(false)} color={color}/>
+
+      {/* The button */}
+      <react_native_1.TouchableOpacity style={[
+            s.button,
+            isTerminal ? s.buttonTerminal : s.buttonMinimal,
+            { backgroundColor: btnBg, width: size, height: size },
+            !isTerminal && { borderRadius: size / 2 },
+        ]} activeOpacity={0.7} onPress={handleTap}>
+        <react_native_1.Text style={[s.buttonIcon, isTerminal && s.mono, { fontSize: 22 }]}>
+          {chatOpen ? '\u2715' : buttonIcon}
+        </react_native_1.Text>
+        {showStatusDot && (<react_native_1.View style={[s.statusDot, isConnected ? s.green : s.red]}/>)}
+      </react_native_1.TouchableOpacity>
+    </react_native_1.Animated.View>);
+};
+exports.FloatingButton = FloatingButton;
+const s = react_native_1.StyleSheet.create({
+    root: { position: 'absolute', zIndex: 99999, alignItems: 'flex-start' },
+    mono: { fontFamily: 'Courier' },
+    // Button variants
+    button: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 3 },
+        shadowOpacity: 0.5,
+        shadowRadius: 5,
+        elevation: 10,
+    },
+    buttonTerminal: { borderRadius: 10 },
+    buttonMinimal: { /* borderRadius set inline */},
+    buttonIcon: { color: '#fff', fontWeight: '800', fontStyle: 'italic' },
+    statusDot: {
+        position: 'absolute',
+        top: -2,
+        right: -2,
+        width: 9,
+        height: 9,
+        borderRadius: 5,
+        borderWidth: 1.5,
+        borderColor: '#000',
+    },
+    green: { backgroundColor: '#22c55e' },
+    red: { backgroundColor: '#ef4444' },
+    // Panel
+    panel: {
+        padding: 10,
+        marginBottom: 6,
+        borderWidth: 1,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 0.5,
+        shadowRadius: 8,
+        elevation: 12,
+    },
+    panelTerminal: {
+        borderRadius: 12,
+    },
+    panelMinimal: {
+        borderRadius: 16,
+    },
+    // Header
+    headerRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 6, gap: 5 },
+    headerTitle: { flex: 1, fontSize: 11, fontWeight: '700', textTransform: 'uppercase', letterSpacing: 1 },
+    dotSmall: { width: 6, height: 6, borderRadius: 3 },
+    headerStatus: { fontSize: 10, color: '#666' },
+    xBtn: { paddingHorizontal: 6, paddingVertical: 2 },
+    xBtnText: { color: '#666', fontSize: 12 },
+    // Output
+    outputArea: {
+        backgroundColor: '#1a1a1a',
+        borderRadius: 8,
+        padding: 8,
+        marginBottom: 6,
+        maxHeight: 140,
+    },
+    outputAreaFull: { maxHeight: 300, minHeight: 160 },
+    outputContent: { paddingBottom: 4 },
+    outputLine: {
+        fontSize: 11,
+        lineHeight: 16,
+    },
+    outputLineUser: {
+        color: '#9ca3af',
+        fontStyle: 'italic',
+    },
+    outputLineAgent: {
+        color: '#e5e5e5',
+    },
+    outputLineStatus: {
+        color: '#22c55e',
+    },
+    outputLineFull: { fontSize: 13, lineHeight: 20 },
+    // Input
+    inputRow: { flexDirection: 'row', alignItems: 'center', gap: 4, marginBottom: 6 },
+    prompt: { fontSize: 14, fontWeight: '700' },
+    input: {
+        flex: 1,
+        backgroundColor: '#1a1a1a',
+        borderRadius: 6,
+        paddingHorizontal: 8,
+        paddingVertical: 6,
+        color: '#e5e5e5',
+        fontSize: 12,
+        borderWidth: 1,
+        borderColor: '#3a3a3a',
+    },
+    inputFull: { fontSize: 15, paddingVertical: 10 },
+    goBtn: { borderRadius: 6, paddingHorizontal: 10, paddingVertical: 6 },
+    goBtnText: { color: '#fff', fontSize: 11, fontWeight: '700' },
+    dim: { opacity: 0.3 },
+    // Action cards
+    cardRow: { flexDirection: 'row', gap: 6, marginBottom: 6 },
+    card: {
+        flex: 1,
+        backgroundColor: '#1a1a1a',
+        borderRadius: 8,
+        paddingVertical: 10,
+        alignItems: 'center',
+        borderWidth: 1,
+        borderColor: '#3a3a3a',
+    },
+    cardFull: { paddingVertical: 14 },
+    cardIcon: { fontSize: 18, marginBottom: 2 },
+    cardLabel: { fontSize: 10, color: '#999', fontWeight: '600' },
+    cardSub: { fontSize: 8, color: '#555', marginTop: 1 },
+    // Bottom actions
+    actionsRow: { flexDirection: 'row', gap: 4 },
+    actionBtn: {
+        flex: 1,
+        paddingVertical: 5,
+        borderRadius: 6,
+        alignItems: 'center',
+        backgroundColor: '#1a1a1a',
+        borderWidth: 1,
+        borderColor: '#3a3a3a',
+    },
+    actionText: { fontSize: 10, color: '#999', fontWeight: '600' },
+});