@decido/shell 1.0.0

package/src/components/shell/ShellNexusPreview.tsx

@@ -0,0 +1,458 @@
+/**
+ * ShellNexusPreview — AI-powered HTML preview shell.
+ *
+ * Renders HTML/CSS/JS in a sandboxed iframe with:
+ * - Tailwind CDN auto-injection
+ * - Device preview (Desktop / Tablet / Mobile)
+ * - Toolbar with reload, open-in-new-tab, device switcher
+ * - Sprint AH: Element Inspector (hover highlight → click select → postMessage)
+ *
+ * Based on NexusAI Studio's PreviewPanel architecture, adapted
+ * for the Decido Studio shell registry.
+ */
+import React, { useState, useRef, useMemo, useCallback, useEffect } from 'react';
+import {
+    Monitor, Tablet, Smartphone, RotateCcw, ExternalLink,
+    Maximize2, Minimize2, MousePointer2, Rocket, Copy, Check, Loader2, Code2,
+    Undo2, Redo2
+} from 'lucide-react';
+import type { ShellProps } from '../../store/useShellRegistry';
+import { useNexusaiDeploy } from '../../hooks/useNexusaiDeploy';
+import { useMorphInstanceStore } from '../../store/useMorphInstanceStore';
+import { CodeEditorPanel } from './CodeEditorPanel';
+import { TemplateLibrary } from './TemplateLibrary';
+
+type DeviceView = 'desktop' | 'tablet' | 'mobile';
+
+const DEVICE_DIMS: Record<DeviceView, { w: string; h: string; label: string }> = {
+    desktop: { w: '100%', h: '100%', label: 'Desktop' },
+    tablet:  { w: '768px', h: '1024px', label: 'Tablet' },
+    mobile:  { w: '375px', h: '667px', label: 'Mobile' },
+};
+
+const DEVICE_ICONS: Record<DeviceView, typeof Monitor> = {
+    desktop: Monitor,
+    tablet: Tablet,
+    mobile: Smartphone,
+};
+
+export const ShellNexusPreview: React.FC<ShellProps> = ({ artifacts, activeArtifactIndex, data }) => {
+    const iframeRef = useRef<HTMLIFrameElement>(null);
+    const [device, setDevice] = useState<DeviceView>('desktop');
+    const [iframeKey, setIframeKey] = useState(Date.now());
+    const [isFullscreen, setIsFullscreen] = useState(false);
+    const [inspectMode, setInspectMode] = useState(false);
+    const [selectedSelector, setSelectedSelector] = useState<string | null>(null);
+    const [copied, setCopied] = useState(false);
+    const [showCodeEditor, setShowCodeEditor] = useState(false);
+    const deployHook = useNexusaiDeploy();
+
+    // Extract code from data or active artifact
+    const code = useMemo(() => {
+        const src = data || artifacts?.[activeArtifactIndex ?? 0]?.data || {};
+        const html = src.html || src.content || '';
+        const css = src.css || src.styles || '';
+        const js = src.javascript || src.js || '';
+        return { html, css, js };
+    }, [data, artifacts, activeArtifactIndex]);
+
+    // Listen for postMessage from iframe (element inspector)
+    useEffect(() => {
+        const handler = (e: MessageEvent) => {
+            if (e.data?.type === 'DECIDO_ELEMENT_SELECTED') {
+                setSelectedSelector(e.data.selector || null);
+                // Expose to window.__DECIDO__ for usePlaygroundCommander
+                if ((window as any).__DECIDO__) {
+                    (window as any).__DECIDO__.selectedElementSelector = e.data.selector || null;
+                }
+            }
+        };
+        window.addEventListener('message', handler);
+        return () => window.removeEventListener('message', handler);
+    }, []);
+
+    // Sprint AN: Local keyboard shortcuts for Web Preview
+    const [showShortcuts, setShowShortcuts] = useState(false);
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
+            const meta = e.metaKey || e.ctrlKey;
+            if (!meta) return;
+
+            // Cmd+I → Toggle inspector
+            if (e.code === 'KeyI' && !e.shiftKey) {
+                e.preventDefault();
+                setInspectMode(v => !v);
+                return;
+            }
+            // Cmd+E → Toggle code editor
+            if (e.code === 'KeyE' && !e.shiftKey) {
+                e.preventDefault();
+                setShowCodeEditor(v => !v);
+                return;
+            }
+            // Cmd+D → Deploy
+            if (e.code === 'KeyD' && !e.shiftKey) {
+                e.preventDefault();
+                deployHook.deploy();
+                return;
+            }
+            // Cmd+/ → Show shortcuts help
+            if (e.key === '/') {
+                e.preventDefault();
+                setShowShortcuts(v => !v);
+                return;
+            }
+        };
+        window.addEventListener('keydown', handler);
+        return () => window.removeEventListener('keydown', handler);
+    }, [deployHook]);
+
+    // Toggle inspect mode inside iframe
+    useEffect(() => {
+        if (iframeRef.current?.contentWindow) {
+            iframeRef.current.contentWindow.postMessage({ type: 'DECIDO_SET_INSPECT', enabled: inspectMode }, '*');
+        }
+    }, [inspectMode, iframeKey]);
+
+    // Build srcDoc with Tailwind CDN + link safety + element inspector
+    const srcDoc = useMemo(() => {
+        // Sanitize JS to prevent premature </script> closure
+        const safeJs = (code.js || '').replace(/<\/script/gi, '<\\/script');
+        return `
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <base target="_blank">
+    <script src="https://cdn.tailwindcss.com"><\/script>
+    <style>
+        *, *::before, *::after { box-sizing: border-box; }
+        body { 
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
+            margin: 0; 
+            background: #fff; 
+            min-height: 100vh;
+            color: #1a1a1a;
+        }
+        html, body { width: 100%; height: 100%; }
+        .__decido-hover { outline: 2px dashed #06b6d4 !important; outline-offset: 2px; cursor: crosshair !important; }
+        .__decido-selected { outline: 2px solid #06b6d4 !important; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(6,182,212,0.15) !important; }
+        ${code.css}
+    </style>
+</head>
+<body>
+    ${code.html}
+    <script>
+        try { ${safeJs} } catch(e) { console.error('[Preview]', e); }
+    <\/script>
+    <script>
+        // Link interceptor
+        document.addEventListener('click', function(e) {
+            var a = e.target.closest('a');
+            if (!a) return;
+            var href = a.getAttribute('href') || '';
+            if (href.startsWith('#')) return;
+            if (href.startsWith('javascript:')) { e.preventDefault(); return; }
+            e.preventDefault();
+            if (href && href !== '#') window.open(href, '_blank', 'noopener,noreferrer');
+        }, true);
+
+        // Element Inspector
+        var _inspectEnabled = false;
+        var _hoveredEl = null;
+        var _selectedEl = null;
+
+        function _getSelector(el) {
+            if (el.id) return '#' + el.id;
+            var path = [];
+            while (el && el !== document.body && el !== document.documentElement) {
+                var tag = el.tagName.toLowerCase();
+                if (el.className && typeof el.className === 'string') {
+                    var cls = el.className.split(/\s+/).filter(function(c) { return !c.startsWith('__decido'); }).slice(0, 2).join('.');
+                    if (cls) tag += '.' + cls;
+                }
+                var parent = el.parentElement;
+                if (parent) {
+                    var siblings = Array.from(parent.children).filter(function(c) { return c.tagName === el.tagName; });
+                    if (siblings.length > 1) tag += ':nth-child(' + (Array.from(parent.children).indexOf(el) + 1) + ')';
+                }
+                path.unshift(tag);
+                el = parent;
+                if (path.length >= 3) break;
+            }
+            return path.join(' > ');
+        }
+
+        document.addEventListener('mouseover', function(e) {
+            if (!_inspectEnabled) return;
+            if (_hoveredEl) _hoveredEl.classList.remove('__decido-hover');
+            _hoveredEl = e.target;
+            if (_hoveredEl !== _selectedEl) _hoveredEl.classList.add('__decido-hover');
+        });
+        document.addEventListener('mouseout', function(e) {
+            if (_hoveredEl) _hoveredEl.classList.remove('__decido-hover');
+        });
+        document.addEventListener('click', function(e) {
+            if (!_inspectEnabled) return;
+            e.preventDefault();
+            e.stopPropagation();
+            if (_selectedEl) _selectedEl.classList.remove('__decido-selected');
+            _selectedEl = e.target;
+            _selectedEl.classList.add('__decido-selected');
+            _hoveredEl = null;
+            var sel = _getSelector(_selectedEl);
+            window.parent.postMessage({ type: 'DECIDO_ELEMENT_SELECTED', selector: sel, tagName: _selectedEl.tagName }, '*');
+        }, true);
+
+        window.addEventListener('message', function(e) {
+            if (e.data && e.data.type === 'DECIDO_SET_INSPECT') {
+                _inspectEnabled = e.data.enabled;
+                if (!_inspectEnabled) {
+                    if (_hoveredEl) _hoveredEl.classList.remove('__decido-hover');
+                    if (_selectedEl) _selectedEl.classList.remove('__decido-selected');
+                    _hoveredEl = null; _selectedEl = null;
+                }
+                document.body.style.cursor = _inspectEnabled ? 'crosshair' : '';
+            }
+        });
+    <\/script>
+</body>
+</html>`;
+    }, [code]);
+
+    const handleReload = useCallback(() => setIframeKey(Date.now()), []);
+
+    const handleOpenInTab = useCallback(() => {
+        const win = window.open();
+        if (win) { win.document.write(srcDoc); win.document.close(); }
+    }, [srcDoc]);
+
+    const handleToggleInspect = useCallback(() => {
+        const next = !inspectMode;
+        setInspectMode(next);
+        if (!next) setSelectedSelector(null);
+    }, [inspectMode]);
+
+    const dims = DEVICE_DIMS[device];
+    const hasContent = !!(code.html?.trim());
+
+    return (
+        <div className={`w-full h-full flex flex-col bg-surface-primary overflow-hidden ${isFullscreen ? 'fixed inset-0 z-9999' : ''}`}>
+            {/* ─── Toolbar ─── */}
+            <div className="flex items-center justify-between px-2 py-1.5 bg-surface-secondary border-b border-border-subtle text-[10px] text-text-muted select-none shrink-0">
+                <div className="flex items-center gap-1.5">
+                    {/* Traffic lights */}
+                    <div className="flex gap-1 px-1">
+                        <span className="w-2.5 h-2.5 rounded-full bg-red-500/80" />
+                        <span className="w-2.5 h-2.5 rounded-full bg-yellow-500/80" />
+                        <span className="w-2.5 h-2.5 rounded-full bg-green-500/80" />
+                    </div>
+                    <button onClick={handleReload} className="p-1 rounded hover:bg-surface-glass transition-colors" title="Recargar">
+                        <RotateCcw size={12} />
+                    </button>
+                    <button
+                        onClick={() => useMorphInstanceStore.getState().undo()}
+                        disabled={!useMorphInstanceStore.getState().canUndo()}
+                        className={`p-1 rounded transition-colors ${useMorphInstanceStore.getState().canUndo() ? 'hover:bg-surface-glass text-text-secondary' : 'text-text-muted cursor-not-allowed'}`}
+                        title="Deshacer"
+                    >
+                        <Undo2 size={12} />
+                    </button>
+                    <button
+                        onClick={() => useMorphInstanceStore.getState().redo()}
+                        disabled={!useMorphInstanceStore.getState().canRedo()}
+                        className={`p-1 rounded transition-colors ${useMorphInstanceStore.getState().canRedo() ? 'hover:bg-surface-glass text-text-secondary' : 'text-text-muted cursor-not-allowed'}`}
+                        title="Rehacer"
+                    >
+                        <Redo2 size={12} />
+                    </button>
+                    <span className="px-2 py-0.5 bg-surface-overlay rounded text-[9px] font-mono">{dims.w === '100%' ? 'Adaptable' : dims.w} × {dims.h === '100%' ? '100%' : dims.h}</span>
+                </div>
+
+                {/* Device Switcher */}
+                <div className="flex items-center gap-0.5">
+                    {(['desktop', 'tablet', 'mobile'] as DeviceView[]).map(d => {
+                        const Icon = DEVICE_ICONS[d];
+                        return (
+                            <button
+                                key={d}
+                                onClick={() => setDevice(d)}
+                                className={`p-1.5 rounded transition-colors ${device === d ? 'bg-surface-glass text-text-primary' : 'hover:bg-surface-glass text-text-muted hover:text-text-primary'}`}
+                                title={DEVICE_DIMS[d].label}
+                            >
+                                <Icon size={13} />
+                            </button>
+                        );
+                    })}
+                </div>
+
+                {/* Actions */}
+                <div className="flex items-center gap-1">
+                    <button
+                        onClick={handleToggleInspect}
+                        className={`p-1 rounded transition-colors ${inspectMode ? 'bg-cyan-500/20 text-cyan-400' : 'hover:bg-surface-glass text-text-muted'}`}
+                        title={inspectMode ? 'Desactivar inspector' : 'Seleccionar elemento'}
+                    >
+                        <MousePointer2 size={12} />
+                    </button>
+                    <button
+                        onClick={() => setShowCodeEditor(!showCodeEditor)}
+                        className={`p-1 rounded transition-colors ${showCodeEditor ? 'bg-violet-500/20 text-violet-400' : 'hover:bg-surface-glass text-text-muted'}`}
+                        title={showCodeEditor ? 'Ocultar código' : 'Ver / editar código'}
+                    >
+                        <Code2 size={12} />
+                    </button>
+                    <button
+                        onClick={() => { deployHook.deploy(); }}
+                        disabled={!hasContent || deployHook.status === 'deploying'}
+                        className={`p-1 rounded transition-colors ${deployHook.status === 'deploying' ? 'text-amber-400 animate-pulse' : hasContent ? 'hover:bg-emerald-500/10 text-text-muted hover:text-emerald-400' : 'text-text-muted cursor-not-allowed'}`}
+                        title="Desplegar preview"
+                    >
+                        {deployHook.status === 'deploying' ? <Loader2 size={12} className="animate-spin" /> : <Rocket size={12} />}
+                    </button>
+                    <button onClick={() => setIsFullscreen(!isFullscreen)} className="p-1 rounded hover:bg-surface-glass transition-colors" title={isFullscreen ? 'Salir fullscreen' : 'Fullscreen'}>
+                        {isFullscreen ? <Minimize2 size={12} /> : <Maximize2 size={12} />}
+                    </button>
+                    <button onClick={handleOpenInTab} className="p-1 rounded hover:bg-surface-glass transition-colors" title="Abrir en nueva pestaña">
+                        <ExternalLink size={12} />
+                    </button>
+                </div>
+            </div>
+
+            {/* ─── Deploy status bar ─── */}
+            {deployHook.status !== 'idle' && (
+                <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border-subtle text-[10px] shrink-0" style={{ background: deployHook.status === 'success' ? 'rgba(16,185,129,0.08)' : deployHook.status === 'error' ? 'rgba(239,68,68,0.08)' : 'rgba(245,158,11,0.08)' }}>
+                    {deployHook.status === 'deploying' && (
+                        <>
+                            <Loader2 size={10} className="text-amber-400 animate-spin" />
+                            <span className="text-amber-300 font-mono">Desplegando... {deployHook.progress}%</span>
+                            <div className="flex-1 h-1 bg-surface-glass rounded-full overflow-hidden">
+                                <div className="h-full bg-amber-400 transition-all duration-300 rounded-full" style={{ width: `${deployHook.progress}%` }} />
+                            </div>
+                        </>
+                    )}
+                    {deployHook.status === 'success' && deployHook.url && (
+                        <>
+                            <Check size={10} className="text-emerald-400" />
+                            <a href={deployHook.url} target="_blank" rel="noopener noreferrer" className="text-emerald-300 font-mono flex-1 truncate hover:underline">{deployHook.url.length > 60 ? deployHook.url.slice(0, 60) + '...' : deployHook.url}</a>
+                            <button onClick={() => { deployHook.copyUrl(); setCopied(true); setTimeout(() => setCopied(false), 1500); }} className="text-text-secondary hover:text-text-primary transition-colors" title="Copiar URL">
+                                {copied ? <Check size={10} className="text-emerald-400" /> : <Copy size={10} />}
+                            </button>
+                            <button onClick={deployHook.reset} className="text-text-muted hover:text-text-primary">✕</button>
+                        </>
+                    )}
+                    {deployHook.status === 'error' && (
+                        <>
+                            <span className="text-red-400">⚠</span>
+                            <span className="text-red-300 font-mono flex-1">{deployHook.error}</span>
+                            <button onClick={deployHook.reset} className="text-text-muted hover:text-text-primary">✕</button>
+                        </>
+                    )}
+                </div>
+            )}
+
+            {/* ─── Selected element badge ─── */}
+            {selectedSelector && (
+                <div className="flex items-center gap-2 px-3 py-1.5 bg-cyan-500/10 border-b border-cyan-500/20 text-[10px] shrink-0">
+                    <MousePointer2 size={10} className="text-cyan-400" />
+                    <code className="text-cyan-300 font-mono flex-1 truncate">{selectedSelector}</code>
+                    <span className="text-text-muted">Escribe en el chat para modificar este elemento</span>
+                    <button onClick={() => { setSelectedSelector(null); setInspectMode(false); }} className="text-text-muted hover:text-text-primary">✕</button>
+                </div>
+            )}
+
+            {/* ─── Preview Area ─── */}
+            <div className="flex-1 flex overflow-hidden">
+                {/* Preview */}
+                <div className={`flex items-center justify-center overflow-auto p-2 ${showCodeEditor ? 'w-1/2' : 'flex-1'}`} style={{ background: 'repeating-conic-gradient(#1a1a1b 0% 25%, #141415 0% 50%) 0 0 / 20px 20px' }}>
+                    {hasContent ? (
+                        <div
+                            className="bg-white shadow-2xl transition-all duration-300 overflow-hidden w-full h-full"
+                            style={{
+                                maxWidth: showCodeEditor ? '100%' : dims.w,
+                                maxHeight: showCodeEditor ? '100%' : dims.h,
+                                border: device !== 'desktop' ? '6px solid #333' : '1px solid #2a2a2a',
+                                borderRadius: device !== 'desktop' ? '1.5rem' : '4px',
+                            }}
+                        >
+                            <iframe
+                                ref={iframeRef}
+                                key={iframeKey}
+                                srcDoc={srcDoc}
+                                title="NexusAI Preview"
+                                sandbox="allow-scripts allow-same-origin allow-forms allow-modals"
+                                className="w-full h-full border-0"
+                            />
+                        </div>
+                    ) : (
+                        <TemplateLibrary onSelect={(tpl) => {
+                            const inst = useMorphInstanceStore.getState().getActiveInstance();
+                            if (inst) {
+                                useMorphInstanceStore.getState().upsertInstance({
+                                    ...inst,
+                                    data: { ...inst.data, html: tpl.html, css: tpl.css, javascript: tpl.js },
+                                });
+                            } else {
+                                const id = 'tpl-' + Date.now();
+                                useMorphInstanceStore.getState().upsertInstance({
+                                    id, shellType: 'nexusai-preview', sourceChatId: '_default', label: 'Template',
+                                    data: { html: tpl.html, css: tpl.css, javascript: tpl.js },
+                                });
+                                useMorphInstanceStore.getState().setActiveInstance(id);
+                            }
+                        }} />
+                    )}
+                </div>
+
+                {/* Code Editor */}
+                {showCodeEditor && (
+                    <div className="w-1/2 shrink-0">
+                        <CodeEditorPanel
+                            code={code}
+                            onCodeChange={(updated) => {
+                                // Sync edits to active MorphInstance
+                                const inst = useMorphInstanceStore.getState().getActiveInstance();
+                                if (inst) {
+                                    useMorphInstanceStore.getState().upsertInstance({
+                                        ...inst,
+                                        data: { ...inst.data, html: updated.html, css: updated.css, javascript: updated.js },
+                                    });
+                                }
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
+
+            {/* Sprint AN: Shortcuts Help Modal */}
+            {showShortcuts && (
+                <div className="absolute inset-0 z-50 flex items-center justify-center bg-surface-overlay backdrop-blur-xs" onClick={() => setShowShortcuts(false)}>
+                    <div className="bg-surface-tertiary border border-border-default rounded-2xl p-6 max-w-xs w-full shadow-2xl" onClick={e => e.stopPropagation()}>
+                        <h3 className="text-sm font-bold text-text-primary mb-4 flex items-center gap-2">⌨️ Atajos de Teclado</h3>
+                        <div className="space-y-2 text-[11px]">
+                            {[
+                                ['⌘ I', 'Inspector de elementos'],
+                                ['⌘ E', 'Editor de código'],
+                                ['⌘ D', 'Desplegar preview'],
+                                ['⌘ Z', 'Deshacer (topología)'],
+                                ['⌘ ⇧ Z', 'Rehacer (topología)'],
+                                ['⌘ /', 'Esta ayuda'],
+                                ['⌘ B', 'Toggle sidebar'],
+                                ['⌘ ⇧ C', 'Toggle modo Creator'],
+                                ['⌘ ⇧ V', 'Toggle canvas'],
+                            ].map(([keys, desc]) => (
+                                <div key={keys} className="flex items-center justify-between">
+                                    <span className="text-text-secondary">{desc}</span>
+                                    <kbd className="px-2 py-0.5 bg-surface-glass border border-border-default rounded text-text-primary font-mono text-[10px]">{keys}</kbd>
+                                </div>
+                            ))}
+                        </div>
+                        <button onClick={() => setShowShortcuts(false)} className="w-full mt-4 py-2 bg-surface-glass hover:bg-surface-glass rounded-xl text-xs text-text-secondary transition">Cerrar</button>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/shell/SlotRenderer.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import type { SlotComponentId } from '../../store/useLayoutStore';
+
+/**
+ * SlotRenderer — maps a SlotComponentId to its lazy-loaded React component.
+ * 
+ * This is the registry that connects slot configuration in useLayoutStore
+ * to actual React components. Components are lazy-loaded to avoid
+ * pulling in heavy dependencies (Three.js, ReactFlow, etc.) upfront.
+ */
+
+// ── Lazy Component Registry ──
+const WorkspaceChatLazy = React.lazy(() =>
+    import('./CenterComposite').then(m => ({ default: m.CenterComposite }))
+);
+const PlaygroundChat = React.lazy(() =>
+    import('../playground/PlaygroundChat').then(m => ({ default: m.PlaygroundChat }))
+);
+const DebugPanel = React.lazy(() =>
+    import('../playground/DebugPanel').then(m => ({ default: m.DebugPanel }))
+);
+const PlaygroundTerminal = React.lazy(() =>
+    import('../playground/PlaygroundTerminal').then(m => ({ default: m.PlaygroundTerminal }))
+);
+const MorphShellLazy = React.lazy(() =>
+    import('./MorphShell').then(m => ({ default: m.MorphShell }))
+);
+const ReactFlowEditor = React.lazy(() =>
+    import('../studio/ReactFlowEditor').then(m => ({ default: m.ReactFlowEditor }))
+);
+const TimelineEditor = React.lazy(() =>
+    import('../studio/TimelineEditor').then(m => ({ default: m.TimelineEditor }))
+);
+const PlaygroundAppSidebar = React.lazy(() =>
+    import('../playground/PlaygroundAppSidebar').then(m => ({ default: m.PlaygroundAppSidebar }))
+);
+const WidgetSlotPanelLazy = React.lazy(() =>
+    import('../widgets/WidgetSlotPanel').then(m => ({ default: m.WidgetSlotPanel }))
+);
+
+// ── Fallback ──
+const SlotFallback = () => (
+    <div className="w-full h-full flex items-center justify-center">
+        <div className="w-6 h-6 border-2 border-cyan-500 border-t-transparent rounded-full animate-spin" />
+    </div>
+);
+
+// ── Slot Component Map ──
+// Each entry returns a React element. Props are passed down via context
+// or store subscriptions, not directly (keeps SlotRenderer simple).
+// 'widget-panel' renders plugin widgets via WidgetRegistry (replaces old 'plugin-viewer' hack)
+const SLOT_COMPONENTS: Record<string, React.LazyExoticComponent<any>> = {
+    'workspace-chat': WorkspaceChatLazy,
+    'chat': PlaygroundChat,
+    'debug': DebugPanel,
+    'terminal': PlaygroundTerminal,
+    'canvas': MorphShellLazy,
+    'graph-editor': ReactFlowEditor,
+    'timeline-editor': TimelineEditor,
+    'app-sidebar': PlaygroundAppSidebar,
+    'widget-panel': WidgetSlotPanelLazy,
+};
+
+interface SlotRendererProps {
+    /** Which component to render */
+    componentId: SlotComponentId;
+    /** Additional props to pass through */
+    slotProps?: Record<string, any>;
+    /** CSS class for the container */
+    className?: string;
+}
+
+/**
+ * Renders the component assigned to a layout slot.
+ * Returns null if componentId is null (empty slot).
+ */
+export const SlotRenderer = React.memo(function SlotRenderer({
+    componentId,
+    slotProps = {},
+    className = '',
+}: SlotRendererProps) {
+    if (!componentId) return null;
+
+    const Component = SLOT_COMPONENTS[componentId];
+    if (!Component) {
+        return (
+            <div className={`w-full h-full flex items-center justify-center text-text-muted text-xs font-mono ${className}`}>
+                Unknown slot: {componentId}
+            </div>
+        );
+    }
+
+    return (
+        <React.Suspense fallback={<SlotFallback />}>
+            <div className={`w-full h-full overflow-hidden ${className}`}>
+                <Component {...slotProps} />
+            </div>
+        </React.Suspense>
+    );
+});
+
+/**
+ * Register a custom component for use in slots.
+ * Plugins can call this to make their components available in the layout.
+ */
+export function registerSlotComponent(id: string, component: React.LazyExoticComponent<any> | React.ComponentType<any>) {
+    SLOT_COMPONENTS[id] = component as any;
+}
+
+/**
+ * Get available slot component IDs (for UI dropdowns / configurator).
+ */
+export function getAvailableSlotComponents(): string[] {
+    return Object.keys(SLOT_COMPONENTS);
+}

package/src/components/shell/TabBar.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { X, Plus } from 'lucide-react';
+import { useLayoutStore, type LayoutTab } from '../../store/useLayoutStore';
+import { useMorphInstanceStore } from '../../store/useMorphInstanceStore';
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+
+/**
+ * TabBar — Horizontal tab strip for the T2 zone.
+ * 
+ * Displays tabs from useLayoutStore.tabs
+ * Each tab can be activated, closed, and dragged.
+ * New tabs appear when MorphShell pushes a stage.
+ * 
+ * Clicking a tab syncs: LayoutStore ↔ MorphInstanceStore ↔ PlaygroundStore(activeChatId)
+ */
+
+interface TabBarProps {
+    className?: string;
+}
+
+export function TabBar({ className = '' }: TabBarProps) {
+    const tabs = useLayoutStore((s) => s.tabs);
+    const activeTabId = useLayoutStore((s) => s.activeTabId);
+    const setActiveTab = useLayoutStore((s) => s.setActiveTab);
+    const removeTab = useLayoutStore((s) => s.removeTab);
+
+    const handleTabClick = React.useCallback((tabId: string) => {
+        setActiveTab(tabId);
+
+        // Sync with MorphInstance: tab IDs follow 'morph-{instanceId}' convention
+        if (tabId.startsWith('morph-')) {
+            const instanceId = tabId.replace('morph-', '');
+            useMorphInstanceStore.getState().setActiveInstance(instanceId);
+
+            // Sync with Chat: find chat instance with matching sourceChatId
+            const instance = useMorphInstanceStore.getState().instances.get(instanceId);
+            if (instance?.sourceChatId) {
+                usePlaygroundStore.getState().setActiveChatId(instance.sourceChatId);
+            }
+        }
+    }, [setActiveTab]);
+
+    if (tabs.length === 0) 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">
+                {tabs.map((tab) => (
+                    <motion.button
+                        key={tab.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={() => handleTabClick(tab.id)}
+                        className={`
+                            flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-[11px] font-medium
+                            transition-colors whitespace-nowrap group relative shrink-0
+                            ${activeTabId === tab.id
+                                ? 'bg-surface-glass text-text-primary shadow-xs border border-border-default'
+                                : 'text-text-muted hover:text-text-primary hover:bg-surface-glass border border-transparent'
+                            }
+                        `}
+                    >
+                        <span className="truncate max-w-[120px]">{tab.label}</span>
+                        
+                        {(tab.closeable !== false) && (
+                            <span
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    removeTab(tab.id);
+                                }}
+                                className="w-4 h-4 rounded-md 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={10} />
+                            </span>
+                        )}
+
+                        {/* Active indicator */}
+                        {activeTabId === tab.id && (
+                            <motion.div
+                                layoutId="tab-indicator"
+                                className="absolute bottom-0 left-1 right-1 h-[2px] bg-cyan-500/60 rounded-full"
+                            />
+                        )}
+                    </motion.button>
+                ))}
+            </AnimatePresence>
+        </div>
+    );
+}