yaver-feedback-react-native 0.5.2 → 0.5.4

package/dist/FixReport.js

@@ -0,0 +1,282 @@
+"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.FixReport = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+/**
+ * Fix Report viewer — shows a markdown-style list of all fixes
+ * applied by the AI agent during a test session.
+ *
+ * Each fix shows the file, description, and error that triggered it.
+ * Tap a fix to expand and see the diff/code snippet.
+ *
+ * Fixes are NOT committed — they're staged changes the developer
+ * can review, accept, or revert.
+ */
+const FixReport = ({ session, visible, onClose, color = '#6366f1', }) => {
+    const [expanded, setExpanded] = (0, react_1.useState)(new Set());
+    const toggleExpand = (id) => {
+        setExpanded((prev) => {
+            const next = new Set(prev);
+            if (next.has(id))
+                next.delete(id);
+            else
+                next.add(id);
+            return next;
+        });
+    };
+    const fixes = session?.fixes ?? [];
+    return (<react_native_1.Modal visible={visible} animationType="slide" transparent>
+      <react_native_1.View style={s.overlay}>
+        <react_native_1.View style={s.container}>
+          {/* Header */}
+          <react_native_1.View style={s.header}>
+            <react_native_1.View style={{ flex: 1 }}>
+              <react_native_1.Text style={s.title}>Test Report</react_native_1.Text>
+              {session && (<react_native_1.Text style={s.subtitle}>
+                  {session.screensTested}/{session.screensDiscovered} screens
+                  {' \u00B7 '}
+                  {session.errorsFound} errors
+                  {' \u00B7 '}
+                  {fixes.length} fixes
+                </react_native_1.Text>)}
+            </react_native_1.View>
+            <react_native_1.TouchableOpacity onPress={onClose} style={s.closeBtn}>
+              <react_native_1.Text style={s.closeBtnText}>{'\u2715'}</react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+          </react_native_1.View>
+
+          {/* Status bar */}
+          {session?.active && (<react_native_1.View style={[s.statusBar, { backgroundColor: `${color}20` }]}>
+              <react_native_1.View style={[s.statusDot, { backgroundColor: color }]}/>
+              <react_native_1.Text style={[s.statusText, { color }]}>
+                {session.status || 'Testing...'}
+              </react_native_1.Text>
+            </react_native_1.View>)}
+
+          {/* Fix list */}
+          <react_native_1.ScrollView style={s.list} contentContainerStyle={s.listContent}>
+            {fixes.length === 0 ? (<react_native_1.View style={s.empty}>
+                <react_native_1.Text style={s.emptyText}>
+                  {session?.active
+                ? 'Agent is exploring the app...'
+                : 'No fixes yet. Start a test session.'}
+                </react_native_1.Text>
+              </react_native_1.View>) : (fixes.map((fix, i) => (<FixItem key={fix.id} fix={fix} index={i + 1} expanded={expanded.has(fix.id)} onToggle={() => toggleExpand(fix.id)} color={color}/>)))}
+          </react_native_1.ScrollView>
+
+          {/* Summary footer */}
+          {fixes.length > 0 && !session?.active && (<react_native_1.View style={s.footer}>
+              <react_native_1.Text style={s.footerText}>
+                {fixes.filter((f) => f.verified).length}/{fixes.length} verified
+                {' \u00B7 '}
+                Changes are staged, not committed.
+              </react_native_1.Text>
+            </react_native_1.View>)}
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+exports.FixReport = FixReport;
+function FixItem({ fix, index, expanded, onToggle, color, }) {
+    return (<react_native_1.Pressable onPress={onToggle} style={s.fixItem}>
+      {/* Fix header */}
+      <react_native_1.View style={s.fixHeader}>
+        <react_native_1.View style={[s.fixIndex, { backgroundColor: fix.verified ? '#22c55e20' : `${color}20` }]}>
+          <react_native_1.Text style={[s.fixIndexText, { color: fix.verified ? '#22c55e' : color }]}>
+            {fix.verified ? '\u2713' : index}
+          </react_native_1.Text>
+        </react_native_1.View>
+        <react_native_1.View style={{ flex: 1 }}>
+          <react_native_1.Text style={s.fixDesc}>{fix.description}</react_native_1.Text>
+          <react_native_1.Text style={s.fixFile}>
+            {fix.file}{fix.line ? `:${fix.line}` : ''}
+          </react_native_1.Text>
+        </react_native_1.View>
+        <react_native_1.Text style={s.expandIcon}>{expanded ? '\u25B2' : '\u25BC'}</react_native_1.Text>
+      </react_native_1.View>
+
+      {/* Error that triggered fix */}
+      {fix.error && (<react_native_1.View style={s.fixError}>
+          <react_native_1.Text style={s.fixErrorText}>{fix.error}</react_native_1.Text>
+        </react_native_1.View>)}
+
+      {/* Expanded: diff/code */}
+      {expanded && fix.diff && (<react_native_1.View style={s.diffBlock}>
+          <react_native_1.Text style={s.diffText}>{fix.diff}</react_native_1.Text>
+        </react_native_1.View>)}
+    </react_native_1.Pressable>);
+}
+const s = react_native_1.StyleSheet.create({
+    overlay: {
+        flex: 1,
+        backgroundColor: 'rgba(0,0,0,0.8)',
+        justifyContent: 'flex-end',
+    },
+    container: {
+        backgroundColor: '#0a0a0a',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        maxHeight: '85%',
+        borderWidth: 1,
+        borderColor: '#1a1a1a',
+        borderBottomWidth: 0,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 16,
+        borderBottomWidth: 1,
+        borderBottomColor: '#1a1a1a',
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '700',
+        color: '#e5e5e5',
+        fontFamily: 'Courier',
+    },
+    subtitle: {
+        fontSize: 11,
+        color: '#666',
+        marginTop: 2,
+        fontFamily: 'Courier',
+    },
+    closeBtn: { padding: 8 },
+    closeBtnText: { color: '#666', fontSize: 16 },
+    statusBar: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        gap: 8,
+    },
+    statusDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+    },
+    statusText: {
+        fontSize: 11,
+        fontWeight: '600',
+        fontFamily: 'Courier',
+    },
+    list: { flex: 1 },
+    listContent: { padding: 12, gap: 8 },
+    empty: {
+        padding: 32,
+        alignItems: 'center',
+    },
+    emptyText: {
+        color: '#444',
+        fontSize: 13,
+        fontFamily: 'Courier',
+    },
+    fixItem: {
+        backgroundColor: '#111',
+        borderRadius: 10,
+        padding: 12,
+        borderWidth: 1,
+        borderColor: '#1a1a1a',
+    },
+    fixHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+    },
+    fixIndex: {
+        width: 24,
+        height: 24,
+        borderRadius: 12,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    fixIndexText: {
+        fontSize: 11,
+        fontWeight: '700',
+        fontFamily: 'Courier',
+    },
+    fixDesc: {
+        fontSize: 12,
+        color: '#e5e5e5',
+        fontWeight: '600',
+    },
+    fixFile: {
+        fontSize: 10,
+        color: '#666',
+        fontFamily: 'Courier',
+        marginTop: 2,
+    },
+    expandIcon: {
+        color: '#444',
+        fontSize: 10,
+    },
+    fixError: {
+        marginTop: 8,
+        backgroundColor: '#f8717110',
+        borderRadius: 6,
+        padding: 8,
+    },
+    fixErrorText: {
+        fontSize: 10,
+        color: '#f87171',
+        fontFamily: 'Courier',
+    },
+    diffBlock: {
+        marginTop: 8,
+        backgroundColor: '#0d0d0d',
+        borderRadius: 6,
+        padding: 10,
+        borderWidth: 1,
+        borderColor: '#1a1a1a',
+    },
+    diffText: {
+        fontSize: 10,
+        color: '#22c55e',
+        fontFamily: 'Courier',
+        lineHeight: 16,
+    },
+    footer: {
+        borderTopWidth: 1,
+        borderTopColor: '#1a1a1a',
+        padding: 12,
+        alignItems: 'center',
+    },
+    footerText: {
+        fontSize: 10,
+        color: '#666',
+        fontFamily: 'Courier',
+    },
+});

package/dist/FloatingButton.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+export interface FloatingButtonProps {
+    /** Called when user taps the button (opens inline console by default). */
+    onPress?: () => void;
+    /** Initial position. Default: top-left corner, below status bar. */
+    initialPosition?: {
+        x: number;
+        y: number;
+    };
+    /** Button size in pixels. Default: 40. */
+    size?: number;
+    /**
+     * Button background color. Default: "#6366f1" (indigo).
+     * Use a distinctive color so the debug button is never confused
+     * with your app's UI. Suggested: pink, purple, lime.
+     */
+    color?: string;
+    /** Show connection status dot on the button. Default: true. */
+    showStatusDot?: boolean;
+    /**
+     * Style preset:
+     * - "terminal" (default) — dark terminal look with >_ icon, monospace font, pink accents
+     * - "minimal" — small circle, single-letter icon, clean panel
+     */
+    style?: 'terminal' | 'minimal';
+    /** Custom icon text. Default: "y". */
+    icon?: string;
+    /** Agent base URL (auto-detected from YaverFeedback config if omitted). */
+    agentUrl?: string;
+    /** Auth token (auto-detected from YaverFeedback config if omitted). */
+    authToken?: string;
+    /**
+     * Health check interval in ms. The button polls the agent's /health
+     * endpoint to show connection status. Default: 5000. Set to 0 to disable.
+     */
+    healthCheckInterval?: number;
+    /**
+     * Background color of the debug console panel.
+     * Default: "#2d2d2d" (dark gray). Override to match your app's theme.
+     */
+    panelBackgroundColor?: string;
+}
+/**
+ * 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
+ */
+export declare const FloatingButton: React.FC<FloatingButtonProps>;