@christianmaf80/agentic-workflow 1.14.0-beta.1 → 1.14.0-beta.2

package/dist/artifacts/17-implementacion-loadshard-external-agnostic--esm/module-agent/subtask-2-implementation.md

@@ -1,133 +0,0 @@
----
-artifact: subtask-implementation
-phase: phase-4-implementation
-agent: module-agent
-status: completed
-related_task: 17-implementacion-loadshard-external-agnostic--esm
-subtask_id: 2
-subtask_title: Iframe Container Implementation
-completed_at: 2026-01-17T16:54:00Z
----
-
-# Subtask Implementation — Module Agent — Subtask 2
-
-## Agente Responsable
-⚙️ **module-agent**
-
-## Objetivo de la Subtask
-Implementar la lógica de inyección de Shards en páginas externas mediante iframes, proporcionando aislamiento total de CSS y JavaScript.
-
-## Cambios Realizados
-
-### 1. Archivo: `packages/core/src/surface/shards/shard-container.html` (NUEVO)
-
-**Descripción**: HTML contenedor que se carga dentro del iframe. Este documento:
-- Importa dinámicamente el Shard ESM solicitado
-- Implementa un `ResizeObserver` para comunicar cambios de tamaño al host
-- Monta el Shard en un elemento raíz
-
-**Características clave**:
-- Recibe el path del Shard vía query parameter `?shard=...`
-- Usa `import()` dinámico para cargar el Shard como ESM
-- Envía mensajes `postMessage` al parent con el tamaño actual
-- CSS reset para evitar estilos por defecto del navegador
-
-### 2. Archivo: `packages/core/src/engine/engine.mts`
-
-#### Cambio 2.1: Actualización del método `loadShard()`
-**Líneas modificadas**: 387-416
-
-**Antes**: Inyección directa vía `Scripting.executeScript`
-
-**Después**: 
-- Detecta si debe usar iframe (opción `useIframe`, default: `true`)
-- Si `useIframe === true`: delega a `injectShardViaIframe()`
-- Si `useIframe === false`: usa inyección directa (legacy, para Surface Pages)
-
-**Justificación**: Mantener compatibilidad con Surface Pages mientras se añade soporte para páginas externas.
-
-#### Cambio 2.2: Nuevo método `injectShardViaIframe()`
-**Líneas añadidas**: 418-473
-
-**Funcionalidad**:
-1. Construye la URL del iframe: `shard-container.html?shard=<shardPath>`
-2. Genera un ID único con prefijo `extensio-shard-`
-3. Inyecta un script que:
-   - Crea el elemento `<iframe>`
-   - Configura estilos (posición fija, sombra, z-index máximo)
-   - Añade atributo `sandbox` para seguridad
-   - Registra listener de `postMessage` para auto-resize
-   - Monta el iframe en el `document.body`
-
-**Decisiones técnicas**:
-- **Sandbox**: `allow-scripts allow-same-origin` (mínimo necesario)
-- **Z-index**: `2147483647` (máximo valor seguro)
-- **Posición inicial**: Fixed, bottom-right (300x400px)
-- **Auto-resize**: Escucha mensajes `extensio:shard:resize`
-
-### 3. Archivo: `packages/core/src/types.d.mts`
-
-#### Cambio 3.1: Actualización de `ShardOptions`
-**Líneas modificadas**: 103-107
-
-**Añadido**:
-```typescript
-useIframe?: boolean; // If true, inject via iframe (default: true)
-```
-
-**Justificación**: Permitir control explícito del método de inyección.
-
-## Tests Ejecutados
-
-```bash
-npm run test:unit -- engine --run
-```
-
-**Resultado**:
-```
-✅ Test Files: 25 passed (25)
-✅ Tests: 181 passed (181)
-✅ Duration: 3.29s
-```
-
-**Nota**: Los tests existentes siguen pasando porque la inyección directa (`useIframe: false`) se mantiene intacta.
-
-## Decisiones Técnicas
-
-### 1. Iframe vs Shadow DOM
-**Decisión**: Usar iframe como contenedor principal.
-**Razón**: Aislamiento total garantizado, bypass nativo de CSP, compatibilidad universal.
-
-### 2. Comunicación postMessage
-**Decisión**: Usar `postMessage` para resize en lugar de MutationObserver externo.
-**Razón**: Más eficiente, el Shard conoce su propio tamaño mejor que el host.
-
-### 3. Sandbox restrictivo
-**Decisión**: `allow-scripts allow-same-origin` únicamente.
-**Razón**: Mínimos permisos necesarios para ejecutar el Shard ESM.
-
-### 4. Prefijo `extensio-`
-**Decisión**: Todos los iframes tienen ID `extensio-shard-<timestamp>`.
-**Razón**: Cumple con el AC3 (prefijo obligatorio) y evita colisiones.
-
-## Desviaciones
-Ninguna. La implementación sigue exactamente el plan aprobado y la activación del agente.
-
-## Constituciones Validadas
-- ✅ `constitution.modules`: Engine modificado sin romper ciclo de vida
-- ✅ `constitution.clean_code`: Métodos pequeños, responsabilidad única
-- ✅ `constitution.extensio_architecture`: Aislamiento total, no side-effects
-
-## Próximos Pasos Sugeridos
-1. **Paso 3 (surface-agent)**: Implementar `ResizeObserver` en la clase base `Shard`
-2. **Paso 4 (architect/module)**: Añadir AI Layout Estimation
-3. **Paso 5-7 (qa-agent)**: Crear demo y tests E2E
-
-## Estado
-✅ **COMPLETADO**
-
----
-
-**Implementado por**: ⚙️ module-agent  
-**Supervisado por**: 🏛️ architect-agent  
-**Fecha**: 2026-01-17T16:54:00Z

package/dist/artifacts/17-implementacion-loadshard-external-agnostic--esm/module-agent/subtask-implementation.md

@@ -1,130 +0,0 @@
----
-artifact: subtask-implementation
-phase: phase-4-implementation
-agent: module-agent
-status: completed
-related_task: 17-implementacion-loadshard-external-agnostic--esm
-subtask_id: 1
-subtask_title: Refactorización Engine - Unificación de Listeners
-completed_at: 2026-01-17T16:42:00Z
----
-
-# Subtask Implementation — Module Agent — Subtask 1
-
-## Agente Responsable
-**module-agent**
-
-## Objetivo de la Subtask
-Refactorizar el `Engine` para eliminar la duplicidad de listeners de `Runtime.onMessage`, centralizando toda la gestión de mensajes en el método `_listen()` → `onMessage()`.
-
-## Cambios Realizados
-
-### 1. Archivo: `packages/core/src/engine/engine.mts`
-
-#### Cambio 1.1: Eliminación del listener duplicado en el constructor
-**Líneas modificadas**: 51-60
-
-**Antes**:
-```typescript
-constructor(name: string, scope: string = Scope.Engine) {
-  super(name, scope);
-  Engine.instance = this;
-  const channel = Channel.LoadContext;
-  Runtime.onMessage.addListener((
-    message: Message) => {
-    if (channel !== message.channel && message.data.command !== Command.loadContext) return false;
-    this.loadContext = true;
-  });
-}
-```
-
-**Después**:
-```typescript
-constructor(name: string, scope: string = Scope.Engine) {
-  super(name, scope);
-  Engine.instance = this;
-}
-```
-
-**Justificación**: El listener estaba duplicado con el de `_listen()`, violando el principio de responsabilidad única.
-
-#### Cambio 1.2: Centralización del manejo de `loadContext` en `onMessage()`
-**Líneas modificadas**: 68-87
-
-**Añadido**:
-```typescript
-// Handle loadContext command
-if (channel === Channel.LoadContext && command === Command.loadContext) {
-  this.loadContext = true;
-  messageResponse = {
-    channel: Channel.LoadContext,
-    data: {
-      command: Command.loadContext,
-      payload: { status: 'loaded' }
-    }
-  };
-  sendResponse(messageResponse as Message);
-  return;
-}
-```
-
-**Justificación**: Centralizar toda la lógica de mensajes en un solo punto de entrada facilita el mantenimiento y debugging.
-
-### 2. Archivo: `packages/core/test/unit/core/engine-advanced.test.mts`
-
-#### Cambio 2.1: Actualización del test de regresión
-**Líneas modificadas**: 51-63
-
-**Antes**:
-```typescript
-const onMessageListener = mockRuntime.onMessage.addListener.mock.calls[1][0];
-```
-
-**Después**:
-```typescript
-const onMessageListener = mockRuntime.onMessage.addListener.mock.calls.find(
-    call => call[0].length === 3 || call[0].length === 2
-)?.[0];
-```
-
-**Justificación**: El test asumía 2 listeners (índice `[1]`), pero ahora solo hay 1. Se actualiza para buscar el listener correcto dinámicamente.
-
-## Decisiones Técnicas
-
-1. **Preservación del comportamiento**: El manejo de `loadContext` se mantiene idéntico, solo cambia su ubicación.
-2. **Early return**: Se usa un `return` temprano para evitar procesar el resto del switch cuando es un mensaje de `loadContext`.
-3. **Compatibilidad**: No se afecta el `Context` que también usa `_listen()` porque opera en canales diferentes.
-
-## Tests Ejecutados
-
-```bash
-npm run test:unit -- engine --run
-```
-
-**Resultado**:
-```
-✅ Test Files: 25 passed (25)
-✅ Tests: 181 passed (181)
-✅ Duration: 3.29s
-```
-
-## Desviaciones
-Ninguna. La implementación sigue exactamente el plan aprobado.
-
-## Constituciones Validadas
-- ✅ `constitution.modules`: Ciclo de vida preservado, reactividad intacta
-- ✅ `constitution.clean_code`: Eliminación de duplicación, responsabilidad única
-- ✅ `constitution.extensio_architecture`: Jerarquía Core → Engine respetada
-
-## Herramientas Utilizadas
-- Editor de código (manual)
-- Vitest para validación de tests
-
-## Estado
-✅ **COMPLETADO**
-
----
-
-**Implementado por**: module-agent  
-**Supervisado por**: architect-agent  
-**Fecha**: 2026-01-17T16:42:00Z

package/dist/artifacts/17-implementacion-loadshard-external-agnostic--esm/plan.md

@@ -1,188 +0,0 @@
----
-artifact: plan
-phase: phase-3-planning
-owner: architect-agent
-status: draft
-related_task: 17-implementacion-loadshard-external-agnostic--esm
----
-
-# Implementation Plan — 17-Implementación de loadShard External
-
-## 1. Resumen del plan
-- **Contexto**: Implementar la inyección de Shards en páginas externas usando iframes para garantizar aislamiento total, simplificar el Engine unificando sus listeners de mensajes, e innovar con el uso de AI para el auto-dimensionado del iframe.
-- **Resultado esperado**: Un `Engine` refactorizado, un método `loadShard` capaz de inyectar iframes en sitios externos, y Shards capaces de comunicar su tamaño al host.
-- **Alcance**: 
-    - Refactorización de `Core` y `Engine` (listeners de mensajes).
-    - Implementación de la lógica de inyección de Iframe en el `Engine`.
-    - Adaptación del componente base `Shard` para el envío de dimensiones.
-    - Implementación experimental de `AIDriver` para estimación de layout.
-
----
-
-## 2. Inputs contractuales
-- **Task**: `.agent/artifacts/17-implementacion-loadshard-external-agnostic--esm/task.md`
-- **Analysis**: `.agent/artifacts/17-implementacion-loadshard-external-agnostic--esm/analysis.md`
-- **Acceptance Criteria**: 
-    - AC1: Iframe ESM multi-browser.
-    - AC2: Aislamiento total vía Iframe.
-    - AC3: Prefijo `extensio-`.
-    - AC4: Refactorización Engine.
-    - AC5: AI Layout Estimation.
-
-**Dispatch de dominios (OBLIGATORIO si aplica)**
-```yaml
-plan:
-  workflows:
-    drivers:
-      action: none
-      workflow: none
-
-  dispatch:
-    - domain: core
-      action: refactor
-      workflow: workflow.tasklifecycle-long
-    - domain: modules
-      action: refactor
-      workflow: workflow.tasklifecycle-long
-    - domain: surfaces
-      action: refactor
-      workflow: workflow.tasklifecycle-long
-    - domain: qa
-      action: verify
-      workflow: workflow.tasklifecycle-long
-```
-
----
-
-## 3. Desglose de implementación (pasos)
-
-### Paso 1: Refactorización del Engine (AC4)
-- **Descripción**: Eliminar el listener de `Runtime.onMessage` del constructor de `Engine` y unificar todo en `_listen` -> `onMessage`. Asegurar que `loadContext` se maneje de forma normalizada.
-- **Dependencias**: Ninguna.
-- **Entregables**: `packages/core/src/engine/engine.mts` refactorizado.
-- **Agente responsable**: architect-agent.
-
-### Paso 2: Implementación de Iframe Container en loadShard (AC1, AC2, AC3)
-- **Descripción**: Modificar `loadShard` para detectar si el target es externo. Si lo es, crear un elemento iframe con prefijo `extensio-`, inyectarlo en el DOM y cargar el recurso de la extensión.
-- **Dependencias**: Paso 1.
-- **Entregables**: Lógica de inyección en `Engine`.
-- **Agente responsable**: module-agent.
-
-### Paso 3: Shard Auto-Resize & Communication (AC5)
-- **Descripción**: Actualizar la clase base `Shard` para que, al montarse, implemente un `ResizeObserver` que envíe mensajes de `resize` al Engine mediante `postMessage`.
-- **Dependencias**: Paso 2.
-- **Entregables**: `packages/core/src/surfaces/shard.mts` actualizado.
-- **Agente responsable**: surface-agent.
-
-### Paso 4: AI Layout Estimation (AC5)
-- **Descripción**: Implementar un helper/driver experimental que use la Prompt API de Chrome/Google Extensio para predecir el tamaño inicial del Shard basado en su esquema CSS y enviarlo al iframe antes de la inyección.
-- **Dependencias**: Paso 3.
-- **Entregables**: `AIDriver` o helper de estimación.
-- **Agente responsable**: architect-agent / module-agent.
-
-### Paso 5: Creación de la Demo y Scripts de Test (AC1-AC5) (NUEVO)
-- **Descripción**: Crear una carpeta `demo` en `packages/core/demo` que actúe como una extensión funcional. Incluirá un Engine de prueba y un Shard para verificar la inyección en dominios externos. Eliminar cualquier residuo de demos previas si existen.
-- **Dependencias**: Paso 4.
-- **Entregables**: Scaffolding de demo en `packages/core/demo`.
-- **Agente responsable**: surface-agent / qa-agent.
-
-### Paso 6: Configuración de Scripts de Testing (AC1-AC5) (NUEVO)
-- **Descripción**: Añadir scripts a `packages/core/package.json` para facilitar las pruebas:
-    - `demo:manual`: `extensio build --targetPath ./demo --loadBrowser chrome --watch`
-    - `demo:automation`: `playwright test test/e2e --project chromium`
-- **Dependencias**: Paso 5.
-- **Entregables**: `package.json` actualizado con los nuevos scripts.
-- **Agente responsable**: qa-agent.
-
-### Paso 7: Verificación E2E con Playwright (AC1-AC5)
-- **Descripción**: Implementar los tests E2E en `packages/core/test/e2e` que utilicen la demo compilada para inyectar shards en páginas externas y verificar el auto-resize y ESM.
-- **Dependencias**: Paso 6.
-- **Entregables**: Suite de tests E2E funcional.
-- **Agente responsable**: qa-agent.
-
----
-
-## 4. Asignación de responsabilidades (Agentes)
-
-- **Architect-Agent**
-  - Refactorización del Core/Engine. Diseño del protocolo de comunicación Iframe-Host.
-- **Module-Agent**
-  - Lógica de inyección en `loadShard`. Implementación del AI Prediction helper.
-- **Surface-Agent**
-  - Adaptación de la clase `Shard` (ResizeObserver). Creación del Shard de demo.
-- **QA / Verification-Agent**
-  - Creación de la infra de demo, configuración de scripts en `package.json` y desarrollo de tests E2E.
-
----
-
-## 5. Estrategia de testing y validación
-
-- **Unit tests**: 
-  - Validar que `Engine.onMessage` recibe y procesa correctamente todos los comandos tras la refactorización.
-- **Integration tests**: 
-  - Simular la inyección de un Iframe y verificar el flujo de mensajes `resize`.
-- **E2E / Manual**: 
-  - **Prueba Manual**: Ejecutar `npm run demo:manual` y verificar visualmente la inyección en una página externa.
-  - **Prueba Automática**: Ejecutar `npm run demo:automation` para validar regresiones en el flujo de inyección y resize.
-
----
-
-## 6. Plan de demo
-- **Objetivo de la demo**: Mostrar un Shard flotante inyectado en un dominio externo que se ajusta automáticamente a su contenido usando Iframe.
-- **Escenario(s)**: Navegación a un dominio externo (ej. google.com o wikipedia.org), ejecución de `loadShard` y verificación del comportamiento.
-- **Componentes**:
-    - `DemoEngine`: Orquesta la carga.
-    - `DemoShard`: Componente visual que cambia de tamaño dinámicamente.
-- **Criterios de éxito**: 
-    - El Shard se renderiza en un Iframe aislado.
-    - El Iframe cambia de tamaño según el contenido del Shard.
-    - Sin errores de CSP o ESM en consola.
-
----
-
-## 7. Estimaciones y pesos de implementación
-- **Paso 1**: Bajo (Refactorización).
-- **Paso 2**: Medio (Lógica de inyección).
-- **Paso 3**: Medio (Comunicación cross-origin).
-- **Paso 4**: Alto (Investigación AI/Prompt API).
-- **Paso 5, 6, 7**: Medio (Demo & Testing Infra).
-
----
-
-## 8. Puntos críticos y resolución
-
-- **Punto crítico 1: Comunicación postMessage**
-  - Riesgo: Seguridad. Recibir mensajes de cualquier origen.
-  - Resolución: Validar siempre que el mensaje provenga de nuestra propia extensión verificando `event.origin`.
-
-- **Punto crítico 2: Resize dinámico del Iframe**
-  - Riesgo: Layout shift agresivo.
-  - Resolución: Uso de la AI para estimar el tamaño inicial y transiciones suaves de CSS para el ajuste final.
-
----
-
-## 9. Dependencias y compatibilidad
-- **Chrome / Chromium**: Soporte completo para ESM e Iframe.
-- **Firefox**: Soporte para Iframe con ESM interno (ventaja de nuestra arquitectura).
-- **Safari**: Compatible con la estrategia de Iframe.
-
----
-
-## 10. Criterios de finalización
-- [ ] Engine refactorizado y unificado.
-- [ ] Demo funcional en `packages/core/demo`.
-- [ ] Scripts `demo:manual` y `demo:automation` operativos.
-- [ ] Tests E2E pasando en Chromium.
-- [ ] Auto-resize validado con AI.
-
----
-
-## 11. Aprobación del desarrollador (OBLIGATORIA)
-
-```yaml
-approval:
-  developer:
-    decision: PENDING
-    date: null
-    comments: null
-```

package/dist/artifacts/17-implementacion-loadshard-external-agnostic--esm/qa-agent/activation-demo-build.md

@@ -1,80 +0,0 @@
----
-artifact: agent-activation
-phase: phase-5-verification
-activated_agent: qa-agent
-activated_by: architect-agent
-activation_date: 2026-01-17T17:38:00Z
----
-
-# Agent Activation — Validate Demo Build
-
-## Agente Activado
-🛡️ **qa-agent**
-
-## Contexto
-El module-agent ha corregido la estructura de la demo. Ahora se requiere validar que la build funciona correctamente tanto en modo manual como automático.
-
-## Responsabilidades Asignadas
-
-### 1. Validar Build Manual
-Ejecutar:
-```bash
-cd packages/core
-npm run demo:manual
-```
-
-**Validaciones**:
-- [ ] La build completa sin errores
-- [ ] Se genera `demo/dist/chrome/`
-- [ ] El manifest.json se copia correctamente
-- [ ] Los archivos `.mts` se compilan a `.mjs`
-- [ ] Chrome se lanza con la extensión cargada (si `--loadBrowser` está activo)
-
-### 2. Validar Build Automática
-Ejecutar:
-```bash
-cd packages/core
-ext build --targetPath ./demo --browsers chrome
-```
-
-**Validaciones**:
-- [ ] La build completa sin errores
-- [ ] Se genera `demo/dist/chrome/manifest.json`
-- [ ] `service.worker.mts` → `dist/chrome/service.worker.mjs`
-- [ ] `popup.mts` → `dist/chrome/popup.mjs`
-- [ ] `demo-shard.mts` → `dist/chrome/demo-shard.mjs`
-- [ ] `popup.html` se copia correctamente
-
-### 3. Validar Funcionalidad (Si la build es exitosa)
-- [ ] Cargar la extensión manualmente en Chrome desde `demo/dist/chrome/`
-- [ ] Verificar que el popup se abre
-- [ ] Navegar a una página externa (ej. Wikipedia)
-- [ ] Click en "Inyectar Shard"
-- [ ] Verificar que el Shard aparece en un iframe
-- [ ] Verificar que el Shard crece automáticamente
-
-### 4. Reportar Resultados
-Crear informe con:
-- Resultado de build manual (✅ o ❌)
-- Resultado de build automática (✅ o ❌)
-- Logs de errores (si los hay)
-- Screenshots o evidencia visual (si aplica)
-
-## Criterios de Validación
-- ✅ **PASS**: Ambas builds completan sin errores
-- ⚠️ **PARTIAL**: Una build funciona, la otra falla
-- ❌ **FAIL**: Ambas builds fallan
-
-## Entregable Esperado
-- `qa-agent/demo-build-validation.md`
-
-## Restricciones
-- **SÍ** ejecutar las builds
-- **SÍ** reportar todos los errores encontrados
-- **NO** modificar código de la demo (solo reportar issues)
-
----
-
-**Activado por**: 🏛️ architect-agent  
-**Fecha**: 2026-01-17T17:38:00Z  
-**Estado**: ACTIVO

package/dist/artifacts/17-implementacion-loadshard-external-agnostic--esm/qa-agent/activation-phase-5.md

@@ -1,73 +0,0 @@
----
-artifact: agent-activation
-phase: phase-5-verification
-activated_agent: qa-agent
-activated_by: architect-agent
-activation_date: 2026-01-17T17:28:00Z
----
-
-# Agent Activation — Phase 5: Verification
-
-## Agente Activado
-🛡️ **qa-agent**
-
-## Contexto
-La implementación ha sido completada y aprobada por el architect-agent. Ahora se requiere verificación completa mediante tests para confirmar que:
-1. Los tests unitarios existentes siguen pasando
-2. La demo es funcional
-3. No hay regresiones
-
-## Responsabilidades Asignadas
-
-### 1. Ejecutar Tests Unitarios
-- Ejecutar `npm run test:unit` en `packages/core`
-- Verificar que los 181 tests siguen pasando
-- Reportar cualquier regresión
-
-### 2. Validar la Demo (Manual)
-- Compilar la demo con `npm run demo:manual`
-- Verificar que la extensión carga correctamente
-- Confirmar que el popup es funcional
-- Validar que la inyección de Shards funciona
-
-### 3. Ejecutar Tests E2E (Opcional)
-- Si la demo compila correctamente, ejecutar `npm run demo:automation`
-- Reportar resultados de los 3 tests E2E
-
-### 4. Crear Informe de Verificación
-- Documentar todos los resultados
-- Incluir métricas (tests pasados/fallados, cobertura si aplica)
-- Reportar cualquier issue detectado
-
-## Criterios de Validación
-
-### Tests Unitarios
-- [ ] 181/181 tests pasando
-- [ ] Sin errores de TypeScript
-- [ ] Sin warnings críticos
-
-### Demo
-- [ ] Compilación exitosa
-- [ ] Extensión carga en Chrome
-- [ ] Popup se abre correctamente
-- [ ] Inyección de Shard funcional
-- [ ] Auto-resize observable
-
-### Tests E2E (Opcional)
-- [ ] Test 1: Inyección y auto-resize (PASS)
-- [ ] Test 2: Aislamiento de estilos (PASS)
-- [ ] Test 3: Carga ESM (PASS)
-
-## Entregable Esperado
-- `qa-agent/verification.md`
-
-## Restricciones
-- **SÍ** ejecutar todos los tests
-- **SÍ** reportar cualquier fallo, por mínimo que sea
-- **NO** modificar código de implementación (solo tests si es necesario)
-
----
-
-**Activado por**: 🏛️ architect-agent  
-**Fecha**: 2026-01-17T17:28:00Z  
-**Estado**: ACTIVO

package/dist/artifacts/17-implementacion-loadshard-external-agnostic--esm/qa-agent/activation-subtask-5-7.md

@@ -1,97 +0,0 @@
----
-artifact: agent-activation
-phase: phase-4-implementation
-subtask_id: 5-7
-activated_agent: qa-agent
-activated_by: architect-agent
-activation_date: 2026-01-17T17:21:00Z
----
-
-# Agent Activation — Subtasks 5-7: Demo & Testing Infrastructure
-
-## Agente Activado
-🧪 **qa-agent**
-
-## Contexto
-Según el plan aprobado, se requiere crear la infraestructura de demo y testing para validar la inyección de Shards en páginas externas mediante iframes.
-
-## Responsabilidades Asignadas
-
-### Paso 5: Creación de la Demo
-- Crear `packages/core/demo/` con estructura de extensión funcional
-- Implementar `DemoEngine` que orqueste la carga de Shards
-- Crear `DemoShard` que cambie de tamaño dinámicamente para probar auto-resize
-- Eliminar cualquier demo previa si existe
-
-### Paso 6: Configuración de Scripts
-- Añadir a `packages/core/package.json`:
-  - `demo:manual`: Para pruebas manuales con watch mode
-  - `demo:automation`: Para tests E2E automatizados
-
-### Paso 7: Tests E2E con Playwright
-- Crear suite de tests en `packages/core/test/e2e/`
-- Validar inyección de Shards en páginas externas
-- Verificar auto-resize del iframe
-- Confirmar aislamiento CSS/JS
-- Validar ESM funcional en Chrome y Firefox
-
-## Constituciones Aplicables
-- `constitution.extensio_architecture` (estructura de demo, testing)
-- `roles/qa.md` (estrategia de testing, responsabilidad exclusiva)
-- Plan aprobado (secciones 5, 6, 7)
-
-## Herramientas Obligatorias
-- **Demo**: `mcp_extensio-cli tools` (extensio_demo)
-- **Build**: `mcp_extensio-cli tools` (extensio_build)
-- **Tests**: Playwright (según constitution)
-
-## Criterios de Validación
-
-### Demo (Paso 5)
-- [ ] Estructura de demo creada con `extensio_demo`
-- [ ] `DemoEngine` funcional
-- [ ] `DemoShard` con contenido dinámico
-- [ ] Manifest.json configurado correctamente
-
-### Scripts (Paso 6)
-- [ ] `npm run demo:manual` compila y lanza Chrome
-- [ ] `npm run demo:automation` ejecuta tests E2E
-
-### Tests E2E (Paso 7)
-- [ ] Test: Inyección de Shard en página externa
-- [ ] Test: Auto-resize del iframe
-- [ ] Test: Aislamiento CSS (estilos de host no afectan Shard)
-- [ ] Test: ESM funcional (Shard carga correctamente)
-- [ ] Todos los tests pasan en Chromium
-
-## Acceptance Criteria Cubiertos
-- AC1: Iframe ESM multi-browser
-- AC2: Aislamiento total vía Iframe
-- AC3: Prefijo `extensio-`
-- AC4: Refactorización Engine (ya validado)
-- AC5: Auto-resize (sin AI, mediante ResizeObserver)
-
-## Entregables Esperados
-- `qa-agent/subtask-5-7-implementation.md`
-- `packages/core/demo/` (estructura completa)
-- `packages/core/package.json` (scripts añadidos)
-- `packages/core/test/e2e/shard-injection.spec.ts` (o similar)
-
-## Restricciones
-- **NO** ejecutar tests que no sean E2E (los unitarios ya pasaron)
-- **SÍ** usar `mcp_extensio-cli tools` para crear la demo
-- **SÍ** validar que la demo sigue la arquitectura Extensio
-
-## Escenario de Demo Sugerido
-1. Extensión cargada en Chrome
-2. Navegación a `https://wikipedia.org`
-3. Click en botón de la extensión (popup o content script)
-4. Se inyecta un Shard flotante en la página
-5. El Shard muestra contenido dinámico (ej. contador, formulario)
-6. El iframe se ajusta automáticamente al contenido
-
----
-
-**Activado por**: 🏛️ architect-agent  
-**Fecha**: 2026-01-17T17:21:00Z  
-**Estado**: ACTIVO