@decido/shell 1.0.0

package/src/components/debug/StoresTab.tsx

@@ -0,0 +1,255 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,66 @@
+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

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,92 @@
+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>
+    );
+});