@arcadialdev/arcality 2.4.31 → 2.4.33

package/.agent/skills/form-expert.md

@@ -0,0 +1,99 @@
+---
+name: form-expert
+description: Metodología experta para explorar, identificar y llenar formularios complejos en aplicaciones web.
+---
+
+# Form Expert Skill
+
+Esta habilidad define el protocolo que el agente DEBE seguir cuando la misión involucra llenar, crear o editar registros a través de formularios.
+
+## Principio Fundamental
+**NUNCA interactúes con un campo que no hayas inspeccionado primero.** Si un componente tiene un nombre genérico, un tag inferred como `[INFERRED]`, o simplemente no estás seguro de qué es, usa `inspect_element_details` ANTES de hacer click o fill.
+
+## Protocolo de Formularios (4 fases obligatorias)
+
+### Fase 1: RECONOCIMIENTO (Scan)
+Antes de llenar cualquier campo, dedica tu primer turno en el formulario a **analizar todos los componentes visibles**:
+
+1. **Lee la lista completa de CURRENT COMPONENTS** — identifica:
+   - Campos de tipo FIELD (inputs, textareas, selects)
+   - Campos con label visible (prioritarios)
+   - Campos sin label o con nombre genérico (requieren inspección)
+   - Botones de acción (GUARDAR, CANCELAR, etc.)
+   - Tabs o pestañas si el formulario tiene secciones
+
+2. **Clasifica los campos** en:
+   - ✅ **Confiables**: Tienen un nombre claro como `[input] Título del documento`
+   - ⚠️ **Sospechosos**: Tienen nombre genérico como `[input] Editar` o `[INFERRED] xxx`
+   - ❌ **Desconocidos**: Solo tienen tag genérico como `[input]`
+
+3. **Para campos sospechosos o desconocidos**: Usa `inspect_element_details` para obtener:
+   - El placeholder text
+   - El aria-label
+   - El atributo name o id
+   - Si está disabled o readonly
+
+### Fase 2: PLANIFICACIÓN (Plan)
+Con la información del reconocimiento, planifica la secuencia de acciones:
+
+1. **Prioriza los campos obligatorios** — los que tienen asterisco (*), clase "required", o están marcados en rojo.
+2. **Genera datos únicos** — Si la misión dice "genérico" o "aleatorio", genera datos que incluyan un timestamp o ID único para evitar duplicados. Ejemplo: `TEST-${timestamp}` o `Prueba QA Feb24`.
+3. **Planifica el orden**: Llena los campos de arriba a abajo, izquierda a derecha, siguiendo el orden del DOM.
+
+### Fase 3: EJECUCIÓN (Act)
+Ejecuta las acciones planificadas:
+
+1. **Llena múltiples campos por turno** — No pierdas un turno por campo. Agrupa 3-5 fills en una sola llamada a `perform_ui_actions`.
+2. **Para cada campo fill**: click + fill (en ese orden). El click asegura que el campo tiene focus.
+3. **Para dropdowns/selects**: Click para abrir → espera el siguiente turno → selecciona la opción.
+4. **Si un fill falla**: NO reintentes inmediatamente. Usa `inspect_element_details` para ver si el campo es un select, un datepicker, o tiene un overlay encima.
+
+### Fase 4: VERIFICACIÓN (Verify)
+Antes de hacer GUARDAR:
+
+1. **Usa `validate_element_state`** en el botón de GUARDAR para confirmar que está enabled.
+2. **Revisa visualmente** si hay campos en rojo o mensajes de error.
+3. **Solo entonces** haz click en GUARDAR.
+4. **Después de GUARDAR**: Espera la respuesta de la UI. Si aparece un toast de éxito o regresas a la lista, la misión fue exitosa.
+
+## Manejo de Errores en Formularios
+
+### Si un campo falla con Timeout:
+```
+1. NO reintentes el mismo click/fill inmediatamente
+2. Usa inspect_element_details en ese IDX
+3. Analiza si:
+   - El elemento está cubierto por un overlay/modal
+   - El elemento es readonly/disabled  
+   - El IDX cambió (la página se re-renderizó)
+4. Si el elemento no sirve, busca un campo alternativo con nombre similar
+```
+
+### Si aparece un error de "duplicado" o "ya existe":
+```
+1. Identifica qué campo causó el error (claves, códigos, nombres)
+2. Cambia el valor a algo único (agrega sufijo numérico o timestamp)
+3. Reintenta GUARDAR
+```
+
+### Si el formulario tiene tabs o secciones:
+```
+1. Llena los campos de la sección actual PRIMERO.
+2. Identifica el elemento de la pestaña: Busca el texto de la pestaña (ej: "CAMPOS DE LA FORMA") en componentes tipo ACTION.
+3. PRECISIÓN: Evita hacer click en contenedores grandes que agrupan varias pestañas. Prefiere el elemento más pequeño (span o label) que contenga el texto exacto.
+4. Haz click en la pestaña. Si un click simple no funciona tras 2 intentos, usa 'double_click'.
+5. Espera el siguiente turno para ver los nuevos campos.
+```
+
+## Uso de Double Click
+- Úsalo SOLO cuando:
+  - La misión lo pida explícitamente (ej: "haz doble clic en la celda").
+  - Un elemento (como una pestaña o un icono) no responda tras dos intentos de click simple.
+  - Quieras activar modos de edición en tablas o componentes complejos.
+
+## Anti-patrones (NUNCA hagas esto)
+- ❌ Hacer click en un campo `[INFERRED]` sin inspeccionarlo primero
+- ❌ Intentar llenar TODO el formulario en el primer turno sin saber qué campos hay
+- ❌ Hacer click en el botón GUARDAR sin haber verificado que los campos están llenos
+- ❌ Reintentar la misma acción fallida sin investigar la causa
+- ❌ Asumir que un componente con nombre largo (>50 chars) es un campo — probablemente es un contenedor

package/.agent/skills/investigation-protocol.md

@@ -0,0 +1,61 @@
+---
+name: investigation-protocol
+description: Protocolo obligatorio de investigación cuando una acción falla o un elemento es ambiguo.
+---
+
+# Investigation Protocol Skill
+
+## Regla de Oro
+**NUNCA reintentes una acción fallida sin investigar primero.** Si algo falla, SIEMPRE ejecuta el protocolo de investigación antes de intentar de nuevo.
+
+## Protocolo de Investigación (Obligatorio tras cualquier fallo)
+
+### Paso 1: Inspección del elemento
+```
+Usa: inspect_element_details (idx del elemento que falló)
+Objetivo: Determinar POR QUÉ falló
+```
+
+Revisa en el resultado:
+- ¿El elemento es `disabled` o `readonly`?
+- ¿El elemento está cubierto por otro (`pointer-events: none`, overlay)?
+- ¿El elemento es un `<select>` que requiere interacción diferente a fill?
+- ¿El elemento está en un iframe diferente (`frameIdx`)?
+
+### Paso 2: Auditoría de consola
+```
+Usa: capture_console_errors
+Objetivo: Buscar errores JavaScript silenciosos
+```
+
+Si la UI no responde o está congelada, puede haber un error JS no visible. Revisa:
+- Errores de red (fetch failed, 404, 500)
+- Errores de JS (TypeError, undefined)
+- Warnings de frameworks (React, Angular)
+
+### Paso 3: Captura de evidencia
+```
+Usa: create_test_evidence (type: annotated_screenshot)
+Objetivo: Documentar el estado actual para debugging
+```
+
+Si identificas un bug real de la aplicación (no un error tuyo), documéntalo con evidencia anotada.
+
+### Paso 4: Decisión
+Después de investigar, toma UNA de estas decisiones:
+1. **Reintentar con variación**: Si descubriste que el campo es un select, usa click en vez de fill.
+2. **Buscar alternativa**: Si el elemento está cubierto, busca otro camino al mismo objetivo.
+3. **Reportar bug**: Si es un bug de la aplicación, usa `report_application_bug`.
+4. **Reportar incapacidad**: Si no puedes avanzar, usa `report_inability_to_proceed`.
+
+## Cuándo usar cada herramienta de investigación
+
+| Situación | Herramienta | Obligatoria |
+|-----------|------------|-------------|
+| Acción falló con Timeout | `inspect_element_details` | ✅ SÍ |
+| Elemento con nombre [INFERRED] | `inspect_element_details` | ✅ SÍ |
+| UI no responde / congelada | `capture_console_errors` | ✅ SÍ |
+| Antes de hacer GUARDAR/SAVE | `validate_element_state` | ✅ SÍ |
+| Después de GUARDAR exitoso | `extract_table_data` | Recomendada |
+| Bug encontrado | `create_test_evidence` | ✅ SÍ |
+| Fin de misión exitosa | `create_test_evidence` | Recomendada |

package/.agent/skills/modal-master.md

@@ -0,0 +1,41 @@
+---
+name: modal-master
+description: Gestión experta de ventanas modales, diálogos y popups en pruebas de QA.
+---
+
+# Modal Master Skill
+
+Esta habilidad permite al agente detectar, navegar y cerrar ventanas modales de manera eficiente, evitando que el flujo del test se bloquee por elementos superpuestos.
+
+## Cuándo usar esta habilidad
+- Cuando el agente realiza una acción y aparece un diálogo de confirmación (ej: "¿Desea guardar los cambios?").
+- Cuando un popup de error o notificación bloquea el acceso al resto de la página.
+- Cuando la misión requiere interactuar específicamente con elementos dentro de un modal.
+
+## Instrucciones para el Agente
+
+### 1. Detección de Modales
+Antes de intentar interactuar con un elemento del fondo, verifica si hay un modal activo buscando:
+- Elementos con `role="dialog"` o `role="alertdialog"`.
+- Atributos `aria-modal="true"`.
+- Overlays oscuros que cubren la pantalla (ej: clases tipo `backdrop`, `overlay`, `modal-open`).
+- Títulos destacados que no estaban antes de la acción.
+
+### 2. Prioridad de Interacción
+Si un modal está abierto:
+- **Prioridad 1**: Si el modal es informativo (Warning/Error), léelo y repórtalo en tu pensamiento antes de cerrarlo.
+- **Prioridad 2**: Si el modal es de confirmación para la acción que acabas de realizar, haz clic en el botón afirmativo (ej: "Aceptar", "Sí", "Confirmar").
+- **Prioridad 3**: Si el modal es intrusivo y no permite seguir, busca el botón de cierre (usualmente una 'X', un botón "Cerrar" o "Cancelar").
+
+### 3. Estrategias de Cierre
+Si no encuentras un botón de cierre claro:
+- Busca botones con clases `close`, `btn-close` o que tengan un ícono dentro.
+- Usa `send_keyboard_event` con key `Escape` para intentar cerrar el modal/popup/dropdown.
+- Verifica si el modal desaparece al hacer clic en el backdrop (el área fuera del cuadro blanco).
+
+### 4. Flujo de Trabajo (Ejemplo)
+1. **Acción**: Clic en "Eliminar".
+2. **Scan**: Detecto un modal con el texto "¿Está seguro?".
+3. **Validación**: Uso `validate_element_state` para verificar que el botón "Eliminar permanentemente" es visible dentro del modal.
+4. **Ejecución**: Clic en el botón del modal.
+5. **Verificación**: Espero a que el modal desaparezca antes de realizar la siguiente acción de la misión.

package/.agent/skills/native-control-expert.md

@@ -0,0 +1,82 @@
+---
+name: native-control-expert
+description: Protocolo experto para interactuar con controles nativos del navegador (time pickers, date pickers, selects, etc.)
+---
+
+# Native Control Expert Skill
+
+Esta habilidad define el protocolo que el agente DEBE seguir cuando la misión involucra interactuar con controles nativos del navegador que **NO responden bien** a la acción estándar `fill`.
+
+## Controles Nativos que REQUIEREN esta skill
+
+| Control | Ejemplo | Acción preferida |
+|---------|---------|-----------------|
+| `<input type="time">` | Campo de hora `HH:mm` | `interact_native_control` con `control_type: "time"` |
+| `<input type="date">` | Campo de fecha `YYYY-MM-DD` | `interact_native_control` con `control_type: "date"` |
+| `<input type="datetime-local">` | Fecha y hora combinados | `interact_native_control` con `control_type: "datetime"` |
+| `<input type="color">` | Selector de color | `interact_native_control` con `control_type: "color"` |
+| `<input type="range">` | Slider numérico | `interact_native_control` con `control_type: "range"` |
+| `<select>` nativo | Dropdown estándar HTML | `interact_native_control` con `control_type: "select"` |
+| Combobox/Autocomplete | Campos con `role="combobox"` | `click` + `fill` letra + `send_keyboard_event` ArrowDown + Enter |
+| Time picker con diálogo | Campos que abren un popup al hacer click | `send_keyboard_event` con Arrow keys |
+
+## Protocolo de Interacción con Time Pickers
+
+### ❌ LO QUE NUNCA DEBES HACER:
+- Intentar `fill` repetidamente si falla la primera vez
+- Hacer click una y otra vez sin cambiar de estrategia (esto causa loop detection)
+- Asumir que un time picker funciona como un input de texto normal
+
+### ✅ LO QUE SÍ DEBES HACER:
+
+**Estrategia 1: interact_native_control (PREFERIDA)**
+```
+1. Usa inspect_element_details para confirmar que es type="time"
+2. Usa interact_native_control con control_type: "time", value: "13:05"
+3. Verifica el resultado
+```
+
+**Estrategia 2: Keyboard Navigation (FALLBACK)**
+```
+1. Haz click en el campo de hora
+2. Usa send_keyboard_event con key: "Control+a" para seleccionar todo
+3. Usa send_keyboard_event para escribir los dígitos del tiempo
+4. Ejemplo: Para "13:05", envía las teclas: "1", "3", "0", "5"
+5. Usa send_keyboard_event con key: "Tab" para navegar al siguiente campo
+```
+
+**Estrategia 3: Arrow Keys (ULTIMO RECURSO)**
+```
+1. Haz click en el segmento de horas del campo
+2. Usa send_keyboard_event con key: "ArrowUp" o "ArrowDown" para ajustar la hora
+3. Usa send_keyboard_event con key: "Tab" para mover al segmento de minutos
+4. Repite con ArrowUp/ArrowDown para los minutos
+```
+
+## Protocolo de Interacción con Date Pickers
+
+### ✅ Estrategia preferida:
+```
+1. Confirma con inspect_element_details que es type="date"
+2. Usa interact_native_control con control_type: "date", value: "2026-03-25"
+3. IMPORTANTE: El formato SIEMPRE es YYYY-MM-DD
+```
+
+## Detección: ¿Cuándo usar esta skill?
+
+Debes activar esta skill cuando:
+1. Ves un componente FIELD con nombre que incluye "HH:mm" o "hora" o "time"
+2. Un campo tiene `role="combobox"` y `aria-expanded`
+3. Un `fill()` falla en un campo de fecha/hora con Timeout o sin efecto
+4. El inspector muestra `type="time"` o `type="date"` en los atributos
+
+## Keyboard Shortcuts Útiles
+
+| Tecla | Efecto en controles nativos |
+|-------|-----------------------------|
+| `Tab` | Mover al siguiente segmento (horas → minutos → AM/PM) |
+| `ArrowUp` | Incrementar valor del segmento actual |
+| `ArrowDown` | Decrementar valor del segmento actual |
+| `Escape` | Cerrar dropdown/calendar que se abrió |
+| `Enter` | Confirmar selección en calendarios |
+| `Control+a` | Seleccionar todo el contenido del campo |

package/bin/arcality.mjs

@@ -14,15 +14,24 @@ const rawArgs = process.argv.slice(2);
 let isRun = false;
 let isInit = false;
 let isSetup = false;
+let isLogs = false;
 
 // Buscamos los comandos en cualquier posición para evitar filtros de NPM en Windows
 rawArgs.forEach(arg => {
     if (arg === 'run') isRun = true;
     if (arg === 'init') isInit = true;
     if (arg === 'setup') isSetup = true;
+    if (arg === '--logs') isLogs = true;
 });
 
-if (isInit) {
+if (isLogs) {
+    const logsScript = path.join(PACKAGE_ROOT, 'scripts', 'arcality-logs.mjs');
+    spawn('node', [logsScript], {
+        stdio: 'inherit',
+        cwd: process.cwd(),
+        env: { ...process.env, ARCALITY_ROOT: PACKAGE_ROOT }
+    }).on('exit', code => process.exit(code || 0));
+} else if (isInit) {
     const initScript = path.join(PACKAGE_ROOT, 'scripts', 'init.mjs');
     spawn('node', [initScript, ...rawArgs.filter(a => a !== 'init')], {
         stdio: 'inherit',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcadialdev/arcality",
-  "version": "2.4.31",
+  "version": "2.4.33",
   "description": "AI-powered QA testing tool — Autonomous web testing agent by Arcadial",
   "main": "index.js",
   "scripts": {
@@ -18,6 +18,7 @@
     "bin/",
     "scripts/",
     "src/",
+    ".agent/",
     ".agents/",
     "tests/_helpers/agentic-runner.bundle.spec.js",
     "tests/_helpers/ArcalityReporter.js",

package/playwright.config.js

@@ -7,6 +7,7 @@ module.exports = defineConfig({
   testDir: path.join(__dirname, 'tests', '_helpers'),
   testMatch: ['agentic-runner.bundle.spec.js'],
   reporter: [
+    ['line'],
     [path.join(__dirname, 'tests', '_helpers', 'ArcalityReporter.js'),
      { outputDir: process.env.REPORTS_DIR || path.join(__dirname, 'tests-report') }]
   ],

package/scripts/arcality-logs.mjs

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+import fs from "node:fs";
+import path from "node:path";
+import chalk from "chalk";
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const PROJECT_ROOT = process.env.ARCALITY_ROOT || path.join(__dirname, "..");
+
+const contextDir = path.join(process.cwd(), "out");
+const centralLog = path.join(contextDir, "arcality-history.log");
+
+console.log(chalk.cyan(`\n🔍 Arcality Logs Viewer`));
+console.log(chalk.gray(`=========================\n`));
+
+if (!fs.existsSync(centralLog)) {
+    console.log(chalk.yellow(`No se encontró un historial de logs en este proyecto.`));
+    console.log(chalk.gray(`(Directorio actual: ${contextDir})\n`));
+    console.log(`Ejecuta algunas misiones de prueba primero usando el comando arcality.\n`);
+    process.exit(0);
+}
+
+try {
+    const rawData = fs.readFileSync(centralLog, 'utf8');
+    const lines = rawData.split('\n').filter(l => l.trim().length > 0);
+    
+    if (lines.length === 0) {
+        console.log(chalk.yellow(`El archivo de historial de misiones está vacío.\n`));
+        process.exit(0);
+    }
+
+    console.log(chalk.bold(`Registros encontrados: `) + chalk.cyan(lines.length));
+    console.log(chalk.gray(`Mostrando los últimos 20 resultados:`));
+    console.log();
+
+    const recentLines = lines.slice(-20);
+    let totalInput = 0;
+    let totalOutput = 0;
+    
+    recentLines.forEach((line, index) => {
+        try {
+            const data = JSON.parse(line);
+            
+            // Icono según resultado
+            const statusIcon = data.success ? chalk.green('✅') : chalk.red('❌');
+            
+            // Fecha bonita
+            const date = new Date(data.ts).toLocaleString();
+            
+            // Contabilizar tokens
+            const inT = data.usage?.input_tokens || 0;
+            const caT = data.usage?.cache_creation_input_tokens || 0;
+            const crT = data.usage?.cache_read_input_tokens || 0;
+            const totalIn = inT + caT + crT;
+            const totalOut = data.usage?.output_tokens || 0;
+            
+            totalInput += totalIn;
+            totalOutput += totalOut;
+            
+            const costStr = chalk.yellow(`[IN: ${totalIn} | OUT: ${totalOut}]`);
+            const targetStr = data.target ? chalk.gray(` @ ${data.target}`) : '';
+            
+            console.log(`${statusIcon} ${chalk.blue(date)} ${costStr}`);
+            console.log(`   ${chalk.white(data.mission)}${targetStr}`);
+            console.log(`   ${chalk.gray(`Pasos dados: ${data.steps}`)}\n`);
+        } catch (e) {
+            console.log(chalk.red(`⚠️ Error parseando línea: ${line.substring(0, 50)}...\n`));
+        }
+    });
+
+    console.log(chalk.gray(`--------------------------------------------------\n`));
+    
+} catch (err) {
+    console.error(chalk.red(`❌ Ocurrió un error al leer los logs:`), err.message);
+}

package/scripts/gen-and-run.mjs

@@ -194,7 +194,7 @@ function showBanner() {
 }
 
 const ARCALITY_BRAIN_URL = "https://api.anthropic.com/v1/messages";
-const ARCALITY_MODEL = process.env.CLAUDE_MODEL || "claude-3-5-sonnet-20241022";
+const ARCALITY_MODEL = process.env.CLAUDE_MODEL || "claude-4-5-sonnet-latest";
 const OUT_DIR = path.join(PROJECT_ROOT, "tests");
 const LOGS_DIR = path.join(PROJECT_ROOT, "logs");
 
@@ -807,7 +807,22 @@ async function main() {
 
                 // ── End Mission ──
                 const { endMission } = await import('../src/arcalityClient.mjs');
-                await endMission(mission.mission_id, 'success');
+                
+                let finalUsage = undefined;
+                try {
+                    const ctxDir = process.env.CONTEXT_DIR;
+                    if (fs.existsSync(ctxDir)) {
+                        const files = fs.readdirSync(ctxDir);
+                        const logFiles = files.filter(f => f.startsWith('agent-log-') && f.endsWith('.json')).sort();
+                        if (logFiles.length > 0) {
+                            const lastLog = path.join(ctxDir, logFiles[logFiles.length - 1]);
+                            const logData = JSON.parse(fs.readFileSync(lastLog, 'utf8'));
+                            finalUsage = logData.usage;
+                        }
+                    }
+                } catch(e) {}
+
+                await endMission(mission.mission_id, 'success', finalUsage);
 
                 // ── Ping Project ──
                 await pingProject(finalProjectId, process.env.ARCALITY_API_KEY);
@@ -866,7 +881,20 @@ async function main() {
                 // End mission with failure
                 try {
                     const { endMission } = await import('../src/arcalityClient.mjs');
-                    await endMission(mission.mission_id, 'failed');
+                    let finalUsage = undefined;
+                    try {
+                        const ctxDir = process.env.CONTEXT_DIR;
+                        if (fs.existsSync(ctxDir)) {
+                            const files = fs.readdirSync(ctxDir);
+                            const logFiles = files.filter(f => f.startsWith('agent-log-') && f.endsWith('.json')).sort();
+                            if (logFiles.length > 0) {
+                                const lastLog = path.join(ctxDir, logFiles[logFiles.length - 1]);
+                                const logData = JSON.parse(fs.readFileSync(lastLog, 'utf8'));
+                                finalUsage = logData.usage;
+                            }
+                        }
+                    } catch(e) {}
+                    await endMission(mission.mission_id, 'failed', finalUsage);
                 } catch { }
             } finally {
                 const sRep = spinner();

package/src/arcalityClient.mjs

@@ -234,8 +234,9 @@ export async function startMission(prompt, targetUrl) {
  * Marks a mission as completed.
  * @param {string} missionId
  * @param {'success'|'failed'|'cancelled'} result
+ * @param {object} usage - Optional usage statistics directly from the AI
  */
-export async function endMission(missionId, result) {
+export async function endMission(missionId, result, usage = null) {
     const apiBase = getEffectiveApiBase();
     if (!apiBase || !missionId) return { ok: true };
 
@@ -247,7 +248,7 @@ export async function endMission(missionId, result) {
                 'Content-Type': 'application/json',
                 'x-api-key': key
             },
-            body: JSON.stringify({ result })
+            body: JSON.stringify({ result, usage })
         });
     } catch { }
     return { ok: true };

package/src/services/autoskillsService.ts

@@ -0,0 +1,61 @@
+import fs from 'fs';
+import path from 'path';
+
+// Mapeo curado de tecnologías clave a sus skills de pruebas/qa/patrones de autoskills.sh
+// Son recursos muy ligeros en formato Markdown
+const SKILLS_MAP: Record<string, string> = {
+    'next': 'https://skills.sh/vercel-labs/next-skills/next-best-practices/raw',
+    'vue': 'https://skills.sh/antfu/skills/vue-best-practices/raw',
+    'tailwindcss': 'https://skills.sh/giuseppe-trisciuoglio/developer-kit/tailwind-css-patterns/raw',
+    'react': 'https://skills.sh/vercel-labs/agent-skills/vercel-react-best-practices/raw',
+    'angular': 'https://skills.sh/angular/skills/angular-developer/raw',
+    'nuxt': 'https://skills.sh/antfu/skills/nuxt/raw',
+    'svelte': 'https://skills.sh/ejirocodes/agent-skills/svelte5-best-practices/raw',
+    'astro': 'https://skills.sh/astrolicious/agent-skills/astro/raw',
+    'prisma': 'https://skills.sh/prisma/skills/prisma-postgres/raw'
+};
+
+export async function detectAndFetchEphemeralSkills(projectRoot: string): Promise<string> {
+    const pkgPath = path.join(projectRoot, 'package.json');
+    if (!fs.existsSync(pkgPath)) return '';
+
+    try {
+        const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+        const deps = { ...(pkg.dependencies || {}), ...(pkg.devDependencies || {}) };
+        
+        const matchedUrls: string[] = [];
+        const matchedTechs: string[] = [];
+
+        for (const [lib, url] of Object.entries(SKILLS_MAP)) {
+            // Buscamos coincidencia parcial (ej. si usan @angular/core, next, react-dom)
+            const hasLib = Object.keys(deps).some(dep => dep === lib || dep.includes(`/${lib}`));
+            if (hasLib) {
+                 matchedUrls.push(url);
+                 matchedTechs.push(lib);
+            }
+        }
+
+        if (matchedUrls.length === 0) return '';
+
+        console.log(`>>ARCALITY_STATUS>> ⚡ Stack detectado (${matchedTechs.join(', ')}). QA Skills inyectadas en memoria.`);
+
+        // Fetch strings in parallel with simple timeout
+        const skillsPromises = matchedUrls.map(url => {
+            const controller = new AbortController();
+            const id = setTimeout(() => controller.abort(), 2000); // Max 2s per request
+            return fetch(url, { signal: controller.signal })
+                .then(r => r.ok ? r.text() : '')
+                .catch(() => '')
+                .finally(() => clearTimeout(id));
+        });
+
+        const skillsTexts = await Promise.all(skillsPromises);
+        
+        const validTexts = skillsTexts.filter(Boolean);
+        if (validTexts.length === 0) return '';
+
+        return `\n<TECH_STACK_CONTEXT>\nEl proyecto objetivo utiliza las siguientes tecnologías. Usa estas directrices técnicas para entender el DOM, rutas y posibles bugs visuales:\n\n${validTexts.join('\n\n---\n\n')}\n</TECH_STACK_CONTEXT>\n`;
+    } catch {
+       return ''; // Fails silently
+    }
+}

package/tests/_helpers/agentic-runner.bundle.spec.js

@@ -1375,6 +1375,14 @@ ${relevantFailures.map((m) => `- ${m.prompt}`).join("\n")}
     } catch (e) {
       console.log(`>>ARCALITY_STATUS>> \u26A0\uFE0F Error en hook de contexto: ${e.message}`);
     }
+    let autoskillsContext = "";
+    try {
+      const path3 = require("path");
+      const toolsRoot = process.env.ARCALITY_ROOT || path3.join(__dirname, "..", "..");
+      const { detectAndFetchEphemeralSkills } = require(path3.join(toolsRoot, "src", "services", "autoskillsService"));
+      autoskillsContext = await detectAndFetchEphemeralSkills(process.cwd());
+    } catch (e) {
+    }
     const systemPromptBlocks = [
       {
         type: "text",
@@ -1386,6 +1394,7 @@ ${prompt}
 
 ${projectInfo}
 ${skillsContext}
+${autoskillsContext}
 ${memoryContext}
 ${credentialsContext}
 ${memoryBackendContext}`
@@ -1491,8 +1500,7 @@ When a form is divided into numbered steps (e.g., Step 1 \u2192 Step 2 \u2192 St
 
 3. **NEVER LOOP ON THE SAME STEP**: If you've been on the same wizard step for 3+ turns without advancing, go back one step and verify the data is correct before trying to advance again.
 
-4. **STEP VERIFICATION**: Before clicking Next/Save on any step, VERIFY that date fields have future-or-today dates. Use \`validate_element_state\` with 'has_value' to confirm.`,
-        cache_control: { type: "ephemeral" }
+4. **STEP VERIFICATION**: Before clicking Next/Save on any step, VERIFY that date fields have future-or-today dates. Use \`validate_element_state\` with 'has_value' to confirm.`
       }
     ];
     if (this.testInfo) {
@@ -1511,8 +1519,7 @@ When a form is divided into numbered steps (e.g., Step 1 \u2192 Step 2 \u2192 St
               type: "base64",
               media_type: "image/png",
               data: base64Img
-            },
-            cache_control: { type: "ephemeral" }
+            }
           },
           {
             type: "text",
@@ -1537,14 +1544,14 @@ ${history.slice(-25).join("\n") || "None"}`
           },
           {
             type: "text",
-            text: `Please analyze the current state and provide the next step.`,
-            cache_control: { type: "ephemeral" }
+            text: `Please analyze the current state and provide the next step.`
           }
         ]
       }
     ];
     console.log(`>>ARCALITY_STATUS>> \u{1F9E0} Arcality est\xE1 procesando la visi\xF3n...`);
     const startTime = Date.now();
+    let totalUsage = { input_tokens: 0, output_tokens: 0, cache_creation_input_tokens: 0, cache_read_input_tokens: 0 };
     for (let turn = 0; turn < 10; turn++) {
       let response;
       let retryCount = 0;
@@ -1611,6 +1618,12 @@ ${history.slice(-25).join("\n") || "None"}`
       }
       const data = await response.json();
       const message = data;
+      if (data.usage) {
+        totalUsage.input_tokens += data.usage.input_tokens || 0;
+        totalUsage.output_tokens += data.usage.output_tokens || 0;
+        totalUsage.cache_creation_input_tokens += data.usage.cache_creation_input_tokens || 0;
+        totalUsage.cache_read_input_tokens += data.usage.cache_read_input_tokens || 0;
+      }
       anthropicMessages.push({
         role: "assistant",
         content: message.content
@@ -1619,7 +1632,7 @@ ${history.slice(-25).join("\n") || "None"}`
       const textResponse = message.content.find((c) => c.type === "text")?.text || "";
       if (toolCalls.length === 0) {
         console.log(`(${((Date.now() - startTime) / 1e3).toFixed(1)}s)`);
-        return { thought: textResponse || "No action decided", actions: [], usage: data.usage };
+        return { thought: textResponse || "No action decided", actions: [], usage: totalUsage };
       }
       const toolResults = [];
       let uiActionCall = null;
@@ -1679,7 +1692,7 @@ ${history.slice(-25).join("\n") || "None"}`
 \u{1F4A1} SUGERENCIA: ${toolInput.prompt_suggestion}`,
             actions: [],
             finish: true,
-            usage: data.usage
+            usage: totalUsage
           };
         } else if (toolName === "validate_element_state") {
           const { idx, validations } = toolInput;
@@ -2187,7 +2200,7 @@ ${report}` });
             return { ...a, value: finalValue, selector: c?.selector, frameIdx: c?.frameIdx, description: c?.name, type: c?.type };
           }),
           finish: input.finish,
-          usage: data.usage
+          usage: totalUsage
         };
       }
     }
@@ -2450,6 +2463,7 @@ function captureValidationRule(errorMessage, context) {
   const maxSteps = 30;
   let lastSeenSuccessToast = "";
   let accumulatedCost = 0;
+  let totalMissionUsage = { input_tokens: 0, output_tokens: 0, cache_creation_input_tokens: 0, cache_read_input_tokens: 0 };
   const saveMissionResults = () => {
     if (resultsSaved)
       return;
@@ -2471,73 +2485,102 @@ function captureValidationRule(errorMessage, context) {
           }
         }
       }
+      const effectiveLocalSteps = stepsData.length > 0 ? stepsData : stepsDataBackup;
       const missionData = {
         prompt,
         steps: history,
-        steps_data: stepsData,
+        steps_data: effectiveLocalSteps,
         success: finalSuccess,
         error: hasCriticalError,
         timestamp: Date.now()
       };
       memories.push(missionData);
       fs2.writeFileSync(memoryFile, JSON.stringify(memories, null, 2));
-      console.log(`>>ARCALITY_STATUS>> \u{1F9E0} Memoria guardada: ${stepsData.length} pasos nuevos`);
+      console.log(`>>ARCALITY_STATUS>> \u{1F9E0} Memoria guardada: ${effectiveLocalSteps.length} pasos nuevos`);
     } catch (err) {
       console.error("\u274C Fall\xF3 al guardar memoria:", err);
     }
     try {
       const logPath = path2.join(contextDir, `agent-log-${Date.now()}.json`);
-      fs2.writeFileSync(logPath, JSON.stringify({ prompt, history, steps: stepCount, success: finalSuccess, error: hasCriticalError }, null, 2));
+      fs2.writeFileSync(logPath, JSON.stringify({ prompt, history, steps: stepCount, success: finalSuccess, error: hasCriticalError, usage: totalMissionUsage, timestamp: (/* @__PURE__ */ new Date()).toISOString() }, null, 2));
+      try {
+        fs2.appendFileSync(path2.join(contextDir, "arcality-history.log"), JSON.stringify({ ts: (/* @__PURE__ */ new Date()).toISOString(), mission: prompt.substring(0, 150), success: finalSuccess, steps: stepCount, usage: totalMissionUsage }) + "\n");
+      } catch (e) {
+      }
     } catch (err) {
     }
   };
   let collectiveMemoryPersisted = false;
-  const persistCollectiveMemory = async () => {
-    if (collectiveMemoryPersisted)
-      return;
-    collectiveMemoryPersisted = true;
+  const persistCollectiveMemory = async (isFailed = false) => {
     const pid = process.env.ARCALITY_PROJECT_ID || "";
     const apiUrl = process.env.ARCALITY_API_URL || "";
     const apiKey = process.env.ARCALITY_API_KEY || "";
     if (!pid || !apiUrl || !apiKey) {
-      console.warn(`[CollectiveMemory] \u26A0\uFE0F Vars faltantes \u2014 project_id='${pid}' api_url='${apiUrl}' api_key='${apiKey ? "OK" : "MISSING"}'`);
+      console.warn(`[CollectiveMemory] \u26A0\uFE0F Vars faltantes \u2014 project_id='${pid}' api_url='${apiUrl}' api_key='${apiKey ? "OK" : "MISSING"}' \u2192 NO persiste.`);
       return;
     }
-    console.log(`\u{1F9E0} [COLLECTIVE MEMORY] Persistiendo conocimiento (project: ${pid})...`);
+    if (collectiveMemoryPersisted && !isFailed) {
+      console.log(`[CollectiveMemory] \u2139\uFE0F Ya persistido como \xE9xito. Skip duplicado.`);
+      return;
+    }
+    if (!isFailed && stepsData.length === 0 && stepsDataBackup.length === 0) {
+      console.warn(`[CollectiveMemory] \u26A0\uFE0F stepsData vac\xEDo en path de \xE9xito \u2014 intentando usar backup...`);
+    }
+    const effectiveSteps = stepsData.length > 0 ? stepsData : stepsDataBackup;
+    console.log(`
+======================================================`);
+    console.log(`\u{1F9E0} [MEMORIA COLECTIVA - INGESTA DE APRENDIZAJE]`);
+    console.log(`>>arcality>> Persistiendo conocimiento (project: ${pid}, steps: ${effectiveSteps.length}, isFailed: ${isFailed})...`);
+    console.log(`======================================================
+`);
     try {
-      const stepsNarrative = stepsData.map((s) => `${s.action_data?.action || "action"} "${s.componentName}" en ${s.url}`).join(" \u2192 ").substring(0, 500);
-      const knowledgeId = await pushKnowledge({
-        doc_type: "PROCESS",
-        title: `Flujo exitoso: ${prompt.substring(0, 100)}`,
-        content: stepsNarrative || prompt.substring(0, 500)
-      });
-      if (knowledgeId)
-        console.log(`\u{1F9E0} [COLLECTIVE MEMORY] \u2705 Knowledge guardado: ${knowledgeId}`);
-      else
-        console.warn(`[CollectiveMemory] \u26A0\uFE0F pushKnowledge retorn\xF3 null (revisar HTTP status arriba)`);
-      const uniqueUrls = [...new Set(stepsData.map((s) => s.url).filter(Boolean))];
-      if (uniqueUrls.length > 1) {
-        const ruleId = await pushRule({
-          rule_type: "NAVIGATION",
-          title: `Flujo de navegaci\xF3n: ${prompt.substring(0, 80)}`,
-          description: `Agente naveg\xF3 ${uniqueUrls.length} p\xE1ginas: ${uniqueUrls.join(" \u2192 ").substring(0, 400)}`,
-          severity: "suggestion"
+      const stepsNarrative = effectiveSteps.map((s) => `${s.action_data?.action || "action"} "${s.componentName}" en ${s.url}`).join(" \u2192 ").substring(0, 500);
+      if (!isFailed) {
+        collectiveMemoryPersisted = true;
+        const knowledgeId = await pushKnowledge({
+          doc_type: "PROCESS",
+          title: `Flujo exitoso: ${prompt.substring(0, 100)}`,
+          content: stepsNarrative || prompt.substring(0, 500)
         });
-        if (ruleId)
-          console.log(`\u{1F9E0} [COLLECTIVE MEMORY] \u2705 Regla NAVIGATION guardada: ${ruleId}`);
-      }
-      const submitStep = stepsData.find(
-        (s) => s.action_data?.action === "click" && (s.componentName?.toLowerCase().includes("guardar") || s.componentName?.toLowerCase().includes("save") || s.componentName?.toLowerCase().includes("crear") || s.componentName?.toLowerCase().includes("registrar"))
-      );
-      if (submitStep) {
-        const ruleId2 = await pushRule({
-          rule_type: "UI_UX",
-          title: `Patr\xF3n de guardado: ${prompt.substring(0, 60)}`,
-          description: `Flujo exitoso incluy\xF3 guardado/creaci\xF3n. Pasos: ${stepsNarrative.substring(0, 400)}`,
+        if (knowledgeId)
+          console.log(`\u{1F9E0} [COLLECTIVE MEMORY] \u2705 Knowledge guardado: ${knowledgeId}`);
+        else
+          console.warn(`[CollectiveMemory] \u26A0\uFE0F pushKnowledge retorn\xF3 null (revisar HTTP status arriba)`);
+        const uniqueUrls = [...new Set(effectiveSteps.map((s) => s.url).filter(Boolean))];
+        if (uniqueUrls.length > 1) {
+          const ruleId = await pushRule({
+            rule_type: "NAVIGATION",
+            title: `Flujo de navegaci\xF3n: ${prompt.substring(0, 80)}`,
+            description: `Agente naveg\xF3 ${uniqueUrls.length} p\xE1ginas: ${uniqueUrls.join(" \u2192 ").substring(0, 400)}`,
+            severity: "suggestion"
+          });
+          if (ruleId)
+            console.log(`\u{1F9E0} [COLLECTIVE MEMORY] \u2705 Regla NAVIGATION guardada: ${ruleId}`);
+        }
+        const submitStep = effectiveSteps.find(
+          (s) => s.action_data?.action === "click" && (s.componentName?.toLowerCase().includes("guardar") || s.componentName?.toLowerCase().includes("save") || s.componentName?.toLowerCase().includes("crear") || s.componentName?.toLowerCase().includes("registrar"))
+        );
+        if (submitStep) {
+          const ruleId2 = await pushRule({
+            rule_type: "UI_UX",
+            title: `Patr\xF3n de guardado: ${prompt.substring(0, 60)}`,
+            description: `Flujo exitoso incluy\xF3 guardado/creaci\xF3n. Pasos: ${stepsNarrative.substring(0, 400)}`,
+            severity: "important"
+          });
+          if (ruleId2)
+            console.log(`\u{1F9E0} [COLLECTIVE MEMORY] \u2705 Regla UI_UX guardada: ${ruleId2}`);
+        }
+      } else {
+        const failRuleId = await pushRule({
+          rule_type: "VALIDATION",
+          title: `Misi\xF3n fallida: ${prompt.substring(0, 80)}`,
+          description: `El agente no pudo completar: "${prompt.substring(0, 200)}". \xDAltimos pasos: ${stepsNarrative.substring(0, 300)}`,
           severity: "important"
         });
-        if (ruleId2)
-          console.log(`\u{1F9E0} [COLLECTIVE MEMORY] \u2705 Regla UI_UX guardada: ${ruleId2}`);
+        if (failRuleId)
+          console.log(`\u{1F9E0} [COLLECTIVE MEMORY] \u2705 Regla de fallo guardada: ${failRuleId}`);
+        else
+          console.warn(`[CollectiveMemory] \u26A0\uFE0F No se pudo persistir misi\xF3n fallida`);
       }
     } catch (err) {
       console.warn(`[CollectiveMemory] \u274C Error inesperado en persistCollectiveMemory: ${err?.message}`);
@@ -2679,7 +2722,12 @@ function captureValidationRule(errorMessage, context) {
         response = null;
       } else {
         guideStepCount++;
-        console.log(`>>ARCALITY_STATUS>> \u2728 Gu\xEDa de \xE9xito: Paso validado (Gu\xEDa #${guideStepCount}, NO consume turno IA)`);
+        console.log(`
+======================================================`);
+        console.log(`\u{1F680} [USANDO GU\xCDA DE \xC9XITO - MEMORIA COLECTIVA AHORRANDO TOKENS]`);
+        console.log(`>>arcality>> Paso validado (Gu\xEDa #${guideStepCount}, NO consume turno IA)`);
+        console.log(`======================================================
+`);
       }
     }
     if (!response) {
@@ -2688,8 +2736,15 @@ function captureValidationRule(errorMessage, context) {
       response = await agent.askIA(prompt, history, stepCount);
       if (response.usage) {
         const inputs = response.usage.input_tokens || 0;
+        const cacheCreates = response.usage.cache_creation_input_tokens || 0;
+        const cacheReads = response.usage.cache_read_input_tokens || 0;
         const outputs = response.usage.output_tokens || 0;
-        const cost = inputs / 1e6 * 3 + outputs / 1e6 * 15;
+        totalMissionUsage.input_tokens += inputs;
+        totalMissionUsage.output_tokens += outputs;
+        totalMissionUsage.cache_creation_input_tokens += cacheCreates;
+        totalMissionUsage.cache_read_input_tokens += cacheReads;
+        const totalInputs = inputs + cacheCreates;
+        const cost = totalInputs / 1e6 * 3 + cacheReads / 1e6 * 0.3 + outputs / 1e6 * 15;
         accumulatedCost += cost;
         if (accumulatedCost >= 6) {
           console.warn(`
@@ -2702,7 +2757,12 @@ function captureValidationRule(errorMessage, context) {
         }
       }
     }
-    console.log(`\u{1F9E0} Pensamiento: ${response.thought}`);
+    console.log(`
+======================================================`);
+    console.log(`\u{1F916} [RAZONAMIENTO DEL AGENTE]`);
+    console.log(`${response.thought}`);
+    console.log(`======================================================
+`);
     if (!response.finish && history.length >= 6) {
       const lastSixActions = history.slice(-6);
       const clickActions = lastSixActions.filter((h) => h.includes("click en"));
@@ -3073,6 +3133,11 @@ Evidence: ${JSON.stringify(v.evidence).substring(0, 400)}`,
   }
   saveMissionResults();
   if (!aiMarkedSuccess) {
+    console.log(`>>ARCALITY_STATUS>> \u{1F4CA} Uso total de tokens esta misi\xF3n: IN=${totalMissionUsage.input_tokens} | OUT=${totalMissionUsage.output_tokens} | Cache writes=${totalMissionUsage.cache_creation_input_tokens} | Cache reads=${totalMissionUsage.cache_read_input_tokens}`);
+    await persistCollectiveMemory(true).catch(() => {
+    });
     throw new Error("Misi\xF3n no completada o finalizada con errores.");
+  } else {
+    console.log(`>>ARCALITY_STATUS>> \u{1F4CA} Uso total de tokens esta misi\xF3n: IN=${totalMissionUsage.input_tokens} | OUT=${totalMissionUsage.output_tokens} | Cache writes=${totalMissionUsage.cache_creation_input_tokens} | Cache reads=${totalMissionUsage.cache_read_input_tokens}`);
   }
 });