@decido/shell 1.0.0 → 4.0.1

package/src/components/debug/CSSInspectorTab.tsx

@@ -1,436 +0,0 @@
-/**
- * CSSInspectorTab — Integrated Tailwind CSS Inspector for DebugPanel
- *
- * Features:
- *  - Element picker with outline overlay
- *  - Tailwind class viewer/editor (add/remove/toggle)
- *  - Design token inspector (--ds-* vars affecting element)
- *  - Box model visualizer
- *  - Theme switcher
- *  - "Find hardcoded" detector
- */
-import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
-import { Eye, EyeOff, ChevronRight, ChevronDown, Search, Palette, Copy, X, Plus, AlertTriangle, Box, Layers } from 'lucide-react';
-import { useTheme, THEME_PRESETS } from '../../store/useThemeStore';
-
-// ── Outline Overlay (renders outside normal flow) ──
-
-const OutlineOverlay: React.FC<{ target: HTMLElement | null; color?: string }> = ({ target, color = '#3b82f6' }) => {
-  const [rect, setRect] = useState<DOMRect | null>(null);
-  useEffect(() => {
-    if (!target) { setRect(null); return; }
-    const update = () => setRect(target.getBoundingClientRect());
-    update();
-    const obs = new ResizeObserver(update);
-    obs.observe(target);
-    window.addEventListener('scroll', update, true);
-    return () => { obs.disconnect(); window.removeEventListener('scroll', update, true); };
-  }, [target]);
-
-  if (!rect) return null;
-  return (
-    <div className="fixed pointer-events-none z-99999" style={{
-      left: rect.left - 2, top: rect.top - 2,
-      width: rect.width + 4, height: rect.height + 4,
-      border: `2px solid ${color}`, borderRadius: 4,
-      background: `${color}11`, transition: 'all 0.15s ease',
-    }}>
-      <span className="absolute -top-5 left-0 text-[9px] font-mono px-1.5 py-0.5 rounded" style={{ background: color, color: '#fff' }}>
-        {target?.tagName.toLowerCase()}{target?.id ? `#${target.id}` : ''}{target?.classList.length ? `.${Array.from(target.classList).slice(0, 2).join('.')}` : ''}
-      </span>
-    </div>
-  );
-};
-
-// ── Important CSS props ──
-const KEY_PROPS = [
-  'display', 'position', 'z-index', 'opacity',
-  'width', 'height', 'max-width', 'max-height',
-  'margin', 'padding', 'gap',
-  'flex', 'flex-direction', 'align-items', 'justify-content',
-  'background-color', 'color', 'font-size', 'font-weight',
-  'border', 'border-radius', 'box-shadow', 'backdrop-filter',
-  'overflow', 'transform', 'pointer-events',
-];
-
-// ── Detect if a color value is hardcoded (not using tokens) ──
-function isHardcodedColor(value: string): boolean {
-  if (!value) return false;
-  return /^#[0-9a-f]{3,8}$/i.test(value) || /^rgb/i.test(value);
-}
-
-// ── Extract --ds-* tokens from computed styles ──
-function getActiveTokens(el: HTMLElement): { token: string; value: string }[] {
-  const style = getComputedStyle(el);
-  const root = getComputedStyle(document.documentElement);
-  const tokens: { token: string; value: string }[] = [];
-  const dsVars = ['surface-primary', 'surface-secondary', 'surface-tertiary', 'surface-elevated',
-    'surface-glass', 'text-primary', 'text-secondary', 'text-muted', 'accent-blue', 'accent-purple',
-    'accent-green', 'accent-red', 'accent-amber', 'accent-cyan', 'border-subtle', 'border-default',
-    'border-strong', 'border-glow'];
-
-  const bgColor = style.backgroundColor;
-  const textColor = style.color;
-  const borderColor = style.borderColor;
-
-  for (const v of dsVars) {
-    const tokenVal = root.getPropertyValue(`--ds-${v}`).trim();
-    if (!tokenVal) continue;
-    if (bgColor === tokenVal || textColor === tokenVal || borderColor === tokenVal) {
-      tokens.push({ token: `--ds-${v}`, value: tokenVal });
-    }
-  }
-  return tokens;
-}
-
-// ── Box Model Component ──
-const BoxModelViz: React.FC<{ el: HTMLElement }> = ({ el }) => {
-  const style = getComputedStyle(el);
-  const m = { t: style.marginTop, r: style.marginRight, b: style.marginBottom, l: style.marginLeft };
-  const p = { t: style.paddingTop, r: style.paddingRight, b: style.paddingBottom, l: style.paddingLeft };
-  const w = el.offsetWidth;
-  const h = el.offsetHeight;
-
-  return (
-    <div className="flex justify-center py-3">
-      <div className="relative text-[8px] font-mono select-none">
-        {/* Margin */}
-        <div className="border border-dashed border-accent-amber/40 bg-accent-amber/5 px-6 py-4 rounded">
-          <span className="absolute top-0.5 left-1 text-accent-amber/60">margin</span>
-          <span className="absolute top-1 left-1/2 -translate-x-1/2 text-accent-amber">{m.t}</span>
-          <span className="absolute bottom-1 left-1/2 -translate-x-1/2 text-accent-amber">{m.b}</span>
-          <span className="absolute left-1 top-1/2 -translate-y-1/2 text-accent-amber">{m.l}</span>
-          <span className="absolute right-1 top-1/2 -translate-y-1/2 text-accent-amber">{m.r}</span>
-          {/* Padding */}
-          <div className="border border-dashed border-accent-green/40 bg-accent-green/5 px-6 py-4 rounded relative">
-            <span className="absolute top-0.5 left-1 text-accent-green/60">padding</span>
-            <span className="absolute top-1 left-1/2 -translate-x-1/2 text-accent-green">{p.t}</span>
-            <span className="absolute bottom-1 left-1/2 -translate-x-1/2 text-accent-green">{p.b}</span>
-            <span className="absolute left-1 top-1/2 -translate-y-1/2 text-accent-green">{p.l}</span>
-            <span className="absolute right-1 top-1/2 -translate-y-1/2 text-accent-green">{p.r}</span>
-            {/* Content */}
-            <div className="bg-accent-blue/10 border border-accent-blue/30 rounded px-4 py-2 text-center text-accent-blue">
-              {w} × {h}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// ── Sub-tabs ──
-type SubTab = 'classes' | 'computed' | 'tokens' | 'box';
-
-// ── Main Component ──
-export const CSSInspectorTab: React.FC = () => {
-  const [selected, setSelected] = useState<HTMLElement | null>(null);
-  const [hovered, setHovered] = useState<HTMLElement | null>(null);
-  const [pickMode, setPickMode] = useState(false);
-  const [subTab, setSubTab] = useState<SubTab>('classes');
-  const [filter, setFilter] = useState('');
-  const [showAll, setShowAll] = useState(false);
-  const [addClass, setAddClass] = useState('');
-  const [hardcodedEls, setHardcodedEls] = useState<HTMLElement[]>([]);
-  const setTheme = useTheme(s => s.setTheme);
-  const currentThemeId = useTheme(s => s.currentThemeId);
-
-  // Pick mode
-  useEffect(() => {
-    if (!pickMode) return;
-    const onClick = (e: MouseEvent) => {
-      e.preventDefault(); e.stopPropagation();
-      const t = e.target as HTMLElement;
-      if (t.closest('[data-debug-panel]')) return;
-      setSelected(t); setPickMode(false);
-    };
-    const onMove = (e: MouseEvent) => {
-      const t = e.target as HTMLElement;
-      if (!t.closest('[data-debug-panel]')) setHovered(t);
-    };
-    document.addEventListener('click', onClick, true);
-    document.addEventListener('mousemove', onMove, true);
-    document.body.style.cursor = 'crosshair';
-    return () => {
-      document.removeEventListener('click', onClick, true);
-      document.removeEventListener('mousemove', onMove, true);
-      document.body.style.cursor = '';
-    };
-  }, [pickMode]);
-
-  // Classes of selected element
-  const classes = useMemo(() => {
-    if (!selected) return [];
-    return Array.from(selected.classList).filter(c => !filter || c.includes(filter));
-  }, [selected, filter]);
-
-  // Computed CSS
-  const computedProps = useMemo(() => {
-    if (!selected) return [];
-    const computed = getComputedStyle(selected);
-    const props = showAll
-      ? Array.from({ length: computed.length }, (_, i) => computed[i])
-      : KEY_PROPS;
-    return props
-      .map(p => ({ prop: p, value: computed.getPropertyValue(p) }))
-      .filter(p => p.value && p.value !== 'none' && p.value !== 'normal' && p.value !== 'auto' && p.value !== '0px')
-      .filter(p => !filter || p.prop.includes(filter) || p.value.includes(filter));
-  }, [selected, filter, showAll]);
-
-  // Active tokens
-  const tokens = useMemo(() => selected ? getActiveTokens(selected) : [], [selected]);
-
-  // Toggle class
-  const toggleClass = useCallback((cls: string) => {
-    if (!selected) return;
-    selected.classList.toggle(cls);
-    setSelected(selected); // force re-render
-    setFilter(f => f); // trigger useMemo
-  }, [selected]);
-
-  // Add class
-  const handleAddClass = useCallback(() => {
-    if (!selected || !addClass.trim()) return;
-    selected.classList.add(...addClass.trim().split(/\s+/));
-    setAddClass('');
-    setFilter(f => f);
-  }, [selected, addClass]);
-
-  // Find hardcoded colors
-  const findHardcoded = useCallback(() => {
-    const root = document.getElementById('root');
-    if (!root) return;
-    const els: HTMLElement[] = [];
-    root.querySelectorAll('*').forEach((el) => {
-      if (!(el instanceof HTMLElement)) return;
-      const s = getComputedStyle(el);
-      const bg = s.backgroundColor;
-      const color = s.color;
-      // Check if using non-token colors (not transparent, not inherit)
-      if (bg && bg !== 'rgba(0, 0, 0, 0)' && bg !== 'transparent') {
-        const hasBgToken = Array.from(el.classList).some(c => c.startsWith('bg-surface-') || c.startsWith('bg-accent-'));
-        if (!hasBgToken && isHardcodedColor(bg)) {
-          els.push(el);
-        }
-      }
-    });
-    setHardcodedEls(els);
-  }, []);
-
-  // Sub-tab buttons
-  const SUB_TABS: { id: SubTab; label: string; icon: React.ComponentType<any> }[] = [
-    { id: 'classes', label: 'Classes', icon: Layers },
-    { id: 'computed', label: 'CSS', icon: Box },
-    { id: 'tokens', label: 'Tokens', icon: Palette },
-    { id: 'box', label: 'Box', icon: Box },
-  ];
-
-  return (
-    <div className="flex flex-col h-full text-text-primary" data-debug-panel>
-      {/* Overlays */}
-      <OutlineOverlay target={pickMode ? hovered : selected} color={pickMode ? '#f59e0b' : '#3b82f6'} />
-      {hovered && !pickMode && hovered !== selected && <OutlineOverlay target={hovered} color="#22d3ee44" />}
-
-      {/* Toolbar */}
-      <div className="flex items-center gap-1 px-2 py-1.5 border-b border-border-subtle bg-surface-secondary/50 shrink-0">
-        {/* Pick button */}
-        <button
-          onClick={() => setPickMode(!pickMode)}
-          className={`flex items-center gap-1 px-2 py-1 rounded text-[10px] font-semibold transition-all ${pickMode ? 'bg-accent-amber/20 text-accent-amber ring-1 ring-accent-amber/40' : 'text-text-muted hover:text-text-primary hover:bg-surface-glass'}`}
-          title="Pick Element"
-        >
-          {pickMode ? <Eye size={11} /> : <EyeOff size={11} />}
-          Pick
-        </button>
-
-        <div className="w-px h-4 bg-border-subtle mx-1" />
-
-        {/* Theme switcher */}
-        <select
-          value={currentThemeId}
-          onChange={(e) => setTheme(e.target.value)}
-          className="bg-surface-tertiary text-text-primary text-[10px] font-mono rounded px-1.5 py-1 border border-border-subtle outline-none cursor-pointer"
-        >
-          {THEME_PRESETS.map(t => (
-            <option key={t.id} value={t.id}>{t.name}</option>
-          ))}
-        </select>
-
-        <div className="w-px h-4 bg-border-subtle mx-1" />
-
-        {/* Find hardcoded */}
-        <button
-          onClick={findHardcoded}
-          className="flex items-center gap-1 px-2 py-1 rounded text-[10px] font-semibold text-text-muted hover:text-accent-red hover:bg-accent-red/10 transition-all"
-          title="Find elements with hardcoded colors"
-        >
-          <AlertTriangle size={10} />
-          Audit
-          {hardcodedEls.length > 0 && <span className="text-[8px] bg-accent-red/20 text-accent-red px-1 rounded-full">{hardcodedEls.length}</span>}
-        </button>
-
-        {/* Selected element label */}
-        {selected && (
-          <div className="ml-auto text-[9px] font-mono text-text-muted truncate max-w-[180px]">
-            &lt;{selected.tagName.toLowerCase()}{selected.id ? `#${selected.id}` : ''}&gt;
-            <span className="text-text-muted/50 ml-1">{selected.offsetWidth}×{selected.offsetHeight}</span>
-          </div>
-        )}
-      </div>
-
-      {selected ? (
-        <>
-          {/* Sub-tab bar */}
-          <div className="flex items-center gap-0.5 px-2 py-1 border-b border-border-subtle shrink-0">
-            {SUB_TABS.map(t => (
-              <button
-                key={t.id}
-                onClick={() => setSubTab(t.id)}
-                className={`px-2 py-0.5 rounded text-[10px] font-semibold transition-all ${subTab === t.id ? 'bg-surface-glass text-text-primary' : 'text-text-muted hover:text-text-primary'}`}
-              >
-                {t.label}
-              </button>
-            ))}
-
-            {/* Search */}
-            <div className="ml-auto flex items-center gap-1 bg-surface-tertiary rounded px-1.5 py-0.5 border border-border-subtle">
-              <Search size={9} className="text-text-muted" />
-              <input
-                value={filter}
-                onChange={(e) => setFilter(e.target.value)}
-                placeholder="Filter..."
-                className="bg-transparent text-text-primary text-[10px] font-mono outline-none w-20"
-              />
-            </div>
-          </div>
-
-          {/* Content */}
-          <div className="flex-1 overflow-auto scrollbar-thin">
-            {/* ── Classes Tab ── */}
-            {subTab === 'classes' && (
-              <div className="p-2">
-                {/* Add class */}
-                <div className="flex items-center gap-1 mb-2">
-                  <input
-                    value={addClass}
-                    onChange={(e) => setAddClass(e.target.value)}
-                    onKeyDown={(e) => e.key === 'Enter' && handleAddClass()}
-                    placeholder="Add TW class..."
-                    className="flex-1 bg-surface-tertiary text-text-primary text-[10px] font-mono px-2 py-1 rounded border border-border-subtle outline-none focus:border-accent-blue/50"
-                  />
-                  <button onClick={handleAddClass} className="p-1 rounded text-text-muted hover:text-accent-green hover:bg-accent-green/10">
-                    <Plus size={11} />
-                  </button>
-                </div>
-                {/* Class list */}
-                <div className="flex flex-wrap gap-1">
-                  {classes.map((cls) => (
-                    <button
-                      key={cls}
-                      onClick={() => toggleClass(cls)}
-                      className="group flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[9px] font-mono bg-surface-glass border border-border-subtle text-text-secondary hover:text-text-primary hover:border-accent-blue/40 transition-all"
-                    >
-                      {cls}
-                      <X size={8} className="opacity-0 group-hover:opacity-100 text-accent-red" />
-                    </button>
-                  ))}
-                  {classes.length === 0 && (
-                    <span className="text-[10px] text-text-muted italic">No classes match filter</span>
-                  )}
-                </div>
-                {/* Copy all */}
-                <button
-                  onClick={() => selected && navigator.clipboard.writeText(Array.from(selected.classList).join(' '))}
-                  className="mt-2 flex items-center gap-1 text-[9px] text-text-muted hover:text-accent-cyan transition-colors"
-                >
-                  <Copy size={9} /> Copy all classes
-                </button>
-              </div>
-            )}
-
-            {/* ── Computed CSS Tab ── */}
-            {subTab === 'computed' && (
-              <div>
-                <div className="px-2 py-1 flex justify-end">
-                  <button
-                    onClick={() => setShowAll(!showAll)}
-                    className={`text-[9px] font-mono px-1.5 py-0.5 rounded ${showAll ? 'bg-accent-purple/20 text-accent-purple' : 'text-text-muted hover:text-text-primary'}`}
-                  >
-                    {showAll ? 'ALL' : 'KEY'}
-                  </button>
-                </div>
-                {computedProps.map(({ prop, value }) => (
-                  <div key={prop} className="flex items-center gap-1 px-2 py-0.5 text-[10px] font-mono hover:bg-surface-glass group">
-                    <span className="text-accent-purple shrink-0 w-[110px] truncate">{prop}:</span>
-                    <span className="flex-1 text-text-secondary truncate">{value}</span>
-                    {/* Color swatch */}
-                    {(prop.includes('color') || prop === 'background-color') && value !== 'transparent' && value !== 'rgba(0, 0, 0, 0)' && (
-                      <span className="w-3 h-3 rounded-sm border border-border-subtle shrink-0" style={{ backgroundColor: value }} />
-                    )}
-                    <button onClick={() => navigator.clipboard.writeText(`${prop}: ${value}`)} className="opacity-0 group-hover:opacity-100 text-text-muted hover:text-accent-cyan">
-                      <Copy size={9} />
-                    </button>
-                  </div>
-                ))}
-              </div>
-            )}
-
-            {/* ── Tokens Tab ── */}
-            {subTab === 'tokens' && (
-              <div className="p-2">
-                <div className="text-[9px] font-mono text-text-muted uppercase tracking-wider mb-2">Active Design Tokens</div>
-                {tokens.length > 0 ? tokens.map(({ token, value }) => (
-                  <div key={token} className="flex items-center gap-2 px-2 py-1 rounded hover:bg-surface-glass text-[10px] font-mono">
-                    <span className="w-4 h-4 rounded border border-border-subtle shrink-0" style={{ backgroundColor: value }} />
-                    <span className="text-accent-cyan">{token}</span>
-                    <span className="text-text-muted ml-auto">{value}</span>
-                  </div>
-                )) : (
-                  <div className="text-text-muted text-[10px] italic">
-                    No `--ds-*` tokens detected on this element.
-                    <br />This might use hardcoded colors.
-                  </div>
-                )}
-
-                {/* Inline styles */}
-                {selected?.style.cssText && (
-                  <div className="mt-3">
-                    <div className="text-[9px] font-mono text-text-muted uppercase tracking-wider mb-1">Inline Styles</div>
-                    <div className="text-[10px] font-mono text-accent-amber bg-surface-glass rounded p-2 break-all">{selected.style.cssText}</div>
-                  </div>
-                )}
-              </div>
-            )}
-
-            {/* ── Box Model Tab ── */}
-            {subTab === 'box' && selected && <BoxModelViz el={selected} />}
-          </div>
-        </>
-      ) : (
-        <div className="flex-1 flex flex-col items-center justify-center text-text-muted text-xs gap-2 py-8">
-          <Eye size={24} className="opacity-30" />
-          <span>Click <strong>"Pick"</strong> to select an element</span>
-          <span className="text-[9px]">or use <strong>"Audit"</strong> to find hardcoded colors</span>
-        </div>
-      )}
-
-      {/* Hardcoded results footer */}
-      {hardcodedEls.length > 0 && (
-        <div className="shrink-0 border-t border-border-subtle px-2 py-1 bg-accent-red/5">
-          <div className="text-[9px] font-mono text-accent-red mb-1">⚠ {hardcodedEls.length} elements with potential hardcoded colors</div>
-          <div className="flex flex-wrap gap-1 max-h-12 overflow-auto">
-            {hardcodedEls.slice(0, 20).map((el, i) => (
-              <button
-                key={i}
-                onClick={() => { setSelected(el); setSubTab('computed'); }}
-                className="text-[8px] font-mono text-text-muted hover:text-accent-red bg-surface-glass rounded px-1 py-0.5"
-              >
-                {el.tagName.toLowerCase()}{el.className && typeof el.className === 'string' ? `.${el.className.split(' ')[0]}` : ''}
-              </button>
-            ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-};

package/src/components/debug/ExportTab.tsx

@@ -1,192 +0,0 @@
-import React, { useCallback, useState } from 'react';
-import { Download, Upload, Copy, Check, FileJson, FileText } from 'lucide-react';
-import { useDebugPanelStore } from '../../store/useDebugPanelStore';
-import { useActionTimelineStore } from '../../store/useActionTimelineStore';
-import { getNetworkEntries } from '../../lib/networkInterceptor';
-import { useMorphologyStore } from '../../store/useMorphologyStore';
-import { useLayoutStore } from '../../store/useLayoutStore';
-import { useMorphInstanceStore } from '../../store/useMorphInstanceStore';
-import { useDebugProfileStore } from '../../store/useDebugProfileStore';
-
-function generateReport(): object {
-    const now = new Date();
-    return {
-        meta: {
-            exportedAt: now.toISOString(),
-            userAgent: navigator.userAgent,
-            url: window.location.href,
-            screenSize: `${window.innerWidth}x${window.innerHeight}`,
-        },
-        logs: useDebugPanelStore.getState().logEntries.slice(-100),
-        timeline: useActionTimelineStore.getState().events,
-        network: getNetworkEntries(),
-        morphology: {
-            activeStage: useMorphologyStore.getState().activeStage,
-            stageHistory: useMorphologyStore.getState().stageHistory,
-        },
-        layout: {
-            activeStage: useLayoutStore.getState().activeStage,
-            stageHistory: useLayoutStore.getState().stageHistory,
-            slots: useLayoutStore.getState().slots,
-        },
-        instances: (() => {
-            const inst = useMorphInstanceStore.getState().instances;
-            const arr: any[] = [];
-            inst.forEach((v, k) => arr.push({ instanceId: k, ...v }));
-            return arr;
-        })(),
-        profiles: useDebugProfileStore.getState().profiles,
-    };
-}
-
-function generateMarkdownReport(): string {
-    const report = generateReport() as any;
-    const lines: string[] = [];
-    const ts = new Date().toLocaleString();
-    lines.push(`# Debug Report — ${ts}\n`);
-    lines.push(`## Meta`);
-    lines.push(`- **Screen**: ${report.meta.screenSize}`);
-    lines.push(`- **URL**: ${report.meta.url}`);
-    lines.push(`- **UA**: ${report.meta.userAgent}\n`);
-
-    // Morph state
-    lines.push(`## Morphology State`);
-    lines.push(`- **Active Stage**: ${report.morphology.activeStage?.type || 'null'} (${report.morphology.activeStage?.label || '–'})`);
-    lines.push(`- **History Depth**: ${report.morphology.stageHistory.length}`);
-    const layoutSync = report.morphology.activeStage?.type === report.layout.activeStage?.type ? '✅ Sincronizado' : '⚠️ DESINCRONIZADO';
-    lines.push(`- **Layout Sync**: ${layoutSync}\n`);
-
-    // Logs summary
-    const logsByLevel = { info: 0, warn: 0, error: 0, debug: 0 };
-    report.logs.forEach((l: any) => { logsByLevel[l.level as keyof typeof logsByLevel]++; });
-    lines.push(`## Logs Summary (${report.logs.length})`);
-    lines.push(`| Level | Count |\n|-------|-------|\n| info | ${logsByLevel.info} |\n| warn | ${logsByLevel.warn} |\n| error | ${logsByLevel.error} |\n| debug | ${logsByLevel.debug} |\n`);
-
-    // Network summary
-    const netErrors = report.network.filter((n: any) => n.status >= 400 || n.error).length;
-    lines.push(`## Network (${report.network.length} requests, ${netErrors} errors)`);
-    if (report.network.length > 0) {
-        lines.push(`| Time | Method | Status | URL | Duration |`);
-        lines.push(`|------|--------|--------|-----|----------|`);
-        report.network.slice(-20).forEach((n: any) => {
-            const url = n.url.length > 50 ? n.url.slice(0, 47) + '...' : n.url;
-            lines.push(`| ${n.timestamp} | ${n.method} | ${n.status || 'ERR'} | ${url} | ${n.duration}ms |`);
-        });
-    }
-    lines.push('');
-
-    // Timeline events
-    lines.push(`## Timeline Events (${report.timeline.length})`);
-    report.timeline.slice(-30).forEach((e: any) => {
-        lines.push(`- \`${e.timestamp}\` **${e.storeName}**.${e.actionName} ${e.level !== 'info' ? `(${e.level})` : ''}`);
-    });
-
-    return lines.join('\n');
-}
-
-function downloadFile(content: string, filename: string, mimeType: string) {
-    const blob = new Blob([content], { type: mimeType });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url; a.download = filename; a.click();
-    URL.revokeObjectURL(url);
-}
-
-export function ExportTab() {
-    const [copied, setCopied] = useState(false);
-    const [lastAction, setLastAction] = useState<string | null>(null);
-
-    const handleExportJSON = useCallback(() => {
-        const report = generateReport();
-        const ts = new Date().toISOString().replace(/[:.]/g, '-');
-        downloadFile(JSON.stringify(report, null, 2), `debug-report-${ts}.json`, 'application/json');
-        setLastAction('📦 JSON exportado');
-        setTimeout(() => setLastAction(null), 2000);
-    }, []);
-
-    const handleExportMD = useCallback(() => {
-        const md = generateMarkdownReport();
-        const ts = new Date().toISOString().replace(/[:.]/g, '-');
-        downloadFile(md, `debug-report-${ts}.md`, 'text/markdown');
-        setLastAction('📝 Markdown exportado');
-        setTimeout(() => setLastAction(null), 2000);
-    }, []);
-
-    const handleCopyClipboard = useCallback(async () => {
-        const md = generateMarkdownReport();
-        await navigator.clipboard.writeText(md);
-        setCopied(true);
-        setLastAction('📋 Copiado al portapapeles');
-        setTimeout(() => { setCopied(false); setLastAction(null); }, 2000);
-    }, []);
-
-    const logCount = useDebugPanelStore(s => s.logEntries.length);
-    const timelineCount = useActionTimelineStore(s => s.events.length);
-
-    return (
-        <div className="p-4 space-y-4 overflow-y-auto h-full custom-scrollbar">
-            <div className="text-[10px] font-bold text-text-secondary uppercase tracking-widest flex items-center gap-1">
-                <Download size={10} /> Exportar Sesión de Debug
-            </div>
-
-            <div className="grid grid-cols-3 gap-3">
-                {/* JSON Export */}
-                <button
-                    onClick={handleExportJSON}
-                    className="rounded-xl bg-blue-500/10 border border-blue-500/20 p-4 hover:bg-blue-500/15 transition-all group"
-                >
-                    <FileJson size={24} className="text-blue-400 mb-2 group-hover:scale-110 transition-transform" />
-                    <div className="text-[11px] font-bold text-text-primary">JSON Completo</div>
-                    <div className="text-[9px] text-text-muted mt-1">Logs, timeline, network, morph state, profiles</div>
-                </button>
-
-                {/* Markdown Export */}
-                <button
-                    onClick={handleExportMD}
-                    className="rounded-xl bg-violet-500/10 border border-violet-500/20 p-4 hover:bg-violet-500/15 transition-all group"
-                >
-                    <FileText size={24} className="text-violet-400 mb-2 group-hover:scale-110 transition-transform" />
-                    <div className="text-[11px] font-bold text-text-primary">Markdown Report</div>
-                    <div className="text-[9px] text-text-muted mt-1">Resumen legible con tablas y métricas</div>
-                </button>
-
-                {/* Clipboard */}
-                <button
-                    onClick={handleCopyClipboard}
-                    className="rounded-xl bg-emerald-500/10 border border-emerald-500/20 p-4 hover:bg-emerald-500/15 transition-all group"
-                >
-                    {copied ? <Check size={24} className="text-emerald-400 mb-2" /> : <Copy size={24} className="text-emerald-400 mb-2 group-hover:scale-110 transition-transform" />}
-                    <div className="text-[11px] font-bold text-text-primary">Copiar al Clipboard</div>
-                    <div className="text-[9px] text-text-muted mt-1">Pegar en chat, issue, o documento</div>
-                </button>
-            </div>
-
-            {/* Stats */}
-            <div className="rounded-xl bg-surface-secondary/50 border border-border-subtle p-3">
-                <div className="text-[9px] font-bold text-text-muted uppercase tracking-widest mb-2">Datos a exportar</div>
-                <div className="grid grid-cols-4 gap-3 text-center">
-                    <div>
-                        <div className="text-[14px] font-bold text-green-400">{logCount}</div>
-                        <div className="text-[8px] text-text-muted">Logs</div>
-                    </div>
-                    <div>
-                        <div className="text-[14px] font-bold text-amber-400">{timelineCount}</div>
-                        <div className="text-[8px] text-text-muted">Timeline</div>
-                    </div>
-                    <div>
-                        <div className="text-[14px] font-bold text-cyan-400">{getNetworkEntries().length}</div>
-                        <div className="text-[8px] text-text-muted">Network</div>
-                    </div>
-                    <div>
-                        <div className="text-[14px] font-bold text-violet-400">{useDebugProfileStore.getState().profiles.length}</div>
-                        <div className="text-[8px] text-text-muted">Profiles</div>
-                    </div>
-                </div>
-            </div>
-
-            {lastAction && (
-                <div className="text-[10px] text-emerald-400 font-mono animate-pulse text-center">{lastAction}</div>
-            )}
-        </div>
-    );
-}