@decido/shell 1.0.0

package/src/components/debug/PerformanceTab.tsx

@@ -0,0 +1,171 @@
+import React, { useEffect, useRef, useState, useCallback } from 'react';
+import { Gauge, Cpu, HardDrive, BarChart3 } from 'lucide-react';
+
+interface PerfMetrics {
+    fps: number;
+    memory: { usedMB: number; totalMB: number; percent: number } | null;
+    domNodes: number;
+}
+
+function usePerfMetrics(intervalMs = 1000): PerfMetrics {
+    const [metrics, setMetrics] = useState<PerfMetrics>({ fps: 0, memory: null, domNodes: 0 });
+    const framesRef = useRef(0);
+    const lastTimeRef = useRef(performance.now());
+
+    useEffect(() => {
+        let rafId: number;
+        const countFrame = () => {
+            framesRef.current++;
+            rafId = requestAnimationFrame(countFrame);
+        };
+        rafId = requestAnimationFrame(countFrame);
+
+        const timer = setInterval(() => {
+            const now = performance.now();
+            const elapsed = (now - lastTimeRef.current) / 1000;
+            const fps = Math.round(framesRef.current / elapsed);
+            framesRef.current = 0;
+            lastTimeRef.current = now;
+
+            let memory: PerfMetrics['memory'] = null;
+            const perfMemory = (performance as any).memory;
+            if (perfMemory) {
+                const usedMB = Math.round(perfMemory.usedJSHeapSize / 1024 / 1024);
+                const totalMB = Math.round(perfMemory.jsHeapSizeLimit / 1024 / 1024);
+                memory = { usedMB, totalMB, percent: Math.round((usedMB / totalMB) * 100) };
+            }
+
+            const domNodes = document.querySelectorAll('*').length;
+            setMetrics({ fps, memory, domNodes });
+        }, intervalMs);
+
+        return () => { cancelAnimationFrame(rafId); clearInterval(timer); };
+    }, [intervalMs]);
+
+    return metrics;
+}
+
+// Sparkline component
+function Sparkline({ data, color, height = 24, width = 80 }: { data: number[]; color: string; height?: number; width?: number }) {
+    if (data.length < 2) return null;
+    const max = Math.max(...data, 1);
+    const min = Math.min(...data, 0);
+    const range = max - min || 1;
+    const points = data.map((v, i) => {
+        const x = (i / (data.length - 1)) * width;
+        const y = height - ((v - min) / range) * height;
+        return `${x},${y}`;
+    }).join(' ');
+
+    return (
+        <svg width={width} height={height} className="shrink-0">
+            <polyline points={points} fill="none" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
+        </svg>
+    );
+}
+
+function FpsGauge({ fps }: { fps: number }) {
+    const color = fps >= 50 ? 'text-emerald-400' : fps >= 30 ? 'text-amber-400' : 'text-red-400';
+    const bg = fps >= 50 ? 'bg-emerald-500/10' : fps >= 30 ? 'bg-amber-500/10' : 'bg-red-500/10';
+    const pct = Math.min(fps / 60, 1);
+    return (
+        <div className={`rounded-xl ${bg} px-4 py-3 flex items-center gap-3`}>
+            <div className="relative w-12 h-12">
+                <svg className="w-12 h-12 -rotate-90" viewBox="0 0 48 48">
+                    <circle cx="24" cy="24" r="20" fill="none" stroke="currentColor" className="text-text-muted" strokeWidth="3" />
+                    <circle cx="24" cy="24" r="20" fill="none" stroke="currentColor" className={color} strokeWidth="3"
+                        strokeDasharray={`${pct * 125.6} 125.6`} strokeLinecap="round" />
+                </svg>
+                <span className={`absolute inset-0 flex items-center justify-center text-[11px] font-bold ${color}`}>{fps}</span>
+            </div>
+            <div>
+                <div className="text-[10px] font-bold text-text-primary">FPS</div>
+                <div className={`text-[9px] ${color}`}>
+                    {fps >= 50 ? '✅ Excelente' : fps >= 30 ? '⚠️ Aceptable' : '🔴 Bajo'}
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export function PerformanceTab() {
+    const metrics = usePerfMetrics(500);
+    const [fpsHistory, setFpsHistory] = useState<number[]>([]);
+    const [memHistory, setMemHistory] = useState<number[]>([]);
+
+    useEffect(() => {
+        setFpsHistory(prev => {
+            const next = [...prev, metrics.fps];
+            return next.length > 60 ? next.slice(-60) : next;
+        });
+        if (metrics.memory) {
+            setMemHistory(prev => {
+                const next = [...prev, metrics.memory!.usedMB];
+                return next.length > 60 ? next.slice(-60) : next;
+            });
+        }
+    }, [metrics.fps, metrics.memory?.usedMB]);
+
+    return (
+        <div className="p-3 space-y-3 overflow-y-auto h-full custom-scrollbar">
+            <div className="text-[9px] font-bold text-text-muted uppercase tracking-widest flex items-center gap-1">
+                <BarChart3 size={10} /> Performance Dashboard
+            </div>
+
+            <div className="grid grid-cols-3 gap-3">
+                {/* FPS Gauge */}
+                <FpsGauge fps={metrics.fps} />
+
+                {/* Memory */}
+                <div className="rounded-xl bg-blue-500/10 px-4 py-3">
+                    <div className="flex items-center gap-1.5 mb-1">
+                        <HardDrive size={12} className="text-blue-400" />
+                        <span className="text-[10px] font-bold text-text-primary">Memoria</span>
+                    </div>
+                    {metrics.memory ? (
+                        <>
+                            <div className="text-[14px] font-bold text-blue-400">{metrics.memory.usedMB}MB</div>
+                            <div className="text-[9px] text-text-muted">{metrics.memory.percent}% de {metrics.memory.totalMB}MB</div>
+                            <div className="mt-1 h-1.5 bg-surface-tertiary rounded-full overflow-hidden">
+                                <div
+                                    className={`h-full rounded-full transition-all ${
+                                        metrics.memory.percent > 80 ? 'bg-red-500' : metrics.memory.percent > 50 ? 'bg-amber-500' : 'bg-blue-500'
+                                    }`}
+                                    style={{ width: `${metrics.memory.percent}%` }}
+                                />
+                            </div>
+                        </>
+                    ) : (
+                        <div className="text-[9px] text-text-muted italic">No disponible</div>
+                    )}
+                </div>
+
+                {/* DOM Nodes */}
+                <div className="rounded-xl bg-violet-500/10 px-4 py-3">
+                    <div className="flex items-center gap-1.5 mb-1">
+                        <Cpu size={12} className="text-violet-400" />
+                        <span className="text-[10px] font-bold text-text-primary">DOM</span>
+                    </div>
+                    <div className="text-[14px] font-bold text-violet-400">{metrics.domNodes.toLocaleString()}</div>
+                    <div className="text-[9px] text-text-muted">
+                        {metrics.domNodes > 5000 ? '⚠️ Alto' : metrics.domNodes > 2000 ? 'Normal' : '✅ Ligero'}
+                    </div>
+                </div>
+            </div>
+
+            {/* Sparklines */}
+            <div className="grid grid-cols-2 gap-3">
+                <div className="rounded-xl bg-surface-secondary/50 border border-border-subtle px-3 py-2">
+                    <div className="text-[9px] text-text-muted mb-1">FPS (últimos 30s)</div>
+                    <Sparkline data={fpsHistory} color="#34d399" width={200} height={30} />
+                </div>
+                {metrics.memory && (
+                    <div className="rounded-xl bg-surface-secondary/50 border border-border-subtle px-3 py-2">
+                        <div className="text-[9px] text-text-muted mb-1">Memoria (últimos 30s)</div>
+                        <Sparkline data={memHistory} color="#60a5fa" width={200} height={30} />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/debug/ProfilesTab.tsx

@@ -0,0 +1,238 @@
+import React, { useState, useMemo, useCallback, useSyncExternalStore } from 'react';
+import { Plus, Trash2, Eye, Zap, StickyNote, X, Star, StarOff } from 'lucide-react';
+import { useDebugProfileStore, type DebugProfile, type WatchEntry, type PinnedAction } from '../../store/useDebugProfileStore';
+import { usePlaygroundStore } from '../../store/usePlaygroundStore';
+import { useEngineStore, useTimelineStore, useUserStateStore } from '@decido/engine';
+import { useMorphologyStore } from '../../store/useMorphologyStore';
+import { useUIComponentStore } from '../../store/useUIComponentStore';
+import { useMorphInstanceStore } from '../../store/useMorphInstanceStore';
+
+// ─── Store Registry (same as StoresTab) ───
+const STORE_MAP: Record<string, any> = {
+    Playground: usePlaygroundStore,
+    Engine: useEngineStore,
+    Timeline: useTimelineStore,
+    Morphology: useMorphologyStore,
+    UserState: useUserStateStore,
+    UIComponents: useUIComponentStore,
+    MorphInstance: useMorphInstanceStore,
+};
+
+function getNestedValue(obj: any, path: string): any {
+    const parts = path.split('.');
+    let current = obj;
+    for (const part of parts) {
+        if (current == null) return undefined;
+        current = current[part];
+    }
+    return current;
+}
+
+function formatValue(val: any): string {
+    if (val === null || val === undefined) return String(val);
+    if (typeof val === 'function') return '[fn]';
+    if (typeof val === 'object') {
+        const tag = Object.prototype.toString.call(val);
+        if (tag === '[object Map]') return `Map(${(val as Map<any,any>).size})`;
+        if (tag === '[object Set]') return `Set(${(val as Set<any>).size})`;
+        if (Array.isArray(val)) return `Array(${val.length})`;
+        try { return JSON.stringify(val).slice(0, 100); } catch { return '[object]'; }
+    }
+    return String(val);
+}
+
+// ─── Watch Value (live) ───
+function WatchValue({ storeName, path }: { storeName: string; path: string }) {
+    const store = STORE_MAP[storeName];
+    const snapshot = useSyncExternalStore(
+        useCallback((cb: () => void) => store?.subscribe?.(cb) || (() => {}), [store]),
+        useCallback(() => store?.getState?.() ?? {}, [store])
+    );
+    const value = getNestedValue(snapshot, path);
+    const formatted = formatValue(value);
+    const color = typeof value === 'number' ? 'text-cyan-300' :
+        typeof value === 'string' ? 'text-amber-300' :
+        typeof value === 'boolean' ? (value ? 'text-emerald-400' : 'text-text-muted') :
+        value === null || value === undefined ? 'text-text-muted italic' : 'text-text-secondary';
+
+    return <span className={`font-mono text-[9px] ${color} max-w-[200px] truncate`} title={formatted}>{formatted}</span>;
+}
+
+// ─── Profile Editor ───
+function ProfileEditor({ profile }: { profile: DebugProfile }) {
+    const { updateProfile, addWatch, removeWatch, addPinnedAction, removePinnedAction, deleteProfile } = useDebugProfileStore();
+    const [newWatchStore, setNewWatchStore] = useState(Object.keys(STORE_MAP)[0]);
+    const [newWatchPath, setNewWatchPath] = useState('');
+    const [newActionStore, setNewActionStore] = useState(Object.keys(STORE_MAP)[0]);
+    const [newActionName, setNewActionName] = useState('');
+
+    // Get available state keys for selected store
+    const storeKeys = useMemo(() => {
+        const store = STORE_MAP[newWatchStore];
+        if (!store) return [];
+        const state = store.getState();
+        return Object.entries(state).filter(([, v]) => typeof v !== 'function').map(([k]) => k);
+    }, [newWatchStore]);
+
+    const actionKeys = useMemo(() => {
+        const store = STORE_MAP[newActionStore];
+        if (!store) return [];
+        const state = store.getState();
+        return Object.entries(state).filter(([, v]) => typeof v === 'function').map(([k]) => k);
+    }, [newActionStore]);
+
+    return (
+        <div className="space-y-3 p-3">
+            {/* ─── Watch List ─── */}
+            <div>
+                <div className="text-[9px] font-bold text-text-secondary uppercase tracking-widest mb-1.5 flex items-center gap-1">
+                    <Eye size={10} /> Watch List ({profile.watchList.length})
+                </div>
+                {profile.watchList.map((w, i) => (
+                    <div key={i} className="flex items-center gap-2 py-0.5 group">
+                        <span className="text-[8px] text-text-muted font-bold uppercase">{w.storeName}</span>
+                        <span className="text-[9px] text-text-secondary font-mono">{w.path}</span>
+                        <span className="text-text-muted">=</span>
+                        <WatchValue storeName={w.storeName} path={w.path} />
+                        <button onClick={() => removeWatch(profile.id, i)} className="opacity-0 group-hover:opacity-100 text-text-muted hover:text-red-400 transition-all ml-auto"><X size={10} /></button>
+                    </div>
+                ))}
+                <div className="flex items-center gap-1 mt-1">
+                    <select value={newWatchStore} onChange={e => setNewWatchStore(e.target.value)} className="bg-surface-secondary border border-border-default rounded px-1 py-0.5 text-[8px] text-text-secondary">
+                        {Object.keys(STORE_MAP).map(n => <option key={n} value={n}>{n}</option>)}
+                    </select>
+                    <select value={newWatchPath} onChange={e => setNewWatchPath(e.target.value)} className="bg-surface-secondary border border-border-default rounded px-1 py-0.5 text-[8px] text-text-secondary flex-1">
+                        <option value="">Select property...</option>
+                        {storeKeys.map(k => <option key={k} value={k}>{k}</option>)}
+                    </select>
+                    <button
+                        onClick={() => { if (newWatchPath) { addWatch(profile.id, { storeName: newWatchStore, path: newWatchPath }); setNewWatchPath(''); } }}
+                        disabled={!newWatchPath}
+                        className="px-1.5 py-0.5 rounded text-[8px] font-bold bg-emerald-500/10 text-emerald-400 hover:bg-emerald-500/20 border border-emerald-500/20 disabled:opacity-30"
+                    ><Plus size={10} /></button>
+                </div>
+            </div>
+
+            {/* ─── Quick Actions ─── */}
+            <div>
+                <div className="text-[9px] font-bold text-text-secondary uppercase tracking-widest mb-1.5 flex items-center gap-1">
+                    <Zap size={10} /> Quick Actions ({profile.pinnedActions.length})
+                </div>
+                <div className="flex flex-wrap gap-1 mb-1">
+                    {profile.pinnedActions.map((a, i) => (
+                        <button
+                            key={i}
+                            onClick={() => {
+                                const store = STORE_MAP[a.storeName];
+                                if (store) {
+                                    const fn = store.getState()[a.actionName];
+                                    if (typeof fn === 'function') fn();
+                                }
+                            }}
+                            className="group px-2 py-0.5 rounded text-[8px] font-mono bg-surface-glass text-text-secondary hover:text-amber-400 hover:bg-amber-500/10 border border-border-subtle hover:border-amber-500/20 flex items-center gap-1"
+                        >
+                            ▶ {a.storeName}.{a.actionName}
+                            <span onClick={(e) => { e.stopPropagation(); removePinnedAction(profile.id, i); }} className="opacity-0 group-hover:opacity-100 text-text-muted hover:text-red-400"><X size={8} /></span>
+                        </button>
+                    ))}
+                </div>
+                <div className="flex items-center gap-1">
+                    <select value={newActionStore} onChange={e => setNewActionStore(e.target.value)} className="bg-surface-secondary border border-border-default rounded px-1 py-0.5 text-[8px] text-text-secondary">
+                        {Object.keys(STORE_MAP).map(n => <option key={n} value={n}>{n}</option>)}
+                    </select>
+                    <select value={newActionName} onChange={e => setNewActionName(e.target.value)} className="bg-surface-secondary border border-border-default rounded px-1 py-0.5 text-[8px] text-text-secondary flex-1">
+                        <option value="">Select action...</option>
+                        {actionKeys.map(k => <option key={k} value={k}>{k}</option>)}
+                    </select>
+                    <button
+                        onClick={() => { if (newActionName) { addPinnedAction(profile.id, { storeName: newActionStore, actionName: newActionName }); setNewActionName(''); } }}
+                        disabled={!newActionName}
+                        className="px-1.5 py-0.5 rounded text-[8px] font-bold bg-amber-500/10 text-amber-400 hover:bg-amber-500/20 border border-amber-500/20 disabled:opacity-30"
+                    ><Plus size={10} /></button>
+                </div>
+            </div>
+
+            {/* ─── Notes ─── */}
+            <div>
+                <div className="text-[9px] font-bold text-text-secondary uppercase tracking-widest mb-1 flex items-center gap-1">
+                    <StickyNote size={10} /> Notas
+                </div>
+                <textarea
+                    value={profile.notes}
+                    onChange={e => updateProfile(profile.id, { notes: e.target.value })}
+                    placeholder="Hipótesis de debugging, observaciones..."
+                    className="w-full bg-surface-secondary border border-border-default rounded px-2 py-1.5 text-[9px] text-text-primary font-mono outline-hidden focus:border-violet-500/50 resize-y min-h-[40px] max-h-[120px]"
+                />
+            </div>
+
+            {/* ─── Delete ─── */}
+            <button onClick={() => deleteProfile(profile.id)} className="flex items-center gap-1 px-2 py-1 rounded text-[9px] text-red-400/60 hover:text-red-400 hover:bg-red-500/10 transition-all">
+                <Trash2 size={10} /> Eliminar perfil
+            </button>
+        </div>
+    );
+}
+
+// ─── Profiles Tab ───
+export function ProfilesTab() {
+    const profiles = useDebugProfileStore(s => s.profiles);
+    const activeProfileId = useDebugProfileStore(s => s.activeProfileId);
+    const { createProfile, activateProfile } = useDebugProfileStore();
+    const [newName, setNewName] = useState('');
+
+    const activeProfile = useMemo(() => profiles.find(p => p.id === activeProfileId), [profiles, activeProfileId]);
+
+    return (
+        <div className="flex h-full">
+            {/* Sidebar: Profile List */}
+            <div className="w-40 shrink-0 border-r border-border-subtle overflow-y-auto bg-surface-primary/50 flex flex-col">
+                <div className="p-2">
+                    <div className="text-[8px] font-bold text-text-muted uppercase tracking-widest mb-1">Perfiles</div>
+                    {profiles.map(p => (
+                        <button
+                            key={p.id}
+                            onClick={() => activateProfile(p.id)}
+                            className={`w-full text-left px-2 py-1.5 text-[10px] font-semibold transition-all rounded mb-0.5 flex items-center gap-1.5 ${
+                                activeProfileId === p.id
+                                    ? 'bg-violet-500/10 text-violet-400 border-r-2 border-violet-400'
+                                    : 'text-text-muted hover:text-text-primary hover:bg-surface-glass'
+                            }`}
+                        >
+                            {activeProfileId === p.id ? <Star size={10} /> : <StarOff size={10} className="opacity-30" />}
+                            <span className="truncate">{p.name}</span>
+                            <span className="ml-auto text-[8px] text-text-muted">{p.watchList.length}</span>
+                        </button>
+                    ))}
+                </div>
+                <div className="mt-auto p-2 border-t border-border-subtle">
+                    <div className="flex items-center gap-1">
+                        <input
+                            value={newName}
+                            onChange={e => setNewName(e.target.value)}
+                            onKeyDown={e => { if (e.key === 'Enter' && newName.trim()) { createProfile(newName.trim()); setNewName(''); } }}
+                            placeholder="Nuevo perfil..."
+                            className="flex-1 bg-surface-secondary border border-border-default rounded px-1.5 py-0.5 text-[9px] text-text-primary outline-hidden focus:border-violet-500/50"
+                        />
+                        <button
+                            onClick={() => { if (newName.trim()) { createProfile(newName.trim()); setNewName(''); } }}
+                            disabled={!newName.trim()}
+                            className="p-1 rounded bg-violet-500/10 text-violet-400 hover:bg-violet-500/20 disabled:opacity-30"
+                        ><Plus size={12} /></button>
+                    </div>
+                </div>
+            </div>
+
+            {/* Main: Profile Editor */}
+            <div className="flex-1 overflow-y-auto custom-scrollbar">
+                {activeProfile ? (
+                    <ProfileEditor profile={activeProfile} />
+                ) : (
+                    <div className="flex items-center justify-center h-full text-text-muted text-[10px] italic flex-col gap-2">
+                        <span>Selecciona o crea un perfil de debug</span>
+                        <span className="text-[8px] text-text-muted">Los perfiles te permiten monitorear variables específicas, ejecutar acciones, y tomar notas</span>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/debug/ReplayTab.tsx

@@ -0,0 +1,70 @@
+import React, { useMemo, useState } from 'react';
+import { SkipBack, SkipForward } from 'lucide-react';
+import { useDebugPanelStore } from '../../store/useDebugPanelStore';
+import { useEngineStore } from '@decido/engine';
+
+export function ReplayTab() {
+    const logEntries = useDebugPanelStore(s => s.logEntries);
+    const activeNodeIds = useEngineStore(s => s.activeNodeIds);
+    const [selectedIdx, setSelectedIdx] = useState(-1);
+
+    const engineLogs = useMemo(() => {
+        return logEntries.filter(e =>
+            e.categories.some(c => ['ENGINE', 'PLUGIN:DIALOGUE', 'PLUGIN:LOGIC', 'PLUGIN:SUBFLOW', 'PLUGIN:RETURN', 'PLUGIN:UI', 'PLUGIN:UIRENDER'].includes(c.toUpperCase()))
+            || e.message.includes('🚀') || e.message.includes('🔀') || e.message.includes('🗣') || e.message.includes('⚡') || e.message.includes('🏁')
+        );
+    }, [logEntries]);
+
+    const selected = selectedIdx >= 0 ? engineLogs[selectedIdx] : null;
+
+    return (
+        <div className="h-full flex flex-col">
+            <div className="flex items-center gap-2 px-3 py-2 border-b border-border-subtle shrink-0 bg-surface-primary/50">
+                <button onClick={() => setSelectedIdx(Math.max(0, selectedIdx - 1))} disabled={selectedIdx <= 0} className="p-1 rounded text-text-muted hover:text-text-primary hover:bg-surface-glass disabled:opacity-30 transition-colors">
+                    <SkipBack size={14} />
+                </button>
+                <span className="text-[10px] text-text-muted font-mono w-16 text-center">{selectedIdx >= 0 ? `${selectedIdx + 1}/${engineLogs.length}` : `—/${engineLogs.length}`}</span>
+                <button onClick={() => setSelectedIdx(Math.min(engineLogs.length - 1, selectedIdx + 1))} disabled={selectedIdx >= engineLogs.length - 1} className="p-1 rounded text-text-muted hover:text-text-primary hover:bg-surface-glass disabled:opacity-30 transition-colors">
+                    <SkipForward size={14} />
+                </button>
+                <div className="flex-1" />
+                <span className="text-[10px] text-text-muted">{activeNodeIds.length > 0 && `Nodo activo: ${activeNodeIds[0]?.substring(0, 12)}...`}</span>
+            </div>
+            <div className="flex-1 overflow-y-auto custom-scrollbar">
+                {engineLogs.length === 0 ? (
+                    <div className="flex items-center justify-center h-full text-text-muted text-xs font-mono">Ejecuta un flujo para ver el replay</div>
+                ) : (
+                    <div className="py-1">
+                        {engineLogs.map((entry, idx) => {
+                            const isSelected = idx === selectedIdx;
+                            const isPast = idx < selectedIdx;
+                            return (
+                                <button key={entry.id} onClick={() => setSelectedIdx(idx)} className={`w-full flex items-start gap-2 px-3 py-1.5 text-left transition-all border-l-2 ${isSelected ? 'bg-amber-500/10 border-amber-400 text-amber-300' : isPast ? 'border-border-default text-text-muted hover:bg-surface-glass' : 'border-transparent text-text-secondary hover:bg-surface-glass'}`}>
+                                    <span className={`shrink-0 w-5 h-5 rounded-full flex items-center justify-center text-[9px] font-bold mt-0.5 ${isSelected ? 'bg-amber-500/20 text-amber-400' : isPast ? 'bg-surface-glass text-text-muted' : 'bg-surface-glass text-text-muted'}`}>{idx + 1}</span>
+                                    <div className="flex-1 min-w-0">
+                                        <div className="text-[11px] font-mono truncate">{entry.message}</div>
+                                        <div className="flex items-center gap-2 mt-0.5">
+                                            <span className="text-[9px] text-text-muted">{entry.timestamp}</span>
+                                            {entry.categories.map((c, i) => <span key={i} className="text-[8px] px-1 py-0.5 rounded bg-surface-glass text-text-muted uppercase tracking-widest">{c}</span>)}
+                                        </div>
+                                    </div>
+                                </button>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+            {selected && (
+                <div className="border-t border-border-subtle px-3 py-2 bg-surface-primary/80 shrink-0">
+                    <div className="text-[10px] font-bold text-text-secondary mb-1">Detalle del paso {selectedIdx + 1}</div>
+                    <div className="text-[11px] text-text-primary font-mono break-all">{selected.message}</div>
+                    {selected.data && (
+                        <pre className="text-[10px] text-text-muted font-mono mt-1 max-h-20 overflow-y-auto">
+                            {typeof selected.data === 'object' ? JSON.stringify(selected.data, null, 2) : String(selected.data)}
+                        </pre>
+                    )}
+                </div>
+            )}
+        </div>
+    );
+}