@decido/plugin-dev-console 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+
+Debugger listening on ws://127.0.0.1:62233/8c9e1551-3f82-44ce-842b-b58a12921ab2
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+
+> @decido/plugin-dev-console@1.0.0 build /Users/julioramirez/dev/active/OnBoardingDecido/plugins/official/dev-console
+> tsc
+
+Debugger listening on ws://127.0.0.1:62247/13f2e458-f583-4510-9bed-17f01f07ffc2
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+Waiting for the debugger to disconnect...
+Waiting for the debugger to disconnect...

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@decido/plugin-dev-console",
+  "version": "1.0.0",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {
+    "@xyflow/react": "^12.0.0",
+    "framer-motion": "^12.34.3",
+    "lucide-react": "^0.370.0",
+    "react-shadow": "^20.6.0",
+    "recharts": "^3.7.0",
+    "zustand": "^4.5.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.1",
+    "typescript": "^5.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "peerDependencies": {
+    "@decido/kernel-bridge": "1.0.0",
+    "@decido/sdk": "1.0.0",
+    "@decido/shell": "1.0.0"
+  },
+  "license": "UNLICENSED",
+  "scripts": {
+    "dev": "tsup src/index.ts --format esm --watch",
+    "build": "tsup src/index.ts --format esm --dts --minify --clean"
+  }
+}

package/src/components/SafeComponentWrapper.tsx

@@ -0,0 +1,120 @@
+import React, { Component, ErrorInfo, ReactNode, useState } from 'react';
+import root from 'react-shadow';
+import { kernel } from '@decido/kernel-bridge';
+
+// 1. Error Boundary para atrapar errores de ejecución de la IA
+interface ErrorProps {
+    children: ReactNode;
+    title: string;
+    onCrash?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+class GenerativeErrorBoundary extends Component<ErrorProps, { hasError: boolean, error: any }> {
+    constructor(props: any) {
+        super(props);
+        this.state = { hasError: false, error: null };
+    }
+
+    static getDerivedStateFromError(error: any) {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+        console.error("Generative UI Crash:", error, errorInfo);
+
+        // Notificamos al motor del Playground que hubo un fallo
+        if (this.props.onCrash) {
+            this.props.onCrash(error, errorInfo);
+        }
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div style={{ padding: '16px', background: 'rgba(100,0,0,0.3)', border: '1px solid rgba(255,0,0,0.5)', borderRadius: '8px', color: '#ffb3b3', fontFamily: 'monospace' }}>
+                    <h3 style={{ fontWeight: 'bold', display: 'flex', alignItems: 'center', gap: '8px', margin: 0 }}>
+                        ⚠️ Fallo Crítico en Interfaz Generada
+                    </h3>
+                    <p style={{ fontSize: '12px', marginTop: '8px', opacity: 0.8 }}>{this.state.error?.message}</p>
+                    <button
+                        onClick={() => this.setState({ hasError: false })}
+                        style={{ marginTop: '12px', fontSize: '12px', background: 'rgba(255,0,0,0.2)', border: 'none', color: '#fff', cursor: 'pointer', padding: '4px 8px', borderRadius: '4px' }}
+                    >
+                        Intentar Reiniciar
+                    </button>
+                </div>
+            );
+        }
+        return this.props.children;
+    }
+}
+
+// 2. Wrapper con Shadow DOM
+const ShadowDiv = root.div;
+
+export const SafeZone = ({ children, title, rawCode, onCrash }: { children: ReactNode, title: string, rawCode?: string, onCrash?: (error: Error, errInfo: any) => void }) => {
+    const [isMaterializing, setIsMaterializing] = useState(false);
+
+    const handleMaterialize = async () => {
+        if (!rawCode) return;
+        const name = prompt("Nombre del componente (ej: InventoryChart):", title.replace(/[^a-zA-Z0-9]/g, ''));
+        if (!name) return;
+
+        setIsMaterializing(true);
+        try {
+            const filePath = await kernel.execute('materialize_construct', {
+                pluginId: 'madefront-ai',
+                name,
+                code: rawCode
+            });
+
+            kernel.notify('💎 Materialización Exitosa', `Archivo creado en: ${filePath}`);
+            kernel.execute('emit_xp', { label: `Materializado: ${name}`, xp: 250 });
+        } catch (e: any) {
+            kernel.notify('❌ Error', 'No se pudo escribir en el disco el constructo. ' + e.toString());
+        } finally {
+            setIsMaterializing(false);
+        }
+    };
+
+    return (
+        <div className="group relative h-full w-full overflow-hidden">
+            {isMaterializing && (
+                <div className="absolute inset-0 z-[100] bg-cyan-500/20 animate-pulse border-2 border-cyan-400 pointer-events-none">
+                    <div className="h-1 bg-cyan-400 w-full absolute top-0 animate-scan"></div>
+                </div>
+            )}
+            {/* Botón Flotante de Guardado (Construct Marketplace) */}
+            {rawCode && (
+                <button
+                    onClick={handleMaterialize}
+                    className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 z-[60] bg-emerald-500 text-black px-3 py-1 rounded-full text-[10px] font-bold shadow-lg transition-all hover:scale-110"
+                >
+                    MATERIALIZAR CONSTRUCTO
+                </button>
+            )}
+
+            <GenerativeErrorBoundary title={title} onCrash={onCrash}>
+                {/* 
+               Usamos 'react-shadow' para crear un Shadow Root. 
+               Esto evita que el CSS del componente generado afecte al resto de Decido-OS
+            */}
+                <ShadowDiv style={{ height: '100%', width: '100%', display: 'block' }}>
+                    {/* 
+                  IMPORTANTE: Inyectamos Tailwind en el Shadow DOM. 
+                  Podemos usar el CDN para runtime total.
+                */}
+                    <link rel="stylesheet" href="https://cdn.tailwindcss.com" />
+                    <style>{`
+                    :host { display: block; height: 100%; width: 100%; }
+                    .generative-content { all: initial; font-family: sans-serif; }
+                `}</style>
+
+                    <div className="generative-content" style={{ height: '100%', width: '100%' }}>
+                        {children}
+                    </div>
+                </ShadowDiv>
+            </GenerativeErrorBoundary>
+        </div>
+    );
+};

package/src/components/react-shadow.d.ts

@@ -0,0 +1,5 @@
+declare module 'react-shadow' {
+    export const div: any;
+    const root: any;
+    export default root;
+}

package/src/components/ui/CodeSnippet.tsx

@@ -0,0 +1,39 @@
+import React, { useMemo } from 'react';
+
+export const CodeSnippet = ({ code }: { code: string }) => {
+    // Memoized regex-based highlighter to prevent re-renders degradation
+    const highlightedCode = useMemo(() => {
+        return code.split('\n').map((line, i) => {
+            let highlightedLine = line
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/('.*?'|".*?"|`.*?`)/g, '<span class="text-emerald-400">$1</span>')
+                .replace(/(import|from|const|await|async|let|var|function|return|if|else)\b/g, '<span class="text-purple-400">$1</span>')
+                .replace(/\b([A-Z][a-zA-Z0-9_]*)\b/g, '<span class="text-cyan-400">$1</span>') // Classes/Interfaces
+                .replace(/\b(true|false|null|undefined)\b/g, '<span class="text-orange-400">$1</span>')
+                .replace(/(\/\/.*)/g, '<span class="text-zinc-500 italic">$1</span>') // Comments
+                .replace(/([{}()[\]])/g, '<span class="text-zinc-400">$1</span>'); // Brackets
+
+            return (
+                <div key={i} className="table-row">
+                    <span className="table-cell text-right select-none text-zinc-600 pr-4 text-xs opacity-50">{i + 1}</span>
+                    <span className="table-cell whitespace-pre" dangerouslySetInnerHTML={{ __html: highlightedLine }} />
+                </div>
+            );
+        });
+    }, [code]);
+
+    return (
+        <div className="bg-[#0D0D0D] border border-zinc-800 rounded-xl p-4 font-mono text-sm overflow-hidden text-zinc-300 shadow-2xl">
+            <div className="flex items-center gap-2 mb-4 border-b border-zinc-800 pb-3">
+                <div className="w-2.5 h-2.5 rounded-full bg-red-500/80"></div>
+                <div className="w-2.5 h-2.5 rounded-full bg-yellow-500/80"></div>
+                <div className="w-2.5 h-2.5 rounded-full bg-green-500/80"></div>
+                <span className="ml-2 text-xs text-zinc-500 font-sans">decido-sdk-demo.ts</span>
+            </div>
+            <div className="table w-full">
+                {highlightedCode}
+            </div>
+        </div>
+    );
+};

package/src/components/ui/OSNode.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Handle, Position } from '@xyflow/react';
+
+export interface OSNodeData {
+    label: string;
+    status: string;
+    icon: React.ReactNode;
+    isActive: boolean;
+}
+
+export const OSNode: React.FC<{ data: OSNodeData }> = ({ data }) => (
+    <div className={`px-4 py-3 rounded-xl bg-black/80 backdrop-blur-md border-2 ${data.isActive ? 'border-cyan-500 shadow-[0_0_20px_rgba(6,182,212,0.4)]' : 'border-zinc-800'} text-white flex flex-col items-center justify-center min-w-[140px] transition-all duration-700`}>
+        <Handle type="target" position={Position.Top} className="!bg-zinc-700" />
+        <div className={`p-2 rounded-full mb-2 ${data.isActive ? 'bg-cyan-500/20 text-cyan-400' : 'bg-zinc-800 text-zinc-500'}`}>
+            {data.icon}
+        </div>
+        <div className="font-bold text-sm tracking-wide">{data.label}</div>
+        <div className={`text-[10px] mt-1 font-mono ${data.isActive ? 'text-cyan-400' : 'text-zinc-600'}`}>
+            {data.status}
+        </div>
+        <Handle type="source" position={Position.Bottom} className="!bg-zinc-700" />
+        <Handle type="source" position={Position.Right} id="right" className="!bg-zinc-700" />
+        <Handle type="target" position={Position.Left} id="left" className="!bg-zinc-700" />
+    </div>
+);

package/src/data/tutorialSteps.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import { Cpu, Terminal, Network, BookOpen } from 'lucide-react';
+
+export const Sparkles = ({ className }: { className?: string }) => (
+    <svg className={className} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z" />
+    </svg>
+);
+
+export interface StepNodeUpdate {
+    id: string;
+    isActive: boolean;
+    status: string;
+}
+
+export interface TutorialStep {
+    id: string;
+    title: string;
+    description: string;
+    code: string;
+    actionLabel: string;
+    nodes: any[]; // Using any to be compatible with ReactFlow Node type
+    edges: any[]; // Using any to be compatible with ReactFlow Edge type
+    nodeUpdatesOnExecute: StepNodeUpdate[];
+}
+
+// --- Tutorial Steps Data ---
+export const TUTORIAL_STEPS: TutorialStep[] = [
+    {
+        id: 'intro',
+        title: 'Inicializando el Kernel Bridge',
+        description: 'Decido OS se basa en un Kernel central. Para interactuar con él desde una UI (React/Vue/Svelte), usas el `kernel-bridge`. Inicializarlo es el paso 0 de cualquier app.',
+        code: `import { kernel } from '@decido/kernel-bridge';
+
+// 1. Iniciar la conexión segura
+await kernel.boot();
+
+// 2. Verificar estado del Kernel
+const status = kernel.getStatus();
+console.log("Kernel is:", status); // "ONLINE"
+`,
+        actionLabel: 'Ejecutar Boot',
+        nodes: [
+            { id: 'kernel', type: 'osNode', position: { x: 250, y: 150 }, data: { label: 'Decido Kernel', status: 'OFFLINE', icon: <Cpu className="w-5 h-5" />, isActive: false } }
+        ],
+        edges: [],
+        nodeUpdatesOnExecute: [
+            { id: 'kernel', isActive: true, status: 'ONLINE [WS Mux]' }
+        ]
+    },
+    {
+        id: 'plugin',
+        title: 'Registrando un Plugin UI',
+        description: 'Los plugins inyectan Web Components (Widgets) o CORTEX dinámicos dentro del Shell en tiempo de ejecución. Así es como extiendes el sistema.',
+        code: `import { usePluginStore } from '@decido/shell';
+
+// 1. Construir Manifesto
+const MyPlugin = {
+  id: 'stellar-plugin',
+  name: 'Stellar Analytics',
+  widgets: [{
+    id: 'stellar-dashboard',
+    component: MyDashboardReactComponent,
+    defaultZone: 'main-canvas'
+  }]
+};
+
+// 2. Registrar en el Store Descentralizado
+usePluginStore.getState().registerPlugin(MyPlugin);
+`,
+        actionLabel: 'Inyectar Plugin',
+        nodes: [
+            { id: 'kernel', type: 'osNode', position: { x: 250, y: 150 }, data: { label: 'Decido Kernel', status: 'ONLINE', icon: <Cpu className="w-5 h-5" />, isActive: true } },
+            { id: 'plugin', type: 'osNode', position: { x: 50, y: 300 }, data: { label: 'Stellar Plugin', status: 'UNLOADED', icon: <Terminal className="w-5 h-5" />, isActive: false } },
+            { id: 'shell', type: 'osNode', position: { x: 450, y: 300 }, data: { label: 'React Shell', status: 'WAITING', icon: <BookOpen className="w-5 h-5" />, isActive: false } }
+        ],
+        edges: [
+            { id: 'e-kp', source: 'plugin', target: 'kernel', sourceHandle: 'right', targetHandle: 'left', animated: false, style: { stroke: '#52525b', strokeWidth: 2 } },
+            { id: 'e-ks', source: 'kernel', target: 'shell', sourceHandle: 'right', targetHandle: 'left', animated: false, style: { stroke: '#52525b', strokeWidth: 2 } }
+        ],
+        nodeUpdatesOnExecute: [
+            { id: 'plugin', isActive: true, status: 'INJECTED' },
+            { id: 'shell', isActive: true, status: 'MOUNTED WIDGET' }
+        ]
+    },
+    {
+        id: 'agent',
+        title: 'Orquestando Swarms / MCP',
+        description: 'La magia de Decido OS es su AGI Nativa. Puedes conectar herramientas dinámicamente o escuchar cuando el modelo cognitivo "piensa".',
+        code: `import { kernel } from '@decido/kernel-bridge';
+
+// Conectar un Servidor MCP (Tooling Externo)
+await kernel.execute('connect_mcp_server', {
+  id: 'db-agent',
+  name: 'Database Explorer MCP'
+});
+
+// Escuchar los "pensamientos" (Cognitive Frames)
+kernel.onEvent((payload) => {
+  if (payload.event_type === 'cognitive_frame') {
+    ui.toast(\`🤖 Agente pensando: \${payload.data.thought}\`);
+  }
+});
+`,
+        actionLabel: 'Activar Swarm',
+        nodes: [
+            { id: 'kernel', type: 'osNode', position: { x: 250, y: 150 }, data: { label: 'Decido Kernel', status: 'ONLINE', icon: <Cpu className="w-5 h-5" />, isActive: true } },
+            { id: 'mcp', type: 'osNode', position: { x: 50, y: 50 }, data: { label: 'MCP DB Agent', status: 'DISCONNECTED', icon: <Network className="w-5 h-5" />, isActive: false } },
+            { id: 'agent', type: 'osNode', position: { x: 450, y: 50 }, data: { label: 'Cognitive Engine', status: 'IDLE', icon: <Sparkles className="w-5 h-5" />, isActive: false } }
+        ],
+        edges: [
+            { id: 'e-mk', source: 'mcp', target: 'kernel', animated: false, style: { stroke: '#52525b', strokeWidth: 2 } },
+            { id: 'e-ak', source: 'kernel', target: 'agent', animated: false, style: { stroke: '#52525b', strokeWidth: 2 } }
+        ],
+        nodeUpdatesOnExecute: [
+            { id: 'mcp', isActive: true, status: 'CONNECTED (stdio)' },
+            { id: 'agent', isActive: true, status: 'THINKING...' }
+        ]
+    }
+];

package/src/engine/DependencyRegistry.ts

@@ -0,0 +1,29 @@
+import * as Recharts from 'recharts';
+import * as FramerMotion from 'framer-motion';
+import * as LucideIcons from 'lucide-react';
+
+/**
+ * Map of authorized libraries that the OS can inject into the Generative UI.
+ */
+export const AVAILABLE_DEPENDENCIES: Record<string, any> = {
+    'recharts': Recharts,
+    'framer-motion': FramerMotion,
+    'lucide': LucideIcons,
+};
+
+/**
+ * Analyzes the generated code to detect which libraries the AI requests.
+ */
+export const detectRequiredDependencies = (code: string): string[] => {
+    const deps: string[] = [];
+    if (code.includes('LineChart') || code.includes('BarChart') || code.includes('PieChart') || code.includes('AreaChart') || code.includes('ComposedChart')) {
+        deps.push('recharts');
+    }
+    if (code.includes('motion.') || code.includes('AnimatePresence')) {
+        deps.push('framer-motion');
+    }
+    if (code.includes('Lucide') || code.includes('createLucideIcon')) {
+        deps.push('lucide');
+    }
+    return deps;
+};

package/src/engine/PlaygroundEngine.ts

@@ -0,0 +1,272 @@
+import { createStore } from 'zustand';
+import React from 'react';
+import * as LucideIcons from 'lucide-react';
+import { useShellStore, LayoutNode, SafeLiquidUI } from '@decido/shell';
+import { SafeZone } from '../components/SafeComponentWrapper';
+import { kernel } from '@decido/kernel-bridge';
+import { createSanitizedKernel } from './SecurityProxy';
+import { AVAILABLE_DEPENDENCIES, detectRequiredDependencies } from './DependencyRegistry';
+
+export interface PlaygroundState {
+    logs: string[];
+    isExecuting: boolean;
+}
+
+export const playgroundStore = createStore<PlaygroundState>(() => ({
+    logs: ['Sistema en línea. Esperando directivas.'],
+    isExecuting: false
+}));
+
+// Escuchar actualizaciones de datos en vivo y transmutaciones generativas desde Rust/Redis
+kernel.onEvent((payload: any) => {
+    if (payload.event_type === 'ui:update_widget_data') {
+        const { widgetId, newData } = payload.data;
+        useShellStore.getState().setWidgetData(widgetId, newData);
+        console.log(`[LiveUpdate] 🔄 Datos actualizados para ${widgetId}`);
+    } else if (payload.event_type === 'ui:spawn_dynamic_widget') {
+        const title = payload.data?.title || "Misión Completada (Liquid UI)";
+        const code = payload.data?.code || payload.data?.content || payload.data || "";
+        console.log(`[LiquidUI] 🌊 Materializando interfaz efímera: ${title}`);
+        PlaygroundEngine.spawnGenerativeUI(code, title);
+    }
+});
+
+export const PlaygroundEngine = {
+    log(msg: string) {
+        playgroundStore.setState((state) => ({
+            logs: [...state.logs, `[${new Date().toLocaleTimeString()}] ${msg}`].slice(-10) // Mantener últimos 10 logs
+        }));
+    },
+
+    async dispatchMission(objective: string) {
+        const { isThinClient } = useShellStore.getState();
+
+        if (playgroundStore.getState().isExecuting) return;
+
+        playgroundStore.setState({ isExecuting: true });
+        this.log(`🚀 Misión enviada ${isThinClient ? 'remotamente' : 'al enjambre local'}: "${objective}"`);
+
+        try {
+            // Enviamos el mensaje al agente 'dev-master' (que crearemos en Rust)
+            await kernel.execute('send_message', {
+                from: isThinClient ? "Mobile_User" : "Desktop_User",
+                to: "dev-master", // ID del agente en Rust
+                intent: "execute_task",
+                payload: objective,
+                priority: "high"
+            });
+
+            this.log('🛰️ Mensaje propagado por Redis. Esperando respuesta del Agente...');
+        } catch (e: any) {
+            this.log(`❌ Error de conexión: ${e.message}`);
+        } finally {
+            playgroundStore.setState({ isExecuting: false });
+        }
+    },
+
+    // --- Phase 10: Generative & Self-Healing Engine ---
+
+    lastAttemptedCode: "",
+    lastErrorSignature: "", // Add signature tracker
+    currentMission: "",
+    retryCount: 0,
+    MAX_RETRIES: 2,
+
+    sanitizeJSX(raw: string): string {
+        let clean = raw.trim();
+        // Intentar extraer bloque de código con lenguaje especificado (jsx, tsx, etc.)
+        const langMatch = clean.match(/```(?:jsx|tsx|javascript|typescript|js|ts)\n([\s\S]*?)\n```/);
+        if (langMatch && langMatch[1]) {
+            return langMatch[1].trim();
+        }
+        // Intentar extraer bloque genérico sin lenguaje
+        const genericMatch = clean.match(/```\n([\s\S]*?)\n```/);
+        if (genericMatch && genericMatch[1]) {
+            return genericMatch[1].trim();
+        }
+        // Si no hay bloques markdown, retornar todo asumiendo que es código puro
+        return clean;
+    },
+
+    async spawnGenerativeUI(rawCode: string, missionTitle: string = 'Componente Generado', missionData: any = {}) {
+        const code = this.sanitizeJSX(rawCode);
+        this.log(`🛡️ Preparando Zona Segura (Shadow DOM) para: ${missionTitle}`);
+        this.lastAttemptedCode = code;
+        this.currentMission = missionTitle;
+
+        const widgetId = `gen-live-${Date.now()}`;
+
+        // Guardar datos iniciales
+        useShellStore.getState().setWidgetData(widgetId, missionData);
+
+        const handleCrash = async (error: Error, errorInfo: any) => {
+            this.log(`⚠️ Detectado crash en UI. Iniciando auto-curación...`);
+
+            if (this.retryCount >= this.MAX_RETRIES) {
+                this.log(`❌ Demasiados intentos de reparación. Abortando misión.`);
+                kernel.notify('Fallo de Auto-Curación', 'El agente no pudo reparar la interfaz tras varios intentos.');
+                return;
+            }
+
+            this.retryCount++;
+            this.lastErrorSignature = error.message;
+
+            // Prepared repair prompt
+            const repairPrompt = `
+SISTEMA DE AUTO-CURACIÓN DE DECIDO-OS
+-------------------------------------
+El código React que generaste causó un error de ejecución en tiempo real.
+
+ERROR: ${error.message}
+LOCALIZACIÓN: ${JSON.stringify(errorInfo.componentStack?.split('\\n').slice(0, 3))}
+
+CÓDIGO FALLIDO:
+\`\`\`jsx
+${this.lastAttemptedCode}
+\`\`\`
+
+TAREA: Corrige el error en tu lógica. Asegúrate de que todas las variables y accesos a mapas/arrays sean seguros (ej. usa optional chaining).
+REGLA CRÍTICA: No uses librerías externas que no sean React ni intentes renderizar objetos como si fueran elementos React.
+Usa únicamente Tailwind inline classes. 
+Asegúrate de que el componente exportado dinámicamente se asigne a 'DynamicComponent'.
+Responde devolviendo de nuevo el intento \`ui:spawn_dynamic_widget\` pero con el código completamente solventado. No repitas el mismo error.
+            `;
+
+            await kernel.execute('send_message', {
+                from: "System_UI_Sentinel",
+                to: "dev-master",
+                intent: "repair_ui",
+                payload: repairPrompt,
+                priority: "high"
+            });
+
+            this.log(`🛰️ Feedback enviado al Orquestador Rust. Re-intentando constructo (Intento ${this.retryCount})...`);
+        };
+
+        try {
+            const requiredDeps = detectRequiredDependencies(code);
+            this.log(`📦 Dependencias inyectadas: ${requiredDeps.join(', ') || 'Ninguna'}`);
+
+            const dependencyArgs: Record<string, any> = {
+                'React': React,
+                'kernel': createSanitizedKernel(missionTitle),
+                'Lucide': LucideIcons,
+                'window': undefined,
+                'document': undefined,
+                'localStorage': undefined,
+                'fetch': undefined,
+            };
+
+            requiredDeps.forEach(dep => {
+                dependencyArgs[dep.replace('-', '_')] = AVAILABLE_DEPENDENCIES[dep];
+            });
+
+            const argNames = Object.keys(dependencyArgs);
+            const argValues = Object.values(dependencyArgs);
+
+            // 1. DSL Transpilation via Safe AST Engine
+            // Bloqueamos el motor generativo para enforzar el AST SafeLiquidUI. No más ejecución libre.
+            const RawDynamicComponent: React.FC<any> = (props) => {
+                return React.createElement(SafeLiquidUI, {
+                    uiSchema: code,
+                    tenantId: 'generative-playground',
+                    missionData: props.data
+                });
+            };
+
+            // 2. Wrap via ErrorBoundary and Security Context with Live Data
+            const ProtectedComponent = (props: any) => {
+                const liveData = useShellStore((state) => state.widgetDataBus[widgetId]);
+
+                // EFECTO DE LIMPIEZA: Handshake de Cierre
+                React.useEffect(() => {
+                    return () => {
+                        console.log(`[Shell] 🛑 Cerrando canal de datos para ${widgetId}`);
+                        kernel.execute('stop_live_monitor', { widgetId }).catch(e => console.warn(e));
+                    };
+                }, []);
+
+                return React.createElement(
+                    SafeZone,
+                    {
+                        title: missionTitle,
+                        rawCode: code,
+                        onCrash: handleCrash,
+                        children: React.createElement(RawDynamicComponent, { ...props, data: liveData })
+                    }
+                );
+            };
+
+            // 3. Register Temporary Layout Morphological Widget
+            const pluginId = `plugin-${widgetId}`;
+
+            useShellStore.getState().registerPlugin({
+                id: pluginId,
+                name: missionTitle,
+                version: '1.0.0',
+                description: 'Generado vía Auto-Curación',
+                widgets: [{
+                    id: widgetId,
+                    pluginId: pluginId,
+                    name: missionTitle,
+                    capabilities: ['generative:canvas'],
+                    views: { expanded: ProtectedComponent },
+                    layoutConfig: { preferredZone: 'main-canvas' },
+                    component: ProtectedComponent,
+                    isTransient: true
+                }],
+                intents: []
+            });
+
+            // 4. Force Structural Layout Transmutation
+            const newLayout: LayoutNode = {
+                id: `layout-${widgetId}`,
+                type: 'split-horizontal',
+                children: [
+                    {
+                        id: 'side-terminal',
+                        type: 'widget',
+                        widgetId: 'forge-terminal',
+                        size: 30
+                    },
+                    {
+                        id: `main-${widgetId}`,
+                        type: 'widget',
+                        widgetId: widgetId,
+                        size: 70
+                    }
+                ]
+            };
+
+            useShellStore.getState().setLayout(newLayout);
+
+            kernel.notify('✨ Canvas Actualizado', `Constructo "${missionTitle}" renderizado.`);
+            this.log(`✅ UI Montada con éxito en el canvas principal.`);
+
+            // If we successfully rendered and this was a fix, store the UILesson
+            if (this.retryCount > 0 && this.lastErrorSignature) {
+                this.log(`🧠 Guardando Lección UI (Memoria Cognitiva) en Qdrant...`);
+                kernel.execute('save_lesson', {
+                    lesson: {
+                        error_signature: this.lastErrorSignature,
+                        failed_code: this.lastAttemptedCode,
+                        fixed_code: code
+                    }
+                }).catch(e => {
+                    console.warn("Failed to save UILesson:", e);
+                });
+            }
+
+            // Reset retries and update current baseline
+            this.retryCount = 0;
+            this.lastErrorSignature = "";
+            this.lastAttemptedCode = code;
+
+        } catch (error: any) {
+            this.log(`❌ Error preventivo de Ensamblaje Estático: ${error.message}`);
+
+            // Initiate auto-healing even for static syntax errors
+            handleCrash(error, { componentStack: "Eval/Transpilation Phase" });
+        }
+    }
+};