@decido/shell 1.0.0

package/src/core/PluginContext.tsx

@@ -0,0 +1,141 @@
+import { createContext, useContext, ReactNode, useSyncExternalStore } from 'react';
+import { MaciaPlugin } from '@decido/plugin-engine';
+import { useShellStore } from '../store/engine';
+
+/**
+ * Interface for the state slices and resources 
+ * that the Shell provides to any rendered Plugin Widget.
+ */
+export interface ShellPluginContextType {
+    // Info about the plugin owning the current render tree
+    pluginId: string;
+    pluginDetails?: MaciaPlugin;
+
+    // A unified key-value bridge for plugins to store local reactive state
+    // without spinning up their own Zustand instances globally.
+    // E.g., Redis plugin can use this to store "messages" just for its session.
+    setContextState: (key: string, value: any) => void;
+    getContextState: <T>(key: string, defaultValue?: T) => T | undefined;
+
+    // Ability to request shell actions
+    openOverlay: (widgetId: string, position: { x: number, y: number }) => void;
+    closeOverlay: (overlayId: string) => void;
+}
+
+// Internal store strictly for isolated context states
+// Using a simple event emitter pattern so we can plug it into useSyncExternalStore
+class PluginStateStore {
+    private state: Record<string, any> = {};
+    private listeners = new Set<() => void>();
+
+    set(key: string, value: any) {
+        this.state = { ...this.state, [key]: value };
+        this.listeners.forEach(l => l());
+    }
+
+    get<T>(key: string, defaultValue?: T): T | undefined {
+        return key in this.state ? this.state[key] as T : defaultValue;
+    }
+
+    getSnapshot() {
+        return this.state;
+    }
+
+    subscribe(listener: () => void) {
+        this.listeners.add(listener);
+        return () => this.listeners.delete(listener);
+    }
+}
+
+const _pluginStores = new Map<string, PluginStateStore>();
+
+const PluginContext = createContext<ShellPluginContextType | null>(null);
+
+interface PluginProviderProps {
+    pluginId: string;
+    children: ReactNode;
+}
+
+/**
+ * Wraps a plugin's widget tree to provide it Context access.
+ */
+export function ShellPluginProvider({ pluginId, children }: PluginProviderProps) {
+    const plugins = useShellStore(state => state.plugins);
+    const openTransientOverlay = useShellStore(state => state.openTransientOverlay);
+    const closeTransientOverlay = useShellStore(state => state.closeTransientOverlay);
+
+    // Initial setup for this plugin's local state dictionary if empty
+    if (!_pluginStores.has(pluginId)) {
+        _pluginStores.set(pluginId, new PluginStateStore());
+    }
+
+    const store = _pluginStores.get(pluginId)!;
+
+    const setContextState = (key: string, value: any) => {
+        store.set(key, value);
+    };
+
+    const getContextState = <T,>(key: string, defaultValue?: T): T | undefined => {
+        return store.get<T>(key, defaultValue);
+    };
+
+    const openOverlay = (widgetId: string, position: { x: number, y: number }) => {
+        openTransientOverlay({ widgetId, position });
+    };
+
+    const value: ShellPluginContextType = {
+        pluginId,
+        pluginDetails: plugins.get(pluginId),
+        setContextState,
+        getContextState,
+        openOverlay,
+        closeOverlay: closeTransientOverlay
+    };
+
+    return (
+        <PluginContext.Provider value={value}>
+            {children}
+        </PluginContext.Provider>
+    );
+}
+
+/**
+ * Hook for widgets to access the generic shell-provided boundaries.
+ */
+export function usePluginContext() {
+    const ctx = useContext(PluginContext);
+    if (!ctx) {
+        throw new Error("usePluginContext must be used within a ShellPluginProvider. Only call this inside MaciaWidgets components.");
+    }
+    return ctx;
+}
+
+/**
+ * Hook for widgets to subscribe Reactively to a piece of state owned by the plugin
+ */
+
+export function usePluginState<T>(key: string, defaultValue?: T): [T, (val: T | ((prev: T) => T)) => void] {
+    const ctx = usePluginContext();
+    const store = _pluginStores.get(ctx.pluginId);
+
+    if (!store) throw new Error("Plugin store not initialized");
+
+    const stateSnapshot = useSyncExternalStore(
+        (listener) => store.subscribe(listener),
+        () => store.getSnapshot()
+    );
+
+    const value = key in stateSnapshot ? stateSnapshot[key] as T : (defaultValue as T);
+
+    const setter = (val: T | ((prev: T) => T)) => {
+        if (typeof val === 'function') {
+            // TypeScript tricky casting for generics and functions
+            const fn = val as (prev: T) => T;
+            ctx.setContextState(key, fn(value));
+        } else {
+            ctx.setContextState(key, val);
+        }
+    };
+
+    return [value, setter];
+}

package/src/hooks/listeners/useUIStateListener.ts

@@ -0,0 +1,59 @@
+import { useEffect, useRef } from 'react';
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+import { useTimelineStore } from '@decido/engine';
+import { useEngineStore } from '@decido/engine';
+import { playSound } from '../useSoundEffects';
+
+export const useUIStateListener = () => {
+    const activeTimelineId = usePlaygroundStore(state => state.prototypeBrand);
+    const timelines = useTimelineStore(state => state.timelines);
+    const activeNodeIds = useEngineStore(state => state.activeNodeIds);
+    
+    // Leer del nuevo Store Global
+    const { addLog, addChatMessage, isMuted, demoState, setDemoState, showCanvas, setShowCanvas } = usePlaygroundStore();
+    
+    const processedNodes = useRef<Set<string>>(new Set());
+
+    useEffect(() => {
+        if (activeNodeIds.length === 0) {
+            processedNodes.current.clear();
+            setDemoState('idle'); 
+        }
+    }, [activeNodeIds, setDemoState]);
+
+    useEffect(() => {
+        const blueprint = timelines[activeTimelineId]?.blueprint || { nodes: timelines[activeTimelineId]?.keyframes ||[] };
+        if (!blueprint || activeNodeIds.length === 0) return;
+
+        const activeUINodes = blueprint.nodes.filter(
+            (n: any) => activeNodeIds.includes(n.id) && n.track === 'ui'
+        );
+
+        activeUINodes.forEach((node: any) => {
+            if (!processedNodes.current.has(node.id)) {
+                processedNodes.current.add(node.id);
+                
+                const newState = node.state || 'idle';
+                setDemoState(newState);
+                
+                if (node.canvas !== undefined) {
+                    setShowCanvas(node.canvas);
+                }
+
+                addLog(`🔀 System Authored Transition: UI Context [${newState}]`, 'system');
+
+                if (newState.includes('whatsapp') && !newState.includes('resolved') && !newState.includes('idle')) {
+                    addChatMessage({ type: 'alert', sender: 'system', text: 'Alerta de SLA Crítico detectada vía integración.'});
+                } else if (newState.includes('analyzing')) {
+                    addChatMessage({ type: 'workflow', sender: 'system', text: 'Analizando información contextual...'});
+                }
+
+                if (newState.includes('alert')) playSound('alert', isMuted);
+                else playSound('beep', isMuted);
+            }
+        });
+
+    },[activeNodeIds, activeTimelineId, timelines, isMuted, addLog, addChatMessage, setDemoState, setShowCanvas]);
+
+    return { demoState, setDemoState, showCanvas, setShowCanvas };
+};

package/src/hooks/listeners/useWhatsAppListener.ts

@@ -0,0 +1,110 @@
+import { useEffect, useRef } from 'react';
+import { io } from 'socket.io-client';
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+import { playSound } from '../useSoundEffects';
+
+const SOCKET_URL = (import.meta as any).env?.VITE_API_BASE_URL || 'http://localhost:3001';
+
+export const useWhatsAppListener = () => {
+    const { addChatMessage, isMuted } = usePlaygroundStore();
+    const processedMessages = useRef<Set<string>>(new Set());
+
+    useEffect(() => {
+        const socket = io(SOCKET_URL, {
+            reconnectionAttempts: 5,
+            reconnectionDelay: 2000,
+        });
+
+        const handleWhatsAppMessage = (payload: any) => {
+            if (payload) {
+                const { wamid, from, type, timestamp, name, content } = payload;
+
+                // Prevent double-processing the same WAMID
+                if (wamid && processedMessages.current.has(wamid)) return;
+                if (wamid) processedMessages.current.add(wamid);
+
+                const ts = parseInt(timestamp);
+                const date = new Date(ts > 10000000000 ? ts : ts * 1000);
+
+                // Construct a custom UI schema for the 'ui-artifact' message
+                const schema = {
+                    type: "div",
+                    props: { className: "w-full outline-hidden bg-transparent flex flex-col p-4 gap-3 border-l-4 border-l-[#25D366]" },
+                    children: [
+                        {
+                            type: "div",
+                            props: { className: "flex items-center gap-3 border-b border-white/5 pb-3" },
+                            children: [
+                                {
+                                    type: "div",
+                                    props: { className: "flex items-center justify-center p-2 bg-[#25D366]/20 rounded-full text-[#25D366] w-8 h-8 font-bold text-xs" },
+                                    children: "WA"
+                                },
+                                {
+                                    type: "div",
+                                    props: { className: "flex flex-col" },
+                                    children: [
+                                        {
+                                            type: "span",
+                                            props: { className: "font-semibold text-text-primary text-xs" },
+                                            children: name ? `${name}` : `${from}`
+                                        },
+                                        {
+                                            type: "span",
+                                            props: { className: "text-[#25D366] text-[10px] uppercase font-mono tracking-wider" },
+                                            children: `Recibido a las ${date.toLocaleTimeString()}`
+                                        }
+                                    ]
+                                }
+                            ]
+                        },
+                        {
+                            type: "p",
+                            props: { className: "text-text-secondary leading-relaxed bg-black/20 p-3 rounded-lg border border-white/5" },
+                            children: content || "Mensaje interactivo o multimedia (Abrir WhatsApp Studio para ver)"
+                        },
+                        {
+                            type: "button",
+                            props: { className: "mt-2 w-full py-2 bg-[#25D366]/20 hover:bg-[#25D366]/30 text-[#25D366] rounded-lg transition-colors text-xs font-bold border border-[#25D366]/20 flex items-center justify-center gap-2" },
+                            children: "Abrir WhatsApp Studio",
+                            onAction: {
+                                command: "studio:openPlugin",
+                                payload: { pluginId: "chameleon", view: "discovery_admin" }
+                            }
+                        },
+                        {
+                            type: "button",
+                            props: { className: "mt-1 w-full py-2 bg-surface-secondary hover:bg-surface-tertiary text-text-secondary rounded-lg transition-colors text-xs font-medium border border-border-default flex items-center justify-center gap-2" },
+                            children: "Ver Kanban de Pedidos",
+                            onAction: {
+                                command: "studio:openPlugin",
+                                payload: { pluginId: "chameleon", view: "enterprise_kanban" }
+                            }
+                        }
+                    ]
+                };
+
+                // Add to main chat as a system agent message but with a custom specialized card
+                addChatMessage({
+                    type: 'ui-artifact',
+                    sender: 'agent',
+                    text: `Nuevo mensaje de WhatsApp de ${name || from}`,
+                    actorId: 'whatsapp',
+                    actorName: 'WhatsApp Gateway',
+                    uiSchema: JSON.stringify(schema),
+                });
+            }
+        };
+
+        socket.on('wa:message_received', handleWhatsAppMessage);
+
+        socket.on('connect', () => {
+            console.log('[WhatsApp Listener] Conectado al backend para mensajes globales:', socket.id);
+        });
+
+        return () => {
+            socket.off('wa:message_received', handleWhatsAppMessage);
+            socket.disconnect();
+        };
+    }, [addChatMessage, isMuted]);
+};

package/src/hooks/morphBridge.ts

@@ -0,0 +1,82 @@
+/**
+ * morphBridge — Bridges chat responses to the MorphInstance system.
+ * 
+ * When the AI generates visual content (graphs, UI artifacts, components),
+ * this bridge auto-creates a MorphInstance tab in MorphShell.
+ */
+import { useMorphInstanceStore } from '../store/useMorphInstanceStore';
+import { usePlaygroundStore } from '../store/usePlaygroundStore';
+import type { ShellType, MorphArtifact } from '../store/useShellRegistry';
+
+interface BridgeOptions {
+    /** Unique ID for this instance (typically chatId or generated) */
+    chatId: string;
+    /** Shell type to render */
+    shellType: ShellType;
+    /** Tab label shown in MorphShell */
+    label: string;
+    /** Shell-level data (config, payload, etc.) */
+    data?: Record<string, any>;
+    /** Optional artifact to push immediately */
+    artifact?: {
+        id: string;
+        name: string;
+        shellType?: ShellType;
+        version?: number;
+        data: Record<string, any>;
+    };
+}
+
+/**
+ * Creates or updates a MorphInstance and optionally pushes an artifact.
+ * Also ensures the canvas is visible.
+ */
+export function bridgeToMorph(opts: BridgeOptions): void {
+    const { chatId, shellType, label, data = {}, artifact } = opts;
+
+    // 1. Upsert the MorphInstance
+    useMorphInstanceStore.getState().upsertInstance({
+        id: chatId,
+        sourceChatId: chatId,
+        shellType,
+        label,
+        data,
+    });
+
+    // 2. Push artifact if provided
+    if (artifact) {
+        useMorphInstanceStore.getState().pushArtifact(chatId, {
+            id: artifact.id,
+            name: artifact.name,
+            shellType: artifact.shellType || shellType,
+            version: artifact.version || 1,
+            data: artifact.data,
+        });
+    }
+
+    // 3. Ensure canvas is visible
+    usePlaygroundStore.getState().setShowCanvas(true);
+
+    console.log(`[MorphBridge] 🌀 ${shellType} instance "${label}" → tab ${chatId}`);
+}
+
+/**
+ * Detects the appropriate shell type from content/intent.
+ */
+export function detectShellType(content: string | Record<string, any>): ShellType {
+    if (typeof content === 'string') {
+        // HTML content → iframe
+        if (/<html|<div|<body|<script/i.test(content)) return 'iframe';
+        // Markdown
+        if (/^#{1,6}\s|^\*\*|^\- \[/m.test(content)) return 'markdown';
+        // Default
+        return 'markdown';
+    }
+
+    // Object with artifact type
+    if (content.artifact) return 'iframe';
+    if (content.schema) return 'iframe';
+    if (content.keyframes || content.nodes) return 'shell-canvas';
+
+    return 'markdown';
+}

package/src/hooks/useAIModelSelector.ts

@@ -0,0 +1,144 @@
+/**
+ * useAIModelSelector — Dynamic multi-provider model selector
+ *
+ * Replaces hardcoded GEMINI_MODELS list with live provider data
+ * from InferenceRouter. Groups models by provider (local vs cloud),
+ * shows availability status, and persists selection in localStorage.
+ */
+
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import {
+  getAllProviders,
+  getProviderStatuses,
+} from '@decido/kernel-bridge';
+
+// ─── Types ──────────────────────────────────────────────────
+
+export interface AIModel {
+  id: string;
+  label: string;
+  provider: string;
+  tag: string;
+  isLocal: boolean;
+}
+
+export interface AIProviderGroup {
+  provider: string;
+  label: string;
+  icon: string;
+  color: string;
+  isLocal: boolean;
+  models: AIModel[];
+  status: 'online' | 'offline' | 'unknown';
+}
+
+// ─── Well-known models per provider ─────────────────────────
+
+const KNOWN_MODELS: Record<string, AIModel[]> = {
+  ollama: [
+    { id: 'qwen2.5:7b', label: 'Qwen 2.5 7B', provider: 'ollama', tag: 'local', isLocal: true },
+    { id: 'llama3.1:8b', label: 'Llama 3.1 8B', provider: 'ollama', tag: 'local', isLocal: true },
+    { id: 'codellama:7b', label: 'CodeLlama 7B', provider: 'ollama', tag: 'code', isLocal: true },
+    { id: 'mistral:7b', label: 'Mistral 7B', provider: 'ollama', tag: 'local', isLocal: true },
+  ],
+  gemini: [
+    { id: 'gemini-3-flash-preview', label: '3.0 Flash', provider: 'gemini', tag: 'fast', isLocal: false },
+    { id: 'gemini-3.1-pro-preview', label: '3.1 Pro', provider: 'gemini', tag: 'smart', isLocal: false },
+    { id: 'gemini-3.1-flash-lite-preview', label: '3.1 Flash Lite', provider: 'gemini', tag: 'stable', isLocal: false },
+  ],
+  anthropic: [
+    { id: 'claude-sonnet-4-20250514', label: 'Sonnet 4', provider: 'anthropic', tag: 'balanced', isLocal: false },
+    { id: 'claude-3-5-haiku-20241022', label: '3.5 Haiku', provider: 'anthropic', tag: 'fast', isLocal: false },
+  ],
+  openai: [
+    { id: 'gpt-4o', label: 'GPT-4o', provider: 'openai', tag: 'smart', isLocal: false },
+    { id: 'gpt-4o-mini', label: 'GPT-4o Mini', provider: 'openai', tag: 'fast', isLocal: false },
+  ],
+};
+
+const PROVIDER_META: Record<string, { label: string; icon: string; color: string; isLocal: boolean }> = {
+  ollama: { label: 'Ollama', icon: '🦙', color: '#10b981', isLocal: true },
+  gemini: { label: 'Gemini', icon: '✨', color: '#3b82f6', isLocal: false },
+  anthropic: { label: 'Claude', icon: '🧠', color: '#a855f7', isLocal: false },
+  openai: { label: 'OpenAI', icon: '⚡', color: '#06b6d4', isLocal: false },
+  mlx: { label: 'MLX', icon: '🍎', color: '#f59e0b', isLocal: true },
+};
+
+const STORAGE_KEY = 'decido_ai_model';
+
+// ─── Hook ───────────────────────────────────────────────────
+
+export function useAIModelSelector() {
+  const [selectedModelId, setSelectedModelId] = useState(
+    () => localStorage.getItem(STORAGE_KEY) || 'gemini-3-flash-preview'
+  );
+  const [providerStatuses, setProviderStatuses] = useState<Record<string, 'online' | 'offline' | 'unknown'>>({});
+
+  // Check provider statuses periodically
+  useEffect(() => {
+    let mounted = true;
+    const check = async () => {
+      try {
+        const statuses = await getProviderStatuses();
+        if (!mounted) return;
+        const map: Record<string, 'online' | 'offline' | 'unknown'> = {};
+        for (const [id, status] of Object.entries(statuses)) {
+          map[id] = status === 'available' ? 'online' : 'offline';
+        }
+        setProviderStatuses(map);
+      } catch {
+        // kernel-bridge not initialized yet — fine
+      }
+    };
+    check();
+    const timer = setInterval(check, 30_000);
+    return () => { mounted = false; clearInterval(timer); };
+  }, []);
+
+  // Build provider groups
+  const providerGroups = useMemo<AIProviderGroup[]>(() => {
+    return Object.entries(KNOWN_MODELS).map(([id, models]) => {
+      const meta = PROVIDER_META[id] || { label: id, icon: '🤖', color: '#888', isLocal: false };
+      return {
+        provider: id,
+        label: meta.label,
+        icon: meta.icon,
+        color: meta.color,
+        isLocal: meta.isLocal,
+        models,
+        status: providerStatuses[id] || 'unknown',
+      };
+    });
+  }, [providerStatuses]);
+
+  // Current selection info
+  const selectedModel = useMemo(() => {
+    for (const group of providerGroups) {
+      const found = group.models.find(m => m.id === selectedModelId);
+      if (found) return { model: found, group };
+    }
+    // Fallback: create an entry for unknown model
+    return {
+      model: { id: selectedModelId, label: selectedModelId, provider: 'unknown', tag: '', isLocal: false },
+      group: providerGroups[0] || null,
+    };
+  }, [selectedModelId, providerGroups]);
+
+  const selectModel = useCallback((modelId: string) => {
+    setSelectedModelId(modelId);
+    localStorage.setItem(STORAGE_KEY, modelId);
+    // Sync to window.__DECIDO__ if available
+    if (typeof window !== 'undefined' && (window as any).__DECIDO__) {
+      (window as any).__DECIDO__.selectedModel = modelId;
+    }
+  }, []);
+
+  return {
+    selectedModelId,
+    selectedModel: selectedModel.model,
+    selectedProvider: selectedModel.group,
+    providerGroups,
+    selectModel,
+    providerStatuses,
+  };
+}