@decido/shell 1.0.0 → 4.0.2

package/src/components/shell/AppShell.tsx

@@ -1,139 +0,0 @@
-import React, { useEffect } from 'react';
-import { DecidoStudioProps } from '@decido/engine';
-import { NetworkProvider } from '../../contexts/NetworkProvider';
-import { useLayoutStore } from '../../store/useLayoutStore';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useMorphologyStore } from '../../store/useMorphologyStore';
-import { registerUIBridge } from '@decido/engine';
-import { PluginRegistry } from '@decido/core';
-import { DialoguePlugin, LogicPlugin, UIStatePlugin, SubflowPlugin, EndSubflowPlugin, UIRendererPlugin } from '@decido/engine';
-import PlaygroundDecidoChannel from '../shells/DecidoShell';
-import { GlobalOverlays } from './GlobalOverlays';
-import { useShellShortcuts } from '../../hooks/useShellShortcuts';
-
-/**
- * AppShell — The global OS-level container.
- * 
- * Responsibilities:
- * 1. UIBridge registration (connects @decido/engine → UI stores)
- * 2. Plugin initialization (Inversión de Control)
- * 3. NetworkProvider context
- * 4. Layout context via useLayoutStore
- * 5. Our GlobalOverlays (Cmd+K Omnibar)
- * 6. Renders OS-level overlays via renderOverlays prop (injected by host)
- * 
- * NOTE: OS-level overlays (HitlModal, TransientLayer, Omnibar legacy,
- * PluginMarketplace, etc.) are passed via renderOverlays prop to avoid
- * circular dependency between @decido/studio and @decido/shell.
- */
-
-// ── UIBridge ──
-let _uiBridgeRegistered = false;
-
-function ensureUIBridge() {
-    if (_uiBridgeRegistered) return;
-    _uiBridgeRegistered = true;
-
-    registerUIBridge({
-        addLog: (msg, type) => usePlaygroundStore.getState().addLog(msg, type),
-        pushMorphStage: (stage) => {
-            useMorphologyStore.getState().pushStage(stage as any);
-            useLayoutStore.getState().pushStage(stage as any);
-        },
-        clearMorphStages: () => {
-            useMorphologyStore.getState().clearStages();
-            useLayoutStore.getState().clearStages();
-        },
-        showCanvas: (visible) => {
-            usePlaygroundStore.getState().setShowCanvas(visible);
-            useLayoutStore.getState().setShowCanvas(visible);
-        },
-        setSidebarOpen: (open) => {
-            usePlaygroundStore.getState().setIsSidebarOpen(open);
-            useLayoutStore.getState().setIsSidebarOpen(open);
-        },
-        setDemoState: (state) => usePlaygroundStore.getState().setDemoState(state),
-        getActiveBrand: () => usePlaygroundStore.getState().prototypeBrand,
-        setActiveBrand: (brand: string) => usePlaygroundStore.getState().setPrototypeBrand(brand),
-        addChatMessage: (msg) => usePlaygroundStore.getState().addChatMessage(msg as any),
-        isMuted: () => usePlaygroundStore.getState().isMuted,
-        getSelectedVoice: () => usePlaygroundStore.getState().selectedVoice,
-    });
-}
-
-// ── Plugins ──
-let _pluginsInitialized = false;
-
-function ensurePlugins() {
-    if (_pluginsInitialized) return;
-    _pluginsInitialized = true;
-
-    if (!PluginRegistry.get('ai:dialogue')) PluginRegistry.register(DialoguePlugin);
-    if (!PluginRegistry.get('mcp:execute')) PluginRegistry.register(LogicPlugin);
-    if (!PluginRegistry.get('ui:state')) PluginRegistry.register(UIStatePlugin);
-    if (!PluginRegistry.get('core:subflow')) PluginRegistry.register(SubflowPlugin);
-    if (!PluginRegistry.get('core:return')) PluginRegistry.register(EndSubflowPlugin);
-    if (!PluginRegistry.get('ui:render')) PluginRegistry.register(UIRendererPlugin);
-}
-
-export interface AppShellProps extends DecidoStudioProps {
-    children?: React.ReactNode;
-    /**
-     * Render function for OS-level overlays.
-     * Injected by the host to avoid circular dependency.
-     * Should return: HitlApprovalModal, Omnibar, TransientLayer,
-     * SwarmOnboarding, PluginMarketplace, UpdaterOverlay, etc.
-     */
-    renderOverlays?: () => React.ReactNode;
-}
-
-export function AppShell({
-    aiProvider,
-    VoiceWidget,
-    config,
-    socketInstance,
-    children,
-    renderOverlays,
-}: AppShellProps) {
-    ensureUIBridge();
-    ensurePlugins();
-    useShellShortcuts();
-
-    // Sync useLayoutStore ↔ usePlaygroundStore during transition
-    useEffect(() => {
-        const unsub = usePlaygroundStore.subscribe((state) => {
-            const layout = useLayoutStore.getState();
-            if (state.isCreatorMode !== layout.isCreatorMode) {
-                layout.setIsCreatorMode(state.isCreatorMode);
-            }
-            if (state.showCanvas !== layout.showCanvas) {
-                layout.setShowCanvas(state.showCanvas);
-            }
-            if (state.isSidebarOpen !== layout.isSidebarOpen) {
-                layout.setIsSidebarOpen(state.isSidebarOpen);
-            }
-        });
-        return unsub;
-    }, []);
-
-    return (
-        <NetworkProvider socketInstance={socketInstance} isConnected={!!socketInstance?.connected}>
-            {/* ═══ OS-Level Overlays (injected by host) ═══ */}
-            {renderOverlays?.()}
-
-            {/* ═══ Global Overlays (our Cmd+K Omnibar) ═══ */}
-            <GlobalOverlays />
-
-            {/* ═══ Main Application Content ═══ */}
-            <PlaygroundDecidoChannel
-                aiProvider={aiProvider}
-                VoiceWidget={VoiceWidget}
-                config={config}
-                socketInstance={socketInstance}
-            />
-            {children}
-        </NetworkProvider>
-    );
-}
-
-export default AppShell;

package/src/components/shell/ArtifactBar.tsx

@@ -1,97 +0,0 @@
-import React from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { X, FileCode, FileText, Globe, Layers, Plus, MessageSquare } from 'lucide-react';
-import { useMorphInstanceStore } from '../../store/useMorphInstanceStore';
-import type { MorphArtifact, ShellType } from '../../store/useShellRegistry';
-
-/**
- * ArtifactBar — Sub-artifact tab strip inside MorphShell.
- * 
- * Displays artifacts within a MorphInstance (like Gemini Canvas file tabs).
- * Each artifact can be a different version or different file.
- * 
- * Example: Chat pushes v1 index.html, v2 index.html, style.css
- *          ArtifactBar shows: [v1 index.html] [v2 index.html ●] [style.css]
- */
-
-const SHELL_ICONS: Record<string, React.ComponentType<any>> = {
-    'markdown': FileText,
-    'iframe': Globe,
-    'shell-vscode': FileCode,
-    'shell-canvas': Layers,
-    'shell-omnichannel': MessageSquare,
-};
-
-function getArtifactIcon(shellType: ShellType): React.ComponentType<any> {
-    return SHELL_ICONS[shellType] || FileCode;
-}
-
-interface ArtifactBarProps {
-    instanceId: string;
-    className?: string;
-}
-
-export function ArtifactBar({ instanceId, className = '' }: ArtifactBarProps) {
-    const instance = useMorphInstanceStore((s) => s.getInstance(instanceId));
-    const setActiveArtifact = useMorphInstanceStore((s) => s.setActiveArtifact);
-    const removeArtifact = useMorphInstanceStore((s) => s.removeArtifact);
-
-    if (!instance || instance.artifacts.length <= 1) return null;
-
-    return (
-        <div className={`flex items-center gap-0.5 px-2 py-1 bg-surface-primary border-b border-border-subtle overflow-x-auto scrollbar-hide ${className}`}>
-            <AnimatePresence mode="popLayout">
-                {instance.artifacts.map((artifact, index) => {
-                    const isActive = index === instance.activeArtifactIndex;
-                    const Icon = getArtifactIcon(artifact.shellType);
-
-                    return (
-                        <motion.button
-                            key={artifact.id}
-                            layout
-                            initial={{ opacity: 0, scale: 0.9, width: 0 }}
-                            animate={{ opacity: 1, scale: 1, width: 'auto' }}
-                            exit={{ opacity: 0, scale: 0.9, width: 0 }}
-                            onClick={() => setActiveArtifact(instanceId, index)}
-                            className={`
-                                flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-medium
-                                transition-colors whitespace-nowrap group relative shrink-0
-                                ${isActive
-                                    ? 'bg-surface-glass text-text-primary border border-border-default'
-                                    : 'text-text-muted hover:text-text-primary hover:bg-surface-glass border border-transparent'
-                                }
-                            `}
-                        >
-                            <Icon size={10} className={isActive ? 'text-cyan-400' : 'text-text-muted'} />
-                            <span className="truncate max-w-[100px]">{artifact.name}</span>
-                            {artifact.version > 1 && (
-                                <span className="text-[8px] text-text-muted font-mono">v{artifact.version}</span>
-                            )}
-
-                            {instance.artifacts.length > 1 && (
-                                <span
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        removeArtifact(instanceId, artifact.id);
-                                    }}
-                                    className="w-3.5 h-3.5 rounded flex items-center justify-center
-                                        opacity-0 group-hover:opacity-100 hover:bg-surface-glass hover:text-red-400
-                                        transition-all ml-0.5"
-                                >
-                                    <X size={8} />
-                                </span>
-                            )}
-
-                            {isActive && (
-                                <motion.div
-                                    layoutId="artifact-indicator"
-                                    className="absolute bottom-0 left-1 right-1 h-[1.5px] bg-cyan-500/50 rounded-full"
-                                />
-                            )}
-                        </motion.button>
-                    );
-                })}
-            </AnimatePresence>
-        </div>
-    );
-}

package/src/components/shell/BootScreen.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { motion } from 'motion/react';
-
-/**
- * BootScreen — Shown while Decido Studio initializes.
- * Extracted from PlaygroundDecidoChannel to reduce its weight.
- */
-export function BootScreen() {
-    return (
-        <div className="h-dvh w-full bg-surface-primary flex flex-col items-center justify-center font-mono text-cyan-400 relative overflow-hidden">
-            <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"></div>
-            <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="z-10 flex flex-col items-center">
-                <div className="w-16 h-16 rounded-full border-[3px] border-cyan-500/30 border-t-cyan-400 animate-spin mb-6 shadow-[0_0_30px_rgba(34,211,238,0.2)]"></div>
-                <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.5 }} className="text-sm tracking-widest uppercase mb-2 font-bold">Inicializando yo.decido</motion.div>
-                <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 1 }} className="text-xs text-text-muted">Cargando módulos de IA y telemetría...</motion.div>
-            </motion.div>
-        </div>
-    );
-}

package/src/components/shell/CenterComposite.tsx

@@ -1,87 +0,0 @@
-import React, { useRef, useEffect } from 'react';
-import { Panel, Group as PanelGroup, Separator as PanelResizeHandle } from 'react-resizable-panels';
-import { PlaygroundChat } from '../playground/PlaygroundChat';
-import { PlaygroundTerminal } from '../playground/PlaygroundTerminal';
-import { PlaygroundBottomControls } from '../playground/PlaygroundBottomControls';
-import { PlaygroundErrorBoundary } from '../playground/PlaygroundErrorBoundary';
-import { DebugPanel } from '../playground/DebugPanel';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useDebugPanelStore } from '../../store/useDebugPanelStore';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundCommander } from '../../hooks/usePlaygroundCommander';
-import { useUIStateListener } from '../../hooks/listeners/useUIStateListener';
-import { useScreenRecorder } from '../../hooks/useScreenRecorder';
-import { usePlaybackEngine } from '../../hooks/usePlaybackEngine';
-import { useStudioConfig } from '../../hooks/useStudioConfig';
-import { useExportDSD } from '../../hooks/useExportDSD';
-import { useFullscreen } from '../../hooks/useFullscreen';
-
-interface CenterCompositeProps { aiProvider?: any; VoiceWidget?: any; config?: any; }
-
-/**
- * CenterComposite — Self-contained center content compositor.
- * Composes: Chat + Terminal + BottomControls + DebugPanel.
- * Reads all state from stores/hooks; parent only provides runtime deps.
- */
-export function CenterComposite({ aiProvider, VoiceWidget, config }: CenterCompositeProps) {
-    // ─── Store state ───
-    const store = usePlaygroundStore();
-    const { step, selectedProfile, prototypeBrand, setPrototypeBrand, isMuted, setIsMuted,
-        selectedVoice, setSelectedVoice, isVoiceActive, setIsVoiceActive,
-        isTerminalOpen, setIsTerminalOpen, isCreatorMode, setIsCreatorMode,
-        inputValue, setInputValue, logs, setLogs } = store;
-
-    const logsEndRef = useRef<HTMLDivElement>(null);
-    useEffect(() => { if (logsEndRef.current) logsEndRef.current.scrollIntoView({ behavior: 'smooth' }); }, [logs]);
-
-    // ─── Hooks (self-contained) ───
-    const timelines = useTimelineStore(s => s.timelines);
-    const { handleGeneratePlayground, isGenerating } = usePlaygroundCommander(aiProvider);
-    const { demoState, showCanvas, setShowCanvas } = useUIStateListener();
-    const { currentTime, isPlaying, setIsPlaying, playbackSpeed, setPlaybackSpeed, seekTime, resetSimulation } = usePlaybackEngine(prototypeBrand);
-    const { safeConfig, activeConfig, suggestions, setSuggestions, dynamicPersona, authAvailableLicenses, handleProfileSelect } = useStudioConfig(config, prototypeBrand);
-    const { handleExport } = useExportDSD();
-    const { isFullscreen, toggleFullscreen } = useFullscreen();
-    const { isRecording } = useScreenRecorder();
-    const debugIsOpen = useDebugPanelStore(s => s.isOpen);
-
-    return (
-        <div className="flex flex-col h-full relative min-w-0 min-h-0">
-            <PanelGroup orientation="vertical" className="flex-1 min-h-0 min-w-0">
-                <Panel id="chat-area" defaultSize={debugIsOpen ? 65 : 100} className="flex flex-col relative min-h-0 min-w-0">
-                    <div className={`flex-1 z-10 flex flex-col relative min-h-0 min-w-0 ${isCreatorMode ? 'overflow-y-auto p-4 md:p-6 pb-48 justify-end' : 'overflow-hidden'}`}>
-                        <PlaygroundErrorBoundary fallbackName="Motor de Chat">
-                            <PlaygroundChat step={step} selectedProfile={selectedProfile} authAvailableLicenses={authAvailableLicenses} handleProfileSelect={handleProfileSelect}
-                                activeConfig={activeConfig} demoState={demoState} suggestions={suggestions} setInputValue={setInputValue} isGenerating={isGenerating} config={safeConfig}
-                                isCreatorMode={isCreatorMode} handleGeneratePlayground={handleGeneratePlayground} isVoiceActive={isVoiceActive} setIsVoiceActive={setIsVoiceActive}
-                                VoiceWidget={VoiceWidget} dynamicPersona={dynamicPersona} setSuggestions={setSuggestions as any} selectedVoice={selectedVoice} showCanvas={showCanvas} setShowCanvas={setShowCanvas} />
-                        </PlaygroundErrorBoundary>
-                    </div>
-                    {isCreatorMode && (
-                        <PlaygroundErrorBoundary fallbackName="Terminal de Logs">
-                            <PlaygroundTerminal isOpen={isTerminalOpen} setIsOpen={setIsTerminalOpen} logs={logs} setLogs={setLogs} logsEndRef={logsEndRef} />
-                        </PlaygroundErrorBoundary>
-                    )}
-                    <PlaygroundBottomControls step={step} isVoiceActive={isVoiceActive} setIsVoiceActive={setIsVoiceActive}
-                        currentTime={currentTime} seekTime={seekTime} playbackSpeed={playbackSpeed} setPlaybackSpeed={setPlaybackSpeed}
-                        dynamicTimelines={timelines} prototypeBrand={prototypeBrand} setPrototypeBrand={setPrototypeBrand}
-                        inputValue={inputValue} setInputValue={setInputValue} isGenerating={isGenerating} handleGeneratePlayground={handleGeneratePlayground}
-                        isPlaying={isPlaying} setIsPlaying={setIsPlaying} handleResetPlayground={resetSimulation}
-                        showCanvas={showCanvas} setShowCanvas={setShowCanvas} isTerminalOpen={isTerminalOpen} setIsTerminalOpen={setIsTerminalOpen}
-                        isMuted={isMuted} setIsMuted={setIsMuted} selectedVoice={selectedVoice} setSelectedVoice={setSelectedVoice}
-                        isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen} demoState={demoState} isRecording={isRecording}
-                        handleExport={handleExport} dynamicPersona={dynamicPersona} setSuggestions={setSuggestions as any}
-                        isCreatorMode={isCreatorMode} setIsCreatorMode={setIsCreatorMode} VoiceWidget={VoiceWidget} config={safeConfig} />
-                </Panel>
-                {debugIsOpen && (
-                    <>
-                        <PanelResizeHandle className="h-2 hover:bg-cyan-500/20 active:bg-cyan-500/30 transition-colors cursor-row-resize z-40 relative group flex items-center justify-center">
-                            <div className="h-[2px] w-12 bg-surface-glass rounded-full group-hover:bg-cyan-500 transition-colors" />
-                        </PanelResizeHandle>
-                        <Panel id="debug-panel" defaultSize={35} minSize={15}><DebugPanel /></Panel>
-                    </>
-                )}
-            </PanelGroup>
-        </div>
-    );
-}

package/src/components/shell/CodeEditorPanel.tsx

@@ -1,88 +0,0 @@
-/**
- * CodeEditorPanel — Inline code editor for HTML/CSS/JS with live sync.
- *
- * Sprint AJ: View and edit generated code. Changes sync to iframe in real-time.
- */
-import React, { useState, useCallback, useEffect, useRef } from 'react';
-import { useMorphInstanceStore } from '../../store/useMorphInstanceStore';
-
-type CodeTab = 'html' | 'css' | 'js';
-
-const TAB_META: Record<CodeTab, { label: string; color: string }> = {
-    html: { label: 'HTML', color: '#e44d26' },
-    css:  { label: 'CSS',  color: '#2965f1' },
-    js:   { label: 'JS',   color: '#f7df1e' },
-};
-
-interface CodeEditorPanelProps {
-    code: { html: string; css: string; js: string };
-    onCodeChange: (code: { html: string; css: string; js: string }) => void;
-}
-
-export const CodeEditorPanel = React.memo(function CodeEditorPanel({ 
-    code = { html: '', css: '', js: '' }, 
-    onCodeChange 
-}: CodeEditorPanelProps) {
-    const [activeTab, setActiveTab] = useState<CodeTab>('html');
-    const textareaRef = useRef<HTMLTextAreaElement>(null);
-    const [localCode, setLocalCode] = useState(code);
-
-    // Sync external changes (e.g., from Gemini)
-    useEffect(() => {
-        setLocalCode(code);
-    }, [code]);
-
-    const handleChange = useCallback((value: string) => {
-        const updated = { ...localCode, [activeTab]: value };
-        setLocalCode(updated);
-        // Debounced sync to parent — propagate after user stops typing
-        onCodeChange(updated);
-    }, [activeTab, localCode, onCodeChange]);
-
-    const currentValue = activeTab === 'html' ? localCode.html : activeTab === 'css' ? localCode.css : localCode.js;
-    const lineCount = (currentValue || '').split('\n').length;
-
-    return (
-        <div className="flex flex-col h-full bg-surface-tertiary border-l border-border-subtle overflow-hidden" style={{ minWidth: 280 }}>
-            {/* Tabs */}
-            <div className="flex items-center gap-0.5 px-2 py-1.5 bg-surface-secondary border-b border-border-subtle shrink-0">
-                {(['html', 'css', 'js'] as CodeTab[]).map(tab => (
-                    <button
-                        key={tab}
-                        onClick={() => setActiveTab(tab)}
-                        className={`px-3 py-1 rounded text-[10px] font-mono uppercase tracking-wider transition-colors ${
-                            activeTab === tab
-                                ? 'bg-surface-glass text-text-primary'
-                                : 'text-text-muted hover:text-text-primary hover:bg-surface-glass'
-                        }`}
-                    >
-                        <span className="inline-block w-2 h-2 rounded-full mr-1.5" style={{ background: TAB_META[tab].color }} />
-                        {TAB_META[tab].label}
-                    </button>
-                ))}
-                <span className="ml-auto text-[9px] text-text-muted font-mono">{lineCount} líneas</span>
-            </div>
-
-            {/* Editor */}
-            <div className="flex-1 overflow-auto relative" style={{ fontFamily: 'ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace' }}>
-                <div className="flex min-h-full">
-                    {/* Line numbers */}
-                    <div className="select-none text-right pr-3 pl-3 py-3 text-[11px] text-text-muted leading-normal shrink-0 bg-surface-tertiary border-r border-border-subtle">
-                        {Array.from({ length: lineCount }, (_, i) => (
-                            <div key={i}>{i + 1}</div>
-                        ))}
-                    </div>
-                    {/* Textarea */}
-                    <textarea
-                        ref={textareaRef}
-                        value={currentValue}
-                        onChange={e => handleChange(e.target.value)}
-                        spellCheck={false}
-                        className="flex-1 resize-none bg-transparent text-text-primary text-[11px] leading-normal p-3 outline-hidden min-h-full"
-                        style={{ tabSize: 2 }}
-                    />
-                </div>
-            </div>
-        </div>
-    );
-});

package/src/components/shell/GlobalOverlays.tsx

@@ -1,228 +0,0 @@
-import React, { useEffect, useCallback } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import { Search, X, Command, Package, ArrowRight, Grid3X3, Maximize2, RotateCcw, Layout, MessageSquare } from 'lucide-react';
-import { useLayoutStore, type SlotComponentId, type RegionId } from '../../store/useLayoutStore';
-import { useMorphologyStore } from '../../store/useMorphologyStore';
-import { useManifestRegistry } from '@decido/plugin-engine';
-
-/**
- * GlobalOverlays — Centralized overlay system managed by AppShell.
- * 
- * Contains:
- * - Omnibar (Cmd+K): Global command palette with slot/preset/mode actions
- * - Plugin Marketplace (future): Browse and install plugins
- * 
- * These overlays live ABOVE the LayoutGrid, never affected by MorphShell.
- */
-
-export function GlobalOverlays() {
-    const [isOmnibarOpen, setIsOmnibarOpen] = React.useState(false);
-    const [omnibarQuery, setOmnibarQuery] = React.useState('');
-    const inputRef = React.useRef<HTMLInputElement>(null);
-
-    const allManifests = useManifestRegistry((s) => s.manifests);
-    
-    // Find all widgets with defaultZone === 'overlay' from all loaded manifests
-    const overlayWidgets = React.useMemo(() => {
-        const overlays: { id: string, component: any }[] = [];
-        Object.values(allManifests).forEach((manifest: any) => {
-            if (manifest.widgets) {
-                manifest.widgets.forEach((w: any) => {
-                    if (w.defaultZone === 'overlay' && w.component) {
-                        overlays.push({ id: w.id, component: w.component });
-                    }
-                });
-            }
-        });
-        return overlays;
-    }, [allManifests]);
-
-    // ── Cmd+K global shortcut ──
-    useEffect(() => {
-        const handler = (e: KeyboardEvent) => {
-            if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-                e.preventDefault();
-                setIsOmnibarOpen((prev) => !prev);
-            }
-            if (e.key === 'Escape' && isOmnibarOpen) {
-                setIsOmnibarOpen(false);
-            }
-        };
-        window.addEventListener('keydown', handler);
-        return () => window.removeEventListener('keydown', handler);
-    }, [isOmnibarOpen]);
-
-    // Auto-focus input when opened
-    useEffect(() => {
-        if (isOmnibarOpen && inputRef.current) {
-            setTimeout(() => inputRef.current?.focus(), 100);
-        }
-    }, [isOmnibarOpen]);
-
-    const handleSelect = useCallback((action: string) => {
-        setIsOmnibarOpen(false);
-        setOmnibarQuery('');
-        
-        const layout = useLayoutStore.getState();
-        
-        // Slot assignment actions: "slot:R3:graph-editor"
-        if (action.startsWith('slot:')) {
-            const [_, region, component] = action.split(':');
-            layout.setSlot(region as RegionId, (component || null) as SlotComponentId);
-            return;
-        }
-        
-        // Prefix actions: "preset:creator"
-        if (action.startsWith('preset:')) {
-            const preset = action.split(':')[1];
-            layout.resetLayout(preset);
-            return;
-        }
-
-        if (action === 'open:omnichannel') {
-            useMorphologyStore.getState().pushStage({
-                id: `omni-${Date.now()}`,
-                name: 'Bandeja Omnicanal',
-                shellType: 'shell-omnichannel',
-                data: {}
-            } as any);
-            return;
-        }
-        
-        switch (action) {
-            case 'toggle-creator':
-                layout.setIsCreatorMode(!layout.isCreatorMode);
-                break;
-            case 'toggle-sidebar':
-                layout.setIsSidebarOpen(!layout.isSidebarOpen);
-                break;
-            case 'toggle-canvas':
-                layout.setShowCanvas(!layout.showCanvas);
-                break;
-            case 'toggle-immersive':
-                layout.setIsImmersive(!layout.isImmersive);
-                break;
-            case 'reset-layout':
-                layout.resetLayout('player');
-                break;
-            default:
-                break;
-        }
-    }, []);
-
-    // Quick actions for the omnibar
-    const quickActions = [
-        // ── Mode & View ──
-        { id: 'toggle-creator', label: 'Toggle Creator Mode', shortcut: '⌘⇧C', icon: <Command size={14} />, category: 'Modo' },
-        { id: 'toggle-sidebar', label: 'Toggle Sidebar', shortcut: '⌘B', icon: <ArrowRight size={14} />, category: 'Modo' },
-        { id: 'toggle-canvas', label: 'Toggle Canvas', shortcut: '⌘⇧V', icon: <Package size={14} />, category: 'Modo' },
-        { id: 'toggle-immersive', label: 'Modo Inmersivo', shortcut: '⌘⇧F', icon: <Maximize2 size={14} />, category: 'Modo' },
-        // ── Presets ──
-        { id: 'preset:creator', label: 'Preset: Creator', shortcut: '', icon: <Layout size={14} />, category: 'Layout' },
-        { id: 'preset:player', label: 'Preset: Player', shortcut: '', icon: <Layout size={14} />, category: 'Layout' },
-        { id: 'preset:minimal', label: 'Preset: Minimal', shortcut: '', icon: <Layout size={14} />, category: 'Layout' },
-        { id: 'preset:studio', label: 'Preset: Studio', shortcut: '', icon: <Layout size={14} />, category: 'Layout' },
-        { id: 'reset-layout', label: 'Reset Layout', shortcut: '', icon: <RotateCcw size={14} />, category: 'Layout' },
-        // ── Slot Assignments ──
-        { id: 'slot:R1:chat', label: 'R1 → Chat', shortcut: '', icon: <Grid3X3 size={14} />, category: 'Slots' },
-        { id: 'slot:R1:debug', label: 'R1 → Debug', shortcut: '', icon: <Grid3X3 size={14} />, category: 'Slots' },
-        { id: 'slot:R3:graph-editor', label: 'R3 → Graph Editor', shortcut: '', icon: <Grid3X3 size={14} />, category: 'Slots' },
-        { id: 'slot:R3:canvas', label: 'R3 → Canvas', shortcut: '', icon: <Grid3X3 size={14} />, category: 'Slots' },
-        { id: 'slot:R4:terminal', label: 'R4 → Terminal', shortcut: '', icon: <Grid3X3 size={14} />, category: 'Slots' },
-        { id: 'slot:R4:debug', label: 'R4 → Debug', shortcut: '', icon: <Grid3X3 size={14} />, category: 'Slots' },
-        // ── Custom Tools ──
-        { id: 'open:omnichannel', label: 'Abrir Bandeja Omnicanal (WhatsApp)', shortcut: '', icon: <MessageSquare size={14} />, category: 'Herramientas' },
-    ];
-
-    const filteredActions = omnibarQuery
-        ? quickActions.filter((a) =>
-            a.label.toLowerCase().includes(omnibarQuery.toLowerCase())
-        )
-        : quickActions;
-
-    return (
-        <>
-            {/* ── OMNIBAR OVERLAY ── */}
-            <AnimatePresence>
-                {isOmnibarOpen && (
-                    <>
-                        {/* Backdrop */}
-                        <motion.div
-                            initial={{ opacity: 0 }}
-                            animate={{ opacity: 1 }}
-                            exit={{ opacity: 0 }}
-                            onClick={() => setIsOmnibarOpen(false)}
-                            className="fixed inset-0 bg-surface-overlay backdrop-blur-xs z-9998"
-                        />
-
-                        {/* Omnibar Panel */}
-                        <motion.div
-                            initial={{ opacity: 0, y: -20, scale: 0.95 }}
-                            animate={{ opacity: 1, y: 0, scale: 1 }}
-                            exit={{ opacity: 0, y: -20, scale: 0.95 }}
-                            transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-                            className="fixed top-[15%] left-1/2 -translate-x-1/2 w-[540px] max-w-[90vw] z-9999
-                                bg-surface-tertiary border border-border-default rounded-2xl shadow-2xl overflow-hidden"
-                        >
-                            {/* Search Input */}
-                            <div className="flex items-center gap-3 px-4 py-3 border-b border-border-subtle">
-                                <Search size={18} className="text-text-muted shrink-0" />
-                                <input
-                                    ref={inputRef}
-                                    value={omnibarQuery}
-                                    onChange={(e) => setOmnibarQuery(e.target.value)}
-                                    placeholder="Buscar comandos, slots, plugins..."
-                                    className="flex-1 bg-transparent text-text-primary text-sm outline-hidden placeholder:text-text-muted"
-                                />
-                                <kbd className="text-[10px] text-text-muted bg-surface-glass px-1.5 py-0.5 rounded border border-border-default font-mono">
-                                    ESC
-                                </kbd>
-                            </div>
-
-                            {/* Actions List */}
-                            <div className="max-h-[300px] overflow-y-auto p-2">
-                                {filteredActions.map((action) => (
-                                    <button
-                                        key={action.id}
-                                        onClick={() => handleSelect(action.id)}
-                                        className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm
-                                            text-text-secondary hover:text-text-primary hover:bg-surface-glass transition-colors group"
-                                    >
-                                        <span className="w-6 h-6 rounded-lg bg-surface-glass flex items-center justify-center
-                                            group-hover:bg-cyan-500/10 group-hover:text-cyan-400 transition-colors">
-                                            {action.icon}
-                                        </span>
-                                        <span className="flex-1 text-left">{action.label}</span>
-                                        {action.shortcut && (
-                                            <kbd className="text-[10px] text-text-muted font-mono">{action.shortcut}</kbd>
-                                        )}
-                                    </button>
-                                ))}
-                                {filteredActions.length === 0 && (
-                                    <div className="text-center py-8 text-text-muted text-sm">
-                                        No se encontraron comandos para "{omnibarQuery}"
-                                    </div>
-                                )}
-                            </div>
-
-                            {/* Footer */}
-                            <div className="flex items-center justify-between px-4 py-2 border-t border-border-subtle text-[10px] text-text-muted">
-                                <span>⌘K para abrir · ESC para cerrar</span>
-                                <span className="flex items-center gap-1">
-                                    <span className="w-1.5 h-1.5 rounded-full bg-emerald-500/60" />
-                                    Decido OS
-                                </span>
-                            </div>
-                        </motion.div>
-                    </>
-                )}
-            </AnimatePresence>
-
-            {/* ── PLUGIN OVERLAYS ── */}
-            {overlayWidgets.map(w => {
-                const Component = w.component;
-                return <Component key={w.id} />;
-            })}
-        </>
-    );
-}