Interactive Web Playground

Real-time logic injection studio with AST fuel telemetry, token economy comparison, and cryptographic proof verification

The LIOP Web Playground is an interactive, browser-based logic injection studio and testing console. It connects directly to the decentralized mesh, providing instant execution of WebAssembly micro-modules, real-time cryptographic pipeline visualization, and fine-grained resource telemetry.

Launching LIOP Studio & Web Playground

LIOP provides two complementary developer environments: the official LIOP Studio package (@nekzus/liop-studio) and the embedded Web Playground:

LIOP Studio (NPM Package :16000)

# Launch official studio targeting a running MCP/LIOP endpoint
npx @nekzus/liop-studio --http "http://localhost:3000/mcp"

# Access the studio console in your browser:
# http://localhost:16000

---

Key Studio Features

1. Four-Tab Results Panel

The output console organizes execution data into four modular React components:

• Output (OutputTab): Structured JSON result returned by the origin enclave after in-situ aggregation. Includes the ZK-Receipt HMAC-SHA256 attestation hash and one-click copy.
• Debug (DebugTab): Raw payload inspector showing request/response headers, JSON-RPC envelope, execution timing breakdowns (Route Discovery → ML-KEM-768 → AES-256-GCM → WASI Sandbox → ZK-Receipt), Egress PII Shield verdict (PASSED / INTERCEPTED), and the active post-quantum session secret.
• Telemetry (TelemetryTab):
  • Token Economy vs MCP: Side-by-side comparison of BPE tokens consumed (o200k_base) against the ~16,000–48,000 tokens required by traditional MCP context-pulling.
  • WASI Fuel Metering: Deterministic instruction-level fuel consumed (e.g. 500 u / 1,000,000 max) with 100-Unit Bucket Quantization per NIST SP 800-53 to eliminate timing side-channels.
  • Wire Sovereignty: Physical bytes transmitted vs bytes retained in-situ (>99.6% wire traffic reduction).
• Export (ExportTab): Auto-generated executable code snippets for reproducing the current query in TypeScript (@nekzus/liop SDK), cURL, and Python. Each snippet includes the resolved endpoint, authentication headers, and exact logic payload.

---

2. OAuth 2.1 Token Resolver

When targeting Tier 1 or Tier 2 enclaves behind the Border LIO Gateway (BLG), the playground automatically resolves Bearer access tokens via RFC 6749 client credentials against the Nexus OIDC provider (/oidc/token). Tokens are cached in memory with a 30-second safety margin before expires_in to prevent HTTP 401 errors during rapid query sequences.

---

3. Live Token Estimator & Bidirectional Synchronization

• Live Editor Stats: The code editor footer dynamically estimates BPE tokens (~141 tokens (est.)) and displays the active fuel limit (1,000,000 max).
• Bidirectional Synchronization: Selecting a template updates the target capability; selecting a capability loads its canonical template. This prevents schema mismatch errors and cross-domain payload rejections.

---

4. High-Contrast Dynamic Theming

The playground supports atomic, high-contrast theme toggling via document.documentElement without CSS specificity conflicts:

• Obsidian OLED: Pure OLED black (#000000) surfaces optimized for low-light environments and OLED displays.
• Slate Navy: Modern deep navy/slate surfaces (#0f172a) with high readability.

---

Telemetry REST API

The playground server exposes an aggregated telemetry endpoint providing session statistics and per-tool breakdowns:

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

Example Response

{
  "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
}