@decido/shell 1.0.0 → 4.0.1

package/src/components/controls/CreatorInputBar.tsx

@@ -1,144 +0,0 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import {
-    Wand2, Clock, Mic, MessageCircle, Terminal, Network,
-    Variable, Download, Layout, HelpCircle, Trash2
-} from 'lucide-react';
-import { useTimelineStore, useEngineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useUIComponentStore } from '../../store/useUIComponentStore';
-
-interface CreatorInputBarProps {
-    inputValue: string;
-    setInputValue: (val: string) => void;
-    isGenerating: boolean;
-    handleGeneratePlayground: () => void;
-    setIsVoiceActive: (active: boolean) => void;
-    prototypeBrand: string;
-    handleExport: () => void;
-}
-
-const CREATOR_COMMANDS = [
-    { cmd: '/add', args: '<type> [label]', desc: 'Agregar nodo', icon: <MessageCircle size={14} className="text-blue-400" /> },
-    { cmd: '/shell', args: '<action> [label]', desc: 'Nodo Shell', icon: <Terminal size={14} className="text-teal-400" /> },
-    { cmd: '/connect', args: '<nodeA> <nodeB>', desc: 'Conectar nodos', icon: <Network size={14} className="text-violet-400" /> },
-    { cmd: '/var', args: '<name> <value>', desc: 'Definir variable', icon: <Variable size={14} className="text-emerald-400" /> },
-    { cmd: '/export', args: '', desc: 'Exportar DSD', icon: <Download size={14} className="text-cyan-400" /> },
-    { cmd: '/ui', args: '[componentId]', desc: 'UI Components', icon: <Layout size={14} className="text-pink-400" /> },
-    { cmd: '/clear', args: '', desc: 'Limpiar nodos', icon: <Trash2 size={14} className="text-red-400" /> },
-    { cmd: '/help', args: '', desc: 'Ayuda', icon: <HelpCircle size={14} className="text-text-secondary" /> },
-];
-
-export const CreatorInputBar = React.memo(function CreatorInputBar({
-    inputValue = '', setInputValue, isGenerating = false, handleGeneratePlayground,
-    setIsVoiceActive, prototypeBrand = '', handleExport
-}: CreatorInputBarProps) {
-    const [slashOpen, setSlashOpen] = useState(false);
-    const [slashIdx, setSlashIdx] = useState(0);
-
-    const filteredCmds = useMemo(() => {
-        if (!inputValue.startsWith('/')) return [];
-        const q = inputValue.split(' ')[0].toLowerCase();
-        return CREATOR_COMMANDS.filter(c => c.cmd.startsWith(q));
-    }, [inputValue]);
-
-    useEffect(() => {
-        setSlashOpen(inputValue.startsWith('/') && filteredCmds.length > 0);
-        setSlashIdx(0);
-    }, [inputValue, filteredCmds.length]);
-
-    const handleCreatorSlash = useCallback(() => {
-        const parts = inputValue.trim().split(/\s+/);
-        const cmd = parts[0]?.toLowerCase();
-        if (cmd === '/add' || cmd === '/shell') {
-            const rawType = parts[1] || (cmd === '/shell' ? 'config' : 'dialogue');
-            const label = parts.slice(2).join(' ') || rawType;
-            const trackMap: Record<string, string> = {
-                'dialogue': 'dialogue', 'logic': 'logic', 'ui': 'ui', 'render': 'render', 'subflow': 'subflow', 'entry': 'entry', 'return': 'return', 'trigger': 'trigger', 'condition': 'condition', 'set': 'set',
-                'registerButton': 'shell:registerButton', 'activitybar': 'shell:registerButton', 'registerTab': 'shell:registerTab', 'tab': 'shell:registerTab',
-                'registerPanel': 'shell:registerPanel', 'panel': 'shell:registerPanel', 'registerSidebar': 'shell:registerSidebar', 'sidebar': 'shell:registerSidebar',
-                'registerStatusBar': 'shell:registerStatusBar', 'statusbar': 'shell:registerStatusBar', 'registerTopBar': 'shell:registerTopBar', 'topbar': 'shell:registerTopBar',
-                'registerAction': 'shell:registerAction', 'command': 'shell:registerAction', 'toggleSidebar': 'shell:toggleSidebar', 'togglePanel': 'shell:togglePanel',
-                'splitPane': 'shell:splitPane', 'focusTab': 'shell:focusTab', 'closeTab': 'shell:closeTab', 'setTheme': 'shell:setTheme', 'theme': 'shell:setTheme',
-                'applyPalette': 'shell:applyPalette', 'palette': 'shell:applyPalette', 'updateToken': 'shell:updateToken', 'token': 'shell:updateToken',
-                'notification': 'shell:notification', 'notify': 'shell:notification', 'modal': 'shell:modal', 'execCommand': 'shell:execCommand', 'exec': 'shell:execCommand',
-                'shortcut': 'shell:shortcut', 'emitEvent': 'shell:emitEvent', 'emit': 'shell:emitEvent', 'config': 'shell:config', 'shellConfig': 'shell:config',
-            };
-            const shellActionMap: Record<string, string> = {
-                'shell:registerButton': 'registerActivityBarItem', 'shell:registerTab': 'openTab', 'shell:registerPanel': 'registerPanelView',
-                'shell:registerSidebar': 'registerSidebarView', 'shell:registerStatusBar': 'registerStatusBarItem', 'shell:registerTopBar': 'registerTopBarItem',
-                'shell:registerAction': 'registerCommand', 'shell:toggleSidebar': 'toggleSidebar', 'shell:togglePanel': 'togglePanel',
-                'shell:splitPane': 'splitPane', 'shell:focusTab': 'focusTab', 'shell:closeTab': 'closeTab', 'shell:setTheme': 'setTheme',
-                'shell:applyPalette': 'applyPalette', 'shell:updateToken': 'updateToken', 'shell:notification': 'showNotification',
-                'shell:modal': 'showModal', 'shell:execCommand': 'executeCommand', 'shell:shortcut': 'registerShortcut', 'shell:emitEvent': 'emitEvent', 'shell:config': 'shellConfig',
-            };
-            let resolvedType = rawType;
-            if (cmd === '/shell' && !rawType.startsWith('shell:')) resolvedType = trackMap[rawType] || `shell:${rawType}`;
-            else resolvedType = trackMap[rawType] || rawType;
-
-            const newKf: any = { t: Date.now(), track: resolvedType, position: { x: 200 + Math.random() * 600, y: 100 + Math.random() * 400 }, label, state: label };
-            if (resolvedType === 'dialogue') { newKf.speech = label; newKf.actorId = 'assistant'; }
-            else if (resolvedType === 'subflow') { newKf.targetBlueprintId = ''; }
-            if (resolvedType.startsWith('shell:')) { newKf.track = 'shell'; newKf.type = resolvedType; newKf.shellAction = shellActionMap[resolvedType] || resolvedType.replace('shell:', ''); }
-            useTimelineStore.getState().addKeyframe(prototypeBrand, newKf);
-            usePlaygroundStore.getState().addLog(`✅ Nodo "${label}" (${resolvedType}) agregado al canvas`, 'success');
-        } else if (cmd === '/var') {
-            const varName = parts[1]; const varValue = parts.slice(2).join(' ');
-            if (varName) { useEngineStore.getState().setVariable(varName, varValue || ''); usePlaygroundStore.getState().addLog(`📊 Variable "${varName}" = "${varValue}"`, 'info'); }
-        } else if (cmd === '/export') { handleExport(); }
-        else if (cmd === '/ui') {
-            const comps = Object.values(useUIComponentStore.getState().components);
-            if (parts[1]) {
-                const comp = comps.find(c => c.id === parts[1] || c.name.toLowerCase().includes(parts[1].toLowerCase()));
-                if (comp) { useTimelineStore.getState().addKeyframe(prototypeBrand, { t: Date.now(), track: 'render' as const, position: { x: 200 + Math.random() * 600, y: 100 + Math.random() * 400 }, label: comp.name, state: comp.name, uiSchema: comp.schema, autoComplete: false }); usePlaygroundStore.getState().addLog(`🖼️ UI Component "${comp.name}" agregado`, 'success'); }
-            } else { usePlaygroundStore.getState().addLog(`🎨 UI Components:\n${comps.map(c => `• ${c.name} (${c.source})`).join('\n') || 'Ninguno disponible'}`, 'info'); }
-        } else if (cmd === '/clear') {
-            useTimelineStore.getState().setDynamicTimelines((prev: any) => ({ ...prev, [prototypeBrand]: { ...prev[prototypeBrand], keyframes: [], edges: [] } }));
-            usePlaygroundStore.getState().addLog('🗑️ Canvas limpiado', 'warning');
-        } else if (cmd === '/help') {
-            usePlaygroundStore.getState().addLog(`📋 Comandos Creator:\n${CREATOR_COMMANDS.map(c => `${c.cmd} ${c.args} — ${c.desc}`).join('\n')}`, 'info');
-        } else { return false; }
-        setInputValue('');
-        return true;
-    }, [inputValue, prototypeBrand, handleExport, setInputValue]);
-
-    const handleCreatorSubmit = useCallback(() => { inputValue.startsWith('/') ? handleCreatorSlash() : handleGeneratePlayground(); }, [inputValue, handleCreatorSlash, handleGeneratePlayground]);
-
-    const handleCreatorKeyDown = useCallback((e: React.KeyboardEvent) => {
-        if (slashOpen) {
-            if (e.key === 'ArrowDown') { e.preventDefault(); setSlashIdx(i => Math.min(i + 1, filteredCmds.length - 1)); }
-            else if (e.key === 'ArrowUp') { e.preventDefault(); setSlashIdx(i => Math.max(i - 1, 0)); }
-            else if (e.key === 'Enter' && filteredCmds[slashIdx]) { e.preventDefault(); setInputValue(filteredCmds[slashIdx].cmd + ' '); setSlashOpen(false); return; }
-            else if (e.key === 'Escape') { setSlashOpen(false); return; }
-        }
-        if (e.key === 'Enter' && !slashOpen && !isGenerating) handleCreatorSubmit();
-    }, [slashOpen, slashIdx, filteredCmds, isGenerating, handleCreatorSubmit, setInputValue]);
-
-    return (
-        <div className="relative">
-            <AnimatePresence>
-                {slashOpen && (
-                    <motion.div initial={{ opacity: 0, y: 8 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: 8 }} className="absolute bottom-full left-0 mb-2 w-full bg-surface-secondary/95 backdrop-blur-xl border border-border-default rounded-xl shadow-2xl shadow-black/50 overflow-hidden z-50">
-                        <div className="px-3 py-1.5 border-b border-border-subtle"><span className="text-[9px] font-bold text-text-muted uppercase tracking-widest">/ Comandos Creator</span></div>
-                        <div className="max-h-[200px] overflow-y-auto py-1">
-                            {filteredCmds.map((c, i) => (
-                                <button key={c.cmd} onClick={() => { setInputValue(c.cmd + ' '); setSlashOpen(false); }} className={`w-full flex items-center gap-2.5 px-3 py-2 text-xs transition-colors ${i === slashIdx ? 'bg-purple-500/15 text-text-primary' : 'text-text-secondary hover:text-text-primary hover:bg-surface-glass'}`}>
-                                    {c.icon}<span className="font-mono font-bold text-purple-300">{c.cmd}</span><span className="text-text-muted font-mono">{c.args}</span><span className="ml-auto text-[10px] text-text-muted truncate max-w-[150px]">{c.desc}</span>
-                                </button>
-                            ))}
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-            <div className="flex items-center gap-2 sm:gap-3 w-full bg-surface-overlay p-1.5 sm:p-2 rounded-xl border border-border-subtle focus-within:border-cyan-500/30 transition-colors mt-2">
-                <Wand2 size={20} className="text-purple-400 ml-2" />
-                <input type="text" placeholder="Escribe / para comandos, o un prompt AI..." value={inputValue} onChange={(e) => setInputValue(e.target.value)} onKeyDown={handleCreatorKeyDown} className="w-full bg-transparent text-text-primary placeholder-text-muted outline-hidden text-sm h-10" />
-                <button onClick={handleCreatorSubmit} disabled={isGenerating} className="px-3 sm:px-4 py-2 rounded-lg font-bold text-xs sm:text-sm transition-colors disabled:opacity-50 min-w-[70px] sm:min-w-[100px] flex justify-center items-center bg-purple-500/20 text-purple-400 hover:bg-purple-500/30">
-                    {isGenerating ? <Clock size={16} className="animate-spin" /> : "Enviar"}
-                </button>
-                <div className="w-px h-6 bg-surface-glass mx-1"></div>
-                <button onClick={() => setIsVoiceActive(true)} className="w-10 h-10 rounded-full flex items-center justify-center border transition-all shadow-[0_0_15px_rgba(6,182,212,0.15)] text-purple-400 bg-purple-500/10 border-purple-500/20 hover:bg-purple-500/20"><Mic size={18} /></button>
-            </div>
-        </div>
-    );
-});

package/src/components/controls/OSToolbar.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import {
-    Layers, Terminal, Volume2, VolumeX,
-    Minimize, Maximize, FolderOpen, TreePine
-} from 'lucide-react';
-import { useTimelineStore } from '@decido/engine';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-
-interface OSToolbarProps {
-    dynamicTimelines: any;
-    prototypeBrand: string;
-    showCanvas: boolean;
-    setShowCanvas: (show: boolean) => void;
-    isTerminalOpen: boolean;
-    setIsTerminalOpen: (open: boolean) => void;
-    isMuted: boolean;
-    setIsMuted: (muted: boolean) => void;
-    selectedVoice: string;
-    setSelectedVoice: (voice: string) => void;
-    isFullscreen: boolean;
-    toggleFullscreen: () => void;
-    handleExport: () => void;
-    config: any;
-    isBlueprintManagerOpen: boolean;
-    setIsBlueprintManagerOpen: (open: boolean) => void;
-    isTreeOpen: boolean;
-    setIsTreeOpen: (open: boolean) => void;
-}
-
-export const OSToolbar = React.memo(function OSToolbar({
-    dynamicTimelines, prototypeBrand, showCanvas, setShowCanvas,
-    isTerminalOpen, setIsTerminalOpen, isMuted, setIsMuted,
-    selectedVoice, setSelectedVoice, isFullscreen, toggleFullscreen,
-    handleExport, config, isBlueprintManagerOpen, setIsBlueprintManagerOpen,
-    isTreeOpen, setIsTreeOpen
-}: OSToolbarProps) {
-    return (
-        <div className="flex w-full overflow-x-auto custom-scrollbar pb-2 sm:pb-3 pt-1 mt-1 items-center justify-between gap-2 sm:gap-4">
-            <div className="flex items-center gap-1.5 sm:gap-2 min-w-max">
-                <button onClick={() => setIsBlueprintManagerOpen(!isBlueprintManagerOpen)} className="bg-surface-secondary hover:bg-surface-tertiary border border-border-default rounded-lg text-xs font-medium text-text-primary px-3 py-2 outline-hidden cursor-pointer hover:border-cyan-400/50 transition-colors flex items-center gap-2">
-                    <FolderOpen size={14} className="text-cyan-400" />
-                    <span className="max-w-[120px] truncate">{(dynamicTimelines[prototypeBrand] as any)?.name || prototypeBrand}</span>
-                    <span className="text-[10px] text-text-muted font-mono">{(dynamicTimelines[prototypeBrand] as any)?.keyframes?.length || 0}</span>
-                </button>
-                <button onClick={() => setIsTreeOpen(!isTreeOpen)} className="bg-surface-secondary hover:bg-surface-tertiary border border-border-default rounded-lg text-xs font-medium text-text-primary px-2.5 py-2 outline-hidden cursor-pointer hover:border-emerald-400/50 transition-colors flex items-center gap-1.5" title="Jerarquía de dependencias">
-                    <TreePine size={14} className="text-emerald-400" />
-                </button>
-                <div className="w-px h-6 bg-surface-glass mx-1"></div>
-                <button onClick={() => setShowCanvas(!showCanvas)} className={`px-3 py-2 rounded-lg transition-all text-xs font-medium flex items-center gap-2 shrink-0 ${showCanvas ? 'text-text-primary bg-surface-glass' : 'text-text-secondary hover:text-cyan-400 hover:bg-surface-glass border border-transparent'}`} title="Panel 3D / Diagrama">
-                    <Layers size={14} /> <span className="hidden sm:inline">Visualizador</span>
-                </button>
-                <button onClick={() => setIsTerminalOpen(!isTerminalOpen)} className={`px-3 py-2 rounded-lg transition-all text-xs font-medium flex items-center gap-2 shrink-0 ${isTerminalOpen ? 'text-text-primary bg-surface-glass' : 'text-text-secondary hover:text-purple-400 hover:bg-surface-glass border border-transparent'}`} title="Panel de Logs">
-                    <Terminal size={14} /> <span className="hidden sm:inline">Logs OS</span>
-                </button>
-                <div className="w-px h-6 bg-surface-glass mx-1"></div>
-                <button onClick={() => setIsMuted(!isMuted)} className={`px-3 py-2 rounded-lg transition-all text-xs font-medium flex items-center justify-center shrink-0 ${!isMuted ? 'text-text-primary bg-surface-glass' : 'text-text-muted hover:text-red-400 hover:bg-surface-glass border border-transparent'}`} title={isMuted ? "Activar Audio" : "Silenciar"}>
-                    {!isMuted ? <Volume2 size={16} /> : <VolumeX size={16} />}
-                </button>
-                <select value={selectedVoice} onChange={(e) => setSelectedVoice(e.target.value)} className="bg-surface-secondary hover:bg-surface-tertiary border border-border-default rounded-lg text-xs font-medium text-text-primary px-3 py-2 outline-hidden cursor-pointer focus:border-cyan-400 transition-colors">
-                    {config?.voices?.map((v: string) => <option key={v} value={v}>Voz: {v}</option>)}
-                </select>
-                <button onClick={toggleFullscreen} className="px-3 py-2 rounded-lg transition-all text-xs font-medium flex items-center justify-center shrink-0 text-text-muted hover:text-text-primary hover:bg-surface-glass border border-transparent" title="Pantalla Completa">
-                    {isFullscreen ? <Minimize size={16} /> : <Maximize size={16} />}
-                </button>
-            </div>
-            <div className="flex items-center gap-2 sm:gap-3 shrink-0 pr-1">
-                <label className="flex items-center gap-2 shrink-0 px-4 py-2 rounded-xl font-medium text-sm transition-colors border bg-cyan-500/10 text-cyan-500 hover:bg-cyan-500/20 border-transparent cursor-pointer" title="Importar DSD">
-                    <Layers size={16} /> <span className="hidden sm:inline">Importar DSD</span>
-                    <input type="file" accept=".dsd,.json" className="hidden" onChange={(e) => {
-                        const file = e.target.files?.[0]; if (!file) return;
-                        const reader = new FileReader();
-                        reader.onload = (ev) => {
-                            try {
-                                const json = JSON.parse(ev.target?.result as string);
-                                if (json.format === 'decido-standard-document' && json.blueprint) {
-                                    useTimelineStore.getState().setDynamicTimelines((prev: any) => ({ ...prev, [json.brand || prototypeBrand]: json.blueprint }));
-                                    usePlaygroundStore.getState().addLog(`Se ha importado el blueprint de ${json.brand} (${json.blueprint.keyframes.length} nodos)`, 'success');
-                                } else { usePlaygroundStore.getState().addLog("El archivo no es un DSD válido.", "error"); }
-                            } catch { usePlaygroundStore.getState().addLog("Error al parsear archivo DSD.", "error"); }
-                        };
-                        reader.readAsText(file); e.target.value = '';
-                    }} />
-                </label>
-                <button onClick={handleExport} className="flex items-center gap-2 shrink-0 px-4 py-2 rounded-xl font-medium text-sm transition-colors border bg-purple-500/10 text-purple-400 hover:bg-purple-500/20 border-transparent" title="Exportar DSD">
-                    <Layers size={16} /> <span className="hidden sm:inline">Exportar DSD</span>
-                </button>
-            </div>
-        </div>
-    );
-});

package/src/components/controls/TimelineTape.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import { Pause, Play, RotateCcw } from 'lucide-react';
-
-interface TimelineTapeProps {
-    currentTime: number;
-    seekTime: (time: number) => void;
-    playbackSpeed: number;
-    setPlaybackSpeed: (speed: number) => void;
-    isPlaying: boolean;
-    setIsPlaying: (playing: boolean) => void;
-    handleResetPlayground: () => void;
-    currentTimeline: any;
-}
-
-export const TimelineTape = React.memo(function TimelineTape({
-    currentTime, seekTime, playbackSpeed, setPlaybackSpeed,
-    isPlaying, setIsPlaying, handleResetPlayground, currentTimeline
-}: TimelineTapeProps) {
-    return (
-        <div className="flex items-center gap-3 w-full bg-surface-overlay p-2 rounded-xl border border-border-subtle">
-            <span className="text-xs font-mono text-text-secondary w-10 text-right">{currentTime.toFixed(1)}s</span>
-            <div className="relative flex-1 h-6 flex items-center group cursor-pointer">
-                <div className="absolute w-full h-1.5 bg-surface-glass rounded-full overflow-hidden group-hover:bg-surface-glass transition-colors">
-                    <div className="h-full bg-purple-500/50 group-hover:bg-purple-400 transition-colors" style={{ width: `${(currentTime / Math.max(currentTimeline.duration, 1)) * 100}%` }}></div>
-                </div>
-                <input type="range" min="0" max={currentTimeline.duration} step="0.1" value={currentTime} onChange={(e) => seekTime(parseFloat(e.target.value))} className="absolute w-full h-full opacity-0 cursor-pointer z-20" />
-                {currentTimeline.keyframes.map((kf: any, i: number) => (
-                    <div key={i} className="absolute top-1/2 -translate-y-1/2 w-2 h-2 rounded-full border border-[#1e1e1f] z-10 pointer-events-none transition-all group-hover:scale-125"
-                        style={{ left: `calc(${(kf.t / currentTimeline.duration) * 100}% - 4px)`, backgroundColor: currentTime >= kf.t ? '#a855f7' : '#52525b' }}>
-                    </div>
-                ))}
-            </div>
-            <span className="text-xs font-mono text-text-muted w-10">{currentTimeline.duration.toFixed(1)}s</span>
-            <div className="flex gap-1 border-l border-border-default pl-2 ml-1">
-                <button onClick={() => setIsPlaying(!isPlaying)} className="w-8 h-8 rounded-lg bg-surface-glass hover:bg-purple-500/20 text-text-primary flex items-center justify-center transition-colors">
-                    {isPlaying ? <Pause size={14} /> : <Play size={14} className="ml-0.5" />}
-                </button>
-                <button onClick={() => setPlaybackSpeed(playbackSpeed === 1 ? 2 : 1)} className="w-8 h-8 rounded-lg hover:bg-surface-glass text-text-secondary flex items-center justify-center transition-colors text-[10px] font-bold">{playbackSpeed}x</button>
-                <button onClick={handleResetPlayground} className="w-8 h-8 rounded-lg hover:bg-surface-glass text-text-secondary flex items-center justify-center transition-colors" title="Rewind & Reset Engine"><RotateCcw size={14} /></button>
-            </div>
-        </div>
-    );
-});

package/src/components/debug/ActionTimelineTab.tsx

@@ -1,111 +0,0 @@
-import React, { useMemo, useRef, useEffect } from 'react';
-import { Clock, Pause, Play, RotateCcw, Search } from 'lucide-react';
-import { useActionTimelineStore, type TimelineEvent } from '../../store/useActionTimelineStore';
-
-const STORE_COLORS: Record<string, string> = {
-    morph: 'border-l-violet-500 bg-violet-500/5',
-    layout: 'border-l-emerald-500 bg-emerald-500/5',
-    gemini: 'border-l-blue-500 bg-blue-500/5',
-    chat: 'border-l-cyan-500 bg-cyan-500/5',
-    store: 'border-l-amber-500 bg-amber-500/5',
-    engine: 'border-l-orange-500 bg-orange-500/5',
-    network: 'border-l-teal-500 bg-teal-500/5',
-    shell: 'border-l-pink-500 bg-pink-500/5',
-    system: 'border-l-text-muted bg-surface-glass',
-};
-
-const STORE_BADGES: Record<string, string> = {
-    morph: 'bg-violet-500/20 text-violet-400',
-    layout: 'bg-emerald-500/20 text-emerald-400',
-    gemini: 'bg-blue-500/20 text-blue-400',
-    chat: 'bg-cyan-500/20 text-cyan-400',
-    store: 'bg-amber-500/20 text-amber-400',
-    engine: 'bg-orange-500/20 text-orange-400',
-    network: 'bg-teal-500/20 text-teal-400',
-    shell: 'bg-pink-500/20 text-pink-400',
-    system: 'bg-surface-glass text-text-secondary',
-};
-
-function TimelineCard({ event }: { event: TimelineEvent }) {
-    const colors = STORE_COLORS[event.storeName] || 'border-l-text-muted bg-surface-glass';
-    const badge = STORE_BADGES[event.storeName] || 'bg-surface-glass text-text-secondary';
-
-    return (
-        <div className={`border-l-2 ${colors} px-3 py-1.5 hover:bg-surface-glass transition-colors`}>
-            <div className="flex items-center gap-2 text-[10px]">
-                <span className="text-text-muted font-mono shrink-0 w-[65px]">{event.timestamp}</span>
-                <span className={`px-1.5 py-0.5 rounded text-[8px] font-bold uppercase tracking-wider ${badge}`}>{event.storeName}</span>
-                <span className="font-semibold text-text-primary truncate">{event.actionName}</span>
-                {event.level === 'warn' && <span className="text-[8px] text-amber-400">⚠</span>}
-                {event.level === 'error' && <span className="text-[8px] text-red-400">✕</span>}
-            </div>
-            {event.data && (
-                <div className="mt-0.5 text-[9px] text-text-muted font-mono truncate max-w-full">
-                    {typeof event.data === 'object' ? JSON.stringify(event.data) : String(event.data)}
-                </div>
-            )}
-        </div>
-    );
-}
-
-export function ActionTimelineTab() {
-    const events = useActionTimelineStore(s => s.events);
-    const isPaused = useActionTimelineStore(s => s.isPaused);
-    const filter = useActionTimelineStore(s => s.filter);
-    const { clear, togglePause, setFilter } = useActionTimelineStore();
-    const scrollRef = useRef<HTMLDivElement>(null);
-
-    const filtered = useMemo(() => {
-        if (!filter) return events;
-        const q = filter.toLowerCase();
-        return events.filter(e =>
-            e.storeName.includes(q) || e.actionName.toLowerCase().includes(q)
-        );
-    }, [events, filter]);
-
-    // Auto-scroll
-    useEffect(() => {
-        if (!isPaused && scrollRef.current) {
-            scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-        }
-    }, [filtered, isPaused]);
-
-    return (
-        <div className="flex flex-col h-full">
-            {/* Toolbar */}
-            <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border-subtle shrink-0">
-                <Clock size={12} className="text-amber-400" />
-                <span className="text-[10px] font-bold text-text-secondary uppercase tracking-widest">Timeline</span>
-                <span className="text-[9px] text-text-muted font-mono">{filtered.length}/{events.length}</span>
-                {isPaused && <span className="px-1.5 py-0.5 rounded text-[8px] font-bold bg-amber-500/20 text-amber-400 animate-pulse">PAUSADO</span>}
-                <div className="flex-1" />
-                <div className="flex items-center bg-surface-secondary border border-border-default rounded px-1.5 gap-1">
-                    <Search size={10} className="text-text-muted" />
-                    <input
-                        value={filter}
-                        onChange={e => setFilter(e.target.value)}
-                        placeholder="Filtrar..."
-                        className="bg-transparent text-[9px] text-text-primary outline-hidden w-24 py-0.5"
-                    />
-                </div>
-                <button onClick={togglePause} className={`p-1 rounded transition-colors ${isPaused ? 'bg-amber-500/10 text-amber-400' : 'text-text-muted hover:text-text-secondary hover:bg-surface-glass'}`} title={isPaused ? 'Reanudar' : 'Pausar'}>
-                    {isPaused ? <Play size={10} /> : <Pause size={10} />}
-                </button>
-                <button onClick={clear} className="p-0.5 rounded hover:bg-surface-glass text-text-muted hover:text-text-secondary" title="Limpiar">
-                    <RotateCcw size={10} />
-                </button>
-            </div>
-
-            {/* Timeline */}
-            <div ref={scrollRef} className="flex-1 overflow-y-auto custom-scrollbar">
-                {filtered.length === 0 ? (
-                    <div className="flex items-center justify-center h-full text-text-muted text-[10px] italic">
-                        {events.length === 0 ? 'Esperando acciones...' : 'Sin resultados para el filtro'}
-                    </div>
-                ) : (
-                    filtered.map(evt => <TimelineCard key={evt.id} event={evt} />)
-                )}
-            </div>
-        </div>
-    );
-}