@decido/shell 1.0.0

package/src/hooks/useMcpClient.ts

@@ -0,0 +1,112 @@
+import { useEffect } from 'react';
+import { useEngineStore } from '@decido/engine';
+import { usePlaygroundStore } from '../store/usePlaygroundStore';
+import { useNetwork, useNetworkEvent } from '../contexts/NetworkProvider';
+
+export const useMcpClient = () => {
+    const { isConnected, isNativeOS, emitEvent } = useNetwork();
+    const lastEvent = useEngineStore((state: any) => state.lastEvent);
+    const addLog = usePlaygroundStore((state: any) => state.addLog);
+
+    // 1. Escuchar peticiones del Motor Interno para enviarlas a la red Real / Rust
+    useEffect(() => {
+        if (lastEvent?.type === 'MCP_EXECUTION_REQUESTED') {
+            const { intent, tool, context, parameters } = lastEvent.payload || {};
+            const targetNodeId = lastEvent.targetNodeId;
+            const command = intent || tool;
+
+            // Si estamos en Tauri (isNativeOS) O conectados por WebSocket
+            if (isNativeOS || isConnected) {
+                addLog(`🦀 [OS Kernel] Solicitando ejecución nativa: ${command}`, 'system');
+                
+                // 🚀 RUTA NUEVA HTTP AL DAEMON (Bypass de WebSockets/IPC para herramientas nativas)
+                fetch('http://localhost:3101/api/explorer/execute_tool', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        tool_name: command,
+                        args: context || parameters
+                    })
+                })
+                .then(res => res.json())
+                .then(data => {
+                    if (data.success || data.result) {
+                        addLog(`✅ [Daemon REST] Herramienta completada: ${command}`, 'success');
+                        useEngineStore.getState().dispatchEvent({
+                            type: 'NODE_COMPLETED',
+                            targetNodeId: targetNodeId,
+                            routeHandle: 'success',
+                            variables: {
+                                result: data.result,
+                                ...data
+                            }
+                        });
+                    } else {
+                        throw new Error(data.error || 'Server error');
+                    }
+                })
+                .catch(err => {
+                    addLog(`❌ [Daemon REST] Error en la herramienta ${command}: ${err.message}`, 'error');
+                    
+                    // Fallback para herramientas simuladas si falla el daemon
+                    useEngineStore.getState().dispatchEvent({
+                        type: 'NODE_COMPLETED',
+                        targetNodeId: targetNodeId,
+                        routeHandle: 'error',
+                        variables: {
+                            error: err.message,
+                            mcp_error: err.message
+                        }
+                    });
+                });
+                return;
+            } else {
+                // MOCK (Isolation Mode) para cuando el Dev prueba en navegador sin backend
+                addLog(`[Local Mock] Simulando callback resolutivo para: ${command}`, 'system');
+                const timer = setTimeout(() => {
+                    useEngineStore.getState().dispatchEvent({
+                        type: 'NODE_COMPLETED',
+                        targetNodeId: targetNodeId,
+                        routeHandle: 'success',
+                        variables: {
+                            mockValue: Math.floor(Math.random() * 100),
+                            mocked_intent: command
+                        }
+                    });
+                }, 1500);
+                return () => clearTimeout(timer);
+            }
+        }
+    },[lastEvent, isConnected, isNativeOS, emitEvent, addLog]);
+
+    // 2. Escuchar respuestas del Kernel en Rust y devolverlas al Motor TypeScript
+    useNetworkEvent('mcp:response', (payload: any) => {
+        const { targetNodeId, status, data, error } = payload;
+        
+        if (!targetNodeId) {
+            addLog(`⚠️ [OS Kernel] Respuesta huérfana (sin targetNodeId): ${status}`, 'error');
+            return;
+        }
+
+        addLog(`✅ [OS Kernel] Respuesta recibida para nodo ${targetNodeId}: ${status}`, status === 'success' ? 'success' : 'error');
+
+        // Determinar la rama lógica para que el grafo avance
+        const routeHandle = status === 'success' ? 'success' : 'error';
+
+        useEngineStore.getState().dispatchEvent({
+            type: 'NODE_COMPLETED',
+            targetNodeId: targetNodeId,
+            routeHandle: routeHandle,
+            variables: {
+                ...data,
+                mcp_error: error
+            }
+        });
+    });
+};
+
+// Componente utilitario para montar el cliente invisiblemente en el árbol de React
+export const McpLifecycleManager = () => {
+    useMcpClient();
+    return null;
+};

package/src/hooks/useNexusaiDeploy.ts

@@ -0,0 +1,118 @@
+/**
+ * useNexusaiDeploy — Hook for deploying web previews.
+ *
+ * Dual strategy:
+ * 1. If NexusAI API key is configured → deploy via SDK (real URL)
+ * 2. Fallback → generate a local Blob URL for immediate preview/sharing
+ */
+import { useState, useCallback } from 'react';
+import { useMorphInstanceStore } from '../store/useMorphInstanceStore';
+
+export interface DeployState {
+    status: 'idle' | 'deploying' | 'success' | 'error';
+    url: string | null;
+    error: string | null;
+    progress: number;
+}
+
+function buildStandaloneHTML(html: string, css: string, js: string): string {
+    return `<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Decido Preview</title>
+    <script src="https://cdn.tailwindcss.com"><\/script>
+    <style>
+        *, *::before, *::after { box-sizing: border-box; }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+            margin: 0;
+            background: #fff;
+            min-height: 100vh;
+        }
+        ${css}
+    </style>
+</head>
+<body>
+    ${html}
+    <script>try { ${js} } catch(e) { console.error(e); }<\/script>
+</body>
+</html>`;
+}
+
+export function useNexusaiDeploy() {
+    const [state, setState] = useState<DeployState>({
+        status: 'idle',
+        url: null,
+        error: null,
+        progress: 0,
+    });
+
+    const deploy = useCallback(async () => {
+        const activeInst = useMorphInstanceStore.getState().getActiveInstance();
+        if (!activeInst?.data?.html) {
+            setState({ status: 'error', url: null, error: 'No hay contenido para desplegar', progress: 0 });
+            return;
+        }
+
+        const { html, css, javascript } = activeInst.data;
+        setState({ status: 'deploying', url: null, error: null, progress: 10 });
+
+        const nexusKey = localStorage.getItem('nexusai_api_key');
+
+        if (nexusKey) {
+            // Strategy 1: Deploy via NexusAI SDK
+            try {
+                setState(s => ({ ...s, progress: 30 }));
+
+                // Dynamic import via variable — prevents Rollup/Vite from resolving at build time
+                const sdkModule = '@nexusai' + '/sdk';
+                const { NexusAI } = await import(/* @vite-ignore */ sdkModule);
+                const client = new NexusAI({ apiKey: nexusKey });
+
+                const standaloneCode = buildStandaloneHTML(html, css || '', javascript || '');
+                const { jobId } = await client.pipeline.deploy({
+                    componentName: `preview-${Date.now()}`,
+                    componentCode: standaloneCode,
+                });
+
+                setState(s => ({ ...s, progress: 60 }));
+
+                const result = await client.pipeline.waitForDeploy(jobId, {
+                    timeoutMs: 60_000,
+                    onProgress: (s: any) => setState(prev => ({ ...prev, progress: 60 + Math.round((s.progress || 0) * 0.4) })),
+                });
+
+                const deployUrl = result.result?.deploymentUrl || result.result?.url || '';
+                setState({ status: 'success', url: deployUrl, error: null, progress: 100 });
+            } catch (err: any) {
+                // Fallback to local blob on SDK error
+                const standaloneCode = buildStandaloneHTML(html, css || '', javascript || '');
+                const blob = new Blob([standaloneCode], { type: 'text/html' });
+                const blobUrl = URL.createObjectURL(blob);
+                setState({ status: 'success', url: blobUrl, error: `SDK falló (${err.message}). Preview local generado.`, progress: 100 });
+            }
+        } else {
+            // Strategy 2: Local Blob URL (immediate, no server needed)
+            await new Promise(r => setTimeout(r, 500)); // Simulate brief deploy
+            setState(s => ({ ...s, progress: 50 }));
+
+            const standaloneCode = buildStandaloneHTML(html, css || '', javascript || '');
+            const blob = new Blob([standaloneCode], { type: 'text/html' });
+            const blobUrl = URL.createObjectURL(blob);
+
+            setState({ status: 'success', url: blobUrl, error: null, progress: 100 });
+        }
+    }, []);
+
+    const reset = useCallback(() => {
+        setState({ status: 'idle', url: null, error: null, progress: 0 });
+    }, []);
+
+    const copyUrl = useCallback(() => {
+        if (state.url) navigator.clipboard.writeText(state.url);
+    }, [state.url]);
+
+    return { ...state, deploy, reset, copyUrl };
+}

package/src/hooks/usePlaybackEngine.ts

@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { usePlaybackSimulator, SimulationTape } from '@decido/engine';
+
+/**
+ * usePlaybackEngine — Wraps the mock tape + playback simulator.
+ *
+ * Provides: currentTime, isPlaying, setIsPlaying, playbackSpeed,
+ * setPlaybackSpeed, seekTime, resetSimulation.
+ *
+ * @param prototypeBrand - Current brand key for tape ID
+ */
+export function usePlaybackEngine(prototypeBrand: string) {
+    const mockTape: SimulationTape = useMemo(() => ({
+        id: `tape-${prototypeBrand}`,
+        events: [
+            { t: 0.1, event: { type: 'SYSTEM_START' }, description: 'Arranque Automático' }
+        ]
+    }), [prototypeBrand]);
+
+    return usePlaybackSimulator(mockTape);
+}