@decido/shell 1.0.0 → 4.0.1

package/src/components/debug/StoresTab.tsx

@@ -1,255 +0,0 @@
-import React, { useState, useMemo, useCallback, useSyncExternalStore } from 'react';
-import { Database, Zap, ChevronRight, ChevronDown, ToggleLeft, ToggleRight, Camera, ArrowLeftRight, Download, Upload } from 'lucide-react';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useEngineStore, useTimelineStore, useUserStateStore } from '@decido/engine';
-import { useMorphologyStore } from '../../store/useMorphologyStore';
-import { useUIComponentStore } from '../../store/useUIComponentStore';
-
-// ─── Store Registry ───
-interface StoreEntry {
-    name: string;
-    group: 'shell' | 'studio';
-    store: any;
-}
-
-let _shellStores: StoreEntry[] | null = null;
-function getShellStores(): StoreEntry[] {
-    if (_shellStores) return _shellStores;
-    // Shell stores are injected by the host app via a global registry
-    const registry = (globalThis as any).__DECIDO_SHELL_STORES__ as StoreEntry[] | undefined;
-    _shellStores = registry || [];
-    return _shellStores;
-}
-
-const STUDIO_STORES: StoreEntry[] = [
-    { name: 'Playground', group: 'studio', store: usePlaygroundStore },
-    { name: 'Engine', group: 'studio', store: useEngineStore },
-    { name: 'Timeline', group: 'studio', store: useTimelineStore },
-    { name: 'Morphology', group: 'studio', store: useMorphologyStore },
-    { name: 'UserState', group: 'studio', store: useUserStateStore },
-    { name: 'UIComponents', group: 'studio', store: useUIComponentStore },
-];
-
-// ─── Recursive Value Editor ───
-function ValueEditor({ value, path, onUpdate, depth = 0 }: { value: any; path: string; onUpdate: (path: string, newValue: any) => void; depth?: number }) {
-    const [collapsed, setCollapsed] = useState(depth > 1);
-    if (value === null || value === undefined) return <span className="text-text-muted italic text-[10px] font-mono">{String(value)}</span>;
-    if (typeof value === 'function') return null;
-    if (typeof value === 'boolean') {
-        return (
-            <button onClick={() => onUpdate(path, !value)} className={`flex items-center gap-1 text-[10px] font-mono transition-colors ${value ? 'text-emerald-400' : 'text-text-muted'}`}>
-                {value ? <ToggleRight size={14} /> : <ToggleLeft size={14} />}{String(value)}
-            </button>
-        );
-    }
-    if (typeof value === 'number') return <input type="number" value={value} onChange={e => onUpdate(path, Number(e.target.value))} className="bg-surface-tertiary border border-border-default rounded px-1.5 py-0.5 text-[10px] font-mono text-cyan-300 w-24 outline-hidden focus:border-cyan-500/50" />;
-    if (typeof value === 'string') return <input type="text" value={value} onChange={e => onUpdate(path, e.target.value)} className="bg-surface-tertiary border border-border-default rounded px-1.5 py-0.5 text-[10px] font-mono text-amber-300 flex-1 min-w-[80px] max-w-[300px] outline-hidden focus:border-amber-500/50" />;
-
-    const tag = Object.prototype.toString.call(value);
-    if (tag === '[object Map]') {
-        const entries: [any, any][] = Array.from((value as globalThis.Map<any, any>).entries());
-        return (
-            <div className="pl-3 border-l border-border-subtle">
-                <button onClick={() => setCollapsed(!collapsed)} className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary">{collapsed ? <ChevronRight size={10} /> : <ChevronDown size={10} />}<span className="text-violet-400">Map</span>({entries.length})</button>
-                {!collapsed && entries.map((entry, i) => <div key={i} className="flex items-start gap-2 py-0.5 pl-2"><span className="text-[10px] text-text-muted font-mono shrink-0">{String(entry[0])}:</span><ValueEditor value={entry[1]} path={`${path}.${String(entry[0])}`} onUpdate={() => {}} depth={depth + 1} /></div>)}
-            </div>
-        );
-    }
-    if (tag === '[object Set]') {
-        const items: any[] = Array.from(value as globalThis.Set<any>);
-        return (
-            <div className="pl-3 border-l border-border-subtle">
-                <button onClick={() => setCollapsed(!collapsed)} className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary">{collapsed ? <ChevronRight size={10} /> : <ChevronDown size={10} />}<span className="text-violet-400">Set</span>({items.length})</button>
-                {!collapsed && items.map((v, i) => <div key={i} className="pl-2 py-0.5"><ValueEditor value={v} path={`${path}[${i}]`} onUpdate={() => {}} depth={depth + 1} /></div>)}
-            </div>
-        );
-    }
-    if (Array.isArray(value)) {
-        return (
-            <div className="pl-3 border-l border-border-subtle">
-                <button onClick={() => setCollapsed(!collapsed)} className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary">{collapsed ? <ChevronRight size={10} /> : <ChevronDown size={10} />}<span className="text-blue-400">Array</span><span className="text-text-muted">[{value.length}]</span></button>
-                {!collapsed && value.slice(0, 50).map((item, i) => <div key={i} className="flex items-start gap-2 py-0.5 pl-2"><span className="text-[9px] text-text-muted font-mono shrink-0 w-4 text-right">{i}</span><ValueEditor value={item} path={`${path}[${i}]`} onUpdate={onUpdate} depth={depth + 1} /></div>)}
-                {value.length > 50 && <span className="text-[9px] text-text-muted pl-2">... +{value.length - 50} más</span>}
-            </div>
-        );
-    }
-    if (typeof value === 'object') {
-        const entries = Object.entries(value).filter(([, v]) => typeof v !== 'function');
-        return (
-            <div className="pl-3 border-l border-border-subtle">
-                <button onClick={() => setCollapsed(!collapsed)} className="flex items-center gap-1 text-[10px] text-text-muted hover:text-text-primary">{collapsed ? <ChevronRight size={10} /> : <ChevronDown size={10} />}<span className="text-orange-400">{`{${entries.length}}`}</span></button>
-                {!collapsed && entries.map(([k, v]) => <div key={k} className="flex items-start gap-2 py-0.5 pl-2"><span className="text-[10px] text-text-secondary font-mono shrink-0">{k}:</span><ValueEditor value={v} path={`${path}.${k}`} onUpdate={onUpdate} depth={depth + 1} /></div>)}
-            </div>
-        );
-    }
-    return <span className="text-text-muted text-[10px] font-mono">{String(value)}</span>;
-}
-
-// ─── Stores Tab ───
-export function StoresTab() {
-    const allStores = useMemo(() => [...getShellStores(), ...STUDIO_STORES], []);
-    const [activeStore, setActiveStore] = useState(allStores[0]?.name || '');
-    const entry = useMemo(() => allStores.find(s => s.name === activeStore), [allStores, activeStore]);
-    const storeSnapshot = useSyncExternalStore(
-        useCallback((cb: () => void) => entry?.store?.subscribe?.(cb) || (() => {}), [entry]),
-        useCallback(() => entry?.store?.getState?.() ?? {}, [entry])
-    );
-    const { stateEntries, actionEntries } = useMemo(() => {
-        const stateE: [string, any][] = []; const actionE: [string, Function][] = [];
-        for (const [k, v] of Object.entries(storeSnapshot)) { if (typeof v === 'function') actionE.push([k, v]); else stateE.push([k, v]); }
-        return { stateEntries: stateE, actionEntries: actionE };
-    }, [storeSnapshot]);
-    const handleUpdate = useCallback((path: string, newValue: any) => {
-        if (!entry) return;
-        const parts = path.split('.'); const topKey = parts[1]; if (!topKey) return;
-        if (parts.length === 2) { entry.store.setState({ [topKey]: newValue }); } else {
-            const current = entry.store.getState()[topKey];
-            try { const clone = JSON.parse(JSON.stringify(current)); let target = clone; for (let i = 2; i < parts.length - 1; i++) target = target[parts[i].replace(/\[(\d+)\]/, '.$1')]; const lastKey = parts[parts.length - 1].replace(/\[(\d+)\]/, '$1'); target[lastKey] = newValue; entry.store.setState({ [topKey]: clone }); } catch { entry.store.setState({ [topKey]: newValue }); }
-        }
-    }, [entry]);
-    const [actionFeedback, setActionFeedback] = useState<string | null>(null);
-
-    // Sprint AU: Snapshot/Diff
-    interface Snapshot { id: number; label: string; data: Record<string, any> }
-    const [snapshots, setSnapshots] = useState<Snapshot[]>([]);
-    const [showDiff, setShowDiff] = useState<number | null>(null);
-
-    return (
-        <div className="flex h-full">
-            <div className="w-32 shrink-0 border-r border-border-subtle overflow-y-auto bg-surface-primary/50">
-                {['shell', 'studio'].map(group => {
-                    const groupStores = allStores.filter(s => s.group === group);
-                    if (groupStores.length === 0) return null;
-                    return (
-                        <div key={group}>
-                            <div className="px-2 py-1 text-[8px] font-bold text-text-muted uppercase tracking-widest">{group}</div>
-                            {groupStores.map(s => (
-                                <button key={s.name} onClick={() => setActiveStore(s.name)} className={`w-full text-left px-2 py-1.5 text-[10px] font-semibold transition-all ${activeStore === s.name ? 'bg-emerald-500/10 text-emerald-400 border-r-2 border-emerald-400' : 'text-text-muted hover:text-text-primary hover:bg-surface-glass'}`}>{s.name}</button>
-                            ))}
-                        </div>
-                    );
-                })}
-            </div>
-            <div className="flex-1 overflow-y-auto custom-scrollbar p-3 space-y-3">
-                <div>
-                    <div className="text-[10px] font-bold text-text-secondary uppercase tracking-widest mb-2 flex items-center gap-1"><Database size={10} /> Estado ({stateEntries.length})</div>
-                    <div className="space-y-1">
-                        {stateEntries.map(([key, value]) => (
-                            <div key={key} className="flex items-start gap-2 py-0.5">
-                                <span className="text-[10px] text-text-primary font-mono font-semibold shrink-0 min-w-[100px]">{key}</span>
-                                <ValueEditor value={value} path={`root.${key}`} onUpdate={handleUpdate} depth={0} />
-                            </div>
-                        ))}
-                    </div>
-                </div>
-                {actionEntries.length > 0 && (
-                    <div>
-                        <div className="text-[10px] font-bold text-text-secondary uppercase tracking-widest mb-2 flex items-center gap-1"><Zap size={10} /> Acciones ({actionEntries.length})</div>
-                        <div className="flex flex-wrap gap-1">
-                            {actionEntries.map(([name, fn]) => (
-                                <button key={name} onClick={() => { try { const r = fn(); if (r instanceof Promise) r.catch((e: any) => setActionFeedback(`❌ ${name}: ${e.message}`)); setActionFeedback(`✅ ${name}()`); } catch (e: any) { setActionFeedback(`❌ ${name}: ${e.message}`); } setTimeout(() => setActionFeedback(null), 2000); }} className="px-2 py-1 rounded text-[9px] font-mono font-bold bg-surface-glass text-text-secondary hover:text-emerald-400 hover:bg-emerald-500/10 border border-border-subtle hover:border-emerald-500/20 transition-all" title={`Ejecutar ${name}()`}>▶ {name}</button>
-                            ))}
-                        </div>
-                        {actionFeedback && <div className="mt-2 text-[10px] font-mono text-text-secondary animate-pulse">{actionFeedback}</div>}
-                    </div>
-                )}
-
-                {/* Sprint AU: Snapshot/Diff */}
-                <div className="border-t border-border-subtle pt-3 mt-3">
-                    <div className="text-[10px] font-bold text-text-secondary uppercase tracking-widest mb-2 flex items-center gap-1">
-                        <Camera size={10} /> Snapshots
-                    </div>
-                    <div className="flex flex-wrap gap-1 mb-2">
-                        <button
-                            onClick={() => {
-                                if (!entry) return;
-                                const state = entry.store.getState();
-                                const snap: Record<string, any> = {};
-                                for (const [k, v] of Object.entries(state)) {
-                                    if (typeof v !== 'function') snap[k] = v;
-                                }
-                                setSnapshots(prev => [...prev, {
-                                    id: Date.now(),
-                                    label: `${activeStore} @ ${new Date().toLocaleTimeString()}`,
-                                    data: JSON.parse(JSON.stringify(snap, (_, v) => {
-                                        if (v instanceof Map) return Object.fromEntries(v);
-                                        if (v instanceof Set) return Array.from(v);
-                                        return v;
-                                    })),
-                                }]);
-                            }}
-                            className="px-2 py-1 rounded text-[9px] font-mono font-bold bg-violet-500/10 text-violet-400 hover:bg-violet-500/20 border border-violet-500/20"
-                        >
-                            📸 Snapshot
-                        </button>
-                        {snapshots.length > 0 && showDiff === null && (
-                            <button
-                                onClick={() => setShowDiff(snapshots[snapshots.length - 1].id)}
-                                className="px-2 py-1 rounded text-[9px] font-mono font-bold bg-cyan-500/10 text-cyan-400 hover:bg-cyan-500/20 border border-cyan-500/20"
-                            >
-                                <ArrowLeftRight size={10} className="inline mr-1" />Diff vs último
-                            </button>
-                        )}
-                        {showDiff !== null && (
-                            <button onClick={() => setShowDiff(null)} className="px-2 py-1 rounded text-[9px] font-mono bg-surface-tertiary text-text-secondary hover:bg-surface-tertiary">
-                                Cerrar diff
-                            </button>
-                        )}
-                        {snapshots.length > 0 && (
-                            <button
-                                onClick={() => {
-                                    const blob = new Blob([JSON.stringify(snapshots, null, 2)], { type: 'application/json' });
-                                    const url = URL.createObjectURL(blob);
-                                    const a = document.createElement('a'); a.href = url; a.download = `snapshots-${activeStore}.json`; a.click();
-                                    URL.revokeObjectURL(url);
-                                }}
-                                className="px-2 py-1 rounded text-[9px] font-mono text-text-muted hover:text-text-primary hover:bg-surface-glass"
-                            >
-                                <Download size={10} className="inline mr-1" />Export
-                            </button>
-                        )}
-                    </div>
-                    {/* Snapshot list */}
-                    {snapshots.map((snap, i) => (
-                        <div key={snap.id} className="flex items-center gap-2 py-0.5 text-[9px]">
-                            <span className="text-text-muted font-mono">{snap.label}</span>
-                            <button onClick={() => setShowDiff(showDiff === snap.id ? null : snap.id)} className={`px-1.5 py-0.5 rounded font-bold ${showDiff === snap.id ? 'bg-cyan-500/20 text-cyan-400' : 'text-text-muted hover:text-cyan-400'}`}>
-                                diff
-                            </button>
-                            <button onClick={() => setSnapshots(prev => prev.filter(s => s.id !== snap.id))} className="text-text-muted hover:text-red-400">×</button>
-                        </div>
-                    ))}
-                    {/* Diff view */}
-                    {showDiff !== null && (() => {
-                        const snap = snapshots.find(s => s.id === showDiff);
-                        if (!snap) return null;
-                        const current: Record<string, any> = {};
-                        for (const [k, v] of stateEntries) current[k] = v;
-                        const allKeys = new Set([...Object.keys(snap.data), ...Object.keys(current)]);
-                        return (
-                            <div className="mt-2 bg-surface-primary rounded border border-border-subtle p-2 max-h-[200px] overflow-y-auto custom-scrollbar">
-                                <div className="text-[8px] text-text-muted mb-1">Diff: {snap.label} → actual</div>
-                                {Array.from(allKeys).map(key => {
-                                    const oldVal = JSON.stringify(snap.data[key]);
-                                    const newVal = JSON.stringify(current[key], (_, v) => {
-                                        if (v instanceof Map) return Object.fromEntries(v);
-                                        if (v instanceof Set) return Array.from(v);
-                                        return v;
-                                    });
-                                    if (oldVal === newVal) return null;
-                                    return (
-                                        <div key={key} className="py-0.5 font-mono text-[9px]">
-                                            <span className="text-text-secondary font-semibold">{key}:</span>
-                                            {oldVal !== undefined && <div className="text-red-400/70 pl-3">- {oldVal?.slice(0, 100)}</div>}
-                                            {newVal !== undefined && <div className="text-emerald-400/70 pl-3">+ {newVal?.slice(0, 100)}</div>}
-                                        </div>
-                                    );
-                                })}
-                            </div>
-                        );
-                    })()}
-                </div>
-            </div>
-        </div>
-    );
-}

package/src/components/debug/TopologyTab.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { ArrowRight, Circle } from 'lucide-react';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useTimelineStore } from '@decido/engine';
-import { useEngineStore } from '@decido/engine';
-import { TRACK_CONFIG } from './debugConfig';
-
-export function TopologyTab() {
-    const prototypeBrand = usePlaygroundStore(s => s.prototypeBrand);
-    const timelines = useTimelineStore(s => s.timelines);
-    const activeNodeIds = useEngineStore(s => s.activeNodeIds);
-    const flow = timelines[prototypeBrand];
-
-    if (!flow) return <div className="flex items-center justify-center h-full text-text-muted text-xs font-mono">Sin blueprint activo</div>;
-
-    const kfs = flow.keyframes || [];
-    const edges = flow.edges || [];
-    const activeSet = new Set(activeNodeIds);
-
-    return (
-        <div className="h-full overflow-y-auto custom-scrollbar p-3">
-            <div className="text-[10px] font-bold text-text-muted uppercase tracking-widest mb-3">
-                Grafo: {(flow as any).name || prototypeBrand} · {kfs.length} nodos · {edges.length} aristas
-            </div>
-            <div className="space-y-1">
-                {kfs.map((kf: any) => {
-                    const cfg = TRACK_CONFIG[kf.track] || { icon: Circle, color: 'text-text-secondary', label: kf.track };
-                    const Icon = cfg.icon;
-                    const isActive = activeSet.has(kf.id);
-                    const outEdges = edges.filter((e: any) => e.source === kf.id);
-                    return (
-                        <div key={kf.id} className={`group rounded-lg border transition-all ${isActive ? 'bg-cyan-500/10 border-cyan-500/30 ring-1 ring-cyan-500/20' : 'bg-surface-glass border-border-subtle hover:bg-surface-glass'}`}>
-                            <div className="flex items-center gap-2 px-3 py-2">
-                                <Icon size={13} className={cfg.color} />
-                                <span className={`text-[11px] font-semibold flex-1 ${isActive ? 'text-cyan-300' : 'text-text-primary'}`}>{kf.label || kf.state || kf.id}</span>
-                                <span className="text-[9px] text-text-muted font-mono">{kf.track}</span>
-                                {isActive && <span className="w-2 h-2 rounded-full bg-cyan-400 animate-pulse" />}
-                            </div>
-                            {outEdges.length > 0 && (
-                                <div className="px-3 pb-2 flex flex-wrap gap-1">
-                                    {outEdges.map((e: any, i: number) => {
-                                        const target = kfs.find((k: any) => k.id === e.target);
-                                        return (
-                                            <span key={i} className="inline-flex items-center gap-1 text-[9px] text-text-muted bg-surface-glass rounded px-1.5 py-0.5">
-                                                <ArrowRight size={8} className="text-text-muted" />
-                                                {target?.label || target?.state || e.target}
-                                                {e.sourceHandle && e.sourceHandle !== 'success' && <span className="text-amber-500/70">({e.sourceHandle})</span>}
-                                            </span>
-                                        );
-                                    })}
-                                </div>
-                            )}
-                        </div>
-                    );
-                })}
-            </div>
-        </div>
-    );
-}

package/src/components/debug/debugConfig.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import {
-    Info, AlertTriangle, AlertCircle, Bug,
-    Zap, MessageSquare, Settings, GitBranch,
-    ArrowRight, Circle, Map
-} from 'lucide-react';
-import { DebugTab, LogLevel, DebugLogEntry } from '../../store/useDebugPanelStore';
-
-// ─── Tab Config ───
-export const TABS: { id: DebugTab; label: string; icon: React.ComponentType<any>; color: string }[] = [
-    { id: 'logs', label: 'Logs', icon: Bug, color: 'text-green-400' },
-    { id: 'flow-health', label: 'Health', icon: () => <span>❤</span>, color: 'text-cyan-400' },
-    { id: 'topology', label: 'Topology', icon: Map, color: 'text-purple-400' },
-    { id: 'replay', label: 'Replay', icon: () => <span>▶</span>, color: 'text-amber-400' },
-    { id: 'stores', label: 'Stores', icon: () => <span>🗄</span>, color: 'text-emerald-400' },
-    { id: 'morph-stack', label: 'Morph', icon: () => <span>🔮</span>, color: 'text-violet-400' },
-];
-
-// ─── Level Config ───
-export const LEVEL_CONFIG: Record<LogLevel, { icon: React.ComponentType<any>; color: string; bg: string; label: string }> = {
-    info: { icon: Info, color: 'text-blue-400', bg: 'bg-blue-500/10', label: 'INFO' },
-    warn: { icon: AlertTriangle, color: 'text-amber-400', bg: 'bg-amber-500/10', label: 'WARN' },
-    error: { icon: AlertCircle, color: 'text-red-400', bg: 'bg-red-500/10', label: 'ERROR' },
-    debug: { icon: Bug, color: 'text-purple-400', bg: 'bg-purple-500/10', label: 'DEBUG' },
-};
-
-// ─── Track visual config ───
-export const TRACK_CONFIG: Record<string, { icon: React.ComponentType<any>; color: string; label: string }> = {
-    trigger: { icon: Zap, color: 'text-yellow-400', label: 'Trigger' },
-    dialogue: { icon: MessageSquare, color: 'text-blue-400', label: 'Diálogo' },
-    logic: { icon: Settings, color: 'text-orange-400', label: 'Lógica' },
-    ui: { icon: Map, color: 'text-green-400', label: 'UI' },
-    render: { icon: Map, color: 'text-pink-400', label: 'Render' },
-    condition: { icon: GitBranch, color: 'text-amber-400', label: 'Condición' },
-    subflow: { icon: ArrowRight, color: 'text-purple-400', label: 'Subflow' },
-    entry: { icon: Circle, color: 'text-emerald-400', label: 'Entry' },
-    return: { icon: ArrowRight, color: 'text-red-400', label: 'Return' },
-    set: { icon: Settings, color: 'text-cyan-400', label: 'Variable' },
-    morph: { icon: Map, color: 'text-violet-400', label: 'Morph' },
-};
-
-// ─── Log Entry Row ───
-export const LogRow = React.memo(function LogRow({ entry }: { entry: DebugLogEntry }) {
-    const cfg = LEVEL_CONFIG[entry.level];
-    const Icon = cfg.icon;
-    return (
-        <div className={`flex items-start gap-2 px-3 py-1 hover:bg-surface-glass font-mono text-[11px] leading-relaxed border-b border-border-subtle ${cfg.bg}`}>
-            <span className="text-text-muted shrink-0 w-[70px] pt-0.5">{entry.timestamp}</span>
-            <Icon size={12} className={`${cfg.color} shrink-0 mt-0.5`} />
-            <span className={`font-bold shrink-0 w-[38px] ${cfg.color}`}>{cfg.label}</span>
-            {entry.categories.length > 0 && (
-                <span className="shrink-0 flex gap-1">
-                    {entry.categories.map((c, i) => (
-                        <span key={i} className="px-1.5 py-0.5 rounded text-[9px] font-bold bg-surface-glass text-text-secondary uppercase tracking-widest">{c}</span>
-                    ))}
-                </span>
-            )}
-            <span className="text-text-primary flex-1 break-all">{entry.message}</span>
-            {entry.data !== undefined && (
-                <span className="text-text-muted shrink-0 truncate max-w-[200px]">
-                    {typeof entry.data === 'object' ? JSON.stringify(entry.data) : String(entry.data)}
-                </span>
-            )}
-        </div>
-    );
-});

package/src/components/playground/DebugPanel.tsx

@@ -1,112 +0,0 @@
-import React from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { X, Bug, Activity, Map, PlayCircle, Database, Layers, Globe, UserCog, Clock, Gauge, Download, Palette } from 'lucide-react';
-import { useDebugPanelStore, DebugTab } from '../../store/useDebugPanelStore';
-import { LogsTab } from '../debug/LogsTab';
-import { FlowHealthTab } from '../debug/FlowHealthTab';
-import { TopologyTab } from '../debug/TopologyTab';
-import { ReplayTab } from '../debug/ReplayTab';
-import { StoresTab } from '../debug/StoresTab';
-import { MorphStackTab } from '../debug/MorphStackTab';
-import { NetworkTab } from '../debug/NetworkTab';
-import { ProfilesTab } from '../debug/ProfilesTab';
-import { ActionTimelineTab } from '../debug/ActionTimelineTab';
-import { PerformanceTab } from '../debug/PerformanceTab';
-import { ExportTab } from '../debug/ExportTab';
-import { CSSInspectorTab } from '../debug/CSSInspectorTab';
-
-// ─── Tab Config ───
-const TABS: { id: DebugTab; label: string; icon: React.ComponentType<any>; color: string }[] = [
-    { id: 'logs', label: 'Logs', icon: Bug, color: 'text-green-400' },
-    { id: 'flow-health', label: 'Health', icon: Activity, color: 'text-cyan-400' },
-    { id: 'topology', label: 'Topology', icon: Map, color: 'text-purple-400' },
-    { id: 'replay', label: 'Replay', icon: PlayCircle, color: 'text-amber-400' },
-    { id: 'stores', label: 'Stores', icon: Database, color: 'text-emerald-400' },
-    { id: 'morph-stack', label: 'Morph', icon: Layers, color: 'text-violet-400' },
-    { id: 'network', label: 'Network', icon: Globe, color: 'text-cyan-400' },
-    { id: 'profiles', label: 'Profiles', icon: UserCog, color: 'text-rose-400' },
-    { id: 'timeline', label: 'Timeline', icon: Clock, color: 'text-amber-400' },
-    { id: 'performance', label: 'Perf', icon: Gauge, color: 'text-lime-400' },
-    { id: 'export', label: 'Export', icon: Download, color: 'text-text-secondary' },
-    { id: 'css-inspector', label: 'CSS', icon: Palette, color: 'text-indigo-400' },
-];
-
-// ─── Tab Content Router ───
-const TAB_COMPONENTS: Record<DebugTab, React.ComponentType> = {
-    'logs': LogsTab,
-    'flow-health': FlowHealthTab,
-    'topology': TopologyTab,
-    'replay': ReplayTab,
-    'stores': StoresTab,
-    'morph-stack': MorphStackTab,
-    'network': NetworkTab,
-    'profiles': ProfilesTab,
-    'timeline': ActionTimelineTab,
-    'performance': PerformanceTab,
-    'export': ExportTab,
-    'css-inspector': CSSInspectorTab,
-};
-
-export interface DebugPanelProps {
-    className?: string;
-}
-
-export const DebugPanel = React.memo(function DebugPanel({ className }: DebugPanelProps) {
-    const isOpen = useDebugPanelStore(s => s.isOpen);
-    const activeTab = useDebugPanelStore(s => s.activeTab);
-    const setActiveTab = useDebugPanelStore(s => s.setActiveTab);
-    const togglePanel = useDebugPanelStore(s => s.togglePanel);
-    const errorCount = useDebugPanelStore(s => s.errorCount);
-
-    if (!isOpen) return null;
-
-    const ActiveComponent = TAB_COMPONENTS[activeTab];
-
-    return (
-        <AnimatePresence>
-            <motion.div
-                initial={{ height: 0, opacity: 0 }}
-                animate={{ height: '100%', opacity: 1 }}
-                exit={{ height: 0, opacity: 0 }}
-                transition={{ duration: 0.15, ease: 'easeOut' }}
-                className={`flex flex-col bg-surface-primary border-t border-border-default overflow-hidden ${className || ''}`}
-            >
-                {/* Tab Bar */}
-                <div className="flex items-center justify-between px-2 py-1 border-b border-border-subtle shrink-0 bg-surface-primary/80">
-                    <div className="flex items-center gap-0.5 overflow-x-auto flex-1 min-w-0" style={{ scrollbarWidth: 'none' }}>
-                        {TABS.map(tab => {
-                            const Icon = tab.icon;
-                            const isActive = activeTab === tab.id;
-                            return (
-                                <button
-                                    key={tab.id}
-                                    onClick={() => setActiveTab(tab.id)}
-                                    className={`flex items-center gap-1 px-2 py-1 rounded-md text-[10px] font-semibold transition-all whitespace-nowrap shrink-0 ${
-                                        isActive ? `bg-surface-glass text-text-primary shadow-xs` : 'text-text-muted hover:text-text-primary hover:bg-surface-glass'
-                                    }`}
-                                >
-                                    <Icon size={11} className={isActive ? tab.color : ''} />
-                                    {tab.label}
-                                    {tab.id === 'logs' && errorCount > 0 && (
-                                        <span className="ml-0.5 px-1 py-0.5 rounded-full text-[8px] font-bold bg-red-500/20 text-red-400">{errorCount}</span>
-                                    )}
-                                </button>
-                            );
-                        })}
-                    </div>
-                    <div className="flex items-center gap-1 shrink-0 ml-1">
-                        <span className="text-[9px] text-text-muted font-mono mr-1">⌃⇧D</span>
-                        <button onClick={togglePanel} className="p-1 rounded text-text-muted hover:text-text-primary hover:bg-surface-glass transition-colors" title="Cerrar panel">
-                            <X size={14} />
-                        </button>
-                    </div>
-                </div>
-
-                {/* Tab Content */}
-                <div className="flex-1 overflow-hidden">
-                    <ActiveComponent />
-                </div>
-            </motion.div>
-        </AnimatePresence>
-    );
-});

package/src/components/playground/HeaderCenterControls.tsx

@@ -1,92 +0,0 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
-import { motion, AnimatePresence } from 'motion/react';
-import { Network } from 'lucide-react';
-
-interface HeaderCenterControlsProps {
-    isSpeaking: boolean;
-    isCreatorMode: boolean;
-    creatorViewMode: 'timeline' | 'graph';
-    /** @deprecated — use internal useAIModelSelector instead */
-    modelLabel?: string;
-    onModelClick?: () => void;
-    onSyncCreatorMode: (val: boolean) => void;
-    onSetCreatorViewMode: (mode: 'timeline' | 'graph') => void;
-}
-
-export const HeaderCenterControls = React.memo(function HeaderCenterControls({
-    isSpeaking, isCreatorMode, creatorViewMode, modelLabel, onModelClick, onSyncCreatorMode, onSetCreatorViewMode
-}: HeaderCenterControlsProps) {
-    return (
-        <div data-tauri-drag-region className="flex-1 flex items-center justify-center gap-2 min-w-0">
-            {/* Voice Live Indicator */}
-            <AnimatePresence>
-                {isSpeaking && (
-                    <motion.div
-                        initial={{ opacity: 0, width: 0 }}
-                        animate={{ opacity: 1, width: 'auto' }}
-                        exit={{ opacity: 0, width: 0 }}
-                        className="flex items-center gap-0.5 mr-2 overflow-hidden"
-                    >
-                        {[1, 2, 3, 4, 5].map((i) => (
-                            <motion.div
-                                key={i}
-                                animate={{ height: [6, Math.random() * 16 + 8, 6] }}
-                                transition={{ repeat: Infinity, duration: 0.5, delay: i * 0.08 }}
-                                className="w-1 bg-accent-cyan rounded-full"
-                            />
-                        ))}
-                    </motion.div>
-                )}
-            </AnimatePresence>
-
-            {/* Mode Toggle — Premium Segmented Control */}
-            <div className="flex bg-surface-tertiary border border-border-default rounded-lg p-0.5 shadow-sm">
-                <button onClick={() => { if (isCreatorMode) onSyncCreatorMode(false); }}
-                    className={`px-3 py-1 text-[11px] font-semibold rounded-md transition-all duration-200 ${
-                        !isCreatorMode
-                            ? 'bg-surface-elevated text-text-primary shadow-sm border border-border-default'
-                            : 'text-text-muted hover:text-text-secondary border border-transparent'
-                    }`}>
-                    Player
-                </button>
-                <button onClick={() => { if (!isCreatorMode) onSyncCreatorMode(true); }}
-                    className={`px-3 py-1 text-[11px] font-semibold rounded-md transition-all duration-200 flex items-center gap-1 ${
-                        isCreatorMode
-                            ? 'bg-surface-elevated text-accent-purple shadow-sm border border-accent-purple'
-                            : 'text-text-muted hover:text-text-secondary border border-transparent'
-                    }`}>
-                    Creator
-                </button>
-            </div>
-
-            {/* Creator Sub-Tabs */}
-            <AnimatePresence>
-                {isCreatorMode && (
-                    <motion.div
-                        initial={{ opacity: 0, scale: 0.9, width: 0 }}
-                        animate={{ opacity: 1, scale: 1, width: 'auto' }}
-                        exit={{ opacity: 0, scale: 0.9, width: 0 }}
-                        className="hidden lg:flex bg-surface-tertiary border border-border-default rounded-lg p-0.5 overflow-hidden shadow-sm"
-                    >
-                        <button onClick={() => onSetCreatorViewMode('timeline')}
-                            className={`px-2.5 py-1 text-[10px] font-bold tracking-wider rounded-md transition-all duration-200 ${
-                                creatorViewMode === 'timeline'
-                                    ? 'bg-surface-elevated text-text-primary shadow-sm border border-border-default'
-                                    : 'text-text-muted hover:text-text-secondary border border-transparent'
-                            }`}>
-                            TIMELINE
-                        </button>
-                        <button onClick={() => onSetCreatorViewMode('graph')}
-                            className={`px-2.5 py-1 text-[10px] font-bold tracking-wider rounded-md transition-all duration-200 flex items-center gap-1 ${
-                                creatorViewMode === 'graph'
-                                    ? 'bg-surface-elevated text-text-primary shadow-sm border border-border-default'
-                                    : 'text-text-muted hover:text-text-secondary border border-transparent'
-                            }`}>
-                            <Network size={10} /> GRAPH
-                        </button>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-        </div>
-    );
-});