@decido/shell 1.0.0

package/.turbo/turbo-build.log

@@ -0,0 +1,13 @@
+
+Debugger listening on ws://127.0.0.1:49814/b16f304e-fd53-46c9-b073-7a75b1b9a411
+For help, see: https://nodejs.org/en/docs/inspector
+Debugger attached.
+
+> @decido/shell@1.0.0 build /Users/julioramirez/dev/active/OnBoardingDecido/packages/shell
+> tsc
+
+Debugger listening on ws://127.0.0.1:49820/ba1bb555-8ad1-42ff-8292-b704d6166a48
+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,65 @@
+{
+  "name": "@decido/shell",
+  "version": "1.0.0",
+  "description": "Decido OS Shell — Main facade: UI composition, morphology, auth, overlays, adapters",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@noble/curves": "^2.0.1",
+    "@tauri-apps/api": "^2.0.0-rc.0",
+    "@tauri-apps/plugin-notification": "^2.2.1",
+    "@tauri-apps/plugin-os": "^2.3.2",
+    "@tauri-apps/plugin-process": "^2.3.1",
+    "@tauri-apps/plugin-updater": "^2.10.0",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.4.3",
+    "idb-keyval": "^6.2.1",
+    "lucide-react": "^0.370.0",
+    "motion": "^11.16.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-resizable-panels": "^4.7.2",
+    "recharts": "^3.7.0",
+    "socket.io-client": "^4.8.3",
+    "tailwind-merge": "^3.5.0",
+    "y-websocket": "^1.5.4",
+    "yjs": "^13.6.29",
+    "zustand": "^4.5.2",
+    "@decido/canvas-core": "0.1.0",
+    "@decido/core": "0.1.0",
+    "@decido/kernel-bridge": "1.0.0",
+    "@decido/logger": "^1.0.0",
+    "@decido/sdk": "1.0.0",
+    "@decido/macia-core": "0.1.0",
+    "@decido/sentinel-browser": "0.2.0",
+    "@decido/shell-auth": "1.0.0",
+    "@decido/shell-telemetry": "1.0.0",
+    "@decido/plugin-engine": "1.0.0",
+    "@decido/chat": "1.0.0",
+    "@decido/commands": "1.0.0",
+    "@decido/engine": "0.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@types/socket.io-client": "^3.0.0",
+    "@types/three": "^0.183.1",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "UNLICENSED",
+  "scripts": {
+    "lint": "eslint \"src/**/*.ts*\"",
+    "build": "tsup src/index.ts --format esm --dts --minify --clean"
+  }
+}

package/src/AgentPlayer.tsx

@@ -0,0 +1,105 @@
+import React, { useState, useEffect } from 'react';
+import { Panel, Group as PanelGroup } from 'react-resizable-panels';
+import { AgentChat, AgentMessage } from './components/agent/AgentChat';
+import { NetworkProvider } from './contexts/NetworkProvider';
+
+export default function AgentPlayer({ socketInstance }: { socketInstance?: any }) {
+    const [messages, setMessages] = useState<AgentMessage[]>([]);
+    const [isGenerating, setIsGenerating] = useState(false);
+
+    useEffect(() => {
+        if (!socketInstance) return;
+
+        const handleOrchestratorEvent = (event: any) => {
+            console.log('[AgentPlayer] Recibido orchestrator-event:', event);
+            
+            // Filtramos eventos relevantes del stream del agente o arenas
+            if (event.event_type === 'AgentStreamEvent' && event.data) {
+                const streamData = event.data;
+                const agentId = event.agent_id || 'decido-agent';
+                
+                setMessages(prev => {
+                    // Buscar si ya hay un mensaje en curso para este agente (el último)
+                    const lastMsg = prev[prev.length - 1];
+                    const isSameAgent = lastMsg && lastMsg.role === 'agent' && lastMsg.id === agentId;
+                    
+                    let newToolCalls = isSameAgent ? [...(lastMsg.toolCalls || [])] : [];
+                    let newText = isSameAgent ? lastMsg.text : '';
+
+                    if (streamData.type === 'Think') {
+                        // El chunk de pensamiento se concatena al texto
+                        newText += streamData.content;
+                    } else if (streamData.type === 'ToolCall') {
+                        // Se mandó a ejecutar una tool
+                        newToolCalls.push({
+                            name: streamData.tool_name || 'unknown_tool',
+                            args: streamData.tool_args || {},
+                            status: 'running'
+                        });
+                    } else if (streamData.type === 'ToolResult') {
+                        // El resultado de una tool altera el status de la última tool agregada
+                        if (newToolCalls.length > 0) {
+                            newToolCalls[newToolCalls.length - 1].status = 'success';
+                            newToolCalls[newToolCalls.length - 1].output = streamData.content;
+                        }
+                    } else if (streamData.type === 'Message') {
+                        newText += streamData.content;
+                        setIsGenerating(false);
+                    }
+
+                    if (isSameAgent) {
+                        const updated = [...prev];
+                        updated[updated.length - 1] = { ...lastMsg, text: newText, toolCalls: newToolCalls };
+                        return updated;
+                    } else {
+                        return [...prev, { id: agentId, role: 'agent', text: newText, toolCalls: newToolCalls }];
+                    }
+                });
+            } else if (event.event_type === 'SpawnAgentRequest') {
+                setIsGenerating(true);
+            }
+        };
+
+        socketInstance.on('orchestrator-event', handleOrchestratorEvent);
+        return () => {
+            socketInstance.off('orchestrator-event', handleOrchestratorEvent);
+        };
+    }, [socketInstance]);
+
+    const handleSendMessage = (text: string) => {
+        if (!text.trim() || !socketInstance) return;
+        
+        const newUserMsg: AgentMessage = { id: Date.now().toString(), role: 'user', text };
+        setMessages(prev => [...prev, newUserMsg]);
+        setIsGenerating(true);
+
+        socketInstance.emit('rpc_call', {
+            cmd: 'send_message',
+            args: {
+                from: 'AgentPlayerUI',
+                to: 'dev-master',
+                intent: 'chat_request',
+                payload: text,
+                priority: 'High'
+            }
+        });
+    };
+
+    return (
+        <NetworkProvider socketInstance={socketInstance} isConnected={!!socketInstance?.connected}>
+            <div className="bg-surface-primary flex font-sans relative overflow-hidden text-text-primary rounded-xl border border-border-default shadow-lg w-full h-[800px]">
+                <PanelGroup orientation="horizontal" className="flex-1 w-full h-full relative z-20">
+                    <Panel id="agent-chat" defaultSize={100} minSize={30} className="flex flex-col relative h-full bg-surface-primary">
+                        <div className="flex-1 w-full relative z-20 overflow-hidden flex flex-col pt-4">
+                            <AgentChat 
+                                messages={messages}
+                                onSendMessage={handleSendMessage}
+                                isGenerating={isGenerating}
+                            />
+                        </div>
+                    </Panel>
+                </PanelGroup>
+            </div>
+        </NetworkProvider>
+    );
+}

package/src/DecidoPlayer.tsx

@@ -0,0 +1,117 @@
+import React, { useEffect, useState, useMemo } from 'react';
+import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
+import { usePlaygroundStore } from './store/usePlaygroundStore';
+import { useEngineStore } from '@decido/engine';
+import { useTimelineStore } from '@decido/engine';
+import { useUIStateListener } from './hooks/listeners/useUIStateListener';
+import { usePlaybackSimulator } from '@decido/engine';
+import { PlaygroundChat } from './components/playground/PlaygroundChat';
+import { PlaygroundCanvas } from './components/playground/PlaygroundCanvas';
+import { PlaygroundErrorBoundary } from './components/playground/PlaygroundErrorBoundary';
+import { NetworkProvider } from './contexts/NetworkProvider';
+import { DecidoStudioProps } from '@decido/engine';
+import { SimulationTape } from '@decido/engine';
+import { useRef } from 'react';
+
+/**
+ * DecidoPlayer Embebido
+ * Phase H: Runtime completo — auto-inicia flujos, ejecuta render nodes con formularios,
+ * y soporta toda la lógica del motor (condicionales, triggers, subflows).
+ */
+export default function DecidoPlayer({ aiProvider, VoiceWidget, config, socketInstance, width = '100%', height = '100%' }: DecidoStudioProps & { width?: string, height?: string }) {
+    
+    // Core state
+    const { step, selectedProfile, isBooting, prototypeBrand, setInputValue } = usePlaygroundStore();
+    const { resetEngine } = useEngineStore();
+    const setActiveTimeline = useTimelineStore(state => state.setActiveTimeline);
+    
+    // Listen to UI state nodes emitting in the timeline
+    const { demoState, showCanvas, setShowCanvas } = useUIStateListener();
+    const dragConstraintsRef = useRef<HTMLDivElement>(null);
+
+    // Auto-start: mock tape dispatches SYSTEM_START at t=0.1s
+    const mockTape: SimulationTape = useMemo(() => ({
+        id: `tape-${prototypeBrand}`,
+        events: [
+            { t: 0.1, event: { type: 'SYSTEM_START' }, description: "Arranque Automático (Player)" }
+        ]
+    }), [prototypeBrand]);
+
+    const { isPlaying, setIsPlaying, resetSimulation } = usePlaybackSimulator(mockTape);
+
+    // Sync active timeline + auto-start on brand change
+    useEffect(() => {
+        setActiveTimeline(prototypeBrand);
+        resetEngine();
+        resetSimulation();
+        // Small delay to let store settle before starting playback
+        const timer = setTimeout(() => setIsPlaying(true), 100);
+        return () => clearTimeout(timer);
+    }, [prototypeBrand]);
+
+    const safeConfig = config || { environments: {}, voices: [] };
+    const activeConfig = (safeConfig.environments as Record<string, any>)[prototypeBrand] ||
+        Object.values(safeConfig.environments)[0] || {};
+    
+    const [suggestions, setSuggestions] = useState<any[]>([]);
+
+    useEffect(() => {
+        setSuggestions(prev => {
+            const next = activeConfig.suggestions || [];
+            if (JSON.stringify(prev) === JSON.stringify(next)) return prev;
+            return next;
+        });
+    }, [activeConfig.suggestions]);
+
+    return (
+        <NetworkProvider socketInstance={socketInstance} isConnected={!!socketInstance?.connected}>
+            <div style={{ width, height }} className="bg-surface-primary flex font-sans relative overflow-hidden text-text-primary rounded-xl border border-border-default shadow-lg">
+                <PanelGroup orientation="horizontal" className="flex-1 w-full h-full relative z-20">
+                    
+                    {/* LEFT CHAT PANEL */}
+                    <Panel id="player-chat" defaultSize={showCanvas ? 60 : 100} minSize={30} className="flex flex-col relative h-full bg-surface-primary">
+                        <div className="flex-1 w-full relative z-20 overflow-hidden flex flex-col">
+                            <PlaygroundErrorBoundary fallbackName="Motor de Chat (Player)">
+                                    <PlaygroundChat
+                                        step={step}
+                                        selectedProfile={selectedProfile}
+                                        authAvailableLicenses={[]}
+                                        handleProfileSelect={() => {}}
+                                        activeConfig={activeConfig}
+                                        demoState={demoState}
+                                        suggestions={suggestions}
+                                        setInputValue={setInputValue}
+                                        isGenerating={false}
+                                        config={safeConfig}
+                                        isCreatorMode={false}
+                                        handleGeneratePlayground={async () => {}}
+                                    />
+                            </PlaygroundErrorBoundary>
+                        </div>
+                    </Panel>
+
+                    {/* RIGHT CANVAS PANEL */}
+                    {showCanvas && (
+                        <>
+                            <PanelResizeHandle className="w-1.5 hover:bg-cyan-500/20 active:bg-cyan-500/30 transition-colors cursor-col-resize z-40 relative group flex items-center justify-center border-l-2 border-border-subtle">
+                            </PanelResizeHandle>
+                            <Panel id="player-canvas" defaultSize={40} minSize={20} className="bg-surface-secondary h-full relative z-30 overflow-hidden">
+                                <PlaygroundErrorBoundary fallbackName="Lienzo 3D (Player)">
+                                    <PlaygroundCanvas
+                                        showCanvas={showCanvas} 
+                                        setShowCanvas={setShowCanvas}
+                                        activeConfig={activeConfig} 
+                                        prototypeBrand={prototypeBrand}
+                                        activeState={demoState} 
+                                        chartData={[]}
+                                        dragConstraintsRef={dragConstraintsRef}
+                                    />
+                                </PlaygroundErrorBoundary>
+                            </Panel>
+                        </>
+                    )}
+                </PanelGroup>
+            </div>
+        </NetworkProvider>
+    );
+}