@decido/shell 1.0.0 → 4.0.2

package/src/components/playground/demos/ClinicaAINode.tsx

@@ -1,221 +0,0 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    Car, Thermometer, Activity, Brain, Wifi, AlertTriangle,
-    CheckCircle2, Gauge, Battery, Wrench, TrendingUp,
-    Clock, Zap, Shield, MapPin, BarChart3
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA FLEET HEALTH NODE — Diagnóstico Predictivo
-   Telemetría IoT + mantenimiento predictivo con IA
-   ═══════════════════════════════════════════════════════════════ */
-
-interface FleetVehicle {
-    id: string; model: string; year: number; km: number;
-    status: 'ok' | 'warning' | 'critical';
-    battery: number; engine: string; oil: number;
-    tires: number[]; temp: number; dtcCodes: string[];
-    nextService: string; owner: string;
-    prediction?: string;
-}
-
-const FLEET: FleetVehicle[] = [
-    { id: 'KIA-3201', model: 'Sportage', year: 2024, km: 18420, status: 'ok', battery: 92, engine: 'OK', oil: 78, tires: [32, 31, 33, 32], temp: 88, dtcCodes: [], nextService: '12.000 km', owner: 'Mauricio Díaz' },
-    { id: 'KIA-1105', model: 'Seltos', year: 2023, km: 42310, status: 'warning', battery: 67, engine: 'CHECK', oil: 35, tires: [28, 27, 30, 29], temp: 95, dtcCodes: ['P0301'], nextService: '1.200 km', owner: 'Ana Torres', prediction: 'Bujía cilindro 1 desgastada (87% prob). Intervención preventiva evitaría daño catalítico.' },
-    { id: 'KIA-7788', model: 'EV6', year: 2024, km: 9800, status: 'ok', battery: 98, engine: 'EV', oil: -1, tires: [35, 35, 34, 35], temp: 42, dtcCodes: [], nextService: '20.200 km', owner: 'Carlos Ruiz', prediction: 'Batería HV degradación mínima. Proyección: 94% salud a 100K km. Óptimo.' },
-    { id: 'KIA-5502', model: 'K3', year: 2023, km: 55120, status: 'critical', battery: 45, engine: 'FAIL', oil: 12, tires: [25, 22, 26, 24], temp: 108, dtcCodes: ['P0420', 'P0171'], nextService: 'URGENTE', owner: 'Jorge Vélez', prediction: 'Aceite al 12% → riesgo cigüeñal en ~500 km. Catalítico degradado. Cita automática agendada.' },
-    { id: 'KIA-9901', model: 'Sorento', year: 2024, km: 31200, status: 'ok', battery: 85, engine: 'OK', oil: 62, tires: [30, 31, 30, 31], temp: 91, dtcCodes: [], nextService: '8.800 km', owner: 'Luisa Perea' },
-    { id: 'KIA-4420', model: 'EV3', year: 2025, km: 3200, status: 'ok', battery: 100, engine: 'EV', oil: -1, tires: [34, 34, 34, 34], temp: 38, dtcCodes: [], nextService: '26.800 km', owner: 'Andrea López' },
-];
-
-const jitter = (n: number, r: number) => n + Math.floor((Math.random() - 0.5) * r);
-
-export const KiaFleetHealthNode = (props: any) => {
-    const [fleet] = useState(FLEET);
-    const [selected, setSelected] = useState('KIA-5502');
-    const [diagnosing, setDiagnosing] = useState(false);
-    const [aiInsight, setAiInsight] = useState<string | null>(null);
-    const [liveTemp, setLiveTemp] = useState(FLEET.map(f => f.temp));
-    const [tick, setTick] = useState(0);
-
-    const vehicle = fleet.find(v => v.id === selected)!;
-    const vehicleIdx = fleet.findIndex(v => v.id === selected);
-
-    /* Live telemetry */
-    useEffect(() => {
-        const iv = setInterval(() => {
-            setTick(t => t + 1);
-            setLiveTemp(prev => prev.map(t => Math.max(30, Math.min(120, t + Math.floor(Math.random() * 5 - 2)))));
-        }, 3000);
-        return () => clearInterval(iv);
-    }, []);
-
-    const runDiagnostic = useCallback(() => {
-        setDiagnosing(true);
-        setAiInsight(null);
-        setTimeout(() => {
-            setAiInsight(vehicle.prediction || 'Todos los sistemas operan dentro de parámetros normales. Próximo servicio programado correctamente.');
-            setDiagnosing(false);
-        }, 2200);
-    }, [vehicle]);
-
-    /* Stats */
-    const fleetOk = fleet.filter(v => v.status === 'ok').length;
-    const fleetWarn = fleet.filter(v => v.status === 'warning').length;
-    const fleetCrit = fleet.filter(v => v.status === 'critical').length;
-
-    const statusConfig = {
-        ok: { color: '#22c55e', bg: '#22c55e22', label: 'Normal', icon: CheckCircle2 },
-        warning: { color: '#f59e0b', bg: '#f59e0b22', label: 'Atención', icon: AlertTriangle },
-        critical: { color: '#ef4444', bg: '#ef444422', label: 'Crítico', icon: Zap },
-    };
-
-    const cfg = statusConfig[vehicle.status];
-
-    return (
-        <BaseNode {...props} title="Kia Fleet Diagnostics" width={560} height={680}>
-            <div className="flex flex-col h-full bg-slate-950 text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-slate-900 border-b border-slate-800">
-                    <div className="w-10 h-10 rounded-full bg-red-600/20 flex items-center justify-center border border-red-500/30">
-                        <span className="text-red-500 font-bold text-[8px] tracking-widest">KIA</span>
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-sm font-bold tracking-wide">Fleet Health Monitor</div>
-                        <div className="text-[10px] text-slate-400">IoT Telematics · {fleet.length} conectados · Grecco Motors</div>
-                    </div>
-                    <div className="flex gap-2">
-                        <div className="bg-green-500/10 px-2 py-0.5 rounded text-[10px] text-green-400 font-bold">{fleetOk} OK</div>
-                        <div className="bg-yellow-500/10 px-2 py-0.5 rounded text-[10px] text-yellow-400 font-bold">{fleetWarn} ⚠️</div>
-                        <div className="bg-red-500/10 px-2 py-0.5 rounded text-[10px] text-red-400 font-bold">{fleetCrit} 🔴</div>
-                    </div>
-                    <div className="flex items-center gap-1 text-[9px] text-green-400">
-                        <Wifi size={10} className="animate-pulse" /> LIVE
-                    </div>
-                </div>
-
-                <div className="flex flex-1 overflow-hidden">
-                    {/* Vehicle List */}
-                    <div className="w-[38%] border-r border-slate-800 overflow-y-auto">
-                        {fleet.map((v, i) => {
-                            const sc = statusConfig[v.status];
-                            return (
-                                <div
-                                    key={v.id}
-                                    onClick={() => { setSelected(v.id); setAiInsight(null); }}
-                                    className={`p-2.5 border-b border-slate-800/50 cursor-pointer transition-all ${selected === v.id ? 'bg-slate-800 border-l-2' : 'hover:bg-slate-900/80 border-l-2 border-l-transparent'}`}
-                                    style={selected === v.id ? { borderLeftColor: sc.color } : {}}
-                                >
-                                    <div className="flex items-center gap-2">
-                                        <Car size={14} className="text-slate-400 shrink-0" />
-                                        <div className="flex-1 min-w-0">
-                                            <div className="text-[11px] font-semibold truncate">{v.model} <span className="text-slate-500 font-normal">{v.year}</span></div>
-                                            <div className="text-[9px] text-slate-500">{v.id} · {v.km.toLocaleString()} km</div>
-                                        </div>
-                                        <span className="text-[8px] px-1.5 py-0.5 rounded-full font-bold shrink-0" style={{ color: sc.color, background: sc.bg }}>
-                                            {sc.label}
-                                        </span>
-                                    </div>
-                                    {/* Temp mini */}
-                                    <div className="mt-1.5 flex items-center gap-1">
-                                        <Thermometer size={8} className="text-slate-600" />
-                                        <div className="flex-1 h-1 bg-slate-800 rounded-full overflow-hidden">
-                                            <div className={`h-full rounded-full transition-all ${liveTemp[i] < 100 ? 'bg-blue-500' : 'bg-red-500'}`} style={{ width: `${Math.min(liveTemp[i], 120) / 1.2}%` }} />
-                                        </div>
-                                        <span className="text-[8px] text-slate-500 font-mono w-6 text-right">{liveTemp[i]}°</span>
-                                    </div>
-                                </div>
-                            );
-                        })}
-                    </div>
-
-                    {/* Vehicle Detail */}
-                    <div className="flex-1 flex flex-col overflow-y-auto p-3 gap-2.5">
-                        {/* Vehicle Header */}
-                        <div className="flex items-center justify-between">
-                            <div>
-                                <div className="text-sm font-bold">{vehicle.model} {vehicle.year}</div>
-                                <div className="text-[10px] text-slate-500">{vehicle.id} · {vehicle.owner} · {vehicle.km.toLocaleString()} km</div>
-                            </div>
-                            <span className="text-[10px] px-2 py-1 rounded-full font-bold flex items-center gap-1" style={{ color: cfg.color, background: cfg.bg }}>
-                                <cfg.icon size={10} /> {cfg.label}
-                            </span>
-                        </div>
-
-                        {/* Vitals Grid */}
-                        <div className="grid grid-cols-2 gap-1.5">
-                            <VitalCard icon={Battery} label="Batería" value={`${vehicle.battery}%`} pct={vehicle.battery} good={vehicle.battery > 70} />
-                            <VitalCard icon={Thermometer} label="Motor Temp" value={`${liveTemp[vehicleIdx]}°C`} pct={liveTemp[vehicleIdx] / 1.2} good={liveTemp[vehicleIdx] < 100} />
-                            <VitalCard icon={Gauge} label="Aceite" value={vehicle.oil < 0 ? 'N/A (EV)' : `${vehicle.oil}%`} pct={vehicle.oil < 0 ? 100 : vehicle.oil} good={vehicle.oil < 0 || vehicle.oil > 50} />
-                            <VitalCard icon={Activity} label="Motor" value={vehicle.engine} pct={vehicle.engine === 'OK' || vehicle.engine === 'EV' ? 100 : vehicle.engine === 'CHECK' ? 50 : 15} good={vehicle.engine === 'OK' || vehicle.engine === 'EV'} />
-                        </div>
-
-                        {/* Tire Pressure */}
-                        <div className="bg-slate-900 border border-slate-800 rounded-lg p-2">
-                            <div className="text-[9px] text-slate-500 font-bold uppercase mb-1.5">Presión Llantas (PSI)</div>
-                            <div className="flex justify-around text-center">
-                                {['FI', 'FD', 'TI', 'TD'].map((label, i) => (
-                                    <div key={label}>
-                                        <div className={`text-sm font-bold ${vehicle.tires[i] < 28 ? 'text-red-400' : 'text-green-400'}`}>{vehicle.tires[i]}</div>
-                                        <div className="text-[8px] text-slate-500">{label}</div>
-                                    </div>
-                                ))}
-                            </div>
-                        </div>
-
-                        {/* Next Service */}
-                        <div className="flex items-center justify-between bg-slate-900 border border-slate-800 rounded-lg p-2">
-                            <div className="flex items-center gap-1.5 text-[10px] text-slate-400">
-                                <Wrench size={10} /> Próximo Servicio
-                            </div>
-                            <span className={`text-xs font-bold ${vehicle.nextService === 'URGENTE' ? 'text-red-400' : 'text-blue-400'}`}>
-                                {vehicle.nextService}
-                            </span>
-                        </div>
-
-                        {/* DTC Codes */}
-                        {vehicle.dtcCodes.length > 0 && (
-                            <div className="bg-red-500/5 border border-red-500/20 rounded-lg p-2">
-                                <div className="text-[9px] text-red-400 font-bold uppercase mb-1 flex items-center gap-1"><AlertTriangle size={10} /> Códigos DTC</div>
-                                <div className="flex gap-1">
-                                    {vehicle.dtcCodes.map(code => (
-                                        <span key={code} className="bg-red-500/20 text-red-300 text-[10px] px-2 py-0.5 rounded font-mono">{code}</span>
-                                    ))}
-                                </div>
-                            </div>
-                        )}
-
-                        {/* AI Diagnostic */}
-                        <button
-                            onClick={runDiagnostic}
-                            disabled={diagnosing}
-                            className="w-full flex items-center justify-center gap-2 bg-violet-600 hover:bg-violet-500 disabled:opacity-50 text-white text-xs font-bold py-2 rounded-lg transition-all"
-                        >
-                            <Brain size={14} className={diagnosing ? 'animate-spin' : ''} />
-                            {diagnosing ? 'Analizando telemetría...' : '🧠 Diagnóstico Predictivo IA'}
-                        </button>
-                        {aiInsight && (
-                            <div className="bg-violet-500/10 border border-violet-500/20 rounded-lg p-2.5 text-[11px] text-violet-200 leading-relaxed">
-                                <div className="flex items-center gap-1 text-[9px] text-violet-400 font-bold mb-1"><Brain size={10} /> Predicción IA</div>
-                                {aiInsight}
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-        </BaseNode>
-    );
-};
-
-/* ─── Sub-components ───────────────────────────────────────── */
-const VitalCard = ({ icon: Icon, label, value, pct, good }: any) => (
-    <div className="bg-slate-900 border border-slate-800 rounded-lg p-2">
-        <div className="flex items-center gap-1 text-[9px] text-slate-500 mb-1"><Icon size={10} /> {label}</div>
-        <div className={`text-base font-bold ${good ? 'text-green-400' : 'text-red-400'}`}>{value}</div>
-        <div className="w-full bg-slate-800 rounded-full h-1 mt-1">
-            <div className={`h-full rounded-full transition-all ${good ? 'bg-green-500' : 'bg-red-500'}`} style={{ width: `${Math.min(pct, 100)}%` }} />
-        </div>
-    </div>
-);

package/src/components/playground/demos/FinanceAINode.tsx

@@ -1,226 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { BaseNode } from '@decido/macia-core';
-import {
-    DollarSign, Calculator, TrendingUp, CreditCard, Car,
-    CheckCircle2, ArrowRight, Percent, Calendar, Shield,
-    Users, BarChart3, Wallet, FileText, Brain, Zap
-} from 'lucide-react';
-
-/* ═══════════════════════════════════════════════════════════════
-   KIA FINANCE NODE — Financial Services · Grecco Motors
-   Cotizador + Pre-aprobación IA + Insurance + Portafolio analytics
-   ═══════════════════════════════════════════════════════════════ */
-
-const VEHICLES_CATALOG = [
-    { model: 'Picanto', price: 58990000, image: '🚗', insurance: 2400000 },
-    { model: 'K3 Cross', price: 82990000, image: '🚙', insurance: 3100000 },
-    { model: 'Stonic', price: 95990000, image: '🚙', insurance: 3500000 },
-    { model: 'Seltos', price: 109990000, image: '🏎️', insurance: 4200000 },
-    { model: 'Sportage', price: 139990000, image: '🏎️', insurance: 5300000 },
-    { model: 'EV6', price: 249990000, image: '⚡', insurance: 8100000 },
-    { model: 'EV9', price: 349990000, image: '⚡', insurance: 11200000 },
-    { model: 'Sorento', price: 189990000, image: '🛻', insurance: 6800000 },
-];
-
-const PLANS = [
-    { id: 'leasing', label: 'Leasing', months: 60, rate: 1.18, downPct: 20, icon: '📋' },
-    { id: 'credito', label: 'Crédito', months: 72, rate: 1.45, downPct: 30, icon: '💳' },
-    { id: 'renting', label: 'Renting', months: 36, rate: 0, downPct: 0, icon: '🔄' },
-];
-
-const BANKS = [
-    { name: 'Bancolombia', rate: 1.18, logo: '🏦' },
-    { name: 'Davivienda', rate: 1.25, logo: '🏛️' },
-    { name: 'BBVA', rate: 1.32, logo: '🏦' },
-    { name: 'Finandina', rate: 1.45, logo: '🏛️' },
-];
-
-export const KiaFinanceNode = (props: any) => {
-    const [selectedVehicle, setSelectedVehicle] = useState(4); // Sportage
-    const [selectedPlan, setSelectedPlan] = useState('leasing');
-    const [downPayment, setDownPayment] = useState(30);
-    const [months, setMonths] = useState(48);
-    const [showResult, setShowResult] = useState(false);
-    const [approved, setApproved] = useState(false);
-    const [analyzing, setAnalyzing] = useState(false);
-    const [includeInsurance, setIncludeInsurance] = useState(true);
-    const [approvalDetails, setApprovalDetails] = useState<any>(null);
-
-    const vehicle = VEHICLES_CATALOG[selectedVehicle];
-    const plan = PLANS.find(p => p.id === selectedPlan)!;
-
-    const downAmount = vehicle.price * (downPayment / 100);
-    const financed = vehicle.price - downAmount;
-    const monthlyRate = plan.rate / 100;
-    const monthly = plan.id === 'renting'
-        ? Math.round(vehicle.price * 0.022)
-        : Math.round((financed * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -months)));
-    const monthlyInsurance = includeInsurance ? Math.round(vehicle.insurance / 12) : 0;
-    const totalMonthly = monthly + monthlyInsurance;
-
-    const formatCOP = (n: number) => `$${n.toLocaleString('es-CO')}`;
-
-    const runApproval = () => {
-        setAnalyzing(true);
-        setApproved(false);
-        setShowResult(false);
-        setTimeout(() => {
-            const score = 720 + Math.floor(Math.random() * 120);
-            const bestBank = BANKS[Math.floor(Math.random() * BANKS.length)];
-            setApprovalDetails({ score, bank: bestBank, cupo: Math.round(vehicle.price * (0.7 + Math.random() * 0.15)) });
-            setApproved(true);
-            setShowResult(true);
-            setAnalyzing(false);
-        }, 2200);
-    };
-
-    return (
-        <BaseNode {...props} title="Kia Financial Services" width={500} height={660}>
-            <div className="flex flex-col h-full bg-slate-950 text-white overflow-hidden">
-
-                {/* Header */}
-                <div className="flex items-center gap-3 p-3 bg-slate-900 border-b border-slate-800">
-                    <div className="w-9 h-9 rounded-full bg-red-600/20 flex items-center justify-center border border-red-500/30">
-                        <span className="text-red-500 font-bold text-[7px] tracking-widest">KIA</span>
-                    </div>
-                    <div className="flex-1">
-                        <div className="text-xs font-bold tracking-wide">FINANCIAL SERVICES</div>
-                        <div className="text-[10px] text-slate-400">Grecco Motors · Cotizador + Pre-aprobación IA</div>
-                    </div>
-                    <div className="flex gap-2">
-                        <div className="bg-green-500/10 px-2 py-1 rounded text-center border border-green-500/20">
-                            <div className="text-[10px] font-bold text-green-400">87%</div>
-                            <div className="text-[7px] text-slate-500">Aprobación</div>
-                        </div>
-                        <div className="bg-blue-500/10 px-2 py-1 rounded text-center border border-blue-500/20">
-                            <div className="text-[10px] font-bold text-blue-400">$71.2M</div>
-                            <div className="text-[7px] text-slate-500">Ticket Prom</div>
-                        </div>
-                    </div>
-                </div>
-
-                <div className="flex-1 overflow-y-auto p-3 space-y-2.5">
-
-                    {/* Vehicle Selector */}
-                    <div>
-                        <div className="text-[9px] text-slate-500 font-bold uppercase mb-1.5 flex items-center gap-1"><Car size={10} /> Tu Kia</div>
-                        <div className="grid grid-cols-4 gap-1">
-                            {VEHICLES_CATALOG.map((v, i) => (
-                                <button key={v.model} onClick={() => setSelectedVehicle(i)}
-                                    className={`p-1.5 rounded-lg border text-center transition-all ${selectedVehicle === i
-                                        ? 'bg-red-500/10 border-red-500/40 shadow-[0_0_10px_rgba(239,68,68,0.1)]'
-                                        : 'bg-slate-900 border-slate-800 hover:border-slate-700'}`}>
-                                    <div className="text-sm">{v.image}</div>
-                                    <div className="text-[9px] font-semibold">{v.model}</div>
-                                    <div className="text-[8px] text-slate-500">{formatCOP(v.price)}</div>
-                                </button>
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Plan Selector */}
-                    <div>
-                        <div className="text-[9px] text-slate-500 font-bold uppercase mb-1.5 flex items-center gap-1"><CreditCard size={10} /> Tipo de Plan</div>
-                        <div className="flex gap-1.5">
-                            {PLANS.map(p => (
-                                <button key={p.id} onClick={() => setSelectedPlan(p.id)}
-                                    className={`flex-1 py-2 rounded-lg text-xs font-semibold border transition-all ${selectedPlan === p.id
-                                        ? 'bg-white text-black border-white' : 'bg-slate-900 text-slate-300 border-slate-700 hover:border-slate-600'}`}>
-                                    {p.icon} {p.label}
-                                </button>
-                            ))}
-                        </div>
-                    </div>
-
-                    {/* Sliders */}
-                    {plan.id !== 'renting' && (
-                        <>
-                            <div>
-                                <div className="flex justify-between text-[10px] mb-1">
-                                    <span className="text-slate-400 flex items-center gap-1"><Percent size={10} /> Cuota Inicial</span>
-                                    <span className="font-bold text-white">{downPayment}% ({formatCOP(downAmount)})</span>
-                                </div>
-                                <input type="range" min={10} max={70} value={downPayment}
-                                    onChange={e => setDownPayment(Number(e.target.value))}
-                                    className="w-full h-1 bg-slate-700 rounded-full appearance-none cursor-pointer accent-red-500" />
-                            </div>
-                            <div>
-                                <div className="flex justify-between text-[10px] mb-1">
-                                    <span className="text-slate-400 flex items-center gap-1"><Calendar size={10} /> Plazo</span>
-                                    <span className="font-bold text-white">{months} meses</span>
-                                </div>
-                                <input type="range" min={12} max={84} step={12} value={months}
-                                    onChange={e => setMonths(Number(e.target.value))}
-                                    className="w-full h-1 bg-slate-700 rounded-full appearance-none cursor-pointer accent-red-500" />
-                            </div>
-                        </>
-                    )}
-
-                    {/* Insurance Toggle */}
-                    <div className="flex items-center justify-between bg-slate-900 border border-slate-800 rounded-lg p-2">
-                        <div className="flex items-center gap-2 text-[10px]">
-                            <Shield size={12} className="text-blue-400" />
-                            <span>Seguro Todo-Riesgo</span>
-                            <span className="text-slate-500">{formatCOP(vehicle.insurance)}/año</span>
-                        </div>
-                        <button onClick={() => setIncludeInsurance(!includeInsurance)}
-                            className={`w-8 h-4 rounded-full transition-all ${includeInsurance ? 'bg-green-500' : 'bg-slate-700'}`}>
-                            <div className={`w-3.5 h-3.5 rounded-full bg-white transition-all ${includeInsurance ? 'ml-4' : 'ml-0.5'}`} />
-                        </button>
-                    </div>
-
-                    {/* Result Preview */}
-                    <div className="bg-slate-900 border border-slate-800 rounded-xl p-3">
-                        <div className="text-[9px] text-slate-500 uppercase font-bold mb-1">Cuota Mensual Estimada</div>
-                        <div className="text-2xl font-bold text-white">
-                            {formatCOP(totalMonthly)}<span className="text-sm text-slate-500 font-normal">/mes</span>
-                        </div>
-                        <div className="flex gap-3 mt-1.5 text-[10px] text-slate-400">
-                            {plan.id !== 'renting' && <span>Financiado: {formatCOP(financed)}</span>}
-                            {plan.id !== 'renting' && <span>Tasa: {plan.rate}% NMV</span>}
-                            {includeInsurance && <span className="text-blue-400">+Seguro: {formatCOP(monthlyInsurance)}/mes</span>}
-                        </div>
-                        {plan.id === 'renting' && (
-                            <div className="text-[10px] text-slate-400 mt-1 flex items-center gap-1">
-                                <Shield size={10} /> Incluye seguro, mantenimiento, impuestos y asistencia
-                            </div>
-                        )}
-                    </div>
-
-                    {/* AI Pre-Approval */}
-                    <button onClick={runApproval} disabled={analyzing}
-                        className="w-full bg-red-600 hover:bg-red-500 disabled:opacity-50 text-white text-xs font-bold py-2.5 rounded-lg flex items-center justify-center gap-2 transition-all">
-                        <Brain size={14} className={analyzing ? 'animate-spin' : ''} />
-                        {analyzing ? 'Evaluando perfil crediticio...' : '🧠 Pre-aprobación IA'}
-                    </button>
-
-                    {showResult && approvalDetails && (
-                        <div className="bg-green-500/10 border border-green-500/30 rounded-xl p-3">
-                            <div className="flex items-center gap-2 mb-2">
-                                <CheckCircle2 className="text-green-400" size={16} />
-                                <span className="text-sm font-bold text-green-400">¡Pre-aprobado!</span>
-                            </div>
-                            <div className="grid grid-cols-3 gap-2 mb-2">
-                                <div className="bg-slate-900/50 rounded-lg p-1.5 text-center">
-                                    <div className="text-xs font-bold text-green-400">{approvalDetails.score}</div>
-                                    <div className="text-[8px] text-slate-500">Score</div>
-                                </div>
-                                <div className="bg-slate-900/50 rounded-lg p-1.5 text-center">
-                                    <div className="text-[10px] font-bold text-blue-400">{approvalDetails.bank.name}</div>
-                                    <div className="text-[8px] text-slate-500">Mejor Tasa</div>
-                                </div>
-                                <div className="bg-slate-900/50 rounded-lg p-1.5 text-center">
-                                    <div className="text-[10px] font-bold text-white">{formatCOP(approvalDetails.cupo)}</div>
-                                    <div className="text-[8px] text-slate-500">Cupo</div>
-                                </div>
-                            </div>
-                            <div className="text-[10px] text-slate-300 leading-relaxed">
-                                Asesor financiero notificado. Documentación requerida: cédula, extractos 3 meses, certificado laboral.
-                            </div>
-                        </div>
-                    )}
-                </div>
-            </div>
-        </BaseNode>
-    );
-};