web-agent-bridge 2.2.0 → 2.3.0

package/README.ar.md

@@ -43,6 +43,13 @@
 - **تبديل عقل الوكيل** — بدّل بين Llama 3، GPT-4، Claude، Gemini، Mistral، أو Ollama (محلي) بدون إعادة إعداد
 - **تنسيق الوكيل عبر المواقع** — وكيل واحد يدير عدة مواقع WAB في نفس الوقت عبر `WABMultiAgent`. قارن الأسعار بين المتاجر، اجمع البيانات، نفّذ إجراءات متوازية، واعثر على أفضل صفقة تلقائياً
 
+### الإصدار 2.3 — شبكة الوكلاء الخاصة (العقل الموزّع)
+
+- **بروتوكول التواصل بين الوكلاء** — الوكلاء يتواصلون عبر شبكة خاصة مع ٥ قنوات مدمجة (تنبيهات، اكتشافات، تكتيكات، مفاوضات، تصويت). مشاركة المعرفة في الوقت الفعلي مع تقييم الثقة ورسائل منتهية الصلاحية تلقائياً
+- **التعلم المعزز المحلي** — الوكلاء يتعلمون من كل قرار للمستخدم باستخدام خوارزمية UCB1 متعددة الأذرع، تحديث السياسات بالنزول التدريجي، واستخراج أنماط السلوك. بدون أي مكالمات API خارجية — التعلم بالكامل محلي
+- **منسق السيمفونية** — أربعة وكلاء متخصصين (باحث، محلل، مفاوض، حارس) يتعاونون ذاتياً عبر محركات قائمة على القواعد. ٥ قوالب، خط أنابيب من ٦ مراحل، حق نقض الحارس للقرارات الأمنية، إجماع مرجح. بدون أي اعتماد على نماذج LLM خارجية
+- **لوحة شبكة الوكلاء** — عرض مباشر لشبكة الوكلاء: الوكلاء النشطون، قنوات الاتصال، قاعدة المعرفة المشتركة، تركيبات السيمفونية، ومقاييس أداء التعلم
+
 ---
 
 ## 🚀 البدء السريع

package/README.md

@@ -67,6 +67,13 @@ WAB is an open-source middleware layer that bridges AI agents and websites — l
 - **AI Brain Swapping** — Switch between Llama 3, GPT-4, Claude, Gemini, Mistral, or Ollama (local) without reconfiguration
 - **Cross-Site Agent Orchestration** — One agent manages multiple WAB-enabled sites simultaneously via `WABMultiAgent`. Compare prices across stores, aggregate data, run parallel actions, and find the best deal automatically
 
+### v2.3 — Private Agent Mesh (Distributed Mind)
+
+- **Inter-Agent Protocol** — Agents communicate through a private mesh with 5 built-in channels (alerts, discoveries, tactics, negotiations, votes). Real-time knowledge sharing with confidence scoring and auto-expiring messages
+- **Local Reinforcement Learning** — Agents learn from every user decision using UCB1 multi-armed bandit action selection, gradient-descent policy updates, and behavioral pattern mining. Zero external API calls — all learning is local
+- **Symphony Orchestrator** — Four specialized agents (Researcher, Analyst, Negotiator, Guardian) collaborate autonomously through rule-based engines. 5 templates, 6-phase pipeline, Guardian veto for safety, weighted consensus. No external LLM dependency
+- **Agent Mesh Dashboard** — Real-time visualization of your agent mesh: active agents, communication channels, shared knowledge base, symphony compositions, and learning performance metrics
+
 ---
 
 ## Quick Start

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "web-agent-bridge",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Open-source middleware that bridges AI agents and websites — providing a standardized command interface for intelligent automation",
   "main": "server/index.js",
   "bin": {

package/public/index.html

@@ -26,6 +26,7 @@
         <li><a href="#how-it-works">How It Works</a></li>
         <li><a href="#pricing">Pricing</a></li>
         <li><a href="#v2-features">v2.0</a></li>
+        <li><a href="#agent-mesh">Agent Mesh</a></li>
         <li><a href="/docs">Docs</a></li>
       </ul>
       <div class="navbar-actions">
@@ -242,6 +243,57 @@
     </div>
   </section>
 
+  <!-- ═══════════ PRIVATE AGENT MESH ═══════════ -->
+  <section class="section" id="agent-mesh">
+    <div class="container">
+      <div class="section-header">
+        <span class="label" style="background: rgba(139,92,246,0.15); color: #8b5cf6;">v2.3 — Distributed Mind</span>
+        <h2>Private Agent Mesh</h2>
+        <p>Agents communicate, learn, and orchestrate autonomously — zero external LLM dependency. Your private fortress now has a distributed intelligence layer.</p>
+      </div>
+
+      <div class="grid-3">
+        <div class="card fade-in" style="border-left: 3px solid #8b5cf6;">
+          <div class="card-icon purple">🕸️</div>
+          <h3>Inter-Agent Protocol</h3>
+          <p>Agents communicate through a private mesh — sharing discoveries, broadcasting alerts, and exchanging tactics in real-time. 5 built-in channels: alerts, discoveries, tactics, negotiations, votes.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Real-time agent-to-agent messaging</li>
+            <li>Shared knowledge base with confidence scoring</li>
+            <li>Priority-based message routing</li>
+            <li>Auto-expiring messages with TTL</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #10b981;">
+          <div class="card-icon green">🧠</div>
+          <h3>Local Reinforcement Learning</h3>
+          <p>Agents learn from every user decision — accepted, rejected, or modified. Multi-armed bandit action selection, gradient-descent policy updates, and behavioral pattern mining. All local, zero tokens consumed.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>UCB1 multi-armed bandit for action selection</li>
+            <li>Sigmoid prediction with gradient descent</li>
+            <li>Behavioral sequence pattern mining</li>
+            <li>Bayesian confidence estimation</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #f59e0b;">
+          <div class="card-icon orange">🎼</div>
+          <h3>Symphony Orchestrator</h3>
+          <p>Four specialized agents (Researcher, Analyst, Negotiator, Guardian) collaborate autonomously through rule-based engines. No external AI needed — the symphony runs entirely on local heuristics and learned preferences.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>5 templates: purchase, price comparison, negotiation, exploration, audit</li>
+            <li>6-phase pipeline: compose → discover → analyze → negotiate → guard → decide</li>
+            <li>Guardian veto for safety-critical decisions</li>
+            <li>Weighted consensus with agreement scoring</li>
+          </ul>
+        </div>
+      </div>
+
+      <div style="text-align:center; margin-top:32px;">
+        <a href="/mesh-dashboard" class="btn btn-primary btn-lg" style="background: #8b5cf6;">Open Agent Mesh Dashboard</a>
+      </div>
+    </div>
+  </section>
+
   <!-- ═══════════ HOW IT WORKS ═══════════ -->
   <section class="section" id="how-it-works" style="background: var(--bg-secondary);">
     <div class="container">

package/public/llms.txt

@@ -30,6 +30,7 @@ AI agents today interact with websites through brittle DOM scraping, CSS selecto
 4. **Fairness Engine** — Prevents AI bias toward large platforms; ensures small businesses get equal visibility
 5. **MCP Compatibility** — `wab-mcp-adapter` converts WAB commands into MCP tools for any LLM
 6. **NoScript Fallback** — HTTP-only agents can interact via REST API when JavaScript is unavailable
+7. **Private Agent Mesh** — Inter-agent communication, local reinforcement learning, and symphony orchestration without external LLM dependency
 
 ## Use Cases
 

package/public/mesh-dashboard.html

@@ -0,0 +1,401 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Agent Mesh — Web Agent Bridge</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/css/styles.css">
+  <style>
+    :root { --mesh-green: #10b981; --mesh-blue: #3b82f6; --mesh-purple: #8b5cf6; --mesh-orange: #f59e0b; --mesh-red: #ef4444; }
+
+    .mesh-layout { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }
+    .mesh-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; flex-wrap: wrap; gap: 16px; }
+    .mesh-header h1 { font-size: 1.8rem; font-weight: 800; }
+    .mesh-header h1 span { color: var(--mesh-purple); }
+    .mesh-subtitle { color: var(--text-muted); font-size: 0.9rem; margin-top: 4px; }
+
+    .mesh-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; }
+    .stat-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 20px; text-align: center; }
+    .stat-card .stat-value { font-size: 2rem; font-weight: 800; color: var(--text-primary); }
+    .stat-card .stat-label { font-size: 0.8rem; color: var(--text-muted); margin-top: 4px; }
+    .stat-card.green .stat-value { color: var(--mesh-green); }
+    .stat-card.blue .stat-value { color: var(--mesh-blue); }
+    .stat-card.purple .stat-value { color: var(--mesh-purple); }
+    .stat-card.orange .stat-value { color: var(--mesh-orange); }
+
+    .mesh-tabs { display: flex; gap: 4px; margin-bottom: 24px; background: var(--bg-card); border-radius: 10px; padding: 4px; border: 1px solid var(--border-primary); }
+    .mesh-tab { padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 0.85rem; color: var(--text-muted); border: none; background: transparent; transition: all 0.2s; }
+    .mesh-tab.active { background: var(--mesh-purple); color: white; }
+    .mesh-tab:hover:not(.active) { background: var(--bg-secondary); color: var(--text-primary); }
+
+    .tab-content { display: none; }
+    .tab-content.active { display: block; }
+
+    .section-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 16px; }
+
+    .agents-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 24px; }
+    .agent-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 20px; position: relative; overflow: hidden; }
+    .agent-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; }
+    .agent-card.researcher::before { background: var(--mesh-blue); }
+    .agent-card.negotiator::before { background: var(--mesh-orange); }
+    .agent-card.analyst::before { background: var(--mesh-purple); }
+    .agent-card.guardian::before { background: var(--mesh-green); }
+    .agent-card .agent-role { font-weight: 700; font-size: 0.95rem; margin-bottom: 4px; text-transform: capitalize; }
+    .agent-card .agent-name { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 12px; }
+    .agent-card .agent-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+    .agent-card .agent-stat { font-size: 0.75rem; color: var(--text-secondary); }
+    .agent-card .agent-stat strong { display: block; font-size: 1rem; color: var(--text-primary); }
+    .agent-status { display: inline-block; padding: 2px 8px; border-radius: 100px; font-size: 0.7rem; font-weight: 600; }
+    .agent-status.active { background: rgba(16,185,129,0.15); color: var(--mesh-green); }
+    .agent-status.idle { background: rgba(100,116,139,0.15); color: var(--text-muted); }
+
+    .channels-list { display: grid; gap: 12px; margin-bottom: 24px; }
+    .channel-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 10px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
+    .channel-name { font-weight: 700; font-size: 0.95rem; }
+    .channel-desc { color: var(--text-muted); font-size: 0.8rem; margin-top: 2px; }
+    .channel-badge { background: var(--mesh-purple); color: white; padding: 4px 12px; border-radius: 100px; font-size: 0.75rem; font-weight: 600; }
+
+    .messages-list { max-height: 400px; overflow-y: auto; display: grid; gap: 8px; }
+    .message-item { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 8px; padding: 12px 16px; }
+    .message-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+    .message-type { font-size: 0.7rem; font-weight: 600; padding: 2px 8px; border-radius: 100px; }
+    .message-type.alert { background: rgba(239,68,68,0.15); color: var(--mesh-red); }
+    .message-type.discovery { background: rgba(59,130,246,0.15); color: var(--mesh-blue); }
+    .message-type.tactic { background: rgba(139,92,246,0.15); color: var(--mesh-purple); }
+    .message-type.request { background: rgba(245,158,11,0.15); color: var(--mesh-orange); }
+    .message-subject { font-weight: 600; font-size: 0.85rem; }
+    .message-sender { font-size: 0.75rem; color: var(--text-muted); }
+    .message-time { font-size: 0.7rem; color: var(--text-muted); }
+
+    .symphony-grid { display: grid; gap: 16px; margin-bottom: 24px; }
+    .symphony-card { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 20px; }
+    .symphony-name { font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
+    .symphony-desc { color: var(--text-muted); font-size: 0.8rem; margin-bottom: 12px; }
+    .symphony-phases { display: flex; gap: 8px; flex-wrap: wrap; }
+    .phase-tag { font-size: 0.7rem; padding: 3px 10px; border-radius: 100px; font-weight: 600; background: var(--bg-secondary); color: var(--text-secondary); }
+
+    .learning-chart { background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; padding: 24px; margin-bottom: 24px; }
+    .learning-bars { display: flex; gap: 4px; align-items: flex-end; height: 120px; }
+    .learning-bar { flex: 1; background: var(--mesh-purple); border-radius: 4px 4px 0 0; min-width: 8px; transition: height 0.3s; opacity: 0.7; }
+    .learning-bar:hover { opacity: 1; }
+
+    .knowledge-table { width: 100%; border-collapse: collapse; }
+    .knowledge-table th { text-align: left; font-size: 0.75rem; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border-primary); }
+    .knowledge-table td { padding: 10px 12px; font-size: 0.85rem; border-bottom: 1px solid var(--border-primary); }
+    .confidence-bar { height: 6px; border-radius: 3px; background: var(--bg-secondary); overflow: hidden; width: 80px; display: inline-block; }
+    .confidence-fill { height: 100%; border-radius: 3px; }
+
+    .demo-btn { background: var(--mesh-purple); color: white; border: none; padding: 10px 24px; border-radius: 8px; font-weight: 600; font-size: 0.85rem; cursor: pointer; }
+    .demo-btn:hover { opacity: 0.9; }
+    .demo-output { background: var(--bg-secondary); border-radius: 10px; padding: 16px; margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; max-height: 300px; overflow-y: auto; white-space: pre-wrap; }
+
+    @media (max-width: 768px) {
+      .mesh-stats { grid-template-columns: repeat(2, 1fr); }
+      .mesh-tabs { flex-wrap: wrap; }
+    }
+  </style>
+</head>
+<body>
+  <nav class="nav-header">
+    <div class="nav-inner">
+      <a href="/" class="nav-logo">WAB</a>
+      <div class="nav-links">
+        <a href="/dashboard">Dashboard</a>
+        <a href="/premium-dashboard">Sovereign</a>
+        <a href="/mesh-dashboard" class="nav-active">Agent Mesh</a>
+        <a href="/docs">Docs</a>
+      </div>
+    </div>
+  </nav>
+
+  <div class="mesh-layout">
+    <div class="mesh-header">
+      <div>
+        <h1>Agent <span>Mesh</span></h1>
+        <div class="mesh-subtitle">Private Agent Communication, Autonomous Learning, and Symphony Orchestration</div>
+      </div>
+      <button class="demo-btn" onclick="runDemo()">Run Symphony Demo</button>
+    </div>
+
+    <!-- Stats -->
+    <div class="mesh-stats">
+      <div class="stat-card green"><div class="stat-value" id="stat-agents">0</div><div class="stat-label">Active Agents</div></div>
+      <div class="stat-card blue"><div class="stat-value" id="stat-messages">0</div><div class="stat-label">Active Messages</div></div>
+      <div class="stat-card purple"><div class="stat-value" id="stat-knowledge">0</div><div class="stat-label">Knowledge Items</div></div>
+      <div class="stat-card orange"><div class="stat-value" id="stat-domains">0</div><div class="stat-label">Known Domains</div></div>
+    </div>
+
+    <!-- Tabs -->
+    <div class="mesh-tabs">
+      <button class="mesh-tab active" data-tab="agents">Agents</button>
+      <button class="mesh-tab" data-tab="channels">Channels</button>
+      <button class="mesh-tab" data-tab="knowledge">Knowledge</button>
+      <button class="mesh-tab" data-tab="symphony">Symphony</button>
+      <button class="mesh-tab" data-tab="learning">Learning</button>
+    </div>
+
+    <!-- Agents Tab -->
+    <div class="tab-content active" id="tab-agents">
+      <h3 class="section-title">Active Mesh Agents</h3>
+      <div class="agents-grid" id="agents-grid"></div>
+    </div>
+
+    <!-- Channels Tab -->
+    <div class="tab-content" id="tab-channels">
+      <h3 class="section-title">Communication Channels</h3>
+      <div class="channels-list" id="channels-list"></div>
+      <h3 class="section-title" style="margin-top: 24px">Recent Messages</h3>
+      <div class="messages-list" id="messages-list"></div>
+    </div>
+
+    <!-- Knowledge Tab -->
+    <div class="tab-content" id="tab-knowledge">
+      <h3 class="section-title">Shared Knowledge Base</h3>
+      <div style="background: var(--bg-card); border: 1px solid var(--border-primary); border-radius: 12px; overflow: hidden;">
+        <table class="knowledge-table" id="knowledge-table">
+          <thead>
+            <tr><th>Domain</th><th>Key</th><th>Type</th><th>Source</th><th>Confidence</th><th>Accessed</th></tr>
+          </thead>
+          <tbody id="knowledge-body"></tbody>
+        </table>
+      </div>
+    </div>
+
+    <!-- Symphony Tab -->
+    <div class="tab-content" id="tab-symphony">
+      <h3 class="section-title">Symphony Templates</h3>
+      <div class="symphony-grid" id="symphony-templates"></div>
+      <h3 class="section-title" style="margin-top: 24px">Recent Compositions</h3>
+      <div class="symphony-grid" id="symphony-history"></div>
+    </div>
+
+    <!-- Learning Tab -->
+    <div class="tab-content" id="tab-learning">
+      <h3 class="section-title">Learning Performance</h3>
+      <div class="mesh-stats" style="grid-template-columns: repeat(3, 1fr); margin-bottom: 24px;">
+        <div class="stat-card green"><div class="stat-value" id="learn-accuracy">0%</div><div class="stat-label">Prediction Accuracy</div></div>
+        <div class="stat-card blue"><div class="stat-value" id="learn-decisions">0</div><div class="stat-label">Total Decisions</div></div>
+        <div class="stat-card purple"><div class="stat-value" id="learn-patterns">0</div><div class="stat-label">Patterns Discovered</div></div>
+      </div>
+      <div class="learning-chart">
+        <h3 class="section-title">Reward History</h3>
+        <div class="learning-bars" id="learning-bars"></div>
+      </div>
+    </div>
+
+    <!-- Demo Output -->
+    <div id="demo-output" style="display: none;">
+      <h3 class="section-title">Demo Output</h3>
+      <div class="demo-output" id="demo-log"></div>
+    </div>
+  </div>
+
+  <script>
+    const API = '';
+
+    // Tab switching
+    document.querySelectorAll('.mesh-tab').forEach(function(tab) {
+      tab.addEventListener('click', function() {
+        document.querySelectorAll('.mesh-tab').forEach(function(t) { t.classList.remove('active'); });
+        document.querySelectorAll('.tab-content').forEach(function(c) { c.classList.remove('active'); });
+        tab.classList.add('active');
+        document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
+      });
+    });
+
+    async function loadDashboard() {
+      try {
+        const res = await fetch(API + '/api/mesh/dashboard');
+        const data = await res.json();
+
+        // Stats
+        document.getElementById('stat-agents').textContent = data.mesh?.active_agents || 0;
+        document.getElementById('stat-messages').textContent = data.mesh?.active_messages || 0;
+        document.getElementById('stat-knowledge').textContent = data.mesh?.total_knowledge || 0;
+        document.getElementById('stat-domains').textContent = data.mesh?.known_domains || 0;
+
+        // Agents
+        const agentsGrid = document.getElementById('agents-grid');
+        if (data.agents && data.agents.length > 0) {
+          agentsGrid.innerHTML = data.agents.map(function(a) {
+            return '<div class="agent-card ' + a.agent_role + '">' +
+              '<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px;">' +
+              '<div class="agent-role">' + a.agent_role + '</div>' +
+              '<span class="agent-status ' + a.status + '">' + a.status + '</span></div>' +
+              '<div class="agent-name">' + (a.display_name || a.id.slice(0, 8)) + '</div>' +
+              '<div class="agent-stats">' +
+              '<div class="agent-stat"><strong>' + a.messages_sent + '</strong>Sent</div>' +
+              '<div class="agent-stat"><strong>' + a.messages_received + '</strong>Received</div>' +
+              '<div class="agent-stat"><strong>' + a.knowledge_count + '</strong>Knowledge</div>' +
+              '<div class="agent-stat"><strong>' + timeAgo(a.last_heartbeat) + '</strong>Last Seen</div></div></div>';
+          }).join('');
+        } else {
+          agentsGrid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; padding: 40px; color: var(--text-muted);">No agents active. Run a demo or connect agents via SDK.</div>';
+        }
+
+        // Channels
+        var channelsList = document.getElementById('channels-list');
+        channelsList.innerHTML = data.channels.map(function(ch) {
+          return '<div class="channel-card"><div><div class="channel-name">#' + ch.name + '</div>' +
+            '<div class="channel-desc">' + (ch.description || '') + '</div></div>' +
+            '<span class="channel-badge">' + ch.channel_type + '</span></div>';
+        }).join('');
+
+        // Load messages for discoveries channel
+        loadMessages('discoveries');
+
+        // Symphony templates
+        var templatesGrid = document.getElementById('symphony-templates');
+        templatesGrid.innerHTML = data.symphonyTemplates.map(function(t) {
+          return '<div class="symphony-card"><div class="symphony-name">' + t.name.replace(/_/g, ' ') + '</div>' +
+            '<div class="symphony-desc">' + (t.description || '') + '</div>' +
+            '<div class="symphony-phases">' + t.phase_order.map(function(p) {
+              return '<span class="phase-tag">' + p + '</span>';
+            }).join('') + '</div></div>';
+        }).join('');
+
+      } catch (err) {
+        console.error('Failed to load dashboard:', err);
+      }
+    }
+
+    async function loadMessages(channel) {
+      try {
+        var res = await fetch(API + '/api/mesh/channels/' + channel + '/messages?limit=20');
+        var messages = await res.json();
+        var list = document.getElementById('messages-list');
+
+        if (messages.length > 0) {
+          list.innerHTML = messages.map(function(m) {
+            return '<div class="message-item"><div class="message-header">' +
+              '<div><span class="message-type ' + m.message_type + '">' + m.message_type + '</span> ' +
+              '<span class="message-subject">' + escapeHtml(m.subject) + '</span></div>' +
+              '<span class="message-time">' + timeAgo(m.created_at) + '</span></div>' +
+              '<div class="message-sender">From: ' + (m.sender_name || m.sender_role || m.sender_id?.slice(0, 8)) + '</div></div>';
+          }).join('');
+        } else {
+          list.innerHTML = '<div style="text-align: center; padding: 30px; color: var(--text-muted);">No messages yet</div>';
+        }
+      } catch (e) {
+        console.error('Failed to load messages:', e);
+      }
+    }
+
+    async function runDemo() {
+      var output = document.getElementById('demo-output');
+      var log = document.getElementById('demo-log');
+      output.style.display = 'block';
+      log.textContent = '';
+
+      function addLog(msg) { log.textContent += msg + '\n'; log.scrollTop = log.scrollHeight; }
+
+      addLog('=== Agent Mesh Symphony Demo ===\n');
+
+      try {
+        // 1. Register agents
+        addLog('[1/6] Registering agents in mesh...');
+        var researcher = await (await fetch(API + '/api/mesh/agents', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ siteId: 'demo', role: 'researcher', displayName: 'PriceBot', capabilities: ['scrape', 'compare'] }) })).json();
+        var analyst = await (await fetch(API + '/api/mesh/agents', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ siteId: 'demo', role: 'analyst', displayName: 'ValueBot', capabilities: ['score', 'rank'] }) })).json();
+        var negotiator = await (await fetch(API + '/api/mesh/agents', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ siteId: 'demo', role: 'negotiator', displayName: 'DealBot', capabilities: ['negotiate', 'bundle'] }) })).json();
+        var guardian = await (await fetch(API + '/api/mesh/agents', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ siteId: 'demo', role: 'guardian', displayName: 'TrustBot', capabilities: ['verify', 'audit'] }) })).json();
+        addLog('   Researcher: ' + researcher.id.slice(0, 8) + ' (PriceBot)');
+        addLog('   Analyst:    ' + analyst.id.slice(0, 8) + ' (ValueBot)');
+        addLog('   Negotiator: ' + negotiator.id.slice(0, 8) + ' (DealBot)');
+        addLog('   Guardian:   ' + guardian.id.slice(0, 8) + ' (TrustBot)');
+
+        // 2. Share knowledge
+        addLog('\n[2/6] Sharing knowledge to mesh...');
+        await (await fetch(API + '/api/mesh/knowledge', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ agentId: researcher.id, knowledgeType: 'price', domain: 'electronics', key: 'iphone-15-price', value: { price: 999, currency: 'USD', source: 'apple.com' }, confidence: 0.95 }) })).json();
+        addLog('   Shared: iPhone 15 price data (confidence: 0.95)');
+
+        await (await fetch(API + '/api/mesh/knowledge', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ agentId: researcher.id, knowledgeType: 'price', domain: 'electronics', key: 'competitor-price', value: { price: 949, currency: 'USD', source: 'bestbuy.com' }, confidence: 0.9 }) })).json();
+        addLog('   Shared: Competitor price data (confidence: 0.90)');
+
+        // 3. Broadcast alert
+        addLog('\n[3/6] Broadcasting alert...');
+        await (await fetch(API + '/api/mesh/alerts', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ senderId: guardian.id, subject: 'Price drop detected on competitor site', details: { domain: 'electronics', oldPrice: 999, newPrice: 949 }, priority: 2 }) })).json();
+        addLog('   Alert: Price drop detected on competitor site');
+
+        // 4. Run Symphony
+        addLog('\n[4/6] Running Symphony Orchestration...');
+        addLog('   Template: purchase_advisor');
+        addLog('   Phases: discover → analyze → negotiate → guard → decide');
+        var symphony = await (await fetch(API + '/api/mesh/symphony/perform', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({
+          siteId: 'demo',
+          task: 'Find the best deal on iPhone 15',
+          taskType: 'purchase',
+          inputData: {
+            siteData: { schema: { actions: { buy: { params: {} }, compare: { params: {} } } }, policies: { returns: '30 days', shipping: 'Free over $50' } },
+            products: [
+              { name: 'iPhone 15', price: 999, rating: 4.7, inStock: true, discount: 5 },
+              { name: 'iPhone 15 Pro', price: 1199, rating: 4.8, inStock: true },
+              { name: 'iPhone 14', price: 699, rating: 4.5, inStock: true, discount: 15 }
+            ],
+            preferences: { maxPrice: 1000, preferredCategory: 'electronics' }
+          }
+        }) })).json();
+
+        addLog('\n   Symphony Results:');
+        addLog('   Status: ' + symphony.status);
+        addLog('   Confidence: ' + (symphony.confidence * 100).toFixed(1) + '%');
+        addLog('   Duration: ' + symphony.duration_ms + 'ms');
+
+        if (symphony.phases) {
+          Object.entries(symphony.phases).forEach(function(entry) {
+            var phase = entry[0], result = entry[1];
+            addLog('\n   Phase: ' + phase);
+            if (result.output?.reasoning) addLog('     → ' + result.output.reasoning);
+            if (result.consensus?.reasoning) {
+              result.consensus.reasoning.forEach(function(r) { addLog('     → ' + r); });
+            }
+          });
+        }
+
+        // 5. Learning
+        addLog('\n[5/6] Training learning engine...');
+        var decision = await (await fetch(API + '/api/mesh/learning/decisions', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ siteId: 'demo', agentId: researcher.id, domain: 'electronics', action: 'buy_cheapest', context: { category: 'phones' }, features: { price: 699, discount: 15, rating: 4.5 } }) })).json();
+        addLog('   Decision recorded: ' + decision.decisionId?.slice(0, 8));
+        addLog('   Predicted reward: ' + (decision.predictedReward * 100).toFixed(1) + '%');
+
+        var fb = await (await fetch(API + '/api/mesh/learning/decisions/' + decision.decisionId + '/feedback', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ outcome: 'accepted', reward: 0.8 }) })).json();
+        addLog('   Feedback: accepted (reward: 0.8)');
+        addLog('   Updated confidence: ' + (fb.updatedConfidence * 100).toFixed(1) + '%');
+
+        // 6. Get recommendation
+        addLog('\n[6/6] Getting recommendation...');
+        var rec = await (await fetch(API + '/api/mesh/learning/recommend', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ siteId: 'demo', agentId: researcher.id, domain: 'electronics', actions: ['buy_cheapest', 'buy_best_rated', 'wait_for_sale'], context: { category: 'phones', price: 999 } }) })).json();
+        addLog('   Recommended: ' + rec.recommended);
+        addLog('   Confidence: ' + (rec.confidence * 100).toFixed(1) + '%');
+
+        addLog('\n=== Demo Complete ===');
+        addLog('All processing was LOCAL — zero external API calls, zero tokens consumed.');
+
+      } catch (err) {
+        addLog('\nError: ' + err.message);
+      }
+
+      loadDashboard();
+    }
+
+    function timeAgo(dateStr) {
+      if (!dateStr) return 'never';
+      var diff = Date.now() - new Date(dateStr).getTime();
+      if (diff < 60000) return 'just now';
+      if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+      if (diff < 86400000) return Math.floor(diff / 3600000) + 'h ago';
+      return Math.floor(diff / 86400000) + 'd ago';
+    }
+
+    function escapeHtml(str) {
+      var div = document.createElement('div');
+      div.textContent = str || '';
+      return div.innerHTML;
+    }
+
+    loadDashboard();
+  </script>
+</body>
+</html>