class ArchitectureDiagram extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

The Brain

Local LLM orchestrator scoring and routing code candidates with zero heavy generation.

JSON Only IO Format

Async Processing

The Muscle

Cloud LLM workers generating high-volume, parallel code in AST-compliant format.

5-10x Parallel

Stateless Workers

Nervous System

Redis Pub/Sub queues implementing the hot event loop for async decoupling.

Pub/Sub Pattern

Real-time Events

Long-Term Memory

Neo4j verification graph storing only successful state transitions.

Verified Only

Graph DB Storage

`; // Add event listeners to components setTimeout(() => { this.shadowRoot.querySelectorAll('.component').forEach(component => { component.addEventListener('click', () => { const compType = component.getAttribute('data-component'); this.showComponentDetails(compType); }); }); // Replace feather icons if (window.feather) { feather.replace(); } }, 100); } showComponentDetails(componentType) { const details = { 'brain': { title: 'The Brain - Orchestrator', description: 'Local LLM responsible for verification, scoring, and routing. Works only with summarized state objects to maintain context economy.', attributes: ['Zero heavy generation', 'JSON-in/JSON-out only', 'Hot state processing', 'Promote/Prune/Spawn decisions'] }, 'muscle': { title: 'The Muscle - Workers', description: 'Stateless cloud LLM functions that receive Task Specs and return raw AST-compliant code or diffs.', attributes: ['Parallel execution (5-10 workers)', 'No memory of graph', 'High-volume generation', 'Stateless functions'] }, 'nervous': { title: 'Nervous System - Redis', description: 'Implements the Hot Event Loop using Pub/Sub queues to decouple orchestrator from workers.', attributes: ['queue:tasks for pending jobs', 'queue:results for candidates', 'Fully async processing', 'Context summarization'] }, 'memory': { title: 'Long-Term Memory - Neo4j', description: 'Stores the Verification Graph containing only verified state transitions that pass tests/compiles.', attributes: ['Nodes = Verified states', 'Edges = Derivation paths', 'No failed attempts', 'Prevents graph bloat'] } }; const detail = details[componentType]; if (detail) { const alertHtml = ` ${detail.title}

${detail.description}

Key Attributes:
${detail.attributes.map(attr => `• ${attr}`).join('
')} `; alert(alertHtml); } } } customElements.define('architecture-diagram', ArchitectureDiagram);