@decido/shell 1.0.0 → 4.0.1

package/src/components/debug/FlowHealthTab.tsx

@@ -1,86 +0,0 @@
-import React, { useMemo } from 'react';
-import { AlertTriangle, XCircle, Info, CheckCircle, Circle } from 'lucide-react';
-import { usePlaygroundStore } from '../../store/usePlaygroundStore';
-import { useTimelineStore } from '@decido/engine';
-import { TRACK_CONFIG } from './debugConfig';
-
-export function FlowHealthTab() {
-    const prototypeBrand = usePlaygroundStore(s => s.prototypeBrand);
-    const timelines = useTimelineStore(s => s.timelines);
-    const flow = timelines[prototypeBrand];
-
-    const analysis = useMemo(() => {
-        if (!flow) return null;
-        const kfs = flow.keyframes || [];
-        const edges = flow.edges || [];
-        const nodeIds = new Set(kfs.map((k: any) => k.id));
-        const trackCounts: Record<string, number> = {};
-        kfs.forEach((k: any) => { const t = k.track || 'unknown'; trackCounts[t] = (trackCounts[t] || 0) + 1; });
-        const hasIncoming = new Set(edges.map((e: any) => e.target));
-        const hasOutgoing = new Set(edges.map((e: any) => e.source));
-        const orphans = kfs.filter((k: any) => { if (k.track === 'trigger' || k.track === 'entry') return false; return !hasIncoming.has(k.id) && edges.length > 0; });
-        const terminals = kfs.filter((k: any) => hasIncoming.has(k.id) && !hasOutgoing.has(k.id) && k.track !== 'return');
-        const deadEdges = edges.filter((e: any) => !nodeIds.has(e.target) || !nodeIds.has(e.source));
-        const unlabeled = kfs.filter((k: any) => !k.label && !k.state && k.track !== 'trigger');
-        const issues = orphans.length + deadEdges.length + unlabeled.length;
-        const score = Math.max(0, Math.min(100, 100 - issues * 10));
-        return { kfs, edges, trackCounts, orphans, terminals, deadEdges, unlabeled, score, issues };
-    }, [flow]);
-
-    if (!flow || !analysis) return <div className="flex items-center justify-center h-full text-text-muted text-xs font-mono">Sin blueprint activo</div>;
-
-    const scoreColor = analysis.score >= 80 ? 'text-green-400' : analysis.score >= 50 ? 'text-amber-400' : 'text-red-400';
-    const scoreBg = analysis.score >= 80 ? 'bg-green-500/10' : analysis.score >= 50 ? 'bg-amber-500/10' : 'bg-red-500/10';
-
-    return (
-        <div className="h-full overflow-y-auto custom-scrollbar p-4 space-y-4">
-            <div className={`flex items-center gap-4 p-4 rounded-xl ${scoreBg} border border-border-subtle`}>
-                <div className={`text-4xl font-black ${scoreColor} font-mono`}>{analysis.score}</div>
-                <div>
-                    <div className={`text-sm font-bold ${scoreColor}`}>{analysis.score >= 80 ? '✅ Saludable' : analysis.score >= 50 ? '⚠️ Revisar' : '🔴 Problemas detectados'}</div>
-                    <div className="text-[11px] text-text-muted">{analysis.kfs.length} nodos · {analysis.edges.length} conexiones · {analysis.issues} problemas</div>
-                </div>
-            </div>
-            <div className="space-y-2">
-                <div className="text-[11px] font-bold text-text-secondary uppercase tracking-widest">Distribución por Track</div>
-                <div className="grid grid-cols-2 lg:grid-cols-3 gap-2">
-                    {Object.entries(analysis.trackCounts).map(([track, count]) => {
-                        const cfg = TRACK_CONFIG[track] || { icon: Circle, color: 'text-text-secondary', label: track };
-                        const Icon = cfg.icon;
-                        return (
-                            <div key={track} className="flex items-center gap-2 px-3 py-2 rounded-lg bg-surface-glass border border-border-subtle">
-                                <Icon size={14} className={cfg.color} />
-                                <span className="text-[11px] text-text-primary font-semibold">{cfg.label}</span>
-                                <span className="ml-auto text-[11px] font-mono text-text-muted">{count}</span>
-                            </div>
-                        );
-                    })}
-                </div>
-            </div>
-            {analysis.orphans.length > 0 && (
-                <div className="space-y-1">
-                    <div className="text-[11px] font-bold text-amber-400 flex items-center gap-1"><AlertTriangle size={12} /> Nodos Huérfanos ({analysis.orphans.length})</div>
-                    {analysis.orphans.map((k: any) => <div key={k.id} className="pl-5 text-[11px] text-text-muted font-mono">· {k.label || k.id} <span className="text-text-muted">({k.track})</span></div>)}
-                </div>
-            )}
-            {analysis.deadEdges.length > 0 && (
-                <div className="space-y-1">
-                    <div className="text-[11px] font-bold text-red-400 flex items-center gap-1"><XCircle size={12} /> Conexiones Rotas ({analysis.deadEdges.length})</div>
-                    {analysis.deadEdges.map((e: any, i: number) => <div key={i} className="pl-5 text-[11px] text-text-muted font-mono">· {e.source} → {e.target}</div>)}
-                </div>
-            )}
-            {analysis.unlabeled.length > 0 && (
-                <div className="space-y-1">
-                    <div className="text-[11px] font-bold text-text-muted flex items-center gap-1"><Info size={12} /> Sin Etiqueta ({analysis.unlabeled.length})</div>
-                    {analysis.unlabeled.slice(0, 5).map((k: any) => <div key={k.id} className="pl-5 text-[11px] text-text-muted font-mono">· {k.id} <span className="text-text-muted">({k.track})</span></div>)}
-                </div>
-            )}
-            {analysis.terminals.length > 0 && (
-                <div className="space-y-1">
-                    <div className="text-[11px] font-bold text-text-secondary flex items-center gap-1"><CheckCircle size={12} /> Nodos Terminales ({analysis.terminals.length})</div>
-                    {analysis.terminals.map((k: any) => <div key={k.id} className="pl-5 text-[11px] text-text-muted font-mono">· {k.label || k.id} <span className="text-text-muted">({k.track})</span></div>)}
-                </div>
-            )}
-        </div>
-    );
-}

package/src/components/debug/LogsTab.tsx

@@ -1,110 +0,0 @@
-import React, { useEffect, useRef, useMemo, useState } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import { Filter, Trash2, Copy, Check } from 'lucide-react';
-import { useDebugPanelStore, LogLevel } from '../../store/useDebugPanelStore';
-import { LEVEL_CONFIG, LogRow } from './debugConfig';
-
-export function LogsTab() {
-    const logEntries = useDebugPanelStore(s => s.logEntries);
-    const logFilters = useDebugPanelStore(s => s.logFilters);
-    const allCategories = useDebugPanelStore(s => s.allCategories);
-    const clearLogs = useDebugPanelStore(s => s.clearLogs);
-    const toggleLevel = useDebugPanelStore(s => s.toggleLevel);
-    const toggleCategory = useDebugPanelStore(s => s.toggleCategory);
-    const [showFilters, setShowFilters] = useState(false);
-    const [copied, setCopied] = useState(false);
-    const scrollRef = useRef<HTMLDivElement>(null);
-
-    useEffect(() => {
-        if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
-    }, [logEntries.length]);
-
-    const filteredEntries = useMemo(() => {
-        return logEntries.filter(e => {
-            if (!logFilters.levels.has(e.level)) return false;
-            if (logFilters.categories.size > 0 && !e.categories.some(c => logFilters.categories.has(c))) return false;
-            return true;
-        });
-    }, [logEntries, logFilters]);
-
-    const catArray = useMemo(() => Array.from(allCategories).sort(), [allCategories]);
-
-    return (
-        <div className="flex flex-col h-full">
-            <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border-subtle shrink-0 bg-surface-primary/50">
-                <div className="flex gap-1">
-                    {(Object.keys(LEVEL_CONFIG) as LogLevel[]).map(lvl => {
-                        const cfg = LEVEL_CONFIG[lvl];
-                        const active = logFilters.levels.has(lvl);
-                        const count = logEntries.filter(e => e.level === lvl).length;
-                        return (
-                            <button
-                                key={lvl}
-                                onClick={() => toggleLevel(lvl)}
-                                className={`flex items-center gap-1 px-2 py-0.5 rounded text-[10px] font-bold transition-all border ${
-                                    active ? `${cfg.bg} ${cfg.color} border-current/20` : 'bg-transparent text-text-muted border-transparent hover:text-text-secondary'
-                                }`}
-                            >
-                                {cfg.label}
-                                {count > 0 && <span className="text-[9px] opacity-60">{count}</span>}
-                            </button>
-                        );
-                    })}
-                </div>
-                <div className="flex-1" />
-                {catArray.length > 0 && (
-                    <button
-                        onClick={() => setShowFilters(!showFilters)}
-                        className={`p-1 rounded transition-colors ${showFilters ? 'bg-cyan-500/20 text-cyan-400' : 'text-text-muted hover:text-text-primary hover:bg-surface-glass'}`}
-                        title="Filtrar categorías"
-                    >
-                        <Filter size={12} />
-                    </button>
-                )}
-                <span className="text-[10px] text-text-muted font-mono">{filteredEntries.length}/{logEntries.length}</span>
-                <button
-                    onClick={() => {
-                        const text = filteredEntries.map(e => {
-                            const cats = e.categories.length > 0 ? ` [${e.categories.join(',')}]` : '';
-                            const data = e.data !== undefined ? ` | ${typeof e.data === 'object' ? JSON.stringify(e.data) : String(e.data)}` : '';
-                            return `[${e.timestamp}] ${LEVEL_CONFIG[e.level].label}${cats}  ${e.message}${data}`;
-                        }).join('\n');
-                        navigator.clipboard.writeText(text).then(() => { setCopied(true); setTimeout(() => setCopied(false), 1500); });
-                    }}
-                    className={`p-1 rounded transition-colors ${copied ? 'text-green-400 bg-green-500/10' : 'text-text-muted hover:text-cyan-400 hover:bg-cyan-500/10'}`}
-                    title="Copiar logs visibles"
-                >
-                    {copied ? <Check size={12} /> : <Copy size={12} />}
-                </button>
-                <button onClick={clearLogs} className="p-1 rounded text-text-muted hover:text-red-400 hover:bg-red-500/10 transition-colors" title="Limpiar logs">
-                    <Trash2 size={12} />
-                </button>
-            </div>
-
-            <AnimatePresence>
-                {showFilters && catArray.length > 0 && (
-                    <motion.div initial={{ height: 0, opacity: 0 }} animate={{ height: 'auto', opacity: 1 }} exit={{ height: 0, opacity: 0 }} className="overflow-hidden border-b border-border-subtle">
-                        <div className="flex flex-wrap gap-1 px-3 py-2 bg-surface-primary/80">
-                            {catArray.map(cat => {
-                                const active = logFilters.categories.size === 0 || logFilters.categories.has(cat);
-                                return (
-                                    <button key={cat} onClick={() => toggleCategory(cat)} className={`px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-wider transition-all border ${active ? 'bg-cyan-500/10 text-cyan-400 border-cyan-500/20' : 'bg-transparent text-text-muted border-transparent hover:text-text-secondary'}`}>
-                                        {cat}
-                                    </button>
-                                );
-                            })}
-                        </div>
-                    </motion.div>
-                )}
-            </AnimatePresence>
-
-            <div ref={scrollRef} className="flex-1 overflow-y-auto custom-scrollbar">
-                {filteredEntries.length === 0 ? (
-                    <div className="flex items-center justify-center h-full text-text-muted text-xs font-mono">Sin entradas de log</div>
-                ) : (
-                    filteredEntries.map(entry => <LogRow key={entry.id} entry={entry} />)
-                )}
-            </div>
-        </div>
-    );
-}

package/src/components/debug/MorphStackTab.tsx

@@ -1,241 +0,0 @@
-import React, { useMemo, useEffect, useState, useRef } from 'react';
-import { useMorphologyStore } from '../../store/useMorphologyStore';
-import { useLayoutStore } from '../../store/useLayoutStore';
-import { Layers, AlertTriangle, ArrowDown, ArrowUp, Clock, RotateCcw } from 'lucide-react';
-
-interface MorphEvent {
-    id: number;
-    timestamp: string;
-    action: string;
-    stageType: string | null;
-    label: string;
-    data?: any;
-    level: 'info' | 'warn' | 'error';
-}
-
-let _eventId = 0;
-const MAX_EVENTS = 100;
-
-const STAGE_ICONS: Record<string, string> = {
-    '2d': '📊',
-    '3d': '🧊',
-    workbench: '🔧',
-    liquid: '💧',
-    artifact: '📄',
-    custom: '⚙️',
-};
-
-const STAGE_COLORS: Record<string, string> = {
-    '2d': 'border-cyan-500 bg-cyan-500/10',
-    '3d': 'border-violet-500 bg-violet-500/10',
-    workbench: 'border-amber-500 bg-amber-500/10',
-    liquid: 'border-blue-500 bg-blue-500/10',
-    artifact: 'border-emerald-500 bg-emerald-500/10',
-    custom: 'border-border-default bg-surface-glass',
-};
-
-function getTimestamp(): string {
-    const now = new Date();
-    return `${String(now.getHours()).padStart(2, '0')}:${String(now.getMinutes()).padStart(2, '0')}:${String(now.getSeconds()).padStart(2, '0')}`;
-}
-
-export function MorphStackTab() {
-    const morphActiveStage = useMorphologyStore(s => s.activeStage);
-    const morphHistory = useMorphologyStore(s => s.stageHistory);
-    const layoutActiveStage = useLayoutStore(s => s.activeStage);
-    const layoutHistory = useLayoutStore(s => s.stageHistory);
-
-    const [events, setEvents] = useState<MorphEvent[]>([]);
-    const eventLogRef = useRef<HTMLDivElement>(null);
-
-    // Detect desync between morphology and layout stores
-    const isDesync = useMemo(() => {
-        const morphType = morphActiveStage?.type || null;
-        const layoutType = layoutActiveStage?.type || null;
-        return morphType !== layoutType;
-    }, [morphActiveStage, layoutActiveStage]);
-
-    // Stack depth warning
-    const stackDepth = morphHistory.length;
-    const isDeepStack = stackDepth > 5;
-
-    // Subscribe to morphology store changes to build event log
-    useEffect(() => {
-        let prevStage = useMorphologyStore.getState().activeStage;
-        let prevDepth = useMorphologyStore.getState().stageHistory.length;
-
-        const unsub = useMorphologyStore.subscribe((state) => {
-            const newStage = state.activeStage;
-            const newDepth = state.stageHistory.length;
-
-            if (newStage !== prevStage || newDepth !== prevDepth) {
-                let action = 'change';
-                let level: MorphEvent['level'] = 'info';
-
-                if (newDepth > prevDepth) {
-                    action = '⬇️ pushStage';
-                } else if (newDepth < prevDepth && newStage) {
-                    action = '⬆️ popStage';
-                } else if (!newStage && prevStage) {
-                    action = '🗑️ clearStages';
-                    level = 'warn';
-                } else if (newStage && !prevStage) {
-                    action = '📌 setStage';
-                } else {
-                    action = '🔄 setStage';
-                }
-
-                setEvents(prev => {
-                    const updated = [...prev, {
-                        id: ++_eventId,
-                        timestamp: getTimestamp(),
-                        action,
-                        stageType: newStage?.type || null,
-                        label: newStage?.label || newStage?.type || 'null',
-                        data: { depth: newDepth, sourceNodeId: newStage?.sourceNodeId },
-                        level,
-                    }];
-                    return updated.length > MAX_EVENTS ? updated.slice(-MAX_EVENTS) : updated;
-                });
-
-                prevStage = newStage;
-                prevDepth = newDepth;
-            }
-        });
-        return unsub;
-    }, []);
-
-    // Auto-scroll event log
-    useEffect(() => {
-        if (eventLogRef.current) {
-            eventLogRef.current.scrollTop = eventLogRef.current.scrollHeight;
-        }
-    }, [events]);
-
-    return (
-        <div className="flex h-full text-[10px]">
-            {/* Left: Stack Visualization */}
-            <div className="w-48 shrink-0 border-r border-border-subtle p-3 space-y-2 overflow-y-auto">
-                <div className="text-[9px] font-bold text-text-muted uppercase tracking-widest mb-2 flex items-center gap-1">
-                    <Layers size={10} /> Stack ({stackDepth + (morphActiveStage ? 1 : 0)})
-                </div>
-
-                {/* Warnings */}
-                {isDesync && (
-                    <div className="px-2 py-1.5 rounded-lg bg-red-500/10 border border-red-500/30 text-red-400 text-[9px] font-bold flex items-center gap-1 animate-pulse">
-                        <AlertTriangle size={10} /> Stores desincronizados
-                    </div>
-                )}
-                {isDeepStack && (
-                    <div className="px-2 py-1.5 rounded-lg bg-amber-500/10 border border-amber-500/30 text-amber-400 text-[9px] font-bold flex items-center gap-1">
-                        <AlertTriangle size={10} /> Stack depth: {stackDepth} (posible leak)
-                    </div>
-                )}
-
-                {/* Active Stage */}
-                {morphActiveStage ? (
-                    <div className={`px-3 py-2 rounded-xl border-2 ${STAGE_COLORS[morphActiveStage.type] || 'border-border-default bg-surface-glass'} relative`}>
-                        <div className="absolute -top-2 right-2 px-1.5 py-0.5 rounded text-[7px] font-bold bg-cyan-500 text-text-inverse uppercase">Activo</div>
-                        <div className="flex items-center gap-1.5">
-                            <span className="text-lg">{STAGE_ICONS[morphActiveStage.type] || '❓'}</span>
-                            <div>
-                                <div className="font-bold text-text-primary text-[11px]">{morphActiveStage.type.toUpperCase()}</div>
-                                {morphActiveStage.label && <div className="text-text-secondary text-[9px]">{morphActiveStage.label}</div>}
-                            </div>
-                        </div>
-                        {morphActiveStage.sourceNodeId && (
-                            <div className="mt-1 text-[8px] text-text-muted font-mono truncate">src: {morphActiveStage.sourceNodeId}</div>
-                        )}
-                    </div>
-                ) : (
-                    <div className="px-3 py-2 rounded-xl border border-dashed border-border-default text-text-muted text-center italic">
-                        Sin stage activo
-                    </div>
-                )}
-
-                {/* Arrow */}
-                {morphHistory.length > 0 && (
-                    <div className="flex justify-center text-text-muted"><ArrowUp size={12} /></div>
-                )}
-
-                {/* History Stack (reversed: most recent on top) */}
-                {[...morphHistory].reverse().map((stage, i) => (
-                    <div
-                        key={i}
-                        className={`px-3 py-1.5 rounded-lg border ${STAGE_COLORS[stage.type] || 'border-border-default bg-surface-tertiary/50'} opacity-50 hover:opacity-80 cursor-pointer transition-all`}
-                        onClick={() => {
-                            // Pop back to this level
-                            const popsNeeded = i + 1;
-                            const ms = useMorphologyStore.getState();
-                            const ls = useLayoutStore.getState();
-                            for (let j = 0; j < popsNeeded; j++) { ms.popStage(); ls.popStage(); }
-                        }}
-                        title={`Click para volver a: ${stage.label || stage.type}`}
-                    >
-                        <div className="flex items-center gap-1.5">
-                            <span>{STAGE_ICONS[stage.type] || '❓'}</span>
-                            <span className="font-semibold text-text-primary">{stage.type}</span>
-                            {stage.label && <span className="text-text-muted truncate max-w-[80px]"> · {stage.label}</span>}
-                        </div>
-                    </div>
-                ))}
-            </div>
-
-            {/* Right: Event Log */}
-            <div className="flex-1 flex flex-col">
-                <div className="px-3 py-1.5 border-b border-border-subtle flex items-center justify-between">
-                    <div className="text-[9px] font-bold text-text-muted uppercase tracking-widest flex items-center gap-1">
-                        <Clock size={10} /> Eventos ({events.length})
-                    </div>
-                    <button onClick={() => setEvents([])} className="p-0.5 rounded hover:bg-surface-glass text-text-muted hover:text-text-secondary" title="Limpiar eventos">
-                        <RotateCcw size={10} />
-                    </button>
-                </div>
-                <div ref={eventLogRef} className="flex-1 overflow-y-auto custom-scrollbar">
-                    {events.length === 0 ? (
-                        <div className="flex items-center justify-center h-full text-text-muted italic">
-                            Esperando eventos morph...
-                        </div>
-                    ) : (
-                        events.map((evt) => (
-                            <div
-                                key={evt.id}
-                                className={`flex items-start gap-2 px-3 py-1 border-b border-border-subtle hover:bg-surface-glass ${
-                                    evt.level === 'warn' ? 'bg-amber-500/5' : evt.level === 'error' ? 'bg-red-500/5' : ''
-                                }`}
-                            >
-                                <span className="text-text-muted shrink-0 font-mono w-[50px]">{evt.timestamp}</span>
-                                <span className="shrink-0 w-[90px] font-semibold text-text-secondary">{evt.action}</span>
-                                <span className={`font-mono ${evt.stageType ? 'text-cyan-400' : 'text-text-muted'}`}>
-                                    {evt.label}
-                                </span>
-                                {evt.data?.depth !== undefined && (
-                                    <span className="text-text-muted ml-auto shrink-0">depth: {evt.data.depth}</span>
-                                )}
-                            </div>
-                        ))
-                    )}
-                </div>
-
-                {/* Desync Detail */}
-                {isDesync && (
-                    <div className="px-3 py-2 border-t border-red-500/20 bg-red-500/5">
-                        <div className="text-[9px] font-bold text-red-400 mb-1">⚠️ Store Desync Detectado</div>
-                        <div className="grid grid-cols-2 gap-2 text-[9px] font-mono">
-                            <div>
-                                <span className="text-text-muted">morph:</span>{' '}
-                                <span className="text-violet-400">{morphActiveStage?.type || 'null'}</span>
-                                <span className="text-text-muted"> (depth: {morphHistory.length})</span>
-                            </div>
-                            <div>
-                                <span className="text-text-muted">layout:</span>{' '}
-                                <span className="text-emerald-400">{layoutActiveStage?.type || 'null'}</span>
-                                <span className="text-text-muted"> (depth: {layoutHistory.length})</span>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}

package/src/components/debug/NetworkTab.tsx

@@ -1,173 +0,0 @@
-import React, { useState, useSyncExternalStore, useCallback, useMemo } from 'react';
-import { Globe, ChevronDown, ChevronRight, RotateCcw, Filter } from 'lucide-react';
-import {
-    getNetworkEntries, clearNetworkEntries, subscribeNetwork, installNetworkInterceptor,
-    type NetworkEntry,
-} from '../../lib/networkInterceptor';
-
-// Install interceptor on import
-installNetworkInterceptor();
-
-const STATUS_COLORS: Record<string, string> = {
-    '2': 'text-emerald-400',
-    '3': 'text-amber-400',
-    '4': 'text-red-400',
-    '5': 'text-red-500',
-    '0': 'text-text-muted',
-};
-
-function getStatusColor(status: number): string {
-    return STATUS_COLORS[String(status).charAt(0)] || 'text-text-secondary';
-}
-
-function truncateUrl(url: string): string {
-    try {
-        const u = new URL(url);
-        const path = u.pathname + u.search;
-        return path.length > 60 ? path.slice(0, 57) + '...' : path;
-    } catch {
-        return url.length > 60 ? url.slice(0, 57) + '...' : url;
-    }
-}
-
-function getDomain(url: string): string {
-    try { return new URL(url).hostname; } catch { return ''; }
-}
-
-function formatSize(bytes: number): string {
-    if (bytes < 1024) return `${bytes}B`;
-    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`;
-    return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
-}
-
-function NetworkRow({ entry, isExpanded, onToggle }: { entry: NetworkEntry; isExpanded: boolean; onToggle: () => void }) {
-    return (
-        <>
-            <div
-                onClick={onToggle}
-                className={`flex items-center gap-2 px-3 py-1 text-[10px] font-mono cursor-pointer hover:bg-surface-glass border-b border-border-subtle ${
-                    entry.error ? 'bg-red-500/5' : ''
-                }`}
-            >
-                {isExpanded ? <ChevronDown size={10} className="text-text-muted" /> : <ChevronRight size={10} className="text-text-muted" />}
-                <span className="text-text-muted w-[50px] shrink-0">{entry.timestamp}</span>
-                <span className={`w-[40px] shrink-0 font-bold ${entry.method === 'POST' ? 'text-amber-400' : 'text-cyan-400'}`}>{entry.method}</span>
-                <span className={`w-[30px] shrink-0 font-bold ${getStatusColor(entry.status)}`}>{entry.status || 'ERR'}</span>
-                <span className="flex-1 text-text-primary truncate" title={entry.url}>{truncateUrl(entry.url)}</span>
-                <span className="text-text-muted w-[50px] shrink-0 text-right">{entry.duration}ms</span>
-                <span className="text-text-muted w-[40px] shrink-0 text-right">{formatSize(entry.size)}</span>
-            </div>
-            {isExpanded && (
-                <div className="px-6 py-2 bg-surface-primary/80 border-b border-border-subtle text-[9px] font-mono space-y-2">
-                    <div><span className="text-text-muted">URL:</span> <span className="text-text-primary break-all">{entry.url}</span></div>
-                    {entry.error && <div className="text-red-400">Error: {entry.error}</div>}
-                    {entry.requestBody && (
-                        <div>
-                            <div className="text-text-muted mb-0.5">Request Body:</div>
-                            <pre className="bg-surface-secondary rounded p-2 text-text-secondary overflow-x-auto max-h-[150px] overflow-y-auto whitespace-pre-wrap">{
-                                (() => { try { return JSON.stringify(JSON.parse(entry.requestBody), null, 2); } catch { return entry.requestBody; } })()
-                            }</pre>
-                        </div>
-                    )}
-                    {entry.responseBody && (
-                        <div>
-                            <div className="text-text-muted mb-0.5">Response Body:</div>
-                            <pre className="bg-surface-secondary rounded p-2 text-text-secondary overflow-x-auto max-h-[150px] overflow-y-auto whitespace-pre-wrap">{
-                                (() => { try { return JSON.stringify(JSON.parse(entry.responseBody), null, 2); } catch { return entry.responseBody; } })()
-                            }</pre>
-                        </div>
-                    )}
-                </div>
-            )}
-        </>
-    );
-}
-
-export function NetworkTab() {
-    const entries = useSyncExternalStore(
-        useCallback((cb) => subscribeNetwork(cb), []),
-        useCallback(() => getNetworkEntries(), [])
-    );
-
-    const [expandedIds, setExpandedIds] = useState<Set<number>>(new Set());
-    const [domainFilter, setDomainFilter] = useState<string>('');
-
-    // Unique domains for filter
-    const domains = useMemo(() => {
-        const set = new Set<string>();
-        entries.forEach(e => { const d = getDomain(e.url); if (d) set.add(d); });
-        return Array.from(set).sort();
-    }, [entries]);
-
-    const filtered = useMemo(() => {
-        if (!domainFilter) return entries;
-        return entries.filter(e => getDomain(e.url).includes(domainFilter));
-    }, [entries, domainFilter]);
-
-    const toggleExpand = useCallback((id: number) => {
-        setExpandedIds(prev => {
-            const next = new Set(prev);
-            if (next.has(id)) next.delete(id); else next.add(id);
-            return next;
-        });
-    }, []);
-
-    const totalErrors = useMemo(() => entries.filter(e => e.status >= 400 || e.error).length, [entries]);
-
-    return (
-        <div className="flex flex-col h-full">
-            {/* Toolbar */}
-            <div className="flex items-center gap-2 px-3 py-1.5 border-b border-border-subtle shrink-0">
-                <Globe size={12} className="text-cyan-400" />
-                <span className="text-[10px] font-bold text-text-secondary uppercase tracking-widest">Network</span>
-                <span className="text-[9px] text-text-muted font-mono">{filtered.length}/{entries.length}</span>
-                {totalErrors > 0 && (
-                    <span className="px-1.5 py-0.5 rounded-full text-[8px] font-bold bg-red-500/20 text-red-400">{totalErrors} err</span>
-                )}
-                <div className="flex-1" />
-                {domains.length > 0 && (
-                    <select
-                        value={domainFilter}
-                        onChange={e => setDomainFilter(e.target.value)}
-                        className="bg-surface-secondary border border-border-default rounded px-1.5 py-0.5 text-[9px] text-text-secondary outline-hidden"
-                    >
-                        <option value="">All domains</option>
-                        {domains.map(d => <option key={d} value={d}>{d}</option>)}
-                    </select>
-                )}
-                <button onClick={clearNetworkEntries} className="p-0.5 rounded hover:bg-surface-glass text-text-muted hover:text-text-secondary" title="Limpiar">
-                    <RotateCcw size={10} />
-                </button>
-            </div>
-
-            {/* Header Row */}
-            <div className="flex items-center gap-2 px-3 py-0.5 text-[8px] font-bold text-text-muted uppercase tracking-widest border-b border-border-subtle shrink-0">
-                <span className="w-[14px]" />
-                <span className="w-[50px]">Time</span>
-                <span className="w-[40px]">Method</span>
-                <span className="w-[30px]">Status</span>
-                <span className="flex-1">URL</span>
-                <span className="w-[50px] text-right">Duration</span>
-                <span className="w-[40px] text-right">Size</span>
-            </div>
-
-            {/* Entries */}
-            <div className="flex-1 overflow-y-auto custom-scrollbar">
-                {filtered.length === 0 ? (
-                    <div className="flex items-center justify-center h-full text-text-muted text-[10px] italic">
-                        Sin peticiones de red capturadas
-                    </div>
-                ) : (
-                    filtered.map(entry => (
-                        <NetworkRow
-                            key={entry.id}
-                            entry={entry}
-                            isExpanded={expandedIds.has(entry.id)}
-                            onToggle={() => toggleExpand(entry.id)}
-                        />
-                    ))
-                )}
-            </div>
-        </div>
-    );
-}