@decido/shell 1.0.0

package/src/components/debug/FlowHealthTab.tsx

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

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

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

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