@decido/shell 1.0.0

package/src/components/shell/AppShell.tsx

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

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

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

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

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

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