/* global React, Icon, Card, Badge, Button, PageHeader, ProgressBar, Modal, Field, Input, Select, Textarea */ const { useState: _useStateC } = React; // ============================================================================ // 11 · CONTROL DE COSTOS // ============================================================================ const COSTOS_PERIODO = { hoy: { kpis: {total:'$95 USD', deltaTot:'−4% vs ayer', inv:'4.821', deltaInv:'↑12% vs ayer', fallback:'0', alert:'1'}, rows: [ {wf:'WF-ADH', tipo:'NLU + Agente WA', inv:'1.608', cost:'$42', pct:44.2, delta:'+11%', techo:'$50/día', estado:'atencion'}, {wf:'WF-VVOZ', tipo:'Agente de voz', inv:'126', cost:'$21', pct:22.1, delta:'+33%', techo:'$27/día', estado:'creciendo'}, {wf:'WF-DOC', tipo:'Lector docs IA', inv:'402', cost:'$16', pct:16.8, delta:'−3%', techo:'$20/día', estado:'normal'}, {wf:'WF-REC', tipo:'Validación receta', inv:'280', cost:'$9', pct:9.5, delta:'−6%', techo:'$14/día', estado:'normal'}, {wf:'WF-FIN', tipo:'Clasificador econ.', inv:'205', cost:'$5', pct:5.3, delta:'+0%', techo:'$8/día', estado:'normal'}, {wf:'WF-ALT', tipo:'Enriquecimiento', inv:'82', cost:'$2', pct:2.1, delta:'−9%', techo:'$5/día', estado:'normal'}, ], }, semana: { kpis: {total:'$654 USD', deltaTot:'−3% vs semana anterior', inv:'33.720', deltaInv:'↑9% vs sem.', fallback:'0', alert:'1'}, rows: [ {wf:'WF-ADH', tipo:'NLU + Agente WA', inv:'11.240', cost:'$288', pct:44.0, delta:'+9%', techo:'$350/sem', estado:'atencion'}, {wf:'WF-VVOZ', tipo:'Agente de voz', inv:'880', cost:'$144', pct:22.0, delta:'+30%', techo:'$186/sem', estado:'creciendo'}, {wf:'WF-DOC', tipo:'Lector docs IA', inv:'2.820', cost:'$112', pct:17.1, delta:'−2%', techo:'$140/sem', estado:'normal'}, {wf:'WF-REC', tipo:'Validación receta', inv:'1.960', cost:'$65', pct:9.9, delta:'−5%', techo:'$93/sem', estado:'normal'}, {wf:'WF-FIN', tipo:'Clasificador econ.', inv:'1.440', cost:'$33', pct:5.0, delta:'+1%', techo:'$58/sem', estado:'normal'}, {wf:'WF-ALT', tipo:'Enriquecimiento', inv:'580', cost:'$18', pct:2.8, delta:'−8%', techo:'$35/sem', estado:'normal'}, ], }, mes: { kpis: {total:'$2.840 USD', deltaTot:'−4% vs mes anterior', inv:'4.821', deltaInv:'↑12% vs ayer', fallback:'0', alert:'1'}, rows: [ {wf:'WF-ADH', tipo:'NLU + Agente WA', inv:'48.240', cost:'$1.240', pct:43.7, delta:'+8%', techo:'$1.500', estado:'atencion'}, {wf:'WF-VVOZ', tipo:'Agente de voz', inv:'3.800', cost:'$620', pct:21.8, delta:'+31%', techo:'$800', estado:'creciendo'}, {wf:'WF-DOC', tipo:'Lector docs IA', inv:'12.100', cost:'$480', pct:16.9, delta:'−2%', techo:'$600', estado:'normal'}, {wf:'WF-REC', tipo:'Validación receta', inv:'8.400', cost:'$280', pct:9.9, delta:'−5%', techo:'$400', estado:'normal'}, {wf:'WF-FIN', tipo:'Clasificador econ.', inv:'6.200', cost:'$140', pct:4.9, delta:'+1%', techo:'$250', estado:'normal'}, {wf:'WF-ALT', tipo:'Enriquecimiento', inv:'2.480', cost:'$80', pct:2.8, delta:'−8%', techo:'$150', estado:'normal'}, ], }, }; const INVOCACIONES = [ {t:'hoy 11:42', tipo:'NLU', caso:'P-0428', tok:'1.240 tok', cost:'$0.002', res:'efecto_adverso 92%', mod:'claude-haiku', tone:'ok'}, {t:'hoy 11:30', tipo:'Voz', caso:'P-0221', tok:'2:14 min', cost:'$0.089', res:'Derivado clínica', mod:'Voz v2', tone:'sun'}, {t:'hoy 10:15', tipo:'Voz', caso:'P-0428', tok:'0:00 min', cost:'$0.008', res:'No atendió', mod:'Voz v2', tone:'slate'}, {t:'hoy 09:45', tipo:'Voz', caso:'P-0811', tok:'3:02 min', cost:'$0.121', res:'Retiro confirmado', mod:'Voz v2', tone:'ok'}, {t:'hoy 09:20', tipo:'NLU', caso:'P-0703', tok:'890 tok', cost:'$0.001', res:'barrera_logistica 88%',mod:'claude-haiku', tone:'ok'}, {t:'hoy 08:55', tipo:'NLU', caso:'P-0517', tok:'1.100 tok', cost:'$0.002', res:'olvido 74%', mod:'claude-haiku', tone:'ok'}, {t:'hoy 08:30', tipo:'Voz', caso:'P-0634', tok:'1:48 min', cost:'$0.072', res:'Reagendó retiro', mod:'Voz v2', tone:'ok'}, {t:'hoy 08:10', tipo:'NLU', caso:'P-0920', tok:'760 tok', cost:'$0.001', res:'costo_cobertura 81%', mod:'claude-haiku', tone:'ok'}, ]; function ControlCostosPage() { const [periodo, setPeriodo] = _useStateC('mes'); const [techosOpen, setTechosOpen] = _useStateC(false); const [techosFocus, setTechosFocus] = _useStateC(null); const [detalleWf, setDetalleWf] = _useStateC(null); const [desestimar, setDesestimar] = _useStateC(false); const [toast, setToast] = _useStateC(null); const showToast = (msg) => { setToast(msg); setTimeout(()=>setToast(null), 2400); }; const D = COSTOS_PERIODO[periodo]; return
Monitoreo activo
}/> {/* KPI STRIP */}
{/* ALERTA ACTIVA */}
Alerta de desvío hace 18 min · auto-generado
WF-ADH consumió $1.240 vs patrón esperado $1.050 (+18,1%)
Causa: +31% en derivaciones al agente de voz este mes.
{/* mini bars */}
{/* SECCIÓN 1 — Tabla consumo por flujo */}
Workflow Tipo agente Invocaciones Costo USD % total vs prev. Techo Estado
{D.rows.map(r => )} {/* SECCIÓN 2 — Evolución + donut */}
{/* Panel techos */} {techosOpen && setTechosOpen(false)} focus={techosFocus} onSave={()=>{setTechosOpen(false); showToast('Techo actualizado. Aplica desde la próxima invocación.');}}/>} {/* Drawer invocaciones */} {detalleWf && setDetalleWf(null)}/>} {/* Modal desestimar */} setDesestimar(false)} title="¿Desestimar alerta?" subtitle="El sistema seguirá monitoreando el consumo de WF-ADH, pero la alerta actual se marcará como revisada." footer={<> }>
La alerta quedará registrada en Trazabilidad como revisada por tu usuario. Si el desvío persiste la próxima semana, el sistema volverá a alertar.
{/* Toast */} {toast &&
{toast}
} ; } // ---- Mini bars · alerta WF-ADH function AlertaMiniBars() { const bars = [{s:'S1',r:280,e:262},{s:'S2',r:330,e:262},{s:'S3',r:380,e:262},{s:'S4',r:250,e:262}]; const [progress, setProgress] = _useStateC(0); const [hover, setHover] = _useStateC(null); React.useEffect(() => { let raf; const t0 = performance.now(); const dur = 800; const tick = () => { const e = Math.min(1, (performance.now()-t0)/dur); const eased = 1 - Math.pow(1-e, 3); setProgress(eased); if (e<1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); return <>
{bars.map((w, i) => { const over = w.r > w.e; const diff = w.r - w.e; const isHover = hover===i; return
setHover(i)} onMouseLeave={()=>setHover(null)}> {isHover &&
{w.s}
Real ${w.r} · Esp. ${w.e}
{over?'+':''}{diff>0?'+':''}${Math.abs(diff)} {over?'sobre':'bajo'} patrón
}
{w.s}
${w.r} / ${w.e}
; })}
Real Esperado
; } // ---- Periodo picker function PeriodoPicker({value, onChange}) { const opts = [{k:'hoy',l:'Hoy'},{k:'semana',l:'Semana'},{k:'mes',l:'Este mes'}]; return
{opts.map(o => )}
; } function CostKpi({l, subLabel, v, sub, tone}) { const fg = tone==='ok'?'text-[#1E8057]':tone==='warn'?'text-[#D28513]':'text-ink-800'; const subFg = tone==='ok'?'text-[#1E8057]':tone==='warn'?'text-[#D28513]':'text-ink-500'; return
{l}
{subLabel}
{v}
{sub &&
{sub}
}
; } // ---- Stacked area chart · 6 meses function StackedAreaCost() { const meses = ['oct/25','nov/25','dic/25','ene/26','feb/26','mar/26']; const total = [1840, 2100, 2280, 2560, 2710, 2960]; const layers = [ {name:'WF-ADH', color:'#268AA6', pcts:[0.48,0.47,0.46,0.45,0.44,0.44]}, {name:'WF-VVOZ', color:'#F0A858', pcts:[0.08,0.09,0.11,0.16,0.20,0.22]}, {name:'WF-DOC', color:'#0B4A5F', pcts:[0.20,0.19,0.18,0.17,0.17,0.17]}, {name:'WF-REC', color:'#7FB4C4', pcts:[0.12,0.12,0.11,0.10,0.10,0.10]}, {name:'WF-FIN', color:'#B7D4DD', pcts:[0.07,0.07,0.07,0.06,0.05,0.05]}, {name:'WF-ALT', color:'#E2EBEF', pcts:[0.05,0.06,0.07,0.06,0.04,0.02]}, ]; const h = 200, w = 600; const max = 3200, min = 0; const y = v => h - ((v-min)/(max-min))*h; const step = w/(total.length-1); // entry animation const [progress, setProgress] = _useStateC(0); React.useEffect(() => { let raf; const t0 = performance.now(); const dur = 900; const tick = () => { const e = Math.min(1, (performance.now()-t0)/dur); const eased = 1 - Math.pow(1-e, 3); setProgress(eased); if (e<1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const [hoverIdx, setHoverIdx] = _useStateC(null); const svgRef = React.useRef(null); const wrapRef = React.useRef(null); const [tipPos, setTipPos] = _useStateC({x:0,y:0}); const stacked = total.map((t,i) => { const vals = layers.map(L => t*L.pcts[i]); const cum = []; let acc = 0; for (let k=0;k { const rect = svgRef.current.getBoundingClientRect(); const wrap = wrapRef.current.getBoundingClientRect(); const scaleX = rect.width / (w+96); const svgX = (e.clientX - rect.left) / scaleX - 44; let best = 0, bestD = Infinity; for (let i=0;isetHoverIdx(null)}> {/* grid */} {[1000,2000,3000].map(g => ${(g/1000).toFixed(1)}k )} {/* clip for entry animation (wipe left→right) */} {layers.map((L, li) => { const prevCum = stacked.map(s => li===0 ? 0 : s.cum[li-1]); const thisCum = stacked.map(s => s.cum[li]); let d = ''; thisCum.forEach((v,i) => { d += (i===0?'M':'L')+(i*step)+','+y(v); }); for (let i=prevCum.length-1;i>=0;i--) d += 'L'+(i*step)+','+y(prevCum[i]); d += 'Z'; return ; })} {/* marcador feb/26 */} ACTIVACIÓN agente voz {/* totales + puntos hover */} {total.map((v,i) => { const active = hoverIdx===i; return ${v.toLocaleString()} {meses[i]} {active && <> } ; })} {hoverIdx!==null && progress>0.5 &&
{meses[hoverIdx]}
${total[hoverIdx]}
{layers.map((L, li) =>
{L.name} ${Math.round(stacked[hoverIdx].vals[li])}
)}
}
{layers.map(L => {L.name} )}
; } // ---- Donut · distribución por tipo de agente function CostDonut() { const segs = [ {l:'Agentes WA', v:43.7, color:'#268AA6', cost:'$1.240'}, {l:'Agentes de voz',v:21.8, color:'#F0A858', cost:'$620'}, {l:'Lectura docs', v:16.9, color:'#0B4A5F', cost:'$480'}, {l:'Clasificadores',v:17.6,color:'#7FB4C4', cost:'$500'}, ]; const R = 62, r = 38, cx = 80, cy = 80; const [progress, setProgress] = _useStateC(0); const [hoverIdx, setHoverIdx] = _useStateC(null); React.useEffect(() => { let raf; const t0 = performance.now(); const dur = 900; const tick = () => { const e = Math.min(1, (performance.now()-t0)/dur); const eased = 1 - Math.pow(1-e, 3); setProgress(eased); if (e<1) raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const buildArc = (a0, a1, R, r) => { const large = (a1-a0) > Math.PI ? 1 : 0; const x0 = cx + R*Math.cos(a0), y0 = cy + R*Math.sin(a0); const x1 = cx + R*Math.cos(a1), y1 = cy + R*Math.sin(a1); const ix0 = cx + r*Math.cos(a0), iy0 = cy + r*Math.sin(a0); const ix1 = cx + r*Math.cos(a1), iy1 = cy + r*Math.sin(a1); return `M ${x0} ${y0} A ${R} ${R} 0 ${large} 1 ${x1} ${y1} L ${ix1} ${iy1} A ${r} ${r} 0 ${large} 0 ${ix0} ${iy0} Z`; }; let acc = 0; const arcs = segs.map((s, i) => { const a0 = (acc/100) * Math.PI*2 * progress - Math.PI/2; acc += s.v; const a1 = (acc/100) * Math.PI*2 * progress - Math.PI/2; return {d: buildArc(a0, a1, hoverIdx===i ? R+5 : R, r), color:s.color, idx:i}; }); return
setHoverIdx(null)}> {arcs.map((a,i) => setHoverIdx(i)}/>)} {hoverIdx===null ? 'TOTAL' : segs[hoverIdx].l.toUpperCase()} {hoverIdx===null ? '$2.840' : segs[hoverIdx].cost} {hoverIdx!==null && {segs[hoverIdx].v}% }
{segs.map((s, i) =>
setHoverIdx(i)} onMouseLeave={()=>setHoverIdx(null)} style={{opacity:hoverIdx===null||hoverIdx===i?1:0.35, transition:'opacity 150ms'}}> {s.l} {s.v}%
)}
; } // ---- Panel Configurar techos function ConfigurarTechos({onClose, focus, onSave}) { const [rows, setRows] = _useStateC([ {wf:'WF-ADH', monto:1500, fb:'degradar', alerta:80}, {wf:'WF-VVOZ', monto:800, fb:'pausar', alerta:70}, {wf:'WF-DOC', monto:600, fb:'degradar', alerta:80}, {wf:'WF-REC', monto:400, fb:'alertar', alerta:80}, {wf:'WF-FIN', monto:250, fb:'alertar', alerta:80}, {wf:'WF-ALT', monto:150, fb:'alertar', alerta:90}, ]); const consumo = 2840; const techoGlobal = rows.reduce((a,r)=>a+r.monto,0); const upd = (i,patch) => setRows(rs => rs.map((r,k)=>k===i?{...r,...patch}:r)); return
e.stopPropagation()} className="relative w-[640px] h-full bg-white shadow-[0_0_40px_rgba(0,0,0,0.15)] flex flex-col">

Configurar techos

Límite de consumo y comportamiento de fallback por workflow.

{rows.map((r, i) => { const hi = focus===r.wf; return
{r.wf} {hi && Foco}
Techo
$ upd(i,{monto:parseInt(e.target.value||0)})} className="w-20 bg-transparent text-right pr-2 py-1 text-[12px] font-mono font-semibold tabular-nums text-ink-800 focus:outline-none"/> /mes
Fallback al superar techo
{[{k:'degradar',l:'Degradar a modelo más barato'},{k:'pausar',l:'Pausar y derivar a humano'},{k:'alertar',l:'Solo alertar'}].map(o => { const sel = r.fb===o.k; return ; })}
Alertar al {r.alerta}% del techo upd(i,{alerta:parseInt(e.target.value)})} className="w-36 accent-helios-600"/>
; })}
Techo global configurado ${techoGlobal.toLocaleString()}/mes
0.8?'warn':'ok'}/>
Consumo actual ${consumo.toLocaleString()} ({Math.round(consumo/techoGlobal*100)}%)
; } // ---- Drawer detalle invocaciones function DetalleInvocaciones({wf, onClose}) { return
e.stopPropagation()} className="relative w-[820px] h-full bg-white shadow-[0_0_40px_rgba(0,0,0,0.15)] flex flex-col">

Detalle invocaciones

{wf}

Últimas 8 invocaciones · filtradas por workflow

TimestampTipoCasoTokens/minCostoResultadoModelo
{INVOCACIONES.map((r, i) =>
{r.t} {r.tipo} {r.caso} {r.tok} {r.cost} {r.res} {r.mod}
)}
Cada invocación registrada también en Trazabilidad.
; } window.ControlCostosPage = ControlCostosPage;