┌─────────────────────────────────────────────────────────────┐
│                    Browser IDE (Monaco Editor)              │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      │
│  │ Code Editor  │  │ Agent Panel  │  │  Consensus   │      │
│  │  (Monaco)    │  │  (Swarm)     │  │  (Byzantine) │      │
│  └──────────────┘  └──────────────┘  └──────────────┘      │
└─────────────────────────────────────────────────────────────┘
                           ↓ WebSocket (JSON-RPC 2.0)
┌─────────────────────────────────────────────────────────────┐
│              Node.js Bridge (server-real.js)                │
│  • HTTP server for static files                             │
│  • WebSocket server for real-time communication             │
│  • Code execution sandbox                                   │
│  • MCP command routing                                      │
└─────────────────────────────────────────────────────────────┘
                           ↓ stdio (JSON-RPC 2.0)
┌─────────────────────────────────────────────────────────────┐
│         Claude Flow MCP Server (npx claude-flow mcp)        │
│  • 90+ MCP tools                                            │
│  • Swarm orchestration                                      │
│  • Agent management                                         │
│  • Consensus verification                                   │
└─────────────────────────────────────────────────────────────┘

cd /workspaces/claude-code-flow/examples/browser-dashboard

# Start the real MCP integration server
node server-real.js

// Example: Spawn agents via MCP
async function spawnResearchAgent() {
    const result = await sendMCPCommand('agent_spawn', {
        type: 'researcher',
        name: 'Browser-Researcher-1',
        capabilities: ['web-search', 'data-analysis']
    });

    console.log('Agent spawned:', result);
    return result;
}

// Example: Run consensus verification
async function verifyConsensus() {
    const result = await sendMCPCommand('verify_consensus', {
        agent_public_keys: Array(20).fill('pk_' + Date.now()),
        consensus_threshold: 0.65
    });

    console.log('Consensus result:', result);
    return result;
}

// Test the functions
spawnResearchAgent();

// Spawn agents
await sendMCPCommand('agent_spawn', {
    type: 'researcher' | 'coder' | 'analyst' | 'optimizer' | 'coordinator',
    name: 'AgentName',
    capabilities: ['capability1', 'capability2']
});

// Get swarm status
await sendMCPCommand('swarm_status', {});

// Orchestrate tasks
await sendMCPCommand('task_orchestrate', {
    task: 'Task description',
    strategy: 'parallel' | 'sequential' | 'adaptive'
});

// Query control
await sendMCPCommand('query_control', {
    action: 'pause' | 'resume' | 'terminate',
    queryId: 'query_id'
});

// Verify consensus (agentic-payments)
await sendMCPCommand('verify_consensus', {
    agent_public_keys: ['pk1', 'pk2', ...],
    consensus_threshold: 0.65
});

// Spawn multiple agents in parallel
const agents = await sendMCPCommand('agents_spawn_parallel', {
    agents: [
        { type: 'researcher', name: 'Researcher-1' },
        { type: 'coder', name: 'Coder-1' },
        { type: 'tester', name: 'Tester-1' }
    ],
    maxConcurrency: 3
});

console.log('Agents spawned:', agents);

// Check swarm status
const status = await sendMCPCommand('swarm_status', {});
console.log('Swarm status:', status);

// Orchestrate a research task
const result = await sendMCPCommand('task_orchestrate', {
    task: 'Research best practices for distributed consensus in AI systems',
    strategy: 'adaptive',
    priority: 'high',
    maxAgents: 5
});

console.log('Task orchestration:', result);

// Generate 20 agent public keys
const agentKeys = Array.from({ length: 20 }, (_, i) =>
    `agent_pk_${Date.now()}_${i}`
);

// Verify consensus for $50K payment
const consensus = await sendMCPCommand('verify_consensus', {
    message: 'approve_vendor_payment_50k',
    signature: 'sig_' + Date.now(),
    public_key: 'main_pk_' + Date.now(),
    agent_public_keys: agentKeys,
    consensus_threshold: 0.65  // 13 of 20 required
});

console.log('Consensus result:', consensus);
console.log('Byzantine secure:', consensus.byzantine_fault_tolerance.is_byzantine_secure);

# Check console for CORS errors
# Verify CDN access: https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/

// Increase timeout in sendMCPCommand
await sendMCPCommand('task_orchestrate', {
    task: 'Long running task',
    timeout: 10000  // 10 seconds
});

# Check if server is running
ps aux | grep "claude-flow mcp"

# Restart server
pkill -f "node server-real.js"
node server-real.js

# Check if port 8080 is available
lsof -i :8080

# Try different port
PORT=8081 node server-real.js

monaco.editor.create(element, {
    value: code,
    language: 'javascript',
    theme: 'vs-dark',
    automaticLayout: true,
    fontSize: 13,
    minimap: { enabled: true },
    scrollBeyondLastLine: false,
    renderWhitespace: 'selection',
    lineNumbers: 'on',
    folding: true,
    bracketPairColorization: { enabled: true }
});

const sandbox = {
    console: {
        log: (...args) => {
            // Send output to WebSocket
        }
    },
    sendMCPCommand: (cmd, params) => {
        // Forward to real MCP server
        // Return Promise for async/await
    }
};

const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor;
const fn = new AsyncFunction('console', 'sendMCPCommand', userCode);
await fn(sandbox.console, sandbox.sendMCPCommand);