@decido/shell 1.0.0 → 4.0.1

package/src/components/shell/MorphShell.tsx

@@ -1,368 +0,0 @@
-import React, { useCallback } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import { ArrowLeft, X, Maximize2, Minimize2 } from 'lucide-react';
-import { useLayoutStore, type MorphStageType } from '../../store/useLayoutStore';
-import { useMorphologyStore } from '../../store/useMorphologyStore';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useMorphInstanceStore, type MorphInstance } from '../../store/useMorphInstanceStore';
-import { resolveShell, registerShell, getRegisteredShellTypes } from '../../store/useShellRegistry';
-import { PlaygroundCanvas } from '../playground/PlaygroundCanvas';
-import { ArtifactBar } from './ArtifactBar';
-import { STAGE_META } from './morphStageMeta';
-import { bootShells } from './shells/bootShells';
-import { useShellKeyboard } from '../../hooks/useShellKeyboard';
-import type { ExecutionStep } from '../../store/playgroundTypes';
-
-// Register built-in shells on first import
-bootShells();
-
-// Expose stores on window for dev console testing
-// ── Standalone Gemini streaming (no React hooks needed) ──
-let _abortCtrl: AbortController | null = null;
-
-async function geminiStreamDirect(prompt: string, model?: string) {
-    const effectiveModel = model || localStorage.getItem('decido_gemini_model') || 'gemini-3-flash-preview';
-    const apiKey = localStorage.getItem('google_gemini_api_key')
-        || (window as any).__DECIDO__?._apiKey
-        || (import.meta as any).env?.VITE_GEMINI_API_KEY || '';
-    if (!apiKey) {
-        console.error('❌ No Gemini API key. Set localStorage "google_gemini_api_key" or VITE_GEMINI_API_KEY');
-        usePlaygroundStore.getState().addChatMessage({ type: 'error', sender: 'system', text: '⚠️ No se encontró API key de Gemini.' });
-        return;
-    }
-
-    const store = usePlaygroundStore.getState();
-    store.addChatMessage({ type: 'text', sender: 'user', text: prompt });
-
-    const controller = new AbortController();
-    _abortCtrl = controller;
-    const steps: ExecutionStep[] = [
-        { type: 'thinking', label: 'Processing', startTime: Date.now() },
-    ];
-
-    try {
-        const url = `https://generativelanguage.googleapis.com/v1beta/models/${effectiveModel}:streamGenerateContent?alt=sse&key=${apiKey}`;
-        const res = await fetch(url, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                contents: [{ role: 'user', parts: [{ text: prompt }] }],
-                systemInstruction: { parts: [{ text: 'Eres Decido AI, un asistente del sistema operativo Decido OS. Responde en español, sé conciso y útil.' }] },
-                generationConfig: { temperature: 0.7, maxOutputTokens: 4096 },
-            }),
-            signal: controller.signal,
-        });
-
-        if (!res.ok) throw new Error(`Gemini API ${res.status}: ${(await res.text()).slice(0, 200)}`);
-
-        steps[0].endTime = Date.now();
-        steps.push({ type: 'text_delta', label: 'Streaming', startTime: Date.now() });
-
-        const reader = res.body?.getReader();
-        if (!reader) throw new Error('No reader');
-        const decoder = new TextDecoder();
-        let fullText = '';
-        const msgId = `gemini-${Date.now()}`;
-        let lineBuffer = '';  // Buffer for partial SSE lines
-
-        while (true) {
-            const { done, value } = await reader.read();
-            if (done) break;
-
-            lineBuffer += decoder.decode(value, { stream: true });
-
-            // Process all complete lines in the buffer
-            const lines = lineBuffer.split('\n');
-            // Keep the last element (might be partial) in the buffer
-            lineBuffer = lines.pop() || '';
-
-            for (const line of lines) {
-                const trimmed = line.trim();
-                if (!trimmed.startsWith('data: ')) continue;
-                const jsonStr = trimmed.slice(6);
-                if (!jsonStr || jsonStr === '[DONE]') continue;
-                try {
-                    const data = JSON.parse(jsonStr);
-                    const text = data?.candidates?.[0]?.content?.parts?.[0]?.text;
-                    if (text) {
-                        fullText += text;
-                        usePlaygroundStore.getState().upsertChatMessage(msgId, {
-                            id: msgId, type: 'text', sender: 'agent', text: fullText,
-                            timestamp: Date.now(), executionSteps: [...steps],
-                        });
-                    }
-                } catch (parseErr) {
-                    console.warn('[SSE] JSON parse failed:', jsonStr.slice(0, 100), parseErr);
-                }
-            }
-        }
-
-        // Process any remaining data in the buffer
-        if (lineBuffer.trim().startsWith('data: ')) {
-            try {
-                const text = JSON.parse(lineBuffer.trim().slice(6))?.candidates?.[0]?.content?.parts?.[0]?.text;
-                if (text) fullText += text;
-            } catch { /* final chunk */ }
-        }
-
-        steps[1].endTime = Date.now();
-        steps.push({ type: 'text_complete', label: 'Complete', startTime: Date.now(), endTime: Date.now() });
-        usePlaygroundStore.getState().upsertChatMessage(msgId, {
-            id: msgId, type: 'text', sender: 'agent', text: fullText,
-            timestamp: Date.now(), executionSteps: steps,
-        });
-        console.log('✅ Streaming complete:', fullText.length, 'chars');
-    } catch (err: any) {
-        if (err.name === 'AbortError') {
-            usePlaygroundStore.getState().addChatMessage({ type: 'alert', sender: 'system', text: '⏹️ Generación cancelada.' });
-        } else {
-            console.error('❌', err.message);
-            usePlaygroundStore.getState().addChatMessage({ type: 'error', sender: 'system', text: `❌ ${err.message}` });
-        }
-    } finally { _abortCtrl = null; }
-}
-
-if (typeof window !== 'undefined') {
-    (window as any).__DECIDO__ = {
-        ...(window as any).__DECIDO__,
-        useMorphInstanceStore,
-        useLayoutStore,
-        useMorphologyStore,
-        usePlaygroundStore,
-        registerShell,
-        resolveShell,
-        getRegisteredShellTypes,
-        geminiStream: geminiStreamDirect,
-        geminiAbort: () => _abortCtrl?.abort(),
-        // SDK: Plugin extensibility (lazy-loaded to avoid circular deps at module eval)
-        registerSuggestions: (pluginId: string, items: string[]) => {
-            import('../../store/useSuggestionsStore').then(m => m.useSuggestionsStore.getState().registerPluginSuggestions(pluginId, items));
-        },
-        registerIntent: (p: any) => {
-            import('../../hooks/useIntentLens').then(m => m.registerIntentPattern(p));
-        },
-        getIntentPatterns: () => {
-            return import('../../hooks/useIntentLens').then(m => m.getIntentPatterns());
-        },
-    };
-}
-
-/**
- * MorphShell — Polymorphic plugin container.
- * 
- * Supports TWO rendering paths:
- * 1. **New API**: MorphInstance from useMorphInstanceStore (1 chat = 1 tab)
- * 2. **Legacy API**: MorphStage from useLayoutStore/useMorphologyStore
- * 
- * Resolution: if activeInstance exists → use new path, else → legacy path.
- */
-
-interface MorphShellProps {
-    showCanvas?: boolean;
-    setShowCanvas?: (v: boolean) => void;
-    activeConfig?: any;
-    prototypeBrand?: string;
-    activeState?: string;
-    chartData?: any[];
-    dragConstraintsRef?: React.RefObject<HTMLDivElement | null> | null;
-}
-
-export function MorphShell({
-    showCanvas = true,
-    setShowCanvas,
-    activeConfig,
-    prototypeBrand = '',
-    activeState,
-    chartData = [],
-    dragConstraintsRef,
-}: MorphShellProps) {
-    // ── Keyboard shortcuts (Cmd+W close, Cmd+1-9 switch) ──
-    useShellKeyboard();
-
-    // ── New API: MorphInstance ──
-    const activeInstance = useMorphInstanceStore((s) => s.getActiveInstance());
-    const removeInstance = useMorphInstanceStore((s) => s.removeInstance);
-
-    // ── Legacy API: MorphStage ──
-    const layoutStage = useLayoutStore((s) => s.activeStage);
-    const layoutHistory = useLayoutStore((s) => s.stageHistory);
-    const morphStage = useMorphologyStore((s) => s.activeStage);
-    const morphHistory = useMorphologyStore((s) => s.stageHistory);
-    const isImmersive = useLayoutStore((s) => s.isImmersive);
-    const setIsImmersive = useLayoutStore((s) => s.setIsImmersive);
-
-    const activeStage = layoutStage || morphStage;
-    const stageHistory = layoutStage ? layoutHistory : morphHistory;
-
-    const activeArtifactData = usePlaygroundStore((s) => s.activeArtifactData);
-    const effectiveStage = activeStage || (activeArtifactData ? { type: 'artifact' as const, data: activeArtifactData } : null);
-    const renderingType: MorphStageType = effectiveStage?.type || '3d';
-    const stageMeta = STAGE_META[renderingType] || STAGE_META['custom'];
-    const StageIcon = stageMeta.icon;
-
-    // ── Tab management ──
-    const addTab = useLayoutStore((s) => s.addTab);
-
-    React.useEffect(() => {
-        if (!effectiveStage && !activeInstance) return;
-        if (activeInstance) {
-            addTab({
-                id: `morph-${activeInstance.id}`,
-                label: activeInstance.label,
-                componentId: `morph:${activeInstance.shellType}`,
-                closeable: true,
-                data: activeInstance,
-            });
-        } else if (effectiveStage) {
-            const tabId = `morph-${renderingType}-${effectiveStage.label || 'stage'}`;
-            addTab({
-                id: tabId,
-                label: effectiveStage.label || renderingType.toUpperCase(),
-                componentId: `morph:${renderingType}`,
-                closeable: true,
-                data: effectiveStage,
-            });
-        }
-    }, [effectiveStage?.type, effectiveStage?.label, activeInstance?.id, activeInstance?.shellType]);
-
-    // ── Actions ──
-    const handleClose = useCallback(() => {
-        if (activeInstance) {
-            removeInstance(activeInstance.id);
-        }
-        useLayoutStore.getState().clearStages();
-        useMorphologyStore.getState().clearStages();
-        usePlaygroundStore.getState().setActiveArtifactData(null);
-        setShowCanvas?.(false);
-    }, [setShowCanvas, activeInstance, removeInstance]);
-
-    const handleBack = useCallback(() => {
-        if (activeInstance) {
-            // For MorphInstances: remove current instance and go to previous
-            const instances = Array.from(useMorphInstanceStore.getState().instances.keys());
-            const currentIdx = instances.indexOf(activeInstance.id);
-
-            // Remove current instance's tab
-            useLayoutStore.getState().removeTab(`morph-${activeInstance.id}`);
-            removeInstance(activeInstance.id);
-
-            // If there are remaining instances, activate the previous one
-            if (instances.length > 1) {
-                const prevIdx = currentIdx > 0 ? currentIdx - 1 : instances.length - 2;
-                const prevId = instances.filter(id => id !== activeInstance.id)[Math.min(prevIdx, instances.length - 2)];
-                if (prevId) {
-                    useMorphInstanceStore.getState().setActiveInstance(prevId);
-                    // Sync with chat
-                    const prevInstance = useMorphInstanceStore.getState().instances.get(prevId);
-                    if (prevInstance?.sourceChatId) {
-                        usePlaygroundStore.getState().setActiveChatId(prevInstance.sourceChatId);
-                    }
-                }
-            } else {
-                // Last instance — close canvas
-                handleClose();
-            }
-        } else if (stageHistory.length > 0) {
-            useLayoutStore.getState().popStage();
-            useMorphologyStore.getState().popStage();
-        } else {
-            handleClose();
-        }
-    }, [activeInstance, stageHistory.length, handleClose, removeInstance]);
-
-    const toggleImmersive = useCallback(() => {
-        setIsImmersive(!isImmersive);
-    }, [isImmersive, setIsImmersive]);
-
-    if (!showCanvas) return null;
-
-    // ── Determine what to render ──
-    const renderNewAPI = activeInstance && resolveShell(activeInstance.shellType);
-    const displayLabel = activeInstance?.label || activeStage?.label || (activeArtifactData ? 'Artefacto' : 'Lienzo');
-    const displayType = activeInstance?.shellType || renderingType;
-
-    return (
-        <AnimatePresence>
-            <motion.div
-                initial={{ opacity: 0, scale: 0.95 }}
-                animate={{ opacity: 1, scale: 1 }}
-                exit={{ opacity: 0, scale: 0.95 }}
-                className="w-full h-full bg-surface-secondary flex flex-col overflow-hidden relative border-l border-border-subtle"
-            >
-                {/* ─── MORPH SHELL HEADER ─── */}
-                <div className="flex justify-between items-center pl-2 z-10 p-3 pb-0 shrink-0">
-                    <div className="flex items-center gap-2">
-                        {(activeStage || activeArtifactData || activeInstance) && (
-                            <button onClick={handleBack} className="p-1.5 rounded-lg hover:bg-surface-glass text-text-muted hover:text-text-primary transition-colors" title="Volver">
-                                <ArrowLeft size={16} />
-                            </button>
-                        )}
-                        <h2 className="text-sm font-bold flex items-center gap-2 text-text-primary">
-                            <div className="w-6 h-6 rounded-lg flex items-center justify-center bg-surface-glass">
-                                <StageIcon size={12} className={stageMeta.color} />
-                            </div>
-                            <span className="truncate max-w-[180px]">{displayLabel}</span>
-                            <span className="text-text-muted font-mono text-[9px] ml-1">{String(displayType).toUpperCase()}</span>
-                        </h2>
-                    </div>
-
-                    <div className="flex items-center gap-2">
-                        {stageHistory.length > 0 && (
-                            <div className="hidden md:flex items-center gap-1 text-[9px] text-text-muted font-mono">
-                                {stageHistory.map((s, i) => (
-                                    <React.Fragment key={i}>
-                                        <span className="hover:text-text-secondary cursor-pointer"
-                                            onClick={() => {
-                                                const popsNeeded = stageHistory.length - i;
-                                                for (let j = 0; j < popsNeeded; j++) {
-                                                    useLayoutStore.getState().popStage();
-                                                    useMorphologyStore.getState().popStage();
-                                                }
-                                            }}>
-                                            {s.label || s.type}
-                                        </span>
-                                        <span>›</span>
-                                    </React.Fragment>
-                                ))}
-                                <span className="text-text-secondary">{displayLabel}</span>
-                            </div>
-                        )}
-                        <button onClick={toggleImmersive} className="p-1.5 rounded-lg hover:bg-surface-glass text-text-muted hover:text-text-primary transition-colors" title={isImmersive ? 'Salir de inmersivo' : 'Modo inmersivo'}>
-                            {isImmersive ? <Minimize2 size={14} /> : <Maximize2 size={14} />}
-                        </button>
-                        <button onClick={handleClose} className="p-1.5 bg-surface-glass hover:bg-red-500/20 text-text-secondary hover:text-red-400 rounded-full transition-colors">
-                            <X size={14} />
-                        </button>
-                    </div>
-                </div>
-
-                {/* ─── ARTIFACT BAR (sub-tabs for multiple files/versions) ─── */}
-                {activeInstance && <ArtifactBar instanceId={activeInstance.id} />}
-
-                {/* ─── STAGE CONTENT ─── */}
-                <div className="flex-1 relative overflow-hidden">
-                    {renderNewAPI ? (
-                        // New API: render shell from registry
-                        React.createElement(resolveShell(activeInstance!.shellType)!, {
-                            instanceId: activeInstance!.id,
-                            data: activeInstance!.data,
-                            artifacts: activeInstance!.artifacts,
-                            activeArtifactIndex: activeInstance!.activeArtifactIndex,
-                        })
-                    ) : (
-                        // Legacy: delegate to PlaygroundCanvas
-                        <PlaygroundCanvas
-                            showCanvas={true}
-                            setShowCanvas={setShowCanvas || (() => { })}
-                            activeConfig={activeConfig}
-                            prototypeBrand={prototypeBrand}
-                            activeState={activeState}
-                            chartData={chartData}
-                            dragConstraintsRef={dragConstraintsRef || undefined as any}
-                        />
-                    )}
-                </div>
-            </motion.div>
-        </AnimatePresence>
-    );
-}

package/src/components/shell/PluginViewer.tsx

@@ -1,147 +0,0 @@
-import React from 'react';
-import { ExternalLink, RefreshCw, X, Shield, Maximize2, Minimize2 } from 'lucide-react';
-import { AnimatePresence, motion } from 'motion/react';
-
-/**
- * PluginViewer — Renders a plugin's standalone UI inside an iframe.
- * 
- * Architecture: OVERLAY PANEL (not a slot component).
- * This renders as a fixed/absolute panel that floats over the layout,
- * completely decoupled from the R1-R6 slot system.
- * 
- * Props are passed directly by PlaygroundDecidoChannel, not read from tabs.
- */
-
-export interface PluginViewerProps {
-    /** Whether the overlay is open */
-    isOpen: boolean;
-    /** The URL to render in the iframe */
-    url: string;
-    /** Display label for the toolbar */
-    label: string;
-    /** Plugin identifier */
-    pluginId: string;
-    /** Called when the user closes the overlay */
-    onClose: () => void;
-}
-
-export function PluginViewer({ isOpen, url, label, pluginId, onClose }: PluginViewerProps) {
-    const iframeRef = React.useRef<HTMLIFrameElement>(null);
-    const [isLoading, setIsLoading] = React.useState(true);
-    const [hasError, setHasError] = React.useState(false);
-    const [isFullscreen, setIsFullscreen] = React.useState(false);
-
-    // Reset loading state when URL changes
-    React.useEffect(() => {
-        if (url) {
-            setIsLoading(true);
-            setHasError(false);
-        }
-    }, [url]);
-
-    const handleRefresh = () => {
-        if (iframeRef.current) {
-            setIsLoading(true);
-            setHasError(false);
-            iframeRef.current.src = iframeRef.current.src;
-        }
-    };
-
-    const handleOpenExternal = () => {
-        if (url) window.open(url, '_blank');
-    };
-
-    return (
-        <AnimatePresence>
-            {isOpen && url && (
-                <>
-                    {/* Backdrop — click to close */}
-                    <motion.div
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                        transition={{ duration: 0.2 }}
-                        className="fixed inset-0 bg-black/40 backdrop-blur-sm z-[200]"
-                        onClick={onClose}
-                    />
-
-                    {/* Panel */}
-                    <motion.div
-                        initial={{ opacity: 0, x: 40 }}
-                        animate={{ opacity: 1, x: 0 }}
-                        exit={{ opacity: 0, x: 40 }}
-                        transition={{ type: 'spring', damping: 25, stiffness: 300 }}
-                        className={`fixed z-[201] flex flex-col bg-surface-primary border border-border-subtle rounded-xl shadow-2xl overflow-hidden ${
-                            isFullscreen
-                                ? 'inset-2'
-                                : 'top-2 right-2 bottom-2 w-[70vw] max-w-[1100px] min-w-[420px]'
-                        }`}
-                    >
-                        {/* Toolbar */}
-                        <div className="flex-none flex items-center justify-between px-3 py-2 bg-surface-secondary border-b border-border-subtle">
-                            <div className="flex items-center gap-2">
-                                <div className="w-2 h-2 rounded-full bg-emerald-400 animate-pulse" />
-                                <span className="text-xs font-semibold text-text-primary">{label}</span>
-                                <span className="text-[10px] text-text-muted font-mono bg-surface-glass px-1.5 py-0.5 rounded">{pluginId}</span>
-                            </div>
-                            <div className="flex items-center gap-1">
-                                <button onClick={handleRefresh} className="p-1.5 rounded-md text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors" title="Refresh">
-                                    <RefreshCw className="w-3.5 h-3.5" />
-                                </button>
-                                <button onClick={handleOpenExternal} className="p-1.5 rounded-md text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors" title="Open in browser">
-                                    <ExternalLink className="w-3.5 h-3.5" />
-                                </button>
-                                <button onClick={() => setIsFullscreen(!isFullscreen)} className="p-1.5 rounded-md text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors" title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}>
-                                    {isFullscreen ? <Minimize2 className="w-3.5 h-3.5" /> : <Maximize2 className="w-3.5 h-3.5" />}
-                                </button>
-                                <button onClick={onClose} className="p-1.5 rounded-md text-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Close">
-                                    <X className="w-3.5 h-3.5" />
-                                </button>
-                            </div>
-                        </div>
-
-                        {/* Iframe container — rr-block prevents rrweb from serializing cross-origin content */}
-                        <div className="flex-1 relative rr-block" data-rr-block>
-                            {isLoading && (
-                                <div className="absolute inset-0 flex items-center justify-center bg-surface-primary z-10">
-                                    <div className="flex flex-col items-center gap-3">
-                                        <div className="w-8 h-8 border-2 border-cyan-500/20 rounded-full relative">
-                                            <div className="absolute inset-0 w-8 h-8 border-2 border-transparent border-t-cyan-400 rounded-full animate-spin" />
-                                        </div>
-                                        <p className="text-xs text-text-muted">Loading {label}...</p>
-                                    </div>
-                                </div>
-                            )}
-                            {hasError && (
-                                <div className="absolute inset-0 flex items-center justify-center bg-surface-primary z-10">
-                                    <div className="flex flex-col items-center gap-3 text-center">
-                                        <div className="w-12 h-12 rounded-xl bg-red-500/10 flex items-center justify-center">
-                                            <X className="w-6 h-6 text-red-400" />
-                                        </div>
-                                        <div>
-                                            <p className="text-sm font-medium text-text-primary">Connection Failed</p>
-                                            <p className="text-xs text-text-muted mt-1">Could not reach {url}</p>
-                                        </div>
-                                        <button onClick={handleRefresh} className="px-3 py-1.5 rounded-lg text-xs font-medium bg-surface-glass hover:bg-surface-elevated transition-colors">
-                                            Retry
-                                        </button>
-                                    </div>
-                                </div>
-                            )}
-                            <iframe
-                                ref={iframeRef}
-                                src={url}
-                                className="w-full h-full border-0 rr-block"
-                                onLoad={() => { setIsLoading(false); setHasError(false); }}
-                                onError={() => { setIsLoading(false); setHasError(true); }}
-                                sandbox="allow-scripts allow-same-origin allow-popups allow-forms allow-modals"
-                                data-rr-block
-                                title={label}
-                            />
-                        </div>
-                    </motion.div>
-                </>
-            )}
-        </AnimatePresence>
-    );
-}