@decido/plugin-chameleon 1.0.0

package/src/components/DatawayOrchestratorCanvas.tsx

@@ -0,0 +1,345 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+    ReactFlow,
+    Background,
+    Controls,
+    MiniMap,
+    useNodesState,
+    useEdgesState,
+    Handle,
+    Position,
+    MarkerType,
+    Node,
+    Edge
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+import { Clock, Database, FastForward, CheckCircle2, Play, Pause, Trash2, Power } from 'lucide-react';
+
+interface CronJob {
+    id: number;
+    name: string;
+    cron_expression: string;
+    target_connector: string;
+    target_resource: string;
+    pipeline_id: number;
+    pipeline_name: string;
+    last_status: string;
+    is_active: boolean;
+}
+
+// Custom Nodes 
+const TriggerNode = ({ data }: { data: any }) => (
+    <div className="bg-slate-900 border border-amber-500/50 rounded-xl shadow-2xl p-4 w-64 text-slate-200">
+        <div className="flex items-center gap-2 mb-3 text-amber-400">
+            <Clock size={18} />
+            <span className="font-bold text-sm tracking-wide">CRON TRIGGER</span>
+        </div>
+        <div className="bg-black/50 p-2 rounded-lg font-mono text-center text-lg text-emerald-400 border border-slate-700">
+            {data.cron}
+        </div>
+        <div className="text-xs text-slate-500 mt-2 text-center uppercase">Schedule Expression</div>
+        <Handle type="source" position={Position.Right} className="w-3 h-3 bg-amber-500" />
+    </div>
+);
+
+const PipelineNode = ({ data }: { data: any }) => (
+    <div className="bg-indigo-950 border border-indigo-500/50 rounded-xl shadow-2xl p-4 w-72 text-slate-200">
+        <Handle type="target" position={Position.Left} className="w-3 h-3 bg-indigo-500" />
+        <div className="flex items-center gap-2 mb-3 text-indigo-400">
+            <FastForward size={18} />
+            <span className="font-bold text-sm tracking-wide">ETL PIPELINE</span>
+        </div>
+        <div className="font-semibold text-white bg-indigo-900/50 p-2 rounded-lg border border-indigo-500/30 truncate">
+            {data.name}
+        </div>
+        <Handle type="source" position={Position.Right} className="w-3 h-3 bg-indigo-500" />
+    </div>
+);
+
+const DestinationNode = ({ data }: { data: any }) => (
+    <div className="bg-emerald-950 border border-emerald-500/50 rounded-xl shadow-2xl p-4 w-64 text-slate-200 relative overflow-hidden">
+        {data.isActive ? (
+            <div className="absolute top-0 left-0 w-full h-1 bg-gradient-to-r from-emerald-400 to-teal-400 animate-pulse"></div>
+        ) : (
+            <div className="absolute top-0 left-0 w-full h-1 bg-slate-700"></div>
+        )}
+        <Handle type="target" position={Position.Left} className="w-3 h-3 bg-emerald-500" />
+        <div className="flex items-center gap-2 mb-3 text-emerald-400">
+            <Database size={18} />
+            <span className="font-bold text-sm tracking-wide">TARGET DB</span>
+        </div>
+        <div className="text-sm font-mono text-slate-300">
+            <span className="opacity-50">Conn:</span> {data.connector}<br/>
+            <span className="opacity-50">Table:</span> {data.resource}
+        </div>
+        {data.lastStatus && (
+            <div className="mt-3 text-[10px] text-slate-400 bg-black/40 p-1.5 rounded flex items-center gap-1.5">
+                <CheckCircle2 size={12} className={data.lastStatus.includes('Failed') ? 'text-rose-400' : 'text-emerald-400'} />
+                <span className="truncate">{data.lastStatus}</span>
+            </div>
+        )}
+    </div>
+);
+
+const nodeTypes = {
+    trigger: TriggerNode,
+    pipeline: PipelineNode,
+    destination: DestinationNode
+};
+
+export const DatawayOrchestratorCanvas = ({ onClose }: { onClose: () => void }) => {
+    const [nodes, setNodes, onNodesChange] = useNodesState([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+    const [crons, setCrons] = useState<CronJob[]>([]);
+    const [pipelines, setPipelines] = useState<any[]>([]);
+
+    // Form state for new Cron
+    const [formName, setFormName] = useState('');
+    const [formCron, setFormCron] = useState('0 3 * * *');
+    const [formPipeline, setFormPipeline] = useState('');
+    const [formSrcConn, setFormSrcConn] = useState('googlesheets');
+    const [formSrcRes, setFormSrcRes] = useState('');
+    const [formTgtConn, setFormTgtConn] = useState('postgres');
+    const [formTgtRes, setFormTgtRes] = useState('ventas');
+
+    const loadData = async () => {
+        try {
+            const [cronsRes, pipeRes] = await Promise.all([
+                fetch('/api/dataway/crons').then(r => r.json()),
+                fetch('/api/dataway/pipelines').then(r => r.json())
+            ]);
+            
+            setCrons(cronsRes.crons || []);
+            setPipelines(pipeRes.pipelines || []);
+            
+            buildGraph(cronsRes.crons || []);
+        } catch (e) {
+            console.error("Failed to load orchestrator data", e);
+        }
+    };
+
+    const buildGraph = (jobList: CronJob[]) => {
+        const newNodes: Node[] = [];
+        const newEdges: Edge[] = [];
+
+        jobList.forEach((job, i) => {
+            const startY = i * 250 + 50;
+            
+            // 1. Trigger
+            newNodes.push({
+                id: `trigger-${job.id}`,
+                type: 'trigger',
+                position: { x: 50, y: startY },
+                data: { cron: job.cron_expression }
+            });
+
+            // 2. Pipeline
+            newNodes.push({
+                id: `pipe-${job.id}`,
+                type: 'pipeline',
+                position: { x: 400, y: startY + 10 },
+                data: { name: job.pipeline_name || `Pipeline #${job.pipeline_id}` }
+            });
+
+            // 3. Destination
+            newNodes.push({
+                id: `dest-${job.id}`,
+                type: 'destination',
+                position: { x: 800, y: startY },
+                data: { 
+                    connector: job.target_connector, 
+                    resource: job.target_resource,
+                    lastStatus: job.last_status,
+                    isActive: job.is_active
+                }
+            });
+
+            // Edges
+            newEdges.push({
+                id: `e1-${job.id}`,
+                source: `trigger-${job.id}`,
+                target: `pipe-${job.id}`,
+                animated: job.is_active,
+                style: { stroke: job.is_active ? '#f59e0b' : '#334155', strokeWidth: 2 },
+                markerEnd: { type: MarkerType.ArrowClosed, color: job.is_active ? '#f59e0b' : '#334155' }
+            });
+
+            newEdges.push({
+                id: `e2-${job.id}`,
+                source: `pipe-${job.id}`,
+                target: `dest-${job.id}`,
+                animated: job.is_active,
+                style: { stroke: job.is_active ? '#10b981' : '#334155', strokeWidth: 2 },
+                markerEnd: { type: MarkerType.ArrowClosed, color: job.is_active ? '#10b981' : '#334155' }
+            });
+        });
+
+        setNodes(newNodes);
+        setEdges(newEdges);
+    };
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    const handleCreateJob = async () => {
+        if (!formName || !formPipeline || !formSrcRes || !formTgtRes) return alert("Faltan campos (Origen, Destino, Plantilla)");
+        
+        await fetch('/api/dataway/crons', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                name: formName,
+                cron_expression: formCron,
+                pipeline_id: parseInt(formPipeline),
+                source_connector: formSrcConn,
+                source_resource: formSrcRes,
+                target_connector: formTgtConn,
+                target_resource: formTgtRes,
+                is_active: false
+            })
+        });
+        
+        loadData();
+    };
+
+    const handleToggle = async (id: number, currentActive: boolean) => {
+        await fetch(`/api/dataway/crons/${id}/toggle`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ is_active: !currentActive })
+        });
+        loadData();
+    };
+
+    const handleDelete = async (id: number) => {
+        if (!confirm("Are you sure?")) return;
+        await fetch(`/api/dataway/crons/${id}`, { method: 'DELETE' });
+        loadData();
+    };
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-md p-4 flex-col text-slate-200">
+            <div className="w-[98vw] h-[95vh] bg-[#090b11] rounded-2xl border border-slate-700 shadow-2xl flex overflow-hidden">
+                
+                {/* Visual Canvas Layout */}
+                <div className="flex-1 relative">
+                    <ReactFlow
+                        nodes={nodes}
+                        edges={edges}
+                        onNodesChange={onNodesChange}
+                        onEdgesChange={onEdgesChange}
+                        nodeTypes={nodeTypes}
+                        fitView
+                        className="bg-[#050505]"
+                    >
+                        <Background color="#334155" gap={20} size={1} />
+                        <Controls className="!bg-slate-900 !border-slate-700 !fill-slate-400" />
+                        <MiniMap className="!bg-slate-900 !border-slate-700" maskColor="rgba(0,0,0,0.6)" />
+                    </ReactFlow>
+                    
+                    {/* Header Overlay */}
+                    <div className="absolute top-4 left-4 bg-slate-900/60 backdrop-blur p-4 rounded-xl border border-slate-700 shadow-xl">
+                        <h2 className="text-xl font-bold bg-gradient-to-r from-teal-400 to-indigo-400 bg-clip-text text-transparent flex items-center gap-2">
+                            <Clock className="text-teal-400" />
+                            Dataway Orchestrator (Level 14) 🚀
+                        </h2>
+                        <p className="text-sm text-slate-400 mt-1">Autonomous ETL Cron Engine linked to Postgres Templates</p>
+                    </div>
+
+                    <button onClick={onClose} className="absolute top-4 right-4 bg-slate-800 p-2 rounded-lg hover:bg-rose-500/20 text-slate-400 transition-colors">
+                        Cerrar Orchestrator
+                    </button>
+                </div>
+
+                {/* Sidebar Controls */}
+                <div className="w-[400px] border-l border-slate-800 bg-slate-900 flex flex-col">
+                    <div className="p-4 border-b border-slate-800 font-bold bg-slate-950 uppercase tracking-widest text-xs text-slate-500">
+                        Create Auto-Job
+                    </div>
+                    
+                    <div className="p-4 space-y-4 border-b border-slate-800">
+                        <div>
+                            <label className="text-xs text-slate-400 mb-1 block">Job Name</label>
+                            <input value={formName} onChange={e=>setFormName(e.target.value)} className="w-full bg-black/40 border border-slate-700 rounded-md px-3 py-2 text-sm" placeholder="Sincronización Nocturna" />
+                        </div>
+                        <div className="flex gap-2">
+                            <div className="flex-1">
+                                <label className="text-xs text-slate-400 mb-1 block">Cron Format</label>
+                                <input value={formCron} onChange={e=>setFormCron(e.target.value)} className="w-full bg-black/40 border border-slate-700 rounded-md px-3 py-2 text-sm font-mono text-amber-400" />
+                            </div>
+                        </div>
+                        <div>
+                            <label className="text-xs text-slate-400 mb-1 block">Pipeline Template</label>
+                            <select value={formPipeline} onChange={e=>setFormPipeline(e.target.value)} className="w-full bg-black/40 border border-slate-700 rounded-md px-3 py-2 text-sm text-indigo-300">
+                                <option value="">Select Pipeline...</option>
+                                {pipelines.map(p => <option key={p.id} value={p.id}>{p.name}</option>)}
+                            </select>
+                        </div>
+                        
+                        <div className="grid grid-cols-2 gap-2 p-3 bg-black/30 rounded-lg border border-slate-800">
+                            <div>
+                                <label className="text-xs text-slate-500 mb-1 block">Source Conn</label>
+                                <input value={formSrcConn} onChange={e=>setFormSrcConn(e.target.value)} className="w-full bg-transparent border-b border-slate-700 text-xs py-1" />
+                            </div>
+                            <div>
+                                <label className="text-xs text-slate-500 mb-1 block">Source Table/Sheet</label>
+                                <input value={formSrcRes} onChange={e=>setFormSrcRes(e.target.value)} className="w-full bg-transparent border-b border-slate-700 text-xs py-1" />
+                            </div>
+                            <div>
+                                <label className="text-xs text-slate-500 mb-1 block mt-2">Target Conn</label>
+                                <input value={formTgtConn} onChange={e=>setFormTgtConn(e.target.value)} className="w-full bg-transparent border-b border-slate-700 text-xs py-1" />
+                            </div>
+                            <div>
+                                <label className="text-xs text-slate-500 mb-1 block mt-2">Target Table</label>
+                                <input value={formTgtRes} onChange={e=>setFormTgtRes(e.target.value)} className="w-full bg-transparent border-b border-slate-700 text-xs py-1 text-emerald-400" />
+                            </div>
+                        </div>
+
+                        <button onClick={handleCreateJob} className="w-full bg-indigo-600 hover:bg-indigo-500 text-white font-bold py-2 rounded-lg transition-colors flex justify-center items-center gap-2 text-sm">
+                            <FastForward size={16} /> Deploy to Engine
+                        </button>
+                    </div>
+
+                    <div className="flex-1 overflow-y-auto p-4 space-y-3">
+                        <h3 className="text-xs font-bold text-slate-500 uppercase tracking-widest mb-4">Deployed Engine Jobs</h3>
+                        
+                        {crons.map(job => (
+                            <div key={job.id} className={`p-3 rounded-xl border transition-all ${job.is_active ? 'bg-indigo-950/30 border-indigo-500/50' : 'bg-slate-800/50 border-slate-700'}`}>
+                                <div className="flex justify-between items-start mb-2">
+                                    <div className="font-bold text-sm truncate pr-2">{job.name}</div>
+                                    <div className="flex gap-2">
+                                        <button onClick={() => handleToggle(job.id, job.is_active)} className={`p-1.5 rounded-md ${job.is_active ? 'bg-amber-500/20 text-amber-500' : 'bg-emerald-500/20 text-emerald-500'}`}>
+                                            {job.is_active ? <Pause size={14} /> : <Play size={14} />}
+                                        </button>
+                                        <button onClick={() => handleDelete(job.id)} className="p-1.5 bg-rose-500/10 text-rose-500 rounded-md hover:bg-rose-500/20">
+                                            <Trash2 size={14} />
+                                        </button>
+                                    </div>
+                                </div>
+                                <div className="flex items-center gap-2 text-xs font-mono mb-2">
+                                    <Clock size={12} className="text-slate-500" />
+                                    <span className="text-amber-400">{job.cron_expression}</span>
+                                    <span className={`px-2 py-0.5 rounded-full text-[10px] ${job.is_active ? 'bg-emerald-500/20 text-emerald-400' : 'bg-slate-700 text-slate-400'}`}>
+                                        {job.is_active ? 'RUNNING IN BACKGROUND' : 'PAUSED'}
+                                    </span>
+                                </div>
+                                {job.last_status && (
+                                    <div className="text-[10px] bg-black/30 p-1.5 rounded text-amber-100/70 border border-slate-800 truncate">
+                                        Status: {job.last_status}
+                                    </div>
+                                )}
+                            </div>
+                        ))}
+                        {crons.length === 0 && (
+                            <div className="text-center text-slate-500 text-sm mt-10">
+                                No cron jobs scheduled via Orchestrator.
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    );
+};

package/src/components/DatawayPipelineManager.tsx

@@ -0,0 +1,227 @@
+import React, { useState, useEffect } from 'react';
+import { X, Search, Save, Play, Trash2, Database, Code2, Loader2 } from 'lucide-react';
+
+interface Pipeline {
+    id: number;
+    name: string;
+    description: string;
+    connector_id: string;
+    resource: string;
+    m_script: string;
+    created_at: string;
+}
+
+interface PipelineManagerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    currentScript: string;
+    activeConnector: string | null;
+    activeResource: string | null;
+    onLoadPipeline: (script: string) => void;
+}
+
+export const DatawayPipelineManager: React.FC<PipelineManagerProps> = ({
+    isOpen, onClose, currentScript, activeConnector, activeResource, onLoadPipeline
+}) => {
+    const [viewMode, setViewMode] = useState<'list' | 'save'>('list');
+    const [pipelines, setPipelines] = useState<Pipeline[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    
+    // Save Form State
+    const [name, setName] = useState('');
+    const [description, setDescription] = useState('');
+    const [isSaving, setIsSaving] = useState(false);
+
+    useEffect(() => {
+        if (isOpen) {
+            setViewMode('list');
+            fetchPipelines();
+        }
+    }, [isOpen]);
+
+    const fetchPipelines = async () => {
+        setIsLoading(true);
+        try {
+            const res = await fetch('http://localhost:3000/api/dataway/pipelines');
+            const data = await res.json();
+            if (data.pipelines) {
+                setPipelines(data.pipelines);
+            }
+        } catch (err) {
+            console.error('Failed to fetch pipelines', err);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleSave = async (e: React.FormEvent) => {
+        e.preventDefault();
+        if (!name.trim() || !activeConnector || !activeResource || !currentScript) return;
+        
+        setIsSaving(true);
+        try {
+            const res = await fetch('http://localhost:3000/api/dataway/pipelines', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    name,
+                    description,
+                    connectorId: activeConnector,
+                    resource: activeResource,
+                    mScript: currentScript
+                })
+            });
+            if (res.ok) {
+                setName('');
+                setDescription('');
+                setViewMode('list');
+                fetchPipelines();
+            }
+        } catch (err) {
+            console.error('Failed to save pipeline', err);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const handleDelete = async (id: number) => {
+        if (!confirm('¿Seguro que deseas borrar esta plantilla?')) return;
+        try {
+            await fetch(`http://localhost:3000/api/dataway/pipelines/${id}`, { method: 'DELETE' });
+            fetchPipelines();
+        } catch (err) {
+            console.error('Failed to delete', err);
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-[100] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in duration-200">
+            <div className="bg-[var(--bg-primary)] border border-[var(--border-color)] rounded-2xl shadow-2xl w-full max-w-2xl overflow-hidden flex flex-col max-h-[85vh]">
+                <div className="flex items-center justify-between p-4 border-b border-[var(--border-color)] bg-[var(--bg-elevated)]">
+                    <h3 className="font-bold flex items-center gap-2 text-[var(--text-primary)]">
+                        <Database className="w-4 h-4 text-[var(--brand-primary)]" />
+                        Librería de Pipelines ETL
+                    </h3>
+                    <div className="flex items-center gap-2">
+                        <div className="flex bg-[var(--bg-surface)] p-1 rounded-lg border border-[var(--border-color)]">
+                            <button 
+                                onClick={() => setViewMode('list')}
+                                className={`px-3 py-1 rounded-md text-xs font-semibold transition-colors ${viewMode === 'list' ? 'bg-white shadow text-[var(--brand-primary)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
+                            >
+                                Catálogo
+                            </button>
+                            <button 
+                                onClick={() => setViewMode('save')}
+                                className={`px-3 py-1 rounded-md text-xs font-semibold transition-colors ${viewMode === 'save' ? 'bg-white shadow text-[var(--brand-primary)]' : 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'}`}
+                            >
+                                Nueva Plantilla
+                            </button>
+                        </div>
+                        <div className="w-px h-6 bg-[var(--border-color)] mx-2"></div>
+                        <button onClick={onClose} className="p-1.5 hover:bg-[var(--bg-surface)] rounded-md transition-colors text-[var(--text-secondary)]">
+                            <X className="w-4 h-4" />
+                        </button>
+                    </div>
+                </div>
+
+                <div className="flex-1 overflow-y-auto p-4 bg-[var(--bg-primary)]">
+                    {viewMode === 'list' ? (
+                        <div className="space-y-3">
+                            {isLoading ? (
+                                <div className="flex justify-center p-8"><Loader2 className="w-6 h-6 animate-spin text-[var(--brand-primary)]" /></div>
+                            ) : pipelines.length === 0 ? (
+                                <div className="text-center p-8 text-[var(--text-secondary)]">
+                                    <Database className="w-12 h-12 mx-auto mb-3 opacity-20" />
+                                    <p>No tienes pipelines guardados.</p>
+                                </div>
+                            ) : (
+                                pipelines.map(p => (
+                                    <div key={p.id} className="border border-[var(--border-color)] rounded-xl p-4 hover:border-[var(--brand-primary)]/50 transition-colors bg-[var(--bg-surface)]/30 group">
+                                        <div className="flex justify-between items-start mb-2">
+                                            <div>
+                                                <h4 className="font-bold text-[var(--text-primary)]">{p.name}</h4>
+                                                <p className="text-xs text-[var(--text-secondary)] mt-0.5">{p.description || "Sin descripción"}</p>
+                                            </div>
+                                            <div className="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                                                <button 
+                                                    onClick={() => { onLoadPipeline(p.m_script); onClose(); }}
+                                                    className="flex items-center gap-1.5 bg-[var(--brand-primary)] hover:opacity-90 text-white px-3 py-1.5 rounded-lg text-xs font-bold transition-opacity"
+                                                >
+                                                    <Play className="w-3.5 h-3.5" /> Cargar & Ejecutar
+                                                </button>
+                                                <button onClick={() => handleDelete(p.id)} className="p-1.5 text-red-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors">
+                                                    <Trash2 className="w-4 h-4" />
+                                                </button>
+                                            </div>
+                                        </div>
+                                        <div className="mt-3 flex items-center gap-3 text-[10px] font-mono font-medium text-[var(--text-secondary)]">
+                                            <span className="bg-[var(--bg-elevated)] px-2 py-1 rounded border border-[var(--border-color)]">
+                                                {p.connector_id} : {p.resource}
+                                            </span>
+                                            <span className="truncate flex-1 flex items-center gap-1.5">
+                                                <Code2 className="w-3 h-3" />
+                                                {p.m_script.substring(0, 50)}...
+                                            </span>
+                                            <span>{new Date(p.created_at).toLocaleDateString()}</span>
+                                        </div>
+                                    </div>
+                                ))
+                            )}
+                        </div>
+                    ) : (
+                        <form onSubmit={handleSave} className="max-w-md mx-auto space-y-4 py-4">
+                            {!currentScript ? (
+                                <div className="p-4 bg-orange-50 border border-orange-200 text-orange-800 rounded-lg text-sm text-center">
+                                    No hay un script activo en el editor para guardar.
+                                </div>
+                            ) : (
+                                <>
+                                    <div className="flex flex-col gap-1.5">
+                                        <label className="text-xs font-bold text-[var(--text-secondary)] uppercase">Nombre del Pipeline</label>
+                                        <input
+                                            type="text"
+                                            autoFocus
+                                            required
+                                            value={name}
+                                            onChange={(e) => setName(e.target.value)}
+                                            placeholder="Ej. Limpieza de Ventas Mensuales"
+                                            className="w-full px-3 py-2 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg text-sm outline-none focus:ring-2 focus:ring-[var(--brand-primary)]/50"
+                                        />
+                                    </div>
+                                    <div className="flex flex-col gap-1.5">
+                                        <label className="text-xs font-bold text-[var(--text-secondary)] uppercase">Descripción (Opcional)</label>
+                                        <textarea
+                                            value={description}
+                                            onChange={(e) => setDescription(e.target.value)}
+                                            placeholder="¿Qué hace esta transformación?"
+                                            rows={3}
+                                            className="w-full px-3 py-2 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-lg text-sm outline-none focus:ring-2 focus:ring-[var(--brand-primary)]/50 resize-none"
+                                        />
+                                    </div>
+                                    
+                                    <div className="p-3 bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-lg">
+                                        <div className="text-[10px] font-bold text-[var(--text-secondary)] uppercase mb-1">M-Script a Guardar</div>
+                                        <pre className="text-xs font-mono text-[var(--text-primary)] whitespace-pre-wrap truncate max-h-24 overflow-hidden">
+                                            {currentScript}
+                                        </pre>
+                                    </div>
+
+                                    <button 
+                                        type="submit"
+                                        disabled={isSaving || !name.trim()}
+                                        className="w-full py-2.5 bg-[var(--brand-primary)] hover:opacity-90 text-white rounded-xl text-sm font-bold shadow-sm transition-all disabled:opacity-50 flex items-center justify-center gap-2 mt-4"
+                                    >
+                                        {isSaving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
+                                        Guardar en Postgres
+                                    </button>
+                                </>
+                            )}
+                        </form>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};