@decido/shell 1.0.0 → 4.0.2

package/src/core/PluginContext.tsx

@@ -1,141 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

@@ -1,82 +0,0 @@
-/**
- * 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

@@ -1,144 +0,0 @@
-/**
- * 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,
-  };
-}