Web Playground Interactivo

Estudio de inyección de lógica en tiempo real con telemetría de fuel AST, economía de tokens y verificación de pruebas criptográficas

El LIOP Web Playground es un estudio interactivo de inyección de lógica y consola de pruebas para navegadores web. Se conecta directamente a la malla descentralizada y permite ejecutar micro-módulos WebAssembly de forma inmediata, visualizar en tiempo real el pipeline criptográfico y consultar telemetría granular de recursos.

​

Puesta en Marcha de LIOP Studio y Web Playground

LIOP proporciona dos entornos complementarios para desarrolladores: el paquete oficial LIOP Studio (@nekzus/liop-studio) y el Web Playground embebido:

LIOP Studio (Paquete NPM :16000)

# Iniciar el estudio oficial apuntando a un endpoint MCP/LIOP en ejecución
npx @nekzus/liop-studio --http "http://localhost:3000/mcp"

# Acceder a la consola del estudio desde el navegador:
# http://localhost:16000

---

​

Capacidades Principales del Estudio

​

1. Panel de Resultados en Cuatro Pestañas

La consola organiza los datos de ejecución en cuatro componentes React modulares:

• Output (OutputTab): Resultado JSON estructurado devuelto por el enclave de origen tras la agregación in-situ. Incluye el hash de atestación ZK-Receipt HMAC-SHA256 y copiado con un clic.
• Debug (DebugTab): Inspector de payloads crudos que muestra cabeceras de solicitud/respuesta, envolvente JSON-RPC, desglose de tiempos de ejecución (Descubrimiento de Ruta → ML-KEM-768 → AES-256-GCM → WASI Sandbox → ZK-Receipt), veredicto del Escudo Egress PII (PASSED / INTERCEPTED) y el secreto de sesión post-cuántico activo.
• Telemetry (TelemetryTab):
  • Economía de Tokens frente a MCP: Comparación lado a lado de tokens BPE consumidos (o200k_base) contra los ~16.000–48.000 tokens requeridos por MCP context-pulling tradicional.
  • Consumo de Fuel WASI: Fuel determinista consumido a nivel de instrucción AST (ej. 500 u / 1.000.000 máx) con Cuantización en Bloques de 100 Unidades según NIST SP 800-53 para eliminar canales laterales de temporización.
  • Soberanía del Cable: Bytes físicos transmitidos vs bytes retenidos in-situ (>99.6% reducción de tráfico).
• Export (ExportTab): Snippets de código ejecutable generados automáticamente para reproducir la consulta actual en TypeScript (SDK @nekzus/liop), cURL y Python. Cada snippet incluye el endpoint resuelto, cabeceras de autenticación y payload lógico exacto.

---

​

2. Resolución de Token OAuth 2.1

Al apuntar a enclaves Tier 1 o Tier 2 detrás del Border LIO Gateway (BLG), el playground resuelve automáticamente tokens de acceso Bearer mediante credenciales de cliente RFC 6749 contra el proveedor OIDC de Nexus (/oidc/token). Los tokens se cachean en memoria con un margen de seguridad de 30 segundos antes de expires_in para evitar errores HTTP 401 durante secuencias rápidas de consulta.

---

​

3. Estimador de Tokens en Vivo y Sincronización Bidireccional

• Estadísticas en el Editor de Código: El pie del editor calcula dinámicamente los tokens BPE estimados (~141 tokens (est.)) y muestra el límite de fuel asignado (1.000.000 u máx).
• Sincronización Bidireccional: Al seleccionar una plantilla se actualiza la capacidad objetivo; al elegir una herramienta se carga su plantilla canónica. Esto previene errores de esquema y rechazos de payload entre dominios.

---

​

4. Tematización Dinámica de Alto Contraste

El playground permite alternar atómicamente entre temas visuales sin conflictos de especificidad CSS:

• Obsidian OLED: Superficies de negro puro (#000000) optimizadas para entornos con poca luz y pantallas OLED.
• Slate Navy: Superficies corporativas en azul pizarra (#0f172a) de alto contraste y legibilidad.

---

​

API REST de Telemetría

El servidor del playground expone un endpoint REST para consultar métricas agregadas de sesión:

curl http://localhost:16000/api/telemetry

​

Ejemplo de Respuesta JSON

{
  "session": {
    "sessionId": "79f3d3bf-c9e5-4996-9b70-14641c50c1f7",
    "operations": [
      {
        "type": "tool_call",
        "method": "tools/call",
        "estimatedInputTokens": 62,
        "estimatedOutputTokens": 356,
        "toolName": "Analyze_Synthetic_Bank_Transactions",
        "durationMs": 609,
        "timestamp": 1788537457801
      }
    ],
    "totalInputTokens": 62,
    "totalOutputTokens": 356,
    "estimatorName": "o200k_base",
    "sessionUptimeMs": 40083
  },
  "perTool": {
    "Analyze_Synthetic_Bank_Transactions": {
      "input": 62,
      "output": 356,
      "calls": 1,
      "avgDurationMs": 609
    }
  },
  "timestamp": 1788537464700
}