@decido/shell 1.0.0 → 4.0.2

package/src/components/debug/PerformanceTab.tsx

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

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

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