web-agent-bridge 2.2.0 → 2.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.ar.md +7 -0
  2. package/README.md +7 -0
  3. package/package.json +12 -4
  4. package/public/commander-dashboard.html +243 -0
  5. package/public/css/premium.css +317 -317
  6. package/public/demo.html +259 -259
  7. package/public/index.html +644 -592
  8. package/public/llms.txt +1 -0
  9. package/public/mesh-dashboard.html +328 -0
  10. package/public/premium-dashboard.html +2487 -2487
  11. package/public/premium.html +791 -791
  12. package/public/script/wab.min.js +181 -6
  13. package/script/ai-agent-bridge.js +196 -0
  14. package/sdk/agent-mesh.js +449 -0
  15. package/sdk/commander.js +262 -0
  16. package/sdk/index.js +260 -259
  17. package/sdk/package.json +1 -1
  18. package/server/index.js +13 -1
  19. package/server/migrations/002_premium_features.sql +418 -418
  20. package/server/models/db.js +24 -5
  21. package/server/routes/admin-premium.js +671 -671
  22. package/server/routes/commander.js +316 -0
  23. package/server/routes/mesh.js +469 -0
  24. package/server/routes/premium-v2.js +686 -686
  25. package/server/routes/premium.js +724 -724
  26. package/server/services/agent-learning.js +575 -0
  27. package/server/services/agent-memory.js +625 -625
  28. package/server/services/agent-mesh.js +539 -0
  29. package/server/services/agent-symphony.js +711 -0
  30. package/server/services/commander.js +738 -0
  31. package/server/services/edge-compute.js +440 -0
  32. package/server/services/local-ai.js +389 -0
  33. package/server/services/plugins.js +747 -747
  34. package/server/services/self-healing.js +843 -843
  35. package/server/services/swarm.js +788 -788
  36. package/server/services/vision.js +871 -871
  37. package/public/admin/dashboard.html +0 -848
  38. package/public/admin/login.html +0 -84
  39. package/public/video/tutorial.mp4 +0 -0
package/public/llms.txt CHANGED
@@ -30,6 +30,7 @@ AI agents today interact with websites through brittle DOM scraping, CSS selecto
30
30
  4. **Fairness Engine** — Prevents AI bias toward large platforms; ensures small businesses get equal visibility
31
31
  5. **MCP Compatibility** — `wab-mcp-adapter` converts WAB commands into MCP tools for any LLM
32
32
  6. **NoScript Fallback** — HTTP-only agents can interact via REST API when JavaScript is unavailable
33
+ 7. **Private Agent Mesh** — Inter-agent communication, local reinforcement learning, and symphony orchestration without external LLM dependency
33
34
 
34
35
  ## Use Cases
35
36
 
package/public/mesh-dashboard.html ADDED
@@ -0,0 +1,328 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Private Agent Mesh — Dashboard</title>
7
+ <style>
8
+ *{margin:0;padding:0;box-sizing:border-box}
9
+ body{font-family:'Segoe UI',system-ui,sans-serif;background:#0f1117;color:#e1e4ea;min-height:100vh}
10
+ .header{background:linear-gradient(135deg,#1a1d29 0%,#252a3a 100%);padding:24px 32px;border-bottom:1px solid #2a2f3f;display:flex;justify-content:space-between;align-items:center}
11
+ .header h1{font-size:22px;color:#a78bfa;font-weight:600}
12
+ .header .meta{font-size:13px;color:#888;display:flex;gap:20px}
13
+ .header .meta span{display:flex;align-items:center;gap:6px}
14
+ .dot{width:8px;height:8px;border-radius:50%;background:#10b981;display:inline-block}
15
+ .tabs{display:flex;background:#1a1d29;border-bottom:1px solid #2a2f3f;padding:0 32px;gap:4px}
16
+ .tab{padding:12px 20px;cursor:pointer;border-bottom:2px solid transparent;color:#888;transition:.2s;font-size:14px}
17
+ .tab:hover{color:#e1e4ea;background:#ffffff08}
18
+ .tab.active{color:#a78bfa;border-bottom-color:#a78bfa}
19
+ .content{padding:24px 32px;max-width:1400px}
20
+ .panel{display:none}
21
+ .panel.active{display:block}
22
+ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:24px}
23
+ .card{background:#1a1d29;border:1px solid #2a2f3f;border-radius:10px;padding:18px}
24
+ .card .label{font-size:12px;color:#888;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
25
+ .card .value{font-size:28px;font-weight:700;color:#e1e4ea}
26
+ .card .sub{font-size:12px;color:#666;margin-top:4px}
27
+ table{width:100%;border-collapse:collapse;margin-top:12px}
28
+ th{text-align:left;font-size:12px;color:#888;text-transform:uppercase;letter-spacing:.5px;padding:10px 14px;border-bottom:1px solid #2a2f3f}
29
+ td{padding:10px 14px;border-bottom:1px solid #1e2230;font-size:14px}
30
+ tr:hover{background:#ffffff05}
31
+ .badge{display:inline-block;padding:2px 10px;border-radius:12px;font-size:12px;font-weight:500}
32
+ .badge-green{background:#10b98120;color:#10b981}
33
+ .badge-yellow{background:#f59e0b20;color:#f59e0b}
34
+ .badge-red{background:#ef444420;color:#ef4444}
35
+ .badge-blue{background:#3b82f620;color:#3b82f6}
36
+ .badge-purple{background:#a78bfa20;color:#a78bfa}
37
+ .chart-bar{display:flex;align-items:flex-end;gap:3px;height:80px;margin-top:8px}
38
+ .chart-bar .bar{flex:1;background:linear-gradient(to top,#a78bfa,#7c3aed);border-radius:3px 3px 0 0;min-width:4px;transition:height .3s}
39
+ .section{margin-bottom:28px}
40
+ .section h3{font-size:16px;color:#ccc;margin-bottom:12px;display:flex;align-items:center;gap:8px}
41
+ .empty{color:#555;font-style:italic;padding:20px 0}
42
+ .refresh-btn{background:#a78bfa20;border:1px solid #a78bfa40;color:#a78bfa;padding:6px 14px;border-radius:6px;cursor:pointer;font-size:13px}
43
+ .refresh-btn:hover{background:#a78bfa30}
44
+ </style>
45
+ </head>
46
+ <body>
47
+ <div class="header">
48
+ <h1>&#128752; Private Agent Mesh</h1>
49
+ <div class="meta">
50
+ <span><span class="dot"></span> <span id="status-text">Connecting...</span></span>
51
+ <span>Last update: <span id="last-update">—</span></span>
52
+ <button class="refresh-btn" onclick="loadAll()">&#8635; Refresh</button>
53
+ </div>
54
+ </div>
55
+
56
+ <div class="tabs">
57
+ <div class="tab active" data-tab="agents">Agents</div>
58
+ <div class="tab" data-tab="messages">Messages</div>
59
+ <div class="tab" data-tab="knowledge">Knowledge</div>
60
+ <div class="tab" data-tab="learning">Learning</div>
61
+ <div class="tab" data-tab="symphony">Symphony</div>
62
+ </div>
63
+
64
+ <div class="content">
65
+ <!-- AGENTS TAB -->
66
+ <div class="panel active" id="panel-agents">
67
+ <div class="grid" id="agent-stats"></div>
68
+ <div class="section">
69
+ <h3>Active Agents</h3>
70
+ <table><thead><tr><th>Name</th><th>Role</th><th>Status</th><th>Capabilities</th><th>Sent</th><th>Recv</th><th>Knowledge</th><th>Last Heartbeat</th></tr></thead>
71
+ <tbody id="agents-table"></tbody></table>
72
+ </div>
73
+ </div>
74
+
75
+ <!-- MESSAGES TAB -->
76
+ <div class="panel" id="panel-messages">
77
+ <div class="grid" id="msg-stats"></div>
78
+ <div class="section">
79
+ <h3>Recent Messages</h3>
80
+ <table><thead><tr><th>Type</th><th>Subject</th><th>Sender</th><th>Channel</th><th>Priority</th><th>Time</th></tr></thead>
81
+ <tbody id="messages-table"></tbody></table>
82
+ </div>
83
+ </div>
84
+
85
+ <!-- KNOWLEDGE TAB -->
86
+ <div class="panel" id="panel-knowledge">
87
+ <div class="grid" id="knowledge-stats"></div>
88
+ <div class="section">
89
+ <h3>Knowledge Domains</h3>
90
+ <div id="knowledge-domains"></div>
91
+ </div>
92
+ <div class="section">
93
+ <h3>Recent Knowledge</h3>
94
+ <table><thead><tr><th>Key</th><th>Type</th><th>Domain</th><th>Confidence</th><th>Verified</th><th>Agent</th><th>Updated</th></tr></thead>
95
+ <tbody id="knowledge-table"></tbody></table>
96
+ </div>
97
+ </div>
98
+
99
+ <!-- LEARNING TAB -->
100
+ <div class="panel" id="panel-learning">
101
+ <div class="grid" id="learning-stats"></div>
102
+ <div class="section">
103
+ <h3>Reward History</h3>
104
+ <div class="chart-bar" id="reward-chart"></div>
105
+ </div>
106
+ </div>
107
+
108
+ <!-- SYMPHONY TAB -->
109
+ <div class="panel" id="panel-symphony">
110
+ <div class="grid" id="symphony-stats"></div>
111
+ <div class="section">
112
+ <h3>Recent Compositions</h3>
113
+ <table><thead><tr><th>Template</th><th>Status</th><th>Phases</th><th>Duration</th><th>Agents</th><th>Created</th></tr></thead>
114
+ <tbody id="symphony-table"></tbody></table>
115
+ </div>
116
+ </div>
117
+ </div>
118
+
119
+ <script>
120
+ // XSS-safe text escaping
121
+ function esc(str) {
122
+ if (str == null) return '';
123
+ const d = document.createElement('div');
124
+ d.textContent = String(str);
125
+ return d.innerHTML;
126
+ }
127
+
128
+ function badge(text, color) { return '<span class="badge badge-' + color + '">' + esc(text) + '</span>'; }
129
+ function timeAgo(ts) {
130
+ if (!ts) return '—';
131
+ const d = Date.now() - new Date(ts).getTime();
132
+ if (d < 60000) return Math.floor(d / 1000) + 's ago';
133
+ if (d < 3600000) return Math.floor(d / 60000) + 'm ago';
134
+ return Math.floor(d / 3600000) + 'h ago';
135
+ }
136
+
137
+ const BASE = '';
138
+
139
+ async function api(path) {
140
+ try {
141
+ const r = await fetch(BASE + '/api/mesh' + path);
142
+ if (!r.ok) return null;
143
+ return r.json();
144
+ } catch (_) { return null; }
145
+ }
146
+
147
+ // ─── Tab switching ──────────────────────────────────────────────
148
+ document.querySelectorAll('.tab').forEach(t => {
149
+ t.addEventListener('click', () => {
150
+ document.querySelectorAll('.tab').forEach(x => x.classList.remove('active'));
151
+ document.querySelectorAll('.panel').forEach(x => x.classList.remove('active'));
152
+ t.classList.add('active');
153
+ document.getElementById('panel-' + t.dataset.tab).classList.add('active');
154
+ });
155
+ });
156
+
157
+ // ─── Load Agents Tab ────────────────────────────────────────────
158
+ async function loadAgents() {
159
+ const [ad, sd] = await Promise.all([api('/agents'), api('/stats')]);
160
+ const agents = ad?.agents || [];
161
+ const stats = sd?.stats || {};
162
+
163
+ document.getElementById('agent-stats').innerHTML =
164
+ '<div class="card"><div class="label">Active Agents</div><div class="value">' + agents.length + '</div></div>' +
165
+ '<div class="card"><div class="label">Total Messages</div><div class="value">' + (stats.totalMessages || 0) + '</div></div>' +
166
+ '<div class="card"><div class="label">Knowledge Items</div><div class="value">' + (stats.totalKnowledge || 0) + '</div></div>' +
167
+ '<div class="card"><div class="label">Channels</div><div class="value">' + (stats.channelCount || 0) + '</div></div>';
168
+
169
+ let html = '';
170
+ for (const a of agents) {
171
+ const statusColor = a.status === 'active' ? 'green' : a.status === 'idle' ? 'yellow' : 'red';
172
+ const caps = JSON.parse(a.capabilities || '[]');
173
+ html += '<tr>' +
174
+ '<td>' + esc(a.display_name || a.id.slice(0, 8)) + '</td>' +
175
+ '<td>' + badge(a.agent_role, 'purple') + '</td>' +
176
+ '<td>' + badge(a.status, statusColor) + '</td>' +
177
+ '<td>' + caps.map(c => esc(c)).join(', ') + '</td>' +
178
+ '<td>' + a.messages_sent + '</td>' +
179
+ '<td>' + a.messages_received + '</td>' +
180
+ '<td>' + a.knowledge_count + '</td>' +
181
+ '<td>' + timeAgo(a.last_heartbeat) + '</td></tr>';
182
+ }
183
+ document.getElementById('agents-table').innerHTML = html || '<tr><td colspan="8" class="empty">No active agents</td></tr>';
184
+ }
185
+
186
+ // ─── Load Messages Tab ──────────────────────────────────────────
187
+ async function loadMessages() {
188
+ const [md, sd] = await Promise.all([api('/messages?limit=50'), api('/stats')]);
189
+ const msgs = md?.messages || [];
190
+ const stats = sd?.stats || {};
191
+
192
+ document.getElementById('msg-stats').innerHTML =
193
+ '<div class="card"><div class="label">Total Messages</div><div class="value">' + (stats.totalMessages || 0) + '</div></div>' +
194
+ '<div class="card"><div class="label">Alerts</div><div class="value">' + msgs.filter(m => m.message_type === 'alert').length + '</div></div>';
195
+
196
+ let html = '';
197
+ for (const m of msgs) {
198
+ const typeColor = m.message_type === 'alert' ? 'red' : m.message_type === 'vote' ? 'blue' : 'green';
199
+ html += '<tr>' +
200
+ '<td>' + badge(m.message_type, typeColor) + '</td>' +
201
+ '<td>' + esc(m.subject) + '</td>' +
202
+ '<td>' + esc(m.sender_id?.slice(0, 8)) + '</td>' +
203
+ '<td>' + esc(m.channel_id?.slice(0, 8) || 'general') + '</td>' +
204
+ '<td>' + (m.priority || 0) + '</td>' +
205
+ '<td>' + timeAgo(m.created_at) + '</td></tr>';
206
+ }
207
+ document.getElementById('messages-table').innerHTML = html || '<tr><td colspan="6" class="empty">No messages yet</td></tr>';
208
+ }
209
+
210
+ // ─── Load Knowledge Tab ─────────────────────────────────────────
211
+ async function loadKnowledge() {
212
+ const [kd, dd] = await Promise.all([api('/knowledge-recent?limit=30'), api('/knowledge-domains')]);
213
+ const items = kd?.knowledge || [];
214
+ const domains = dd?.domains || [];
215
+
216
+ document.getElementById('knowledge-stats').innerHTML =
217
+ '<div class="card"><div class="label">Knowledge Items</div><div class="value">' + items.length + '</div></div>' +
218
+ '<div class="card"><div class="label">Domains</div><div class="value">' + domains.length + '</div></div>' +
219
+ '<div class="card"><div class="label">Avg Confidence</div><div class="value">' +
220
+ (items.length ? (items.reduce((s, k) => s + k.confidence, 0) / items.length).toFixed(2) : '—') + '</div></div>';
221
+
222
+ // Domains cards
223
+ let domHtml = '<div class="grid">';
224
+ for (const d of domains) {
225
+ domHtml += '<div class="card"><div class="label">' + esc(d.domain || 'global') + '</div><div class="value">' + d.count + '</div>' +
226
+ '<div class="sub">avg conf: ' + (d.avg_confidence || 0).toFixed(2) + '</div></div>';
227
+ }
228
+ domHtml += '</div>';
229
+ document.getElementById('knowledge-domains').innerHTML = domHtml || '<div class="empty">No domains yet</div>';
230
+
231
+ // Knowledge table
232
+ let html = '';
233
+ for (const k of items) {
234
+ const confColor = k.confidence >= 0.8 ? 'green' : k.confidence >= 0.5 ? 'yellow' : 'red';
235
+ html += '<tr>' +
236
+ '<td>' + esc(k.key) + '</td>' +
237
+ '<td>' + badge(k.knowledge_type, 'blue') + '</td>' +
238
+ '<td>' + esc(k.domain || '—') + '</td>' +
239
+ '<td>' + badge((k.confidence || 0).toFixed(2), confColor) + '</td>' +
240
+ '<td>' + (k.verification_count || 0) + 'x</td>' +
241
+ '<td>' + esc(k.agent_id?.slice(0, 8)) + '</td>' +
242
+ '<td>' + timeAgo(k.updated_at) + '</td></tr>';
243
+ }
244
+ document.getElementById('knowledge-table').innerHTML = html || '<tr><td colspan="7" class="empty">No knowledge shared yet</td></tr>';
245
+ }
246
+
247
+ // ─── Load Learning Tab ──────────────────────────────────────────
248
+ async function loadLearning() {
249
+ const [sd, rd] = await Promise.all([
250
+ api('/learning/stats?siteId=default&agentId=symphony'),
251
+ api('/learning/rewards?siteId=default&agentId=symphony&limit=30')
252
+ ]);
253
+ const stats = sd?.stats || {};
254
+ const rewards = rd?.rewardHistory || stats.rewardHistory || [];
255
+
256
+ document.getElementById('learning-stats').innerHTML =
257
+ '<div class="card"><div class="label">Total Decisions</div><div class="value">' + (stats.total_decisions || 0) + '</div></div>' +
258
+ '<div class="card"><div class="label">Accepted</div><div class="value">' + (stats.accepted || 0) + '</div></div>' +
259
+ '<div class="card"><div class="label">Rejected</div><div class="value">' + (stats.rejected || 0) + '</div></div>' +
260
+ '<div class="card"><div class="label">Accept Rate</div><div class="value">' + ((stats.acceptRate || 0) * 100).toFixed(0) + '%</div></div>' +
261
+ '<div class="card"><div class="label">Avg Reward</div><div class="value">' + (stats.avg_reward || 0).toFixed(2) + '</div></div>' +
262
+ '<div class="card"><div class="label">Policy Domains</div><div class="value">' + (stats.policy_domains || 0) + '</div></div>' +
263
+ '<div class="card"><div class="label">Patterns Found</div><div class="value">' + (stats.total_patterns || 0) + '</div></div>' +
264
+ '<div class="card"><div class="label">Accuracy</div><div class="value">' + ((stats.recentAccuracy || 0) * 100).toFixed(0) + '%</div></div>';
265
+
266
+ // Reward chart
267
+ let chartHtml = '';
268
+ if (rewards.length > 0) {
269
+ const maxR = Math.max(...rewards.map(r => Math.abs(r.reward)), 0.1);
270
+ for (const r of rewards) {
271
+ const h = Math.max(2, Math.round((Math.abs(r.reward) / maxR) * 70));
272
+ const color = r.reward >= 0 ? 'linear-gradient(to top,#10b981,#059669)' : 'linear-gradient(to top,#ef4444,#dc2626)';
273
+ chartHtml += '<div class="bar" style="height:' + h + 'px;background:' + color + '" title="' + esc(r.reward) + '"></div>';
274
+ }
275
+ } else {
276
+ chartHtml = '<div class="empty" style="height:80px;display:flex;align-items:center">No reward data yet</div>';
277
+ }
278
+ document.getElementById('reward-chart').innerHTML = chartHtml;
279
+ }
280
+
281
+ // ─── Load Symphony Tab ──────────────────────────────────────────
282
+ async function loadSymphony() {
283
+ const [cd, sd] = await Promise.all([
284
+ api('/symphony/compositions?siteId=default&limit=20'),
285
+ api('/symphony/stats?siteId=default')
286
+ ]);
287
+ const comps = cd?.compositions || [];
288
+ const stats = sd?.stats || {};
289
+
290
+ document.getElementById('symphony-stats').innerHTML =
291
+ '<div class="card"><div class="label">Total Compositions</div><div class="value">' + (stats.total || 0) + '</div></div>' +
292
+ '<div class="card"><div class="label">Completed</div><div class="value">' + (stats.completed || 0) + '</div></div>' +
293
+ '<div class="card"><div class="label">Failed</div><div class="value">' + (stats.failed || 0) + '</div></div>' +
294
+ '<div class="card"><div class="label">Success Rate</div><div class="value">' + ((stats.successRate || 0) * 100).toFixed(0) + '%</div></div>' +
295
+ '<div class="card"><div class="label">Avg Duration</div><div class="value">' + (stats.avgDuration || 0) + 'ms</div></div>' +
296
+ '<div class="card"><div class="label">Templates Used</div><div class="value">' + (stats.templatesUsed || 0) + '</div></div>';
297
+
298
+ let html = '';
299
+ for (const c of comps) {
300
+ const statusColor = c.status === 'completed' ? 'green' : c.status === 'failed' ? 'red' : 'yellow';
301
+ const phases = c.phases_completed || [];
302
+ html += '<tr>' +
303
+ '<td>' + badge(c.template, 'purple') + '</td>' +
304
+ '<td>' + badge(c.status, statusColor) + '</td>' +
305
+ '<td>' + esc(phases.join(' → ')) + '</td>' +
306
+ '<td>' + (c.duration_ms || '—') + 'ms</td>' +
307
+ '<td>' + (c.agent_count || 0) + '</td>' +
308
+ '<td>' + timeAgo(c.created_at) + '</td></tr>';
309
+ }
310
+ document.getElementById('symphony-table').innerHTML = html || '<tr><td colspan="6" class="empty">No compositions yet</td></tr>';
311
+ }
312
+
313
+ // ─── Load All ───────────────────────────────────────────────────
314
+ async function loadAll() {
315
+ try {
316
+ await Promise.all([loadAgents(), loadMessages(), loadKnowledge(), loadLearning(), loadSymphony()]);
317
+ document.getElementById('status-text').textContent = 'Connected';
318
+ document.getElementById('last-update').textContent = new Date().toLocaleTimeString();
319
+ } catch (e) {
320
+ document.getElementById('status-text').textContent = 'Error';
321
+ }
322
+ }
323
+
324
+ loadAll();
325
+ setInterval(loadAll, 10000);
326
+ </script>
327
+ </body>
328
+ </html>