@decido/plugin-chameleon 1.0.0

package/src/views/DatawayStudioView.tsx

@@ -0,0 +1,959 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { toast } from 'sonner';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import {
+    Database, TableProperties, RefreshCw, X,
+    Search, ServerCrash, FunctionSquare, LayoutGrid,
+    ChevronRight, Loader2, ArrowUpDown, Server, Download,
+    Layers, Plus, Trash2, ArrowRight, BarChart3, Table2,
+    Save, Link, ChevronDown, Filter, Edit2, Network, Clock
+} from 'lucide-react';
+import { FormulaBar } from '../components/FormulaBar';
+import { DatawayDashboard } from '../components/DatawayDashboard';
+import { DatawayFilterModal } from '../components/DatawayFilterModal';
+import { DatawayMathModal } from '../components/DatawayMathModal';
+import { DatawayPipelineManager } from '../components/DatawayPipelineManager';
+import { DatawaySchemaMapper } from '../components/DatawaySchemaMapper';
+import { DatawayOrchestratorCanvas } from '../components/DatawayOrchestratorCanvas';
+
+interface SortConfig {
+    key: string;
+    direction: 'asc' | 'desc';
+}
+
+interface PipelineStep {
+    id: string;
+    name: string;
+    script: string;
+}
+
+const baseUrl = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001';
+
+export const DatawayStudioView = () => {
+    // Dynamic Schema & Tables State
+    interface SecondaryResource {
+        connectorId: string;
+        resource: string;
+        boundName: string;
+    }
+
+    const [connectors] = useState<{id: string, name: string}[]>([
+        { id: 'postgres', name: 'PostgreSQL Core' },
+        { id: 'google_sheets', name: 'Google Sheets MCP' }
+    ]);
+    const [activeConnector, setActiveConnector] = useState('google_sheets');
+    const [tables, setTables] = useState<string[]>([]);
+    const [columnsCache, setColumnsCache] = useState<Record<string, string[]>>({});
+
+    // --- PIPELINE LOGIC ---
+    const [pipelineSteps, setPipelineSteps] = useState<PipelineStep[]>([]);
+    const [activeStepId, setActiveStepId] = useState<string | null>(null);
+    const [activeTable, setActiveTable] = useState<string | null>(null);
+
+    // UI states
+    const [viewMode, setViewMode] = useState<string>('grid');
+    const [isTablesLoading, setIsTablesLoading] = useState(true);
+    const [isDataLoading, setIsDataLoading] = useState(false);
+    const [isSyncing, setIsSyncing] = useState(false);
+    const [data, setData] = useState<any[]>([]);
+    const [secondaryResources, setSecondaryResources] = useState<SecondaryResource[]>([]);
+    const [searchTerm, setSearchTerm] = useState('');
+    const [sortConfig, setSortConfig] = useState<SortConfig | null>(null);
+    const [connectionError, setConnectionError] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+    const [activeColumnMenu, setActiveColumnMenu] = useState<string | null>(null);
+    const [filterModalConfig, setFilterModalConfig] = useState<{isOpen: boolean, col: string, type: 'text'|'number'|'date'} | null>(null);
+    const [mathModalOpen, setMathModalOpen] = useState(false);
+    const [pipelineManagerOpen, setPipelineManagerOpen] = useState(false);
+    const [isSchemaMapperOpen, setIsSchemaMapperOpen] = useState(false);
+    const [isOrchestratorOpen, setIsOrchestratorOpen] = useState(false);
+    const [leftSidebarOpen, setLeftSidebarOpen] = useState(false);
+    const [stepsSidebarOpen, setStepsSidebarOpen] = useState(false);
+
+    // Script State
+    const [activeScript, setActiveScript] = useState('');
+
+    const fetchSchema = async () => {
+        setIsTablesLoading(true);
+        setConnectionError(null);
+        try {
+            const res = await fetch(`${baseUrl}/api/dataway/resources?connectorId=${activeConnector}`, {
+                headers: { 'x-api-key': 'dev_ak_chameleon_studio_99x' }
+            });
+            if (!res.ok) throw new Error('API Endpoint no disponible');
+
+            const result = await res.json();
+            const tableList = Array.isArray(result.resources) ? result.resources : [];
+            setTables(tableList);
+
+            if (tableList.length > 0) setActiveTable(tableList[0]);
+            else setActiveTable(null);
+        } catch (error: any) {
+            setConnectionError(error.message);
+        } finally {
+            setIsTablesLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchSchema();
+        localStorage.setItem('dataway_active_connector', activeConnector);
+    }, [activeConnector]);
+
+    const compilePipelineScript = (steps: PipelineStep[], upToId?: string): string => {
+        let compiled = '';
+        for (const step of steps) {
+            if (!compiled) {
+                compiled = step.script;
+            } else {
+                // Safely replace the exact word "Source" or "SOURCE" with the entire accumulated nested function
+                // M-Script naturally composes as nested AST layers
+                compiled = step.script.replace(/\bSource\b/g, compiled);
+            }
+            if (upToId && step.id === upToId) break;
+        }
+        return compiled;
+    };
+
+    const handleLoadPipeline = (loadedScript: string) => {
+        const newStep = {
+            id: Date.now().toString(),
+            name: "Plantilla ETL",
+            script: loadedScript,
+            isValidData: true,
+            isComputed: false
+        };
+        setPipelineSteps([newStep]);
+        setActiveStepId(newStep.id);
+        setActiveScript(loadedScript);
+        if (activeTable) fetchTableData(activeTable, loadedScript);
+    };
+
+    const fetchTableData = async (tableName: string, scriptToRun?: string) => {
+        setIsDataLoading(true);
+        setSearchTerm('');
+        setSortConfig(null);
+        setError(null);
+        try {
+            const res = await fetch(`${baseUrl}/api/dataway/query`, {
+                method: 'POST',
+                headers: {
+                    'x-api-key': 'dev_ak_chameleon_studio_99x',
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    connectorId: activeConnector,
+                    resource: tableName,
+                    type: activeConnector === 'postgres' ? 'table' : 'range',
+                    m_script: scriptToRun || undefined,
+                    secondaryResources: secondaryResources.length > 0 ? secondaryResources : undefined
+                })
+            });
+            if (!res.ok) {
+                const errBody = await res.json().catch(() => ({}));
+                throw new Error(errBody.error || `El backend Dataway rechazó la solicitud (HTTP ${res.status})`);
+            }
+
+            const result = await res.json();
+            setData(Array.isArray(result.data) ? result.data : []);
+            // Update the active script state exclusively if passed down
+            if (scriptToRun !== undefined) {
+                setActiveScript(scriptToRun);
+            }
+        } catch (err: any) {
+            setError(err.message);
+            toast.error(`Error en la consulta`, { description: err.message });
+            setData([]);
+        } finally {
+            setIsDataLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        if (activeTable) {
+            localStorage.setItem('dataway_active_resource', activeTable);
+            const fullCompiledScript = compilePipelineScript(pipelineSteps, activeStepId || undefined);
+            fetchTableData(activeTable, fullCompiledScript);
+        } else {
+            localStorage.removeItem('dataway_active_resource');
+        }
+    }, [activeTable]); // Only re-fetch when activeTable changes initially
+
+    const handleExecutePipelineStep = (script: string, overrideTable?: string) => {
+        if (!script.trim()) return;
+
+        let newSteps = [...pipelineSteps];
+        const isChangingTable = overrideTable && overrideTable !== activeTable;
+        
+        // If the AI changes the target table, we MUST clear the pipeline to avoid polluting it with incompatible columns
+        if (isChangingTable) {
+            newSteps = [];
+        }
+
+        const activeIndex = isChangingTable ? -1 : newSteps.findIndex(s => s.id === activeStepId);
+
+        // Append a new step if we are at the end, if there is no active step, or if the active step is invalid
+        if (activeIndex === newSteps.length - 1 || activeStepId === null || activeIndex === -1) {
+            const newStep = {
+                id: Math.random().toString(36).substr(2, 9),
+                name: `Paso ${newSteps.length + 1}`,
+                script
+            };
+            newSteps.push(newStep);
+            setPipelineSteps(newSteps);
+            setActiveStepId(newStep.id);
+        } else {
+            // Edit existing step
+            newSteps[activeIndex].script = script;
+            setPipelineSteps(newSteps);
+        }
+
+        const stepToCompile = isChangingTable ? newSteps[0].id : (activeStepId || undefined);
+        const fullCompiledScript = compilePipelineScript(newSteps, stepToCompile);
+        
+        const targetTable = overrideTable || activeTable;
+        if (targetTable) {
+            fetchTableData(targetTable, fullCompiledScript);
+        }
+    };
+
+    // Escuchar scripts generados desde el Chat Principal (DatawayChatShell)
+    useEffect(() => {
+        const handleRemoteScript = (e: any) => {
+            const script = e.detail?.script;
+            const targetResource = e.detail?.resource;
+            
+            if (script && typeof script === 'string') {
+                if (targetResource && targetResource !== activeTable) {
+                    setActiveTable(targetResource);
+                    handleExecutePipelineStep(script, targetResource);
+                    toast.success(`Cambiando de forma autónoma a la tabla ${targetResource}`);
+                } else {
+                    handleExecutePipelineStep(script);
+                    toast.success('Recibido desde Agente AI');
+                }
+            }
+        };
+        window.addEventListener('intent:dataway-generate-script', handleRemoteScript);
+        return () => window.removeEventListener('intent:dataway-generate-script', handleRemoteScript);
+    }, [pipelineSteps, activeStepId, activeTable]);
+
+    const handleSelectStep = (stepId: string) => {
+        setActiveStepId(stepId);
+        const fullCompiledScript = compilePipelineScript(pipelineSteps, stepId);
+        if (activeTable) {
+            fetchTableData(activeTable, fullCompiledScript);
+        }
+    };
+
+    const handleDeleteStep = (e: React.MouseEvent, stepId: string) => {
+        e.stopPropagation();
+        const filtered = pipelineSteps.filter(s => s.id !== stepId);
+        setPipelineSteps(filtered);
+
+        const newActiveId = filtered.length > 0 ? filtered[filtered.length - 1].id : null;
+        setActiveStepId(newActiveId);
+
+        const fullCompiledScript = compilePipelineScript(filtered, newActiveId || undefined);
+        if (activeTable) {
+            fetchTableData(activeTable, fullCompiledScript);
+        } else {
+            setData([]); // fallback clear
+        }
+    };
+
+    const handleClearPipeline = () => {
+        setPipelineSteps([]);
+        setActiveStepId(null);
+        setActiveScript('');
+        if (activeTable) {
+            fetchTableData(activeTable, '');
+        }
+    };
+
+    const handleSort = (key: string) => {
+        let direction: 'asc' | 'desc' = 'asc';
+        if (sortConfig && sortConfig.key === key && sortConfig.direction === 'asc') direction = 'desc';
+        setSortConfig({ key, direction });
+    };
+
+    const executeVisualAction = (action: string, col: string) => {
+        setActiveColumnMenu(null);
+        let code = '';
+        if (action === 'rename') {
+            const newName = prompt(`Renombrar columna '${col}':`, col);
+            if (!newName || newName === col) return;
+            code = `Table.RenameColumns(Source, {{"${col}", "${newName}"}})`;
+        } else if (action === 'remove') {
+            if (!confirm(`¿Estás seguro de eliminar la columna '${col}'?`)) return;
+            code = `Table.RemoveColumns(Source, "${col}")`;
+        } else if (action === 'sort') {
+            code = `Table.Sort(Source, "${col}")`;
+        } else if (action === 'filter') {
+            const val = processedData.find(r => r[col] !== null && r[col] !== undefined)?.[col];
+            let type: 'text'|'number'|'date' = 'text';
+            if (val !== undefined && val !== null) {
+                if (!isNaN(Number(val)) && String(val).trim() !== '') type = 'number';
+                else if (isNaN(Number(val)) && !isNaN(Date.parse(String(val)))) type = 'date';
+            }
+            setFilterModalConfig({ isOpen: true, col, type });
+            return; // Modal handles injection
+        } else if (action === 'group_sum') {
+            const sumCol = prompt(`Vas a agrupar por '${col}'. ¿Qué columna deseas SUMAR para totalizar?`, "");
+            if (!sumCol) return;
+            code = `Table.GroupSum(Source, "${col}", "${sumCol}", "Total_${sumCol}")`;
+        } else if (action === 'drop_nulls') {
+            code = `Table.DropNulls(Source, "${col}")`;
+        } else if (action === 'fill_nulls') {
+            const val = prompt(`¿Con qué valor (ej. 0 o "N/A") deseas rellenar los datos vacíos en '${col}'?`, "0");
+            if (val === null || val === '') return;
+            const isNum = !isNaN(Number(val)) && val.trim() !== '';
+            const mVal = isNum ? val : `"${val}"`;
+            code = `Table.FillNulls(Source, "${col}", ${mVal})`;
+        }
+
+        if (code) {
+            handleExecutePipelineStep(code);
+            toast.success("Paso generado exitosamente");
+        }
+    };
+
+    const handleApplyFilter = (col: string, op: string, val: string) => {
+        setFilterModalConfig(null);
+        let mVal = `"${val}"`;
+        const isNum = !isNaN(Number(val)) && val.trim() !== '';
+        // Si el usuario eligió Number type o Date type, enviamos raw types al parser o strings.
+        // M-polyglot lee Number(val) si no tiene comillas.
+        if (isNum) mVal = val;
+        
+        const code = `Table.Filter(Source, "${col}", "${op}", ${mVal})`;
+        handleExecutePipelineStep(code);
+        toast.success("Filtro Inteligente aplicado");
+    };
+
+    const handleApplyMath = (newColName: string, leftCol: string, op: string, rightOperand: string) => {
+        setMathModalOpen(false);
+        const rightQuoted = `"${rightOperand}"`;
+        const code = `Table.MathColumn(Source, "${newColName}", "${leftCol}", "${op}", ${rightQuoted})`;
+        handleExecutePipelineStep(code);
+        toast.success("Columna Calculada agregada");
+    };
+
+    const processedData = useMemo(() => {
+        let sortableItems = [...data];
+        if (searchTerm) {
+            const lowercasedFilter = searchTerm.toLowerCase();
+            sortableItems = sortableItems.filter(item =>
+                Object.keys(item).some(key => String(item[key]).toLowerCase().includes(lowercasedFilter))
+            );
+        }
+        if (sortConfig !== null) {
+            sortableItems.sort((a, b) => {
+                const aVal = a[sortConfig.key];
+                const bVal = b[sortConfig.key];
+                if (aVal < bVal) return sortConfig.direction === 'asc' ? -1 : 1;
+                if (aVal > bVal) return sortConfig.direction === 'asc' ? 1 : -1;
+                return 0;
+            });
+        }
+        return sortableItems;
+    }, [data, searchTerm, sortConfig]);
+
+    const columns = data.length > 0 ? Object.keys(data[0]) : [];
+
+    // --- DATA PROFILER (QUALITY METRICS) ---
+    const columnStats = useMemo(() => {
+        if (processedData.length === 0) return {};
+        const stats: Record<string, { valid: number, empty: number, total: number }> = {};
+        
+        columns.forEach(col => {
+            let valid = 0;
+            let empty = 0;
+            const total = processedData.length;
+            
+            for (let i = 0; i < total; i++) {
+                const val = processedData[i][col];
+                if (val === null || val === undefined || val === '') {
+                    empty++;
+                } else {
+                    valid++;
+                }
+            }
+            stats[col] = { valid, empty, total };
+        });
+        return stats;
+    }, [processedData, columns]);
+
+    const handleExportCSV = () => {
+        if (processedData.length === 0) return;
+        const csvRows = [];
+        csvRows.push(columns.join(','));
+        for (const row of processedData) {
+            const values = columns.map(header => {
+                const val = row[header];
+                if (val === null || val === undefined) return '';
+                const str = String(val).replace(/"/g, '""');
+                return `"${str}"`;
+            });
+            csvRows.push(values.join(','));
+        }
+        const blob = new Blob([csvRows.join('\n')], { type: 'text/csv;charset=utf-8;' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.setAttribute('href', url);
+        link.setAttribute('download', `dataway_${activeTable}_${new Date().getTime()}.csv`);
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        toast.success(`Exportados ${processedData.length} registros exitosamente`);
+    };
+
+    const handleSyncDestination = async () => {
+        if (processedData.length === 0) return;
+        const targetTable = prompt("Ingrese el nombre de la tabla de destino en PostgreSQL:");
+        if (!targetTable) return;
+
+        setIsSyncing(true);
+        toast.loading(`Sincronizando ${processedData.length} registros hacia ${targetTable}...`, { id: 'sync-db' });
+        
+        try {
+            const payload = {
+                connectorId: 'postgres',
+                destinationTable: targetTable,
+                data: processedData
+            };
+
+            const response = await fetch(`${baseUrl}/api/dataway/sync`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'x-api-key': 'dev_ak_chameleon_studio_99x'
+                },
+                body: JSON.stringify(payload)
+            });
+
+            if (!response.ok) {
+                const err = await response.json();
+                throw new Error(err.error || 'Error en sincronización');
+            }
+
+            const result = await response.json();
+            toast.success(`Sincronización Exitosa: ${result.rowsInserted} filas insertadas en ${result.destination}`, { id: 'sync-db' });
+        } catch (error: any) {
+            toast.error(`Error de Sincronización`, { description: error.message, id: 'sync-db' });
+        } finally {
+            setIsSyncing(false);
+        }
+    };
+
+    // --- VIRTUALIZATION HOOK ---
+    const parentRef = useRef<HTMLDivElement>(null);
+    const rowVirtualizer = useVirtualizer({
+        count: processedData.length,
+        getScrollElement: () => parentRef.current,
+        estimateSize: () => 45, // default row height approximation
+        overscan: 10,
+    });
+    const virtualItems = rowVirtualizer.getVirtualItems();
+
+    return (
+        <div className="w-full h-full flex flex-row overflow-hidden" style={{
+            '--bg-primary': 'var(--ds-surface-primary, #ffffff)',
+            '--bg-elevated': 'var(--ds-surface-secondary, #f8fafc)',
+            '--bg-surface': 'var(--ds-surface-tertiary, #f1f5f9)',
+            '--border-color': 'var(--ds-border-default, #e2e8f0)',
+            '--text-primary': 'var(--ds-text-primary, #0f172a)',
+            '--text-secondary': 'var(--ds-text-secondary, #64748b)',
+            '--brand-primary': 'var(--ds-accent-blue, #6366f1)',
+            '--brand-primary-hover': 'var(--ds-accent-blue-hover, #4f46e5)',
+        } as React.CSSProperties}>
+
+            <AnimatePresence>
+                {leftSidebarOpen && (
+                    <motion.div 
+                        initial={{ width: 0, opacity: 0 }}
+                        animate={{ width: 288, opacity: 1 }}
+                        exit={{ width: 0, opacity: 0 }}
+                        transition={{ duration: 0.2 }}
+                        className="border-r border-[var(--border-color)] bg-[var(--bg-elevated)] flex flex-col h-full z-10 shrink-0 overflow-hidden"
+                    >
+                        <div className="w-72 flex flex-col h-full">
+                <div className="p-6 border-b border-[var(--border-color)] flex flex-col gap-4 bg-[var(--bg-primary)]">
+                    <div className="flex items-center gap-3">
+                        <div className="p-2 bg-[var(--brand-primary)]/10 rounded-xl">
+                            <FunctionSquare className="w-6 h-6 text-[var(--brand-primary)]" />
+                        </div>
+                        <div>
+                            <h2 className="font-extrabold text-[var(--text-primary)] tracking-tight text-lg leading-none">Dataway Studio</h2>
+                            <p className="text-[11px] font-medium text-[var(--text-secondary)] uppercase tracking-wider mt-1">M-Script Engine</p>
+                        </div>
+                    </div>
+
+                    <select
+                        value={activeConnector}
+                        onChange={(e) => setActiveConnector(e.target.value)}
+                        className="w-full bg-[var(--bg-surface)] border border-[var(--border-color)] text-[var(--text-primary)] text-sm font-bold rounded-lg px-3 py-2 outline-none cursor-pointer"
+                    >
+                        {connectors.map(c => (
+                            <option key={c.id} value={c.id}>{c.name}</option>
+                        ))}
+                    </select>
+                </div>
+
+                <div className="p-4 flex-1 overflow-y-auto w-full space-y-1.5 custom-scrollbar">
+                    <h3 className="text-xs font-bold text-[var(--text-secondary)] tracking-wider uppercase mb-3 px-2 flex items-center justify-between">
+                        Recursos
+                        <button onClick={fetchSchema} className="hover:text-[var(--text-primary)] transition-colors p-1 rounded-md">
+                            <RefreshCw className="w-3 h-3" />
+                        </button>
+                    </h3>
+
+                    {isTablesLoading ? (
+                        <div className="space-y-2 px-2">
+                            {[1,2,3].map(skeleton => (
+                                <div key={skeleton} className="h-10 bg-[var(--bg-surface)] rounded-lg animate-pulse w-full"></div>
+                            ))}
+                        </div>
+                    ) : (
+                        tables.map((table, idx) => (
+                            <button
+                                key={`${table}-${idx}`}
+                                onClick={() => setActiveTable(table)}
+                                className={`w-full flex items-center justify-between px-3 py-2.5 rounded-xl text-sm font-semibold transition-all group ${
+                                    activeTable === table
+                                    ? 'bg-[var(--brand-primary)] text-white shadow-md'
+                                    : 'text-[var(--text-secondary)] hover:bg-[var(--bg-surface)] hover:text-[var(--text-primary)]'
+                                }`}
+                            >
+                                <div className="flex items-center gap-3">
+                                    <TableProperties className={`w-4 h-4 ${activeTable === table ? 'text-[var(--bg-surface)]' : ''}`} />
+                                    <span className="capitalize">{table}</span>
+                                </div>
+                                <div className="flex items-center gap-2">
+                                    <div 
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            const suggestedName = `${activeConnector}_${table}`.replace(/[^a-zA-Z0-9_]/g, '');
+                                            const boundName = prompt("Asignar nombre de variable local (ej. Clientes) para el JOIN:", suggestedName);
+                                            if (boundName) {
+                                                if (secondaryResources.some(r => r.boundName === boundName)) {
+                                                    toast.error("El nombre de la variable ya existe.");
+                                                    return;
+                                                }
+                                                setSecondaryResources(prev => [...prev, { connectorId: activeConnector, resource: table, boundName }]);
+                                                toast.success(`Referencia: ${boundName} agregada al contexto.`);
+                                            }
+                                        }}
+                                        className="opacity-0 group-hover:opacity-100 p-1 hover:bg-black/10 rounded transition-colors"
+                                        title="Inyectar en Contexto Secundario (Federated Join)"
+                                    >
+                                        <Plus className="w-3.5 h-3.5" />
+                                    </div>
+                                    {activeTable === table && <ChevronRight className="w-4 h-4 opacity-70" />}
+                                </div>
+                            </button>
+                        ))
+                    )}
+                </div>
+                        </div>
+                    </motion.div>
+                )}
+            </AnimatePresence>
+
+            <div className="flex-1 bg-[var(--bg-surface)] flex flex-col h-full min-w-0">
+                <FormulaBar
+                    activeResource={activeTable}
+                    activeConnector={activeConnector}
+                    isLoading={isDataLoading}
+                    schemaColumns={columns}
+                    onExecute={handleExecutePipelineStep}
+                    onClear={handleClearPipeline}
+                />
+                
+                <div className="bg-[var(--bg-primary)] border-b border-[var(--border-color)] px-4 py-2 flex items-center justify-between z-10 overflow-x-auto custom-scrollbar">
+                    <div className="flex items-center gap-2">
+                        <button 
+                            onClick={() => setLeftSidebarOpen(!leftSidebarOpen)}
+                            className={`p-1.5 rounded-md border transition-colors flex items-center justify-center ${leftSidebarOpen ? 'bg-slate-800 text-white border-slate-700 dark:bg-indigo-500/20 dark:text-indigo-300' : 'bg-[var(--bg-surface)] text-[var(--text-secondary)] border-[var(--border-color)] hover:bg-[var(--bg-elevated)]'}`}
+                            title="Alternar panel de Recursos"
+                        >
+                            <Database className="w-4 h-4" />
+                        </button>
+                        <button 
+                            onClick={() => setStepsSidebarOpen(!stepsSidebarOpen)}
+                            className={`p-1.5 rounded-md border transition-colors flex items-center justify-center ${stepsSidebarOpen ? 'bg-slate-800 text-white border-slate-700 dark:bg-indigo-500/20 dark:text-indigo-300' : 'bg-[var(--bg-surface)] text-[var(--text-secondary)] border-[var(--border-color)] hover:bg-[var(--bg-elevated)]'}`}
+                            title="Alternar panel de Pasos Aplicados"
+                        >
+                            <Layers className="w-4 h-4" />
+                        </button>
+
+                        <div className="w-px h-4 bg-[var(--border-color)] mx-1" />
+
+                        <button 
+                            onClick={() => setMathModalOpen(true)}
+                            disabled={columns.length === 0}
+                            className="text-xs font-semibold px-3 py-1.5 rounded-md bg-purple-50 text-purple-700 border border-purple-200 hover:bg-purple-100 transition-colors flex items-center gap-2 disabled:opacity-50"
+                        >
+                            <Plus className="w-3.5 h-3.5" />
+                            Columna Calculada
+                        </button>
+                    </div>
+                    <div>
+                        <button 
+                            onClick={() => setPipelineManagerOpen(true)}
+                            className="text-xs font-semibold px-3 py-1.5 rounded-md bg-[var(--bg-surface)] border border-[var(--border-color)] hover:bg-[var(--bg-elevated)] transition-colors flex items-center gap-2 text-[var(--text-primary)]"
+                        >
+                            <Database className="w-3.5 h-3.5" />
+                            Gestor de Plantillas
+                        </button>
+                    </div>
+                    <div>
+                        <button 
+                            onClick={() => setIsOrchestratorOpen(true)}
+                            className="text-xs font-semibold px-3 py-1.5 rounded-md bg-amber-50 text-amber-700 border border-amber-200 hover:bg-amber-100 transition-colors flex items-center gap-2"
+                        >
+                            <Clock className="w-3.5 h-3.5" />
+                            Dataway Cron (Orchestrator)
+                        </button>
+                    </div>
+                    <div>
+                        <button 
+                            onClick={() => setIsSchemaMapperOpen(true)}
+                            disabled={!activeTable}
+                            className="text-xs font-semibold px-3 py-1.5 rounded-md bg-indigo-50 text-indigo-700 border border-indigo-200 hover:bg-indigo-100 transition-colors flex items-center gap-2 disabled:opacity-50"
+                        >
+                            <Network className="w-3.5 h-3.5" />
+                            Mapa Relacional (ERD)
+                        </button>
+                    </div>
+                </div>
+
+                <div className="flex-1 flex min-w-0 min-h-0 bg-[var(--bg-primary)]">
+                    {/* APPLIED STEPS PIPELINE SIDEBAR */}
+                    <AnimatePresence>
+                        {stepsSidebarOpen && (
+                            <motion.div 
+                                initial={{ width: 0, opacity: 0 }}
+                                animate={{ width: 256, opacity: 1 }}
+                                exit={{ width: 0, opacity: 0 }}
+                                transition={{ duration: 0.2 }}
+                                className="border-r border-[var(--border-color)] bg-[var(--bg-elevated)] flex flex-col min-h-0 shrink-0 overflow-hidden"
+                            >
+                                <div className="w-64 flex flex-col h-full">
+                        <div className="p-4 border-b border-[var(--border-color)] flex items-center justify-between">
+                            <h3 className="text-xs font-bold text-[var(--text-primary)] uppercase tracking-wider flex items-center gap-2">
+                                <Layers className="w-4 h-4 text-[var(--brand-primary)]" />
+                                Pasos Aplicados
+                            </h3>
+                            {pipelineSteps.length > 0 && (
+                                <button onClick={handleClearPipeline} className="text-[var(--text-secondary)] hover:text-red-500 transition-colors" title="Limpiar Pipeline">
+                                    <Trash2 className="w-4 h-4" />
+                                </button>
+                            )}
+                        </div>
+                        <div className="flex-1 overflow-y-auto p-3 space-y-2">
+                            <div 
+                                className={`p-3 rounded-lg border cursor-pointer transition-all text-sm mb-2 ${
+                                    activeStepId === null 
+                                    ? 'border-[var(--brand-primary)] bg-[var(--brand-primary)]/10 text-[var(--brand-primary)]' 
+                                    : 'border-[var(--border-color)] hover:border-[var(--brand-primary)]/50 text-[var(--text-secondary)]'
+                                }`}
+                                onClick={() => handleSelectStep('source')}
+                            >
+                                <div className="font-semibold flex items-center gap-2">
+                                    <Database className="w-4 h-4" />
+                                    Origen de Datos
+                                </div>
+                                <div className="text-[10px] opacity-70 mt-1 truncate">
+                                    {activeTable || 'Seleccione una tabla'}
+                                </div>
+                            </div>
+                            
+                            {pipelineSteps.map((step, index) => (
+                                <div className="flex flex-col relative" key={step.id}>
+                                    <div className="absolute -top-3 left-4 h-3 w-px bg-[var(--border-color)]"></div>
+                                    <div 
+                                        className={`flex items-start justify-between p-3 rounded-lg border group cursor-pointer transition-all text-sm ${
+                                            activeStepId === step.id 
+                                            ? 'border-purple-500 bg-purple-50/50 text-purple-900 shadow-sm' 
+                                            : 'border-[var(--border-color)] hover:border-purple-300 text-[var(--text-secondary)] bg-[var(--bg-primary)]'
+                                        }`}
+                                        onClick={() => handleSelectStep(step.id)}
+                                    >
+                                        <div className="min-w-0 pr-2">
+                                            <div className="font-semibold">{step.name}</div>
+                                            <div className="text-[10px] opacity-70 mt-1 truncate font-mono">
+                                                {step.script.length > 30 ? step.script.substring(0, 30) + '...' : step.script}
+                                            </div>
+                                        </div>
+                                        <button 
+                                            className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-600 transition-opacity p-1"
+                                            onClick={(e) => handleDeleteStep(e, step.id)}
+                                            title="Eliminar Paso"
+                                        >
+                                            <X className="w-3.5 h-3.5" />
+                                        </button>
+                                    </div>
+                                </div>
+                            ))}
+                            
+                            <div className="text-center pt-2">
+                                <span className="text-[10px] text-[var(--text-secondary)] font-medium">Ejecuta código para añadir pasos</span>
+                            </div>
+
+                            {/* BOUND SECONDARY RESOURCES */}
+                            {secondaryResources.length > 0 && (
+                                <div className="mt-6 border-t border-[var(--border-color)] pt-4">
+                                    <h4 className="text-[10px] font-bold text-[var(--text-secondary)] uppercase tracking-wider mb-2 flex items-center justify-between">
+                                        <span>Recursos Vinculados</span>
+                                        <span className="bg-[var(--brand-primary)]/20 text-[var(--brand-primary)] px-1.5 py-0.5 rounded text-[9px]">{secondaryResources.length}</span>
+                                    </h4>
+                                    <div className="space-y-1.5">
+                                        {secondaryResources.map((res, idx) => (
+                                            <div key={idx} className="flex flex-col p-2 rounded-lg bg-[var(--bg-primary)] border border-[var(--border-color)] group">
+                                                <div className="flex items-center justify-between">
+                                                    <span className="text-xs font-bold text-[var(--text-primary)]">{res.boundName}</span>
+                                                    <button 
+                                                        onClick={() => setSecondaryResources(prev => prev.filter(r => r.boundName !== res.boundName))}
+                                                        className="opacity-0 group-hover:opacity-100 text-red-400 hover:text-red-600 transition-opacity p-0.5"
+                                                        title="Remover Binding"
+                                                    >
+                                                        <X className="w-3 h-3" />
+                                                    </button>
+                                                </div>
+                                                <div className="text-[9px] text-[var(--text-secondary)] truncate flex items-center gap-1 mt-0.5">
+                                                    <Database className="w-2.5 h-2.5" />
+                                                    {res.connectorId} : {res.resource}
+                                                </div>
+                                            </div>
+                                        ))}
+                                    </div>
+                                    <div className="text-[9px] text-[var(--text-secondary)] mt-2 text-center opacity-70">
+                                        Utilizalos en Table.NestedJoin(...)
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                                </div>
+                            </motion.div>
+                        )}
+                    </AnimatePresence>
+
+                    <div className="flex-1 min-w-0 overflow-hidden p-6 flex flex-col relative">
+                        {!activeTable ? (
+                            <div className="m-auto flex flex-col items-center justify-center opacity-40">
+                                <LayoutGrid className="w-16 h-16 mb-4" />
+                                <h2 className="text-xl font-bold">Sin Datos Activos</h2>
+                                <p className="text-sm">Selecciona o crea un Dataway.</p>
+                            </div>
+                        ) : viewMode === 'dashboard' ? (
+                            <DatawayDashboard data={processedData} columns={columns} />
+                        ) : (
+                        <div className="flex-1 min-w-0 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-2xl shadow-sm overflow-hidden flex flex-col relative">
+                            <div ref={parentRef} className="overflow-auto flex-1 custom-scrollbar relative">
+                                <table className="w-full text-left text-sm whitespace-nowrap">
+                                    <thead className="bg-[var(--bg-elevated)] sticky top-0 shadow-[0_1px_2px_rgba(0,0,0,0.05)]" style={{ zIndex: 10 }}>
+                                        <tr>
+                                            {columns.map(col => {
+                                                const sampleVal = processedData.length > 0 ? processedData.find(r => r[col] !== null && r[col] !== undefined)?.[col] : null;
+                                                const isNumericCol = sampleVal !== null && sampleVal !== undefined && !isNaN(Number(sampleVal)) && String(sampleVal).trim() !== '';
+                                                const stats = columnStats[col];
+
+                                                return (
+                                                <th key={col} className="px-6 py-4 hover:bg-[var(--bg-surface)] transition-colors select-none relative group">
+                                                    <div className={`flex flex-col gap-1 w-full`}>
+                                                        <div className={`flex items-center gap-2 text-xs font-bold text-[var(--text-secondary)] uppercase tracking-wider cursor-pointer ${isNumericCol ? 'justify-end' : ''}`} onClick={() => setActiveColumnMenu(activeColumnMenu === col ? null : col)}>
+                                                            {col}
+                                                            <ChevronDown className={`w-3.5 h-3.5 transition-transform ${activeColumnMenu === col ? 'rotate-180 text-[var(--brand-primary)]' : 'opacity-0 group-hover:opacity-100'}`} />
+                                                        </div>
+                                                        {stats && (
+                                                            <div className="h-[3px] w-full bg-red-400 mt-0.5 flex overflow-hidden rounded-full opacity-70" title={`Válidos: ${stats.valid} | Vacíos: ${stats.empty}`}>
+                                                                <div className="bg-green-500 h-full" style={{ width: `${(stats.valid / stats.total) * 100}%` }} />
+                                                                <div className="bg-gray-300 h-full" style={{ width: `${(stats.empty / stats.total) * 100}%` }} />
+                                                            </div>
+                                                        )}
+                                                    </div>
+
+                                                    {activeColumnMenu === col && (
+                                                        <>
+                                                            {/* Invisible overlay to close menu */}
+                                                            <div className="fixed inset-0 z-40" onClick={() => setActiveColumnMenu(null)}></div>
+                                                            <div className="absolute top-full left-4 mt-1 w-48 bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-xl shadow-xl z-50 overflow-hidden flex flex-col py-1 animate-in fade-in zoom-in-95 duration-150">
+                                                                <button onClick={() => executeVisualAction('sort', col)} className="px-3 py-2 text-xs font-medium text-left hover:bg-[var(--bg-surface)] flex items-center gap-2 text-[var(--text-primary)]">
+                                                                    <ArrowUpDown className="w-3.5 h-3.5 opacity-70" /> Ordenar Ascendente
+                                                                </button>
+                                                                <button onClick={() => executeVisualAction('filter', col)} className="px-3 py-2 text-xs font-medium text-left hover:bg-[var(--bg-surface)] flex items-center gap-2 text-[var(--text-primary)]">
+                                                                    <Filter className="w-3.5 h-3.5 opacity-70" /> Filtrar Valor Exacto
+                                                                </button>
+                                                                <div className="h-px bg-[var(--border-color)] my-1 w-full" />
+                                                                <button onClick={() => executeVisualAction('group_sum', col)} className="px-3 py-2 text-xs font-medium text-left hover:bg-[var(--bg-surface)] flex items-center gap-2 text-purple-600">
+                                                                    <Layers className="w-3.5 h-3.5 opacity-70" /> Agrupar y Sumar
+                                                                </button>
+                                                                <div className="h-px bg-[var(--border-color)] my-1 w-full" />
+                                                                <button onClick={() => executeVisualAction('rename', col)} className="px-3 py-2 text-xs font-medium text-left hover:bg-[var(--bg-surface)] flex items-center gap-2 text-[var(--text-primary)]">
+                                                                    <Edit2 className="w-3.5 h-3.5 opacity-70" /> Renombrar Columna
+                                                                </button>
+                                                                <button onClick={() => executeVisualAction('remove', col)} className="px-3 py-2 text-xs font-medium text-left hover:bg-red-50 text-red-600 flex items-center gap-2">
+                                                                    <Trash2 className="w-3.5 h-3.5 opacity-70" /> Remover Columna
+                                                                </button>
+                                                                <div className="h-px bg-[var(--border-color)] my-1 w-full" />
+                                                                <button onClick={() => executeVisualAction('drop_nulls', col)} className="px-3 py-2 text-xs font-medium text-left hover:bg-orange-50 text-orange-600 flex items-center gap-2">
+                                                                    <Trash2 className="w-3.5 h-3.5 opacity-70" /> Eliminar filas vacías
+                                                                </button>
+                                                                <button onClick={() => executeVisualAction('fill_nulls', col)} className="px-3 py-2 text-xs font-medium text-left hover:bg-orange-50 text-orange-600 flex items-center gap-2">
+                                                                    <Edit2 className="w-3.5 h-3.5 opacity-70" /> Rellenar vacíos
+                                                                </button>
+                                                            </div>
+                                                        </>
+                                                    )}
+                                                </th>
+                                            )})}
+                                        </tr>
+                                    </thead>
+                                    <tbody className="divide-y divide-[var(--border-color)] text-[var(--text-primary)] font-medium">
+                                        {processedData.length === 0 ? (
+                                            <tr>
+                                                <td colSpan={columns.length} className="h-48 text-center text-[var(--text-secondary)]">
+                                                    {isDataLoading ? (
+                                                        <Loader2 className="w-8 h-8 animate-spin mx-auto mb-2 text-[var(--brand-primary)]" />
+                                                    ) : (
+                                                        <span>Genera una consulta o ajusta tu filtro ({activeScript || 'Vacío'}).</span>
+                                                    )}
+                                                </td>
+                                            </tr>
+                                        ) : (
+                                            <>
+                                                {virtualItems.length > 0 && virtualItems[0].start > 0 && (
+                                                    <tr>
+                                                        <td style={{ height: `${virtualItems[0].start}px` }}></td>
+                                                    </tr>
+                                                )}
+                                                {virtualItems.map((virtualRow) => {
+                                                    const row = processedData[virtualRow.index];
+                                                    return (
+                                                        <tr 
+                                                            key={virtualRow.key}
+                                                            data-index={virtualRow.index}
+                                                            ref={rowVirtualizer.measureElement}
+                                                            className="hover:bg-[var(--bg-surface)]/70 transition-colors"
+                                                        >
+                                                            {columns.map(col => {
+                                                                const val = row[col];
+                                                                const isNumber = val !== null && val !== undefined && !isNaN(Number(val)) && String(val).trim() !== '';
+                                                                return (
+                                                                    <td key={col} className={`px-6 py-3 max-w-[250px] truncate text-ellipsis ${isNumber ? 'text-right font-mono text-purple-700 font-semibold bg-purple-50/20' : ''}`}>
+                                                                        <span title={String(val)}>{val !== null && val !== undefined ? String(val) : <span className="text-gray-400 italic">null</span>}</span>
+                                                                    </td>
+                                                                );
+                                                            })}
+                                                        </tr>
+                                                    );
+                                                })}
+                                                {virtualItems.length > 0 && virtualItems[virtualItems.length - 1].end < rowVirtualizer.getTotalSize() && (
+                                                    <tr>
+                                                        <td style={{ height: `${rowVirtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end}px` }}></td>
+                                                    </tr>
+                                                )}
+                                            </>
+                                        )}
+                                    </tbody>
+                                </table>
+                            </div>
+                            
+                            <div className="px-6 py-3 border-t border-[var(--border-color)] bg-[var(--bg-elevated)] text-xs font-semibold text-[var(--text-secondary)] flex justify-between items-center z-10">
+                                <div className="flex items-center gap-4">
+                                    <span>Total Records: {processedData.length}</span>
+                                    <div className="h-4 w-px bg-[var(--border-color)]"></div>
+                                    <div className="flex bg-[var(--bg-surface)] p-0.5 rounded-md border border-[var(--border-color)]">
+                                        <button 
+                                            onClick={() => setViewMode('grid')}
+                                            className={`px-3 py-1 flex items-center gap-1.5 rounded-md transition-colors ${viewMode === 'grid' ? 'bg-white shadow-sm text-[var(--brand-primary)]' : 'hover:text-[var(--text-primary)]'}`}
+                                        >
+                                            <Table2 className="w-3.5 h-3.5" /> DataGrid
+                                        </button>
+                                        <button 
+                                            onClick={() => setViewMode('dashboard')}
+                                            className={`px-3 py-1 flex items-center gap-1.5 rounded-md transition-colors ${viewMode === 'dashboard' ? 'bg-white shadow-sm text-[var(--brand-primary)]' : 'hover:text-[var(--text-primary)]'}`}
+                                            disabled={processedData.length === 0}
+                                        >
+                                            <BarChart3 className="w-3.5 h-3.5" /> Graficar
+                                        </button>
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-4">
+                                    <span className="opacity-70">Powered by Polars & Rust</span>
+                                    <button 
+                                        onClick={handleExportCSV}
+                                        disabled={processedData.length === 0}
+                                        className="flex items-center gap-1.5 px-3 py-1.5 rounded-md hover:bg-[var(--border-color)] transition-colors text-[var(--text-primary)] disabled:opacity-50"
+                                        title="Descargar datos en pantalla como CSV"
+                                    >
+                                        <Download className="w-3.5 h-3.5" />
+                                        <span>Exportar CSV</span>
+                                    </button>
+                                    <button 
+                                        onClick={handleSyncDestination}
+                                        disabled={processedData.length === 0 || isSyncing}
+                                        className="flex items-center gap-1.5 px-4 py-1.5 rounded-lg bg-[var(--brand-primary)] hover:bg-[var(--brand-primary-hover)] transition-colors text-white font-bold disabled:opacity-50"
+                                        title="Empujar datos transformados a una tabla en Postgres"
+                                    >
+                                        {isSyncing ? <Loader2 className="w-4 h-4 animate-spin" /> : <Server className="w-4 h-4" />}
+                                        <span>Sync (Push)</span>
+                                    </button>
+                                </div>
+                            </div>
+                            
+                            {filterModalConfig && (
+                                <DatawayFilterModal 
+                                    isOpen={filterModalConfig.isOpen}
+                                    column={filterModalConfig.col}
+                                    colType={filterModalConfig.type}
+                                    onClose={() => setFilterModalConfig(null)}
+                                    onApply={handleApplyFilter}
+                                />
+                            )}
+
+                            <DatawayMathModal
+                                isOpen={mathModalOpen}
+                                columns={columns}
+                                onClose={() => setMathModalOpen(false)}
+                                onApply={handleApplyMath}
+                            />
+
+                            <DatawayPipelineManager
+                                isOpen={pipelineManagerOpen}
+                                onClose={() => setPipelineManagerOpen(false)}
+                                currentScript={compilePipelineScript(pipelineSteps)}
+                                activeConnector={activeConnector}
+                                activeResource={activeTable}
+                                onLoadPipeline={handleLoadPipeline}
+                            />
+
+                            {isSchemaMapperOpen && activeTable && (
+                                <DatawaySchemaMapper
+                                    sourceConnector={activeConnector}
+                                    sourceResource={activeTable}
+                                    targetConnector={"postgres"}
+                                    targetResource={"ventas"}
+                                    onClose={() => setIsSchemaMapperOpen(false)}
+                                />
+                            )}
+
+                            {isOrchestratorOpen && (
+                                <DatawayOrchestratorCanvas onClose={() => setIsOrchestratorOpen(false)} />
+                            )}
+                        </div>
+                        )}
+                    </div>
+                </div>
+            </div>
+            <style>{`
+                .custom-scrollbar::-webkit-scrollbar { width: 6px; height: 6px; }
+                .custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
+                .custom-scrollbar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 10px; }
+                .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
+            `}</style>
+        </div>
+    );
+};