@decido/shell 1.0.0 → 4.0.2

package/src/components/shells/DecidoShell.tsx

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