@decido/shell 1.0.0 → 4.0.1

package/src/components/playground/PlaygroundChat.tsx

@@ -1,236 +0,0 @@
-import React from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Building2, BrainCircuit, Sparkles, Download } from 'lucide-react';
-import { SuggestionCards } from './SuggestionCards';
-import { LicenseTarget } from '../../mocks/decido';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useMorphInstanceStore } from '../../store/useMorphInstanceStore';
-import { useLayoutStore } from '../../store/useLayoutStore';
-import { useTimelineStore } from '@decido/engine';
-import { PlaygroundFloatingInput } from './PlaygroundFloatingInput';
-import { ChatProvider, ChatMessageRow, ChatExportMenu } from '@decido/chat';
-import { handleSlashCommand } from '../chat-extensions/chatSlashCommands';
-
-export interface PlaygroundChatProps {
-    step: 'chat' | 'profile' | 'action';
-    selectedProfile: string | null;
-    authAvailableLicenses: LicenseTarget[];
-    handleProfileSelect: (license: LicenseTarget) => void;
-    activeConfig: any;
-    demoState: string;
-    suggestions: any[];
-    setInputValue: (val: string) => void;
-    isGenerating?: boolean;
-    config?: any;
-    handleGeneratePlayground?: (val?: string) => void;
-    isCreatorMode?: boolean;
-    isVoiceActive?: boolean;
-    setIsVoiceActive?: (active: boolean) => void;
-    VoiceWidget?: React.ComponentType<any>;
-    dynamicPersona?: any;
-    setSuggestions?: (sugs: any) => void;
-    selectedVoice?: string;
-    showCanvas?: boolean;
-    setShowCanvas?: (show: boolean) => void;
-}
-
-export const PlaygroundChat = React.memo(function PlaygroundChat({
-    step, selectedProfile, authAvailableLicenses, handleProfileSelect,
-    activeConfig, demoState, suggestions, setInputValue, isGenerating, config,
-    handleGeneratePlayground, isCreatorMode = true,
-    isVoiceActive = false, setIsVoiceActive, VoiceWidget, dynamicPersona,
-    setSuggestions: setSuggestionsFromParent, selectedVoice, showCanvas, setShowCanvas
-}: PlaygroundChatProps) {
-    const activeChatId = usePlaygroundStore(state => state.activeChatId);
-    const chatMessages = usePlaygroundStore(state => state.chatMessagesByInstance[state.activeChatId || '_default'] || []);
-    const addChatMessage = usePlaygroundStore(state => state.addChatMessage);
-    const prototypeBrand = usePlaygroundStore(state => state.prototypeBrand);
-    const setPrototypeBrand = usePlaygroundStore(state => state.setPrototypeBrand);
-
-    // Auto-Scroll
-    const scrollRef = React.useRef<HTMLDivElement>(null);
-    const [isAtBottom, setIsAtBottom] = React.useState(true);
-    const [showExportMenu, setShowExportMenu] = React.useState(false);
-    const isAtBottomRef = React.useRef(true);
-
-    const handleScroll = () => {
-        if (!scrollRef.current) return;
-        const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
-        const atBottom = scrollHeight - scrollTop - clientHeight < 100;
-        setIsAtBottom(atBottom);
-        isAtBottomRef.current = atBottom;
-    };
-
-    // Auto-scroll — trigger on new messages AND on upserts (text length changes)
-    const lastMsg = chatMessages[chatMessages.length - 1];
-    const scrollKey = `${chatMessages.length}-${lastMsg?.text?.length || 0}`;
-
-    React.useEffect(() => {
-        if (isAtBottomRef.current && scrollRef.current) {
-            scrollRef.current.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' });
-        }
-    }, [scrollKey]);
-
-    const runStressTest = () => {
-        let count = 0;
-        const interval = setInterval(() => {
-            if (count > 200) { clearInterval(interval); return; }
-            addChatMessage({ type: count % 3 === 0 ? 'alert' : count % 5 === 0 ? 'card' : 'text', sender: count % 2 === 0 ? 'agent' : 'system', text: `Stresstesting message ${count} para medir rendimiento en el sistema.` });
-            count++;
-        }, 10);
-    };
-
-    const handleThemeSwitch = () => {
-        const brands = activeConfig && typeof activeConfig === 'object' && config?.environments ? Object.keys(config.environments) : ['brand-a', 'brand-b', 'brand-c'];
-        const nextIndex = (brands.indexOf(prototypeBrand) + 1) % brands.length;
-        setPrototypeBrand(brands[nextIndex]);
-    };
-
-    const chatContextValue = React.useMemo(() => ({
-        activeConfig,
-        onMorphInstanceSelect: (instanceId: string) => {
-            useMorphInstanceStore.getState().setActiveInstance(instanceId);
-            useLayoutStore.getState().setActiveTab(`morph-${instanceId}`);
-            if (setShowCanvas) setShowCanvas(true);
-        },
-        extensions: {
-            getPreviewHTML: () => useMorphInstanceStore.getState().getActiveInstance?.()?.data?.html || null,
-            onSendMessage: (text: string) => addChatMessage({ type: 'text', sender: 'user', text }),
-            renderMessageActions: (msgId: string) => null
-        }
-    }), [activeConfig, setShowCanvas, addChatMessage]);
-
-    return (
-        <AnimatePresence mode="wait">
-            {step === 'action' ? (
-                <motion.div key="action-step" initial={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} className="flex flex-col items-center justify-center h-full text-center">
-                    <div className="w-24 h-24 mx-auto rounded-full border-[3px] border-cyan-500/30 border-t-cyan-400 animate-spin mb-8 shadow-[0_0_30px_rgba(34,211,238,0.2)]"></div>
-                    <h2 className="text-3xl font-bold text-text-primary mb-4">Reestructurando el OS...</h2>
-                    <p className="text-cyan-400 font-mono text-sm tracking-widest uppercase bg-cyan-500/10 py-2 px-6 rounded-full inline-block border border-cyan-500/20">Cargando módulos para: {selectedProfile}</p>
-                </motion.div>
-            ) : step === 'profile' ? (
-                <motion.div key="profile-step" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} className="flex flex-col items-center justify-center h-full w-full max-w-4xl mx-auto pb-20">
-                    <h2 className="text-2xl md:text-3xl font-bold text-text-primary text-center mb-8">Selecciona tu Perfil</h2>
-                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4 w-full">
-                        {authAvailableLicenses.map((license: LicenseTarget) => (
-                            <button key={license.id} onClick={() => handleProfileSelect(license)} className={`group relative p-6 rounded-3xl bg-surface-tertiary border border-border-subtle transition-all text-left overflow-hidden ${license.type === 'enterprise' ? 'hover:border-emerald-500/50' : 'hover:border-cyan-500/50'}`}>
-                                <div className="flex items-center gap-4 mb-4">
-                                    <div className={`w-12 h-12 rounded-full flex items-center justify-center shadow-inner ${license.type === 'enterprise' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-cyan-500/10 text-cyan-400'}`}>
-                                        {license.type === 'enterprise' ? <Building2 size={24} /> : <BrainCircuit size={24} />}
-                                    </div>
-                                    <h3 className="text-xl font-bold text-text-primary">{license.name}</h3>
-                                </div>
-                            </button>
-                        ))}
-                    </div>
-                </motion.div>
-            ) : (
-                <motion.div key="chat-greeting" initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0 }} className="flex flex-col h-full overflow-hidden w-full max-w-full lg:max-w-4xl mx-auto pb-4 px-3 sm:px-6 md:px-8 lg:px-4 min-w-0 min-h-0 box-border">
-                    <div ref={scrollRef} onScroll={handleScroll} className={`flex-1 overflow-y-auto overflow-x-hidden custom-scrollbar scroll-smooth flex flex-col gap-6 md:gap-8 min-w-0 min-h-0 ${!isCreatorMode ? 'justify-end pb-6' : 'pb-48 md:pb-64'}`}>
-                        {/* Greeting */}
-                        <div className="flex flex-col gap-3 md:gap-4 transition-all mt-4 sm:mt-6 md:mt-8">
-                            <h1 className="text-2xl sm:text-3xl md:text-5xl font-semibold leading-tight text-text-primary/50">
-                                <span className={`bg-linear-to-r ${activeConfig.gradient} text-transparent bg-clip-text transition-all duration-700`}>{activeConfig.greetingText}</span><br />
-                                {activeConfig.greetingPrompt || "¿En qué puedo ayudarte hoy?"}
-                            </h1>
-                            <div className="flex items-center gap-4 flex-wrap mt-2">
-                                <p className="text-sm text-text-muted font-mono transition-all duration-700">{activeConfig.subtitle}</p>
-                                <div className="hidden md:flex gap-2 items-center">
-                                    <button onClick={handleThemeSwitch} className="text-[10px] text-text-secondary hover:text-text-primary uppercase tracking-wider transition-colors bg-surface-glass hover:bg-surface-glass px-3 py-1.5 rounded-full border border-border-default flex items-center gap-2">
-                                        <span className={`w-2 h-2 rounded-full ${prototypeBrand === 'brand-b' ? 'bg-emerald-400' : prototypeBrand === 'brand-c' ? 'bg-purple-400' : 'bg-cyan-400'}`}></span>
-                                        Tema: {prototypeBrand}
-                                    </button>
-                                    <button onClick={runStressTest} className="text-[10px] text-text-secondary hover:text-orange-400 uppercase tracking-wider transition-colors bg-orange-500/5 hover:bg-orange-500/10 px-3 py-1.5 rounded-full border border-orange-500/20 border-dashed flex items-center gap-2">
-                                        <span className="text-orange-500 font-bold">⚠</span> Estrés (200 msgs)
-                                    </button>
-                                    <div className="relative">
-                                        <button onClick={() => setShowExportMenu(!showExportMenu)} className="text-[10px] text-text-secondary hover:text-cyan-400 uppercase tracking-wider transition-colors bg-surface-glass hover:bg-surface-glass px-3 py-1.5 rounded-full border border-border-default flex items-center gap-2">
-                                            <Download size={10} /> Export
-                                        </button>
-                                        <ChatExportMenu isOpen={showExportMenu} onClose={() => setShowExportMenu(false)} />
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-
-                        {/* Messages wrapped in Provider */}
-                        <ChatProvider value={chatContextValue}>
-                            {(chatMessages.length > 0 || isGenerating) && (
-                                <div className="flex flex-col gap-6 mt-6 max-w-full md:max-w-3xl min-w-0">
-                                {chatMessages.map(msg => <ChatMessageRow key={msg.id} msg={msg} />)}
-                                <AnimatePresence>
-                                    {isGenerating && (
-                                        <motion.div initial={{ opacity: 0, y: 10, scale: 0.95 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.95 }} className="flex gap-4">
-                                            <div className="w-10 h-10 rounded-full flex items-center justify-center shadow-lg border shrink-0 bg-transparent border-border-strong text-text-primary">
-                                                <Sparkles size={18} className="text-text-muted animate-pulse" />
-                                            </div>
-                                            <div className="flex-1 space-y-2 flex flex-col items-start justify-center">
-                                                <div className="bg-surface-tertiary border border-border-subtle rounded-2xl p-4 shadow-xl inline-flex gap-1.5 items-center justify-center">
-                                                    <div className="w-1.5 h-1.5 rounded-full bg-surface-elevated animate-bounce" style={{ animationDelay: '0ms' }}></div>
-                                                    <div className="w-1.5 h-1.5 rounded-full bg-surface-elevated animate-bounce" style={{ animationDelay: '150ms' }}></div>
-                                                    <div className="w-1.5 h-1.5 rounded-full bg-surface-elevated animate-bounce" style={{ animationDelay: '300ms' }}></div>
-                                                </div>
-                                            </div>
-                                        </motion.div>
-                                    )}
-                                </AnimatePresence>
-                            </div>
-                        )}
-                        </ChatProvider>
-
-                        {!chatMessages.length && demoState !== 'idle' && (
-                            <div className="flex flex-col gap-6 mt-6 max-w-full md:max-w-3xl opacity-50 min-w-0">
-                                <p className="text-sm text-text-muted italic">Ejecutando secuencia en el simulador sin salida de chat...</p>
-                            </div>
-                        )}
-
-                        {/* Suggestions */}
-                        {!chatMessages.length && demoState === 'idle' && (
-                            <SuggestionCards suggestions={suggestions} onSelect={setInputValue} />
-                        )}
-                    </div>
-
-                    {/* Scroll-to-bottom button */}
-                    {!isAtBottom && chatMessages.length > 5 && (
-                        <motion.button
-                            initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 10 }}
-                            onClick={() => scrollRef.current?.scrollTo({ top: scrollRef.current.scrollHeight, behavior: 'smooth' })}
-                            className={`absolute ${!isCreatorMode ? 'bottom-20' : 'bottom-[100px]'} left-1/2 transform -translate-x-1/2 bg-cyan-500 text-text-primary rounded-full px-4 py-2 text-xs font-bold shadow-[0_0_15px_rgba(34,211,238,0.5)] border border-cyan-400 flex items-center gap-2 z-50 hover:bg-cyan-400`}
-                        >
-                            ⬇ Nuevos Mensajes
-                        </motion.button>
-                    )}
-
-                    {/* Player Mode Floating Input */}
-                    {!isCreatorMode && (
-                        <div className="shrink-0 w-full max-w-full lg:max-w-3xl mx-auto pb-2">
-                            <PlaygroundFloatingInput
-                                isGenerating={isGenerating}
-                                onSend={(val) => {
-                                    if (handleSlashCommand(val, { prototypeBrand, setPrototypeBrand, addChatMessage })) return;
-                                    setInputValue(val);
-                                    if (handleGeneratePlayground) {
-                                        handleGeneratePlayground(val);
-                                    } else if ((window as any).__DECIDO__?.geminiStream) {
-                                        // Fallback: stream via Gemini directly
-                                        (window as any).__DECIDO__.geminiStream(val);
-                                    }
-                                }}
-                                isVoiceActive={isVoiceActive}
-                                setIsVoiceActive={setIsVoiceActive}
-                                VoiceWidget={VoiceWidget}
-                                dynamicPersona={dynamicPersona}
-                                setSuggestions={setSuggestionsFromParent}
-                                selectedVoice={selectedVoice}
-                                showCanvas={showCanvas}
-                                setShowCanvas={setShowCanvas}
-                                prototypeBrand={prototypeBrand}
-                                setPrototypeBrand={setPrototypeBrand}
-                            />
-                        </div>
-                    )}
-                </motion.div>
-            )}
-        </AnimatePresence>
-    );
-});

package/src/components/playground/PlaygroundErrorBoundary.tsx

@@ -1,63 +0,0 @@
-import React, { Component, ErrorInfo, ReactNode } from 'react';
-import { AlertTriangle, RefreshCw } from 'lucide-react';
-
-interface Props {
-    children: ReactNode;
-    fallbackName?: string;
-}
-
-interface State {
-    hasError: boolean;
-    error: Error | null;
-}
-
-export class PlaygroundErrorBoundary extends Component<Props, State> {
-    public state: State = {
-        hasError: false,
-        error: null
-    };
-
-    public static getDerivedStateFromError(error: Error): State {
-        return { hasError: true, error };
-    }
-
-    public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
-        // @ts-ignore
-        console.error(`[PlaygroundErrorBoundary] Error capturado en ${this.props.fallbackName || 'componente'}:`, error, errorInfo);
-    }
-
-    private handleReset = () => {
-        // @ts-ignore
-        this.setState({ hasError: false, error: null });
-    };
-
-    public render() {
-        // @ts-ignore
-        if (this.state.hasError) {
-            return (
-                <div className="flex flex-col items-center justify-center w-full h-full min-h-[150px] bg-red-500/10 border border-red-500/20 rounded-xl p-4 text-center backdrop-blur-xs">
-                    <AlertTriangle className="text-red-400 mb-3" size={32} />
-                    <h3 className="text-red-400 font-bold mb-1">
-                        {/* @ts-ignore */}
-                        Fallo en {this.props.fallbackName || 'Módulo'}
-                    </h3>
-                    {/* @ts-ignore */}
-                    <p className="text-xs text-red-300/80 mb-4 max-w-xs truncate" title={this.state.error?.message}>
-                        {/* @ts-ignore */}
-                        {this.state.error?.message || 'Excepción desconocida en el renderizado.'}
-                    </p>
-                    <button
-                        onClick={this.handleReset}
-                        className="flex items-center gap-2 px-3 py-1.5 bg-red-500/20 hover:bg-red-500/30 text-red-300 rounded-lg text-xs transition-colors border border-red-500/20"
-                    >
-                        <RefreshCw size={12} />
-                        Reiniciar Módulo
-                    </button>
-                </div>
-            );
-        }
-
-        // @ts-ignore
-        return this.props.children;
-    }
-}

package/src/components/playground/PlaygroundFloatingInput.tsx

@@ -1,352 +0,0 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Camera, Paperclip, FolderOpen } from 'lucide-react';
-import { useTimelineStore } from '@decido/engine';
-import { useUIComponentStore } from '../../store/useUIComponentStore';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { getRegisteredShellTypes, getShellMeta } from '../../store/useShellRegistry';
-import { SlashCommandMenu, VoiceLiveMode } from '@decido/chat';
-import { useIntentLens } from '../../hooks/useIntentLens';
-import { useAIModelSelector } from '../../hooks/useAIModelSelector';
-import { IntentCatalogPanel } from '../chat-extensions/IntentCatalogPanel';
-import { useSuggestionsStore } from '../../store/useSuggestionsStore';
-import { useMorphInstanceStore } from '../../store/useMorphInstanceStore';
-import { InputToolbar } from './input-parts/InputToolbar';
-import { InputActions } from './input-parts/InputActions';
-import { ResourceLibraryPanel } from './input-parts/ResourceLibraryPanel';
-
-// ─── Slash commands ─────────────────────────────────────────
-
-interface SlashCommand {
-  command: string;
-  label: string;
-  description: string;
-  icon: React.ReactNode;
-  subCommands?: { id: string; label: string; description?: string }[];
-}
-
-// ─── Props ──────────────────────────────────────────────────
-
-export interface PlaygroundFloatingInputProps {
-  onSend: (value: string) => void;
-  isGenerating?: boolean;
-  isVoiceActive?: boolean;
-  setIsVoiceActive?: (active: boolean) => void;
-  VoiceWidget?: React.ComponentType<any>;
-  dynamicPersona?: any;
-  setSuggestions?: (sugs: any) => void;
-  selectedVoice?: string;
-  showCanvas?: boolean;
-  setShowCanvas?: (show: boolean) => void;
-  prototypeBrand?: string;
-  setPrototypeBrand?: (brand: string) => void;
-}
-
-// ─── Component ──────────────────────────────────────────────
-
-export const PlaygroundFloatingInput = ({
-  onSend, isGenerating,
-  isVoiceActive = false, setIsVoiceActive, VoiceWidget,
-  dynamicPersona, setSuggestions, selectedVoice,
-  showCanvas, setShowCanvas,
-  prototypeBrand = 'decido', setPrototypeBrand,
-}: PlaygroundFloatingInputProps) => {
-  const [inputValue, setInputValue] = useState('');
-  const [isTranscribing, setIsTranscribing] = useState(false);
-  const [slashMenuOpen, setSlashMenuOpen] = useState(false);
-  const [slashMenuIndex, setSlashMenuIndex] = useState(0);
-  const [showIntentPanel, setShowIntentPanel] = useState(false);
-  const [showLibrary, setShowLibrary] = useState(false);
-  const [intentEnabled, setIntentEnabled] = useState(true);
-  const [selectedShell, setSelectedShell] = useState<string | null>(
-    () => localStorage.getItem('decido_selected_shell')
-  );
-  const inputRef = useRef<HTMLTextAreaElement>(null);
-
-  // ── AI Model Selector (dynamic, multi-provider) ──
-  const { selectedModelId, selectedModel, providerGroups, selectModel } = useAIModelSelector();
-
-  // Sync intentEnabled to window.__DECIDO__
-  useEffect(() => {
-    if (typeof window !== 'undefined' && (window as any).__DECIDO__) {
-      (window as any).__DECIDO__.intentEnabled = intentEnabled;
-    }
-  }, [intentEnabled]);
-
-  // Sync model to ChatInstance
-  const activeChatId = usePlaygroundStore(s => s.activeChatId);
-  useEffect(() => {
-    if (!activeChatId) return;
-    usePlaygroundStore.setState(s => ({
-      chatInstances: s.chatInstances.map(c =>
-        c.id === activeChatId ? { ...c, model: selectedModelId } : c
-      ),
-    }));
-  }, [selectedModelId, activeChatId]);
-
-  // Sync shell to ChatInstance + MorphInstance
-  useEffect(() => {
-    if (selectedShell) localStorage.setItem('decido_selected_shell', selectedShell);
-    else localStorage.removeItem('decido_selected_shell');
-    if (typeof window !== 'undefined' && (window as any).__DECIDO__) {
-      (window as any).__DECIDO__.selectedShell = selectedShell;
-    }
-    if (!activeChatId) return;
-    usePlaygroundStore.setState(s => ({
-      chatInstances: s.chatInstances.map(c =>
-        c.id === activeChatId ? { ...c, shellType: selectedShell || undefined } : c
-      ),
-    }));
-    if (selectedShell) {
-      const meta = getShellMeta(selectedShell);
-      useMorphInstanceStore.getState().upsertInstance({
-        id: activeChatId,
-        sourceChatId: activeChatId,
-        shellType: selectedShell,
-        label: meta.label || selectedShell,
-        data: {},
-      });
-    } else {
-      useMorphInstanceStore.getState().removeInstance(activeChatId);
-    }
-  }, [selectedShell, activeChatId]);
-
-  // Sync from ChatInstance → local selectors on switch
-  const activeInstance = usePlaygroundStore(s => s.chatInstances.find(c => c.id === s.activeChatId));
-  useEffect(() => {
-    if (!activeInstance) return;
-    if (activeInstance.model && activeInstance.model !== selectedModelId) {
-      selectModel(activeInstance.model);
-    }
-    const instanceShell = activeInstance.shellType || null;
-    if (instanceShell !== selectedShell) {
-      setSelectedShell(instanceShell);
-    }
-  }, [activeChatId]);
-
-  // Intent Lens — real-time detection
-  const { primaryIntent } = useIntentLens(intentEnabled ? inputValue : '');
-
-  // Rotating placeholder
-  const seeds = useSuggestionsStore(s => s.seeds);
-  const generated = useSuggestionsStore(s => s.generated);
-  const pluginSuggestions = useSuggestionsStore(s => s.pluginSuggestions);
-  const allSuggestions = useMemo(() => {
-    const plugin = Object.values(pluginSuggestions).flat();
-    return [...generated, ...seeds, ...plugin];
-  }, [generated, seeds, pluginSuggestions]);
-  const [placeholderIndex, setPlaceholderIndex] = useState(0);
-  useEffect(() => {
-    if (allSuggestions.length <= 1) return;
-    const timer = setInterval(() => setPlaceholderIndex(i => (i + 1) % allSuggestions.length), 4000);
-    return () => clearInterval(timer);
-  }, [allSuggestions.length]);
-  const rotatingPlaceholder = allSuggestions.length > 0
-    ? allSuggestions[placeholderIndex % allSuggestions.length]
-    : 'Escribe / para comandos... (Shift+Enter nueva línea)';
-
-  // Auto-resize textarea
-  useEffect(() => {
-    const ta = inputRef.current;
-    if (ta) { ta.style.height = 'auto'; ta.style.height = `${Math.min(ta.scrollHeight, 200)}px`; }
-  }, [inputValue]);
-
-  // ── Slash Commands ──
-  const timelines = useTimelineStore(s => s.timelines);
-  const blueprintLibrary = useTimelineStore(s => s.blueprintLibrary);
-  const uiComponents = useUIComponentStore(s => s.components);
-
-  const slashCommands = useMemo<SlashCommand[]>(() => {
-    const flowList = Object.keys(timelines).map(id => ({ id, label: id, description: timelines[id]?.name || id }));
-    const bpList = Object.entries(blueprintLibrary).map(([id, bp]) => ({ id, label: bp.name || id, description: `v${bp.metadata?.version || '?'} · ${bp.metadata?.tags?.join(', ') || ''}` }));
-    const uiList = Object.values(uiComponents).map(c => ({ id: c.id, label: c.name, description: c.category }));
-    return [
-      { command: '/run', label: 'Run Flow', description: 'Ejecutar un flujo', icon: '▶', subCommands: flowList },
-      { command: '/flows', label: 'List Flows', description: 'Ver todos los flujos', icon: '📋' },
-      { command: '/blueprints', label: 'Blueprints', description: 'Subflujos disponibles', icon: '🔗', subCommands: bpList },
-      { command: '/ui', label: 'UI Components', description: 'Biblioteca de componentes', icon: '🎨', subCommands: uiList },
-      { command: '/reset', label: 'Reset Engine', description: 'Reiniciar el motor', icon: '🔄' },
-      { command: '/tts', label: 'Voice Synthesis', description: 'Generar audio TTS con Kokoro', icon: '🎙️' },
-    ];
-  }, [timelines, blueprintLibrary, uiComponents]);
-
-  const filteredCommands = useMemo(() => {
-    if (!inputValue.startsWith('/')) return [];
-    const parts = inputValue.split(' ');
-    const cmd = parts[0].toLowerCase();
-    const arg = parts.slice(1).join(' ').toLowerCase();
-    const matched = slashCommands.find(c => c.command === cmd);
-    if (matched?.subCommands) {
-      return matched.subCommands
-        .filter(sc => !arg || sc.id.toLowerCase().includes(arg) || sc.label.toLowerCase().includes(arg))
-        .map(sc => ({ ...sc, type: 'sub', parentCommand: cmd }));
-    }
-    return slashCommands
-      .filter(c => c.command.startsWith(cmd))
-      .map(c => ({ id: c.command, label: c.label, description: c.description, icon: c.icon, type: 'command', subCommands: c.subCommands }));
-  }, [inputValue, slashCommands]);
-
-  useEffect(() => {
-    setSlashMenuOpen(inputValue.startsWith('/') && filteredCommands.length > 0);
-    setSlashMenuIndex(0);
-  }, [inputValue, filteredCommands.length]);
-
-  const handleSlashSelect = (item: any) => {
-    if (item.type === 'command') {
-      if (item.subCommands) { setInputValue(item.id + ' '); inputRef.current?.focus(); }
-      else { onSend(item.id); setInputValue(''); setSlashMenuOpen(false); }
-    } else if (item.type === 'sub') {
-      onSend(`${item.parentCommand} ${item.id}`);
-      setInputValue('');
-      setSlashMenuOpen(false);
-    }
-  };
-
-  // ── Key handling ──
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (slashMenuOpen) {
-      if (e.key === 'ArrowDown') { e.preventDefault(); setSlashMenuIndex(i => Math.min(i + 1, filteredCommands.length - 1)); }
-      else if (e.key === 'ArrowUp') { e.preventDefault(); setSlashMenuIndex(i => Math.max(i - 1, 0)); }
-      else if (e.key === 'Enter' && filteredCommands[slashMenuIndex]) { e.preventDefault(); handleSlashSelect(filteredCommands[slashMenuIndex]); }
-      else if (e.key === 'Escape') setSlashMenuOpen(false);
-      return;
-    }
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault();
-      if (inputValue.trim() && !isGenerating) { onSend(inputValue.trim()); setInputValue(''); }
-    }
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (inputValue.trim() && !isGenerating) { onSend(inputValue.trim()); setInputValue(''); }
-  };
-
-  const handleSendClick = useCallback(() => {
-    if (inputValue.trim() && !isGenerating) { onSend(inputValue.trim()); setInputValue(''); }
-  }, [inputValue, isGenerating, onSend]);
-
-  // ─── Render ───────────────────────────────────────────────
-
-  return (
-    <motion.div layout className={`w-full relative ${isVoiceActive ? 'h-64' : ''}`}>
-      <SlashCommandMenu isOpen={slashMenuOpen} items={filteredCommands} activeIndex={slashMenuIndex} onSelect={handleSlashSelect} onHover={setSlashMenuIndex} />
-
-      {/* Intent Catalog Panel */}
-      <AnimatePresence>
-        {showIntentPanel && (
-          <motion.div initial={{ opacity: 0, y: 10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 10 }} className="absolute bottom-full left-0 right-0 mb-2 z-50">
-            <IntentCatalogPanel onSelect={(text) => { setInputValue(text); setShowIntentPanel(false); inputRef.current?.focus(); }} />
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Resource Library Panel */}
-      <ResourceLibraryPanel
-        isOpen={showLibrary}
-        onClose={() => setShowLibrary(false)}
-        onLoadTemplate={(html) => {
-          // Send the template HTML as a message to trigger the preview
-          onSend(`/template ${html.slice(0, 100)}`);
-        }}
-        onOpenInstance={(id) => {
-          useMorphInstanceStore.getState().setActiveInstance(id);
-          if (setShowCanvas) setShowCanvas(true);
-        }}
-      />
-
-      <div className={`bg-white/80 dark:bg-surface-tertiary border border-black/[0.08] dark:border-border-default rounded-4xl flex flex-col p-2 shadow-sm dark:shadow-2xl transition-all duration-300
-        ${isVoiceActive ? 'h-full border-cyan-500/30' : 'focus-within:border-black/[0.12] dark:focus-within:border-border-strong focus-within:shadow-md dark:focus-within:shadow-lg'}`}>
-        <AnimatePresence mode="wait">
-          {!isVoiceActive ? (
-            <motion.div
-              key="text-mode"
-              initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }}
-              className="flex flex-col w-full h-full cursor-text"
-              onClick={e => { const ta = e.currentTarget.querySelector('textarea'); if (ta && e.target === e.currentTarget) ta.focus(); }}
-            >
-              {/* Textarea */}
-              <form onSubmit={handleSubmit} className="relative flex items-center px-3 sm:px-4 py-2 sm:py-3 min-h-[48px] sm:min-h-[60px]">
-                <textarea
-                  ref={inputRef}
-                  placeholder={isTranscribing ? 'Escuchando...' : rotatingPlaceholder}
-                  value={inputValue}
-                  onChange={e => setInputValue(e.target.value)}
-                  onKeyDown={handleKeyDown}
-                  rows={1}
-                  className="w-full bg-transparent text-text-primary placeholder-text-muted outline-hidden text-sm sm:text-[15px] leading-relaxed resize-none"
-                  disabled={isGenerating}
-                  style={{ maxHeight: '200px' }}
-                />
-                {/* Intent badge */}
-                {primaryIntent && !slashMenuOpen && (
-                  <div
-                    className="absolute right-4 top-1/2 -translate-y-1/2 flex items-center gap-1 px-2 py-1 rounded-full text-[10px] font-semibold border"
-                    style={{ background: `${primaryIntent.color}15`, borderColor: `${primaryIntent.color}30`, color: primaryIntent.color }}
-                  >
-                    <span>{primaryIntent.icon}</span>
-                    <span>{primaryIntent.label}</span>
-                  </div>
-                )}
-              </form>
-
-              {/* Bottom bar: attach + toolbar + actions */}
-              <div className="flex flex-wrap items-center justify-between px-2 pb-1 relative z-10 w-full gap-y-2">
-                {/* Left: library + attachment */}
-                <div className="flex items-center gap-1 shrink-0">
-                  <button
-                    type="button"
-                    onClick={() => { setShowLibrary(!showLibrary); setShowIntentPanel(false); }}
-                    className={`w-10 h-10 rounded-full flex items-center justify-center transition-colors
-                      ${showLibrary ? 'text-cyan-400 bg-cyan-500/10' : 'text-text-secondary hover:text-text-primary hover:bg-surface-glass'}`}
-                    title="Librería de recursos"
-                  >
-                    <FolderOpen size={20} />
-                  </button>
-                  <button type="button" className="w-10 h-10 rounded-full text-text-secondary hover:text-text-primary hover:bg-surface-glass flex items-center justify-center transition-colors" title="Adjuntar">
-                    <Paperclip size={20} />
-                  </button>
-                </div>
-
-                {/* Center: toolbar */}
-                <InputToolbar
-                  selectedModelId={selectedModelId}
-                  selectedModel={selectedModel}
-                  providerGroups={providerGroups}
-                  onModelSelect={selectModel}
-                  selectedShell={selectedShell}
-                  onShellSelect={setSelectedShell}
-                  showCanvas={showCanvas}
-                  setShowCanvas={setShowCanvas}
-                  prototypeBrand={prototypeBrand}
-                  setPrototypeBrand={setPrototypeBrand}
-                  intentEnabled={intentEnabled}
-                  onIntentToggle={() => setIntentEnabled(!intentEnabled)}
-                  showIntentPanel={showIntentPanel}
-                  onIntentPanelToggle={() => setShowIntentPanel(!showIntentPanel)}
-                />
-
-                {/* Right: actions */}
-                <InputActions
-                  inputHasText={!!inputValue.trim()}
-                  isGenerating={isGenerating}
-                  isTranscribing={isTranscribing}
-                  onToggleTranscribing={() => setIsTranscribing(!isTranscribing)}
-                  onSend={handleSendClick}
-                  setIsVoiceActive={setIsVoiceActive}
-                />
-              </div>
-            </motion.div>
-          ) : (
-            <VoiceLiveMode VoiceWidget={VoiceWidget} dynamicPersona={dynamicPersona} setSuggestions={setSuggestions} selectedVoice={selectedVoice} onClose={() => setIsVoiceActive?.(false)} />
-          )}
-        </AnimatePresence>
-      </div>
-      <div className="text-center mt-3">
-        <p className="text-[10px] md:text-[11px] text-text-muted font-medium tracking-wide">
-          Decido puede equivocarse. Considera revisar la información importante.
-        </p>
-      </div>
-    </motion.div>
-  );
-};