@decido/shell 1.0.0

package/src/components/shells/DecidoShell.tsx

@@ -0,0 +1,447 @@
+import React, { useEffect, useMemo, useCallback } from 'react';
+import { PlaygroundHeader } from '../playground/PlaygroundHeader';
+import { useTriggerRouter } from '@decido/engine';
+import { McpLifecycleManager } from '../../hooks/useMcpClient';
+import { PlaygroundAppSidebar, SidebarMenuSection } from '../playground/PlaygroundAppSidebar';
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+import { LayoutGrid } from '../shell/LayoutGrid';
+import { useLayoutStore } from '../../store/useLayoutStore';
+import { DecidoStudioProps } from '@decido/engine';
+import { BootScreen } from '../shell/BootScreen';
+import { useLoggerBridge } from '../../hooks/useLoggerBridge';
+import { useBootSequence } from '../../hooks/useBootSequence';
+import { MorphShell } from '../shell/MorphShell';
+import { useStudioConfig } from '../../hooks/useStudioConfig';
+import { useUIStateListener } from '../../hooks/listeners/useUIStateListener';
+import { useWhatsAppListener } from '../../hooks/listeners/useWhatsAppListener';
+import { pluginWidgetStore } from '../widgets/WidgetSlotPanel';
+import type { ServerDrivenNode } from '../widgets/WidgetRenderer';
+import { useManifestRegistry, registerManifestLoader } from '@decido/plugin-engine';
+import { SentinelUiManifest, SENTINEL_IFRAME_URLS } from '../../../../../plugins/engineering/sentinel-ui/manifest';
+import { ChameleonPlugin } from '../../../../../plugins/official/chameleon/src';
+// ── Register well-known manifest loaders (dev mode) ──
+// In production, manifests are loaded via Module Federation from the plugin's URL.
+// In dev, we import them directly and register as well-known loaders.
+registerManifestLoader('sentinel-ui', async () => ({
+    manifest: {
+        ...SentinelUiManifest,
+        baseUrl: 'http://localhost:3333',
+        iframeUrls: {
+            'sentinel-telemetry': '/',
+            'sentinel-errors': '/errors',
+            'sentinel-replays': '/replays',
+        },
+    } as any,
+    iframeUrls: SENTINEL_IFRAME_URLS,
+}));
+
+registerManifestLoader('macia-chameleon-agent', async () => ({
+    manifest: ChameleonPlugin.manifest as any,
+}));
+
+/**
+ * PlaygroundDecidoChannel — Thin Orchestrator.
+ *
+ * Post-refactor responsibilities:
+ * 1. Boot gate (BootScreen)
+ * 2. Global side-effects (logger, triggers, MCP)
+ * 3. Layout slot sync (creator/player mode → R3 slot)
+ * 4. Sidebar desktop (push layout via flex)
+ * 5. Header + Immersive mode controls
+ * 6. Delegates center content to CenterComposite
+ *
+ * NetworkProvider is provided by AppShell (parent).
+ */
+export default function PlaygroundDecidoChannel({ aiProvider, VoiceWidget, config }: DecidoStudioProps = {}) {
+    // 1. State selectors
+    const isBooting = usePlaygroundStore((s) => s.isBooting);
+    const isSidebarOpen = usePlaygroundStore((s) => s.isSidebarOpen);
+    const setIsSidebarOpen = usePlaygroundStore((s) => s.setIsSidebarOpen);
+    const isCreatorMode = usePlaygroundStore((s) => s.isCreatorMode);
+    const creatorViewMode = usePlaygroundStore((s) => s.creatorViewMode);
+    const prototypeBrand = usePlaygroundStore((s) => s.prototypeBrand);
+    const isImmersive = useLayoutStore((s) => s.isImmersive);
+    const setIsImmersive = useLayoutStore((s) => s.setIsImmersive);
+
+    // 2. Global side-effects
+    useLoggerBridge();
+    useBootSequence();
+    useTriggerRouter();
+
+    // 3. Config (Header modelLabel only)
+    const { activeConfig } = useStudioConfig(config, prototypeBrand);
+    const { showCanvas } = useUIStateListener();
+    useWhatsAppListener();
+
+    // ── 4b. Registry-driven multi-manifest plugin system ──
+    // PluginManifestRegistry auto-loads manifests when plugins are installed
+    // from the Hub and unloads them when removed. Supports Module Federation.
+
+    const allManifests = useManifestRegistry(s => s.manifests);
+    const manifestLoading = useManifestRegistry(s => s.loading);
+    const syncWithRegistry = useManifestRegistry(s => s.syncWithRegistry);
+    const getManifest = useManifestRegistry(s => s.getManifest);
+
+    // ── Persistence: restore widgets on mount (from any loaded manifest) ──
+    React.useEffect(() => {
+        const manifests = Object.values(allManifests);
+        if (manifests.length === 0) return;
+
+        const restored = pluginWidgetStore.restoreFromPersistence((widgetId: string) => {
+            // Resolve SDUI schema from ANY loaded manifest
+            if (widgetId.startsWith('sdui-')) {
+                const manifestWidgetId = widgetId.replace('sdui-', '');
+                for (const m of manifests) {
+                    const mw = m.widgets?.find((w: any) => w.id === manifestWidgetId);
+                    if (mw?.schema) return mw.schema as ServerDrivenNode;
+                }
+            }
+            return undefined;
+        });
+        if (restored && pluginWidgetStore.size > 0) {
+            useLayoutStore.getState().setSlot('R3', 'widget-panel');
+        }
+    }, [allManifests]);
+
+    /** Open a widget from sidebar click — registry-driven */
+    const openPluginView = useCallback((pluginId: string, widgetId: string, label: string) => {
+        const manifest = getManifest(pluginId);
+        if (!manifest) {
+            console.warn(`[Plugin] No manifest loaded for ${pluginId}`);
+            return;
+        }
+        console.log(`[Plugin] Opening widgets for ${pluginId}:${widgetId}`);
+
+        // Find widget schema from manifest
+        const manifestWidget = manifest.widgets?.find((w: any) => w.id === widgetId);
+
+        // Option A: SDUI native widget (from manifest schema)
+        if (manifestWidget?.schema) {
+            pluginWidgetStore.register({
+                id: `sdui-${widgetId}`,
+                pluginId,
+                title: `${label} (SDUI)`,
+                icon: '🟢',
+                slot: 'tab',
+                schema: manifestWidget.schema as ServerDrivenNode,
+                order: 1,
+            });
+        }
+
+        // Option B: iframe widget (from manifest iframeUrls or baseUrl)
+        const iframeUrl = manifest.iframeUrls?.[widgetId];
+        if (iframeUrl !== undefined) {
+            const fullUrl = iframeUrl.startsWith('http')
+                ? iframeUrl
+                : `${manifest.baseUrl || ''}${iframeUrl}`;
+            pluginWidgetStore.register({
+                id: `iframe-${widgetId}`,
+                pluginId,
+                title: `${label} (iframe)`,
+                icon: '🔵',
+                slot: 'tab',
+                url: fullUrl,
+                order: 2,
+            });
+        }
+
+        // Option C/D: Native React component
+        if (manifestWidget?.component) {
+            pluginWidgetStore.register({
+                id: `react-${widgetId}`,
+                pluginId,
+                title: `${label}`,
+                icon: '⚡',
+                slot: 'tab',
+                component: manifestWidget.component,
+                order: 3,
+            });
+        }
+
+        if (manifestWidget?.schema) {
+            pluginWidgetStore.setActive(`sdui-${widgetId}`);
+        } else if (manifestWidget?.component) {
+            pluginWidgetStore.setActive(`react-${widgetId}`);
+        } else {
+            pluginWidgetStore.setActive(`iframe-${widgetId}`);
+        }
+
+        useLayoutStore.getState().setSlot('R3', 'widget-panel');
+    }, [getManifest]);
+
+    // ── Global Command Listener for SDUI/Chat Intents ──
+    useEffect(() => {
+        const handleOpenPlugin = (e: any) => {
+            const pid = e.detail?.pluginId;
+            const view = e.detail?.view;
+            if (pid === 'chameleon') {
+                // Open the Live Studio plugin widget
+                // If a specific view was requested, we override the default widget
+                let targetViewId = e.detail?.viewId;
+                
+                if (!targetViewId) {
+                    if (view === 'discovery_admin' || view === 'whatsapp_studio') targetViewId = 'chameleon-discovery-view';
+                    else if (view === 'enterprise_kanban') targetViewId = 'chameleon-kanban-view';
+                    else targetViewId = 'chameleon-discovery-view'; // Fallback
+                }
+                
+                openPluginView('macia-chameleon-agent', targetViewId, view || 'WhatsApp Studio');
+                
+                // Keep backwards compatibility for inner chameleon events if needed
+                if (view) {
+                    setTimeout(() => window.dispatchEvent(new CustomEvent('chameleon:set-view', { detail: { view } })), 100);
+                }
+            }
+        };
+
+        const handleChangeView = (e: any) => {
+            const view = e.detail?.view?.toLowerCase();
+            if (!view) return;
+
+            if (view.includes('kanban') || view.includes('producción') || view.includes('produccion')) {
+                openPluginView('macia-chameleon-agent', 'chameleon-kanban-view', 'Kanban de Producción');
+            } else if (view.includes('excel') || view.includes('ventas') || view.includes('datos')) {
+                openPluginView('macia-chameleon-agent', 'chameleon-sheet-view', 'Google Sheets');
+            } else if (view.includes('chat') || view.includes('whatsapp') || view.includes('studio') || view.includes('discovery')) {
+                openPluginView('macia-chameleon-agent', 'chameleon-discovery-view', 'WhatsApp Studio');
+            }
+        };
+
+        window.addEventListener('studio:open-plugin', handleOpenPlugin);
+        window.addEventListener('studio:change-view', handleChangeView);
+        
+        return () => {
+            window.removeEventListener('studio:open-plugin', handleOpenPlugin);
+            window.removeEventListener('studio:change-view', handleChangeView);
+        };
+    }, [openPluginView]);
+
+    const readInstalledPlugins = React.useCallback((): { name: string; url: string }[] => {
+        try {
+            const v10 = localStorage.getItem('decido-plugin-registry-v10');
+            const v9 = localStorage.getItem('decido-plugin-registry-v9');
+            const stored = v10 || v9;
+            let registry = [];
+            if (stored) {
+                const parsed = JSON.parse(stored);
+                registry = parsed?.state?.registry || [];
+            }
+            
+            const active = registry
+                .filter((e: any) => e.enabled)
+                .map((e: any) => ({ name: e.name, url: e.url || '' }));
+
+            // Force inject Chameleon as a pre-installed built-in
+            if (!active.some((a: any) => a.name === 'macia-chameleon-agent')) {
+                active.push({ name: 'macia-chameleon-agent', url: '' });
+            }
+
+            return active;
+        } catch (err) { console.error('[ManifestRegistry] Error reading plugin registry:', err); }
+        return [{ name: 'macia-chameleon-agent', url: '' }];
+    }, []);
+
+    const [installedEntries, setInstalledEntries] = React.useState<{ name: string; url: string }[]>(readInstalledPlugins);
+
+    // Poll for changes in installed plugins
+    useEffect(() => {
+        setInstalledEntries(readInstalledPlugins());
+        const onStorage = () => {
+            const newEntries = readInstalledPlugins();
+            setInstalledEntries(prev => {
+                // Prevent deep re-renders (800ms UI blocks) by bailing out early
+                // if the active installations array hasn't functionally changed.
+                if (JSON.stringify(prev) === JSON.stringify(newEntries)) return prev;
+                return newEntries;
+            });
+        };
+        window.addEventListener('storage', onStorage);
+        window.addEventListener('focus', onStorage);
+        const interval = setInterval(onStorage, 5000);
+        return () => {
+            window.removeEventListener('storage', onStorage);
+            window.removeEventListener('focus', onStorage);
+            clearInterval(interval);
+        };
+    }, [readInstalledPlugins]);
+
+    // Sync: when installed plugins change, load/unload manifests
+    useEffect(() => {
+        if (installedEntries.length > 0) {
+            syncWithRegistry(installedEntries);
+        }
+    }, [installedEntries, syncWithRegistry]);
+
+    // Build sidebar sections from ALL loaded manifests
+    const pluginSidebarSections: SidebarMenuSection[] = useMemo(() => {
+        const sections: SidebarMenuSection[] = [];
+        const manifests = Object.values(allManifests);
+
+        for (const manifest of manifests) {
+            // Check if this manifest's plugin is still installed
+            const isInstalled = installedEntries.some(e =>
+                e.name === manifest.id || e.name.includes(manifest.id) || manifest.id.includes(e.name)
+            );
+            if (!isInstalled) continue;
+
+            if (manifest.sidebarItems?.length) {
+                // Group by section
+                const sectionMap = new Map<string, { title: string; items: typeof manifest.sidebarItems }>();
+                for (const item of manifest.sidebarItems!) {
+                    const key = item.section || 'default';
+                    if (!sectionMap.has(key)) {
+                        sectionMap.set(key, { title: item.sectionTitle || manifest.name, items: [] });
+                    }
+                    sectionMap.get(key)!.items.push(item);
+                }
+
+                for (const [sectionKey, group] of sectionMap) {
+                    sections.push({
+                        id: `plugin-${manifest.id}-${sectionKey}`,
+                        title: group.title,
+                        collapsible: true,
+                        items: group.items.map(item => ({
+                            id: `${manifest.id}-${item.id}`,
+                            label: item.label,
+                            onClick: () => {
+                                openPluginView(
+                                    manifest.id,
+                                    item.targetWidget || '',
+                                    item.label,
+                                );
+                            },
+                        })),
+                    });
+                }
+            } else {
+                // Plugin with no sidebar items — show a minimal entry
+                sections.push({
+                    id: `plugin-${manifest.id}`,
+                    title: `🧩 ${manifest.name}`,
+                    collapsible: true,
+                    items: manifest.widgets.map(w => ({
+                        id: `${manifest.id}-${w.id}`,
+                        label: w.name,
+                        onClick: () => openPluginView(manifest.id, w.id, w.name),
+                    })),
+                });
+            }
+        }
+
+        // Loading indicators
+        for (const loadingId of manifestLoading) {
+            sections.push({
+                id: `loading-${loadingId}`,
+                title: '⏳ Loading...',
+                collapsible: false,
+                items: [{ id: 'loading', label: loadingId, onClick: () => {} }],
+            });
+        }
+
+        // ── WASM Plugins Section ──
+        // Detect Tauri environment and offer WASM plugin controls
+        if (typeof window !== 'undefined' && '__TAURI_INTERNALS__' in window) {
+            sections.push({
+                id: 'wasm-plugins',
+                title: '⚡ WASM Plugins',
+                collapsible: true,
+                items: [
+                    {
+                        id: 'wasm-demo-math',
+                        label: 'demo-math-plugin',
+                        onClick: () => {
+                            // Register a headless widget for the WASM plugin
+                            pluginWidgetStore.register({
+                                id: 'wasm-demo-math',
+                                pluginId: 'wasm-native',
+                                title: 'Demo Math (WASM)',
+                                icon: '⚡',
+                                slot: 'tab',
+                                scriptUrl: 'wasm://demo-math-plugin/run',
+                                order: 10,
+                            });
+                            pluginWidgetStore.setActive('wasm-demo-math');
+                            useLayoutStore.getState().setSlot('R3', 'widget-panel');
+                        },
+                    },
+                ],
+            });
+        }
+
+        // Fallback for installed plugins with no loaded manifest and no URL
+        if (sections.length === 0 && installedEntries.length > 0) {
+            for (const entry of installedEntries) {
+                if (!entry.url && !allManifests[entry.name]) {
+                    sections.push({
+                        id: `plugin-${entry.name}`,
+                        title: '🔌 Plugin Instalado',
+                        collapsible: true,
+                        items: [{ id: 'info', label: entry.name.substring(0, 24), onClick: () => {} }],
+                    });
+                }
+            }
+        }
+
+        console.log('[ManifestRegistry] Sidebar sections:', sections.length, sections.map(s => s.title));
+        return sections;
+    }, [allManifests, installedEntries, openPluginView, manifestLoading]);
+
+    // 4. Slot sync: mode/canvas → LayoutGrid R3
+    // widget-panel is the proper slot for plugins; shell modes take precedence
+    useEffect(() => {
+        const layout = useLayoutStore.getState();
+        const currentSlot = layout.slots?.R3;
+
+        // If widget-panel is active and user opened a plugin, don't overwrite
+        if (currentSlot === 'widget-panel') return;
+
+        if (isCreatorMode) {
+            layout.setSlot('R3', creatorViewMode === 'timeline' ? 'timeline-editor' : 'graph-editor');
+        } else {
+            layout.setSlot('R3', null);
+        }
+    }, [isCreatorMode, creatorViewMode]);
+
+    // ── Boot Gate ──
+    if (isBooting) return <BootScreen />;
+
+    return (
+        <>
+            <McpLifecycleManager />
+            <div className="h-full w-full bg-surface-primary flex font-sans relative overflow-hidden text-text-primary">
+                <div className="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E')] opacity-[0.15] mix-blend-overlay pointer-events-none z-0" />
+
+                {/* Mobile Sidebar Drawer */}
+                <div className="md:hidden">
+                    <PlaygroundAppSidebar isOpen={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} menuSections={pluginSidebarSections} />
+                </div>
+
+                <div className="flex-1 flex h-full relative z-20">
+                    {/* Desktop Sidebar (push layout) */}
+                    <div className={`hidden md:flex shrink-0 h-full transition-all duration-300 ease-in-out overflow-hidden bg-surface-secondary ${isSidebarOpen && !isImmersive ? 'w-[280px] min-w-[280px]' : 'w-0 min-w-0'}`}>
+                        <PlaygroundAppSidebar isOpen={isSidebarOpen && !isImmersive} onClose={() => setIsSidebarOpen(false)} menuSections={pluginSidebarSections} />
+                    </div>
+
+                    {/* Main Content */}
+                    <div className="flex-1 flex flex-col h-full min-w-0 overflow-hidden relative">
+                        {!isImmersive && <PlaygroundHeader modelLabel={activeConfig?.greetingText || 'yo.decido'} />}
+
+                        {isImmersive && (
+                            <button
+                                onClick={() => setIsImmersive(false)}
+                                className="fixed top-3 right-3 z-900 px-3 py-1.5 rounded-full bg-surface-overlay backdrop-blur-md border border-border-default text-[10px] text-text-secondary hover:text-text-primary hover:bg-surface-overlay transition-all opacity-0 hover:opacity-100 focus:opacity-100"
+                                title="Salir de modo inmersivo (⌘⇧F)"
+                            >
+                                ESC · Salir inmersivo
+                            </button>
+                        )}
+
+                        <LayoutGrid slotProps={{ aiProvider, VoiceWidget, config }}>
+                            <MorphShell />
+                        </LayoutGrid>
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+}