web-agent-bridge 3.0.0 → 3.3.0
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.
- package/LICENSE +72 -21
- package/README.ar.md +1286 -1073
- package/README.md +1764 -1535
- package/bin/agent-runner.js +474 -474
- package/bin/cli.js +237 -138
- package/bin/wab.js +80 -80
- package/examples/bidi-agent.js +119 -119
- package/examples/cross-site-agent.js +91 -91
- package/examples/mcp-agent.js +94 -94
- package/examples/next-app-router/README.md +44 -44
- package/examples/puppeteer-agent.js +108 -108
- package/examples/saas-dashboard/README.md +55 -55
- package/examples/shopify-hydrogen/README.md +74 -74
- package/examples/vision-agent.js +171 -171
- package/examples/wordpress-elementor/README.md +77 -77
- package/package.json +17 -3
- package/public/.well-known/agent-tools.json +180 -180
- package/public/.well-known/ai-assets.json +59 -59
- package/public/.well-known/ai-plugin.json +28 -0
- package/public/.well-known/security.txt +8 -0
- package/public/agent-workspace.html +349 -347
- package/public/ai.html +198 -196
- package/public/api.html +413 -0
- package/public/browser.html +486 -484
- package/public/commander-dashboard.html +243 -243
- package/public/cookies.html +210 -208
- package/public/css/agent-workspace.css +1713 -1713
- package/public/css/premium.css +317 -317
- package/public/css/styles.css +1235 -1235
- package/public/dashboard.html +706 -704
- package/public/demo.html +1770 -1
- package/public/dns.html +507 -0
- package/public/docs.html +587 -585
- package/public/feed.xml +89 -89
- package/public/growth.html +463 -0
- package/public/index.html +341 -9
- package/public/integrations.html +556 -0
- package/public/js/agent-workspace.js +1740 -1740
- package/public/js/auth-nav.js +31 -31
- package/public/js/auth-redirect.js +12 -12
- package/public/js/cookie-consent.js +56 -56
- package/public/js/wab-demo-page.js +721 -721
- package/public/js/ws-client.js +74 -74
- package/public/llms-full.txt +360 -309
- package/public/llms.txt +125 -86
- package/public/login.html +85 -83
- package/public/mesh-dashboard.html +328 -328
- package/public/openapi.json +580 -580
- package/public/phone-shield.html +281 -0
- package/public/premium-dashboard.html +2489 -2487
- package/public/premium.html +793 -791
- package/public/privacy.html +297 -295
- package/public/register.html +105 -103
- package/public/robots.txt +87 -87
- package/public/script/wab-consent.d.ts +36 -36
- package/public/script/wab-consent.js +104 -104
- package/public/script/wab-schema.js +131 -131
- package/public/script/wab.d.ts +108 -108
- package/public/script/wab.min.js +580 -580
- package/public/security.txt +8 -0
- package/public/terms.html +256 -254
- package/script/ai-agent-bridge.js +1754 -1754
- package/sdk/README.md +99 -99
- package/sdk/agent-mesh.js +449 -449
- package/sdk/commander.js +262 -262
- package/sdk/index.d.ts +464 -464
- package/sdk/index.js +18 -1
- package/sdk/multi-agent.js +318 -318
- package/sdk/package.json +12 -1
- package/sdk/safety-shield.js +219 -0
- package/sdk/schema-discovery.js +83 -83
- package/server/adapters/index.js +520 -520
- package/server/config/plans.js +367 -367
- package/server/config/secrets.js +102 -102
- package/server/control-plane/index.js +301 -301
- package/server/data-plane/index.js +354 -354
- package/server/index.js +175 -19
- package/server/llm/index.js +404 -404
- package/server/middleware/adminAuth.js +35 -35
- package/server/middleware/auth.js +50 -50
- package/server/middleware/featureGate.js +88 -88
- package/server/middleware/rateLimits.js +100 -100
- package/server/middleware/sensitiveAction.js +157 -0
- package/server/migrations/001_add_analytics_indexes.sql +7 -7
- package/server/migrations/002_premium_features.sql +418 -418
- package/server/migrations/003_ads_integer_cents.sql +33 -33
- package/server/migrations/004_agent_os.sql +158 -158
- package/server/migrations/005_marketplace_metering.sql +126 -126
- package/server/models/adapters/index.js +33 -33
- package/server/models/adapters/mysql.js +183 -183
- package/server/models/adapters/postgresql.js +172 -172
- package/server/models/adapters/sqlite.js +7 -7
- package/server/models/db.js +681 -681
- package/server/observability/failure-analysis.js +337 -337
- package/server/observability/index.js +394 -394
- package/server/protocol/capabilities.js +223 -223
- package/server/protocol/index.js +243 -243
- package/server/protocol/schema.js +584 -584
- package/server/registry/certification.js +271 -271
- package/server/registry/index.js +326 -326
- package/server/routes/admin-premium.js +671 -671
- package/server/routes/admin.js +261 -261
- package/server/routes/ads.js +130 -130
- package/server/routes/agent-workspace.js +540 -378
- package/server/routes/api.js +150 -150
- package/server/routes/auth.js +71 -71
- package/server/routes/billing.js +45 -45
- package/server/routes/commander.js +316 -316
- package/server/routes/demo-showcase.js +332 -0
- package/server/routes/demo-store.js +154 -0
- package/server/routes/discovery.js +417 -406
- package/server/routes/gateway.js +173 -0
- package/server/routes/license.js +251 -240
- package/server/routes/mesh.js +469 -469
- package/server/routes/noscript.js +543 -543
- package/server/routes/premium-v2.js +686 -686
- package/server/routes/premium.js +724 -724
- package/server/routes/runtime.js +2148 -2147
- package/server/routes/sovereign.js +465 -385
- package/server/routes/universal.js +200 -177
- package/server/routes/wab-api.js +850 -491
- package/server/runtime/container-worker.js +111 -111
- package/server/runtime/container.js +448 -448
- package/server/runtime/distributed-worker.js +362 -362
- package/server/runtime/event-bus.js +210 -210
- package/server/runtime/index.js +253 -253
- package/server/runtime/queue.js +599 -599
- package/server/runtime/replay.js +666 -666
- package/server/runtime/sandbox.js +266 -266
- package/server/runtime/scheduler.js +534 -534
- package/server/runtime/session-engine.js +293 -293
- package/server/runtime/state-manager.js +188 -188
- package/server/security/cross-site-redactor.js +196 -0
- package/server/security/dry-run.js +180 -0
- package/server/security/human-gate-rate-limit.js +147 -0
- package/server/security/human-gate-transports.js +178 -0
- package/server/security/human-gate.js +281 -0
- package/server/security/index.js +368 -368
- package/server/security/intent-engine.js +245 -0
- package/server/security/reward-guard.js +171 -0
- package/server/security/rollback-store.js +239 -0
- package/server/security/token-scope.js +404 -0
- package/server/security/url-policy.js +139 -0
- package/server/services/agent-chat.js +506 -506
- package/server/services/agent-learning.js +601 -575
- package/server/services/agent-memory.js +625 -625
- package/server/services/agent-mesh.js +555 -539
- package/server/services/agent-symphony.js +717 -717
- package/server/services/agent-tasks.js +1807 -1807
- package/server/services/api-key-engine.js +292 -0
- package/server/services/cluster.js +894 -894
- package/server/services/commander.js +738 -738
- package/server/services/edge-compute.js +440 -440
- package/server/services/email.js +204 -204
- package/server/services/hosted-runtime.js +205 -205
- package/server/services/lfd.js +635 -616
- package/server/services/local-ai.js +389 -389
- package/server/services/marketplace.js +270 -270
- package/server/services/metering.js +182 -182
- package/server/services/modules/affiliate-intelligence.js +93 -0
- package/server/services/modules/agent-firewall.js +90 -0
- package/server/services/modules/bounty.js +89 -0
- package/server/services/modules/collective-bargaining.js +92 -0
- package/server/services/modules/dark-pattern.js +66 -0
- package/server/services/modules/gov-intelligence.js +45 -0
- package/server/services/modules/neural.js +55 -0
- package/server/services/modules/notary.js +49 -0
- package/server/services/modules/price-time-machine.js +86 -0
- package/server/services/modules/protocol.js +104 -0
- package/server/services/negotiation.js +439 -439
- package/server/services/plugins.js +771 -771
- package/server/services/premium.js +1 -1
- package/server/services/price-intelligence.js +566 -565
- package/server/services/price-shield.js +1137 -1137
- package/server/services/reputation.js +465 -465
- package/server/services/search-engine.js +357 -357
- package/server/services/security.js +513 -513
- package/server/services/self-healing.js +843 -843
- package/server/services/sovereign-shield.js +542 -0
- package/server/services/stripe.js +192 -192
- package/server/services/swarm.js +788 -788
- package/server/services/universal-scraper.js +662 -661
- package/server/services/verification.js +481 -481
- package/server/services/vision.js +1163 -1163
- package/server/utils/cache.js +125 -125
- package/server/utils/migrate.js +81 -81
- package/server/utils/safe-fetch.js +228 -0
- package/server/utils/secureFields.js +50 -50
- package/server/ws.js +161 -161
- package/templates/artisan-marketplace.yaml +104 -104
- package/templates/book-price-scout.yaml +98 -98
- package/templates/electronics-price-tracker.yaml +108 -108
- package/templates/flight-deal-hunter.yaml +113 -113
- package/templates/freelancer-direct.yaml +116 -116
- package/templates/grocery-price-compare.yaml +93 -93
- package/templates/hotel-direct-booking.yaml +113 -113
- package/templates/local-services.yaml +98 -98
- package/templates/olive-oil-tunisia.yaml +88 -88
- package/templates/organic-farm-fresh.yaml +101 -101
- package/templates/restaurant-direct.yaml +97 -97
- package/server/services/fairness-engine.js +0 -409
- package/server/services/fairness.js +0 -420
package/public/demo.html
CHANGED
|
@@ -1,5 +1,1774 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
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>WAB Interactive Demo — Web Agent Bridge v3.0</title>
|
|
7
|
+
<meta name="description" content="Interactive demo of all Web Agent Bridge capabilities: Agent Chat, Universal Analysis, Negotiation, Multi-Agent Mesh, Vision, LfD, Reputation, Price Shield, and more.">
|
|
8
|
+
<style>body{background:#0a0e1a;color:#f0f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;min-height:100vh}</style>
|
|
9
|
+
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
|
10
|
+
<noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"></noscript>
|
|
11
|
+
<style>
|
|
12
|
+
*{box-sizing:border-box;margin:0;padding:0}
|
|
13
|
+
:root{--bg:#050a12;--bg2:#0a1020;--bg3:#0d1528;--bg4:#111d35;--surface:#131d33;--border:#1a2744;--border2:#243352;--text:#e2e8f0;--text2:#cbd5e1;--muted:#64748b;--dim:#475569;--blue:#3b82f6;--purple:#8b5cf6;--green:#10b981;--emerald:#34d399;--amber:#f59e0b;--red:#ef4444;--cyan:#06b6d4;--pink:#ec4899;--indigo:#6366f1;--teal:#14b8a6;--sky:#0ea5e9;--orange:#f97316;--lime:#84cc16;--rose:#f43f5e;--grad1:linear-gradient(135deg,#3b82f6,#8b5cf6);--grad2:linear-gradient(135deg,#06b6d4,#3b82f6);--grad3:linear-gradient(135deg,#10b981,#06b6d4);--grad4:linear-gradient(135deg,#f59e0b,#f97316);--grad5:linear-gradient(135deg,#ec4899,#8b5cf6);--shadow:0 4px 24px rgba(0,0,0,0.4);--glow-blue:0 0 20px rgba(59,130,246,0.15);--glow-green:0 0 20px rgba(16,185,129,0.15);--glow-purple:0 0 20px rgba(139,92,246,0.15)}
|
|
14
|
+
html{scroll-behavior:smooth}
|
|
15
|
+
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
|
|
16
|
+
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
|
|
17
|
+
button{font-family:inherit;cursor:pointer}
|
|
18
|
+
code,.mono{font-family:'JetBrains Mono',monospace}
|
|
19
|
+
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}
|
|
20
|
+
|
|
21
|
+
.nav{position:sticky;top:0;z-index:100;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(5,10,18,0.92);backdrop-filter:blur(12px);height:52px}
|
|
22
|
+
.nav-brand{font-weight:900;font-size:1.05rem;display:flex;align-items:center;gap:10px}
|
|
23
|
+
.nav-brand span{background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
24
|
+
.nav-badge{font-size:0.6rem;background:var(--grad1);color:#fff;padding:2px 8px;border-radius:10px;font-weight:700}
|
|
25
|
+
.nav-links{display:flex;gap:6px;align-items:center}
|
|
26
|
+
.nav-link{color:var(--muted);font-size:0.8rem;padding:6px 12px;border-radius:6px;transition:all 0.15s;text-decoration:none}
|
|
27
|
+
.nav-link:hover{color:var(--text);background:var(--bg3);text-decoration:none}
|
|
28
|
+
|
|
29
|
+
.hero{text-align:center;padding:48px 24px 32px;position:relative;overflow:hidden}
|
|
30
|
+
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(59,130,246,0.06) 0%,transparent 50%);pointer-events:none}
|
|
31
|
+
.hero h1{font-size:2.4rem;font-weight:900;line-height:1.15;margin-bottom:12px}
|
|
32
|
+
.hero h1 .grad{background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
33
|
+
.hero p{color:var(--muted);font-size:1rem;max-width:650px;margin:0 auto 24px;line-height:1.6}
|
|
34
|
+
.hero-stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
|
|
35
|
+
.hero-stat{text-align:center}
|
|
36
|
+
.hero-stat .val{font-size:1.8rem;font-weight:900;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
37
|
+
.hero-stat .lbl{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
|
|
38
|
+
|
|
39
|
+
.cat-nav{position:sticky;top:52px;z-index:90;background:rgba(5,10,18,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 16px;overflow-x:auto;white-space:nowrap;display:flex;gap:4px;-webkit-overflow-scrolling:touch}
|
|
40
|
+
.cat-nav::-webkit-scrollbar{height:0}
|
|
41
|
+
.cat-btn{padding:10px 16px;font-size:0.76rem;font-weight:600;color:var(--muted);border:none;background:none;border-bottom:2px solid transparent;transition:all 0.15s;white-space:nowrap}
|
|
42
|
+
.cat-btn:hover{color:var(--text)}
|
|
43
|
+
.cat-btn.active{color:var(--blue);border-bottom-color:var(--blue)}
|
|
44
|
+
|
|
45
|
+
.section{padding:40px 24px;max-width:1280px;margin:0 auto}
|
|
46
|
+
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:24px}
|
|
47
|
+
.section-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
|
|
48
|
+
.section-title{font-size:1.25rem;font-weight:800}
|
|
49
|
+
.section-desc{font-size:0.82rem;color:var(--muted);margin-top:2px}
|
|
50
|
+
|
|
51
|
+
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px}
|
|
52
|
+
@media(max-width:450px){.demo-grid{grid-template-columns:1fr}}
|
|
53
|
+
|
|
54
|
+
.demo-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all 0.2s}
|
|
55
|
+
.demo-card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
|
|
56
|
+
.demo-card-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
|
57
|
+
.demo-card-head h3{font-size:0.88rem;font-weight:700;display:flex;align-items:center;gap:8px}
|
|
58
|
+
.demo-card-head .method{font-size:0.62rem;font-weight:700;padding:2px 7px;border-radius:4px;font-family:'JetBrains Mono',monospace}
|
|
59
|
+
.method-get{background:rgba(16,185,129,0.15);color:var(--green)}
|
|
60
|
+
.method-post{background:rgba(245,158,11,0.15);color:var(--amber)}
|
|
61
|
+
.demo-card-body{padding:18px}
|
|
62
|
+
.demo-card-body .endpoint{font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--cyan);background:var(--bg2);padding:6px 10px;border-radius:6px;margin-bottom:12px;display:block;word-break:break-all}
|
|
63
|
+
.demo-card-body .desc{font-size:0.78rem;color:var(--muted);line-height:1.5;margin-bottom:14px}
|
|
64
|
+
|
|
65
|
+
.form-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
|
|
66
|
+
.form-input{flex:1;min-width:120px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:0.78rem;outline:none;transition:border-color 0.15s}
|
|
67
|
+
.form-input:focus{border-color:var(--blue)}
|
|
68
|
+
.form-input::placeholder{color:var(--dim)}
|
|
69
|
+
.run-btn{padding:8px 18px;border:none;border-radius:6px;font-weight:700;font-size:0.78rem;color:#fff;transition:all 0.15s;display:flex;align-items:center;gap:6px;white-space:nowrap}
|
|
70
|
+
.run-btn:hover{opacity:0.85;transform:translateY(-1px)}
|
|
71
|
+
.run-btn:active{transform:translateY(0)}
|
|
72
|
+
.run-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
|
|
73
|
+
.run-btn.blue{background:var(--grad2)}
|
|
74
|
+
.run-btn.green{background:var(--grad3)}
|
|
75
|
+
.run-btn.purple{background:var(--grad5)}
|
|
76
|
+
.run-btn.orange{background:var(--grad4)}
|
|
77
|
+
|
|
78
|
+
.response-area{margin-top:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;display:none}
|
|
79
|
+
.response-area.show{display:block}
|
|
80
|
+
.response-head{padding:6px 12px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:0.68rem}
|
|
81
|
+
.response-status{font-weight:700;font-family:'JetBrains Mono',monospace}
|
|
82
|
+
.response-status.ok{color:var(--green)}.response-status.err{color:var(--red)}
|
|
83
|
+
.response-time{color:var(--dim);font-family:'JetBrains Mono',monospace}
|
|
84
|
+
.response-body{padding:12px;max-height:280px;overflow:auto;font-family:'JetBrains Mono',monospace;font-size:0.72rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--text2)}
|
|
85
|
+
.response-body .json-key{color:var(--purple)}.response-body .json-str{color:var(--green)}.response-body .json-num{color:var(--amber)}.response-body .json-bool{color:var(--blue)}.response-body .json-null{color:var(--dim)}
|
|
86
|
+
|
|
87
|
+
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite}
|
|
88
|
+
@keyframes spin{to{transform:rotate(360deg)}}
|
|
89
|
+
|
|
90
|
+
.chat-container{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;max-width:700px}
|
|
91
|
+
.chat-messages{height:320px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
|
|
92
|
+
.chat-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:0.82rem;line-height:1.5;animation:fadeIn 0.3s ease}
|
|
93
|
+
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
|
|
94
|
+
.chat-msg.user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
|
|
95
|
+
.chat-msg.agent{align-self:flex-start;background:var(--bg3);border:1px solid var(--border);border-bottom-left-radius:4px}
|
|
96
|
+
.chat-msg.system{align-self:center;background:var(--bg2);color:var(--muted);font-size:0.75rem;border-radius:8px}
|
|
97
|
+
.chat-msg .intent-badge{display:inline-block;background:var(--grad5);color:#fff;font-size:0.65rem;padding:1px 8px;border-radius:8px;margin-top:6px;font-weight:600}
|
|
98
|
+
.chat-input-row{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg2)}
|
|
99
|
+
.chat-input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text);font-size:0.85rem;outline:none}
|
|
100
|
+
.chat-input:focus{border-color:var(--blue)}
|
|
101
|
+
.chat-send{background:var(--grad1);color:#fff;border:none;border-radius:8px;padding:10px 20px;font-weight:700;font-size:0.82rem}
|
|
102
|
+
|
|
103
|
+
.live-counter{display:flex;align-items:center;gap:6px;font-size:0.72rem;color:var(--green)}
|
|
104
|
+
.live-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
|
|
105
|
+
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.8)}}
|
|
106
|
+
|
|
107
|
+
.health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px}
|
|
108
|
+
.health-item{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center}
|
|
109
|
+
.health-item .h-val{font-size:1.1rem;font-weight:800;margin-bottom:2px}
|
|
110
|
+
.health-item .h-lbl{font-size:0.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px}
|
|
111
|
+
.health-ok .h-val{color:var(--green)}
|
|
112
|
+
.health-warn .h-val{color:var(--amber)}
|
|
113
|
+
|
|
114
|
+
.footer{text-align:center;padding:40px 24px;color:var(--dim);font-size:0.78rem;border-top:1px solid var(--border);margin-top:40px}
|
|
115
|
+
.footer a{color:var(--blue)}
|
|
116
|
+
|
|
117
|
+
@media(max-width:768px){
|
|
118
|
+
.hero h1{font-size:1.6rem}
|
|
119
|
+
.hero-stats{gap:20px}
|
|
120
|
+
.hero-stat .val{font-size:1.3rem}
|
|
121
|
+
.demo-grid{grid-template-columns:1fr}
|
|
122
|
+
.section{padding:24px 16px}
|
|
123
|
+
}
|
|
124
|
+
</style>
|
|
125
|
+
</head>
|
|
126
|
+
<body>
|
|
127
|
+
|
|
128
|
+
<nav class="nav">
|
|
129
|
+
<div class="nav-brand">⚡ <span>Web Agent Bridge</span> <span class="nav-badge">v3.0 DEMO</span></div>
|
|
130
|
+
<div class="nav-links">
|
|
131
|
+
<a class="nav-link" href="/">Home</a>
|
|
132
|
+
<a class="nav-link" href="/docs">Docs</a>
|
|
133
|
+
<a class="nav-link" href="/pwa/">PWA Browser</a>
|
|
134
|
+
<a class="nav-link" href="https://github.com/AboKenan444/web-agent-bridge" target="_blank" rel="noopener">GitHub</a>
|
|
135
|
+
</div>
|
|
136
|
+
</nav>
|
|
137
|
+
|
|
138
|
+
<section class="hero">
|
|
139
|
+
<h1>Experience the <span class="grad">Full Power</span> of WAB</h1>
|
|
140
|
+
<p>Interactive playground for every major capability — click ▶ Run on any card to see live API responses from the production server.</p>
|
|
141
|
+
<div class="hero-stats">
|
|
142
|
+
<div class="hero-stat"><div class="val">200+</div><div class="lbl">API Endpoints</div></div>
|
|
143
|
+
<div class="hero-stat"><div class="val">31</div><div class="lbl">Services</div></div>
|
|
144
|
+
<div class="hero-stat"><div class="val" id="stat-uptime">—</div><div class="lbl">Uptime</div></div>
|
|
145
|
+
<div class="hero-stat"><div class="val" id="stat-version">3.0.0</div><div class="lbl">Version</div></div>
|
|
146
|
+
</div>
|
|
147
|
+
</section>
|
|
148
|
+
|
|
149
|
+
<nav class="cat-nav" id="cat-nav">
|
|
150
|
+
<button class="cat-btn active" data-cat="chat">💬 Chat</button>
|
|
151
|
+
<button class="cat-btn" data-cat="search">🔍 Search</button>
|
|
152
|
+
<button class="cat-btn" data-cat="universal">🌐 Universal</button>
|
|
153
|
+
<button class="cat-btn" data-cat="sovereign">🛡 Sovereign</button>
|
|
154
|
+
<button class="cat-btn" data-cat="workspace">📂 Workspace</button>
|
|
155
|
+
<button class="cat-btn" data-cat="mesh">🕸 Mesh</button>
|
|
156
|
+
<button class="cat-btn" data-cat="commander">🎯 Commander</button>
|
|
157
|
+
<button class="cat-btn" data-cat="runtime">⚙ Agent OS</button>
|
|
158
|
+
<button class="cat-btn" data-cat="vision">👁 Vision</button>
|
|
159
|
+
<button class="cat-btn" data-cat="discovery">📡 Discovery</button>
|
|
160
|
+
<button class="cat-btn" data-cat="health">💚 Health</button>
|
|
161
|
+
</nav>
|
|
162
|
+
|
|
163
|
+
<!-- ══ Agent Chat ══ -->
|
|
164
|
+
<section class="section" id="sec-chat">
|
|
165
|
+
<div class="section-head">
|
|
166
|
+
<div class="section-icon" style="background:rgba(59,130,246,0.12)">💬</div>
|
|
167
|
+
<div><div class="section-title">AI Agent Chat</div><div class="section-desc">Natural language conversation with intent detection — supports shopping, booking, search, URL analysis in Arabic & English</div></div>
|
|
168
|
+
</div>
|
|
169
|
+
<div class="chat-container">
|
|
170
|
+
<div class="chat-messages" id="chat-messages">
|
|
171
|
+
<div class="chat-msg system">👋 Send any message — the agent detects your intent and responds intelligently. Try Arabic or English!</div>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="chat-input-row">
|
|
174
|
+
<input class="chat-input" id="chat-input" placeholder="Try: 'Find me cheap laptops' or 'أبحث عن فنادق في دبي'">
|
|
175
|
+
<button class="chat-send" id="chat-send">Send ➤</button>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
</section>
|
|
179
|
+
|
|
180
|
+
<!-- ══ Search ══ -->
|
|
181
|
+
<section class="section" id="sec-search">
|
|
182
|
+
<div class="section-head">
|
|
183
|
+
<div class="section-icon" style="background:rgba(6,182,212,0.12)">🔍</div>
|
|
184
|
+
<div><div class="section-title">Search Engine</div><div class="section-desc">Full-text search with autocomplete and trending analytics</div></div>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="demo-grid">
|
|
187
|
+
<div class="demo-card"><div class="demo-card-head"><h3>Full-Text Search</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/search?q={query}</code><div class="desc">Search the WAB knowledge base with relevance scoring.</div><div class="form-row"><input class="form-input" id="search-q" placeholder="e.g. agent" value="agent"><button class="run-btn blue" onclick="D.get('/api/search?q='+encodeURIComponent(E('search-q')),'res-search')">▶ Search</button></div><div class="response-area" id="res-search"></div></div></div>
|
|
188
|
+
<div class="demo-card"><div class="demo-card-head"><h3>Autocomplete</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/search/suggest?q={prefix}</code><div class="desc">Real-time autocomplete suggestions as you type.</div><div class="form-row"><input class="form-input" id="suggest-q" placeholder="e.g. pri" value="pri"><button class="run-btn blue" onclick="D.get('/api/search/suggest?q='+encodeURIComponent(E('suggest-q')),'res-suggest')">▶ Suggest</button></div><div class="response-area" id="res-suggest"></div></div></div>
|
|
189
|
+
<div class="demo-card"><div class="demo-card-head"><h3>Trending Searches</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/search/trending</code><div class="desc">Most popular searches with count metrics.</div><div class="form-row"><button class="run-btn green" onclick="D.get('/api/search/trending','res-trending')">▶ Trending</button></div><div class="response-area" id="res-trending"></div></div></div>
|
|
190
|
+
</div>
|
|
191
|
+
</section>
|
|
192
|
+
|
|
193
|
+
<!-- ══ Universal Agent ══ -->
|
|
194
|
+
<section class="section" id="sec-universal">
|
|
195
|
+
<div class="section-head">
|
|
196
|
+
<div class="section-icon" style="background:rgba(16,185,129,0.12)">🌐</div>
|
|
197
|
+
<div><div class="section-title">Universal Agent</div><div class="section-desc">Analyze, compare, and find deals on ANY website — no bridge integration required</div></div>
|
|
198
|
+
</div>
|
|
199
|
+
<div class="demo-grid">
|
|
200
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🏷 Find Best Deals</h3><span class="method method-post">POST</span></div><div class="demo-card-body"><code class="endpoint">/api/universal/deals</code><div class="desc">Search across multiple sources with fairness ranking.</div><div class="form-row"><input class="form-input" id="deals-q" placeholder="Product..." value="laptop"><button class="run-btn green" onclick="D.post('/api/universal/deals',{query:E('deals-q')},'res-deals')">▶ Find</button></div><div class="response-area" id="res-deals"></div></div></div>
|
|
201
|
+
<div class="demo-card"><div class="demo-card-head"><h3>⚖ Fairness Analysis</h3><span class="method method-post">POST</span></div><div class="demo-card-body"><code class="endpoint">/api/universal/fairness</code><div class="desc">Evaluate any website on trust, pricing transparency, openness. Score 0–100.</div><div class="form-row"><input class="form-input" id="fair-url" placeholder="Domain..." value="books.toscrape.com"><button class="run-btn green" onclick="D.post('/api/universal/fairness',{url:E('fair-url')},'res-fairness')">▶ Analyze</button></div><div class="response-area" id="res-fairness"></div></div></div>
|
|
202
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🔬 Full Site Analysis</h3><span class="method method-post">POST</span></div><div class="demo-card-body"><code class="endpoint">/api/universal/analyze</code><div class="desc">Complete analysis: extraction, fraud detection, dark pattern scanning.</div><div class="form-row"><input class="form-input" id="analyze-url" placeholder="URL..." value="https://books.toscrape.com"><button class="run-btn green" onclick="D.post('/api/universal/analyze',{url:E('analyze-url')},'res-analyze')">▶ Analyze</button></div><div class="response-area" id="res-analyze"></div></div></div>
|
|
203
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🏆 Top Fair Sites</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/universal/top-fair</code><div class="desc">Leaderboard of fairest websites ranked by the fairness engine.</div><div class="form-row"><button class="run-btn green" onclick="D.get('/api/universal/top-fair','res-topfair')">▶ Leaderboard</button></div><div class="response-area" id="res-topfair"></div></div></div>
|
|
204
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🕵 Dark Pattern Detection</h3><span class="method method-post">POST</span></div><div class="demo-card-body"><code class="endpoint">/api/universal/dark-patterns</code><div class="desc">Detect manipulative UI patterns: hidden fees, fake urgency, misleading options.</div><div class="form-row"><input class="form-input" id="dark-text" placeholder="Page text..." value="Only 2 left! Buy NOW before price goes up!"><button class="run-btn green" onclick="D.post('/api/universal/dark-patterns',{text:E('dark-text')},'res-dark')">▶ Detect</button></div><div class="response-area" id="res-dark"></div></div></div>
|
|
205
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📊 Sources</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/universal/sources</code><div class="desc">Competing sources by category for cross-site comparisons.</div><div class="form-row"><button class="run-btn green" onclick="D.get('/api/universal/sources','res-sources')">▶ Sources</button></div><div class="response-area" id="res-sources"></div></div></div>
|
|
206
|
+
</div>
|
|
207
|
+
</section>
|
|
208
|
+
|
|
209
|
+
<!-- ══ Sovereign ══ -->
|
|
210
|
+
<section class="section" id="sec-sovereign">
|
|
211
|
+
<div class="section-head">
|
|
212
|
+
<div class="section-icon" style="background:rgba(139,92,246,0.12)">🛡</div>
|
|
213
|
+
<div><div class="section-title">Sovereign Layer</div><div class="section-desc">Decentralized reputation, negotiation, anti-hallucination verification, price discrimination detection</div></div>
|
|
214
|
+
</div>
|
|
215
|
+
<div class="demo-grid">
|
|
216
|
+
<div class="demo-card"><div class="demo-card-head"><h3>⭐ Reputation Leaderboard</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/sovereign/reputation/leaderboard</code><div class="desc">Rankings based on decentralized trust attestations from AI agents.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/sovereign/reputation/leaderboard','res-repl')">▶ Leaderboard</button></div><div class="response-area" id="res-repl"></div></div></div>
|
|
217
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🤝 Negotiation Engine</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/negotiate</code><div class="desc">Multi-round price negotiation between AI agents and websites.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/negotiate','res-neg')">▶ Explore</button></div><div class="response-area" id="res-neg"></div></div></div>
|
|
218
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🔎 Anti-Hallucination Shield</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/sovereign/verify/stats</code><div class="desc">DOM vs Vision verification — catches AI hallucinations in real-time.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/sovereign/verify/stats','res-verify')">▶ Stats</button></div><div class="response-area" id="res-verify"></div></div></div>
|
|
219
|
+
<div class="demo-card"><div class="demo-card-head"><h3>💰 Price Shield</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/sovereign/price-shield/stats</code><div class="desc">Detects dynamic pricing discrimination with multiple personas.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/sovereign/price-shield/stats','res-pshield')">▶ Stats</button></div><div class="response-area" id="res-pshield"></div></div></div>
|
|
220
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🎭 Identity Personas</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/sovereign/price-shield/personas</code><div class="desc">Stealth scanning personas: mobile, desktop, VPN, different regions.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/sovereign/price-shield/personas','res-personas')">▶ Personas</button></div><div class="response-area" id="res-personas"></div></div></div>
|
|
221
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🔍 Reputation Search</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/sovereign/reputation/search?category=...</code><div class="desc">Search trusted sites by category and minimum reputation score.</div><div class="form-row"><input class="form-input" id="rep-cat" placeholder="Category" value="e-commerce"><input class="form-input" id="rep-min" type="number" value="0" style="max-width:80px"><button class="run-btn purple" onclick="D.get('/api/sovereign/reputation/search?category='+encodeURIComponent(E('rep-cat'))+'&minScore='+E('rep-min'),'res-reps')">▶ Search</button></div><div class="response-area" id="res-reps"></div></div></div>
|
|
222
|
+
</div>
|
|
223
|
+
</section>
|
|
224
|
+
|
|
225
|
+
<!-- ══ Workspace ══ -->
|
|
226
|
+
<section class="section" id="sec-workspace">
|
|
227
|
+
<div class="section-head">
|
|
228
|
+
<div class="section-icon" style="background:rgba(245,158,11,0.12)">📂</div>
|
|
229
|
+
<div><div class="section-title">Workspace</div><div class="section-desc">Subscriptions, deal tracking, bookmarks, and browsing history (requires auth)</div></div>
|
|
230
|
+
</div>
|
|
231
|
+
<div class="demo-grid">
|
|
232
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🔒 Register / Login</h3><span class="method method-post">POST</span></div><div class="demo-card-body"><code class="endpoint">/api/auth/register → /api/auth/login</code><div class="desc">Create account or login to get JWT token for authenticated demos.</div><div class="form-row"><input class="form-input" id="auth-email" placeholder="Email"><input class="form-input" id="auth-pass" placeholder="Password" type="password"></div><div class="form-row"><input class="form-input" id="auth-name" placeholder="Name (register)"><button class="run-btn orange" onclick="D.register()">Register</button><button class="run-btn blue" onclick="D.login()">Login</button></div><div style="margin-top:8px;font-size:0.72rem;color:var(--muted)" id="auth-status">⚠ No token — register or login first</div><div class="response-area" id="res-auth"></div></div></div>
|
|
233
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📊 Subscription</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/workspace/subscription</code><div class="desc">Plan, usage stats, daily limits, and total savings.</div><div class="form-row"><button class="run-btn orange" onclick="D.auth('/api/workspace/subscription','res-sub')">▶ Get</button></div><div class="response-area" id="res-sub"></div></div></div>
|
|
234
|
+
<div class="demo-card"><div class="demo-card-head"><h3>⭐ Bookmarks</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/workspace/favorites</code><div class="desc">Manage bookmarks — add, list, organize by folders.</div><div class="form-row"><button class="run-btn orange" onclick="D.auth('/api/workspace/favorites','res-fav')">▶ List</button><button class="run-btn blue" onclick="document.getElementById('fav-form').style.display=document.getElementById('fav-form').style.display==='none'?'flex':'none'">+ Add</button></div><div class="form-row" id="fav-form" style="display:none"><input class="form-input" id="fav-url" placeholder="URL" value="https://github.com"><input class="form-input" id="fav-title" value="GitHub"><input class="form-input" id="fav-folder" value="dev" style="max-width:80px"><button class="run-btn green" onclick="D.postAuth('/api/workspace/favorites',{url:E('fav-url'),title:E('fav-title'),folder:E('fav-folder')},'res-fav')">Save</button></div><div class="response-area" id="res-fav"></div></div></div>
|
|
235
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📜 History</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/workspace/history</code><div class="desc">Browse and search browsing history with pagination.</div><div class="form-row"><input class="form-input" id="hist-q" placeholder="Search..."><button class="run-btn orange" onclick="D.auth('/api/workspace/history'+(E('hist-q')?'?q='+encodeURIComponent(E('hist-q')):''),'res-hist')">▶ History</button></div><div class="response-area" id="res-hist"></div></div></div>
|
|
236
|
+
<div class="demo-card"><div class="demo-card-head"><h3>👤 Profile</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/auth/me</code><div class="desc">View your authenticated user profile data.</div><div class="form-row"><button class="run-btn orange" onclick="D.auth('/api/auth/me','res-profile')">▶ Profile</button></div><div class="response-area" id="res-profile"></div></div></div>
|
|
237
|
+
</div>
|
|
238
|
+
</section>
|
|
239
|
+
|
|
240
|
+
<!-- ══ Mesh ══ -->
|
|
241
|
+
<section class="section" id="sec-mesh">
|
|
242
|
+
<div class="section-head">
|
|
243
|
+
<div class="section-icon" style="background:rgba(236,72,153,0.12)">🕸</div>
|
|
244
|
+
<div><div class="section-title">Agent Mesh Network</div><div class="section-desc">Multi-agent collaboration: registry, messaging, knowledge sharing, voting, RL, orchestration</div></div>
|
|
245
|
+
</div>
|
|
246
|
+
<div class="demo-grid">
|
|
247
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🤖 Active Agents</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/mesh/agents</code><div class="desc">All registered agents with roles, capabilities, and status.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/mesh/agents','res-ma')">▶ List</button></div><div class="response-area" id="res-ma"></div></div></div>
|
|
248
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📡 Channels</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/mesh/channels</code><div class="desc">Messaging channels for agent coordination.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/mesh/channels','res-mc')">▶ Channels</button></div><div class="response-area" id="res-mc"></div></div></div>
|
|
249
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🧠 Knowledge Base</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/mesh/knowledge</code><div class="desc">Shared knowledge graph — agents contribute and query verified learnings.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/mesh/knowledge','res-mk')">▶ Browse</button></div><div class="response-area" id="res-mk"></div></div></div>
|
|
250
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📊 Mesh Stats</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/mesh/stats</code><div class="desc">Agent counts, message throughput, and knowledge entries.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/mesh/stats','res-ms')">▶ Stats</button></div><div class="response-area" id="res-ms"></div></div></div>
|
|
251
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🎵 Symphony</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/mesh/symphony/templates</code><div class="desc">Multi-agent composition: parallel, sequential, conditional workflows.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/mesh/symphony/templates','res-sym')">▶ Templates</button></div><div class="response-area" id="res-sym"></div></div></div>
|
|
252
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🎓 Reinforcement Learning</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/mesh/learning/stats</code><div class="desc">Decisions, rewards, and strategy evolution over time.</div><div class="form-row"><button class="run-btn purple" onclick="D.get('/api/mesh/learning/stats','res-rl')">▶ Stats</button></div><div class="response-area" id="res-rl"></div></div></div>
|
|
253
|
+
</div>
|
|
254
|
+
</section>
|
|
255
|
+
|
|
256
|
+
<!-- ══ Commander ══ -->
|
|
257
|
+
<section class="section" id="sec-commander">
|
|
258
|
+
<div class="section-head">
|
|
259
|
+
<div class="section-icon" style="background:rgba(249,115,22,0.12)">🎯</div>
|
|
260
|
+
<div><div class="section-title">Commander & Edge Computing</div><div class="section-desc">Mission decomposition, multi-step orchestration, distributed edge nodes</div></div>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="demo-grid">
|
|
263
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🧩 Strategies</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/commander/strategies</code><div class="desc">Sequential, parallel, conditional, iterative, hybrid decomposition.</div><div class="form-row"><button class="run-btn orange" onclick="D.get('/api/commander/strategies','res-str')">▶ Get</button></div><div class="response-area" id="res-str"></div></div></div>
|
|
264
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🚀 Missions</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/commander/missions</code><div class="desc">Complex multi-step operations decomposed into sub-tasks.</div><div class="form-row"><button class="run-btn orange" onclick="D.get('/api/commander/missions','res-mis')">▶ List</button></div><div class="response-area" id="res-mis"></div></div></div>
|
|
265
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🌎 Edge Nodes</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/commander/edge/nodes</code><div class="desc">Distributed edge computing nodes near data sources.</div><div class="form-row"><button class="run-btn orange" onclick="D.get('/api/commander/edge/nodes','res-edge')">▶ Nodes</button></div><div class="response-area" id="res-edge"></div></div></div>
|
|
266
|
+
</div>
|
|
267
|
+
</section>
|
|
268
|
+
|
|
269
|
+
<!-- ══ Agent OS ══ -->
|
|
270
|
+
<section class="section" id="sec-runtime">
|
|
271
|
+
<div class="section-head">
|
|
272
|
+
<div class="section-icon" style="background:rgba(99,102,241,0.12)">⚙</div>
|
|
273
|
+
<div><div class="section-title">Agent OS — Runtime Infrastructure</div><div class="section-desc">Full OS for AI agents: identity, tasks, execution, policies, adapters, marketplace, cluster, containers</div></div>
|
|
274
|
+
</div>
|
|
275
|
+
<div class="demo-grid">
|
|
276
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📋 Protocol</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/protocol</code><div class="desc">WAB protocol spec — commands, capabilities, and version.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/protocol','res-proto')">▶ Get</button></div><div class="response-area" id="res-proto"></div></div></div>
|
|
277
|
+
<div class="demo-card"><div class="demo-card-head"><h3>💳 Plans & Pricing</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/plans</code><div class="desc">Agent plans with rate limits and feature gates.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/plans','res-plans')">▶ Plans</button></div><div class="response-area" id="res-plans"></div></div></div>
|
|
278
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🔌 Adapters</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/adapters</code><div class="desc">MCP, REST, and Browser adapters — connect via any protocol.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/adapters','res-adap')">▶ List</button></div><div class="response-area" id="res-adap"></div></div></div>
|
|
279
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🏪 Marketplace</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/marketplace</code><div class="desc">Agent templates, plugins, and compositions.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/marketplace','res-mkt')">▶ Browse</button></div><div class="response-area" id="res-mkt"></div></div></div>
|
|
280
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🌐 Cluster</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/cluster/status</code><div class="desc">Distributed execution cluster — workers, queues, capacity.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/cluster/status','res-clu')">▶ Status</button></div><div class="response-area" id="res-clu"></div></div></div>
|
|
281
|
+
<div class="demo-card"><div class="demo-card-head"><h3>⏪ Replay Engine</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/replay/stats</code><div class="desc">Deterministic replay for debugging and audit.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/replay/stats','res-rep')">▶ Stats</button></div><div class="response-area" id="res-rep"></div></div></div>
|
|
282
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🔥 Failure Analysis</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/failures/analysis/summary</code><div class="desc">Pattern detection, root cause, and recovery suggestions.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/failures/analysis/summary','res-fail')">▶ Summary</button></div><div class="response-area" id="res-fail"></div></div></div>
|
|
283
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🧠 LLM Gateway</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/llm/models</code><div class="desc">Available LLM models and gateway status.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/llm/models','res-llm')">▶ Models</button></div><div class="response-area" id="res-llm"></div></div></div>
|
|
284
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📊 Usage Metering</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/usage/stats</code><div class="desc">API call tracking, compute time, and billing.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/usage/stats','res-usg')">▶ Stats</button></div><div class="response-area" id="res-usg"></div></div></div>
|
|
285
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📜 Certification</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/certification</code><div class="desc">WAB-certified sites — verified for agent compatibility.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/certification','res-cert')">▶ List</button></div><div class="response-area" id="res-cert"></div></div></div>
|
|
286
|
+
</div>
|
|
287
|
+
</section>
|
|
288
|
+
|
|
289
|
+
<!-- ══ Vision & LfD ══ -->
|
|
290
|
+
<section class="section" id="sec-vision">
|
|
291
|
+
<div class="section-head">
|
|
292
|
+
<div class="section-icon" style="background:rgba(14,165,233,0.12)">👁</div>
|
|
293
|
+
<div><div class="section-title">Vision Engine & Learning from Demonstration</div><div class="section-desc">Local DOM analysis (no external API), element discovery, record-then-replay automation</div></div>
|
|
294
|
+
</div>
|
|
295
|
+
<div class="demo-grid">
|
|
296
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🔭 Vision Models</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/vision/models</code><div class="desc">Supported vision models for local DOM analysis.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/vision/models','res-vm')">▶ Models</button></div><div class="response-area" id="res-vm"></div></div></div>
|
|
297
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📸 Vision History</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/vision/history</code><div class="desc">Cached analysis results — element maps and semantic labels.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/vision/history','res-vh')">▶ History</button></div><div class="response-area" id="res-vh"></div></div></div>
|
|
298
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🎬 LfD Stats</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/lfd/stats</code><div class="desc">Record user actions and auto-generate replayable recipes.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/lfd/stats','res-lfd')">▶ Stats</button></div><div class="response-area" id="res-lfd"></div></div></div>
|
|
299
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📖 Recipes</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/recipes</code><div class="desc">Replayable browser automation recipes.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/recipes','res-rcp')">▶ List</button></div><div class="response-area" id="res-rcp"></div></div></div>
|
|
300
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🔌 Extraction Script</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/os/vision/extraction-script</code><div class="desc">Injectable browser script for DOM element extraction.</div><div class="form-row"><button class="run-btn blue" onclick="D.get('/api/os/vision/extraction-script','res-vex')">▶ Get Script</button></div><div class="response-area" id="res-vex"></div></div></div>
|
|
301
|
+
</div>
|
|
302
|
+
</section>
|
|
303
|
+
|
|
304
|
+
<!-- ══ Discovery ══ -->
|
|
305
|
+
<section class="section" id="sec-discovery">
|
|
306
|
+
<div class="section-head">
|
|
307
|
+
<div class="section-icon" style="background:rgba(20,184,166,0.12)">📡</div>
|
|
308
|
+
<div><div class="section-title">Discovery & Registry</div><div class="section-desc">Auto-discovery protocol, site registry with fairness scoring, standard endpoints</div></div>
|
|
309
|
+
</div>
|
|
310
|
+
<div class="demo-grid">
|
|
311
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📄 .well-known/wab.json</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/.well-known/wab.json</code><div class="desc">Standard auto-discovery for AI agents.</div><div class="form-row"><button class="run-btn green" onclick="D.get('/.well-known/wab.json','res-wk')">▶ Fetch</button></div><div class="response-area" id="res-wk"></div></div></div>
|
|
312
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📂 Public Registry</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/discovery/registry</code><div class="desc">Directory of WAB-enabled sites with fairness scores.</div><div class="form-row"><button class="run-btn green" onclick="D.get('/api/discovery/registry','res-reg')">▶ Browse</button></div><div class="response-area" id="res-reg"></div></div></div>
|
|
313
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🔍 Discovery Search</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/api/discovery/search?q={query}</code><div class="desc">Fairness-weighted search across registered sites.</div><div class="form-row"><input class="form-input" id="disc-q" placeholder="Search..." value="shopping"><button class="run-btn green" onclick="D.get('/api/discovery/search?q='+encodeURIComponent(E('disc-q')),'res-ds')">▶ Search</button></div><div class="response-area" id="res-ds"></div></div></div>
|
|
314
|
+
<div class="demo-card"><div class="demo-card-head"><h3>📘 OpenAPI Spec</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/openapi.json</code><div class="desc">Machine-readable OpenAPI 3.0 specification.</div><div class="form-row"><button class="run-btn green" onclick="D.get('/openapi.json','res-oa')">▶ Fetch</button></div><div class="response-area" id="res-oa"></div></div></div>
|
|
315
|
+
<div class="demo-card"><div class="demo-card-head"><h3>🤖 LLMs.txt</h3><span class="method method-get">GET</span></div><div class="demo-card-body"><code class="endpoint">/llms.txt</code><div class="desc">LLM-optimized text overview of the project.</div><div class="form-row"><button class="run-btn green" onclick="D.text('/llms.txt','res-llmtxt')">▶ Fetch</button></div><div class="response-area" id="res-llmtxt"></div></div></div>
|
|
316
|
+
</div>
|
|
317
|
+
</section>
|
|
318
|
+
|
|
319
|
+
<!-- ══ Health ══ -->
|
|
320
|
+
<section class="section" id="sec-health">
|
|
321
|
+
<div class="section-head">
|
|
322
|
+
<div class="section-icon" style="background:rgba(16,185,129,0.12)">💚</div>
|
|
323
|
+
<div><div class="section-title">System Health & Observability</div><div class="section-desc">Real-time monitoring, metrics, traces, logs, and subsystem status</div></div>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="demo-grid">
|
|
326
|
+
<div class="demo-card" style="grid-column:1/-1">
|
|
327
|
+
<div class="demo-card-head">
|
|
328
|
+
<h3>🏥 Full System Health</h3>
|
|
329
|
+
<div class="live-counter"><div class="live-dot"></div>Live from production</div>
|
|
330
|
+
</div>
|
|
331
|
+
<div class="demo-card-body">
|
|
332
|
+
<code class="endpoint">/api/os/observability/health</code>
|
|
333
|
+
<div class="desc">Comprehensive check across all subsystems — runtime, scheduler, queue, containers, replay, cluster.</div>
|
|
334
|
+
<div class="form-row">
|
|
335
|
+
<button class="run-btn green" onclick="D.health()">▶ Check Health</button>
|
|
336
|
+
<button class="run-btn blue" onclick="D.get('/api/os/observability/metrics','res-health')">📊 Metrics</button>
|
|
337
|
+
<button class="run-btn purple" onclick="D.get('/api/os/observability/traces','res-health')">🔗 Traces</button>
|
|
338
|
+
<button class="run-btn orange" onclick="D.get('/api/os/observability/logs','res-health')">📝 Logs</button>
|
|
339
|
+
</div>
|
|
340
|
+
<div id="health-dashboard"></div>
|
|
341
|
+
<div class="response-area" id="res-health"></div>
|
|
342
|
+
</div>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
</section>
|
|
346
|
+
|
|
347
|
+
<div class="footer">
|
|
348
|
+
<p>Web Agent Bridge v3.0.0 — The Infrastructure Layer Between AI Agents and the Web</p>
|
|
349
|
+
<p style="margin-top:4px"><a href="/">Home</a> · <a href="/docs">Documentation</a> · <a href="/pwa/">PWA Browser</a> · <a href="https://github.com/AboKenan444/web-agent-bridge" target="_blank" rel="noopener">GitHub</a></p>
|
|
350
|
+
</div>
|
|
351
|
+
|
|
352
|
+
<script>
|
|
353
|
+
(function(){
|
|
354
|
+
'use strict';
|
|
355
|
+
var B=location.origin,tk=null;
|
|
356
|
+
function E(id){return document.getElementById(id).value}
|
|
357
|
+
function hl(j){
|
|
358
|
+
if(typeof j!=='string')j=JSON.stringify(j,null,2);
|
|
359
|
+
return j.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
|
|
360
|
+
.replace(/("(\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
|
|
361
|
+
function(m){var c='json-num';if(/^"/.test(m))c=/:\s*$/.test(m)?'json-key':'json-str';else if(/true|false/.test(m))c='json-bool';else if(/null/.test(m))c='json-null';return'<span class="'+c+'">'+m+'</span>'});
|
|
362
|
+
}
|
|
363
|
+
function show(id,st,d,ms){
|
|
364
|
+
var el=document.getElementById(id);if(!el)return;
|
|
365
|
+
var ok=st>=200&&st<400;
|
|
366
|
+
el.className='response-area show';
|
|
367
|
+
el.innerHTML='<div class="response-head"><span class="response-status '+(ok?'ok':'err')+'">'+st+' '+(ok?'OK':'Error')+'</span><span class="response-time">'+ms+'ms</span></div><div class="response-body">'+(typeof d==='string'&&!/^[\[{]/.test(d.trim())?d.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>'):hl(d))+'</div>';
|
|
368
|
+
}
|
|
369
|
+
function loading(id){
|
|
370
|
+
var el=document.getElementById(id);if(!el)return;
|
|
371
|
+
el.className='response-area show';
|
|
372
|
+
el.innerHTML='<div class="response-head"><span class="response-status" style="color:var(--cyan)"><span class="spinner"></span> Loading...</span></div><div class="response-body" style="text-align:center;padding:20px;color:var(--muted)">Calling API...</div>';
|
|
373
|
+
}
|
|
374
|
+
function api(method,path,body,rid){
|
|
375
|
+
loading(rid);var t0=performance.now();
|
|
376
|
+
var o={method:method,headers:{}};
|
|
377
|
+
if(body){o.headers['Content-Type']='application/json';o.body=JSON.stringify(body)}
|
|
378
|
+
if(tk)o.headers['Authorization']='Bearer '+tk;
|
|
379
|
+
return fetch(B+path,o).then(function(r){
|
|
380
|
+
var ms=Math.round(performance.now()-t0);
|
|
381
|
+
return r.json().then(function(d){show(rid,r.status,d,ms);return d})
|
|
382
|
+
.catch(function(){return r.text().then(function(t){show(rid,r.status,t,ms)})});
|
|
383
|
+
}).catch(function(e){show(rid,0,{error:e.message},Math.round(performance.now()-t0))});
|
|
384
|
+
}
|
|
385
|
+
function upAuth(){
|
|
386
|
+
var el=document.getElementById('auth-status');
|
|
387
|
+
el.innerHTML=tk?'\u2705 Token stored \u2014 <span style="color:var(--green);font-family:JetBrains Mono,monospace">'+tk.substring(0,24)+'...</span>':'\u26A0 No token \u2014 register or login first';
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
window.E=E;
|
|
391
|
+
window.D={
|
|
392
|
+
get:function(p,r){return api('GET',p,null,r)},
|
|
393
|
+
post:function(p,b,r){return api('POST',p,b,r)},
|
|
394
|
+
text:function(p,r){
|
|
395
|
+
loading(r);var t0=performance.now();
|
|
396
|
+
fetch(B+p).then(function(x){return x.text().then(function(t){show(r,x.status,t,Math.round(performance.now()-t0))})})
|
|
397
|
+
.catch(function(e){show(r,0,e.message,Math.round(performance.now()-t0))});
|
|
398
|
+
},
|
|
399
|
+
auth:function(p,r){if(!tk)return alert('Please register or login first');return api('GET',p,null,r)},
|
|
400
|
+
postAuth:function(p,b,r){if(!tk)return alert('Please register or login first');return api('POST',p,b,r)},
|
|
401
|
+
register:function(){
|
|
402
|
+
var em=E('auth-email'),pw=E('auth-pass'),nm=E('auth-name');
|
|
403
|
+
if(!em||!pw)return alert('Email & password required');
|
|
404
|
+
api('POST','/api/auth/register',{email:em,password:pw,name:nm||'Demo User'},'res-auth')
|
|
405
|
+
.then(function(d){if(d&&d.token){tk=d.token;upAuth()}});
|
|
406
|
+
},
|
|
407
|
+
login:function(){
|
|
408
|
+
var em=E('auth-email'),pw=E('auth-pass');
|
|
409
|
+
if(!em||!pw)return alert('Email & password required');
|
|
410
|
+
api('POST','/api/auth/login',{email:em,password:pw},'res-auth')
|
|
411
|
+
.then(function(d){if(d&&d.token){tk=d.token;upAuth()}});
|
|
412
|
+
},
|
|
413
|
+
health:function(){
|
|
414
|
+
api('GET','/api/os/observability/health',null,'res-health').then(function(d){
|
|
415
|
+
if(!d||!d.status)return;
|
|
416
|
+
var dash=document.getElementById('health-dashboard');
|
|
417
|
+
var items=[
|
|
418
|
+
{l:'Status',v:d.status,ok:d.status==='healthy'},
|
|
419
|
+
{l:'Version',v:d.version||'\u2014',ok:true},
|
|
420
|
+
{l:'Uptime',v:d.uptime?Math.floor(d.uptime/3600)+'h '+Math.floor((d.uptime%3600)/60)+'m':'\u2014',ok:true},
|
|
421
|
+
{l:'Heap',v:d.memory?Math.round(d.memory.heapUsed/1048576)+'MB':'\u2014',ok:true}
|
|
422
|
+
];
|
|
423
|
+
if(d.subsystems)Object.keys(d.subsystems).forEach(function(k){
|
|
424
|
+
var s=d.subsystems[k];items.push({l:k,v:s.status||'\u2014',ok:s.status==='healthy'||s.status==='ok'});
|
|
425
|
+
});
|
|
426
|
+
var h='<div class="health-grid">';
|
|
427
|
+
items.forEach(function(i){h+='<div class="health-item '+(i.ok?'health-ok':'health-warn')+'"><div class="h-val">'+i.v+'</div><div class="h-lbl">'+i.l+'</div></div>'});
|
|
428
|
+
dash.innerHTML=h+'</div>';
|
|
429
|
+
});
|
|
430
|
+
}
|
|
431
|
+
};
|
|
432
|
+
|
|
433
|
+
// NAV
|
|
434
|
+
document.querySelectorAll('.cat-btn').forEach(function(b){
|
|
435
|
+
b.addEventListener('click',function(){
|
|
436
|
+
document.querySelectorAll('.cat-btn').forEach(function(x){x.classList.remove('active')});
|
|
437
|
+
b.classList.add('active');
|
|
438
|
+
var t=document.getElementById('sec-'+b.dataset.cat);
|
|
439
|
+
if(t)t.scrollIntoView({behavior:'smooth',block:'start'});
|
|
440
|
+
});
|
|
441
|
+
});
|
|
442
|
+
var secs=document.querySelectorAll('.section[id]'),btns=document.querySelectorAll('.cat-btn[data-cat]');
|
|
443
|
+
window.addEventListener('scroll',function(){
|
|
444
|
+
var y=window.scrollY+160;
|
|
445
|
+
secs.forEach(function(s){
|
|
446
|
+
var id=s.id.replace('sec-','');
|
|
447
|
+
if(s.offsetTop<=y&&s.offsetTop+s.offsetHeight>y)
|
|
448
|
+
btns.forEach(function(b){b.classList.toggle('active',b.dataset.cat===id)});
|
|
449
|
+
});
|
|
450
|
+
},{passive:true});
|
|
451
|
+
|
|
452
|
+
// CHAT
|
|
453
|
+
var chatBox=document.getElementById('chat-messages'),chatIn=document.getElementById('chat-input');
|
|
454
|
+
var sid='demo-'+Math.random().toString(36).substr(2,8);
|
|
455
|
+
function addMsg(t,c){var d=document.createElement('div');d.className='chat-msg '+c;d.innerHTML=t;chatBox.appendChild(d);chatBox.scrollTop=chatBox.scrollHeight}
|
|
456
|
+
function sendChat(){
|
|
457
|
+
var msg=chatIn.value.trim();if(!msg)return;chatIn.value='';addMsg(msg,'user');
|
|
458
|
+
fetch(B+'/api/wab/agent-chat',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({message:msg,sessionId:sid})})
|
|
459
|
+
.then(function(r){return r.json()})
|
|
460
|
+
.then(function(d){
|
|
461
|
+
var html=d.response||d.message||JSON.stringify(d);
|
|
462
|
+
if(d.intent)html+='<div class="intent-badge">Intent: '+d.intent+'</div>';
|
|
463
|
+
if(d.task)html+='<div style="margin-top:6px;font-size:0.72rem;color:var(--cyan);font-family:JetBrains Mono,monospace">Task: '+d.task.id+' \u2014 '+d.task.status+'</div>';
|
|
464
|
+
addMsg(html,'agent');
|
|
465
|
+
}).catch(function(e){addMsg('Error: '+e.message,'agent')});
|
|
466
|
+
}
|
|
467
|
+
document.getElementById('chat-send').addEventListener('click',sendChat);
|
|
468
|
+
chatIn.addEventListener('keydown',function(e){if(e.key==='Enter')sendChat()});
|
|
469
|
+
|
|
470
|
+
// INIT
|
|
471
|
+
upAuth();
|
|
472
|
+
fetch(B+'/api/os/observability/health').then(function(r){return r.json()}).then(function(d){
|
|
473
|
+
if(d.version)document.getElementById('stat-version').textContent=d.version;
|
|
474
|
+
if(d.uptime){var h=Math.floor(d.uptime/3600),m=Math.floor((d.uptime%3600)/60);document.getElementById('stat-uptime').textContent=h+'h '+m+'m'}
|
|
475
|
+
}).catch(function(){});
|
|
476
|
+
setTimeout(function(){D.health()},600);
|
|
477
|
+
})();
|
|
478
|
+
</script>
|
|
479
|
+
</body>
|
|
480
|
+
</html>
|
|
481
|
+
<!DOCTYPE html>
|
|
482
|
+
<html lang="en">
|
|
483
|
+
<head>
|
|
484
|
+
<meta charset="UTF-8">
|
|
485
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
486
|
+
<title>WAB Interactive Demo — Web Agent Bridge v3.0</title>
|
|
487
|
+
<meta name="description" content="Interactive demo of all Web Agent Bridge capabilities: Agent Chat, Universal Analysis, Negotiation, Multi-Agent Mesh, Vision, LfD, Reputation, Price Shield, and more.">
|
|
488
|
+
<style>body{background:#0a0e1a;color:#f0f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;min-height:100vh}</style>
|
|
489
|
+
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
|
|
490
|
+
<noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"></noscript>
|
|
491
|
+
<style>
|
|
492
|
+
*{box-sizing:border-box;margin:0;padding:0}
|
|
493
|
+
:root{--bg:#050a12;--bg2:#0a1020;--bg3:#0d1528;--bg4:#111d35;--surface:#131d33;--border:#1a2744;--border2:#243352;--text:#e2e8f0;--text2:#cbd5e1;--muted:#64748b;--dim:#475569;--blue:#3b82f6;--purple:#8b5cf6;--green:#10b981;--emerald:#34d399;--amber:#f59e0b;--red:#ef4444;--cyan:#06b6d4;--pink:#ec4899;--indigo:#6366f1;--teal:#14b8a6;--sky:#0ea5e9;--orange:#f97316;--lime:#84cc16;--rose:#f43f5e;--grad1:linear-gradient(135deg,#3b82f6,#8b5cf6);--grad2:linear-gradient(135deg,#06b6d4,#3b82f6);--grad3:linear-gradient(135deg,#10b981,#06b6d4);--grad4:linear-gradient(135deg,#f59e0b,#f97316);--grad5:linear-gradient(135deg,#ec4899,#8b5cf6);--shadow:0 4px 24px rgba(0,0,0,0.4);--glow-blue:0 0 20px rgba(59,130,246,0.15);--glow-green:0 0 20px rgba(16,185,129,0.15);--glow-purple:0 0 20px rgba(139,92,246,0.15)}
|
|
494
|
+
html{scroll-behavior:smooth}
|
|
495
|
+
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden}
|
|
496
|
+
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
|
|
497
|
+
button{font-family:inherit;cursor:pointer}
|
|
498
|
+
code,.mono{font-family:'JetBrains Mono',monospace}
|
|
499
|
+
::-webkit-scrollbar{width:5px;height:5px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--muted)}
|
|
500
|
+
|
|
501
|
+
/* ─── NAV ─── */
|
|
502
|
+
.nav{position:sticky;top:0;z-index:100;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:rgba(5,10,18,0.92);backdrop-filter:blur(12px);height:52px}
|
|
503
|
+
.nav-brand{font-weight:900;font-size:1.05rem;display:flex;align-items:center;gap:10px}
|
|
504
|
+
.nav-brand span{background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
505
|
+
.nav-badge{font-size:0.6rem;background:var(--grad1);color:#fff;padding:2px 8px;border-radius:10px;font-weight:700}
|
|
506
|
+
.nav-links{display:flex;gap:6px;align-items:center}
|
|
507
|
+
.nav-link{color:var(--muted);font-size:0.8rem;padding:6px 12px;border-radius:6px;transition:all 0.15s;text-decoration:none}
|
|
508
|
+
.nav-link:hover{color:var(--text);background:var(--bg3);text-decoration:none}
|
|
509
|
+
|
|
510
|
+
/* ─── HERO ─── */
|
|
511
|
+
.hero{text-align:center;padding:48px 24px 32px;position:relative;overflow:hidden}
|
|
512
|
+
.hero::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(59,130,246,0.06) 0%,transparent 50%);pointer-events:none}
|
|
513
|
+
.hero h1{font-size:2.4rem;font-weight:900;line-height:1.15;margin-bottom:12px}
|
|
514
|
+
.hero h1 .grad{background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
515
|
+
.hero p{color:var(--muted);font-size:1rem;max-width:650px;margin:0 auto 24px;line-height:1.6}
|
|
516
|
+
.hero-stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:8px}
|
|
517
|
+
.hero-stat{text-align:center}
|
|
518
|
+
.hero-stat .val{font-size:1.8rem;font-weight:900;background:var(--grad1);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
519
|
+
.hero-stat .lbl{font-size:0.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
|
|
520
|
+
|
|
521
|
+
/* ─── CATEGORY NAV ─── */
|
|
522
|
+
.cat-nav{position:sticky;top:52px;z-index:90;background:rgba(5,10,18,0.95);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);padding:0 16px;overflow-x:auto;white-space:nowrap;display:flex;gap:4px;-webkit-overflow-scrolling:touch}
|
|
523
|
+
.cat-nav::-webkit-scrollbar{height:0}
|
|
524
|
+
.cat-btn{padding:10px 16px;font-size:0.76rem;font-weight:600;color:var(--muted);border:none;background:none;border-bottom:2px solid transparent;transition:all 0.15s;white-space:nowrap}
|
|
525
|
+
.cat-btn:hover{color:var(--text)}
|
|
526
|
+
.cat-btn.active{color:var(--blue);border-bottom-color:var(--blue)}
|
|
527
|
+
|
|
528
|
+
/* ─── SECTION ─── */
|
|
529
|
+
.section{padding:40px 24px;max-width:1280px;margin:0 auto}
|
|
530
|
+
.section-head{display:flex;align-items:center;gap:12px;margin-bottom:24px}
|
|
531
|
+
.section-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
|
|
532
|
+
.section-title{font-size:1.25rem;font-weight:800}
|
|
533
|
+
.section-desc{font-size:0.82rem;color:var(--muted);margin-top:2px}
|
|
534
|
+
|
|
535
|
+
/* ─── CARD GRID ─── */
|
|
536
|
+
.demo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:16px}
|
|
537
|
+
@media(max-width:450px){.demo-grid{grid-template-columns:1fr}}
|
|
538
|
+
|
|
539
|
+
/* ─── DEMO CARD ─── */
|
|
540
|
+
.demo-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:all 0.2s}
|
|
541
|
+
.demo-card:hover{border-color:var(--border2);box-shadow:var(--shadow)}
|
|
542
|
+
.demo-card-head{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
|
|
543
|
+
.demo-card-head h3{font-size:0.88rem;font-weight:700;display:flex;align-items:center;gap:8px}
|
|
544
|
+
.demo-card-head .method{font-size:0.62rem;font-weight:700;padding:2px 7px;border-radius:4px;font-family:'JetBrains Mono',monospace}
|
|
545
|
+
.method-get{background:rgba(16,185,129,0.15);color:var(--green)}
|
|
546
|
+
.method-post{background:rgba(245,158,11,0.15);color:var(--amber)}
|
|
547
|
+
.demo-card-body{padding:18px}
|
|
548
|
+
.demo-card-body .endpoint{font-family:'JetBrains Mono',monospace;font-size:0.75rem;color:var(--cyan);background:var(--bg2);padding:6px 10px;border-radius:6px;margin-bottom:12px;display:block;word-break:break-all}
|
|
549
|
+
.demo-card-body .desc{font-size:0.78rem;color:var(--muted);line-height:1.5;margin-bottom:14px}
|
|
550
|
+
|
|
551
|
+
/* Form controls */
|
|
552
|
+
.form-row{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap}
|
|
553
|
+
.form-input{flex:1;min-width:120px;background:var(--bg2);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:0.78rem;outline:none;transition:border-color 0.15s}
|
|
554
|
+
.form-input:focus{border-color:var(--blue)}
|
|
555
|
+
.form-input::placeholder{color:var(--dim)}
|
|
556
|
+
textarea.form-input{min-height:60px;resize:vertical;font-size:0.74rem}
|
|
557
|
+
select.form-input{appearance:auto}
|
|
558
|
+
.run-btn{padding:8px 18px;border:none;border-radius:6px;font-weight:700;font-size:0.78rem;color:#fff;transition:all 0.15s;display:flex;align-items:center;gap:6px;white-space:nowrap}
|
|
559
|
+
.run-btn:hover{opacity:0.85;transform:translateY(-1px)}
|
|
560
|
+
.run-btn:active{transform:translateY(0)}
|
|
561
|
+
.run-btn:disabled{opacity:0.4;cursor:not-allowed;transform:none}
|
|
562
|
+
.run-btn.blue{background:var(--grad2)}
|
|
563
|
+
.run-btn.green{background:var(--grad3)}
|
|
564
|
+
.run-btn.purple{background:var(--grad5)}
|
|
565
|
+
.run-btn.orange{background:var(--grad4)}
|
|
566
|
+
|
|
567
|
+
/* Response area */
|
|
568
|
+
.response-area{margin-top:12px;background:var(--bg);border:1px solid var(--border);border-radius:8px;overflow:hidden;display:none}
|
|
569
|
+
.response-area.show{display:block}
|
|
570
|
+
.response-head{padding:6px 12px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:0.68rem}
|
|
571
|
+
.response-status{font-weight:700;font-family:'JetBrains Mono',monospace}
|
|
572
|
+
.response-status.ok{color:var(--green)}.response-status.err{color:var(--red)}
|
|
573
|
+
.response-time{color:var(--dim);font-family:'JetBrains Mono',monospace}
|
|
574
|
+
.response-body{padding:12px;max-height:280px;overflow:auto;font-family:'JetBrains Mono',monospace;font-size:0.72rem;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--text2)}
|
|
575
|
+
.response-body .json-key{color:var(--purple)}.response-body .json-str{color:var(--green)}.response-body .json-num{color:var(--amber)}.response-body .json-bool{color:var(--blue)}.response-body .json-null{color:var(--dim)}
|
|
576
|
+
|
|
577
|
+
/* Status badges */
|
|
578
|
+
.badge{font-size:0.62rem;padding:2px 8px;border-radius:10px;font-weight:700}
|
|
579
|
+
.badge-live{background:rgba(16,185,129,0.15);color:var(--green)}
|
|
580
|
+
.badge-sim{background:rgba(139,92,246,0.15);color:var(--purple)}
|
|
581
|
+
|
|
582
|
+
/* Loading spinner */
|
|
583
|
+
.spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,0.2);border-top-color:#fff;border-radius:50%;animation:spin 0.6s linear infinite}
|
|
584
|
+
@keyframes spin{to{transform:rotate(360deg)}}
|
|
585
|
+
|
|
586
|
+
/* Agent Chat Section */
|
|
587
|
+
.chat-container{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;max-width:700px}
|
|
588
|
+
.chat-messages{height:320px;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px}
|
|
589
|
+
.chat-msg{max-width:85%;padding:10px 14px;border-radius:12px;font-size:0.82rem;line-height:1.5;animation:fadeIn 0.3s ease}
|
|
590
|
+
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
|
|
591
|
+
.chat-msg.user{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:4px}
|
|
592
|
+
.chat-msg.agent{align-self:flex-start;background:var(--bg3);border:1px solid var(--border);border-bottom-left-radius:4px}
|
|
593
|
+
.chat-msg.system{align-self:center;background:var(--bg2);color:var(--muted);font-size:0.75rem;border-radius:8px}
|
|
594
|
+
.chat-msg .intent-badge{display:inline-block;background:var(--grad5);color:#fff;font-size:0.65rem;padding:1px 8px;border-radius:8px;margin-top:6px;font-weight:600}
|
|
595
|
+
.chat-input-row{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--border);background:var(--bg2)}
|
|
596
|
+
.chat-input{flex:1;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text);font-size:0.85rem;outline:none}
|
|
597
|
+
.chat-input:focus{border-color:var(--blue)}
|
|
598
|
+
.chat-send{background:var(--grad1);color:#fff;border:none;border-radius:8px;padding:10px 20px;font-weight:700;font-size:0.82rem}
|
|
599
|
+
|
|
600
|
+
/* Live counter */
|
|
601
|
+
.live-counter{display:flex;align-items:center;gap:6px;font-size:0.72rem;color:var(--green)}
|
|
602
|
+
.live-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
|
|
603
|
+
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.8)}}
|
|
604
|
+
|
|
605
|
+
/* Health dashboard */
|
|
606
|
+
.health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin-top:12px}
|
|
607
|
+
.health-item{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center}
|
|
608
|
+
.health-item .h-val{font-size:1.4rem;font-weight:800;margin-bottom:2px}
|
|
609
|
+
.health-item .h-lbl{font-size:0.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px}
|
|
610
|
+
.health-ok .h-val{color:var(--green)}
|
|
611
|
+
.health-warn .h-val{color:var(--amber)}
|
|
612
|
+
|
|
613
|
+
/* Tabs within cards */
|
|
614
|
+
.card-tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2)}
|
|
615
|
+
.card-tab{padding:8px 14px;font-size:0.72rem;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer;transition:all 0.15s}
|
|
616
|
+
.card-tab:hover{color:var(--text)}
|
|
617
|
+
.card-tab.active{color:var(--cyan);border-bottom-color:var(--cyan)}
|
|
618
|
+
|
|
619
|
+
/* Fairness meter */
|
|
620
|
+
.fairness-meter{margin-top:8px}
|
|
621
|
+
.meter-bar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;margin-top:4px}
|
|
622
|
+
.meter-fill{height:100%;border-radius:4px;transition:width 0.6s ease}
|
|
623
|
+
|
|
624
|
+
/* Timeline */
|
|
625
|
+
.timeline{display:flex;flex-direction:column;gap:0}
|
|
626
|
+
.timeline-item{display:flex;gap:12px;padding:8px 0}
|
|
627
|
+
.timeline-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
|
|
628
|
+
.timeline-content{flex:1;font-size:0.78rem;line-height:1.5}
|
|
629
|
+
.timeline-time{font-size:0.68rem;color:var(--dim);font-family:'JetBrains Mono',monospace}
|
|
630
|
+
|
|
631
|
+
/* Footer */
|
|
632
|
+
.footer{text-align:center;padding:40px 24px;color:var(--dim);font-size:0.78rem;border-top:1px solid var(--border);margin-top:40px}
|
|
633
|
+
.footer a{color:var(--blue)}
|
|
634
|
+
|
|
635
|
+
/* Responsive */
|
|
636
|
+
@media(max-width:768px){
|
|
637
|
+
.hero h1{font-size:1.6rem}
|
|
638
|
+
.hero-stats{gap:20px}
|
|
639
|
+
.hero-stat .val{font-size:1.3rem}
|
|
640
|
+
.demo-grid{grid-template-columns:1fr}
|
|
641
|
+
.section{padding:24px 16px}
|
|
642
|
+
}
|
|
643
|
+
</style>
|
|
644
|
+
</head>
|
|
645
|
+
<body>
|
|
646
|
+
|
|
647
|
+
<!-- NAV -->
|
|
648
|
+
<nav class="nav">
|
|
649
|
+
<div class="nav-brand">⚡ <span>Web Agent Bridge</span> <span class="nav-badge">v3.0 DEMO</span></div>
|
|
650
|
+
<div class="nav-links">
|
|
651
|
+
<a class="nav-link" href="/">Home</a>
|
|
652
|
+
<a class="nav-link" href="/docs">Docs</a>
|
|
653
|
+
<a class="nav-link" href="/pwa/">PWA Browser</a>
|
|
654
|
+
<a class="nav-link" href="https://github.com/abokenan444/web-agent-bridge" target="_blank" rel="noopener">GitHub</a>
|
|
655
|
+
</div>
|
|
656
|
+
</nav>
|
|
657
|
+
|
|
658
|
+
<!-- HERO -->
|
|
659
|
+
<section class="hero">
|
|
660
|
+
<h1>Experience the <span class="grad">Full Power</span> of WAB</h1>
|
|
661
|
+
<p>Interactive playground for every major capability — click "Run" on any card to see live API responses from the production server.</p>
|
|
662
|
+
<div class="hero-stats" id="hero-stats">
|
|
663
|
+
<div class="hero-stat"><div class="val" id="stat-apis">—</div><div class="lbl">API Endpoints</div></div>
|
|
664
|
+
<div class="hero-stat"><div class="val" id="stat-services">31</div><div class="lbl">Services</div></div>
|
|
665
|
+
<div class="hero-stat"><div class="val" id="stat-uptime">—</div><div class="lbl">Uptime</div></div>
|
|
666
|
+
<div class="hero-stat"><div class="val" id="stat-version">3.0.0</div><div class="lbl">Version</div></div>
|
|
667
|
+
</div>
|
|
668
|
+
</section>
|
|
669
|
+
|
|
670
|
+
<!-- CATEGORY NAV -->
|
|
671
|
+
<nav class="cat-nav" id="cat-nav">
|
|
672
|
+
<button class="cat-btn active" data-cat="chat">💬 Agent Chat</button>
|
|
673
|
+
<button class="cat-btn" data-cat="search">🔍 Search</button>
|
|
674
|
+
<button class="cat-btn" data-cat="universal">🌐 Universal Agent</button>
|
|
675
|
+
<button class="cat-btn" data-cat="sovereign">🛡️ Sovereign</button>
|
|
676
|
+
<button class="cat-btn" data-cat="workspace">📂 Workspace</button>
|
|
677
|
+
<button class="cat-btn" data-cat="mesh">🕸️ Agent Mesh</button>
|
|
678
|
+
<button class="cat-btn" data-cat="commander">🎯 Commander</button>
|
|
679
|
+
<button class="cat-btn" data-cat="runtime">⚙️ Agent OS</button>
|
|
680
|
+
<button class="cat-btn" data-cat="vision">👁️ Vision & LfD</button>
|
|
681
|
+
<button class="cat-btn" data-cat="discovery">📡 Discovery</button>
|
|
682
|
+
<button class="cat-btn" data-cat="health">💚 Health</button>
|
|
683
|
+
</nav>
|
|
684
|
+
|
|
685
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
686
|
+
<!-- SECTION: Agent Chat -->
|
|
687
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
688
|
+
<section class="section" id="sec-chat">
|
|
689
|
+
<div class="section-head">
|
|
690
|
+
<div class="section-icon" style="background:rgba(59,130,246,0.12)">💬</div>
|
|
691
|
+
<div>
|
|
692
|
+
<div class="section-title">AI Agent Chat</div>
|
|
693
|
+
<div class="section-desc">Natural language conversation with intent detection — supports shopping, booking, search, and URL analysis</div>
|
|
694
|
+
</div>
|
|
695
|
+
</div>
|
|
696
|
+
<div class="chat-container">
|
|
697
|
+
<div class="chat-messages" id="chat-messages">
|
|
698
|
+
<div class="chat-msg system">👋 Send any message — the agent detects your intent (shopping, booking, analysis) and responds accordingly. Try Arabic or English!</div>
|
|
699
|
+
</div>
|
|
700
|
+
<div class="chat-input-row">
|
|
701
|
+
<input class="chat-input" id="chat-input" placeholder="Try: 'Find me cheap laptops' or 'أبحث عن فنادق في دبي'">
|
|
702
|
+
<button class="chat-send" id="chat-send">Send ➤</button>
|
|
703
|
+
</div>
|
|
704
|
+
</div>
|
|
705
|
+
</section>
|
|
706
|
+
|
|
707
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
708
|
+
<!-- SECTION: Search Engine -->
|
|
709
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
710
|
+
<section class="section" id="sec-search">
|
|
711
|
+
<div class="section-head">
|
|
712
|
+
<div class="section-icon" style="background:rgba(6,182,212,0.12)">🔍</div>
|
|
713
|
+
<div>
|
|
714
|
+
<div class="section-title">Search Engine</div>
|
|
715
|
+
<div class="section-desc">Full-text search with autocomplete suggestions and trending analytics</div>
|
|
716
|
+
</div>
|
|
717
|
+
</div>
|
|
718
|
+
<div class="demo-grid">
|
|
719
|
+
|
|
720
|
+
<!-- Search -->
|
|
721
|
+
<div class="demo-card" id="card-search">
|
|
722
|
+
<div class="demo-card-head"><h3>📄 Full-Text Search</h3><span class="method method-get">GET</span></div>
|
|
723
|
+
<div class="demo-card-body">
|
|
724
|
+
<code class="endpoint">/api/search?q={query}</code>
|
|
725
|
+
<div class="desc">Search the WAB knowledge base — returns results with relevance scoring and text snippets.</div>
|
|
726
|
+
<div class="form-row">
|
|
727
|
+
<input class="form-input" id="search-q" placeholder="e.g. agent bridge" value="agent">
|
|
728
|
+
<button class="run-btn blue" onclick="runSearch()">▶ Search</button>
|
|
729
|
+
</div>
|
|
730
|
+
<div class="response-area" id="res-search"></div>
|
|
731
|
+
</div>
|
|
732
|
+
</div>
|
|
733
|
+
|
|
734
|
+
<!-- Suggest -->
|
|
735
|
+
<div class="demo-card" id="card-suggest">
|
|
736
|
+
<div class="demo-card-head"><h3>💡 Autocomplete Suggestions</h3><span class="method method-get">GET</span></div>
|
|
737
|
+
<div class="demo-card-body">
|
|
738
|
+
<code class="endpoint">/api/search/suggest?q={prefix}</code>
|
|
739
|
+
<div class="desc">Get real-time autocomplete suggestions as you type.</div>
|
|
740
|
+
<div class="form-row">
|
|
741
|
+
<input class="form-input" id="suggest-q" placeholder="e.g. uni" value="pri">
|
|
742
|
+
<button class="run-btn blue" onclick="runSuggest()">▶ Suggest</button>
|
|
743
|
+
</div>
|
|
744
|
+
<div class="response-area" id="res-suggest"></div>
|
|
745
|
+
</div>
|
|
746
|
+
</div>
|
|
747
|
+
|
|
748
|
+
<!-- Trending -->
|
|
749
|
+
<div class="demo-card" id="card-trending">
|
|
750
|
+
<div class="demo-card-head"><h3>📈 Trending Searches</h3><span class="method method-get">GET</span></div>
|
|
751
|
+
<div class="demo-card-body">
|
|
752
|
+
<code class="endpoint">/api/search/trending</code>
|
|
753
|
+
<div class="desc">See the most popular search queries with count metrics.</div>
|
|
754
|
+
<div class="form-row">
|
|
755
|
+
<button class="run-btn green" onclick="runTrending()">▶ Get Trending</button>
|
|
756
|
+
</div>
|
|
757
|
+
<div class="response-area" id="res-trending"></div>
|
|
758
|
+
</div>
|
|
759
|
+
</div>
|
|
760
|
+
</div>
|
|
761
|
+
</section>
|
|
762
|
+
|
|
763
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
764
|
+
<!-- SECTION: Universal Agent -->
|
|
765
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
766
|
+
<section class="section" id="sec-universal">
|
|
767
|
+
<div class="section-head">
|
|
768
|
+
<div class="section-icon" style="background:rgba(16,185,129,0.12)">🌐</div>
|
|
769
|
+
<div>
|
|
770
|
+
<div class="section-title">Universal Agent</div>
|
|
771
|
+
<div class="section-desc">Analyze, compare, and find deals on ANY website — no bridge integration required</div>
|
|
772
|
+
</div>
|
|
773
|
+
</div>
|
|
774
|
+
<div class="demo-grid">
|
|
775
|
+
|
|
776
|
+
<!-- Deals -->
|
|
777
|
+
<div class="demo-card">
|
|
778
|
+
<div class="demo-card-head"><h3>🏷️ Find Best Deals</h3><span class="method method-post">POST</span></div>
|
|
779
|
+
<div class="demo-card-body">
|
|
780
|
+
<code class="endpoint">/api/universal/deals</code>
|
|
781
|
+
<div class="desc">Search across multiple sources with fairness ranking to find the best deals.</div>
|
|
782
|
+
<div class="form-row">
|
|
783
|
+
<input class="form-input" id="deals-q" placeholder="Search product..." value="laptop">
|
|
784
|
+
<button class="run-btn green" onclick="runDeals()">▶ Find Deals</button>
|
|
785
|
+
</div>
|
|
786
|
+
<div class="response-area" id="res-deals"></div>
|
|
787
|
+
</div>
|
|
788
|
+
</div>
|
|
789
|
+
|
|
790
|
+
<!-- Fairness -->
|
|
791
|
+
<div class="demo-card">
|
|
792
|
+
<div class="demo-card-head"><h3>⚖️ Fairness Analysis</h3><span class="method method-post">POST</span></div>
|
|
793
|
+
<div class="demo-card-body">
|
|
794
|
+
<code class="endpoint">/api/universal/fairness</code>
|
|
795
|
+
<div class="desc">Evaluate any website on size, trust, pricing transparency, and openness. Get a fairness score 0–100.</div>
|
|
796
|
+
<div class="form-row">
|
|
797
|
+
<input class="form-input" id="fair-url" placeholder="Domain..." value="books.toscrape.com">
|
|
798
|
+
<button class="run-btn green" onclick="runFairness()">▶ Analyze</button>
|
|
799
|
+
</div>
|
|
800
|
+
<div class="response-area" id="res-fairness"></div>
|
|
801
|
+
</div>
|
|
802
|
+
</div>
|
|
803
|
+
|
|
804
|
+
<!-- Analyze -->
|
|
805
|
+
<div class="demo-card">
|
|
806
|
+
<div class="demo-card-head"><h3>🔬 Site Analysis</h3><span class="method method-post">POST</span></div>
|
|
807
|
+
<div class="demo-card-body">
|
|
808
|
+
<code class="endpoint">/api/universal/analyze</code>
|
|
809
|
+
<div class="desc">Full analysis of any URL: extracts products, prices, detects fraud, dark patterns, and trust indicators.</div>
|
|
810
|
+
<div class="form-row">
|
|
811
|
+
<input class="form-input" id="analyze-url" placeholder="Full URL..." value="https://books.toscrape.com">
|
|
812
|
+
<button class="run-btn green" onclick="runAnalyze()">▶ Full Analysis</button>
|
|
813
|
+
</div>
|
|
814
|
+
<div class="response-area" id="res-analyze"></div>
|
|
815
|
+
</div>
|
|
816
|
+
</div>
|
|
817
|
+
|
|
818
|
+
<!-- Top Fair -->
|
|
819
|
+
<div class="demo-card">
|
|
820
|
+
<div class="demo-card-head"><h3>🏆 Top Fair Sites</h3><span class="method method-get">GET</span></div>
|
|
821
|
+
<div class="demo-card-body">
|
|
822
|
+
<code class="endpoint">/api/universal/top-fair</code>
|
|
823
|
+
<div class="desc">Leaderboard of the fairest websites ranked by the WAB fairness engine.</div>
|
|
824
|
+
<div class="form-row">
|
|
825
|
+
<button class="run-btn green" onclick="runTopFair()">▶ Get Leaderboard</button>
|
|
826
|
+
</div>
|
|
827
|
+
<div class="response-area" id="res-topfair"></div>
|
|
828
|
+
</div>
|
|
829
|
+
</div>
|
|
830
|
+
</div>
|
|
831
|
+
</section>
|
|
832
|
+
|
|
833
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
834
|
+
<!-- SECTION: Sovereign -->
|
|
835
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
836
|
+
<section class="section" id="sec-sovereign">
|
|
837
|
+
<div class="section-head">
|
|
838
|
+
<div class="section-icon" style="background:rgba(139,92,246,0.12)">🛡️</div>
|
|
839
|
+
<div>
|
|
840
|
+
<div class="section-title">Sovereign Layer</div>
|
|
841
|
+
<div class="section-desc">Decentralized reputation, real-time negotiation, anti-hallucination verification, and price discrimination detection</div>
|
|
842
|
+
</div>
|
|
843
|
+
</div>
|
|
844
|
+
<div class="demo-grid">
|
|
845
|
+
|
|
846
|
+
<!-- Reputation Leaderboard -->
|
|
847
|
+
<div class="demo-card">
|
|
848
|
+
<div class="demo-card-head"><h3>⭐ Reputation Leaderboard</h3><span class="method method-get">GET</span></div>
|
|
849
|
+
<div class="demo-card-body">
|
|
850
|
+
<code class="endpoint">/api/sovereign/reputation/leaderboard</code>
|
|
851
|
+
<div class="desc">Rankings of websites based on decentralized trust attestations from AI agents.</div>
|
|
852
|
+
<div class="form-row">
|
|
853
|
+
<button class="run-btn purple" onclick="runRepLeaderboard()">▶ Get Leaderboard</button>
|
|
854
|
+
</div>
|
|
855
|
+
<div class="response-area" id="res-rep-leaders"></div>
|
|
856
|
+
</div>
|
|
857
|
+
</div>
|
|
858
|
+
|
|
859
|
+
<!-- Negotiation Engine -->
|
|
860
|
+
<div class="demo-card">
|
|
861
|
+
<div class="demo-card-head"><h3>🤝 Negotiation Engine</h3><span class="method method-get">GET</span></div>
|
|
862
|
+
<div class="demo-card-body">
|
|
863
|
+
<code class="endpoint">/api/negotiate</code>
|
|
864
|
+
<div class="desc">Real-time price negotiation between AI agents and websites. View available endpoints.</div>
|
|
865
|
+
<div class="form-row">
|
|
866
|
+
<button class="run-btn purple" onclick="runNegotiate()">▶ Explore Engine</button>
|
|
867
|
+
</div>
|
|
868
|
+
<div class="response-area" id="res-negotiate"></div>
|
|
869
|
+
</div>
|
|
870
|
+
</div>
|
|
871
|
+
|
|
872
|
+
<!-- Verification Stats -->
|
|
873
|
+
<div class="demo-card">
|
|
874
|
+
<div class="demo-card-head"><h3>🔎 Anti-Hallucination Shield</h3><span class="method method-get">GET</span></div>
|
|
875
|
+
<div class="demo-card-body">
|
|
876
|
+
<code class="endpoint">/api/sovereign/verify/stats</code>
|
|
877
|
+
<div class="desc">Global statistics for the DOM vs Vision verification shield — catches agent hallucinations in real-time.</div>
|
|
878
|
+
<div class="form-row">
|
|
879
|
+
<button class="run-btn purple" onclick="runVerifyStats()">▶ Get Stats</button>
|
|
880
|
+
</div>
|
|
881
|
+
<div class="response-area" id="res-verify-stats"></div>
|
|
882
|
+
</div>
|
|
883
|
+
</div>
|
|
884
|
+
|
|
885
|
+
<!-- Price Shield Stats -->
|
|
886
|
+
<div class="demo-card">
|
|
887
|
+
<div class="demo-card-head"><h3>💰 Price Shield</h3><span class="method method-get">GET</span></div>
|
|
888
|
+
<div class="demo-card-body">
|
|
889
|
+
<code class="endpoint">/api/sovereign/price-shield/stats</code>
|
|
890
|
+
<div class="desc">Detects dynamic pricing discrimination by scanning sites from multiple personas (device, location, browser).</div>
|
|
891
|
+
<div class="form-row">
|
|
892
|
+
<button class="run-btn purple" onclick="runPriceShield()">▶ Get Stats</button>
|
|
893
|
+
</div>
|
|
894
|
+
<div class="response-area" id="res-price-shield"></div>
|
|
895
|
+
</div>
|
|
896
|
+
</div>
|
|
897
|
+
|
|
898
|
+
<!-- Price Shield Personas -->
|
|
899
|
+
<div class="demo-card">
|
|
900
|
+
<div class="demo-card-head"><h3>🎭 Scan Personas</h3><span class="method method-get">GET</span></div>
|
|
901
|
+
<div class="demo-card-body">
|
|
902
|
+
<code class="endpoint">/api/sovereign/price-shield/personas</code>
|
|
903
|
+
<div class="desc">Available identity personas used for stealth price scanning (mobile, desktop, VPN, different regions, etc.)</div>
|
|
904
|
+
<div class="form-row">
|
|
905
|
+
<button class="run-btn purple" onclick="runPersonas()">▶ Get Personas</button>
|
|
906
|
+
</div>
|
|
907
|
+
<div class="response-area" id="res-personas"></div>
|
|
908
|
+
</div>
|
|
909
|
+
</div>
|
|
910
|
+
|
|
911
|
+
<!-- Reputation Search -->
|
|
912
|
+
<div class="demo-card">
|
|
913
|
+
<div class="demo-card-head"><h3>🔍 Reputation Search</h3><span class="method method-get">GET</span></div>
|
|
914
|
+
<div class="demo-card-body">
|
|
915
|
+
<code class="endpoint">/api/sovereign/reputation/search?category={cat}</code>
|
|
916
|
+
<div class="desc">Search trusted sites by category — filtered by minimum reputation score.</div>
|
|
917
|
+
<div class="form-row">
|
|
918
|
+
<input class="form-input" id="rep-cat" placeholder="Category..." value="e-commerce">
|
|
919
|
+
<input class="form-input" id="rep-min" placeholder="Min score" value="0" type="number" style="max-width:80px">
|
|
920
|
+
<button class="run-btn purple" onclick="runRepSearch()">▶ Search</button>
|
|
921
|
+
</div>
|
|
922
|
+
<div class="response-area" id="res-rep-search"></div>
|
|
923
|
+
</div>
|
|
924
|
+
</div>
|
|
925
|
+
</div>
|
|
926
|
+
</section>
|
|
927
|
+
|
|
928
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
929
|
+
<!-- SECTION: Workspace -->
|
|
930
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
931
|
+
<section class="section" id="sec-workspace">
|
|
932
|
+
<div class="section-head">
|
|
933
|
+
<div class="section-icon" style="background:rgba(245,158,11,0.12)">📂</div>
|
|
934
|
+
<div>
|
|
935
|
+
<div class="section-title">Workspace</div>
|
|
936
|
+
<div class="section-desc">User workspace with subscriptions, deal tracking, bookmarks, and browsing history (requires auth)</div>
|
|
937
|
+
</div>
|
|
938
|
+
</div>
|
|
939
|
+
<div class="demo-grid">
|
|
940
|
+
|
|
941
|
+
<!-- Auth Register -->
|
|
942
|
+
<div class="demo-card">
|
|
943
|
+
<div class="demo-card-head"><h3>🔐 Register / Login</h3><span class="method method-post">POST</span></div>
|
|
944
|
+
<div class="demo-card-body">
|
|
945
|
+
<code class="endpoint">/api/auth/register → /api/auth/login</code>
|
|
946
|
+
<div class="desc">Create an account or login to get a JWT token. The token is stored for other authenticated demos below.</div>
|
|
947
|
+
<div class="form-row">
|
|
948
|
+
<input class="form-input" id="auth-email" placeholder="Email" value="">
|
|
949
|
+
<input class="form-input" id="auth-pass" placeholder="Password" value="" type="password">
|
|
950
|
+
</div>
|
|
951
|
+
<div class="form-row">
|
|
952
|
+
<input class="form-input" id="auth-name" placeholder="Name (for register)" value="">
|
|
953
|
+
<button class="run-btn orange" onclick="runRegister()">Register</button>
|
|
954
|
+
<button class="run-btn blue" onclick="runLogin()">Login</button>
|
|
955
|
+
</div>
|
|
956
|
+
<div style="margin-top:8px;font-size:0.72rem;color:var(--muted)" id="auth-status">No token stored</div>
|
|
957
|
+
<div class="response-area" id="res-auth"></div>
|
|
958
|
+
</div>
|
|
959
|
+
</div>
|
|
960
|
+
|
|
961
|
+
<!-- Subscription -->
|
|
962
|
+
<div class="demo-card">
|
|
963
|
+
<div class="demo-card-head"><h3>📊 My Subscription</h3><span class="method method-get">GET</span></div>
|
|
964
|
+
<div class="demo-card-body">
|
|
965
|
+
<code class="endpoint">/api/workspace/subscription</code>
|
|
966
|
+
<div class="desc">Get your workspace subscription plan, usage stats, daily task limits, and savings summary.</div>
|
|
967
|
+
<div class="form-row">
|
|
968
|
+
<button class="run-btn orange" onclick="runSubscription()">▶ Get Subscription</button>
|
|
969
|
+
</div>
|
|
970
|
+
<div class="response-area" id="res-subscription"></div>
|
|
971
|
+
</div>
|
|
972
|
+
</div>
|
|
973
|
+
|
|
974
|
+
<!-- Favorites -->
|
|
975
|
+
<div class="demo-card">
|
|
976
|
+
<div class="demo-card-head"><h3>⭐ Bookmarks</h3><span class="method method-get">GET</span></div>
|
|
977
|
+
<div class="demo-card-body">
|
|
978
|
+
<code class="endpoint">/api/workspace/favorites</code>
|
|
979
|
+
<div class="desc">Manage your bookmarks/favorites — add, list, organize by folders, and delete.</div>
|
|
980
|
+
<div class="form-row">
|
|
981
|
+
<button class="run-btn orange" onclick="runFavorites()">▶ My Bookmarks</button>
|
|
982
|
+
<button class="run-btn blue" onclick="runAddFavorite()">+ Add Bookmark</button>
|
|
983
|
+
</div>
|
|
984
|
+
<div class="form-row" id="fav-form" style="display:none">
|
|
985
|
+
<input class="form-input" id="fav-url" placeholder="URL" value="https://github.com">
|
|
986
|
+
<input class="form-input" id="fav-title" placeholder="Title" value="GitHub">
|
|
987
|
+
<input class="form-input" id="fav-folder" placeholder="Folder" value="dev" style="max-width:80px">
|
|
988
|
+
</div>
|
|
989
|
+
<div class="response-area" id="res-favorites"></div>
|
|
990
|
+
</div>
|
|
991
|
+
</div>
|
|
992
|
+
|
|
993
|
+
<!-- History -->
|
|
994
|
+
<div class="demo-card">
|
|
995
|
+
<div class="demo-card-head"><h3>📜 Browsing History</h3><span class="method method-get">GET</span></div>
|
|
996
|
+
<div class="demo-card-body">
|
|
997
|
+
<code class="endpoint">/api/workspace/history</code>
|
|
998
|
+
<div class="desc">Browse and search your browsing history — supports search, pagination, and clearing.</div>
|
|
999
|
+
<div class="form-row">
|
|
1000
|
+
<input class="form-input" id="history-q" placeholder="Search history..." value="">
|
|
1001
|
+
<button class="run-btn orange" onclick="runHistory()">▶ Get History</button>
|
|
1002
|
+
</div>
|
|
1003
|
+
<div class="response-area" id="res-history"></div>
|
|
1004
|
+
</div>
|
|
1005
|
+
</div>
|
|
1006
|
+
</div>
|
|
1007
|
+
</section>
|
|
1008
|
+
|
|
1009
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1010
|
+
<!-- SECTION: Agent Mesh -->
|
|
1011
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1012
|
+
<section class="section" id="sec-mesh">
|
|
1013
|
+
<div class="section-head">
|
|
1014
|
+
<div class="section-icon" style="background:rgba(236,72,153,0.12)">🕸️</div>
|
|
1015
|
+
<div>
|
|
1016
|
+
<div class="section-title">Agent Mesh Network</div>
|
|
1017
|
+
<div class="section-desc">Multi-agent collaboration: registration, messaging, knowledge sharing, voting, reinforcement learning, and orchestration</div>
|
|
1018
|
+
</div>
|
|
1019
|
+
</div>
|
|
1020
|
+
<div class="demo-grid">
|
|
1021
|
+
|
|
1022
|
+
<!-- Mesh Agents -->
|
|
1023
|
+
<div class="demo-card">
|
|
1024
|
+
<div class="demo-card-head"><h3>🤖 Active Agents</h3><span class="method method-get">GET</span></div>
|
|
1025
|
+
<div class="demo-card-body">
|
|
1026
|
+
<code class="endpoint">/api/mesh/agents</code>
|
|
1027
|
+
<div class="desc">List all currently registered agents in the mesh — with roles, capabilities, and status.</div>
|
|
1028
|
+
<div class="form-row">
|
|
1029
|
+
<button class="run-btn purple" onclick="runMeshAgents()">▶ List Agents</button>
|
|
1030
|
+
</div>
|
|
1031
|
+
<div class="response-area" id="res-mesh-agents"></div>
|
|
1032
|
+
</div>
|
|
1033
|
+
</div>
|
|
1034
|
+
|
|
1035
|
+
<!-- Mesh Channels -->
|
|
1036
|
+
<div class="demo-card">
|
|
1037
|
+
<div class="demo-card-head"><h3>📡 Communication Channels</h3><span class="method method-get">GET</span></div>
|
|
1038
|
+
<div class="demo-card-body">
|
|
1039
|
+
<code class="endpoint">/api/mesh/channels</code>
|
|
1040
|
+
<div class="desc">View messaging channels where agents coordinate, share tactics, and broadcast alerts.</div>
|
|
1041
|
+
<div class="form-row">
|
|
1042
|
+
<button class="run-btn purple" onclick="runMeshChannels()">▶ List Channels</button>
|
|
1043
|
+
</div>
|
|
1044
|
+
<div class="response-area" id="res-mesh-channels"></div>
|
|
1045
|
+
</div>
|
|
1046
|
+
</div>
|
|
1047
|
+
|
|
1048
|
+
<!-- Mesh Knowledge -->
|
|
1049
|
+
<div class="demo-card">
|
|
1050
|
+
<div class="demo-card-head"><h3>🧠 Knowledge Base</h3><span class="method method-get">GET</span></div>
|
|
1051
|
+
<div class="demo-card-body">
|
|
1052
|
+
<code class="endpoint">/api/mesh/knowledge</code>
|
|
1053
|
+
<div class="desc">Shared knowledge graph — agents contribute learnings that other agents can query and verify.</div>
|
|
1054
|
+
<div class="form-row">
|
|
1055
|
+
<button class="run-btn purple" onclick="runMeshKnowledge()">▶ Browse Knowledge</button>
|
|
1056
|
+
</div>
|
|
1057
|
+
<div class="response-area" id="res-mesh-knowledge"></div>
|
|
1058
|
+
</div>
|
|
1059
|
+
</div>
|
|
1060
|
+
|
|
1061
|
+
<!-- Mesh Stats -->
|
|
1062
|
+
<div class="demo-card">
|
|
1063
|
+
<div class="demo-card-head"><h3>📊 Mesh Statistics</h3><span class="method method-get">GET</span></div>
|
|
1064
|
+
<div class="demo-card-body">
|
|
1065
|
+
<code class="endpoint">/api/mesh/stats</code>
|
|
1066
|
+
<div class="desc">Overall mesh network health: agent count, message throughput, knowledge entries, and learning stats.</div>
|
|
1067
|
+
<div class="form-row">
|
|
1068
|
+
<button class="run-btn purple" onclick="runMeshStats()">▶ Get Stats</button>
|
|
1069
|
+
</div>
|
|
1070
|
+
<div class="response-area" id="res-mesh-stats"></div>
|
|
1071
|
+
</div>
|
|
1072
|
+
</div>
|
|
1073
|
+
|
|
1074
|
+
<!-- Symphony -->
|
|
1075
|
+
<div class="demo-card">
|
|
1076
|
+
<div class="demo-card-head"><h3>🎵 Symphony Orchestration</h3><span class="method method-get">GET</span></div>
|
|
1077
|
+
<div class="demo-card-body">
|
|
1078
|
+
<code class="endpoint">/api/mesh/symphony/templates</code>
|
|
1079
|
+
<div class="desc">Pre-built composition templates for multi-agent workflows — parallel, sequential, and conditional execution.</div>
|
|
1080
|
+
<div class="form-row">
|
|
1081
|
+
<button class="run-btn purple" onclick="runSymphony()">▶ Get Templates</button>
|
|
1082
|
+
</div>
|
|
1083
|
+
<div class="response-area" id="res-symphony"></div>
|
|
1084
|
+
</div>
|
|
1085
|
+
</div>
|
|
1086
|
+
|
|
1087
|
+
<!-- Learning -->
|
|
1088
|
+
<div class="demo-card">
|
|
1089
|
+
<div class="demo-card-head"><h3>🎓 Reinforcement Learning</h3><span class="method method-get">GET</span></div>
|
|
1090
|
+
<div class="demo-card-body">
|
|
1091
|
+
<code class="endpoint">/api/mesh/learning/stats</code>
|
|
1092
|
+
<div class="desc">Mesh learning engine: tracks agent decisions, rewards, and evolves strategies over time.</div>
|
|
1093
|
+
<div class="form-row">
|
|
1094
|
+
<button class="run-btn purple" onclick="runLearning()">▶ Learning Stats</button>
|
|
1095
|
+
</div>
|
|
1096
|
+
<div class="response-area" id="res-learning"></div>
|
|
1097
|
+
</div>
|
|
1098
|
+
</div>
|
|
1099
|
+
</div>
|
|
1100
|
+
</section>
|
|
1101
|
+
|
|
1102
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1103
|
+
<!-- SECTION: Commander -->
|
|
1104
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1105
|
+
<section class="section" id="sec-commander">
|
|
1106
|
+
<div class="section-head">
|
|
1107
|
+
<div class="section-icon" style="background:rgba(249,115,22,0.12)">🎯</div>
|
|
1108
|
+
<div>
|
|
1109
|
+
<div class="section-title">Commander & Edge Computing</div>
|
|
1110
|
+
<div class="section-desc">Mission decomposition, multi-step task orchestration, and distributed edge computing</div>
|
|
1111
|
+
</div>
|
|
1112
|
+
</div>
|
|
1113
|
+
<div class="demo-grid">
|
|
1114
|
+
|
|
1115
|
+
<!-- Strategies -->
|
|
1116
|
+
<div class="demo-card">
|
|
1117
|
+
<div class="demo-card-head"><h3>🧩 Decomposition Strategies</h3><span class="method method-get">GET</span></div>
|
|
1118
|
+
<div class="demo-card-body">
|
|
1119
|
+
<code class="endpoint">/api/commander/strategies</code>
|
|
1120
|
+
<div class="desc">Available strategies for breaking complex goals into executable tasks — sequential, parallel, conditional, iterative, and hybrid.</div>
|
|
1121
|
+
<div class="form-row">
|
|
1122
|
+
<button class="run-btn orange" onclick="runStrategies()">▶ Get Strategies</button>
|
|
1123
|
+
</div>
|
|
1124
|
+
<div class="response-area" id="res-strategies"></div>
|
|
1125
|
+
</div>
|
|
1126
|
+
</div>
|
|
1127
|
+
|
|
1128
|
+
<!-- Missions -->
|
|
1129
|
+
<div class="demo-card">
|
|
1130
|
+
<div class="demo-card-head"><h3>🚀 Missions</h3><span class="method method-get">GET</span></div>
|
|
1131
|
+
<div class="demo-card-body">
|
|
1132
|
+
<code class="endpoint">/api/commander/missions</code>
|
|
1133
|
+
<div class="desc">List all missions — complex multi-step operations decomposed into sub-tasks with dependency tracking.</div>
|
|
1134
|
+
<div class="form-row">
|
|
1135
|
+
<button class="run-btn orange" onclick="runMissions()">▶ List Missions</button>
|
|
1136
|
+
</div>
|
|
1137
|
+
<div class="response-area" id="res-missions"></div>
|
|
1138
|
+
</div>
|
|
1139
|
+
</div>
|
|
1140
|
+
|
|
1141
|
+
<!-- Edge Nodes -->
|
|
1142
|
+
<div class="demo-card">
|
|
1143
|
+
<div class="demo-card-head"><h3>🌍 Edge Computing Nodes</h3><span class="method method-get">GET</span></div>
|
|
1144
|
+
<div class="demo-card-body">
|
|
1145
|
+
<code class="endpoint">/api/commander/edge/nodes</code>
|
|
1146
|
+
<div class="desc">Distributed edge computing network — nodes in different regions execute tasks close to the data source.</div>
|
|
1147
|
+
<div class="form-row">
|
|
1148
|
+
<button class="run-btn orange" onclick="runEdgeNodes()">▶ List Nodes</button>
|
|
1149
|
+
</div>
|
|
1150
|
+
<div class="response-area" id="res-edge-nodes"></div>
|
|
1151
|
+
</div>
|
|
1152
|
+
</div>
|
|
1153
|
+
</div>
|
|
1154
|
+
</section>
|
|
1155
|
+
|
|
1156
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1157
|
+
<!-- SECTION: Agent OS / Runtime -->
|
|
1158
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1159
|
+
<section class="section" id="sec-runtime">
|
|
1160
|
+
<div class="section-head">
|
|
1161
|
+
<div class="section-icon" style="background:rgba(99,102,241,0.12)">⚙️</div>
|
|
1162
|
+
<div>
|
|
1163
|
+
<div class="section-title">Agent OS — Runtime Infrastructure</div>
|
|
1164
|
+
<div class="section-desc">Full operating system for AI agents: identity, tasks, execution, policies, adapters, marketplace, cluster, containers, and more</div>
|
|
1165
|
+
</div>
|
|
1166
|
+
</div>
|
|
1167
|
+
<div class="demo-grid">
|
|
1168
|
+
|
|
1169
|
+
<!-- Protocol -->
|
|
1170
|
+
<div class="demo-card">
|
|
1171
|
+
<div class="demo-card-head"><h3>📋 Protocol Info</h3><span class="method method-get">GET</span></div>
|
|
1172
|
+
<div class="demo-card-body">
|
|
1173
|
+
<code class="endpoint">/api/os/protocol</code>
|
|
1174
|
+
<div class="desc">Complete WAB protocol specification — available commands, capabilities, and version info.</div>
|
|
1175
|
+
<div class="form-row">
|
|
1176
|
+
<button class="run-btn blue" onclick="runProtocol()">▶ Get Protocol</button>
|
|
1177
|
+
</div>
|
|
1178
|
+
<div class="response-area" id="res-protocol"></div>
|
|
1179
|
+
</div>
|
|
1180
|
+
</div>
|
|
1181
|
+
|
|
1182
|
+
<!-- Plans -->
|
|
1183
|
+
<div class="demo-card">
|
|
1184
|
+
<div class="demo-card-head"><h3>💳 Plans & Pricing</h3><span class="method method-get">GET</span></div>
|
|
1185
|
+
<div class="demo-card-body">
|
|
1186
|
+
<code class="endpoint">/api/os/plans</code>
|
|
1187
|
+
<div class="desc">Available agent plans with rate limits, feature gates, and usage-based pricing details.</div>
|
|
1188
|
+
<div class="form-row">
|
|
1189
|
+
<button class="run-btn blue" onclick="runPlans()">▶ Get Plans</button>
|
|
1190
|
+
</div>
|
|
1191
|
+
<div class="response-area" id="res-plans"></div>
|
|
1192
|
+
</div>
|
|
1193
|
+
</div>
|
|
1194
|
+
|
|
1195
|
+
<!-- Adapters -->
|
|
1196
|
+
<div class="demo-card">
|
|
1197
|
+
<div class="demo-card-head"><h3>🔌 Protocol Adapters</h3><span class="method method-get">GET</span></div>
|
|
1198
|
+
<div class="demo-card-body">
|
|
1199
|
+
<code class="endpoint">/api/os/adapters</code>
|
|
1200
|
+
<div class="desc">MCP, REST, and Browser adapters — connect via any protocol. Includes MCP tool listing and REST endpoint registry.</div>
|
|
1201
|
+
<div class="form-row">
|
|
1202
|
+
<button class="run-btn blue" onclick="runAdapters()">▶ List Adapters</button>
|
|
1203
|
+
</div>
|
|
1204
|
+
<div class="response-area" id="res-adapters"></div>
|
|
1205
|
+
</div>
|
|
1206
|
+
</div>
|
|
1207
|
+
|
|
1208
|
+
<!-- Marketplace -->
|
|
1209
|
+
<div class="demo-card">
|
|
1210
|
+
<div class="demo-card-head"><h3>🏪 Agent Marketplace</h3><span class="method method-get">GET</span></div>
|
|
1211
|
+
<div class="demo-card-body">
|
|
1212
|
+
<code class="endpoint">/api/os/marketplace</code>
|
|
1213
|
+
<div class="desc">Browse the marketplace for agent templates, plugins, and compositions. Create, purchase, and review listings.</div>
|
|
1214
|
+
<div class="form-row">
|
|
1215
|
+
<button class="run-btn blue" onclick="runMarketplace()">▶ Browse</button>
|
|
1216
|
+
</div>
|
|
1217
|
+
<div class="response-area" id="res-marketplace"></div>
|
|
1218
|
+
</div>
|
|
1219
|
+
</div>
|
|
1220
|
+
|
|
1221
|
+
<!-- Cluster Status -->
|
|
1222
|
+
<div class="demo-card">
|
|
1223
|
+
<div class="demo-card-head"><h3>🌐 Cluster Status</h3><span class="method method-get">GET</span></div>
|
|
1224
|
+
<div class="demo-card-body">
|
|
1225
|
+
<code class="endpoint">/api/os/cluster/status</code>
|
|
1226
|
+
<div class="desc">Distributed execution cluster — view worker nodes, task queues, and compute capacity across the network.</div>
|
|
1227
|
+
<div class="form-row">
|
|
1228
|
+
<button class="run-btn blue" onclick="runCluster()">▶ Cluster Status</button>
|
|
1229
|
+
</div>
|
|
1230
|
+
<div class="response-area" id="res-cluster"></div>
|
|
1231
|
+
</div>
|
|
1232
|
+
</div>
|
|
1233
|
+
|
|
1234
|
+
<!-- Replay -->
|
|
1235
|
+
<div class="demo-card">
|
|
1236
|
+
<div class="demo-card-head"><h3>⏪ Replay Engine</h3><span class="method method-get">GET</span></div>
|
|
1237
|
+
<div class="demo-card-body">
|
|
1238
|
+
<code class="endpoint">/api/os/replay/stats</code>
|
|
1239
|
+
<div class="desc">Deterministic replay — record agent executions and replay them for debugging, testing, or audit.</div>
|
|
1240
|
+
<div class="form-row">
|
|
1241
|
+
<button class="run-btn blue" onclick="runReplay()">▶ Get Stats</button>
|
|
1242
|
+
</div>
|
|
1243
|
+
<div class="response-area" id="res-replay"></div>
|
|
1244
|
+
</div>
|
|
1245
|
+
</div>
|
|
1246
|
+
|
|
1247
|
+
<!-- Failure Analysis -->
|
|
1248
|
+
<div class="demo-card">
|
|
1249
|
+
<div class="demo-card-head"><h3>🔥 Failure Analysis</h3><span class="method method-get">GET</span></div>
|
|
1250
|
+
<div class="demo-card-body">
|
|
1251
|
+
<code class="endpoint">/api/os/failures/analysis/summary</code>
|
|
1252
|
+
<div class="desc">Automated failure classification — pattern detection, root cause analysis, and recovery recommendations.</div>
|
|
1253
|
+
<div class="form-row">
|
|
1254
|
+
<button class="run-btn blue" onclick="runFailures()">▶ Get Summary</button>
|
|
1255
|
+
</div>
|
|
1256
|
+
<div class="response-area" id="res-failures"></div>
|
|
1257
|
+
</div>
|
|
1258
|
+
</div>
|
|
1259
|
+
|
|
1260
|
+
<!-- LLM -->
|
|
1261
|
+
<div class="demo-card">
|
|
1262
|
+
<div class="demo-card-head"><h3>🧠 LLM Gateway</h3><span class="method method-get">GET</span></div>
|
|
1263
|
+
<div class="demo-card-body">
|
|
1264
|
+
<code class="endpoint">/api/os/llm/models</code>
|
|
1265
|
+
<div class="desc">Available LLM models and gateway status — completion, embedding, and usage-metered access.</div>
|
|
1266
|
+
<div class="form-row">
|
|
1267
|
+
<button class="run-btn blue" onclick="runLLMModels()">▶ List Models</button>
|
|
1268
|
+
</div>
|
|
1269
|
+
<div class="response-area" id="res-llm"></div>
|
|
1270
|
+
</div>
|
|
1271
|
+
</div>
|
|
1272
|
+
</div>
|
|
1273
|
+
</section>
|
|
1274
|
+
|
|
1275
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1276
|
+
<!-- SECTION: Vision & LfD -->
|
|
1277
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1278
|
+
<section class="section" id="sec-vision">
|
|
1279
|
+
<div class="section-head">
|
|
1280
|
+
<div class="section-icon" style="background:rgba(14,165,233,0.12)">👁️</div>
|
|
1281
|
+
<div>
|
|
1282
|
+
<div class="section-title">Vision Engine & Learning from Demonstration</div>
|
|
1283
|
+
<div class="section-desc">Local DOM analysis (no external API), element discovery, and record-then-replay automation recipes</div>
|
|
1284
|
+
</div>
|
|
1285
|
+
</div>
|
|
1286
|
+
<div class="demo-grid">
|
|
1287
|
+
|
|
1288
|
+
<!-- Vision Models -->
|
|
1289
|
+
<div class="demo-card">
|
|
1290
|
+
<div class="demo-card-head"><h3>🔭 Vision Models</h3><span class="method method-get">GET</span></div>
|
|
1291
|
+
<div class="demo-card-body">
|
|
1292
|
+
<code class="endpoint">/api/os/vision/models</code>
|
|
1293
|
+
<div class="desc">Supported vision analysis models — local DOM analysis without sending data to external APIs.</div>
|
|
1294
|
+
<div class="form-row">
|
|
1295
|
+
<button class="run-btn blue" onclick="runVisionModels()">▶ List Models</button>
|
|
1296
|
+
</div>
|
|
1297
|
+
<div class="response-area" id="res-vision-models"></div>
|
|
1298
|
+
</div>
|
|
1299
|
+
</div>
|
|
1300
|
+
|
|
1301
|
+
<!-- Vision History -->
|
|
1302
|
+
<div class="demo-card">
|
|
1303
|
+
<div class="demo-card-head"><h3>📸 Vision Analysis History</h3><span class="method method-get">GET</span></div>
|
|
1304
|
+
<div class="demo-card-body">
|
|
1305
|
+
<code class="endpoint">/api/os/vision/history</code>
|
|
1306
|
+
<div class="desc">Previous DOM analysis results cached by the vision engine — element maps, bounding boxes, and semantic labels.</div>
|
|
1307
|
+
<div class="form-row">
|
|
1308
|
+
<button class="run-btn blue" onclick="runVisionHistory()">▶ Get History</button>
|
|
1309
|
+
</div>
|
|
1310
|
+
<div class="response-area" id="res-vision-history"></div>
|
|
1311
|
+
</div>
|
|
1312
|
+
</div>
|
|
1313
|
+
|
|
1314
|
+
<!-- LfD Stats -->
|
|
1315
|
+
<div class="demo-card">
|
|
1316
|
+
<div class="demo-card-head"><h3>🎬 LfD — Learning from Demonstration</h3><span class="method method-get">GET</span></div>
|
|
1317
|
+
<div class="demo-card-body">
|
|
1318
|
+
<code class="endpoint">/api/os/lfd/stats</code>
|
|
1319
|
+
<div class="desc">Record user actions → auto-generate replayable recipes. Stats on recorded sessions, generated recipes, and step counts.</div>
|
|
1320
|
+
<div class="form-row">
|
|
1321
|
+
<button class="run-btn blue" onclick="runLfdStats()">▶ Get Stats</button>
|
|
1322
|
+
</div>
|
|
1323
|
+
<div class="response-area" id="res-lfd-stats"></div>
|
|
1324
|
+
</div>
|
|
1325
|
+
</div>
|
|
1326
|
+
|
|
1327
|
+
<!-- Recipes -->
|
|
1328
|
+
<div class="demo-card">
|
|
1329
|
+
<div class="demo-card-head"><h3>📖 Automation Recipes</h3><span class="method method-get">GET</span></div>
|
|
1330
|
+
<div class="demo-card-body">
|
|
1331
|
+
<code class="endpoint">/api/os/recipes</code>
|
|
1332
|
+
<div class="desc">Saved automation recipes — replayable step-by-step browser actions generated from LfD recordings.</div>
|
|
1333
|
+
<div class="form-row">
|
|
1334
|
+
<button class="run-btn blue" onclick="runRecipes()">▶ List Recipes</button>
|
|
1335
|
+
</div>
|
|
1336
|
+
<div class="response-area" id="res-recipes"></div>
|
|
1337
|
+
</div>
|
|
1338
|
+
</div>
|
|
1339
|
+
</div>
|
|
1340
|
+
</section>
|
|
1341
|
+
|
|
1342
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1343
|
+
<!-- SECTION: Discovery -->
|
|
1344
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1345
|
+
<section class="section" id="sec-discovery">
|
|
1346
|
+
<div class="section-head">
|
|
1347
|
+
<div class="section-icon" style="background:rgba(20,184,166,0.12)">📡</div>
|
|
1348
|
+
<div>
|
|
1349
|
+
<div class="section-title">Discovery & Registry</div>
|
|
1350
|
+
<div class="section-desc">Auto-discovery protocol, site registry with fairness scoring, and standard .well-known endpoints</div>
|
|
1351
|
+
</div>
|
|
1352
|
+
</div>
|
|
1353
|
+
<div class="demo-grid">
|
|
1354
|
+
|
|
1355
|
+
<!-- Well-known -->
|
|
1356
|
+
<div class="demo-card">
|
|
1357
|
+
<div class="demo-card-head"><h3>📄 WAB Discovery Document</h3><span class="method method-get">GET</span></div>
|
|
1358
|
+
<div class="demo-card-body">
|
|
1359
|
+
<code class="endpoint">/.well-known/wab.json</code>
|
|
1360
|
+
<div class="desc">Standard auto-discovery endpoint — any AI agent can find this to learn about the site's WAB capabilities.</div>
|
|
1361
|
+
<div class="form-row">
|
|
1362
|
+
<button class="run-btn green" onclick="runWellKnown()">▶ Fetch Document</button>
|
|
1363
|
+
</div>
|
|
1364
|
+
<div class="response-area" id="res-wellknown"></div>
|
|
1365
|
+
</div>
|
|
1366
|
+
</div>
|
|
1367
|
+
|
|
1368
|
+
<!-- Registry -->
|
|
1369
|
+
<div class="demo-card">
|
|
1370
|
+
<div class="demo-card-head"><h3>📂 Public Registry</h3><span class="method method-get">GET</span></div>
|
|
1371
|
+
<div class="demo-card-body">
|
|
1372
|
+
<code class="endpoint">/api/discovery/registry</code>
|
|
1373
|
+
<div class="desc">Public directory of all WAB-enabled sites — with fairness scores, categories, and trust levels.</div>
|
|
1374
|
+
<div class="form-row">
|
|
1375
|
+
<button class="run-btn green" onclick="runRegistry()">▶ Browse Registry</button>
|
|
1376
|
+
</div>
|
|
1377
|
+
<div class="response-area" id="res-registry"></div>
|
|
1378
|
+
</div>
|
|
1379
|
+
</div>
|
|
1380
|
+
|
|
1381
|
+
<!-- Discovery Search -->
|
|
1382
|
+
<div class="demo-card">
|
|
1383
|
+
<div class="demo-card-head"><h3>🔍 Discovery Search</h3><span class="method method-get">GET</span></div>
|
|
1384
|
+
<div class="demo-card-body">
|
|
1385
|
+
<code class="endpoint">/api/discovery/search?q={query}</code>
|
|
1386
|
+
<div class="desc">Fairness-weighted search across all registered WAB sites — finds the best match considering neutrality.</div>
|
|
1387
|
+
<div class="form-row">
|
|
1388
|
+
<input class="form-input" id="disc-q" placeholder="Search..." value="shopping">
|
|
1389
|
+
<button class="run-btn green" onclick="runDiscSearch()">▶ Search</button>
|
|
1390
|
+
</div>
|
|
1391
|
+
<div class="response-area" id="res-disc-search"></div>
|
|
1392
|
+
</div>
|
|
1393
|
+
</div>
|
|
1394
|
+
|
|
1395
|
+
<!-- OpenAPI -->
|
|
1396
|
+
<div class="demo-card">
|
|
1397
|
+
<div class="demo-card-head"><h3>📘 OpenAPI Spec</h3><span class="method method-get">GET</span></div>
|
|
1398
|
+
<div class="demo-card-body">
|
|
1399
|
+
<code class="endpoint">/openapi.json</code>
|
|
1400
|
+
<div class="desc">Full OpenAPI 3.0 specification — machine-readable API documentation for all endpoints.</div>
|
|
1401
|
+
<div class="form-row">
|
|
1402
|
+
<button class="run-btn green" onclick="runOpenAPI()">▶ Fetch Spec</button>
|
|
1403
|
+
</div>
|
|
1404
|
+
<div class="response-area" id="res-openapi"></div>
|
|
1405
|
+
</div>
|
|
1406
|
+
</div>
|
|
1407
|
+
</div>
|
|
1408
|
+
</section>
|
|
1409
|
+
|
|
1410
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1411
|
+
<!-- SECTION: Health -->
|
|
1412
|
+
<!-- ═══════════════════════════════════════════════════════════════ -->
|
|
1413
|
+
<section class="section" id="sec-health">
|
|
1414
|
+
<div class="section-head">
|
|
1415
|
+
<div class="section-icon" style="background:rgba(16,185,129,0.12)">💚</div>
|
|
1416
|
+
<div>
|
|
1417
|
+
<div class="section-title">System Health & Observability</div>
|
|
1418
|
+
<div class="section-desc">Real-time health monitoring, metrics, traces, and full subsystem status</div>
|
|
1419
|
+
</div>
|
|
1420
|
+
</div>
|
|
1421
|
+
|
|
1422
|
+
<div class="demo-grid">
|
|
1423
|
+
<!-- Full Health -->
|
|
1424
|
+
<div class="demo-card" style="grid-column:1/-1">
|
|
1425
|
+
<div class="demo-card-head">
|
|
1426
|
+
<h3>🏥 Full System Health</h3>
|
|
1427
|
+
<div class="live-counter"><div class="live-dot"></div>Live from production</div>
|
|
1428
|
+
</div>
|
|
1429
|
+
<div class="demo-card-body">
|
|
1430
|
+
<code class="endpoint">/api/os/observability/health</code>
|
|
1431
|
+
<div class="desc">Comprehensive health check across all subsystems — runtime, scheduler, queue, containers, replay, cluster, and more.</div>
|
|
1432
|
+
<div class="form-row">
|
|
1433
|
+
<button class="run-btn green" onclick="runHealth()">▶ Check Health</button>
|
|
1434
|
+
<button class="run-btn blue" onclick="runMetrics()">📊 Metrics</button>
|
|
1435
|
+
</div>
|
|
1436
|
+
<div id="health-dashboard"></div>
|
|
1437
|
+
<div class="response-area" id="res-health"></div>
|
|
1438
|
+
</div>
|
|
1439
|
+
</div>
|
|
1440
|
+
</div>
|
|
1441
|
+
</section>
|
|
1442
|
+
|
|
1443
|
+
<!-- FOOTER -->
|
|
1444
|
+
<div class="footer">
|
|
1445
|
+
<p>Web Agent Bridge v3.0.0 — The Infrastructure Layer Between AI Agents and the Web</p>
|
|
1446
|
+
<p style="margin-top:4px"><a href="/">Home</a> · <a href="/docs">Documentation</a> · <a href="/pwa/">PWA Browser</a> · <a href="https://github.com/abokenan444/web-agent-bridge" target="_blank" rel="noopener">GitHub</a></p>
|
|
1447
|
+
</div>
|
|
1448
|
+
|
|
1449
|
+
<script>
|
|
1450
|
+
(function() {
|
|
1451
|
+
'use strict';
|
|
1452
|
+
|
|
1453
|
+
var BASE = window.location.origin;
|
|
1454
|
+
var authToken = null;
|
|
1455
|
+
|
|
1456
|
+
// ─── UTILS ──────────────────────────────────────────────────────────
|
|
1457
|
+
|
|
1458
|
+
function syntaxHighlight(json) {
|
|
1459
|
+
if (typeof json !== 'string') json = JSON.stringify(json, null, 2);
|
|
1460
|
+
return json.replace(/&/g,'&').replace(/</g,'<').replace(/>/g,'>')
|
|
1461
|
+
.replace(/("(\\u[a-fA-F0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
|
|
1462
|
+
function(m){
|
|
1463
|
+
var cls='json-num';
|
|
1464
|
+
if(/^"/.test(m)){cls=/:\s*$/.test(m)?'json-key':'json-str'}
|
|
1465
|
+
else if(/true|false/.test(m)){cls='json-bool'}
|
|
1466
|
+
else if(/null/.test(m)){cls='json-null'}
|
|
1467
|
+
return '<span class="'+cls+'">'+m+'</span>';
|
|
1468
|
+
});
|
|
1469
|
+
}
|
|
1470
|
+
|
|
1471
|
+
function showResponse(id, status, data, ms) {
|
|
1472
|
+
var el = document.getElementById(id);
|
|
1473
|
+
if (!el) return;
|
|
1474
|
+
var isOk = status >= 200 && status < 400;
|
|
1475
|
+
el.className = 'response-area show';
|
|
1476
|
+
el.innerHTML =
|
|
1477
|
+
'<div class="response-head">' +
|
|
1478
|
+
'<span class="response-status ' + (isOk ? 'ok' : 'err') + '">' + status + ' ' + (isOk ? 'OK' : 'Error') + '</span>' +
|
|
1479
|
+
'<span class="response-time">' + ms + 'ms</span>' +
|
|
1480
|
+
'</div>' +
|
|
1481
|
+
'<div class="response-body">' + syntaxHighlight(data) + '</div>';
|
|
1482
|
+
}
|
|
1483
|
+
|
|
1484
|
+
function showLoading(id) {
|
|
1485
|
+
var el = document.getElementById(id);
|
|
1486
|
+
if (!el) return;
|
|
1487
|
+
el.className = 'response-area show';
|
|
1488
|
+
el.innerHTML =
|
|
1489
|
+
'<div class="response-head"><span class="response-status" style="color:var(--cyan)"><span class="spinner"></span> Loading...</span></div>' +
|
|
1490
|
+
'<div class="response-body" style="text-align:center;padding:20px;color:var(--muted)">Calling API...</div>';
|
|
1491
|
+
}
|
|
1492
|
+
|
|
1493
|
+
function apiCall(method, path, body, resId) {
|
|
1494
|
+
showLoading(resId);
|
|
1495
|
+
var start = performance.now();
|
|
1496
|
+
var opts = { method: method, headers: {} };
|
|
1497
|
+
if (body) {
|
|
1498
|
+
opts.headers['Content-Type'] = 'application/json';
|
|
1499
|
+
opts.body = JSON.stringify(body);
|
|
1500
|
+
}
|
|
1501
|
+
if (authToken) {
|
|
1502
|
+
opts.headers['Authorization'] = 'Bearer ' + authToken;
|
|
1503
|
+
}
|
|
1504
|
+
return fetch(BASE + path, opts)
|
|
1505
|
+
.then(function(r) {
|
|
1506
|
+
var ms = Math.round(performance.now() - start);
|
|
1507
|
+
return r.json().then(function(d) { showResponse(resId, r.status, d, ms); return d; })
|
|
1508
|
+
.catch(function() { return r.text().then(function(t) { showResponse(resId, r.status, t, ms); }); });
|
|
1509
|
+
})
|
|
1510
|
+
.catch(function(e) {
|
|
1511
|
+
var ms = Math.round(performance.now() - start);
|
|
1512
|
+
showResponse(resId, 0, { error: 'Network error', message: e.message }, ms);
|
|
1513
|
+
});
|
|
1514
|
+
}
|
|
1515
|
+
|
|
1516
|
+
// ─── CATEGORY NAV ──────────────────────────────────────────────────
|
|
1517
|
+
|
|
1518
|
+
document.querySelectorAll('.cat-btn').forEach(function(btn) {
|
|
1519
|
+
btn.addEventListener('click', function() {
|
|
1520
|
+
document.querySelectorAll('.cat-btn').forEach(function(b) { b.classList.remove('active'); });
|
|
1521
|
+
btn.classList.add('active');
|
|
1522
|
+
var target = document.getElementById('sec-' + btn.dataset.cat);
|
|
1523
|
+
if (target) target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
1524
|
+
});
|
|
1525
|
+
});
|
|
1526
|
+
|
|
1527
|
+
// Highlight active section on scroll
|
|
1528
|
+
var sections = document.querySelectorAll('.section[id]');
|
|
1529
|
+
var catBtns = document.querySelectorAll('.cat-btn[data-cat]');
|
|
1530
|
+
window.addEventListener('scroll', function() {
|
|
1531
|
+
var scrollY = window.scrollY + 160;
|
|
1532
|
+
sections.forEach(function(sec) {
|
|
1533
|
+
var id = sec.id.replace('sec-', '');
|
|
1534
|
+
if (sec.offsetTop <= scrollY && sec.offsetTop + sec.offsetHeight > scrollY) {
|
|
1535
|
+
catBtns.forEach(function(b) {
|
|
1536
|
+
b.classList.toggle('active', b.dataset.cat === id);
|
|
1537
|
+
});
|
|
1538
|
+
}
|
|
1539
|
+
});
|
|
1540
|
+
}, { passive: true });
|
|
1541
|
+
|
|
1542
|
+
// ─── HERO STATS ─────────────────────────────────────────────────────
|
|
1543
|
+
|
|
1544
|
+
fetch(BASE + '/api/os/observability/health')
|
|
1545
|
+
.then(function(r) { return r.json(); })
|
|
1546
|
+
.then(function(d) {
|
|
1547
|
+
if (d.version) document.getElementById('stat-version').textContent = d.version;
|
|
1548
|
+
if (d.uptime) {
|
|
1549
|
+
var h = Math.floor(d.uptime / 3600);
|
|
1550
|
+
var m = Math.floor((d.uptime % 3600) / 60);
|
|
1551
|
+
document.getElementById('stat-uptime').textContent = h + 'h ' + m + 'm';
|
|
1552
|
+
}
|
|
1553
|
+
})
|
|
1554
|
+
.catch(function() {});
|
|
1555
|
+
|
|
1556
|
+
// Count endpoints from the page
|
|
1557
|
+
var epCount = document.querySelectorAll('.endpoint').length;
|
|
1558
|
+
document.getElementById('stat-apis').textContent = '200+';
|
|
1559
|
+
|
|
1560
|
+
// ─── SEARCH ─────────────────────────────────────────────────────────
|
|
1561
|
+
|
|
1562
|
+
window.runSearch = function() { apiCall('GET', '/api/search?q=' + encodeURIComponent(document.getElementById('search-q').value), null, 'res-search'); };
|
|
1563
|
+
window.runSuggest = function() { apiCall('GET', '/api/search/suggest?q=' + encodeURIComponent(document.getElementById('suggest-q').value), null, 'res-suggest'); };
|
|
1564
|
+
window.runTrending = function() { apiCall('GET', '/api/search/trending', null, 'res-trending'); };
|
|
1565
|
+
|
|
1566
|
+
// ─── UNIVERSAL ──────────────────────────────────────────────────────
|
|
1567
|
+
|
|
1568
|
+
window.runDeals = function() { apiCall('POST', '/api/universal/deals', { query: document.getElementById('deals-q').value }, 'res-deals'); };
|
|
1569
|
+
window.runFairness = function() { apiCall('POST', '/api/universal/fairness', { url: document.getElementById('fair-url').value }, 'res-fairness'); };
|
|
1570
|
+
window.runAnalyze = function() { apiCall('POST', '/api/universal/analyze', { url: document.getElementById('analyze-url').value }, 'res-analyze'); };
|
|
1571
|
+
window.runTopFair = function() { apiCall('GET', '/api/universal/top-fair', null, 'res-topfair'); };
|
|
1572
|
+
|
|
1573
|
+
// ─── SOVEREIGN ──────────────────────────────────────────────────────
|
|
1574
|
+
|
|
1575
|
+
window.runRepLeaderboard = function() { apiCall('GET', '/api/sovereign/reputation/leaderboard', null, 'res-rep-leaders'); };
|
|
1576
|
+
window.runNegotiate = function() { apiCall('GET', '/api/negotiate', null, 'res-negotiate'); };
|
|
1577
|
+
window.runVerifyStats = function() { apiCall('GET', '/api/sovereign/verify/stats', null, 'res-verify-stats'); };
|
|
1578
|
+
window.runPriceShield = function() { apiCall('GET', '/api/sovereign/price-shield/stats', null, 'res-price-shield'); };
|
|
1579
|
+
window.runPersonas = function() { apiCall('GET', '/api/sovereign/price-shield/personas', null, 'res-personas'); };
|
|
1580
|
+
window.runRepSearch = function() {
|
|
1581
|
+
var cat = document.getElementById('rep-cat').value;
|
|
1582
|
+
var min = document.getElementById('rep-min').value;
|
|
1583
|
+
apiCall('GET', '/api/sovereign/reputation/search?category=' + encodeURIComponent(cat) + '&minScore=' + min, null, 'res-rep-search');
|
|
1584
|
+
};
|
|
1585
|
+
|
|
1586
|
+
// ─── WORKSPACE (AUTH) ───────────────────────────────────────────────
|
|
1587
|
+
|
|
1588
|
+
function updateAuthStatus() {
|
|
1589
|
+
var el = document.getElementById('auth-status');
|
|
1590
|
+
if (authToken) {
|
|
1591
|
+
el.innerHTML = '✅ Token stored — <span style="color:var(--green);font-family:JetBrains Mono,monospace">' + authToken.substring(0, 20) + '...</span>';
|
|
1592
|
+
} else {
|
|
1593
|
+
el.textContent = '⚠️ No token stored — register or login first';
|
|
1594
|
+
}
|
|
1595
|
+
}
|
|
1596
|
+
|
|
1597
|
+
window.runRegister = function() {
|
|
1598
|
+
var email = document.getElementById('auth-email').value;
|
|
1599
|
+
var pass = document.getElementById('auth-pass').value;
|
|
1600
|
+
var name = document.getElementById('auth-name').value;
|
|
1601
|
+
if (!email || !pass) return alert('Email and password required');
|
|
1602
|
+
apiCall('POST', '/api/auth/register', { email: email, password: pass, name: name || 'Demo User' }, 'res-auth')
|
|
1603
|
+
.then(function(d) { if (d && d.token) { authToken = d.token; updateAuthStatus(); } });
|
|
1604
|
+
};
|
|
1605
|
+
|
|
1606
|
+
window.runLogin = function() {
|
|
1607
|
+
var email = document.getElementById('auth-email').value;
|
|
1608
|
+
var pass = document.getElementById('auth-pass').value;
|
|
1609
|
+
if (!email || !pass) return alert('Email and password required');
|
|
1610
|
+
apiCall('POST', '/api/auth/login', { email: email, password: pass }, 'res-auth')
|
|
1611
|
+
.then(function(d) { if (d && d.token) { authToken = d.token; updateAuthStatus(); } });
|
|
1612
|
+
};
|
|
1613
|
+
|
|
1614
|
+
window.runSubscription = function() {
|
|
1615
|
+
if (!authToken) return alert('Please register or login first');
|
|
1616
|
+
apiCall('GET', '/api/workspace/subscription', null, 'res-subscription');
|
|
1617
|
+
};
|
|
1618
|
+
|
|
1619
|
+
window.runFavorites = function() {
|
|
1620
|
+
if (!authToken) return alert('Please register or login first');
|
|
1621
|
+
apiCall('GET', '/api/workspace/favorites', null, 'res-favorites');
|
|
1622
|
+
};
|
|
1623
|
+
|
|
1624
|
+
window.runAddFavorite = function() {
|
|
1625
|
+
var form = document.getElementById('fav-form');
|
|
1626
|
+
if (form.style.display === 'none') {
|
|
1627
|
+
form.style.display = 'flex';
|
|
1628
|
+
return;
|
|
1629
|
+
}
|
|
1630
|
+
if (!authToken) return alert('Please register or login first');
|
|
1631
|
+
apiCall('POST', '/api/workspace/favorites', {
|
|
1632
|
+
url: document.getElementById('fav-url').value,
|
|
1633
|
+
title: document.getElementById('fav-title').value,
|
|
1634
|
+
folder: document.getElementById('fav-folder').value
|
|
1635
|
+
}, 'res-favorites');
|
|
1636
|
+
};
|
|
1637
|
+
|
|
1638
|
+
window.runHistory = function() {
|
|
1639
|
+
if (!authToken) return alert('Please register or login first');
|
|
1640
|
+
var q = document.getElementById('history-q').value;
|
|
1641
|
+
var path = '/api/workspace/history' + (q ? '?q=' + encodeURIComponent(q) : '');
|
|
1642
|
+
apiCall('GET', path, null, 'res-history');
|
|
1643
|
+
};
|
|
1644
|
+
|
|
1645
|
+
// ─── MESH ───────────────────────────────────────────────────────────
|
|
1646
|
+
|
|
1647
|
+
window.runMeshAgents = function() { apiCall('GET', '/api/mesh/agents', null, 'res-mesh-agents'); };
|
|
1648
|
+
window.runMeshChannels = function() { apiCall('GET', '/api/mesh/channels', null, 'res-mesh-channels'); };
|
|
1649
|
+
window.runMeshKnowledge = function() { apiCall('GET', '/api/mesh/knowledge', null, 'res-mesh-knowledge'); };
|
|
1650
|
+
window.runMeshStats = function() { apiCall('GET', '/api/mesh/stats', null, 'res-mesh-stats'); };
|
|
1651
|
+
window.runSymphony = function() { apiCall('GET', '/api/mesh/symphony/templates', null, 'res-symphony'); };
|
|
1652
|
+
window.runLearning = function() { apiCall('GET', '/api/mesh/learning/stats', null, 'res-learning'); };
|
|
1653
|
+
|
|
1654
|
+
// ─── COMMANDER ──────────────────────────────────────────────────────
|
|
1655
|
+
|
|
1656
|
+
window.runStrategies = function() { apiCall('GET', '/api/commander/strategies', null, 'res-strategies'); };
|
|
1657
|
+
window.runMissions = function() { apiCall('GET', '/api/commander/missions', null, 'res-missions'); };
|
|
1658
|
+
window.runEdgeNodes = function() { apiCall('GET', '/api/commander/edge/nodes', null, 'res-edge-nodes'); };
|
|
1659
|
+
|
|
1660
|
+
// ─── RUNTIME ────────────────────────────────────────────────────────
|
|
1661
|
+
|
|
1662
|
+
window.runProtocol = function() { apiCall('GET', '/api/os/protocol', null, 'res-protocol'); };
|
|
1663
|
+
window.runPlans = function() { apiCall('GET', '/api/os/plans', null, 'res-plans'); };
|
|
1664
|
+
window.runAdapters = function() { apiCall('GET', '/api/os/adapters', null, 'res-adapters'); };
|
|
1665
|
+
window.runMarketplace = function() { apiCall('GET', '/api/os/marketplace', null, 'res-marketplace'); };
|
|
1666
|
+
window.runCluster = function() { apiCall('GET', '/api/os/cluster/status', null, 'res-cluster'); };
|
|
1667
|
+
window.runReplay = function() { apiCall('GET', '/api/os/replay/stats', null, 'res-replay'); };
|
|
1668
|
+
window.runFailures = function() { apiCall('GET', '/api/os/failures/analysis/summary', null, 'res-failures'); };
|
|
1669
|
+
window.runLLMModels = function() { apiCall('GET', '/api/os/llm/models', null, 'res-llm'); };
|
|
1670
|
+
|
|
1671
|
+
// ─── VISION & LFD ──────────────────────────────────────────────────
|
|
1672
|
+
|
|
1673
|
+
window.runVisionModels = function() { apiCall('GET', '/api/os/vision/models', null, 'res-vision-models'); };
|
|
1674
|
+
window.runVisionHistory = function() { apiCall('GET', '/api/os/vision/history', null, 'res-vision-history'); };
|
|
1675
|
+
window.runLfdStats = function() { apiCall('GET', '/api/os/lfd/stats', null, 'res-lfd-stats'); };
|
|
1676
|
+
window.runRecipes = function() { apiCall('GET', '/api/os/recipes', null, 'res-recipes'); };
|
|
1677
|
+
|
|
1678
|
+
// ─── DISCOVERY ──────────────────────────────────────────────────────
|
|
1679
|
+
|
|
1680
|
+
window.runWellKnown = function() { apiCall('GET', '/.well-known/wab.json', null, 'res-wellknown'); };
|
|
1681
|
+
window.runRegistry = function() { apiCall('GET', '/api/discovery/registry', null, 'res-registry'); };
|
|
1682
|
+
window.runDiscSearch = function() { apiCall('GET', '/api/discovery/search?q=' + encodeURIComponent(document.getElementById('disc-q').value), null, 'res-disc-search'); };
|
|
1683
|
+
window.runOpenAPI = function() { apiCall('GET', '/openapi.json', null, 'res-openapi'); };
|
|
1684
|
+
|
|
1685
|
+
// ─── HEALTH ─────────────────────────────────────────────────────────
|
|
1686
|
+
|
|
1687
|
+
window.runHealth = function() {
|
|
1688
|
+
apiCall('GET', '/api/os/observability/health', null, 'res-health')
|
|
1689
|
+
.then(function(d) {
|
|
1690
|
+
if (!d || !d.status) return;
|
|
1691
|
+
var dash = document.getElementById('health-dashboard');
|
|
1692
|
+
var items = [
|
|
1693
|
+
{ label: 'Status', value: d.status, ok: d.status === 'healthy' },
|
|
1694
|
+
{ label: 'Version', value: d.version || '—', ok: true },
|
|
1695
|
+
{ label: 'Uptime', value: d.uptime ? Math.floor(d.uptime / 3600) + 'h' : '—', ok: true },
|
|
1696
|
+
{ label: 'Memory', value: d.memory ? Math.round(d.memory.heapUsed / 1048576) + 'MB' : '—', ok: true },
|
|
1697
|
+
];
|
|
1698
|
+
if (d.subsystems) {
|
|
1699
|
+
Object.keys(d.subsystems).forEach(function(k) {
|
|
1700
|
+
var s = d.subsystems[k];
|
|
1701
|
+
items.push({ label: k, value: s.status || '—', ok: s.status === 'healthy' || s.status === 'ok' });
|
|
1702
|
+
});
|
|
1703
|
+
}
|
|
1704
|
+
var html = '<div class="health-grid">';
|
|
1705
|
+
items.forEach(function(it) {
|
|
1706
|
+
html += '<div class="health-item ' + (it.ok ? 'health-ok' : 'health-warn') + '">' +
|
|
1707
|
+
'<div class="h-val">' + it.value + '</div>' +
|
|
1708
|
+
'<div class="h-lbl">' + it.label + '</div></div>';
|
|
1709
|
+
});
|
|
1710
|
+
html += '</div>';
|
|
1711
|
+
dash.innerHTML = html;
|
|
1712
|
+
});
|
|
1713
|
+
};
|
|
1714
|
+
|
|
1715
|
+
window.runMetrics = function() { apiCall('GET', '/api/os/observability/metrics', null, 'res-health'); };
|
|
1716
|
+
|
|
1717
|
+
// ─── AGENT CHAT ─────────────────────────────────────────────────────
|
|
1718
|
+
|
|
1719
|
+
var chatBox = document.getElementById('chat-messages');
|
|
1720
|
+
var chatIn = document.getElementById('chat-input');
|
|
1721
|
+
var sessionId = 'demo-' + Math.random().toString(36).substring(2, 10);
|
|
1722
|
+
|
|
1723
|
+
function addChatMsg(text, cls) {
|
|
1724
|
+
var div = document.createElement('div');
|
|
1725
|
+
div.className = 'chat-msg ' + cls;
|
|
1726
|
+
div.innerHTML = text;
|
|
1727
|
+
chatBox.appendChild(div);
|
|
1728
|
+
chatBox.scrollTop = chatBox.scrollHeight;
|
|
1729
|
+
}
|
|
1730
|
+
|
|
1731
|
+
function sendChat() {
|
|
1732
|
+
var msg = chatIn.value.trim();
|
|
1733
|
+
if (!msg) return;
|
|
1734
|
+
chatIn.value = '';
|
|
1735
|
+
addChatMsg(msg, 'user');
|
|
1736
|
+
|
|
1737
|
+
fetch(BASE + '/api/wab/agent-chat', {
|
|
1738
|
+
method: 'POST',
|
|
1739
|
+
headers: { 'Content-Type': 'application/json' },
|
|
1740
|
+
body: JSON.stringify({ message: msg, sessionId: sessionId })
|
|
1741
|
+
})
|
|
1742
|
+
.then(function(r) { return r.json(); })
|
|
1743
|
+
.then(function(d) {
|
|
1744
|
+
var html = d.response || d.message || JSON.stringify(d);
|
|
1745
|
+
if (d.intent) {
|
|
1746
|
+
html += '<div class="intent-badge">Intent: ' + d.intent + '</div>';
|
|
1747
|
+
}
|
|
1748
|
+
if (d.task) {
|
|
1749
|
+
html += '<div style="margin-top:6px;font-size:0.72rem;color:var(--cyan);font-family:JetBrains Mono,monospace">Task ID: ' + d.task.id + ' — Status: ' + d.task.status + '</div>';
|
|
1750
|
+
}
|
|
1751
|
+
addChatMsg(html, 'agent');
|
|
1752
|
+
})
|
|
1753
|
+
.catch(function(e) {
|
|
1754
|
+
addChatMsg('Error: ' + e.message, 'agent');
|
|
1755
|
+
});
|
|
1756
|
+
}
|
|
1757
|
+
|
|
1758
|
+
document.getElementById('chat-send').addEventListener('click', sendChat);
|
|
1759
|
+
chatIn.addEventListener('keydown', function(e) { if (e.key === 'Enter') sendChat(); });
|
|
1760
|
+
|
|
1761
|
+
// ─── INIT ───────────────────────────────────────────────────────────
|
|
1762
|
+
|
|
1763
|
+
updateAuthStatus();
|
|
1764
|
+
// Auto-load health on page load
|
|
1765
|
+
setTimeout(function() { window.runHealth(); }, 500);
|
|
1766
|
+
})();
|
|
1767
|
+
</script>
|
|
1768
|
+
</body>
|
|
1769
|
+
</html>
|
|
1770
|
+
<!DOCTYPE html>
|
|
1771
|
+
<html lang="en">
|
|
3
1772
|
<head>
|
|
4
1773
|
<meta charset="UTF-8">
|
|
5
1774
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
@@ -254,6 +2023,6 @@
|
|
|
254
2023
|
</div>
|
|
255
2024
|
</div>
|
|
256
2025
|
|
|
257
|
-
<script src="/js/wab-demo-page.js"></script>
|
|
2026
|
+
<script src="/js/wab-demo-page.js?v=3.0.1"></script>
|
|
258
2027
|
</body>
|
|
259
2028
|
</html>
|