// === 16:40 · Tus agentes (17s) — lista de agentes, entrenar chateando, MCP y gobierno === // Reinvención spec-flex-v4 §B. Ventana "Agentes": LISTA en el panel izquierdo // (4 agentes + «+ Nuevo agente») y chat oscuro a la derecha. María entrena // «Resumen del día» aplicando la REGLA GLOBAL de chats: el texto se teclea EN LA // CASILLA de entrada (caret), se envía (la casilla se vacía) y ENTONCES aparece // la burbuja. El agente memoriza (chip «Memorizado»), el badge MCP se ilumina // con tooltip, se selecciona «Cloudflare Gastos» (cursor orgánico) y se ve UNA // línea de su actividad. Beat final: banda de gobierno (permisos por persona). function SlideAgente({ t }){ const winShow = clamp((t-0.5)/0.6, 0, 1); // --- Timeline (cues slide_agente: 0.5-3.0 crea / 3.0-5.8 lista / 5.8-8.4 // entrenar / 8.4-11.2 MCP / 11.2-13.8 Cloudflare / 13.8-16.6 permisos) --- const AGENTS = [ { at:3.15, name:'Cloudflare Gastos', task:'Revisa gastos cada día', tile:'#F6821F', icon:'cloud', mcp:true }, { at:3.75, name:'Resumen del día', task:'Ventas y caja, cada tarde', tile:'#0085FF', icon:'doc' }, { at:4.35, name:'Cobros pendientes', task:'Reclama facturas vencidas', tile:'#10B981', icon:'coin' }, { at:4.95, name:'Bienvenida a clientes', task:'Escribe el primer email', tile:'#8B5CF6', icon:'mail' }, ]; const plusAt = 1.5; // «+ Nuevo agente» visible desde el beat 1 (crea TUS agentes) const click1At = 6.05; // click en «Resumen del día» const selResumenAt = 6.1; const historyAt = 6.3; // mensaje previo del agente (contexto del entrenamiento) const typeStart = 6.55; // se teclea EN LA CASILLA (regla global de chats) const typeCps = 32; const sendAt = 7.8; // se envía: la casilla se vacía const bubbleAt = 7.9; // ...y ENTONCES aparece la burbuja en el hilo const ackAt = 8.15; // el agente confirma y guarda en memoria const chipAt = 8.35; // chip «Memorizado» en la lista const mcpGlowAt = 8.6; // beat MCP: el badge se ilumina const tipInAt = 8.8; // tooltip «Se conecta a servicios externos» const tipOutAt = 10.9; const click2At = 11.45; // click en «Cloudflare Gastos» const selCloudAt = 11.5; const actAt = 12.15; // UNA línea de actividad (breve: es un ejemplo) const bandAt = 13.8; // banda de gobierno const trainMsg = 'A partir de ahora, redondea a euros'; const sel = t >= selCloudAt ? 'cloud' : (t >= selResumenAt ? 'resumen' : null); const nIn = AGENTS.filter(a => t >= a.at + 0.25).length; // Texto tecleado en la casilla (se vacía al enviar — nunca se teclea en burbuja) const typedN = Math.floor(Math.max(0, t - typeStart) * typeCps); const typedTxt = (t >= typeStart && t < sendAt) ? trainMsg.slice(0, typedN) : ''; const caretOn = t >= typeStart && t < sendAt; const sendPressed = t >= sendAt && t < sendAt + 0.25; // --- Geometría --- // Ventana: top 175 · left/right 280 → 1360 ancho, 850 alto. Chrome 76 + app // header 66 = 142 → top del grid = 317. Grid: 440px lista · 920px chat. // Lista: padding 16/20, cabecera 34 + 12 → filas desde y=379, cada una 64+10. // Centros de fila (abs): row0 (Cloudflare) y=411 · row1 (Resumen) y=485. x=500. const qbez = (a,c,b,p) => (1-p)*(1-p)*a + 2*(1-p)*p*c + p*p*b; const cursorAt = (tt) => { const P0 = {x:1150,y:945}, C1 = {x:895,y:610}, P1 = {x:498,y:483}, C2 = {x:566,y:446}, P2 = {x:498,y:409}; if (tt < 5.3) return null; if (tt < 5.9){ // vuelo 1: curva con control lateral + aterrizaje easeInOut const p = Easing.easeInOutCubic(clamp((tt-5.3)/0.6, 0, 1)); return { x:qbez(P0.x,C1.x,P1.x,p), y:qbez(P0.y,C1.y,P1.y,p), o:clamp((tt-5.3)/0.25,0,1) }; } if (tt < 10.8) return { x:P1.x, y:P1.y, o:1 }; // pausa pre-click + reposo mientras teclea if (tt < 11.3){ // vuelo 2: salto corto con curva lateral hasta Cloudflare const p = Easing.easeInOutCubic(clamp((tt-10.8)/0.5, 0, 1)); return { x:qbez(P1.x,C2.x,P2.x,p), y:qbez(P1.y,C2.y,P2.y,p), o:1 }; } return { x:P2.x, y:P2.y, o:1-clamp((tt-13.5)/0.5, 0, 1) }; }; const cur = cursorAt(t); const clicking = (t >= click1At && t < click1At + 0.6) || (t >= click2At && t < click2At + 0.6); // --- Iconos SVG (cero emojis en la UI de la demo) --- const agIcon = (kind, size) => { if (kind === 'cloud') return ; if (kind === 'doc') return ; if (kind === 'coin') return ; return ; }; const robotSvg = (size) => ( ); const sparkSvg = (size, color) => ; const checkSvg = (size, color) => ; const plugSvg = ( ); // Opacidades de vistas del panel derecho const emptyOp = clamp((t-1.4)/0.5, 0, 1) * clamp((selResumenAt-t)/0.25, 0, 1); const resumenOp = clamp((t-(selResumenAt+0.1))/0.35, 0, 1) * (1 - clamp((t-selCloudAt)/0.3, 0, 1)); const cloudOp = clamp((t-(selCloudAt+0.15))/0.35, 0, 1); const headerOp = clamp((t-(selResumenAt+0.1))/0.3, 0, 1); return ( Tus agentes. Tus tareas. Tus permisos.}/> {/* ===== Ventana Agentes ===== */}
{/* IZQUIERDA — lista de agentes */}
Agentes
{nIn} ACTIVOS
{AGENTS.map((a,i)=>{ const p = clamp((t-a.at)/0.45, 0, 1); const e = Easing.easeOutCubic(p); const selP = (i===1) ? clamp((t-selResumenAt)/0.3,0,1) * (1 - clamp((t-selCloudAt)/0.3,0,1)) : (i===0 ? clamp((t-selCloudAt)/0.3,0,1) : 0); const isSel = selP > 0.5; const mcpOn = a.mcp && t >= mcpGlowAt; const mcpPulse = a.mcp ? 1 + 0.14*Math.sin(clamp((t-mcpGlowAt)/0.5,0,1)*Math.PI) : 1; const chipP = (i===1) ? clamp((t-chipAt)/0.45, 0, 1) : 0; const chipE = Easing.easeOutBack(chipP); return (
{agIcon(a.icon, 20)}
{a.name} {a.mcp && ( MCP )}
{a.task}
{chipP > 0 && ( {sparkSvg(10, '#059669')} Memorizado )}
); })} {/* «+ Nuevo agente» — presente desde el beat 1: la lista se crea */} {(()=>{ const p = clamp((t-plusAt)/0.5, 0, 1); const e = Easing.easeOutCubic(p); const pulse = (t > 1.9 && t < 3.1) ? Math.abs(Math.sin((t-1.9)*Math.PI/0.6)) * clamp((3.1-t)/0.4,0,1) : 0; return (
Nuevo agente
); })()}
{/* DERECHA — chat con el agente seleccionado */}
{/* Cabecera del chat (cambia con la selección) */}
{/* Resumen del día */}
0 ? 1 : 0}}>
{agIcon('doc', 17)}
Resumen del día AGENTE
Activo · aprende de ti
{/* Cloudflare Gastos */}
{agIcon('cloud', 17)}
Cloudflare Gastos AGENTE · MCP
Activo · conectado por MCP
{/* Estado vacío — antes de elegir agente */} {emptyOp > 0.01 && (
{robotSvg(30)}
Elige un agente de la lista
o crea uno nuevo para tu tarea
)} {/* Vista Resumen del día — entrenamiento por chat */} {resumenOp > 0.01 && (
{/* Mensaje previo del agente (contexto) */} {t >= historyAt && (()=>{ const p = clamp((t-historyAt)/0.4, 0, 1); return (
Resumen del día · hoy 16:32
Ventas de hoy: 1.847,60 € · 96 tickets
); })()} {/* Burbuja de María — aparece SOLO tras enviar (regla global) */} {t >= bubbleAt && (()=>{ const p = clamp((t-bubbleAt)/0.4, 0, 1); return (
María · Contabilidad
M
{trainMsg}
); })()} {/* Confirmación del agente + memoria */} {t >= ackAt && (()=>{ const p = clamp((t-ackAt)/0.45, 0, 1); return (
Anotado. Desde ahora: 1.848 €.
{sparkSvg(11, '#34D399')} Guardado en memoria
); })()}
)} {/* Vista Cloudflare Gastos — UNA línea de actividad (es un ejemplo) */} {cloudOp > 0.01 && (
Actividad de hoy
{t >= actAt && (()=>{ const p = clamp((t-actAt)/0.45, 0, 1); return (
{checkSvg(14, '#10B981')}
12 cargos revisados · 1 gasto registrado
16:38
); })()}
)} {/* Casilla de entrada — aquí se teclea (regla global de chats) */}
{typedTxt !== '' || caretOn ? {typedTxt}{caretOn && } : Escribe al agente en tus palabras…} ↑
{/* Tooltip MCP — sobre el badge de Cloudflare Gastos (coords rel. ventana) */} {t >= tipInAt && t < tipOutAt + 0.3 && (()=>{ const inP = clamp((t-tipInAt)/0.35, 0, 1); const outP = clamp((tipOutAt + 0.3 - t)/0.3, 0, 1); const p = Math.min(Easing.easeOutBack(inP), outP); return (
{plugSvg} Se conecta a servicios externos
); })()}
{/* ===== Banda de gobierno (beat final) ===== */} {t >= bandAt && (()=>{ const p = clamp((t-bandAt)/0.5, 0, 1); const e = Easing.easeOutCubic(p); const p1 = clamp((t-(bandAt+0.4))/0.5, 0, 1); const p2 = clamp((t-(bandAt+1.4))/0.5, 0, 1); return (
Cuatro agentes, cero contraseñas repartidas Cada uno actúa con los permisos de quien lo creó
); })()} {/* Cursor orgánico: curva + aterrizaje + pausa pre-click + anillo */} {cur && cur.o > 0.01 && (
)} ); } Object.assign(window, { SlideAgente });