@doppelgangerdev/doppelganger 0.2.2

package/src/components/editor/ResultsPane.tsx

@@ -0,0 +1,641 @@
+import { useEffect, useState } from 'react';
+import { Check, Copy, Terminal } from 'lucide-react';
+import { ConfirmRequest, Results } from '../../types';
+import CodeEditor from '../CodeEditor';
+import { SyntaxLanguage } from '../../utils/syntaxHighlight';
+
+interface ResultsPaneProps {
+    results: Results | null;
+    pinnedResults?: Results | null;
+    isExecuting: boolean;
+    isHeadful?: boolean;
+    onConfirm: (request: ConfirmRequest) => Promise<boolean>;
+    onNotify: (message: string, tone?: 'success' | 'error') => void;
+    onPin?: (results: Results) => void;
+    onUnpin?: () => void;
+    fullWidth?: boolean;
+}
+
+const MAX_PREVIEW_CHARS = 60000;
+const MAX_PREVIEW_ITEMS = 200;
+const MAX_PREVIEW_KEYS = 200;
+const MAX_COPY_CHARS = 1000000;
+const MAX_COPY_ITEMS = 2000;
+const MAX_COPY_KEYS = 2000;
+
+const formatSize = (chars: number) => `${(chars / (1024 * 1024)).toFixed(2)} MB`;
+const normalizeBoolean = (value: any) => {
+    if (typeof value === 'boolean') return value;
+    if (typeof value === 'string') {
+        const trimmed = value.trim().toLowerCase();
+        if (trimmed === 'true') return true;
+        if (trimmed === 'false') return false;
+    }
+    return null;
+};
+
+const clampText = (text: string, limit: number) => {
+    if (text.length <= limit) return { text, truncated: false };
+    return { text: text.slice(0, limit), truncated: true };
+};
+
+const getResultsCopyPayload = (payload: Results | null) => {
+    if (!payload || payload.data === undefined || payload.data === null) return { reason: 'No data to copy.' };
+    return { raw: payload.data };
+};
+
+const clampWithReason = (text: string, limit: number, reasons: string[]) => {
+    if (text.length <= limit) return text;
+    reasons.push(`first ${limit.toLocaleString()} chars`);
+    return text.slice(0, limit);
+};
+
+const getTruncatedCopyText = (raw: any) => {
+    const reasons: string[] = [];
+    if (typeof raw === 'string') {
+        const text = clampWithReason(raw, MAX_COPY_CHARS, reasons);
+        return { text, truncated: reasons.length > 0, reason: reasons.join(', ') };
+    }
+    if (Array.isArray(raw)) {
+        let snapshot = raw;
+        if (raw.length > MAX_COPY_ITEMS) {
+            snapshot = raw.slice(0, MAX_COPY_ITEMS);
+            reasons.push(`first ${MAX_COPY_ITEMS.toLocaleString()} items`);
+        }
+        let text = '';
+        try {
+            text = JSON.stringify(snapshot, null, 2);
+        } catch {
+            text = String(snapshot);
+        }
+        text = clampWithReason(text, MAX_COPY_CHARS, reasons);
+        return { text, truncated: reasons.length > 0, reason: reasons.join(', ') };
+    }
+    if (raw && typeof raw === 'object') {
+        let snapshot = raw;
+        const keys = Object.keys(raw);
+        if (keys.length > MAX_COPY_KEYS) {
+            snapshot = keys.slice(0, MAX_COPY_KEYS).reduce<Record<string, any>>((acc, key) => {
+                acc[key] = (raw as Record<string, any>)[key];
+                return acc;
+            }, {});
+            reasons.push(`first ${MAX_COPY_KEYS.toLocaleString()} keys`);
+        }
+        let text = '';
+        try {
+            text = JSON.stringify(snapshot, null, 2);
+        } catch {
+            text = String(snapshot);
+        }
+        text = clampWithReason(text, MAX_COPY_CHARS, reasons);
+        return { text, truncated: reasons.length > 0, reason: reasons.join(', ') };
+    }
+    const text = clampWithReason(String(raw), MAX_COPY_CHARS, reasons);
+    return { text, truncated: reasons.length > 0, reason: reasons.join(', ') };
+};
+
+const getFullCopyText = (raw: any) => {
+    if (typeof raw === 'string') return raw;
+    try {
+        return JSON.stringify(raw, null, 2);
+    } catch {
+        return String(raw);
+    }
+};
+
+const getResultsPreview = (payload: Results | null): { text: string; truncated: boolean; language: SyntaxLanguage } => {
+    if (!payload || payload.data === undefined || payload.data === null || payload.data === '') {
+        return { text: '', truncated: false, language: 'plain' as const };
+    }
+    const raw = payload.data;
+    if (typeof raw === 'string') {
+        const trimmed = raw.trim();
+        const language: SyntaxLanguage = trimmed.startsWith('<') && trimmed.includes('>')
+            ? 'html'
+            : (trimmed.startsWith('{') || trimmed.startsWith('['))
+                ? 'json'
+                : 'plain';
+        const clamped = clampText(raw, MAX_PREVIEW_CHARS);
+        return { text: clamped.text, truncated: clamped.truncated, language };
+    }
+    if (Array.isArray(raw)) {
+        const sliced = raw.length > MAX_PREVIEW_ITEMS ? raw.slice(0, MAX_PREVIEW_ITEMS) : raw;
+        const text = JSON.stringify(sliced, null, 2);
+        const clamped = clampText(text, MAX_PREVIEW_CHARS);
+        return { text: clamped.text, truncated: clamped.truncated || raw.length > MAX_PREVIEW_ITEMS, language: 'json' as const };
+    }
+    if (raw && typeof raw === 'object') {
+        const keys = Object.keys(raw);
+        let snapshot = raw;
+        let truncated = false;
+        if (keys.length > MAX_PREVIEW_KEYS) {
+            truncated = true;
+            snapshot = keys.slice(0, MAX_PREVIEW_KEYS).reduce<Record<string, any>>((acc, key) => {
+                acc[key] = (raw as Record<string, any>)[key];
+                return acc;
+            }, {});
+        }
+        const text = JSON.stringify(snapshot, null, 2);
+        const clamped = clampText(text, MAX_PREVIEW_CHARS);
+        return { text: clamped.text, truncated: clamped.truncated || truncated, language: 'json' as const };
+    }
+    const clamped = clampText(String(raw), MAX_PREVIEW_CHARS);
+    return { text: clamped.text, truncated: clamped.truncated, language: 'plain' as const };
+};
+
+const parseCsvRows = (text: string) => {
+    const rows: string[][] = [];
+    let row: string[] = [];
+    let current = '';
+    let inQuotes = false;
+
+    for (let i = 0; i < text.length; i += 1) {
+        const char = text[i];
+        if (inQuotes) {
+            if (char === '"') {
+                if (text[i + 1] === '"') {
+                    current += '"';
+                    i += 1;
+                } else {
+                    inQuotes = false;
+                }
+            } else {
+                current += char;
+            }
+        } else {
+            if (char === '"') {
+                inQuotes = true;
+            } else if (char === ',') {
+                row.push(current);
+                current = '';
+            } else if (char === '\n') {
+                row.push(current);
+                rows.push(row);
+                row = [];
+                current = '';
+            } else if (char === '\r') {
+                // ignore CR
+            } else {
+                current += char;
+            }
+        }
+    }
+    row.push(current);
+    if (row.length > 1 || row[0] !== '' || rows.length > 0) rows.push(row);
+    return rows;
+};
+
+const getTableData = (raw: any) => {
+    if (!raw) return null;
+    if (typeof raw === 'string') {
+        const text = raw.trim();
+        if (!text.includes(',') || !text.includes('\n')) return null;
+        const rows = parseCsvRows(text).filter((r) => r.some((cell) => String(cell || '').trim() !== ''));
+        if (rows.length < 2) return null;
+        const header = rows[0].map((cell, idx) => {
+            const trimmed = String(cell || '').trim();
+            return trimmed || `column_${idx + 1}`;
+        });
+        const body = rows.slice(1);
+        if (header.length < 2) return null;
+        return { headers: header, rows: body };
+    }
+    if (Array.isArray(raw)) {
+        if (raw.length === 0) return null;
+        if (raw.every((item) => item && typeof item === 'object' && !Array.isArray(item))) {
+            const headers: string[] = [];
+            raw.forEach((item) => {
+                Object.keys(item).forEach((key) => {
+                    if (!headers.includes(key)) headers.push(key);
+                });
+            });
+            if (headers.length === 0) return null;
+            const rows = raw.map((item) => headers.map((key) => item[key] ?? ''));
+            return { headers, rows };
+        }
+        if (raw.every((item) => Array.isArray(item))) {
+            const maxCols = Math.max(...raw.map((item) => item.length));
+            const headers = Array.from({ length: maxCols }, (_, idx) => `column_${idx + 1}`);
+            return { headers, rows: raw };
+        }
+        return null;
+    }
+    if (raw && typeof raw === 'object') {
+        const headers = Object.keys(raw);
+        if (headers.length === 0) return null;
+        return { headers, rows: [headers.map((key) => raw[key] ?? '')] };
+    }
+    return null;
+};
+
+const getExportPayload = (raw: any, tableData: { headers: string[]; rows: any[][] } | null) => {
+    if (raw === undefined || raw === null) return null;
+    if (typeof raw === 'string') {
+        if (tableData) {
+            return { content: raw, mime: 'text/csv', ext: 'csv' };
+        }
+        return { content: raw, mime: 'application/json', ext: 'json' };
+    }
+    return { content: JSON.stringify(raw, null, 2), mime: 'application/json', ext: 'json' };
+};
+
+const downloadText = (filename: string, content: string, mime: string) => {
+    const blob = new Blob([content], { type: mime });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = filename;
+    document.body.appendChild(link);
+    link.click();
+    link.remove();
+    URL.revokeObjectURL(url);
+};
+
+const ResultsPane: React.FC<ResultsPaneProps> = ({ results, pinnedResults, isExecuting, isHeadful, onConfirm, onNotify, onPin, onUnpin, fullWidth }) => {
+    const [copied, setCopied] = useState<string | null>(null);
+    const [dataView, setDataView] = useState<'raw' | 'table'>('raw');
+    const [resultView, setResultView] = useState<'latest' | 'pinned'>(() => (pinnedResults && !results ? 'pinned' : 'latest'));
+    const [headfulViewer, setHeadfulViewer] = useState<'checking' | 'native' | 'novnc'>('checking');
+    const activeResults = resultView === 'pinned' && pinnedResults ? pinnedResults : results;
+    const tableData = getTableData(activeResults?.data);
+    const preview = activeResults && activeResults.data !== undefined && activeResults.data !== null && activeResults.data !== ''
+        ? getResultsPreview(activeResults)
+        : null;
+    const screenshotSrc = activeResults?.screenshotUrl
+        ? `${activeResults.screenshotUrl}${resultView === 'latest' ? `?t=${Date.now()}` : ''}`
+        : null;
+    const renderCellValue = (value: any) => {
+        const boolValue = normalizeBoolean(value);
+        if (boolValue !== null) {
+            if (!boolValue) return '';
+            return <Check className="w-3 h-3 text-blue-400" />;
+        }
+        return value ?? '';
+    };
+
+    useEffect(() => {
+        if (tableData) {
+            setDataView('table');
+        } else {
+            setDataView('raw');
+        }
+    }, [activeResults]);
+
+    useEffect(() => {
+        if (results) {
+            setResultView('latest');
+            return;
+        }
+        if (pinnedResults) setResultView('pinned');
+    }, [results, pinnedResults]);
+
+    useEffect(() => {
+        if (!pinnedResults && resultView === 'pinned') {
+            setResultView('latest');
+        }
+    }, [pinnedResults, resultView]);
+
+    useEffect(() => {
+        if (!isHeadful || resultView !== 'latest') return;
+        let cancelled = false;
+        const checkHeadful = async () => {
+            try {
+                const res = await fetch('/api/headful/status', { cache: 'no-store' });
+                const data = res.ok ? await res.json() : { useNovnc: false };
+                if (cancelled) return;
+                if (data && data.useNovnc) {
+                    try {
+                        const test = await fetch('/novnc/core/rfb.js', { method: 'HEAD', cache: 'no-store' });
+                        if (!cancelled) setHeadfulViewer(test.ok ? 'novnc' : 'native');
+                    } catch {
+                        if (!cancelled) setHeadfulViewer('native');
+                    }
+                } else {
+                    if (!cancelled) setHeadfulViewer('native');
+                }
+            } catch {
+                if (!cancelled) setHeadfulViewer('native');
+            }
+        };
+        checkHeadful();
+        return () => {
+            cancelled = true;
+        };
+    }, [isHeadful, resultView]);
+
+    const handleCopy = async (text: string, id: string, options?: { skipSizeConfirm?: boolean; truncatedNotice?: boolean }) => {
+        if (!text) {
+            onNotify('Nothing to copy.', 'error');
+            return;
+        }
+        let copyText = text;
+        if (!options?.skipSizeConfirm && text.length > MAX_COPY_CHARS) {
+            const confirmed = await onConfirm({
+                message: `Copying ${formatSize(text.length)} may freeze your browser.`,
+                confirmLabel: 'Copy full',
+                cancelLabel: 'Copy segment'
+            });
+            if (!confirmed) {
+                copyText = text.slice(0, MAX_COPY_CHARS);
+            }
+        }
+
+        try {
+            if (navigator.clipboard && window.isSecureContext) {
+                await navigator.clipboard.writeText(copyText);
+            } else {
+                const textArea = document.createElement('textarea');
+                textArea.value = copyText;
+                textArea.style.position = 'fixed';
+                textArea.style.left = '-999999px';
+                textArea.style.top = '-999999px';
+                document.body.appendChild(textArea);
+                textArea.focus();
+                textArea.select();
+                document.execCommand('copy');
+                textArea.remove();
+            }
+            setCopied(id);
+            setTimeout(() => setCopied(null), 2000);
+            if (options?.truncatedNotice) {
+                onNotify('Copied truncated data.', 'success');
+            } else if (copyText.length !== text.length) {
+                onNotify('Copied a truncated preview.', 'success');
+            }
+        } catch (err) {
+            console.error('Copy failed:', err);
+            onNotify('Copy failed.', 'error');
+        }
+    };
+
+    if (isHeadful && resultView === 'latest') {
+        const { origin, hostname } = window.location;
+        const headfulUrl = `${origin}/novnc.html?host=${hostname}&port=54311&path=websockify`;
+        if (headfulViewer === 'native') {
+            return (
+                <div className="glass-card rounded-[32px] overflow-hidden h-[80vh] w-full relative flex items-center justify-center">
+                    <div className="text-[10px] font-bold uppercase tracking-widest text-gray-500">
+                        Headful session running in a native browser window.
+                    </div>
+                </div>
+            );
+        }
+        if (headfulViewer === 'checking') {
+            return (
+                <div className="glass-card rounded-[32px] overflow-hidden h-[80vh] w-full relative flex items-center justify-center">
+                    <div className="text-[10px] font-bold uppercase tracking-widest text-gray-500">
+                        Checking headful viewer...
+                    </div>
+                </div>
+            );
+        }
+        return (
+            <div className="glass-card rounded-[32px] overflow-hidden h-[80vh] w-full relative">
+                <iframe
+                    src={headfulUrl}
+                    className="absolute inset-0 w-full h-full"
+                    title="Headful Browser"
+                />
+            </div>
+        );
+    }
+
+    if (!activeResults && !(isExecuting && resultView === 'latest')) {
+        return (
+            <div className="h-full flex flex-col items-center justify-center text-center space-y-4 opacity-20">
+                <div className="w-16 h-16 border border-white/10 rounded-full flex items-center justify-center">
+                    <Terminal className="w-6 h-6 text-white" />
+                </div>
+                <p className="text-[9px] font-bold uppercase tracking-[0.3em]">Ready</p>
+            </div>
+        );
+    }
+
+    const containerClassName = fullWidth ? 'space-y-12 relative z-10 w-full' : 'space-y-12 relative z-10 max-w-5xl mx-auto';
+
+    return (
+        <div className={containerClassName}>
+            <div className="flex items-end justify-between border-b border-white/5 pb-10">
+                <div className="space-y-4">
+                    <p className="text-[9px] font-bold text-gray-500 uppercase tracking-[0.3em]">Preview</p>
+                    <h2 className="text-xl font-mono text-white truncate max-w-xl tracking-tight italic">
+                        {activeResults?.finalUrl || activeResults?.url || ''}
+                    </h2>
+                </div>
+                <div className={`px-4 py-2 rounded-xl text-[9px] font-bold uppercase tracking-[0.2em] ${
+                    resultView === 'pinned'
+                        ? 'bg-amber-500/10 text-amber-300'
+                        : isExecuting
+                            ? 'bg-blue-500/10 text-blue-400 animate-pulse'
+                            : 'bg-green-500/10 text-green-400'
+                }`}>
+                    {resultView === 'pinned' ? 'Pinned' : (isExecuting ? 'Running' : 'Finished')}
+                </div>
+            </div>
+
+            <div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
+                <div className="glass-card rounded-[32px] overflow-hidden flex flex-col min-h-[400px]">
+                    <div className="p-6 border-b border-white/5 flex items-center justify-between text-[8px] font-bold text-gray-500 uppercase tracking-widest">
+                        <span>Screenshot</span>
+                        <span className="text-white/20">{activeResults?.timestamp || '--:--:--'}</span>
+                    </div>
+                    <div className="relative bg-black flex-1 flex items-center justify-center overflow-hidden">
+                        {screenshotSrc ? (
+                            <img
+                                src={screenshotSrc}
+                                className="absolute inset-0 w-full h-full object-contain transition-opacity duration-1000"
+                            />
+                        ) : (
+                            <div className="text-[8px] font-bold text-white/5 uppercase tracking-widest">Waiting for Frame...</div>
+                        )}
+                    </div>
+                </div>
+                <div className="glass-card rounded-[32px] p-8 flex flex-col h-[400px]">
+                    <span className="text-[8px] font-bold text-gray-500 uppercase tracking-widest mb-6 border-b border-white/5 pb-4">Activity Log</span>
+                    <div className="flex-1 font-mono text-[10px] text-gray-400 space-y-2 overflow-y-auto custom-scrollbar pr-2">
+                        {activeResults?.logs?.map((log: string, i: number) => (
+                            <div key={i} className="flex gap-2">
+                                <span className="text-white/10 shrink-0">›</span> <span>{log}</span>
+                            </div>
+                        ))}
+                        {isExecuting && resultView === 'latest' && (!activeResults?.logs || activeResults?.logs.length === 0) && <div className="animate-pulse">Connecting to kernel...</div>}
+                    </div>
+                </div>
+            </div>
+
+            <div className="glass-card rounded-[32px] p-8 flex flex-col relative">
+                <div className="flex items-center justify-between border-b border-white/5 pb-4 mb-6">
+                    <span className="text-[8px] font-bold text-gray-500 uppercase tracking-widest">Data</span>
+                    <div className="flex items-center gap-2">
+                        {pinnedResults && (
+                            <div className="flex bg-white/5 rounded-lg p-0.5 border border-white/10">
+                                {(['latest', 'pinned'] as const).map((mode) => (
+                                    <button
+                                        key={mode}
+                                        onClick={() => setResultView(mode)}
+                                        className={`px-3 py-1 rounded text-[8px] font-bold uppercase tracking-widest transition-all ${resultView === mode ? 'bg-white text-black' : 'text-gray-500 hover:text-white'}`}
+                                    >
+                                        {mode}
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+                        {tableData && (
+                            <div className="flex bg-white/5 rounded-lg p-0.5 border border-white/10">
+                                {(['table', 'raw'] as const).map((mode) => (
+                                    <button
+                                        key={mode}
+                                        onClick={() => setDataView(mode)}
+                                        className={`px-3 py-1 rounded text-[8px] font-bold uppercase tracking-widest transition-all ${dataView === mode ? 'bg-white text-black' : 'text-gray-500 hover:text-white'}`}
+                                    >
+                                        {mode}
+                                    </button>
+                                ))}
+                            </div>
+                        )}
+                        {resultView === 'pinned' ? (
+                            <button
+                                onClick={() => {
+                                    onUnpin?.();
+                                    setResultView('latest');
+                                }}
+                                className="px-3 py-2 border text-[9px] font-bold rounded-xl uppercase transition-all flex items-center gap-2 bg-white/5 border-white/10 text-amber-200 hover:bg-white/10"
+                                title="Unpin data"
+                            >
+                                Unpin
+                            </button>
+                        ) : (
+                            <button
+                                onClick={() => {
+                                    if (!activeResults) {
+                                        onNotify('No data to pin.', 'error');
+                                        return;
+                                    }
+                                    onPin?.(activeResults);
+                                    setResultView('pinned');
+                                }}
+                                className="px-3 py-2 border text-[9px] font-bold rounded-xl uppercase transition-all flex items-center gap-2 bg-white/5 border-white/10 text-white hover:bg-white/10"
+                                title="Pin data"
+                            >
+                                {pinnedResults ? 'Update Pin' : 'Pin'}
+                            </button>
+                        )}
+                        <button
+                            onClick={() => {
+                                const payload = getExportPayload(activeResults?.data, tableData);
+                                if (!payload) {
+                                    onNotify('No data to export.', 'error');
+                                    return;
+                                }
+                                const name = `doppelganger-data-${new Date().toISOString().replace(/[:.]/g, '-')}.${payload.ext}`;
+                                downloadText(name, payload.content, payload.mime);
+                                onNotify(`Exported ${payload.ext.toUpperCase()}.`, 'success');
+                            }}
+                            className="px-3 py-2 border text-[9px] font-bold rounded-xl uppercase transition-all flex items-center gap-2 bg-white/5 border-white/10 text-white hover:bg-white/10"
+                            title="Export extracted data"
+                        >
+                            Export
+                        </button>
+                        <button
+                            onClick={async () => {
+                                const payload = getResultsCopyPayload(activeResults);
+                                if (payload.reason) {
+                                    onNotify(payload.reason || 'Data too large to copy safely.', 'error');
+                                    return;
+                                }
+                                const preview = getResultsPreview(activeResults);
+                                const fullText = getFullCopyText(payload.raw);
+                                let copyText = fullText;
+                                let usedTruncated = false;
+
+                                if (preview.truncated) {
+                                    const confirmed = await onConfirm({
+                                        message: 'Preview is truncated for performance.',
+                                        confirmLabel: 'Copy full',
+                                        cancelLabel: 'Copy preview'
+                                    });
+                                    if (!confirmed) {
+                                        copyText = preview.text || '';
+                                        usedTruncated = true;
+                                    }
+                                }
+
+                                if (copyText.length > MAX_COPY_CHARS) {
+                                    const proceed = await onConfirm({
+                                        message: `Copying ${formatSize(copyText.length)} may freeze your browser.`,
+                                        confirmLabel: 'Copy full',
+                                        cancelLabel: usedTruncated ? 'Copy preview' : 'Copy truncated'
+                                    });
+                                    if (!proceed) {
+                                        const truncated = getTruncatedCopyText(payload.raw);
+                                        copyText = truncated.text;
+                                        usedTruncated = true;
+                                    }
+                                }
+
+                                void handleCopy(copyText, 'data', { skipSizeConfirm: true, truncatedNotice: usedTruncated });
+                            }}
+                            className={`px-3 py-2 border text-[9px] font-bold rounded-xl uppercase transition-all flex items-center gap-2 ${copied === 'data' ? 'bg-green-500/10 border-green-500/20 text-green-400' : 'bg-white/5 border-white/10 text-white hover:bg-white/10'}`}
+                            title="Copy extracted data"
+                        >
+                            {copied === 'data' ? <Check className="w-3 h-3" /> : <Copy className="w-3 h-3" />}
+                            {copied === 'data' ? 'Copied' : 'Copy'}
+                        </button>
+                    </div>
+                </div>
+                {preview?.truncated && (
+                    <button
+                        type="button"
+                        onClick={() => onNotify('Preview truncated for performance.', 'error')}
+                        className="absolute top-5 right-5 h-2.5 w-2.5 rounded-full bg-amber-400 shadow-[0_0_8px_rgba(251,191,36,0.6)]"
+                        title="Preview truncated"
+                    />
+                )}
+                <div className="max-h-[70vh] overflow-y-auto custom-scrollbar pr-2 relative">
+                    {(() => {
+                        if (isExecuting && resultView === 'latest' && (!activeResults || activeResults.data === undefined)) {
+                            return <pre className="font-mono text-[10px] text-blue-300/60 whitespace-pre-wrap leading-relaxed">Buffering data stream...</pre>;
+                        }
+                        if (!activeResults || activeResults.data === undefined || activeResults.data === null || activeResults.data === '') {
+                            return <pre className="font-mono text-[10px] text-blue-300/60 whitespace-pre-wrap leading-relaxed">No data available.</pre>;
+                        }
+                        return (
+                            <div>
+                                {tableData && dataView === 'table' ? (
+                                    <div className="overflow-auto custom-scrollbar rounded-2xl border border-white/10">
+                                        <table className="min-w-full table-auto text-[10px] text-left text-white/80 font-mono">
+                                            <thead className="bg-white/5 text-[9px] uppercase tracking-widest text-white/50">
+                                                <tr>
+                                                    {tableData.headers.map((header) => (
+                                                        <th key={header} className="px-3 py-2 border-b border-white/10 whitespace-nowrap">
+                                                            {header}
+                                                        </th>
+                                                    ))}
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                {tableData.rows.map((row, rowIndex) => (
+                                                    <tr key={rowIndex} className="odd:bg-white/[0.02]">
+                                                        {tableData.headers.map((_, colIndex) => (
+                                                            <td key={`${rowIndex}-${colIndex}`} className="px-3 py-2 border-b border-white/5 align-top whitespace-normal break-words">
+                                                                {renderCellValue(row[colIndex])}
+                                                            </td>
+                                                        ))}
+                                                    </tr>
+                                                ))}
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                ) : (
+                                    <CodeEditor readOnly value={preview?.text || ''} language={preview?.language || 'plain'} />
+                                )}
+                            </div>
+                        );
+                    })()}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ResultsPane;

package/src/components/editor/actionCatalog.ts

@@ -0,0 +1,23 @@
+import { Action } from '../../types';
+
+export const ACTION_CATALOG: { type: Action['type']; label: string; description: string }[] = [
+    { type: 'click', label: 'Click', description: 'Click an element' },
+    { type: 'type', label: 'Type', description: 'Type text into a field' },
+    { type: 'hover', label: 'Hover', description: 'Hover an element' },
+    { type: 'press', label: 'Press', description: 'Press a key' },
+    { type: 'wait', label: 'Wait', description: 'Pause for seconds' },
+    { type: 'scroll', label: 'Scroll', description: 'Scroll the page or container' },
+    { type: 'javascript', label: 'JavaScript', description: 'Run custom JS' },
+    { type: 'csv', label: 'CSV', description: 'Parse CSV into rows' },
+    { type: 'merge', label: 'Merge', description: 'Merge inputs into a single output' },
+    { type: 'if', label: 'If', description: 'Conditional block start' },
+    { type: 'else', label: 'Else', description: 'Conditional alternate path' },
+    { type: 'end', label: 'End Block', description: 'Close a block' },
+    { type: 'while', label: 'While', description: 'Loop while condition true' },
+    { type: 'repeat', label: 'Repeat N', description: 'Repeat block N times' },
+    { type: 'foreach', label: 'For Each', description: 'Loop through items' },
+    { type: 'set', label: 'Set Variable', description: 'Update variable value' },
+    { type: 'stop', label: 'Stop Task', description: 'Stop task with status' },
+    { type: 'on_error', label: 'On Error', description: 'Run on failure' },
+    { type: 'start', label: 'Start Task', description: 'Run another task' }
+];