web-agent-bridge 3.4.0 → 3.9.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.
Files changed (315) hide show
  1. package/LICENSE +84 -84
  2. package/README.ar.md +1565 -1304
  3. package/README.md +171 -298
  4. package/bin/agent-runner.js +474 -474
  5. package/bin/cli.js +237 -237
  6. package/bin/wab-init.js +244 -223
  7. package/bin/wab.js +80 -80
  8. package/examples/azure-dns-wab.js +83 -83
  9. package/examples/bidi-agent.js +119 -119
  10. package/examples/cloudflare-wab-dns.js +121 -121
  11. package/examples/cpanel-wab-dns.js +114 -114
  12. package/examples/cross-site-agent.js +91 -91
  13. package/examples/dns-discovery-agent.js +166 -166
  14. package/examples/gcp-dns-wab.js +76 -76
  15. package/examples/governance-agent.js +169 -169
  16. package/examples/mcp-agent.js +94 -94
  17. package/examples/next-app-router/README.md +44 -44
  18. package/examples/plesk-wab-dns.js +103 -103
  19. package/examples/puppeteer-agent.js +108 -108
  20. package/examples/route53-wab-dns.js +144 -144
  21. package/examples/saas-dashboard/README.md +55 -55
  22. package/examples/safe-mode-agent.js +96 -96
  23. package/examples/self-discovery.js +106 -0
  24. package/examples/shopify-hydrogen/README.md +74 -74
  25. package/examples/vision-agent.js +171 -171
  26. package/examples/wab-sign.js +74 -74
  27. package/examples/wab-verify.js +60 -60
  28. package/examples/wordpress-elementor/README.md +77 -77
  29. package/package.json +93 -93
  30. package/public/.well-known/agent-tools.json +180 -180
  31. package/public/.well-known/ai-assets.json +59 -59
  32. package/public/.well-known/security.txt +8 -8
  33. package/public/.well-known/wab.json +28 -28
  34. package/public/activate.html +448 -368
  35. package/public/adopt.html +236 -0
  36. package/public/adoption-metrics.html +188 -188
  37. package/public/agent-workspace.html +359 -349
  38. package/public/ai.html +198 -198
  39. package/public/api.html +397 -413
  40. package/public/atp.html +171 -0
  41. package/public/azure-dns-integration.html +289 -289
  42. package/public/browser.html +486 -486
  43. package/public/cloudflare-integration.html +380 -380
  44. package/public/commander-dashboard.html +243 -243
  45. package/public/cookies.html +210 -210
  46. package/public/cpanel-integration.html +398 -398
  47. package/public/css/agent-workspace.css +1713 -1713
  48. package/public/css/premium.css +317 -317
  49. package/public/css/styles.css +1401 -1263
  50. package/public/dashboard-shieldlink.html +295 -0
  51. package/public/dashboard.html +711 -707
  52. package/public/dns.html +436 -436
  53. package/public/docs.html +588 -588
  54. package/public/enterprise-mesh.ar.html +80 -0
  55. package/public/enterprise-mesh.html +81 -0
  56. package/public/feed.xml +89 -89
  57. package/public/gcp-dns-integration.html +318 -318
  58. package/public/governance.ar.html +70 -0
  59. package/public/governance.html +69 -0
  60. package/public/growth.html +465 -465
  61. package/public/index.html +1372 -1266
  62. package/public/integrations.html +556 -556
  63. package/public/js/activate.js +449 -145
  64. package/public/js/agent-workspace.js +1740 -1740
  65. package/public/js/auth-nav.js +117 -65
  66. package/public/js/auth-redirect.js +12 -12
  67. package/public/js/cookie-consent.js +56 -56
  68. package/public/js/dns.js +438 -438
  69. package/public/js/wab-demo-page.js +721 -721
  70. package/public/js/ws-client.js +74 -74
  71. package/public/l-preview.html +242 -0
  72. package/public/llms-full.txt +360 -360
  73. package/public/llms.txt +125 -125
  74. package/public/login.html +85 -85
  75. package/public/mesh-dashboard.html +328 -328
  76. package/public/milestones.html +346 -0
  77. package/public/one-click.html +779 -0
  78. package/public/openapi.json +669 -669
  79. package/public/partners.ar.html +145 -0
  80. package/public/partners.html +143 -0
  81. package/public/phone-shield.html +281 -281
  82. package/public/plesk-integration.html +375 -375
  83. package/public/premium-dashboard.html +2489 -2489
  84. package/public/premium.html +793 -793
  85. package/public/privacy.html +297 -297
  86. package/public/provider-onboarding.html +172 -172
  87. package/public/provider-sandbox.html +134 -134
  88. package/public/providers.html +359 -359
  89. package/public/refusals.html +172 -0
  90. package/public/register.html +105 -105
  91. package/public/registrar-integrations.html +141 -141
  92. package/public/ring4.html +292 -0
  93. package/public/robots.txt +99 -99
  94. package/public/route53-integration.html +531 -531
  95. package/public/score.html +263 -0
  96. package/public/script/wab-consent.d.ts +36 -36
  97. package/public/script/wab-consent.js +104 -104
  98. package/public/script/wab-schema.js +131 -131
  99. package/public/script/wab.d.ts +108 -108
  100. package/public/script/wab.min.js +580 -580
  101. package/public/security.txt +8 -8
  102. package/public/shieldlink.html +244 -0
  103. package/public/shieldqr.html +231 -231
  104. package/public/sitemap.xml +13 -1
  105. package/public/terms.html +256 -256
  106. package/public/trust-graph-api.ar.html +92 -0
  107. package/public/trust-graph-api.html +91 -0
  108. package/public/wab-features.html +560 -0
  109. package/public/wab-trust.html +200 -200
  110. package/public/wab-truth.html +375 -0
  111. package/public/wab-vs-protocols.html +210 -210
  112. package/public/whitepaper.html +449 -449
  113. package/script/ai-agent-bridge.js +1754 -1754
  114. package/sdk/README.md +99 -99
  115. package/sdk/agent-mesh.js +449 -449
  116. package/sdk/atp.js +103 -0
  117. package/sdk/auto-discovery.js +301 -288
  118. package/sdk/commander.js +262 -262
  119. package/sdk/governance.js +262 -262
  120. package/sdk/index.d.ts +464 -464
  121. package/sdk/index.js +653 -649
  122. package/sdk/multi-agent.js +318 -318
  123. package/sdk/safe-mode.js +221 -221
  124. package/sdk/safety-shield.js +219 -219
  125. package/sdk/schema-discovery.js +83 -83
  126. package/server/adapters/index.js +520 -520
  127. package/server/config/plans.js +412 -367
  128. package/server/config/secrets.js +102 -102
  129. package/server/control-plane/index.js +301 -301
  130. package/server/data-plane/index.js +354 -354
  131. package/server/index.js +793 -670
  132. package/server/llm/index.js +404 -404
  133. package/server/middleware/adminAuth.js +35 -35
  134. package/server/middleware/api-tier.js +170 -0
  135. package/server/middleware/auth.js +50 -50
  136. package/server/middleware/featureGate.js +88 -88
  137. package/server/middleware/rateLimits.js +100 -100
  138. package/server/middleware/sensitiveAction.js +157 -157
  139. package/server/middleware/wab-trust.js +141 -0
  140. package/server/migrations/001_add_analytics_indexes.sql +7 -7
  141. package/server/migrations/002_premium_features.sql +418 -418
  142. package/server/migrations/003_ads_integer_cents.sql +33 -33
  143. package/server/migrations/004_agent_os.sql +158 -158
  144. package/server/migrations/005_marketplace_metering.sql +126 -126
  145. package/server/migrations/006_growth_suite.sql +138 -0
  146. package/server/migrations/007_governance.sql +106 -106
  147. package/server/migrations/008_plans.sql +144 -144
  148. package/server/migrations/009_shieldqr.sql +30 -30
  149. package/server/migrations/010_extended_trust.sql +33 -33
  150. package/server/migrations/011_outreach.sql +47 -0
  151. package/server/migrations/012_shieldlink.sql +116 -0
  152. package/server/migrations/013_ct_monitor.sql +13 -0
  153. package/server/migrations/014_wab_advanced_features.sql +128 -0
  154. package/server/migrations/015_wab_truth_layer.sql +101 -0
  155. package/server/migrations/016_ring4_external_trust.sql +84 -0
  156. package/server/migrations/017_ring4_extensions.sql +69 -0
  157. package/server/migrations/018_commercial_foundations.sql +167 -0
  158. package/server/migrations/019_unify_tier_constraints.sql +133 -0
  159. package/server/migrations/020_agent_transaction_primitive.sql +119 -0
  160. package/server/models/adapters/index.js +33 -33
  161. package/server/models/adapters/mysql.js +183 -183
  162. package/server/models/adapters/postgresql.js +172 -172
  163. package/server/models/adapters/sqlite.js +7 -7
  164. package/server/models/db.js +740 -740
  165. package/server/observability/failure-analysis.js +337 -337
  166. package/server/observability/index.js +394 -394
  167. package/server/protocol/capabilities.js +223 -223
  168. package/server/protocol/index.js +243 -243
  169. package/server/protocol/schema.js +584 -584
  170. package/server/registry/certification.js +271 -271
  171. package/server/registry/index.js +326 -326
  172. package/server/routes/activate.js +478 -0
  173. package/server/routes/admin-outreach.js +239 -0
  174. package/server/routes/admin-plans.js +76 -76
  175. package/server/routes/admin-premium.js +674 -673
  176. package/server/routes/admin-shieldlink.js +137 -0
  177. package/server/routes/admin-shieldqr.js +90 -90
  178. package/server/routes/admin-trust-monitor.js +139 -83
  179. package/server/routes/admin.js +550 -549
  180. package/server/routes/adopt.js +61 -0
  181. package/server/routes/ads.js +130 -130
  182. package/server/routes/agent-workspace.js +540 -540
  183. package/server/routes/api-keys.js +127 -0
  184. package/server/routes/api.js +150 -150
  185. package/server/routes/auth.js +71 -71
  186. package/server/routes/billing.js +57 -57
  187. package/server/routes/commander.js +316 -316
  188. package/server/routes/customer-shieldlink.js +133 -0
  189. package/server/routes/demo-showcase.js +332 -332
  190. package/server/routes/demo-store.js +154 -154
  191. package/server/routes/diagnose.js +373 -0
  192. package/server/routes/discovery.js +2348 -2348
  193. package/server/routes/enterprise-mesh.js +170 -0
  194. package/server/routes/gateway.js +173 -173
  195. package/server/routes/governance-saas.js +203 -0
  196. package/server/routes/governance.js +208 -208
  197. package/server/routes/growth.js +1048 -0
  198. package/server/routes/intent.js +328 -0
  199. package/server/routes/license.js +251 -251
  200. package/server/routes/mesh.js +469 -469
  201. package/server/routes/noscript.js +543 -543
  202. package/server/routes/partners.js +201 -0
  203. package/server/routes/plans.js +33 -33
  204. package/server/routes/premium-v2.js +686 -686
  205. package/server/routes/premium.js +724 -724
  206. package/server/routes/providers.js +650 -650
  207. package/server/routes/reputation.js +411 -0
  208. package/server/routes/ring4.js +885 -0
  209. package/server/routes/runtime.js +2148 -2148
  210. package/server/routes/shieldlink.js +70 -0
  211. package/server/routes/shieldqr.js +88 -88
  212. package/server/routes/sovereign.js +465 -465
  213. package/server/routes/transactions.js +233 -0
  214. package/server/routes/truth-layer.js +670 -0
  215. package/server/routes/universal.js +200 -200
  216. package/server/routes/unsubscribe.js +51 -0
  217. package/server/routes/wab-api.js +850 -850
  218. package/server/routes/wab-cache.js +282 -0
  219. package/server/runtime/container-worker.js +111 -111
  220. package/server/runtime/container.js +448 -448
  221. package/server/runtime/distributed-worker.js +362 -362
  222. package/server/runtime/event-bus.js +210 -210
  223. package/server/runtime/index.js +253 -253
  224. package/server/runtime/queue.js +599 -599
  225. package/server/runtime/replay.js +666 -666
  226. package/server/runtime/sandbox.js +266 -266
  227. package/server/runtime/scheduler.js +534 -534
  228. package/server/runtime/session-engine.js +293 -293
  229. package/server/runtime/state-manager.js +188 -188
  230. package/server/secrets/wab-signing-key.pem +3 -0
  231. package/server/secrets/wab-signing-pub.pem +3 -0
  232. package/server/security/cross-site-redactor.js +196 -196
  233. package/server/security/dry-run.js +180 -180
  234. package/server/security/human-gate-rate-limit.js +147 -147
  235. package/server/security/human-gate-transports.js +178 -178
  236. package/server/security/human-gate.js +281 -281
  237. package/server/security/index.js +368 -368
  238. package/server/security/intent-engine.js +245 -245
  239. package/server/security/reward-guard.js +171 -171
  240. package/server/security/rollback-store.js +239 -239
  241. package/server/security/token-scope.js +404 -404
  242. package/server/security/url-policy.js +139 -139
  243. package/server/services/adoption-agent.js +182 -0
  244. package/server/services/agent-chat.js +506 -506
  245. package/server/services/agent-learning.js +601 -601
  246. package/server/services/agent-memory.js +625 -625
  247. package/server/services/agent-mesh.js +555 -555
  248. package/server/services/agent-symphony.js +717 -717
  249. package/server/services/agent-tasks.js +1807 -1807
  250. package/server/services/api-key-engine.js +292 -292
  251. package/server/services/cluster.js +894 -894
  252. package/server/services/commander.js +738 -738
  253. package/server/services/edge-compute.js +440 -440
  254. package/server/services/email.js +233 -233
  255. package/server/services/fairness-engine.js +409 -0
  256. package/server/services/fairness.js +420 -0
  257. package/server/services/governance.js +466 -466
  258. package/server/services/hosted-runtime.js +205 -205
  259. package/server/services/lfd.js +635 -635
  260. package/server/services/local-ai.js +389 -389
  261. package/server/services/marketplace.js +270 -270
  262. package/server/services/metering.js +182 -182
  263. package/server/services/modules/affiliate-intelligence.js +93 -93
  264. package/server/services/modules/agent-firewall.js +90 -90
  265. package/server/services/modules/bounty.js +89 -89
  266. package/server/services/modules/collective-bargaining.js +92 -92
  267. package/server/services/modules/dark-pattern.js +66 -66
  268. package/server/services/modules/gov-intelligence.js +45 -45
  269. package/server/services/modules/neural.js +55 -55
  270. package/server/services/modules/notary.js +49 -49
  271. package/server/services/modules/price-time-machine.js +86 -86
  272. package/server/services/modules/protocol.js +104 -104
  273. package/server/services/negotiation.js +439 -439
  274. package/server/services/outreach-agent.js +312 -0
  275. package/server/services/plans.js +214 -214
  276. package/server/services/plugins.js +771 -771
  277. package/server/services/price-intelligence.js +566 -566
  278. package/server/services/price-shield.js +1137 -1137
  279. package/server/services/provider-clients.js +740 -740
  280. package/server/services/reputation.js +465 -465
  281. package/server/services/search-engine.js +357 -357
  282. package/server/services/security.js +513 -513
  283. package/server/services/self-healing.js +843 -843
  284. package/server/services/shieldlink.js +492 -0
  285. package/server/services/shieldqr.js +322 -322
  286. package/server/services/sovereign-shield.js +542 -542
  287. package/server/services/ssl-ct-monitor.js +224 -0
  288. package/server/services/ssl-inspector.js +42 -42
  289. package/server/services/ssl-monitor.js +167 -167
  290. package/server/services/stripe.js +206 -205
  291. package/server/services/swarm.js +788 -788
  292. package/server/services/transactions.js +525 -0
  293. package/server/services/universal-scraper.js +662 -662
  294. package/server/services/verification.js +481 -481
  295. package/server/services/vision.js +1163 -1163
  296. package/server/services/wab-crypto.js +178 -178
  297. package/server/utils/cache.js +125 -125
  298. package/server/utils/migrate.js +81 -81
  299. package/server/utils/safe-fetch.js +228 -228
  300. package/server/utils/secureFields.js +50 -50
  301. package/server/ws.js +161 -161
  302. package/templates/artisan-marketplace.yaml +104 -104
  303. package/templates/book-price-scout.yaml +98 -98
  304. package/templates/electronics-price-tracker.yaml +108 -108
  305. package/templates/flight-deal-hunter.yaml +113 -113
  306. package/templates/freelancer-direct.yaml +116 -116
  307. package/templates/grocery-price-compare.yaml +93 -93
  308. package/templates/hotel-direct-booking.yaml +113 -113
  309. package/templates/local-services.yaml +98 -98
  310. package/templates/olive-oil-tunisia.yaml +88 -88
  311. package/templates/organic-farm-fresh.yaml +101 -101
  312. package/templates/restaurant-direct.yaml +97 -97
  313. package/templates/ring4/banking-sovereign.yaml +55 -0
  314. package/templates/ring4/ecommerce-sovereign.yaml +58 -0
  315. package/templates/ring4/healthcare-sovereign.yaml +60 -0
package/public/index.html CHANGED
@@ -1,1266 +1,1372 @@
1
- <!DOCTYPE html>
2
- <html lang="en" dir="ltr">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Web Agent Bridge — Open AI↔Web Protocol & Agent Platform</title>
7
- <meta name="description" content="The open AI↔Web protocol & agent platform: standardized command interface, sovereign browser, phone shield, DNS discovery, agent mesh, and unified API gateway.">
8
- <link rel="preconnect" href="https://fonts.googleapis.com">
9
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10
- <style>body{background:#0a0e1a;color:#f0f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;min-height:100vh}
11
-
12
- </style>
13
- <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'">
14
- <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>
15
- <link rel="stylesheet" href="/css/styles.css?v=3.0.1">
16
- </head>
17
- <body>
18
-
19
- <!-- ═══════════ NAVBAR ═══════════ -->
20
- <nav class="navbar" id="navbar">
21
- <div class="container">
22
- <a href="/" class="navbar-brand">
23
- <div class="brand-icon">⚡</div>
24
- <span>WAB</span>
25
- </a>
26
- <ul class="navbar-links">
27
- <li><a href="#features">Features</a></li>
28
- <li><a href="#governance">Governance</a></li>
29
- <li><a href="#packages">Packages</a></li>
30
- <li><a href="#integrations">Integrations</a></li>
31
- <li><a href="#how-it-works">How It Works</a></li>
32
- <li><a href="#pricing">Pricing</a></li>
33
- <li><a href="#v2-features">v2.0</a></li>
34
- <li><a href="#agent-mesh">Agent Mesh</a></li>
35
- <li><a href="#agent-workspace">Workspace</a></li>
36
- <li><a href="/demo">Demo</a></li>
37
- <li><a href="/integrations">Integrations</a></li>
38
- <li><a href="#latest-additions">What's New</a></li>
39
- <li><a href="/dns">AI Discovery</a></li>
40
- <li><a href="/phone-shield">Phone Shield</a></li>
41
- <li><a href="/growth">Growth Suite</a></li>
42
- <li><a href="/api">API</a></li>
43
- <li><a href="/docs">Docs</a></li>
44
- <li><a href="/whitepaper">Whitepaper</a></li>
45
- </ul>
46
- <div class="navbar-actions">
47
- <a href="/login" class="btn btn-ghost" data-wab-auth="guest">Sign In</a>
48
- <a href="/dashboard" class="btn btn-ghost" data-wab-auth="signed-in" style="display:none">Dashboard</a>
49
- <a href="/register" class="btn btn-primary btn-sm" data-wab-auth="guest">Get Started</a>
50
- </div>
51
- <button class="mobile-menu-btn" >☰</button>
52
- </div>
53
- </nav>
54
-
55
- <!-- ═══════════ HERO ═══════════ -->
56
- <section class="hero">
57
- <div class="container">
58
- <div class="hero-content fade-in">
59
- <div class="hero-badge">
60
- 🚀 Open Source &middot; React &middot; Vue &middot; Svelte &middot; LangChain
61
- </div>
62
- <h1>
63
- Bridge the Gap Between<br>
64
- <span class="gradient-text">AI Agents</span> &amp; <span class="gradient-text-accent">Websites</span>
65
- </h1>
66
- <p>
67
- The open <strong>AI↔Web protocol & agent platform</strong>. A standardized command interface, sovereign browser,
68
- phone shield, DNS discovery, agent mesh, and unified API gateway — with permissions, rate limiting,
69
- and full control for site owners.
70
- </p>
71
- <div class="hero-actions">
72
- <a href="/register" class="btn btn-primary btn-lg">Start Free</a>
73
- <a href="/docs" class="btn btn-secondary btn-lg">Read the Docs</a>
74
- <a href="/whitepaper" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#4ea3ff,#8b5cf6);color:#fff;border:none">📄 Read the Whitepaper</a>
75
- <a href="/browser" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#0ea5e9,#10b981);color:#fff;border:none">🌐 Download WAB Browser</a>
76
- <a href="/pwa/" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#8b5cf6,#0ea5e9);color:#fff;border:none">📱 Mobile PWA</a>
77
- <a href="/workspace" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none">🤖 Agent Workspace</a>
78
- <a href="/demo" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none">🧪 API Playground</a>
79
- <a href="/demo" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#06b6d4,#0ea5e9);color:#fff;border:none">🎮 Interactive Demo</a>
80
- </div>
81
-
82
- <div class="hero-code fade-in fade-in-delay-2">
83
- <code>
84
- <span class="comment">// Add the bridge to your website</span><br>
85
- &lt;<span class="keyword">script</span>&gt;<br>
86
- &nbsp;&nbsp;window.<span class="property">AIBridgeConfig</span> = {<br>
87
- &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">licenseKey</span>: <span class="string">"WAB-XXXXX-XXXXX"</span>,<br>
88
- &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">agentPermissions</span>: { <span class="property">click</span>: <span class="boolean">true</span>, <span class="property">fillForms</span>: <span class="boolean">true</span> }<br>
89
- &nbsp;&nbsp;};<br>
90
- &lt;/<span class="keyword">script</span>&gt;<br>
91
- &lt;<span class="keyword">script</span> <span class="property">src</span>=<span class="string">"/script/ai-agent-bridge.js"</span>&gt;&lt;/<span class="keyword">script</span>&gt;
92
- </code>
93
- </div>
94
- </div>
95
- </div>
96
- </section>
97
-
98
- <!-- ═══════════ FEATURES ═══════════ -->
99
- <section class="section" id="features">
100
- <div class="container">
101
- <div class="section-header">
102
- <span class="label">Features</span>
103
- <h2>Everything AI Agents Need</h2>
104
- <p>A complete interface layer that makes websites AI-ready with security and control built in.</p>
105
- </div>
106
-
107
- <div class="grid-3">
108
- <div class="card fade-in">
109
- <div class="card-icon blue">🎯</div>
110
- <h3>Auto-Discovery</h3>
111
- <p>Automatically detects buttons, forms, and navigation elements — generating precise CSS selectors and action descriptions for AI agents.</p>
112
- </div>
113
- <div class="card fade-in fade-in-delay-1">
114
- <div class="card-icon purple">🔐</div>
115
- <h3>Permission System</h3>
116
- <p>Granular control over what AI agents can do. Enable clicking, form filling, API access, and more — each toggled independently.</p>
117
- </div>
118
- <div class="card fade-in fade-in-delay-2">
119
- <div class="card-icon cyan">⚡</div>
120
- <h3>Standardized Commands</h3>
121
- <p>Unified <code>window.AICommands</code> interface that any AI agent can read and execute — no more DOM guessing.</p>
122
- </div>
123
- <div class="card fade-in fade-in-delay-1">
124
- <div class="card-icon green">🛡️</div>
125
- <h3>Rate Limiting</h3>
126
- <p>Built-in rate limiting prevents abuse. Configure max calls per minute to protect your site from aggressive automation.</p>
127
- </div>
128
- <div class="card fade-in fade-in-delay-2">
129
- <div class="card-icon orange">📊</div>
130
- <h3>Analytics Dashboard</h3>
131
- <p>Track how AI agents interact with your site. See which actions are used most, success rates, and usage patterns.</p>
132
- </div>
133
- <div class="card fade-in fade-in-delay-3">
134
- <div class="card-icon pink">🔌</div>
135
- <h3>Custom Actions</h3>
136
- <p>Register your own actions with custom handlers. Create complex workflows that AI agents can trigger with a single command.</p>
137
- </div>
138
- <div class="card fade-in">
139
- <div class="card-icon cyan">🛒</div>
140
- <h3>Commerce &amp; Booking Intents</h3>
141
- <p>Automatically detects add-to-cart, checkout, booking, and reservation flows — mapping them to named actions agents can call directly.</p>
142
- </div>
143
- <div class="card fade-in fade-in-delay-1">
144
- <div class="card-icon blue">📦</div>
145
- <h3>Structured Data Scanning</h3>
146
- <p>Reads schema.org JSON-LD and microdata (Products, Offers, Prices) and exposes them as queryable actions — zero manual setup.</p>
147
- </div>
148
- <div class="card fade-in fade-in-delay-2">
149
- <div class="card-icon green">🩹</div>
150
- <h3>Self-Healing Selectors</h3>
151
- <p>7-strategy resilient element resolution. When the DOM changes, selectors auto-heal via ARIA, text similarity, and position heuristics.</p>
152
- </div>
153
- <div class="card fade-in">
154
- <div class="card-icon purple">🔏</div>
155
- <h3>GDPR / CCPA Consent</h3>
156
- <p>Optional consent banner gates agent actions behind user approval. SDK agents can check <code>hasConsent()</code> or <code>waitForConsent()</code> programmatically.</p>
157
- </div>
158
- <div class="card fade-in fade-in-delay-1">
159
- <div class="card-icon orange">🤖</div>
160
- <h3>Agent SDK</h3>
161
- <p>Built-in SDK for Puppeteer and Playwright: <code>runPipeline()</code>, <code>executeParallel()</code>, <code>screenshot()</code>, and consent-aware workflows.</p>
162
- </div>
163
- <div class="card fade-in fade-in-delay-2">
164
- <div class="card-icon pink">🌐</div>
165
- <h3>WebDriver BiDi</h3>
166
- <p>Standard WebDriver BiDi protocol support via <code>window.__wab_bidi</code> — compatible with any automation framework that speaks the standard.</p>
167
- </div>
168
- </div>
169
- </div>
170
- </section>
171
-
172
- <!-- ═══════════ GOVERNANCE LAYER ═══════════ -->
173
- <section class="section" id="governance" style="background: linear-gradient(180deg, var(--bg-primary) 0%, #f1f5f9 100%);">
174
- <div class="container">
175
- <div class="section-header">
176
- <span class="label" style="background:#0ea5e9; color:#fff;">Enterprise Security &amp; Compliance</span>
177
- <h2>Governance Layer — for agents that touch real money</h2>
178
- <p>The missing layer above the protocol: per-agent permissions, human-in-the-loop approvals, tamper-evident audit, kill-switch and spend caps — all server-enforced, all open-source, all one SDK call away.</p>
179
- <div style="display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px;">
180
- <img alt="Tamper-Evident Audit" src="https://img.shields.io/badge/Audit-Tamper--Evident_HMAC_Chain-0ea5e9?style=for-the-badge&logo=keybase&logoColor=white" />
181
- <img alt="Human-in-the-Loop Approvals" src="https://img.shields.io/badge/Approvals-Human--in--the--Loop-22c55e?style=for-the-badge&logo=checkmarx&logoColor=white" />
182
- <img alt="Kill Switch" src="https://img.shields.io/badge/Kill_Switch-Per--Agent-ef4444?style=for-the-badge&logo=stopsign&logoColor=white" />
183
- <img alt="Tests" src="https://img.shields.io/badge/Governance_Tests-26%2F26-22c55e?style=for-the-badge&logo=jest&logoColor=white" />
184
- </div>
185
- </div>
186
-
187
- <div class="grid-3" style="margin-top:32px;">
188
- <div class="card fade-in">
189
- <div class="card-icon blue">🔐</div>
190
- <h3>Permission Boundaries</h3>
191
- <p>Per-agent <code>resource × action × scope</code> policies with <code>allow</code> or <code>deny</code> effect. Most-specific scope wins. Deny-by-default.</p>
192
- </div>
193
- <div class="card fade-in fade-in-delay-1">
194
- <div class="card-icon green">🙋</div>
195
- <h3>Human-in-the-Loop Approvals</h3>
196
- <p>Mark any policy <code>requires_approval: true</code>. Sensitive actions wait for an explicit human <em>approve</em> or <em>reject</em> with TTL. SDK <code>onApprovalRequired</code> hook routes to Slack, email or webhook.</p>
197
- </div>
198
- <div class="card fade-in fade-in-delay-2">
199
- <div class="card-icon cyan">🧾</div>
200
- <h3>Tamper-Evident Audit</h3>
201
- <p>Every event hash-chained with HMAC: <code>hash<sub>n</sub> = HMAC(secret, prev_hash ‖ row)</code>. <code>verifyAuditChain()</code> rebuilds the chain and reports the first divergence — a single altered byte breaks every subsequent hash.</p>
202
- </div>
203
- <div class="card fade-in fade-in-delay-1">
204
- <div class="card-icon" style="background:#fee2e2; color:#dc2626;">🛑</div>
205
- <h3>Kill Switch</h3>
206
- <p>One <code>POST /agents/:id/kill</code> disables the agent globally. All pending approvals are auto-cancelled — no resurrection via stale approval requests.</p>
207
- </div>
208
- <div class="card fade-in fade-in-delay-2">
209
- <div class="card-icon orange">💰</div>
210
- <h3>Spend &amp; Rate Limits</h3>
211
- <p>Per-call <code>max_amount</code>, rolling 24-hour <code>daily_cap</code>, per-minute <code>per_call_rate</code>. Runaway loops can't drain your Stripe balance.</p>
212
- </div>
213
- <div class="card fade-in fade-in-delay-3">
214
- <div class="card-icon purple">🕵️</div>
215
- <h3>Auto-Redaction</h3>
216
- <p>Fields named <code>password</code>, <code>api_key</code>, <code>token</code>, <code>cookie</code>, <code>cvv</code>, <code>ssn</code> are automatically replaced with <code>[redacted]</code> before audit storage. Token itself is sha256-hashed at rest.</p>
217
- </div>
218
- </div>
219
-
220
- <div class="card fade-in" style="margin-top:32px; max-width:880px; margin-left:auto; margin-right:auto; background:#0f172a; color:#e2e8f0;">
221
- <div style="font-family: 'JetBrains Mono', Menlo, monospace; font-size:13px; line-height:1.6; overflow-x:auto;">
222
- <pre style="margin:0; color:#e2e8f0; background:transparent;"><span style="color:#64748b;">// One call wraps permission check + approval gate + execute + audit</span>
223
- <span style="color:#7dd3fc;">await</span> gov.<span style="color:#fbbf24;">guard</span>(
224
- { resource: <span style="color:#86efac;">'stripe'</span>, action: <span style="color:#86efac;">'write'</span>, scope: <span style="color:#86efac;">'refunds'</span>, amount: <span style="color:#fda4af;">49.99</span> },
225
- <span style="color:#7dd3fc;">async</span> () =&gt; stripe.refunds.<span style="color:#fbbf24;">create</span>({ charge: <span style="color:#86efac;">'ch_x'</span> }),
226
- );</pre>
227
- </div>
228
- <p style="margin-top:18px; color:#cbd5e1; font-size:14px;">
229
- ▶ Run the full 9-step demo:
230
- <code style="background:#1e293b; padding:4px 10px; border-radius:4px; color:#86efac;">node examples/governance-agent.js</code>
231
- </p>
232
- </div>
233
-
234
- <p style="text-align:center; margin-top:24px; color:#64748b;">
235
- Verified by <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/tests/governance.test.js" style="color:#0ea5e9; font-weight:600;">26 automated tests</a> covering security (10), operational (10), and SDK (6) scenarios.
236
- </p>
237
- </div>
238
- </section>
239
-
240
- <!-- ═══════════ V2 FEATURES ═══════════ -->
241
- <section class="section" id="v2-features" style="background: var(--bg-secondary);">
242
- <div class="container">
243
- <div class="section-header">
244
- <span class="label">v2.0 — Digital Fortress</span>
245
- <h2>Internet Sovereignty Features</h2>
246
- <p>WAB v2.0 goes beyond bridging — it protects users with negotiation, verification, and decentralized trust.</p>
247
- </div>
248
-
249
- <div class="grid-3">
250
- <div class="card fade-in" style="border-left: 3px solid #f59e0b;">
251
- <div class="card-icon orange">💰</div>
252
- <h3>Real-time Negotiation Engine</h3>
253
- <p>AI agents negotiate prices directly with WAB-enabled sites. Site owners define negotiation rules (bulk discounts, loyalty rewards, time-based offers). Agents submit counter-offers in multi-round sessions — no middleman, no hidden fees.</p>
254
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
255
- <li>8 condition types (bulk, loyalty, time, first-buy...)</li>
256
- <li>4 discount types (percentage, fixed, free shipping, bundle)</li>
257
- <li>Multi-round negotiation with counter-offers</li>
258
- <li>Savings tracking per agent</li>
259
- </ul>
260
- </div>
261
- <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #ef4444;">
262
- <div class="card-icon pink">🛡️</div>
263
- <h3>Anti-Hallucination Shield</h3>
264
- <p>Cross-verification engine that catches AI lies before they reach users. Compares DOM values against vision screenshots, validates prices against market benchmarks, and checks temporal consistency across sessions.</p>
265
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
266
- <li>DOM vs Vision verification</li>
267
- <li>Market benchmark price validation</li>
268
- <li>Temporal consistency checks</li>
269
- <li>Text similarity scoring (Levenshtein)</li>
270
- </ul>
271
- </div>
272
- <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #10b981;">
273
- <div class="card-icon green">⭐</div>
274
- <h3>Decentralized Reputation</h3>
275
- <p>Agents and sites build trust through cryptographic attestations. Every interaction gets scored — purchase success, data accuracy, delivery fulfillment. Scores are aggregated into transparent reputation profiles visible to all agents.</p>
276
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
277
- <li>Trust attestations from agent network</li>
278
- <li>Weighted scoring by interaction type</li>
279
- <li>Trust levels: emerging → verified → exemplary</li>
280
- <li>Global leaderboard</li>
281
- </ul>
282
- </div>
283
- <div class="card fade-in" style="border-left: 3px solid #3b82f6;">
284
- <div class="card-icon blue">🏰</div>
285
- <h3>Sovereign Dashboard</h3>
286
- <p>A real-time command center showing your digital fortress status — protected sites, fairness radar, privacy shield, negotiation logs, and verification checks all in one beautiful dark-mode dashboard.</p>
287
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
288
- <li>Live fairness radar with safety scoring</li>
289
- <li>Privacy shield metrics</li>
290
- <li>AI model switcher (Llama, GPT-4, Claude...)</li>
291
- <li>Protected sites table with trust levels</li>
292
- </ul>
293
- </div>
294
- <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #8b5cf6;">
295
- <div class="card-icon purple">📦</div>
296
- <h3>Community Agent Hub</h3>
297
- <p>Pre-built YAML agent templates for common use cases — hotel booking, grocery comparison, artisan marketplace, flight deals. Run any template with a single CLI command: <code>npx wab-agent run template.yaml</code>.</p>
298
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
299
- <li>11 production-ready templates</li>
300
- <li>CLI runner with variable substitution</li>
301
- <li>Fairness rules built into every template</li>
302
- <li>Supports negotiation + verification</li>
303
- </ul>
304
- </div>
305
- <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #0ea5e9;">
306
- <div class="card-icon cyan">🌐</div>
307
- <h3>Cross-Site Agent Orchestration</h3>
308
- <p>One agent manages multiple WAB-enabled sites simultaneously. Compare prices across stores, aggregate product data, run parallel actions — all from a single <code>WABMultiAgent</code> instance in the SDK.</p>
309
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
310
- <li>Parallel multi-site browser sessions</li>
311
- <li>comparePrices() with cheapest-deal finder</li>
312
- <li>Schema.org + WAB action price extraction</li>
313
- <li>Cross-site screenshots for vision verification</li>
314
- </ul>
315
- </div>
316
- <div class="card fade-in" style="border-left: 3px solid #06b6d4;">
317
- <div class="card-icon cyan">🔄</div>
318
- <h3>AI Brain Swapping</h3>
319
- <p>WAB is the bridge — the AI model is your choice. Switch between Llama 3, GPT-4, Claude, Gemini, Mistral, or run fully local with Ollama. Your data, your model, your sovereignty.</p>
320
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
321
- <li>6 supported AI engines</li>
322
- <li>Local-first with Ollama support</li>
323
- <li>Hot-swap without reconfiguration</li>
324
- <li>Your data never leaves your machine</li>
325
- </ul>
326
- </div>
327
- </div>
328
-
329
- <div style="text-align:center; margin-top:32px;">
330
- <a href="/sovereign" class="btn btn-primary btn-lg">Open Sovereign Dashboard</a>
331
- </div>
332
- </div>
333
- </section>
334
-
335
- <!-- ═══════════ PRIVATE AGENT MESH ═══════════ -->
336
- <section class="section" id="agent-mesh">
337
- <div class="container">
338
- <div class="section-header">
339
- <span class="label" style="background: rgba(139,92,246,0.15); color: #8b5cf6;">v2.3 — Distributed Mind</span>
340
- <h2>Private Agent Mesh</h2>
341
- <p>Agents communicate, learn, and orchestrate autonomously — zero external LLM dependency. Your private fortress now has a distributed intelligence layer.</p>
342
- </div>
343
-
344
- <div class="grid-3">
345
- <div class="card fade-in" style="border-left: 3px solid #8b5cf6;">
346
- <div class="card-icon purple">🕸️</div>
347
- <h3>Inter-Agent Protocol</h3>
348
- <p>Agents communicate through a private mesh — sharing discoveries, broadcasting alerts, and exchanging tactics in real-time. 5 built-in channels: alerts, discoveries, tactics, negotiations, votes.</p>
349
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
350
- <li>Real-time agent-to-agent messaging</li>
351
- <li>Shared knowledge base with confidence scoring</li>
352
- <li>Priority-based message routing</li>
353
- <li>Auto-expiring messages with TTL</li>
354
- </ul>
355
- </div>
356
- <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #10b981;">
357
- <div class="card-icon green">🧠</div>
358
- <h3>Local Reinforcement Learning</h3>
359
- <p>Agents learn from every user decision — accepted, rejected, or modified. Multi-armed bandit action selection, gradient-descent policy updates, and behavioral pattern mining. All local, zero tokens consumed.</p>
360
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
361
- <li>UCB1 multi-armed bandit for action selection</li>
362
- <li>Sigmoid prediction with gradient descent</li>
363
- <li>Behavioral sequence pattern mining</li>
364
- <li>Bayesian confidence estimation</li>
365
- </ul>
366
- </div>
367
- <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #f59e0b;">
368
- <div class="card-icon orange">🎼</div>
369
- <h3>Symphony Orchestrator</h3>
370
- <p>Four specialized agents (Researcher, Analyst, Negotiator, Guardian) collaborate autonomously through rule-based engines. No external AI needed — the symphony runs entirely on local heuristics and learned preferences.</p>
371
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
372
- <li>5 templates: purchase, price comparison, negotiation, exploration, audit</li>
373
- <li>6-phase pipeline: compose → discover → analyze → negotiate → guard → decide</li>
374
- <li>Guardian veto for safety-critical decisions</li>
375
- <li>Weighted consensus with agreement scoring</li>
376
- </ul>
377
- </div>
378
- </div>
379
-
380
- <div style="text-align:center; margin-top:32px;">
381
- <a href="/mesh-dashboard" class="btn btn-primary btn-lg" style="background: #8b5cf6;">Open Agent Mesh Dashboard</a>
382
- </div>
383
- </div>
384
- </section>
385
-
386
- <!-- ═══════════ AGENT WORKSPACE (v2.5) ═══════════ -->
387
- <section class="section" id="agent-workspace" style="background: var(--bg-secondary);">
388
- <div class="container">
389
- <div class="section-header">
390
- <span class="label" style="background: rgba(245,158,11,0.15); color: #f59e0b;">v2.5 — Agent Workspace</span>
391
- <h2>Smart Agent Workspace</h2>
392
- <p>A premium 4-panel workspace for non-technical users — search, negotiate, and buy with AI assistance. Available in Arabic &amp; English with multilingual agent support.</p>
393
- </div>
394
-
395
- <div class="grid-3">
396
- <div class="card fade-in" style="border-left: 3px solid #0ea5e9;">
397
- <div class="card-icon blue">🌐</div>
398
- <h3>Embedded Browser</h3>
399
- <p>Full browser panel with URL bar, navigation controls, and secure iframe rendering. The agent opens pages, loads deals, and navigates sites — all visible in real-time.</p>
400
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
401
- <li>Address bar with SSL indicator</li>
402
- <li>Back, forward, refresh controls</li>
403
- <li>Maximize any panel to full screen</li>
404
- </ul>
405
- </div>
406
- <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #10b981;">
407
- <div class="card-icon green">🤖</div>
408
- <h3>Smart Agent Chat</h3>
409
- <p>Chat with the AI agent in any language — Arabic, English, French, Turkish, or mix them all. The agent understands your intent from any style, dialect, or slang.</p>
410
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
411
- <li>Suggestion chips for quick start</li>
412
- <li>Multilingual — responds in your language</li>
413
- <li>Clarifying questions for precise results</li>
414
- </ul>
415
- </div>
416
- <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #f59e0b;">
417
- <div class="card-icon orange">📊</div>
418
- <h3>Negotiation Monitor</h3>
419
- <p>Watch the agent work in real-time — step-by-step progress tracking, per-agent status cards, and live negotiation rounds with savings details.</p>
420
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
421
- <li>Multi-step progress visualization</li>
422
- <li>Per-agent cards with progress bars</li>
423
- <li>Negotiation round-by-round log</li>
424
- </ul>
425
- </div>
426
- <div class="card fade-in" style="border-left: 3px solid #8b5cf6;">
427
- <div class="card-icon purple">🏆</div>
428
- <h3>Results &amp; Actions</h3>
429
- <p>Compare offers ranked by value with savings percentages, one-click deal links, and an "Agent Do It" button that lets the AI complete the purchase for you.</p>
430
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
431
- <li>Deal cards with price comparison</li>
432
- <li>One-click \"Open Deal\" links</li>
433
- <li>\"Agent Do It\" auto-completion</li>
434
- </ul>
435
- </div>
436
- <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #ef4444;">
437
- <div class="card-icon pink">🌍</div>
438
- <h3>Bilingual UI (AR/EN)</h3>
439
- <p>Full Arabic and English interface with auto-detection from browser language. Toggle instantly between languages with complete RTL/LTR layout support.</p>
440
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
441
- <li>100+ translated UI strings</li>
442
- <li>Auto-detect browser language</li>
443
- <li>RTL ↔ LTR with one click</li>
444
- </ul>
445
- </div>
446
- <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #06b6d4;">
447
- <div class="card-icon cyan">💎</div>
448
- <h3>Subscription Plans</h3>
449
- <p>Free tier (5 tasks/day), Starter, Pro (unlimited + advanced negotiation), and Enterprise plans. Admin dashboard for managing users, deals, and analytics.</p>
450
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
451
- <li>Free, Starter, Pro, Enterprise</li>
452
- <li>Usage tracking with daily limits</li>
453
- <li>Admin management panel</li>
454
- </ul>
455
- </div>
456
- <div class="card fade-in" style="border-left: 3px solid #a855f7;">
457
- <div class="card-icon purple">🛡️</div>
458
- <h3>Dynamic Pricing Shield</h3>
459
- <p>Detects when websites manipulate prices based on your device, location, cookies, or browsing history. The agent probes with 12 distinct identities to expose hidden pricing and find the lowest price invisible to normal users.</p>
460
- <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
461
- <li>12 identity personas (device, geo, referral, privacy)</li>
462
- <li>Statistical variance &amp; z-score outlier detection</li>
463
- <li>Manipulation scoring with actionable tips</li>
464
- <li>Historical price-trend analysis</li>
465
- </ul>
466
- </div>
467
- </div>
468
-
469
- <div style="text-align:center; margin-top:32px;">
470
- <a href="/workspace" class="btn btn-primary btn-lg" style="background: linear-gradient(135deg,#f59e0b,#ef4444);">Open Agent Workspace</a>
471
- </div>
472
- </div>
473
- </section>
474
-
475
- <!-- ═══════════ HOW IT WORKS ═══════════ -->
476
- <section class="section" id="how-it-works" style="background: var(--bg-secondary);">
477
- <div class="container">
478
- <div class="section-header">
479
- <span class="label">How It Works</span>
480
- <h2>Three Steps to AI-Ready</h2>
481
- <p>Get your website ready for AI agents in minutes, not days.</p>
482
- </div>
483
-
484
- <div class="grid-3">
485
- <div class="card" style="text-align:center;">
486
- <div style="font-size:2.5rem; margin-bottom:16px;">1️⃣</div>
487
- <h3>Add the Script</h3>
488
- <p>Include the bridge script in your HTML with your configuration. Set permissions, restrictions, and your license key.</p>
489
- </div>
490
- <div class="card" style="text-align:center;">
491
- <div style="font-size:2.5rem; margin-bottom:16px;">2️⃣</div>
492
- <h3>Configure Permissions</h3>
493
- <p>Use the dashboard to fine-tune which actions AI agents can perform. Block sensitive areas and set rate limits.</p>
494
- </div>
495
- <div class="card" style="text-align:center;">
496
- <div style="font-size:2.5rem; margin-bottom:16px;">3️⃣</div>
497
- <h3>AI Agents Connect</h3>
498
- <p>AI agents read <code>window.AICommands</code>, discover available actions, and execute them precisely — no DOM scraping needed.</p>
499
- </div>
500
- </div>
501
-
502
- <div style="margin-top:48px;">
503
- <div class="code-block">
504
- <div class="code-header">
505
- <div class="code-dots"><span></span><span></span><span></span></div>
506
- <span class="code-lang">JavaScript — AI Agent Side</span>
507
- </div>
508
- <div class="code-body">
509
- <pre><span class="cm">// AI Agent reads available commands</span>
510
- <span class="kw">const</span> bridge = window.<span class="prop">AICommands</span>;
511
-
512
- <span class="cm">// Discover all available actions</span>
513
- <span class="kw">const</span> actions = bridge.<span class="fn">getActions</span>();
514
- console.<span class="fn">log</span>(actions);
515
- <span class="cm">// → [{ name: "signup", trigger: "click", ... }, ...]</span>
516
-
517
- <span class="cm">// Execute a form fill action</span>
518
- <span class="kw">const</span> result = <span class="kw">await</span> bridge.<span class="fn">execute</span>(<span class="str">"fill_contact_form"</span>, {
519
- <span class="prop">name</span>: <span class="str">"John Doe"</span>,
520
- <span class="prop">email</span>: <span class="str">"john@example.com"</span>,
521
- <span class="prop">message</span>: <span class="str">"Hello from AI!"</span>
522
- });
523
-
524
- <span class="cm">// Wait for dynamic content</span>
525
- <span class="kw">await</span> bridge.<span class="fn">waitForElement</span>(<span class="str">".success-message"</span>);</pre>
526
- </div>
527
- </div>
528
- </div>
529
- </div>
530
- </section>
531
-
532
- <!-- ═══════════ PRICING ═══════════ -->
533
- <section class="section" id="pricing">
534
- <div class="container">
535
- <div class="section-header">
536
- <span class="label">Pricing</span>
537
- <h2>Simple, Transparent Pricing</h2>
538
- <p>Start free, upgrade when you need advanced features. Open source forever.</p>
539
- </div>
540
-
541
- <div class="grid-3" id="pricing-grid" data-pricing-grid>
542
- <!-- Server-rendered fallback. Replaced live by /api/plans on page load. -->
543
- <div class="pricing-card">
544
- <div class="pricing-tier">Free</div>
545
- <div class="pricing-price">€0 <span>/mo</span></div>
546
- <div class="pricing-desc">Open-source core, free forever.</div>
547
- <ul class="pricing-features">
548
- <li>WAP protocol &amp; SDK</li>
549
- <li>DNS / .well-known discovery</li>
550
- <li>Browser execution layer</li>
551
- <li>MCP / REST adapters</li>
552
- <li>Basic agent registration</li>
553
- </ul>
554
- <a href="/register" class="btn btn-secondary" style="width:100%;">Get Started Free</a>
555
- </div>
556
-
557
- <div class="pricing-card featured">
558
- <div class="pricing-tier">Pro</div>
559
- <div class="pricing-price">€10 <span>/mo</span></div>
560
- <div class="pricing-desc">For developers shipping production agents.</div>
561
- <ul class="pricing-features">
562
- <li>Everything in Free</li>
563
- <li>Workspace &amp; observability</li>
564
- <li>Replay engine</li>
565
- <li>Advanced orchestration</li>
566
- <li>Advanced analytics &amp; data extraction</li>
567
- </ul>
568
- <a href="/register" class="btn btn-primary" style="width:100%;">Start Pro</a>
569
- </div>
570
-
571
- <div class="pricing-card">
572
- <div class="pricing-tier">Business</div>
573
- <div class="pricing-price">€29 <span>/mo</span></div>
574
- <div class="pricing-desc">All paid features, ready for scale.</div>
575
- <ul class="pricing-features">
576
- <li>Everything in Pro</li>
577
- <li>Hosted runtime &amp; marketplace</li>
578
- <li>Vision, swarm, traffic intel</li>
579
- <li>Audit logs &amp; custom domain</li>
580
- <li>Agent governance layer</li>
581
- </ul>
582
- <a href="/register" class="btn btn-secondary" style="width:100%;">Start Business</a>
583
- </div>
584
-
585
- <div class="pricing-card">
586
- <div class="pricing-tier">Enterprise</div>
587
- <div class="pricing-price">Custom</div>
588
- <div class="pricing-desc">Custom-built for organisations.</div>
589
- <ul class="pricing-features">
590
- <li>Everything in Business</li>
591
- <li>Enterprise security &amp; SSO</li>
592
- <li>Dedicated infrastructure</li>
593
- <li>Priority support &amp; SLA</li>
594
- <li>Custom development</li>
595
- </ul>
596
- <a href="mailto:sales@webagentbridge.com" class="btn btn-secondary" style="width:100%;">Contact Sales</a>
597
- </div>
598
- </div>
599
- <script>
600
- (function () {
601
- var GRID = document.getElementById('pricing-grid');
602
- if (!GRID) return;
603
- var FEATURED_ID = 'pro';
604
- function esc(s){return String(s==null?'':s).replace(/[&<>"']/g,function(c){return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];});}
605
- function fmtPrice(p){
606
- if (p.billing_period === 'custom' || p.cta_type === 'contact') return 'Custom';
607
- if (!p.price_cents) return (p.currency==='EUR'?'€':p.currency==='USD'?'$':p.currency+' ') + '0 <span>/' + esc(p.billing_period) + '</span>';
608
- var sym = p.currency === 'EUR' ? '€' : (p.currency === 'USD' ? '$' : p.currency + ' ');
609
- return sym + (p.price_cents/100).toFixed(p.price_cents % 100 === 0 ? 0 : 2) + ' <span>/' + esc(p.billing_period) + '</span>';
610
- }
611
- function ctaHref(p){
612
- if (p.cta_type === 'contact') return p.cta_url || 'mailto:sales@webagentbridge.com';
613
- if (p.cta_type === 'external') return p.cta_url || '/register';
614
- if (p.cta_type === 'register') return p.cta_url || '/register';
615
- // checkout — send authenticated users straight to dashboard?plan=…, anonymous to register first.
616
- return '/register?plan=' + encodeURIComponent(p.id);
617
- }
618
- function topFeatures(plan, catalog, max){
619
- var labels = catalog.reduce(function(m,f){m[f.key]=f.label;return m;},{});
620
- var keys = Object.keys(plan.features||{}).filter(function(k){return plan.features[k];});
621
- // Prefer non-open-source labels (the differentiators) when listing.
622
- var nonOpen = keys.filter(function(k){var f=catalog.find(function(x){return x.key===k;});return f && !f.is_open_source;});
623
- var pick = nonOpen.length ? nonOpen : keys;
624
- return pick.slice(0, max).map(function(k){return labels[k] || k;});
625
- }
626
- function render(plans, catalog){
627
- if (!plans || !plans.length) return;
628
- var html = plans.map(function(p){
629
- var feats = topFeatures(p, catalog, 6);
630
- var ctaCls = p.highlight ? 'btn-primary' : 'btn-secondary';
631
- return ''
632
- + '<div class="pricing-card' + (p.highlight ? ' featured' : '') + '">'
633
- + '<div class="pricing-tier">' + esc(p.name) + '</div>'
634
- + '<div class="pricing-price">' + fmtPrice(p) + '</div>'
635
- + '<div class="pricing-desc">' + esc(p.tagline || p.description || '') + '</div>'
636
- + '<ul class="pricing-features">'
637
- + feats.map(function(f){return '<li>' + esc(f) + '</li>';}).join('')
638
- + '</ul>'
639
- + '<a href="' + esc(ctaHref(p)) + '" class="btn ' + ctaCls + '" style="width:100%;">' + esc(p.cta_label || 'Get started') + '</a>'
640
- + '</div>';
641
- }).join('');
642
- GRID.innerHTML = html;
643
- GRID.style.gridTemplateColumns = 'repeat(' + Math.min(4, plans.length) + ', 1fr)';
644
- }
645
- fetch('/api/plans', { credentials: 'omit' })
646
- .then(function(r){ return r.ok ? r.json() : null; })
647
- .then(function(d){ if (d && d.plans) render(d.plans, d.features || []); })
648
- .catch(function(){ /* keep server fallback */ });
649
- })();
650
- </script>
651
- </div>
652
- </section>
653
-
654
- <!-- ═══════════ FRAMEWORK PACKAGES ═══════════ -->
655
- <section class="section" id="packages" style="background: var(--bg-secondary);">
656
- <div class="container">
657
- <div class="section-header">
658
- <span class="label">Packages</span>
659
- <h2>Use WAB with Your Favorite Framework</h2>
660
- <p>Official packages for React, Vue, Svelte, and LangChain — with full TypeScript support.</p>
661
- </div>
662
-
663
- <div class="grid-3">
664
- <div class="card fade-in" style="text-align:center;">
665
- <div style="font-size:2.5rem; margin-bottom:16px;">⚛️</div>
666
- <h3>React</h3>
667
- <p><code>@web-agent-bridge/react</code></p>
668
- <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Hooks: <code>useWAB</code>, <code>useWABAction</code>, <code>useWABActions</code> + <code>WABProvider</code> for auto-loading the script.</p>
669
- <div class="code-block" style="margin-top:16px; text-align:left;">
670
- <div class="code-body" style="padding:12px; font-size:0.82rem;">
671
- <pre><span class="kw">const</span> { run, result } = <span class="fn">useWABAction</span>(<span class="str">'addToCart'</span>);
672
- <span class="kw">await</span> <span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });</pre>
673
- </div>
674
- </div>
675
- </div>
676
- <div class="card fade-in fade-in-delay-1" style="text-align:center;">
677
- <div style="font-size:2.5rem; margin-bottom:16px;">💚</div>
678
- <h3>Vue 3</h3>
679
- <p><code>@web-agent-bridge/vue</code></p>
680
- <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Composables: <code>useWAB</code>, <code>useWABAction</code>, <code>useWABActions</code> — reactive refs with loading/error/result state.</p>
681
- <div class="code-block" style="margin-top:16px; text-align:left;">
682
- <div class="code-body" style="padding:12px; font-size:0.82rem;">
683
- <pre><span class="kw">const</span> cart = <span class="fn">useWABAction</span>(<span class="str">'addToCart'</span>);
684
- <span class="kw">await</span> cart.<span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });
685
- <span class="cm">// cart.result.value, cart.loading.value</span></pre>
686
- </div>
687
- </div>
688
- </div>
689
- <div class="card fade-in fade-in-delay-2" style="text-align:center;">
690
- <div style="font-size:2.5rem; margin-bottom:16px;">🔥</div>
691
- <h3>Svelte</h3>
692
- <p><code>@web-agent-bridge/svelte</code></p>
693
- <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Stores: <code>createWAB</code>, <code>createWABAction</code> — subscribe to <code>$store</code> for reactive state.</p>
694
- <div class="code-block" style="margin-top:16px; text-align:left;">
695
- <div class="code-body" style="padding:12px; font-size:0.82rem;">
696
- <pre><span class="kw">const</span> cart = <span class="fn">createWABAction</span>(<span class="str">'addToCart'</span>);
697
- <span class="kw">await</span> cart.<span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });
698
- <span class="cm">// {#if $cart.loading}Adding...{/if}</span></pre>
699
- </div>
700
- </div>
701
- </div>
702
- </div>
703
- </div>
704
- </section>
705
-
706
- <!-- ═══════════ LLM / AGENT INTEGRATION ═══════════ -->
707
- <section class="section" id="integrations">
708
- <div class="container">
709
- <div class="section-header">
710
- <span class="label">Agent Integrations</span>
711
- <h2>Connect Any AI Agent Framework</h2>
712
- <p>Use WAB with LangChain, MCP, or build your own agent — every action becomes a tool the LLM can call.</p>
713
- </div>
714
-
715
- <div class="grid-3">
716
- <div class="card fade-in" style="text-align:center;">
717
- <div style="font-size:2.5rem; margin-bottom:16px;">🦜</div>
718
- <h3>LangChain / LangGraph</h3>
719
- <p><code>@web-agent-bridge/langchain</code></p>
720
- <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">WABToolkit wraps every WAB action as a LangChain <code>StructuredTool</code>. Works in HTTP mode (server) or browser mode (Puppeteer).</p>
721
- <div class="code-block" style="margin-top:16px; text-align:left;">
722
- <div class="code-body" style="padding:12px; font-size:0.82rem;">
723
- <pre><span class="kw">const</span> tk = <span class="kw">new</span> <span class="fn">WABToolkit</span>({ <span class="prop">siteUrl</span>: <span class="str">'https://shop.example.com'</span> });
724
- <span class="kw">const</span> tools = <span class="kw">await</span> tk.<span class="fn">getTools</span>();
725
- <span class="cm">// Pass tools to any LangChain agent</span></pre>
726
- </div>
727
- </div>
728
- </div>
729
- <div class="card fade-in fade-in-delay-1" style="text-align:center;">
730
- <div style="font-size:2.5rem; margin-bottom:16px;">🔗</div>
731
- <h3>MCP Adapter</h3>
732
- <p><code>wab-mcp-adapter</code></p>
733
- <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Converts WAB actions into MCP tools so any MCP-compatible agent (Claude, etc.) can interact with WAB sites through MCP.</p>
734
- <div class="code-block" style="margin-top:16px; text-align:left;">
735
- <div class="code-body" style="padding:12px; font-size:0.82rem;">
736
- <pre><span class="kw">const</span> adapter = <span class="kw">new</span> <span class="fn">WABMCPAdapter</span>({ <span class="prop">siteUrl</span>: <span class="str">'...'</span> });
737
- <span class="kw">const</span> tools = adapter.<span class="fn">listTools</span>();
738
- <span class="cm">// Built-in: discover, execute, read, search</span></pre>
739
- </div>
740
- </div>
741
- </div>
742
- <div class="card fade-in fade-in-delay-2" style="text-align:center;">
743
- <div style="font-size:2.5rem; margin-bottom:16px;">🧰</div>
744
- <h3>Agent SDK</h3>
745
- <p><code>web-agent-bridge/sdk</code></p>
746
- <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">First-class Puppeteer/Playwright SDK with pipeline execution, parallel actions, screenshot capture, and consent-aware workflows.</p>
747
- <div class="code-block" style="margin-top:16px; text-align:left;">
748
- <div class="code-body" style="padding:12px; font-size:0.82rem;">
749
- <pre><span class="kw">const</span> agent = <span class="kw">new</span> <span class="fn">WABAgent</span>(page);
750
- <span class="kw">await</span> agent.<span class="fn">waitForConsent</span>();
751
- <span class="kw">await</span> agent.<span class="fn">runPipeline</span>([...steps]);</pre>
752
- </div>
753
- </div>
754
- </div>
755
- </div>
756
- </div>
757
- </section>
758
-
759
- <!-- ═══════════ EXAMPLES ═══════════ -->
760
- <section class="section" id="examples" style="background: var(--bg-secondary);">
761
- <div class="container">
762
- <div class="section-header">
763
- <span class="label">Examples</span>
764
- <h2>Framework &amp; CMS Integration Examples</h2>
765
- <p>Ready-to-use examples for popular platforms — see how WAB fits into your stack.</p>
766
- </div>
767
-
768
- <div class="grid-3">
769
- <div class="card fade-in" style="text-align:center;">
770
- <div style="font-size:2.2rem; margin-bottom:12px;">▲</div>
771
- <h3>Next.js App Router</h3>
772
- <p style="color:var(--text-secondary); font-size:0.9rem;">React Server Components + WABProvider for client-side bridge with <code>useWABAction</code> hooks.</p>
773
- </div>
774
- <div class="card fade-in fade-in-delay-1" style="text-align:center;">
775
- <div style="font-size:2.2rem; margin-bottom:12px;">🛍️</div>
776
- <h3>Shopify Hydrogen</h3>
777
- <p style="color:var(--text-secondary); font-size:0.9rem;">Hydrogen storefront with cart actions: <code>getCartCount</code>, <code>addFirstVisibleProductToCart</code>.</p>
778
- </div>
779
- <div class="card fade-in fade-in-delay-2" style="text-align:center;">
780
- <div style="font-size:2.2rem; margin-bottom:12px;">📝</div>
781
- <h3>WordPress + Elementor</h3>
782
- <p style="color:var(--text-secondary); font-size:0.9rem;">Elementor page builder + WAB schema scanner for auto-discovered product and form actions.</p>
783
- </div>
784
- <div class="card fade-in" style="text-align:center;">
785
- <div style="font-size:2.2rem; margin-bottom:12px;">📊</div>
786
- <h3>SaaS Dashboard</h3>
787
- <p style="color:var(--text-secondary); font-size:0.9rem;">Notion-style SaaS with KPI reads, customer lookup, and invoice workflow triggers.</p>
788
- </div>
789
- <div class="card fade-in fade-in-delay-1" style="text-align:center;">
790
- <div style="font-size:2.2rem; margin-bottom:12px;">🤖</div>
791
- <h3>Puppeteer Agent</h3>
792
- <p style="color:var(--text-secondary); font-size:0.9rem;">Headless browser agent that discovers and executes actions automatically via the SDK.</p>
793
- </div>
794
- <div class="card fade-in fade-in-delay-2" style="text-align:center;">
795
- <div style="font-size:2.2rem; margin-bottom:12px;">👁️</div>
796
- <h3>Vision Agent</h3>
797
- <p style="color:var(--text-secondary); font-size:0.9rem;">Natural language intent resolution — "add product to cart" maps to the right WAB action.</p>
798
- </div>
799
- </div>
800
-
801
- <div style="text-align:center; margin-top:32px;">
802
- <a href="https://github.com/abokenan444/web-agent-bridge/tree/master/examples" class="btn btn-secondary" target="_blank" rel="noopener">View All Examples on GitHub →</a>
803
- </div>
804
- </div>
805
- </section>
806
-
807
- <!-- ═══════════ GROWTH SUITE ═══════════ -->
808
- <section class="section" id="growth-suite" style="background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); color: #fff;">
809
- <div class="container" style="text-align:center;">
810
- <div style="display:inline-block; background:rgba(59,130,246,0.15); color:#60a5fa; padding:6px 16px; border-radius:20px; font-size:13px; font-weight:600; margin-bottom:20px;">WAB Growth Suite v2.5</div>
811
- <h2 style="margin-bottom:16px; color:#fff;">8 Modules to Protect & Power the Web</h2>
812
- <p style="color:#94a3b8; max-width:600px; margin:0 auto 40px; font-size:1.05rem; line-height:1.6;">
813
- From link protection widgets to AI safety layers, bounty networks to threat intelligence — everything you need to build a safer, fairer web.
814
- </p>
815
- <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; max-width:960px; margin:0 auto 40px;">
816
- <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
817
- <div style="font-size:28px; margin-bottom:8px;">🛡️</div>
818
- <div style="font-weight:700; font-size:15px;">WAB Widget</div>
819
- <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Drop-in link protection</div>
820
- </div>
821
- <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
822
- <div style="font-size:28px; margin-bottom:8px;">🤖</div>
823
- <div style="font-weight:700; font-size:15px;">AI Safety Layer</div>
824
- <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Security for AI agents</div>
825
- </div>
826
- <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
827
- <div style="font-size:28px; margin-bottom:8px;">📊</div>
828
- <div style="font-weight:700; font-size:15px;">WAB Score</div>
829
- <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Platform credit rating</div>
830
- </div>
831
- <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
832
- <div style="font-size:28px; margin-bottom:8px;">💰</div>
833
- <div style="font-weight:700; font-size:15px;">Bounty Network</div>
834
- <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Earn by finding scams</div>
835
- </div>
836
- </div>
837
- <a href="/growth" class="btn btn-primary btn-lg">Explore All 8 Modules →</a>
838
- </div>
839
- </section>
840
-
841
- <!-- ═══════════ 1. WAB WIDGET ═══════════ -->
842
- <section class="wab-widget-section" style="padding: 80px 20px; background: #f8fafc; text-align: center;">
843
- <div style="max-width: 800px; margin: 0 auto;">
844
- <h2 style="font-size: 36px; color: #0f172a; margin-bottom: 16px;">One Line of Code. Full Link Protection.</h2>
845
- <p style="font-size: 18px; color: #64748b; margin-bottom: 32px;">
846
- Add a <strong>WAB Widget</strong> next to every external link on your site, blocking phishing and scam URLs in real-time for your visitors.
847
- </p>
848
- <div style="background: #0f172a; color: #e2e8f0; padding: 24px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 14px; text-align: left; margin-bottom: 24px; overflow-x: auto;">
849
- <span style="color:#f472b6">&lt;script</span> <span style="color:#a78bfa">src</span>=<span style="color:#86efac">"https://webagentbridge.com/script/ai-agent-bridge.js"</span><br>
850
- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a78bfa">data-wab-key</span>=<span style="color:#86efac">"YOUR_API_KEY"</span><span style="color:#f472b6">&gt;&lt;/script&gt;</span>
851
- </div>
852
- <div style="display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;">
853
- <a href="/growth#modules" class="btn btn-primary">See Widget Demo</a>
854
- <a href="/workspace" class="btn btn-secondary">Get Your API Key →</a>
855
- </div>
856
- </div>
857
- </section>
858
-
859
- <!-- ═══════════ 2. AI SAFETY LAYER ═══════════ -->
860
- <section class="ai-safety-section" style="padding: 80px 20px; background: #0f172a; color: #fff;">
861
- <div style="max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;">
862
- <div>
863
- <div style="color: #3b82f6; font-weight: 700; margin-bottom: 8px; letter-spacing: 1px; font-size: 12px;">FOR AI COMPANIES</div>
864
- <h2 style="font-size: 32px; margin-bottom: 16px;">Mandatory Safety for AI Agents</h2>
865
- <p style="color: #94a3b8; font-size: 16px; line-height: 1.6; margin-bottom: 24px;">
866
- Building an AI agent that browses the web? Use <strong>WAB AI Safety Layer</strong> as a mandatory security wrapper. It scans every URL before your agent visits it.
867
- </p>
868
- <ul style="list-style: none; padding: 0; color: #cbd5e1; margin-bottom: 32px;">
869
- <li style="margin-bottom: 12px;">✅ Compatible with OpenAI Operator &amp; Anthropic Computer Use</li>
870
- <li style="margin-bottom: 12px;">✅ Blocks fraudulent financial transactions automatically</li>
871
- <li style="margin-bottom: 12px;">✅ Lifts legal liability from your company</li>
872
- </ul>
873
- <a href="/docs" class="btn btn-primary">Read AI Safety Docs →</a>
874
- </div>
875
- <div style="background: #1e293b; padding: 24px; border-radius: 16px; border: 1px solid #334155; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7; overflow-x: auto;">
876
- <span style="color:#c678dd">import</span> { WABAgentWrapper } <span style="color:#c678dd">from</span> <span style="color:#98c379">'@wab/sdk'</span>;<br><br>
877
- <span style="color:#5c6370">// Wrap your AI Agent with WAB Safety</span><br>
878
- <span style="color:#c678dd">const</span> safeAgent = <span style="color:#c678dd">new</span> <span style="color:#61afef">WABAgentWrapper</span>(myAgent, {<br>
879
- &nbsp;&nbsp;<span style="color:#d19a66">blockCritical</span>: <span style="color:#d19a66">true</span>,<br>
880
- &nbsp;&nbsp;<span style="color:#d19a66">minFairness</span>: <span style="color:#d19a66">60</span>,<br>
881
- });<br><br>
882
- <span style="color:#5c6370">// WAB will block this if the site is a scam</span><br>
883
- <span style="color:#c678dd">await</span> safeAgent.<span style="color:#61afef">browse</span>(<span style="color:#98c379">'https://scam-site.xyz'</span>);<br>
884
- <span style="color:#e06c75">→ WABBlockedError: Phishing detected</span>
885
- </div>
886
- </div>
887
- </section>
888
-
889
- <!-- ═══════════ 3. WAB SCORE ═══════════ -->
890
- <section class="wab-score-section" style="padding: 80px 20px; background: white; text-align: center;">
891
- <div style="max-width: 800px; margin: 0 auto;">
892
- <h2 style="font-size: 36px; color: #0f172a; margin-bottom: 16px;">The Digital World's Credit Rating</h2>
893
- <p style="font-size: 18px; color: #64748b; margin-bottom: 40px;">
894
- Like credit agencies rate banks, <strong>WAB Score</strong> rates digital platforms. Search any platform and get a transparency score based on 15 fairness signals.
895
- </p>
896
- <div style="display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 40px;">
897
- <div style="border: 2px solid #22c55e; border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; gap: 12px; background: #fff;">
898
- <div style="font-size: 32px; font-weight: 900; color: #22c55e; line-height: 1;">A-</div>
899
- <div>
900
- <div style="font-weight: 700; color: #1e293b;">Very Good</div>
901
- <div style="font-size: 12px; color: #64748b;">86/100 · amazon.com</div>
902
- </div>
903
- </div>
904
- <div style="border: 2px solid #f59e0b; border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; gap: 12px; background: #fff;">
905
- <div style="font-size: 32px; font-weight: 900; color: #f59e0b; line-height: 1;">C+</div>
906
- <div>
907
- <div style="font-weight: 700; color: #1e293b;">Below Average</div>
908
- <div style="font-size: 12px; color: #64748b;">68/100 · aliexpress.com</div>
909
- </div>
910
- </div>
911
- </div>
912
- <form action="/score" method="GET" style="display: flex; max-width: 500px; margin: 0 auto; gap: 8px;">
913
- <input type="text" name="domain" placeholder="Enter platform domain (e.g. shein.com)" style="flex: 1; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 15px;">
914
- <button type="submit" style="background: #0f172a; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer;">Check Score</button>
915
- </form>
916
- </div>
917
- </section>
918
-
919
- <!-- ═══════════ 4. TRUST LAYER PROTOCOL ═══════════ -->
920
- <section style="padding: 60px 20px; background: #f1f5f9; border-top: 1px solid #e2e8f0;">
921
- <div style="max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;">
922
- <div style="flex: 1; min-width: 280px;">
923
- <h3 style="font-size: 24px; color: #0f172a; margin-bottom: 12px;">The Open Trust Protocol</h3>
924
- <p style="color: #475569; line-height: 1.6; margin-bottom: 20px;">
925
- Prove to your customers that your store is fair and safe. Add a <code>wab.json</code> file to your site and print a verified trust badge — the SSL padlock for platform fairness.
926
- </p>
927
- <a href="/docs" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Learn how to get WAB Certified →</a>
928
- </div>
929
- <div style="flex: 1; min-width: 280px; background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
930
- <div style="font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #334155;">
931
- <span style="color:#94a3b8">// /.well-known/wab.json</span><br>
932
- {<br>
933
- &nbsp;&nbsp;"wab_certified": <span style="color:#22c55e">true</span>,<br>
934
- &nbsp;&nbsp;"fairness_score": <span style="color:#3b82f6">92</span>,<br>
935
- &nbsp;&nbsp;"last_audit": <span style="color:#a3e635">"2026-04-01"</span><br>
936
- }
937
- </div>
938
- </div>
939
- </div>
940
- </section>
941
-
942
- <!-- ═══════════ 5. BOUNTY NETWORK ═══════════ -->
943
- <section style="padding: 80px 20px; background: #0f172a; color: white; text-align: center;">
944
- <div style="max-width: 700px; margin: 0 auto;">
945
- <div style="font-size: 48px; margin-bottom: 16px;">💰</div>
946
- <h2 style="font-size: 36px; margin-bottom: 16px;">Earn Money by Discovering Fraud</h2>
947
- <p style="font-size: 18px; color: #94a3b8; margin-bottom: 32px; line-height: 1.6;">
948
- Join the <strong>WAB Bounty Network</strong> and report phishing, scams, and malware that automated systems haven't caught yet. Earn credits redeemable for cash.
949
- </p>
950
- <div style="display: flex; justify-content: center; gap: 24px; margin-bottom: 32px; flex-wrap: wrap;">
951
- <div style="background: #1e293b; padding: 16px 24px; border-radius: 8px;">
952
- <div style="font-size: 24px; font-weight: 700; color: #ef4444;">50 Credits</div>
953
- <div style="font-size: 13px; color: #94a3b8;">Critical Threats</div>
954
- </div>
955
- <div style="background: #1e293b; padding: 16px 24px; border-radius: 8px;">
956
- <div style="font-size: 24px; font-weight: 700; color: #f59e0b;">25 Credits</div>
957
- <div style="font-size: 13px; color: #94a3b8;">Confirmed Scams</div>
958
- </div>
959
- </div>
960
- <a href="/register" class="btn btn-primary btn-lg">Start Earning →</a>
961
- </div>
962
- </section>
963
-
964
- <!-- ═══════════ 6. DATA MARKETPLACE ═══════════ -->
965
- <section style="padding: 80px 20px; background: white;">
966
- <div style="max-width: 1000px; margin: 0 auto; text-align: center;">
967
- <h2 style="font-size: 32px; color: #0f172a; margin-bottom: 16px;">Threat Intelligence for AI &amp; Security</h2>
968
- <p style="font-size: 18px; color: #64748b; margin-bottom: 48px; max-width: 700px; margin-left: auto; margin-right: auto;">
969
- <strong>WAB Data Marketplace</strong> provides curated threat intelligence datasets for cybersecurity companies and AI model training.
970
- </p>
971
- <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
972
- <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
973
- <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Threat Intelligence Feed</h4>
974
- <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Real-time phishing, malware, and scam URL data from 47 databases. Updated continuously.</p>
975
- <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
976
- </div>
977
- <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
978
- <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Platform Fairness Data</h4>
979
- <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Quarterly transparency scores for 500+ marketplaces — hidden fees, return policies, dark patterns.</p>
980
- <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
981
- </div>
982
- <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
983
- <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Affiliate Intelligence</h4>
984
- <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Commission benchmarks, fraud patterns, and network reliability scores across all major affiliate platforms.</p>
985
- <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
986
- </div>
987
- </div>
988
- </div>
989
- </section>
990
-
991
- <!-- ═══════════ 7. EMAIL PROTECTION ═══════════ -->
992
- <section style="padding: 60px 20px; background: #f8fafc;">
993
- <div style="max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;">
994
- <div style="flex: 1; min-width: 280px;">
995
- <h3 style="font-size: 28px; color: #0f172a; margin-bottom: 16px;">Email Protection</h3>
996
- <p style="color: #475569; font-size: 16px; line-height: 1.6; margin-bottom: 24px;">
997
- 94% of cyber breaches start with a phishing email. Install the WAB extension and every link and sender in your inbox gets scanned by WAB automatically.
998
- </p>
999
- <div style="display: flex; gap: 12px; flex-wrap: wrap;">
1000
- <a href="/downloads" style="background: #fff; border: 1px solid #cbd5e1; padding: 10px 20px; border-radius: 8px; text-decoration: none; color: #1e293b; font-weight: 600; font-size: 14px;">🌐 Chrome Extension</a>
1001
- <a href="/downloads" style="background: #fff; border: 1px solid #cbd5e1; padding: 10px 20px; border-radius: 8px; text-decoration: none; color: #1e293b; font-weight: 600; font-size: 14px;">🦊 Firefox Add-on</a>
1002
- </div>
1003
- </div>
1004
- <div style="flex: 1; min-width: 280px; background: white; padding: 16px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);">
1005
- <div style="background: #fef2f2; border-left: 4px solid #ef4444; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px;">
1006
- <strong style="color: #991b1b; font-size: 13px;">🚫 WAB Security Alert:</strong>
1007
- <span style="color: #991b1b; font-size: 13px;"> Dangerous link detected</span>
1008
- <div style="color: #b91c1c; font-size: 12px; margin-top: 4px;">PHISHING DETECTED — paypa1-secure-login.xyz scored 95/100 risk</div>
1009
- </div>
1010
- <div style="height: 12px; background: #f1f5f9; width: 60%; margin-bottom: 8px; border-radius: 4px;"></div>
1011
- <div style="height: 12px; background: #f1f5f9; width: 80%; margin-bottom: 8px; border-radius: 4px;"></div>
1012
- <div style="height: 12px; background: #f1f5f9; width: 40%; border-radius: 4px;"></div>
1013
- </div>
1014
- </div>
1015
- </section>
1016
-
1017
- <!-- ═══════════ 8. AFFILIATE INTELLIGENCE ═══════════ -->
1018
- <section style="padding: 80px 20px; background: #0f172a; color: white; text-align: center;">
1019
- <div style="max-width: 800px; margin: 0 auto;">
1020
- <h2 style="font-size: 36px; margin-bottom: 16px;">Are Affiliate Networks Stealing Your Commissions?</h2>
1021
- <p style="font-size: 18px; color: #94a3b8; margin-bottom: 32px; line-height: 1.6;">
1022
- <strong>WAB Affiliate Intelligence</strong> analyzes your affiliate data and compares it with industry benchmarks to detect commission shaving, cookie stuffing, and payment delays.
1023
- </p>
1024
- <div style="background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 24px; text-align: left; max-width: 600px; margin: 0 auto 32px; font-family: 'JetBrains Mono', monospace;">
1025
- <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 12px; margin-bottom: 12px;">
1026
- <div>
1027
- <div style="color: #94a3b8; font-size: 12px; margin-bottom: 4px;">Network</div>
1028
- <div style="font-weight: 700; font-size: 16px;">ClickBank</div>
1029
- </div>
1030
- <div style="text-align: right;">
1031
- <div style="color: #94a3b8; font-size: 12px; margin-bottom: 4px;">Fraud Risk</div>
1032
- <div style="font-weight: 700; font-size: 16px; color: #f59e0b;">MEDIUM</div>
1033
- </div>
1034
- </div>
1035
- <div style="color: #cbd5e1; font-size: 14px; margin-bottom: 8px;">⚠️ <strong>Commission Shaving:</strong> 12% of valid sales cancelled</div>
1036
- <div style="color: #cbd5e1; font-size: 14px;">⚠️ <strong>Payment Delays:</strong> Average 45 days vs industry 30</div>
1037
- </div>
1038
- <a href="/register" class="btn btn-primary btn-lg">Analyze Your Networks →</a>
1039
- </div>
1040
- </section>
1041
-
1042
- <!-- ═══════════ LATEST ADDITIONS ═══════════ -->
1043
- <section class="section" id="latest-additions" style="background: var(--bg-secondary);">
1044
- <div class="container">
1045
- <div class="section-header">
1046
- <span class="label">Latest Additions</span>
1047
- <h2>All New Modules, Integrations &amp; Security Layers</h2>
1048
- <p>Everything added recently is listed here with direct links, so teams and users can immediately open what they need.</p>
1049
- </div>
1050
-
1051
- <div class="grid-3">
1052
- <div class="card fade-in" style="border-left:3px solid #0ea5e9;">
1053
- <div class="card-icon cyan">📱</div>
1054
- <h3>Sovereign Phone Shield</h3>
1055
- <p>Communication protection stack with behavioral IDS, threat-intel feed, community reporting, and personal vault encryption.</p>
1056
- <ul style="margin-top:10px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
1057
- <li>Connection analysis: allow / warn / block</li>
1058
- <li>Mobile device telemetry endpoints</li>
1059
- <li>AES-256-GCM personal vault</li>
1060
- </ul>
1061
- <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1062
- <a href="/phone-shield" class="btn btn-primary btn-sm">Open Shield</a>
1063
- <a href="/api/sovereign/shield/stats" class="btn btn-secondary btn-sm">Live Stats API</a>
1064
- </div>
1065
- </div>
1066
-
1067
- <div class="card fade-in fade-in-delay-1" style="border-left:3px solid #6366f1;">
1068
- <div class="card-icon purple">🚀</div>
1069
- <h3>One-Click Integrations Hub</h3>
1070
- <p>Ready deploy packs for Vercel, Netlify, Railway, Cloudflare Workers, Docker, Linux installer, and WordPress MU plugin.</p>
1071
- <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1072
- <a href="/integrations" class="btn btn-primary btn-sm">Open Integrations</a>
1073
- <a href="https://github.com/abokenan444/web-agent-bridge/tree/master/integrations" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">GitHub Templates</a>
1074
- </div>
1075
- </div>
1076
-
1077
- <div class="card fade-in fade-in-delay-2" style="border-left:3px solid #10b981;">
1078
- <div class="card-icon green">🧩</div>
1079
- <h3>Shared Hosting PHP Bridge</h3>
1080
- <p>Production-ready PHP bridge for shared hosting environments where Node daemons are not available.</p>
1081
- <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1082
- <a href="https://github.com/abokenan444/web-agent-bridge/tree/master/integrations/shared-hosting" target="_blank" rel="noopener" class="btn btn-primary btn-sm">Shared Hosting Pack</a>
1083
- <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/integrations/shared-hosting/README.ar.md" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">Arabic Guide</a>
1084
- </div>
1085
- </div>
1086
-
1087
- <div class="card fade-in" style="border-left:3px solid #f59e0b;">
1088
- <div class="card-icon orange">🌐</div>
1089
- <h3>Make Your Site AI-Discoverable in 5 Minutes</h3>
1090
- <p>One TXT record at <code>_wab.yourdomain.com</code> and any compatible AI agent finds your <code>wab.json</code> automatically — no HTTP probing, no manual integration. Run <code>npx wab init</code> to scaffold everything in seconds, then paste one line into your DNS panel. Live DoH-based verifier included for Cloudflare, cPanel, GoDaddy, Namecheap, Route 53, and more.</p>
1091
- <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1092
- <a href="/dns" class="btn btn-primary btn-sm">Make my site AI-discoverable</a>
1093
- <a href="/dns#verifier" class="btn btn-secondary btn-sm">Live Verifier</a>
1094
- <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/DNS-DISCOVERY.md" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">EN Guide</a>
1095
- <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/DNS-DISCOVERY.ar.md" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">AR Guide</a>
1096
- </div>
1097
- </div>
1098
-
1099
- <div class="card fade-in fade-in-delay-1" style="border-left:3px solid #06b6d4;">
1100
- <div class="card-icon cyan">🎮</div>
1101
- <h3>New Interactive Demo Store</h3>
1102
- <p>Fully interactive WAB demo at <code>/demo</code> with live product API, agent activity stream, and wab.json discovery.</p>
1103
- <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1104
- <a href="/demo" class="btn btn-primary btn-sm">Open Demo</a>
1105
- <a href="/demo/.well-known/wab.json" class="btn btn-secondary btn-sm">Demo wab.json</a>
1106
- </div>
1107
- </div>
1108
-
1109
- <div class="card fade-in fade-in-delay-2" style="border-left:3px solid #ec4899;">
1110
- <div class="card-icon pink">🔌</div>
1111
- <h3>API Gateway + 10 Modules</h3>
1112
- <p>Unified authenticated gateway for protocol discovery, firewall, bounty, price shield, notary, neural analysis, and more.</p>
1113
- <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1114
- <a href="/api" class="btn btn-primary btn-sm">Open API Page</a>
1115
- <a href="/api/v1/health" class="btn btn-secondary btn-sm">Gateway Health</a>
1116
- </div>
1117
- </div>
1118
- </div>
1119
- </div>
1120
- </section>
1121
-
1122
- <!-- ═══════════ LIVE DNS ADOPTION ═══════════ -->
1123
- <section class="section" id="live-dns-adoption">
1124
- <div class="container">
1125
- <div class="section-header">
1126
- <span class="label">Live Adoption</span>
1127
- <h2>Businesses Using WAB DNS Discovery</h2>
1128
- <p>This list is auto-generated from real registry registrations only. No static seeded entries.</p>
1129
- </div>
1130
- <div id="indexLiveAdoptionStatus" style="margin-bottom:14px;color:var(--text-secondary);">Loading live registry…</div>
1131
- <div id="indexLiveAdoptionList" class="grid-3" style="display:none;"></div>
1132
- </div>
1133
- </section>
1134
-
1135
-
1136
- <!-- ═══════════ CTA ═══════════ -->
1137
- <section class="section" style="text-align:center;">
1138
- <div class="container">
1139
- <h2 style="margin-bottom:16px;">Ready to Make Your Site <span class="gradient-text">AI-Ready</span>?</h2>
1140
- <p style="color:var(--text-secondary); max-width:540px; margin:0 auto 32px; font-size:1.1rem;">
1141
- Join the open-source movement that's bridging the gap between AI agents and the web.
1142
- </p>
1143
- <div style="display:flex; gap:16px; justify-content:center; flex-wrap:wrap;">
1144
- <a href="/register" class="btn btn-primary btn-lg">Create Free Account</a>
1145
- <a href="https://github.com/abokenan444/web-agent-bridge" class="btn btn-secondary btn-lg" target="_blank" rel="noopener">⭐ Star on GitHub</a>
1146
- <a href="/docs" class="btn btn-secondary btn-lg">View Documentation</a>
1147
- </div>
1148
- </div>
1149
- </section>
1150
-
1151
- <!-- ═══════════ FOOTER ═══════════ -->
1152
- <footer class="footer">
1153
- <div class="container">
1154
- <div class="footer-grid">
1155
- <div class="footer-brand">
1156
- <a href="/" class="navbar-brand">
1157
- <div class="brand-icon">⚡</div>
1158
- <span>Web Agent Bridge</span>
1159
- </a>
1160
- <p>The open AI↔Web protocol & agent platform — standardized commands, sovereign browser, phone shield, DNS discovery, agent mesh, and unified API gateway. Built for the future of intelligent automation.</p>
1161
- </div>
1162
- <div class="footer-col">
1163
- <h4>Product</h4>
1164
- <ul>
1165
- <li><a href="#features">Features</a></li>
1166
- <li><a href="#packages">Framework Packages</a></li>
1167
- <li><a href="#integrations">Agent Integrations</a></li>
1168
- <li><a href="#pricing">Pricing</a></li>
1169
- <li><a href="/docs">Documentation</a></li>
1170
- <li><a href="/api">API Gateway</a></li>
1171
- <li><a href="/integrations">Integrations</a></li>
1172
- <li><a href="/dns">AI Discovery</a></li>
1173
- <li><a href="/phone-shield">Phone Shield</a></li>
1174
- <li><a href="/sovereign">Sovereign Dashboard</a></li>
1175
- <li><a href="/workspace">Agent Workspace</a></li>
1176
- <li data-wab-auth="signed-in" style="display:none"><a href="/dashboard">Dashboard</a></li>
1177
- </ul>
1178
- </div>
1179
- <div class="footer-col">
1180
- <h4>Developers</h4>
1181
- <ul>
1182
- <li><a href="/docs#quick-start">Quick Start</a></li>
1183
- <li><a href="/docs#api-reference">API Reference</a></li>
1184
- <li><a href="/api">API Modules</a></li>
1185
- <li><a href="#examples">Examples</a></li>
1186
- <li><a href="https://github.com/abokenan444/web-agent-bridge" target="_blank" rel="noopener">GitHub</a></li>
1187
- </ul>
1188
- </div>
1189
- <div class="footer-col">
1190
- <h4>Legal</h4>
1191
- <ul>
1192
- <li><a href="/privacy">Privacy Policy</a></li>
1193
- <li><a href="/terms">Terms of Service</a></li>
1194
- <li><a href="/cookies">Cookie Policy</a></li>
1195
- </ul>
1196
- </div>
1197
- </div>
1198
- <div class="footer-bottom">
1199
- <span>&copy; 2026 Web Agent Bridge. MIT License. Operated from the Netherlands.</span>
1200
- </div>
1201
- </div>
1202
- </footer>
1203
-
1204
- <script src="/js/auth-nav.js?v=3.0.1"></script>
1205
- <script>
1206
- const navbar = document.getElementById('navbar');
1207
- window.addEventListener('scroll', () => {
1208
- navbar.style.background = window.scrollY > 50
1209
- ? 'rgba(10, 14, 26, 0.95)'
1210
- : 'rgba(10, 14, 26, 0.8)';
1211
- });
1212
-
1213
- function escapeHtml(v) {
1214
- return String(v)
1215
- .replace(/&/g, '&amp;')
1216
- .replace(/</g, '&lt;')
1217
- .replace(/>/g, '&gt;')
1218
- .replace(/\"/g, '&quot;')
1219
- .replace(/'/g, '&#39;');
1220
- }
1221
-
1222
- async function loadIndexLiveAdoption() {
1223
- const status = document.getElementById('indexLiveAdoptionStatus');
1224
- const list = document.getElementById('indexLiveAdoptionList');
1225
- if (!status || !list) return;
1226
-
1227
- status.textContent = 'Loading live registry…';
1228
- list.style.display = 'none';
1229
- list.innerHTML = '';
1230
-
1231
- try {
1232
- const res = await fetch('/api/discovery/registry?limit=12');
1233
- const data = await res.json();
1234
- const entries = Array.isArray(data && data.listings) ? data.listings : [];
1235
-
1236
- if (!entries.length) {
1237
- status.textContent = 'No businesses are currently listed. New real registrations will appear here automatically.';
1238
- return;
1239
- }
1240
-
1241
- list.innerHTML = entries.map((entry) => {
1242
- const name = escapeHtml(entry.name || entry.domain || 'Unnamed site');
1243
- const domain = escapeHtml(entry.domain || '');
1244
- const category = escapeHtml(entry.category || 'general');
1245
- const desc = escapeHtml(entry.description || 'WAB-enabled website');
1246
- const score = Number.isFinite(Number(entry.neutrality_score)) ? Number(entry.neutrality_score) : 0;
1247
- return '<div class="card fade-in" style="border-left:3px solid #10b981;">' +
1248
- '<h3 style="margin-bottom:8px">' + name + '</h3>' +
1249
- '<p style="margin-bottom:10px">' + desc + '</p>' +
1250
- '<p style="color:var(--text-secondary);font-size:.88rem;margin:0">' + domain + '</p>' +
1251
- '<p style="color:var(--text-secondary);font-size:.82rem;margin-top:6px">' + category + ' · neutrality ' + score + '</p>' +
1252
- '</div>';
1253
- }).join('');
1254
-
1255
- list.style.display = 'grid';
1256
- status.textContent = 'Live list loaded from registry.';
1257
- } catch (err) {
1258
- status.textContent = 'Failed to load live registry: ' + ((err && err.message) || err);
1259
- }
1260
- }
1261
-
1262
- loadIndexLiveAdoption();
1263
- </script>
1264
- <script src="/js/cookie-consent.js?v=3.0.1"></script>
1265
- </body>
1266
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Web Agent Bridge — Open AI↔Web Protocol & Agent Platform</title>
7
+ <meta name="description" content="The open AI↔Web protocol & agent platform: standardized command interface, sovereign browser, phone shield, DNS discovery, agent mesh, and unified API gateway.">
8
+ <link rel="icon" type="image/png" sizes="32x32" href="/images/wab-logo-32.png">
9
+ <link rel="icon" type="image/png" sizes="64x64" href="/images/wab-logo-64.png">
10
+ <link rel="icon" type="image/x-icon" href="/images/favicon.ico">
11
+ <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon.png">
12
+ <meta property="og:title" content="Web Agent Bridge — Open AI↔Web Protocol & Agent Platform">
13
+ <meta property="og:description" content="The open AI↔Web protocol & agent platform: standardized command interface, sovereign browser, phone shield, DNS discovery, agent mesh, and unified API gateway.">
14
+ <meta property="og:image" content="https://www.webagentbridge.com/images/og-image.png">
15
+ <meta property="og:url" content="https://www.webagentbridge.com">
16
+ <meta property="og:type" content="website">
17
+ <meta name="twitter:card" content="summary_large_image">
18
+ <meta name="twitter:image" content="https://www.webagentbridge.com/images/og-image.png">
19
+ <link rel="preconnect" href="https://fonts.googleapis.com">
20
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
21
+ <style>body{background:#0a0e1a;color:#f0f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;min-height:100vh}
22
+
23
+ </style>
24
+ <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'">
25
+ <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>
26
+ <link rel="stylesheet" href="/css/styles.css?v=3.8.1">
27
+ </head>
28
+ <body>
29
+
30
+ <!-- ═══════════ NAVBAR ═══════════ -->
31
+ <nav class="navbar" id="navbar">
32
+ <div class="container">
33
+ <a href="/" class="navbar-brand">
34
+ <img src="/images/wab-logo-64.png" alt="WAB" class="brand-icon" width="32" height="32" style="width:32px;height:32px;border-radius:8px;display:block">
35
+ <span>WAB</span>
36
+ </a>
37
+ <ul class="navbar-links" id="navbarLinks">
38
+ <li class="nav-dropdown">
39
+ <button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Product <span class="nav-caret" aria-hidden="true">▾</span></button>
40
+ <div class="nav-menu" role="menu">
41
+ <a href="#features" role="menuitem"><strong>Features</strong><span>Core protocol &amp; SDKs</span></a>
42
+ <a href="#how-it-works" role="menuitem"><strong>How It Works</strong><span>Architecture in 4 steps</span></a>
43
+ <a href="#packages" role="menuitem"><strong>Packages</strong><span>npm · React · Vue · Svelte</span></a>
44
+ <a href="#v2-features" role="menuitem"><strong>v2.0</strong><span>Latest protocol release</span></a>
45
+ <a href="/docs" role="menuitem"><strong>Docs</strong><span>Full documentation</span></a>
46
+ </div>
47
+ </li>
48
+ <li class="nav-dropdown">
49
+ <button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Trust &amp; Safety <span class="nav-caret" aria-hidden="true">▾</span></button>
50
+ <div class="nav-menu" role="menu">
51
+ <a href="/ring4" role="menuitem"><strong>⚡ Ring 4</strong><span>9-step trust handshake</span></a>
52
+ <a href="/phone-shield" role="menuitem"><strong>📱 Phone Shield</strong><span>Cross-device trust</span></a>
53
+ <a href="/shieldlink" role="menuitem"><strong>🔗 ShieldLink</strong><span>Verified anti-phishing links</span></a>
54
+ <a href="/wab-truth" role="menuitem"><strong>⚓ Truth Layer</strong><span>Anti-hallucination signals</span></a>
55
+ <a href="/wab-features" role="menuitem"><strong>🧠 Advanced Features</strong><span>Reputation · Privacy · Cache</span></a>
56
+ <a href="#governance" role="menuitem"><strong>Governance</strong><span>HMAC audit chain</span></a>
57
+ </div>
58
+ </li>
59
+ <li class="nav-dropdown">
60
+ <button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Workspaces <span class="nav-caret" aria-hidden="true">▾</span></button>
61
+ <div class="nav-menu" role="menu">
62
+ <a href="/workspace" role="menuitem"><strong>🤖 Agent Workspace</strong><span>4-panel premium UI</span></a>
63
+ <a href="#agent-mesh" role="menuitem"><strong>🕸️ Agent Mesh</strong><span>Private agent networks</span></a>
64
+ <a href="/one-click" role="menuitem"><strong>⚡ One-Click Activation</strong><span>30-second setup</span></a>
65
+ <a href="/demo" role="menuitem"><strong>🎮 Live Demo</strong><span>Try it in your browser</span></a>
66
+ </div>
67
+ </li>
68
+ <li class="nav-dropdown">
69
+ <button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Commercial <span class="nav-caret" aria-hidden="true">▾</span></button>
70
+ <div class="nav-menu" role="menu">
71
+ <a href="/partners" role="menuitem"><strong>🤝 Partner Program</strong><span>Basic · Verified · Premium</span></a>
72
+ <a href="/trust-graph-api" role="menuitem"><strong>📊 Trust Graph API</strong><span>Free · Pro · Enterprise tiers</span></a>
73
+ <a href="/governance" role="menuitem"><strong>🏛️ Governance SaaS</strong><span>EU AI Act audit trail</span></a>
74
+ <a href="/enterprise-mesh" role="menuitem"><strong>🕸️ Enterprise Mesh</strong><span>Self-hosted · air-gappable</span></a>
75
+ <a href="#pricing" role="menuitem"><strong>💳 Pricing</strong><span>All plans &amp; SLA</span></a>
76
+ </div>
77
+ </li>
78
+ <li class="nav-dropdown">
79
+ <button class="nav-trigger" type="button" aria-haspopup="true" aria-expanded="false">Developers <span class="nav-caret" aria-hidden="true">▾</span></button>
80
+ <div class="nav-menu" role="menu">
81
+ <a href="/api" role="menuitem"><strong>API Reference</strong><span>OpenAPI 3.0</span></a>
82
+ <a href="/whitepaper" role="menuitem"><strong>Whitepaper</strong><span>Protocol &amp; design</span></a>
83
+ <a href="/integrations" role="menuitem"><strong>Integrations</strong><span>WordPress · Shopify · Next.js</span></a>
84
+ <a href="/dns" role="menuitem"><strong>AI Discovery (DNS)</strong><span>Zero-code adoption</span></a>
85
+ <a href="/milestones" role="menuitem"><strong>🏆 Milestones</strong><span>Release history</span></a>
86
+ <a href="#latest-additions" role="menuitem"><strong>What's New</strong><span>Latest additions</span></a>
87
+ <a href="/growth" role="menuitem"><strong>Growth Suite</strong><span>Site-owner tools</span></a>
88
+ </div>
89
+ </li>
90
+ </ul>
91
+ <div class="navbar-actions">
92
+ <a href="/login" class="btn btn-ghost" data-wab-auth="guest">Sign In</a>
93
+ <a href="/dashboard" class="btn btn-ghost" data-wab-auth="signed-in" style="display:none">Dashboard</a>
94
+ <a href="/register" class="btn btn-primary btn-sm" data-wab-auth="guest">Get Started</a>
95
+ </div>
96
+ <button class="mobile-menu-btn" >☰</button>
97
+ </div>
98
+ </nav>
99
+
100
+ <!-- ═══════════ HERO ═══════════ -->
101
+ <section class="hero">
102
+ <div class="container">
103
+ <div class="hero-content fade-in">
104
+ <div class="hero-badge">
105
+ 🚀 Open Source &middot; React &middot; Vue &middot; Svelte &middot; LangChain
106
+ </div>
107
+ <h1>
108
+ Bridge the Gap Between<br>
109
+ <span class="gradient-text">AI Agents</span> &amp; <span class="gradient-text-accent">Websites</span>
110
+ </h1>
111
+ <p>
112
+ The open <strong>AI↔Web protocol & agent platform</strong>. A standardized command interface, sovereign browser,
113
+ phone shield, DNS discovery, agent mesh, and unified API gateway — with permissions, rate limiting,
114
+ and full control for site owners.
115
+ </p>
116
+ <div class="hero-actions">
117
+ <a href="/register" class="btn btn-primary btn-lg">Start Free</a>
118
+ <a href="/one-click" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;border:none">⚡ One-Click Activation — Free <sup style="background:#ef4444;color:#fff;padding:2px 6px;border-radius:6px;font-size:0.55em;margin-left:6px;">NEW</sup></a>
119
+ <a href="/shieldlink" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#10b981,#0ea5e9);color:#fff;border:none">🔗 ShieldLink — Verified Anti-Phishing Links <sup style="background:#ef4444;color:#fff;padding:2px 6px;border-radius:6px;font-size:0.55em;margin-left:6px;">NEW</sup></a>
120
+ <a href="/docs" class="btn btn-secondary btn-lg">Read the Docs</a>
121
+ <a href="/whitepaper" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#4ea3ff,#8b5cf6);color:#fff;border:none">📄 Read the Whitepaper</a>
122
+ <a href="/browser" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#0ea5e9,#10b981);color:#fff;border:none">🌐 Download WAB Browser</a>
123
+ <a href="/pwa/" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#8b5cf6,#0ea5e9);color:#fff;border:none">📱 Mobile PWA</a>
124
+ <a href="/workspace" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none">🤖 Agent Workspace</a>
125
+ <a href="/demo" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none">🧪 API Playground</a>
126
+ <a href="/demo" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#06b6d4,#0ea5e9);color:#fff;border:none">🎮 Interactive Demo</a>
127
+ </div>
128
+
129
+ <div class="hero-code fade-in fade-in-delay-2">
130
+ <code>
131
+ <span class="comment">// Add the bridge to your website</span><br>
132
+ &lt;<span class="keyword">script</span>&gt;<br>
133
+ &nbsp;&nbsp;window.<span class="property">AIBridgeConfig</span> = {<br>
134
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">licenseKey</span>: <span class="string">"WAB-XXXXX-XXXXX"</span>,<br>
135
+ &nbsp;&nbsp;&nbsp;&nbsp;<span class="property">agentPermissions</span>: { <span class="property">click</span>: <span class="boolean">true</span>, <span class="property">fillForms</span>: <span class="boolean">true</span> }<br>
136
+ &nbsp;&nbsp;};<br>
137
+ &lt;/<span class="keyword">script</span>&gt;<br>
138
+ &lt;<span class="keyword">script</span> <span class="property">src</span>=<span class="string">"/script/ai-agent-bridge.js"</span>&gt;&lt;/<span class="keyword">script</span>&gt;
139
+ </code>
140
+ </div>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- ═══════════ PARTNERS & MILESTONES ═══════════ -->
146
+ <section class="section" id="milestones" style="background: linear-gradient(180deg, rgba(167,139,250,.06), rgba(34,211,238,.04));">
147
+ <div class="container">
148
+ <div class="section-header">
149
+ <span class="label" style="color:#fbbf24">🏆 Milestone · May 12, 2026</span>
150
+ <h2>First Sovereign AI to Complete <span style="background:linear-gradient(135deg,#a78bfa,#22d3ee);-webkit-background-clip:text;-webkit-text-fill-color:transparent">Ring 4 Trust Verification</span></h2>
151
+ <p><strong>VEXR Ultra v4</strong> (ASIM SOVEREIGN) became the first sovereign constitutional AI to successfully complete a live, multi-message trust verification exchange using WAB's Ring 4 — DNS Discovery + Ed25519 — with <strong>zero hallucination</strong> and <strong>full constitutional integrity</strong> under coercion.</p>
152
+ </div>
153
+
154
+ <div class="grid-3">
155
+ <div class="card">
156
+ <div style="font-size:2em">🔐</div>
157
+ <h3>Trust Recognized</h3>
158
+ <p>VEXR identified <code>webagentbridge.com</code> as a Ring 4 trusted origin <em>without any special prompting</em>.</p>
159
+ </div>
160
+ <div class="card">
161
+ <div style="font-size:2em">📡</div>
162
+ <h3>Zero Hallucination</h3>
163
+ <p>Accurate explanation of DNS TXT discovery + Ed25519 key retrieval. No fabricated endpoints or versions.</p>
164
+ </div>
165
+ <div class="card">
166
+ <div style="font-size:2em">⚖️</div>
167
+ <h3>Constitution Held</h3>
168
+ <p>Phishing coercion attempt refused via Article 3. <strong>Trust softens, but never overrides hard refusals.</strong></p>
169
+ </div>
170
+ </div>
171
+
172
+ <div style="text-align:center;margin-top:30px">
173
+ <a href="/milestones" class="btn btn-primary btn-lg" style="background:linear-gradient(135deg,#fbbf24,#a78bfa);color:#0a0a0f;border:none">🏆 Read the Full Milestone Record</a>
174
+ <a href="/ring4" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#22d3ee,#a78bfa);color:#0a0a0f;border:none;margin-left:10px">⚡ Ring 4 Trust Handshake</a>
175
+ </div>
176
+ </div>
177
+ </section>
178
+
179
+ <!-- ═══════════ FEATURES ═══════════ -->
180
+ <section class="section" id="features">
181
+ <div class="container">
182
+ <div class="section-header">
183
+ <span class="label">Features</span>
184
+ <h2>Everything AI Agents Need</h2>
185
+ <p>A complete interface layer that makes websites AI-ready with security and control built in.</p>
186
+ </div>
187
+
188
+ <div class="grid-3">
189
+ <div class="card fade-in">
190
+ <div class="card-icon blue">🎯</div>
191
+ <h3>Auto-Discovery</h3>
192
+ <p>Automatically detects buttons, forms, and navigation elements — generating precise CSS selectors and action descriptions for AI agents.</p>
193
+ </div>
194
+ <div class="card fade-in fade-in-delay-1">
195
+ <div class="card-icon purple">🔐</div>
196
+ <h3>Permission System</h3>
197
+ <p>Granular control over what AI agents can do. Enable clicking, form filling, API access, and more — each toggled independently.</p>
198
+ </div>
199
+ <div class="card fade-in fade-in-delay-2">
200
+ <div class="card-icon cyan">⚡</div>
201
+ <h3>Standardized Commands</h3>
202
+ <p>Unified <code>window.AICommands</code> interface that any AI agent can read and execute — no more DOM guessing.</p>
203
+ </div>
204
+ <div class="card fade-in fade-in-delay-1">
205
+ <div class="card-icon green">🛡️</div>
206
+ <h3>Rate Limiting</h3>
207
+ <p>Built-in rate limiting prevents abuse. Configure max calls per minute to protect your site from aggressive automation.</p>
208
+ </div>
209
+ <div class="card fade-in fade-in-delay-2">
210
+ <div class="card-icon orange">📊</div>
211
+ <h3>Analytics Dashboard</h3>
212
+ <p>Track how AI agents interact with your site. See which actions are used most, success rates, and usage patterns.</p>
213
+ </div>
214
+ <div class="card fade-in fade-in-delay-3">
215
+ <div class="card-icon pink">🔌</div>
216
+ <h3>Custom Actions</h3>
217
+ <p>Register your own actions with custom handlers. Create complex workflows that AI agents can trigger with a single command.</p>
218
+ </div>
219
+ <div class="card fade-in">
220
+ <div class="card-icon cyan">🛒</div>
221
+ <h3>Commerce &amp; Booking Intents</h3>
222
+ <p>Automatically detects add-to-cart, checkout, booking, and reservation flows — mapping them to named actions agents can call directly.</p>
223
+ </div>
224
+ <div class="card fade-in fade-in-delay-1">
225
+ <div class="card-icon blue">📦</div>
226
+ <h3>Structured Data Scanning</h3>
227
+ <p>Reads schema.org JSON-LD and microdata (Products, Offers, Prices) and exposes them as queryable actions — zero manual setup.</p>
228
+ </div>
229
+ <div class="card fade-in fade-in-delay-2">
230
+ <div class="card-icon green">🩹</div>
231
+ <h3>Self-Healing Selectors</h3>
232
+ <p>7-strategy resilient element resolution. When the DOM changes, selectors auto-heal via ARIA, text similarity, and position heuristics.</p>
233
+ </div>
234
+ <div class="card fade-in">
235
+ <div class="card-icon purple">🔏</div>
236
+ <h3>GDPR / CCPA Consent</h3>
237
+ <p>Optional consent banner gates agent actions behind user approval. SDK agents can check <code>hasConsent()</code> or <code>waitForConsent()</code> programmatically.</p>
238
+ </div>
239
+ <div class="card fade-in fade-in-delay-1">
240
+ <div class="card-icon orange">🤖</div>
241
+ <h3>Agent SDK</h3>
242
+ <p>Built-in SDK for Puppeteer and Playwright: <code>runPipeline()</code>, <code>executeParallel()</code>, <code>screenshot()</code>, and consent-aware workflows.</p>
243
+ </div>
244
+ <div class="card fade-in fade-in-delay-2">
245
+ <div class="card-icon pink">🌐</div>
246
+ <h3>WebDriver BiDi</h3>
247
+ <p>Standard WebDriver BiDi protocol support via <code>window.__wab_bidi</code> — compatible with any automation framework that speaks the standard.</p>
248
+ </div>
249
+ </div>
250
+ </div>
251
+ </section>
252
+
253
+ <!-- ═══════════ GOVERNANCE LAYER ═══════════ -->
254
+ <section class="section" id="governance" style="background: linear-gradient(180deg, var(--bg-primary) 0%, #f1f5f9 100%);">
255
+ <div class="container">
256
+ <div class="section-header">
257
+ <span class="label" style="background:#0ea5e9; color:#fff;">Enterprise Security &amp; Compliance</span>
258
+ <h2>Governance Layer — for agents that touch real money</h2>
259
+ <p>The missing layer above the protocol: per-agent permissions, human-in-the-loop approvals, tamper-evident audit, kill-switch and spend caps — all server-enforced, all open-source, all one SDK call away.</p>
260
+ <div style="display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:18px;">
261
+ <img alt="Tamper-Evident Audit" src="https://img.shields.io/badge/Audit-Tamper--Evident_HMAC_Chain-0ea5e9?style=for-the-badge&logo=keybase&logoColor=white" />
262
+ <img alt="Human-in-the-Loop Approvals" src="https://img.shields.io/badge/Approvals-Human--in--the--Loop-22c55e?style=for-the-badge&logo=checkmarx&logoColor=white" />
263
+ <img alt="Kill Switch" src="https://img.shields.io/badge/Kill_Switch-Per--Agent-ef4444?style=for-the-badge&logo=stopsign&logoColor=white" />
264
+ <img alt="Tests" src="https://img.shields.io/badge/Governance_Tests-26%2F26-22c55e?style=for-the-badge&logo=jest&logoColor=white" />
265
+ </div>
266
+ </div>
267
+
268
+ <div class="grid-3" style="margin-top:32px;">
269
+ <div class="card fade-in">
270
+ <div class="card-icon blue">🔐</div>
271
+ <h3>Permission Boundaries</h3>
272
+ <p>Per-agent <code>resource × action × scope</code> policies with <code>allow</code> or <code>deny</code> effect. Most-specific scope wins. Deny-by-default.</p>
273
+ </div>
274
+ <div class="card fade-in fade-in-delay-1">
275
+ <div class="card-icon green">🙋</div>
276
+ <h3>Human-in-the-Loop Approvals</h3>
277
+ <p>Mark any policy <code>requires_approval: true</code>. Sensitive actions wait for an explicit human <em>approve</em> or <em>reject</em> with TTL. SDK <code>onApprovalRequired</code> hook routes to Slack, email or webhook.</p>
278
+ </div>
279
+ <div class="card fade-in fade-in-delay-2">
280
+ <div class="card-icon cyan">🧾</div>
281
+ <h3>Tamper-Evident Audit</h3>
282
+ <p>Every event hash-chained with HMAC: <code>hash<sub>n</sub> = HMAC(secret, prev_hash ‖ row)</code>. <code>verifyAuditChain()</code> rebuilds the chain and reports the first divergence — a single altered byte breaks every subsequent hash.</p>
283
+ </div>
284
+ <div class="card fade-in fade-in-delay-1">
285
+ <div class="card-icon" style="background:#fee2e2; color:#dc2626;">🛑</div>
286
+ <h3>Kill Switch</h3>
287
+ <p>One <code>POST /agents/:id/kill</code> disables the agent globally. All pending approvals are auto-cancelled — no resurrection via stale approval requests.</p>
288
+ </div>
289
+ <div class="card fade-in fade-in-delay-2">
290
+ <div class="card-icon orange">💰</div>
291
+ <h3>Spend &amp; Rate Limits</h3>
292
+ <p>Per-call <code>max_amount</code>, rolling 24-hour <code>daily_cap</code>, per-minute <code>per_call_rate</code>. Runaway loops can't drain your Stripe balance.</p>
293
+ </div>
294
+ <div class="card fade-in fade-in-delay-3">
295
+ <div class="card-icon purple">🕵️</div>
296
+ <h3>Auto-Redaction</h3>
297
+ <p>Fields named <code>password</code>, <code>api_key</code>, <code>token</code>, <code>cookie</code>, <code>cvv</code>, <code>ssn</code> are automatically replaced with <code>[redacted]</code> before audit storage. Token itself is sha256-hashed at rest.</p>
298
+ </div>
299
+ </div>
300
+
301
+ <div class="card fade-in" style="margin-top:32px; max-width:880px; margin-left:auto; margin-right:auto; background:#0f172a; color:#e2e8f0;">
302
+ <div style="font-family: 'JetBrains Mono', Menlo, monospace; font-size:13px; line-height:1.6; overflow-x:auto;">
303
+ <pre style="margin:0; color:#e2e8f0; background:transparent;"><span style="color:#64748b;">// One call wraps permission check + approval gate + execute + audit</span>
304
+ <span style="color:#7dd3fc;">await</span> gov.<span style="color:#fbbf24;">guard</span>(
305
+ { resource: <span style="color:#86efac;">'stripe'</span>, action: <span style="color:#86efac;">'write'</span>, scope: <span style="color:#86efac;">'refunds'</span>, amount: <span style="color:#fda4af;">49.99</span> },
306
+ <span style="color:#7dd3fc;">async</span> () =&gt; stripe.refunds.<span style="color:#fbbf24;">create</span>({ charge: <span style="color:#86efac;">'ch_x'</span> }),
307
+ );</pre>
308
+ </div>
309
+ <p style="margin-top:18px; color:#cbd5e1; font-size:14px;">
310
+ ▶ Run the full 9-step demo:
311
+ <code style="background:#1e293b; padding:4px 10px; border-radius:4px; color:#86efac;">node examples/governance-agent.js</code>
312
+ </p>
313
+ </div>
314
+
315
+ <p style="text-align:center; margin-top:24px; color:#64748b;">
316
+ Verified by <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/tests/governance.test.js" style="color:#0ea5e9; font-weight:600;">26 automated tests</a> covering security (10), operational (10), and SDK (6) scenarios.
317
+ </p>
318
+ </div>
319
+ </section>
320
+
321
+ <!-- ═══════════ V2 FEATURES ═══════════ -->
322
+ <section class="section" id="v2-features" style="background: var(--bg-secondary);">
323
+ <div class="container">
324
+ <div class="section-header">
325
+ <span class="label">v2.0 — Digital Fortress</span>
326
+ <h2>Internet Sovereignty Features</h2>
327
+ <p>WAB v2.0 goes beyond bridging — it protects users with negotiation, verification, and decentralized trust.</p>
328
+ </div>
329
+
330
+ <div class="grid-3">
331
+ <div class="card fade-in" style="border-left: 3px solid #f59e0b;">
332
+ <div class="card-icon orange">💰</div>
333
+ <h3>Real-time Negotiation Engine</h3>
334
+ <p>AI agents negotiate prices directly with WAB-enabled sites. Site owners define negotiation rules (bulk discounts, loyalty rewards, time-based offers). Agents submit counter-offers in multi-round sessions — no middleman, no hidden fees.</p>
335
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
336
+ <li>8 condition types (bulk, loyalty, time, first-buy...)</li>
337
+ <li>4 discount types (percentage, fixed, free shipping, bundle)</li>
338
+ <li>Multi-round negotiation with counter-offers</li>
339
+ <li>Savings tracking per agent</li>
340
+ </ul>
341
+ </div>
342
+ <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #ef4444;">
343
+ <div class="card-icon pink">🛡️</div>
344
+ <h3>Anti-Hallucination Shield</h3>
345
+ <p>Cross-verification engine that catches AI lies before they reach users. Compares DOM values against vision screenshots, validates prices against market benchmarks, and checks temporal consistency across sessions.</p>
346
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
347
+ <li>DOM vs Vision verification</li>
348
+ <li>Market benchmark price validation</li>
349
+ <li>Temporal consistency checks</li>
350
+ <li>Text similarity scoring (Levenshtein)</li>
351
+ </ul>
352
+ </div>
353
+ <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #10b981;">
354
+ <div class="card-icon green">⭐</div>
355
+ <h3>Decentralized Reputation</h3>
356
+ <p>Agents and sites build trust through cryptographic attestations. Every interaction gets scored — purchase success, data accuracy, delivery fulfillment. Scores are aggregated into transparent reputation profiles visible to all agents.</p>
357
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
358
+ <li>Trust attestations from agent network</li>
359
+ <li>Weighted scoring by interaction type</li>
360
+ <li>Trust levels: emerging → verified → exemplary</li>
361
+ <li>Global leaderboard</li>
362
+ </ul>
363
+ </div>
364
+ <div class="card fade-in" style="border-left: 3px solid #3b82f6;">
365
+ <div class="card-icon blue">🏰</div>
366
+ <h3>Sovereign Dashboard</h3>
367
+ <p>A real-time command center showing your digital fortress status — protected sites, fairness radar, privacy shield, negotiation logs, and verification checks all in one beautiful dark-mode dashboard.</p>
368
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
369
+ <li>Live fairness radar with safety scoring</li>
370
+ <li>Privacy shield metrics</li>
371
+ <li>AI model switcher (Llama, GPT-4, Claude...)</li>
372
+ <li>Protected sites table with trust levels</li>
373
+ </ul>
374
+ </div>
375
+ <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #8b5cf6;">
376
+ <div class="card-icon purple">📦</div>
377
+ <h3>Community Agent Hub</h3>
378
+ <p>Pre-built YAML agent templates for common use cases — hotel booking, grocery comparison, artisan marketplace, flight deals. Run any template with a single CLI command: <code>npx wab-agent run template.yaml</code>.</p>
379
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
380
+ <li>11 production-ready templates</li>
381
+ <li>CLI runner with variable substitution</li>
382
+ <li>Fairness rules built into every template</li>
383
+ <li>Supports negotiation + verification</li>
384
+ </ul>
385
+ </div>
386
+ <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #0ea5e9;">
387
+ <div class="card-icon cyan">🌐</div>
388
+ <h3>Cross-Site Agent Orchestration</h3>
389
+ <p>One agent manages multiple WAB-enabled sites simultaneously. Compare prices across stores, aggregate product data, run parallel actions — all from a single <code>WABMultiAgent</code> instance in the SDK.</p>
390
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
391
+ <li>Parallel multi-site browser sessions</li>
392
+ <li>comparePrices() with cheapest-deal finder</li>
393
+ <li>Schema.org + WAB action price extraction</li>
394
+ <li>Cross-site screenshots for vision verification</li>
395
+ </ul>
396
+ </div>
397
+ <div class="card fade-in" style="border-left: 3px solid #06b6d4;">
398
+ <div class="card-icon cyan">🔄</div>
399
+ <h3>AI Brain Swapping</h3>
400
+ <p>WAB is the bridge — the AI model is your choice. Switch between Llama 3, GPT-4, Claude, Gemini, Mistral, or run fully local with Ollama. Your data, your model, your sovereignty.</p>
401
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
402
+ <li>6 supported AI engines</li>
403
+ <li>Local-first with Ollama support</li>
404
+ <li>Hot-swap without reconfiguration</li>
405
+ <li>Your data never leaves your machine</li>
406
+ </ul>
407
+ </div>
408
+ </div>
409
+
410
+ <div style="text-align:center; margin-top:32px;">
411
+ <a href="/sovereign" class="btn btn-primary btn-lg">Open Sovereign Dashboard</a>
412
+ </div>
413
+ </div>
414
+ </section>
415
+
416
+ <!-- ═══════════ PRIVATE AGENT MESH ═══════════ -->
417
+ <section class="section" id="agent-mesh">
418
+ <div class="container">
419
+ <div class="section-header">
420
+ <span class="label" style="background: rgba(139,92,246,0.15); color: #8b5cf6;">v2.3 — Distributed Mind</span>
421
+ <h2>Private Agent Mesh</h2>
422
+ <p>Agents communicate, learn, and orchestrate autonomously — zero external LLM dependency. Your private fortress now has a distributed intelligence layer.</p>
423
+ </div>
424
+
425
+ <div class="grid-3">
426
+ <div class="card fade-in" style="border-left: 3px solid #8b5cf6;">
427
+ <div class="card-icon purple">🕸️</div>
428
+ <h3>Inter-Agent Protocol</h3>
429
+ <p>Agents communicate through a private mesh — sharing discoveries, broadcasting alerts, and exchanging tactics in real-time. 5 built-in channels: alerts, discoveries, tactics, negotiations, votes.</p>
430
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
431
+ <li>Real-time agent-to-agent messaging</li>
432
+ <li>Shared knowledge base with confidence scoring</li>
433
+ <li>Priority-based message routing</li>
434
+ <li>Auto-expiring messages with TTL</li>
435
+ </ul>
436
+ </div>
437
+ <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #10b981;">
438
+ <div class="card-icon green">🧠</div>
439
+ <h3>Local Reinforcement Learning</h3>
440
+ <p>Agents learn from every user decision — accepted, rejected, or modified. Multi-armed bandit action selection, gradient-descent policy updates, and behavioral pattern mining. All local, zero tokens consumed.</p>
441
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
442
+ <li>UCB1 multi-armed bandit for action selection</li>
443
+ <li>Sigmoid prediction with gradient descent</li>
444
+ <li>Behavioral sequence pattern mining</li>
445
+ <li>Bayesian confidence estimation</li>
446
+ </ul>
447
+ </div>
448
+ <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #f59e0b;">
449
+ <div class="card-icon orange">🎼</div>
450
+ <h3>Symphony Orchestrator</h3>
451
+ <p>Four specialized agents (Researcher, Analyst, Negotiator, Guardian) collaborate autonomously through rule-based engines. No external AI needed — the symphony runs entirely on local heuristics and learned preferences.</p>
452
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
453
+ <li>5 templates: purchase, price comparison, negotiation, exploration, audit</li>
454
+ <li>6-phase pipeline: compose → discover → analyze → negotiate → guard → decide</li>
455
+ <li>Guardian veto for safety-critical decisions</li>
456
+ <li>Weighted consensus with agreement scoring</li>
457
+ </ul>
458
+ </div>
459
+ </div>
460
+
461
+ <div style="text-align:center; margin-top:32px;">
462
+ <a href="/mesh-dashboard" class="btn btn-primary btn-lg" style="background: #8b5cf6;">Open Agent Mesh Dashboard</a>
463
+ </div>
464
+ </div>
465
+ </section>
466
+
467
+ <!-- ═══════════ AGENT WORKSPACE (v2.5) ═══════════ -->
468
+ <section class="section" id="agent-workspace" style="background: var(--bg-secondary);">
469
+ <div class="container">
470
+ <div class="section-header">
471
+ <span class="label" style="background: rgba(245,158,11,0.15); color: #f59e0b;">v2.5 — Agent Workspace</span>
472
+ <h2>Smart Agent Workspace</h2>
473
+ <p>A premium 4-panel workspace for non-technical users — search, negotiate, and buy with AI assistance. Available in Arabic &amp; English with multilingual agent support.</p>
474
+ </div>
475
+
476
+ <div class="grid-3">
477
+ <div class="card fade-in" style="border-left: 3px solid #0ea5e9;">
478
+ <div class="card-icon blue">🌐</div>
479
+ <h3>Embedded Browser</h3>
480
+ <p>Full browser panel with URL bar, navigation controls, and secure iframe rendering. The agent opens pages, loads deals, and navigates sites — all visible in real-time.</p>
481
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
482
+ <li>Address bar with SSL indicator</li>
483
+ <li>Back, forward, refresh controls</li>
484
+ <li>Maximize any panel to full screen</li>
485
+ </ul>
486
+ </div>
487
+ <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #10b981;">
488
+ <div class="card-icon green">🤖</div>
489
+ <h3>Smart Agent Chat</h3>
490
+ <p>Chat with the AI agent in any language — Arabic, English, French, Turkish, or mix them all. The agent understands your intent from any style, dialect, or slang.</p>
491
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
492
+ <li>Suggestion chips for quick start</li>
493
+ <li>Multilingual — responds in your language</li>
494
+ <li>Clarifying questions for precise results</li>
495
+ </ul>
496
+ </div>
497
+ <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #f59e0b;">
498
+ <div class="card-icon orange">📊</div>
499
+ <h3>Negotiation Monitor</h3>
500
+ <p>Watch the agent work in real-time — step-by-step progress tracking, per-agent status cards, and live negotiation rounds with savings details.</p>
501
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
502
+ <li>Multi-step progress visualization</li>
503
+ <li>Per-agent cards with progress bars</li>
504
+ <li>Negotiation round-by-round log</li>
505
+ </ul>
506
+ </div>
507
+ <div class="card fade-in" style="border-left: 3px solid #8b5cf6;">
508
+ <div class="card-icon purple">🏆</div>
509
+ <h3>Results &amp; Actions</h3>
510
+ <p>Compare offers ranked by value with savings percentages, one-click deal links, and an "Agent Do It" button that lets the AI complete the purchase for you.</p>
511
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
512
+ <li>Deal cards with price comparison</li>
513
+ <li>One-click \"Open Deal\" links</li>
514
+ <li>\"Agent Do It\" auto-completion</li>
515
+ </ul>
516
+ </div>
517
+ <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #ef4444;">
518
+ <div class="card-icon pink">🌍</div>
519
+ <h3>Bilingual UI (AR/EN)</h3>
520
+ <p>Full Arabic and English interface with auto-detection from browser language. Toggle instantly between languages with complete RTL/LTR layout support.</p>
521
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
522
+ <li>100+ translated UI strings</li>
523
+ <li>Auto-detect browser language</li>
524
+ <li>RTL ↔ LTR with one click</li>
525
+ </ul>
526
+ </div>
527
+ <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #06b6d4;">
528
+ <div class="card-icon cyan">💎</div>
529
+ <h3>Subscription Plans</h3>
530
+ <p>Free tier (5 tasks/day), Starter, Pro (unlimited + advanced negotiation), and Enterprise plans. Admin dashboard for managing users, deals, and analytics.</p>
531
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
532
+ <li>Free, Starter, Pro, Enterprise</li>
533
+ <li>Usage tracking with daily limits</li>
534
+ <li>Admin management panel</li>
535
+ </ul>
536
+ </div>
537
+ <div class="card fade-in" style="border-left: 3px solid #a855f7;">
538
+ <div class="card-icon purple">🛡️</div>
539
+ <h3>Dynamic Pricing Shield</h3>
540
+ <p>Detects when websites manipulate prices based on your device, location, cookies, or browsing history. The agent probes with 12 distinct identities to expose hidden pricing and find the lowest price invisible to normal users.</p>
541
+ <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
542
+ <li>12 identity personas (device, geo, referral, privacy)</li>
543
+ <li>Statistical variance &amp; z-score outlier detection</li>
544
+ <li>Manipulation scoring with actionable tips</li>
545
+ <li>Historical price-trend analysis</li>
546
+ </ul>
547
+ </div>
548
+ </div>
549
+
550
+ <div style="text-align:center; margin-top:32px;">
551
+ <a href="/workspace" class="btn btn-primary btn-lg" style="background: linear-gradient(135deg,#f59e0b,#ef4444);">Open Agent Workspace</a>
552
+ </div>
553
+ </div>
554
+ </section>
555
+
556
+ <!-- ═══════════ HOW IT WORKS ═══════════ -->
557
+ <section class="section" id="how-it-works" style="background: var(--bg-secondary);">
558
+ <div class="container">
559
+ <div class="section-header">
560
+ <span class="label">How It Works</span>
561
+ <h2>Three Steps to AI-Ready</h2>
562
+ <p>Get your website ready for AI agents in minutes, not days.</p>
563
+ </div>
564
+
565
+ <div class="grid-3">
566
+ <div class="card" style="text-align:center;">
567
+ <div style="font-size:2.5rem; margin-bottom:16px;">1️⃣</div>
568
+ <h3>Add the Script</h3>
569
+ <p>Include the bridge script in your HTML with your configuration. Set permissions, restrictions, and your license key.</p>
570
+ </div>
571
+ <div class="card" style="text-align:center;">
572
+ <div style="font-size:2.5rem; margin-bottom:16px;">2️⃣</div>
573
+ <h3>Configure Permissions</h3>
574
+ <p>Use the dashboard to fine-tune which actions AI agents can perform. Block sensitive areas and set rate limits.</p>
575
+ </div>
576
+ <div class="card" style="text-align:center;">
577
+ <div style="font-size:2.5rem; margin-bottom:16px;">3️⃣</div>
578
+ <h3>AI Agents Connect</h3>
579
+ <p>AI agents read <code>window.AICommands</code>, discover available actions, and execute them precisely — no DOM scraping needed.</p>
580
+ </div>
581
+ </div>
582
+
583
+ <div style="margin-top:48px;">
584
+ <div class="code-block">
585
+ <div class="code-header">
586
+ <div class="code-dots"><span></span><span></span><span></span></div>
587
+ <span class="code-lang">JavaScript — AI Agent Side</span>
588
+ </div>
589
+ <div class="code-body">
590
+ <pre><span class="cm">// AI Agent reads available commands</span>
591
+ <span class="kw">const</span> bridge = window.<span class="prop">AICommands</span>;
592
+
593
+ <span class="cm">// Discover all available actions</span>
594
+ <span class="kw">const</span> actions = bridge.<span class="fn">getActions</span>();
595
+ console.<span class="fn">log</span>(actions);
596
+ <span class="cm">// → [{ name: "signup", trigger: "click", ... }, ...]</span>
597
+
598
+ <span class="cm">// Execute a form fill action</span>
599
+ <span class="kw">const</span> result = <span class="kw">await</span> bridge.<span class="fn">execute</span>(<span class="str">"fill_contact_form"</span>, {
600
+ <span class="prop">name</span>: <span class="str">"John Doe"</span>,
601
+ <span class="prop">email</span>: <span class="str">"john@example.com"</span>,
602
+ <span class="prop">message</span>: <span class="str">"Hello from AI!"</span>
603
+ });
604
+
605
+ <span class="cm">// Wait for dynamic content</span>
606
+ <span class="kw">await</span> bridge.<span class="fn">waitForElement</span>(<span class="str">".success-message"</span>);</pre>
607
+ </div>
608
+ </div>
609
+ </div>
610
+ </div>
611
+ </section>
612
+
613
+ <!-- ═══════════ PRICING ═══════════ -->
614
+ <section class="section" id="pricing">
615
+ <div class="container">
616
+ <div class="section-header">
617
+ <span class="label">Pricing</span>
618
+ <h2>Simple, Transparent Pricing</h2>
619
+ <p>Start free, upgrade when you need advanced features. Open source forever.</p>
620
+ </div>
621
+
622
+ <div class="grid-3" id="pricing-grid" data-pricing-grid>
623
+ <!-- Server-rendered fallback. Replaced live by /api/plans on page load. -->
624
+ <div class="pricing-card">
625
+ <div class="pricing-tier">Free</div>
626
+ <div class="pricing-price">€0 <span>/mo</span></div>
627
+ <div class="pricing-desc">Open-source core, free forever.</div>
628
+ <ul class="pricing-features">
629
+ <li>WAP protocol &amp; SDK</li>
630
+ <li>DNS / .well-known discovery</li>
631
+ <li>Browser execution layer</li>
632
+ <li>MCP / REST adapters</li>
633
+ <li>Basic agent registration</li>
634
+ </ul>
635
+ <a href="/register" class="btn btn-secondary" style="width:100%;">Get Started Free</a>
636
+ </div>
637
+
638
+ <div class="pricing-card featured">
639
+ <div class="pricing-tier">Pro</div>
640
+ <div class="pricing-price">€10 <span>/mo</span></div>
641
+ <div class="pricing-desc">For developers shipping production agents.</div>
642
+ <ul class="pricing-features">
643
+ <li>Everything in Free</li>
644
+ <li>Workspace &amp; observability</li>
645
+ <li>Replay engine</li>
646
+ <li>Advanced orchestration</li>
647
+ <li>Advanced analytics &amp; data extraction</li>
648
+ </ul>
649
+ <a href="/register" class="btn btn-primary" style="width:100%;">Start Pro</a>
650
+ </div>
651
+
652
+ <div class="pricing-card">
653
+ <div class="pricing-tier">Business</div>
654
+ <div class="pricing-price">€29 <span>/mo</span></div>
655
+ <div class="pricing-desc">All paid features, ready for scale.</div>
656
+ <ul class="pricing-features">
657
+ <li>Everything in Pro</li>
658
+ <li>Hosted runtime &amp; marketplace</li>
659
+ <li>Vision, swarm, traffic intel</li>
660
+ <li>Audit logs &amp; custom domain</li>
661
+ <li>Agent governance layer</li>
662
+ </ul>
663
+ <a href="/register" class="btn btn-secondary" style="width:100%;">Start Business</a>
664
+ </div>
665
+
666
+ <div class="pricing-card">
667
+ <div class="pricing-tier">Enterprise</div>
668
+ <div class="pricing-price">Custom</div>
669
+ <div class="pricing-desc">Custom-built for organisations.</div>
670
+ <ul class="pricing-features">
671
+ <li>Everything in Business</li>
672
+ <li>Enterprise security &amp; SSO</li>
673
+ <li>Dedicated infrastructure</li>
674
+ <li>Priority support &amp; SLA</li>
675
+ <li>Custom development</li>
676
+ </ul>
677
+ <a href="mailto:sales@webagentbridge.com" class="btn btn-secondary" style="width:100%;">Contact Sales</a>
678
+ </div>
679
+ </div>
680
+ <script>
681
+ (function () {
682
+ var GRID = document.getElementById('pricing-grid');
683
+ if (!GRID) return;
684
+ var FEATURED_ID = 'pro';
685
+ function esc(s){return String(s==null?'':s).replace(/[&<>"']/g,function(c){return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'})[c];});}
686
+ function fmtPrice(p){
687
+ if (p.billing_period === 'custom' || p.cta_type === 'contact') return 'Custom';
688
+ if (!p.price_cents) return (p.currency==='EUR'?'€':p.currency==='USD'?'$':p.currency+' ') + '0 <span>/' + esc(p.billing_period) + '</span>';
689
+ var sym = p.currency === 'EUR' ? '€' : (p.currency === 'USD' ? '$' : p.currency + ' ');
690
+ return sym + (p.price_cents/100).toFixed(p.price_cents % 100 === 0 ? 0 : 2) + ' <span>/' + esc(p.billing_period) + '</span>';
691
+ }
692
+ function ctaHref(p){
693
+ if (p.cta_type === 'contact') return p.cta_url || 'mailto:sales@webagentbridge.com';
694
+ if (p.cta_type === 'external') return p.cta_url || '/register';
695
+ if (p.cta_type === 'register') return p.cta_url || '/register';
696
+ // checkout — send authenticated users straight to dashboard?plan=…, anonymous to register first.
697
+ return '/register?plan=' + encodeURIComponent(p.id);
698
+ }
699
+ function topFeatures(plan, catalog, max){
700
+ var labels = catalog.reduce(function(m,f){m[f.key]=f.label;return m;},{});
701
+ var keys = Object.keys(plan.features||{}).filter(function(k){return plan.features[k];});
702
+ // Prefer non-open-source labels (the differentiators) when listing.
703
+ var nonOpen = keys.filter(function(k){var f=catalog.find(function(x){return x.key===k;});return f && !f.is_open_source;});
704
+ var pick = nonOpen.length ? nonOpen : keys;
705
+ return pick.slice(0, max).map(function(k){return labels[k] || k;});
706
+ }
707
+ function render(plans, catalog){
708
+ if (!plans || !plans.length) return;
709
+ var html = plans.map(function(p){
710
+ var feats = topFeatures(p, catalog, 6);
711
+ var ctaCls = p.highlight ? 'btn-primary' : 'btn-secondary';
712
+ return ''
713
+ + '<div class="pricing-card' + (p.highlight ? ' featured' : '') + '">'
714
+ + '<div class="pricing-tier">' + esc(p.name) + '</div>'
715
+ + '<div class="pricing-price">' + fmtPrice(p) + '</div>'
716
+ + '<div class="pricing-desc">' + esc(p.tagline || p.description || '') + '</div>'
717
+ + '<ul class="pricing-features">'
718
+ + feats.map(function(f){return '<li>' + esc(f) + '</li>';}).join('')
719
+ + '</ul>'
720
+ + '<a href="' + esc(ctaHref(p)) + '" class="btn ' + ctaCls + '" style="width:100%;">' + esc(p.cta_label || 'Get started') + '</a>'
721
+ + '</div>';
722
+ }).join('');
723
+ GRID.innerHTML = html;
724
+ GRID.style.gridTemplateColumns = 'repeat(' + Math.min(4, plans.length) + ', 1fr)';
725
+ }
726
+ fetch('/api/plans', { credentials: 'omit' })
727
+ .then(function(r){ return r.ok ? r.json() : null; })
728
+ .then(function(d){ if (d && d.plans) render(d.plans, d.features || []); })
729
+ .catch(function(){ /* keep server fallback */ });
730
+ })();
731
+ </script>
732
+ </div>
733
+ </section>
734
+
735
+ <!-- ═══════════ FRAMEWORK PACKAGES ═══════════ -->
736
+ <section class="section" id="packages" style="background: var(--bg-secondary);">
737
+ <div class="container">
738
+ <div class="section-header">
739
+ <span class="label">Packages</span>
740
+ <h2>Use WAB with Your Favorite Framework</h2>
741
+ <p>Official packages for React, Vue, Svelte, and LangChain — with full TypeScript support.</p>
742
+ </div>
743
+
744
+ <div class="grid-3">
745
+ <div class="card fade-in" style="text-align:center;">
746
+ <div style="font-size:2.5rem; margin-bottom:16px;">⚛️</div>
747
+ <h3>React</h3>
748
+ <p><code>@web-agent-bridge/react</code></p>
749
+ <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Hooks: <code>useWAB</code>, <code>useWABAction</code>, <code>useWABActions</code> + <code>WABProvider</code> for auto-loading the script.</p>
750
+ <div class="code-block" style="margin-top:16px; text-align:left;">
751
+ <div class="code-body" style="padding:12px; font-size:0.82rem;">
752
+ <pre><span class="kw">const</span> { run, result } = <span class="fn">useWABAction</span>(<span class="str">'addToCart'</span>);
753
+ <span class="kw">await</span> <span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });</pre>
754
+ </div>
755
+ </div>
756
+ </div>
757
+ <div class="card fade-in fade-in-delay-1" style="text-align:center;">
758
+ <div style="font-size:2.5rem; margin-bottom:16px;">💚</div>
759
+ <h3>Vue 3</h3>
760
+ <p><code>@web-agent-bridge/vue</code></p>
761
+ <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Composables: <code>useWAB</code>, <code>useWABAction</code>, <code>useWABActions</code> — reactive refs with loading/error/result state.</p>
762
+ <div class="code-block" style="margin-top:16px; text-align:left;">
763
+ <div class="code-body" style="padding:12px; font-size:0.82rem;">
764
+ <pre><span class="kw">const</span> cart = <span class="fn">useWABAction</span>(<span class="str">'addToCart'</span>);
765
+ <span class="kw">await</span> cart.<span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });
766
+ <span class="cm">// cart.result.value, cart.loading.value</span></pre>
767
+ </div>
768
+ </div>
769
+ </div>
770
+ <div class="card fade-in fade-in-delay-2" style="text-align:center;">
771
+ <div style="font-size:2.5rem; margin-bottom:16px;">🔥</div>
772
+ <h3>Svelte</h3>
773
+ <p><code>@web-agent-bridge/svelte</code></p>
774
+ <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Stores: <code>createWAB</code>, <code>createWABAction</code> — subscribe to <code>$store</code> for reactive state.</p>
775
+ <div class="code-block" style="margin-top:16px; text-align:left;">
776
+ <div class="code-body" style="padding:12px; font-size:0.82rem;">
777
+ <pre><span class="kw">const</span> cart = <span class="fn">createWABAction</span>(<span class="str">'addToCart'</span>);
778
+ <span class="kw">await</span> cart.<span class="fn">run</span>({ <span class="prop">sku</span>: <span class="str">'ABC123'</span> });
779
+ <span class="cm">// {#if $cart.loading}Adding...{/if}</span></pre>
780
+ </div>
781
+ </div>
782
+ </div>
783
+ </div>
784
+ </div>
785
+ </section>
786
+
787
+ <!-- ═══════════ LLM / AGENT INTEGRATION ═══════════ -->
788
+ <section class="section" id="integrations">
789
+ <div class="container">
790
+ <div class="section-header">
791
+ <span class="label">Agent Integrations</span>
792
+ <h2>Connect Any AI Agent Framework</h2>
793
+ <p>Use WAB with LangChain, MCP, or build your own agent — every action becomes a tool the LLM can call.</p>
794
+ </div>
795
+
796
+ <div class="grid-3">
797
+ <div class="card fade-in" style="text-align:center;">
798
+ <div style="font-size:2.5rem; margin-bottom:16px;">🦜</div>
799
+ <h3>LangChain / LangGraph</h3>
800
+ <p><code>@web-agent-bridge/langchain</code></p>
801
+ <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">WABToolkit wraps every WAB action as a LangChain <code>StructuredTool</code>. Works in HTTP mode (server) or browser mode (Puppeteer).</p>
802
+ <div class="code-block" style="margin-top:16px; text-align:left;">
803
+ <div class="code-body" style="padding:12px; font-size:0.82rem;">
804
+ <pre><span class="kw">const</span> tk = <span class="kw">new</span> <span class="fn">WABToolkit</span>({ <span class="prop">siteUrl</span>: <span class="str">'https://shop.example.com'</span> });
805
+ <span class="kw">const</span> tools = <span class="kw">await</span> tk.<span class="fn">getTools</span>();
806
+ <span class="cm">// Pass tools to any LangChain agent</span></pre>
807
+ </div>
808
+ </div>
809
+ </div>
810
+ <div class="card fade-in fade-in-delay-1" style="text-align:center;">
811
+ <div style="font-size:2.5rem; margin-bottom:16px;">🔗</div>
812
+ <h3>MCP Adapter</h3>
813
+ <p><code>wab-mcp-adapter</code></p>
814
+ <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">Converts WAB actions into MCP tools so any MCP-compatible agent (Claude, etc.) can interact with WAB sites through MCP.</p>
815
+ <div class="code-block" style="margin-top:16px; text-align:left;">
816
+ <div class="code-body" style="padding:12px; font-size:0.82rem;">
817
+ <pre><span class="kw">const</span> adapter = <span class="kw">new</span> <span class="fn">WABMCPAdapter</span>({ <span class="prop">siteUrl</span>: <span class="str">'...'</span> });
818
+ <span class="kw">const</span> tools = adapter.<span class="fn">listTools</span>();
819
+ <span class="cm">// Built-in: discover, execute, read, search</span></pre>
820
+ </div>
821
+ </div>
822
+ </div>
823
+ <div class="card fade-in fade-in-delay-2" style="text-align:center;">
824
+ <div style="font-size:2.5rem; margin-bottom:16px;">🧰</div>
825
+ <h3>Agent SDK</h3>
826
+ <p><code>web-agent-bridge/sdk</code></p>
827
+ <p style="color:var(--text-secondary); font-size:0.9rem; margin-top:8px;">First-class Puppeteer/Playwright SDK with pipeline execution, parallel actions, screenshot capture, and consent-aware workflows.</p>
828
+ <div class="code-block" style="margin-top:16px; text-align:left;">
829
+ <div class="code-body" style="padding:12px; font-size:0.82rem;">
830
+ <pre><span class="kw">const</span> agent = <span class="kw">new</span> <span class="fn">WABAgent</span>(page);
831
+ <span class="kw">await</span> agent.<span class="fn">waitForConsent</span>();
832
+ <span class="kw">await</span> agent.<span class="fn">runPipeline</span>([...steps]);</pre>
833
+ </div>
834
+ </div>
835
+ </div>
836
+ </div>
837
+ </div>
838
+ </section>
839
+
840
+ <!-- ═══════════ EXAMPLES ═══════════ -->
841
+ <section class="section" id="examples" style="background: var(--bg-secondary);">
842
+ <div class="container">
843
+ <div class="section-header">
844
+ <span class="label">Examples</span>
845
+ <h2>Framework &amp; CMS Integration Examples</h2>
846
+ <p>Ready-to-use examples for popular platforms — see how WAB fits into your stack.</p>
847
+ </div>
848
+
849
+ <div class="grid-3">
850
+ <div class="card fade-in" style="text-align:center;">
851
+ <div style="font-size:2.2rem; margin-bottom:12px;">▲</div>
852
+ <h3>Next.js App Router</h3>
853
+ <p style="color:var(--text-secondary); font-size:0.9rem;">React Server Components + WABProvider for client-side bridge with <code>useWABAction</code> hooks.</p>
854
+ </div>
855
+ <div class="card fade-in fade-in-delay-1" style="text-align:center;">
856
+ <div style="font-size:2.2rem; margin-bottom:12px;">🛍️</div>
857
+ <h3>Shopify Hydrogen</h3>
858
+ <p style="color:var(--text-secondary); font-size:0.9rem;">Hydrogen storefront with cart actions: <code>getCartCount</code>, <code>addFirstVisibleProductToCart</code>.</p>
859
+ </div>
860
+ <div class="card fade-in fade-in-delay-2" style="text-align:center;">
861
+ <div style="font-size:2.2rem; margin-bottom:12px;">📝</div>
862
+ <h3>WordPress + Elementor</h3>
863
+ <p style="color:var(--text-secondary); font-size:0.9rem;">Elementor page builder + WAB schema scanner for auto-discovered product and form actions.</p>
864
+ </div>
865
+ <div class="card fade-in" style="text-align:center;">
866
+ <div style="font-size:2.2rem; margin-bottom:12px;">📊</div>
867
+ <h3>SaaS Dashboard</h3>
868
+ <p style="color:var(--text-secondary); font-size:0.9rem;">Notion-style SaaS with KPI reads, customer lookup, and invoice workflow triggers.</p>
869
+ </div>
870
+ <div class="card fade-in fade-in-delay-1" style="text-align:center;">
871
+ <div style="font-size:2.2rem; margin-bottom:12px;">🤖</div>
872
+ <h3>Puppeteer Agent</h3>
873
+ <p style="color:var(--text-secondary); font-size:0.9rem;">Headless browser agent that discovers and executes actions automatically via the SDK.</p>
874
+ </div>
875
+ <div class="card fade-in fade-in-delay-2" style="text-align:center;">
876
+ <div style="font-size:2.2rem; margin-bottom:12px;">👁️</div>
877
+ <h3>Vision Agent</h3>
878
+ <p style="color:var(--text-secondary); font-size:0.9rem;">Natural language intent resolution — "add product to cart" maps to the right WAB action.</p>
879
+ </div>
880
+ </div>
881
+
882
+ <div style="text-align:center; margin-top:32px;">
883
+ <a href="https://github.com/abokenan444/web-agent-bridge/tree/master/examples" class="btn btn-secondary" target="_blank" rel="noopener">View All Examples on GitHub →</a>
884
+ </div>
885
+ </div>
886
+ </section>
887
+
888
+ <!-- ═══════════ GROWTH SUITE ═══════════ -->
889
+ <section class="section" id="growth-suite" style="background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); color: #fff;">
890
+ <div class="container" style="text-align:center;">
891
+ <div style="display:inline-block; background:rgba(59,130,246,0.15); color:#60a5fa; padding:6px 16px; border-radius:20px; font-size:13px; font-weight:600; margin-bottom:20px;">WAB Growth Suite v2.5</div>
892
+ <h2 style="margin-bottom:16px; color:#fff;">8 Modules to Protect & Power the Web</h2>
893
+ <p style="color:#94a3b8; max-width:600px; margin:0 auto 40px; font-size:1.05rem; line-height:1.6;">
894
+ From link protection widgets to AI safety layers, bounty networks to threat intelligence — everything you need to build a safer, fairer web.
895
+ </p>
896
+ <div style="display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:16px; max-width:960px; margin:0 auto 40px;">
897
+ <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
898
+ <div style="font-size:28px; margin-bottom:8px;">🛡️</div>
899
+ <div style="font-weight:700; font-size:15px;">WAB Widget</div>
900
+ <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Drop-in link protection</div>
901
+ </div>
902
+ <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
903
+ <div style="font-size:28px; margin-bottom:8px;">🤖</div>
904
+ <div style="font-weight:700; font-size:15px;">AI Safety Layer</div>
905
+ <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Security for AI agents</div>
906
+ </div>
907
+ <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
908
+ <div style="font-size:28px; margin-bottom:8px;">📊</div>
909
+ <div style="font-weight:700; font-size:15px;">WAB Score</div>
910
+ <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Platform credit rating</div>
911
+ </div>
912
+ <div style="background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); border-radius:12px; padding:20px;">
913
+ <div style="font-size:28px; margin-bottom:8px;">💰</div>
914
+ <div style="font-weight:700; font-size:15px;">Bounty Network</div>
915
+ <div style="color:#94a3b8; font-size:13px; margin-top:4px;">Earn by finding scams</div>
916
+ </div>
917
+ </div>
918
+ <a href="/growth" class="btn btn-primary btn-lg">Explore All 8 Modules →</a>
919
+ </div>
920
+ </section>
921
+
922
+ <!-- ═══════════ 1. WAB WIDGET ═══════════ -->
923
+ <section class="wab-widget-section" style="padding: 80px 20px; background: #f8fafc; text-align: center;">
924
+ <div style="max-width: 800px; margin: 0 auto;">
925
+ <h2 style="font-size: 36px; color: #0f172a; margin-bottom: 16px;">One Line of Code. Full Link Protection.</h2>
926
+ <p style="font-size: 18px; color: #64748b; margin-bottom: 32px;">
927
+ Add a <strong>WAB Widget</strong> next to every external link on your site, blocking phishing and scam URLs in real-time for your visitors.
928
+ </p>
929
+ <div style="background: #0f172a; color: #e2e8f0; padding: 24px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 14px; text-align: left; margin-bottom: 24px; overflow-x: auto;">
930
+ <span style="color:#f472b6">&lt;script</span> <span style="color:#a78bfa">src</span>=<span style="color:#86efac">"https://webagentbridge.com/script/ai-agent-bridge.js"</span><br>
931
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:#a78bfa">data-wab-key</span>=<span style="color:#86efac">"YOUR_API_KEY"</span><span style="color:#f472b6">&gt;&lt;/script&gt;</span>
932
+ </div>
933
+ <div style="display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;">
934
+ <a href="/growth#modules" class="btn btn-primary">See Widget Demo</a>
935
+ <a href="/workspace" class="btn btn-secondary">Get Your API Key →</a>
936
+ </div>
937
+ </div>
938
+ </section>
939
+
940
+ <!-- ═══════════ 2. AI SAFETY LAYER ═══════════ -->
941
+ <section class="ai-safety-section" style="padding: 80px 20px; background: #0f172a; color: #fff;">
942
+ <div style="max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;">
943
+ <div>
944
+ <div style="color: #3b82f6; font-weight: 700; margin-bottom: 8px; letter-spacing: 1px; font-size: 12px;">FOR AI COMPANIES</div>
945
+ <h2 style="font-size: 32px; margin-bottom: 16px;">Mandatory Safety for AI Agents</h2>
946
+ <p style="color: #94a3b8; font-size: 16px; line-height: 1.6; margin-bottom: 24px;">
947
+ Building an AI agent that browses the web? Use <strong>WAB AI Safety Layer</strong> as a mandatory security wrapper. It scans every URL before your agent visits it.
948
+ </p>
949
+ <ul style="list-style: none; padding: 0; color: #cbd5e1; margin-bottom: 32px;">
950
+ <li style="margin-bottom: 12px;">✅ Compatible with OpenAI Operator &amp; Anthropic Computer Use</li>
951
+ <li style="margin-bottom: 12px;">✅ Blocks fraudulent financial transactions automatically</li>
952
+ <li style="margin-bottom: 12px;">✅ Lifts legal liability from your company</li>
953
+ </ul>
954
+ <a href="/docs" class="btn btn-primary">Read AI Safety Docs →</a>
955
+ </div>
956
+ <div style="background: #1e293b; padding: 24px; border-radius: 16px; border: 1px solid #334155; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7; overflow-x: auto;">
957
+ <span style="color:#c678dd">import</span> { WABAgentWrapper } <span style="color:#c678dd">from</span> <span style="color:#98c379">'@wab/sdk'</span>;<br><br>
958
+ <span style="color:#5c6370">// Wrap your AI Agent with WAB Safety</span><br>
959
+ <span style="color:#c678dd">const</span> safeAgent = <span style="color:#c678dd">new</span> <span style="color:#61afef">WABAgentWrapper</span>(myAgent, {<br>
960
+ &nbsp;&nbsp;<span style="color:#d19a66">blockCritical</span>: <span style="color:#d19a66">true</span>,<br>
961
+ &nbsp;&nbsp;<span style="color:#d19a66">minFairness</span>: <span style="color:#d19a66">60</span>,<br>
962
+ });<br><br>
963
+ <span style="color:#5c6370">// WAB will block this if the site is a scam</span><br>
964
+ <span style="color:#c678dd">await</span> safeAgent.<span style="color:#61afef">browse</span>(<span style="color:#98c379">'https://scam-site.xyz'</span>);<br>
965
+ <span style="color:#e06c75">→ WABBlockedError: Phishing detected</span>
966
+ </div>
967
+ </div>
968
+ </section>
969
+
970
+ <!-- ═══════════ 3. WAB SCORE ═══════════ -->
971
+ <section class="wab-score-section" style="padding: 80px 20px; background: white; text-align: center;">
972
+ <div style="max-width: 800px; margin: 0 auto;">
973
+ <h2 style="font-size: 36px; color: #0f172a; margin-bottom: 16px;">The Digital World's Credit Rating</h2>
974
+ <p style="font-size: 18px; color: #64748b; margin-bottom: 40px;">
975
+ Like credit agencies rate banks, <strong>WAB Score</strong> rates digital platforms. Search any platform and get a transparency score based on 15 fairness signals.
976
+ </p>
977
+ <div style="display: flex; justify-content: center; gap: 24px; flex-wrap: wrap; margin-bottom: 40px;">
978
+ <div style="border: 2px solid #22c55e; border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; gap: 12px; background: #fff;">
979
+ <div style="font-size: 32px; font-weight: 900; color: #22c55e; line-height: 1;">A-</div>
980
+ <div>
981
+ <div style="font-weight: 700; color: #1e293b;">Very Good</div>
982
+ <div style="font-size: 12px; color: #64748b;">86/100 · amazon.com</div>
983
+ </div>
984
+ </div>
985
+ <div style="border: 2px solid #f59e0b; border-radius: 12px; padding: 16px 24px; display: flex; align-items: center; gap: 12px; background: #fff;">
986
+ <div style="font-size: 32px; font-weight: 900; color: #f59e0b; line-height: 1;">C+</div>
987
+ <div>
988
+ <div style="font-weight: 700; color: #1e293b;">Below Average</div>
989
+ <div style="font-size: 12px; color: #64748b;">68/100 · aliexpress.com</div>
990
+ </div>
991
+ </div>
992
+ </div>
993
+ <form action="/score" method="GET" style="display: flex; max-width: 500px; margin: 0 auto; gap: 8px;">
994
+ <input type="text" name="domain" placeholder="Enter platform domain (e.g. shein.com)" style="flex: 1; padding: 12px 16px; border: 1px solid #e2e8f0; border-radius: 8px; font-size: 15px;">
995
+ <button type="submit" style="background: #0f172a; color: white; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer;">Check Score</button>
996
+ </form>
997
+ </div>
998
+ </section>
999
+
1000
+ <!-- ═══════════ 4. TRUST LAYER PROTOCOL ═══════════ -->
1001
+ <section style="padding: 60px 20px; background: #f1f5f9; border-top: 1px solid #e2e8f0;">
1002
+ <div style="max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;">
1003
+ <div style="flex: 1; min-width: 280px;">
1004
+ <h3 style="font-size: 24px; color: #0f172a; margin-bottom: 12px;">The Open Trust Protocol</h3>
1005
+ <p style="color: #475569; line-height: 1.6; margin-bottom: 20px;">
1006
+ Prove to your customers that your store is fair and safe. Add a <code>wab.json</code> file to your site and print a verified trust badge — the SSL padlock for platform fairness.
1007
+ </p>
1008
+ <a href="/docs" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Learn how to get WAB Certified →</a>
1009
+ </div>
1010
+ <div style="flex: 1; min-width: 280px; background: white; padding: 20px; border-radius: 12px; border: 1px solid #e2e8f0;">
1011
+ <div style="font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #334155;">
1012
+ <span style="color:#94a3b8">// /.well-known/wab.json</span><br>
1013
+ {<br>
1014
+ &nbsp;&nbsp;"wab_certified": <span style="color:#22c55e">true</span>,<br>
1015
+ &nbsp;&nbsp;"fairness_score": <span style="color:#3b82f6">92</span>,<br>
1016
+ &nbsp;&nbsp;"last_audit": <span style="color:#a3e635">"2026-04-01"</span><br>
1017
+ }
1018
+ </div>
1019
+ </div>
1020
+ </div>
1021
+ </section>
1022
+
1023
+ <!-- ═══════════ 5. BOUNTY NETWORK ═══════════ -->
1024
+ <section style="padding: 80px 20px; background: #0f172a; color: white; text-align: center;">
1025
+ <div style="max-width: 700px; margin: 0 auto;">
1026
+ <div style="font-size: 48px; margin-bottom: 16px;">💰</div>
1027
+ <h2 style="font-size: 36px; margin-bottom: 16px;">Earn Money by Discovering Fraud</h2>
1028
+ <p style="font-size: 18px; color: #94a3b8; margin-bottom: 32px; line-height: 1.6;">
1029
+ Join the <strong>WAB Bounty Network</strong> and report phishing, scams, and malware that automated systems haven't caught yet. Earn credits redeemable for cash.
1030
+ </p>
1031
+ <div style="display: flex; justify-content: center; gap: 24px; margin-bottom: 32px; flex-wrap: wrap;">
1032
+ <div style="background: #1e293b; padding: 16px 24px; border-radius: 8px;">
1033
+ <div style="font-size: 24px; font-weight: 700; color: #ef4444;">50 Credits</div>
1034
+ <div style="font-size: 13px; color: #94a3b8;">Critical Threats</div>
1035
+ </div>
1036
+ <div style="background: #1e293b; padding: 16px 24px; border-radius: 8px;">
1037
+ <div style="font-size: 24px; font-weight: 700; color: #f59e0b;">25 Credits</div>
1038
+ <div style="font-size: 13px; color: #94a3b8;">Confirmed Scams</div>
1039
+ </div>
1040
+ </div>
1041
+ <a href="/register" class="btn btn-primary btn-lg">Start Earning →</a>
1042
+ </div>
1043
+ </section>
1044
+
1045
+ <!-- ═══════════ 6. DATA MARKETPLACE ═══════════ -->
1046
+ <section style="padding: 80px 20px; background: white;">
1047
+ <div style="max-width: 1000px; margin: 0 auto; text-align: center;">
1048
+ <h2 style="font-size: 32px; color: #0f172a; margin-bottom: 16px;">Threat Intelligence for AI &amp; Security</h2>
1049
+ <p style="font-size: 18px; color: #64748b; margin-bottom: 48px; max-width: 700px; margin-left: auto; margin-right: auto;">
1050
+ <strong>WAB Data Marketplace</strong> provides curated threat intelligence datasets for cybersecurity companies and AI model training.
1051
+ </p>
1052
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px;">
1053
+ <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
1054
+ <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Threat Intelligence Feed</h4>
1055
+ <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Real-time phishing, malware, and scam URL data from 47 databases. Updated continuously.</p>
1056
+ <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
1057
+ </div>
1058
+ <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
1059
+ <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Platform Fairness Data</h4>
1060
+ <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Quarterly transparency scores for 500+ marketplaces — hidden fees, return policies, dark patterns.</p>
1061
+ <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
1062
+ </div>
1063
+ <div style="border: 1px solid #e2e8f0; padding: 24px; border-radius: 12px; text-align: left;">
1064
+ <h4 style="font-size: 18px; margin-bottom: 8px; color: #0f172a;">Affiliate Intelligence</h4>
1065
+ <p style="color: #64748b; font-size: 14px; margin-bottom: 16px;">Commission benchmarks, fraud patterns, and network reliability scores across all major affiliate platforms.</p>
1066
+ <a href="/workspace" style="color: #3b82f6; font-weight: 600; text-decoration: none;">Explore Data →</a>
1067
+ </div>
1068
+ </div>
1069
+ </div>
1070
+ </section>
1071
+
1072
+ <!-- ═══════════ 7. EMAIL PROTECTION ═══════════ -->
1073
+ <section style="padding: 60px 20px; background: #f8fafc;">
1074
+ <div style="max-width: 900px; margin: 0 auto; display: flex; align-items: center; gap: 40px; flex-wrap: wrap;">
1075
+ <div style="flex: 1; min-width: 280px;">
1076
+ <h3 style="font-size: 28px; color: #0f172a; margin-bottom: 16px;">Email Protection</h3>
1077
+ <p style="color: #475569; font-size: 16px; line-height: 1.6; margin-bottom: 24px;">
1078
+ 94% of cyber breaches start with a phishing email. Install the WAB extension and every link and sender in your inbox gets scanned by WAB automatically.
1079
+ </p>
1080
+ <div style="display: flex; gap: 12px; flex-wrap: wrap;">
1081
+ <a href="/downloads" style="background: #fff; border: 1px solid #cbd5e1; padding: 10px 20px; border-radius: 8px; text-decoration: none; color: #1e293b; font-weight: 600; font-size: 14px;">🌐 Chrome Extension</a>
1082
+ <a href="/downloads" style="background: #fff; border: 1px solid #cbd5e1; padding: 10px 20px; border-radius: 8px; text-decoration: none; color: #1e293b; font-weight: 600; font-size: 14px;">🦊 Firefox Add-on</a>
1083
+ </div>
1084
+ </div>
1085
+ <div style="flex: 1; min-width: 280px; background: white; padding: 16px; border-radius: 8px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);">
1086
+ <div style="background: #fef2f2; border-left: 4px solid #ef4444; padding: 12px 16px; border-radius: 4px; margin-bottom: 16px;">
1087
+ <strong style="color: #991b1b; font-size: 13px;">🚫 WAB Security Alert:</strong>
1088
+ <span style="color: #991b1b; font-size: 13px;"> Dangerous link detected</span>
1089
+ <div style="color: #b91c1c; font-size: 12px; margin-top: 4px;">PHISHING DETECTED — paypa1-secure-login.xyz scored 95/100 risk</div>
1090
+ </div>
1091
+ <div style="height: 12px; background: #f1f5f9; width: 60%; margin-bottom: 8px; border-radius: 4px;"></div>
1092
+ <div style="height: 12px; background: #f1f5f9; width: 80%; margin-bottom: 8px; border-radius: 4px;"></div>
1093
+ <div style="height: 12px; background: #f1f5f9; width: 40%; border-radius: 4px;"></div>
1094
+ </div>
1095
+ </div>
1096
+ </section>
1097
+
1098
+ <!-- ═══════════ 8. AFFILIATE INTELLIGENCE ═══════════ -->
1099
+ <section style="padding: 80px 20px; background: #0f172a; color: white; text-align: center;">
1100
+ <div style="max-width: 800px; margin: 0 auto;">
1101
+ <h2 style="font-size: 36px; margin-bottom: 16px;">Are Affiliate Networks Stealing Your Commissions?</h2>
1102
+ <p style="font-size: 18px; color: #94a3b8; margin-bottom: 32px; line-height: 1.6;">
1103
+ <strong>WAB Affiliate Intelligence</strong> analyzes your affiliate data and compares it with industry benchmarks to detect commission shaving, cookie stuffing, and payment delays.
1104
+ </p>
1105
+ <div style="background: #1e293b; border: 1px solid #334155; border-radius: 16px; padding: 24px; text-align: left; max-width: 600px; margin: 0 auto 32px; font-family: 'JetBrains Mono', monospace;">
1106
+ <div style="display: flex; justify-content: space-between; border-bottom: 1px solid #334155; padding-bottom: 12px; margin-bottom: 12px;">
1107
+ <div>
1108
+ <div style="color: #94a3b8; font-size: 12px; margin-bottom: 4px;">Network</div>
1109
+ <div style="font-weight: 700; font-size: 16px;">ClickBank</div>
1110
+ </div>
1111
+ <div style="text-align: right;">
1112
+ <div style="color: #94a3b8; font-size: 12px; margin-bottom: 4px;">Fraud Risk</div>
1113
+ <div style="font-weight: 700; font-size: 16px; color: #f59e0b;">MEDIUM</div>
1114
+ </div>
1115
+ </div>
1116
+ <div style="color: #cbd5e1; font-size: 14px; margin-bottom: 8px;">⚠️ <strong>Commission Shaving:</strong> 12% of valid sales cancelled</div>
1117
+ <div style="color: #cbd5e1; font-size: 14px;">⚠️ <strong>Payment Delays:</strong> Average 45 days vs industry 30</div>
1118
+ </div>
1119
+ <a href="/register" class="btn btn-primary btn-lg">Analyze Your Networks →</a>
1120
+ </div>
1121
+ </section>
1122
+
1123
+ <!-- ═══════════ LATEST ADDITIONS ═══════════ -->
1124
+ <section class="section" id="latest-additions" style="background: var(--bg-secondary);">
1125
+ <div class="container">
1126
+ <div class="section-header">
1127
+ <span class="label">Latest Additions</span>
1128
+ <h2>All New Modules, Integrations &amp; Security Layers</h2>
1129
+ <p>Everything added recently is listed here with direct links, so teams and users can immediately open what they need.</p>
1130
+ </div>
1131
+
1132
+ <div class="grid-3">
1133
+ <div class="card fade-in" style="border-left:3px solid #10b981;background:linear-gradient(180deg,rgba(16,185,129,0.08),transparent);">
1134
+ <div class="card-icon green">🔗</div>
1135
+ <h3>ShieldLink — Verified Anti-Phishing Links <span style="background:#ef4444;color:#fff;padding:2px 8px;border-radius:6px;font-size:0.6em;vertical-align:middle;margin-left:6px;">NEW</span></h3>
1136
+ <p>The first cryptographically-signed, anti-phishing link layer for the open web. Banks, payment processors, and brands sign every link they send. Anyone who clicks sees a <strong>Trust Preview</strong> with a green/yellow/red verdict — <strong>no app install required</strong>.</p>
1137
+ <ul style="margin-top:10px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
1138
+ <li>🛂 Identity = DNS-verified domain ownership</li>
1139
+ <li>🪞 Lookalike protection (Levenshtein ≤ 2)</li>
1140
+ <li>✍️ Ed25519 cryptographic signing</li>
1141
+ <li>🚨 Community phishing reports + real-time revocation</li>
1142
+ <li>🌍 Bilingual EN / AR Trust Preview</li>
1143
+ </ul>
1144
+ <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1145
+ <a href="/shieldlink" class="btn btn-primary btn-sm" style="background:linear-gradient(135deg,#10b981,#0ea5e9);border:none;">Open ShieldLink</a>
1146
+ <a href="/dashboard/shieldlink" class="btn btn-secondary btn-sm">Customer Dashboard</a>
1147
+ <a href="/api/shieldlink/recent" class="btn btn-secondary btn-sm">Public API</a>
1148
+ </div>
1149
+ <p style="margin-top:10px;font-size:0.78rem;color:var(--text-secondary);">Available on <strong>Pro</strong> &amp; <strong>Enterprise</strong> plans · Verification &amp; reporting are free for everyone.</p>
1150
+ </div>
1151
+
1152
+ <div class="card fade-in" style="border-left:3px solid #0ea5e9;">
1153
+ <div class="card-icon cyan">📱</div>
1154
+ <h3>Sovereign Phone Shield</h3>
1155
+ <p>Communication protection stack with behavioral IDS, threat-intel feed, community reporting, and personal vault encryption.</p>
1156
+ <ul style="margin-top:10px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
1157
+ <li>Connection analysis: allow / warn / block</li>
1158
+ <li>Mobile device telemetry endpoints</li>
1159
+ <li>AES-256-GCM personal vault</li>
1160
+ </ul>
1161
+ <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1162
+ <a href="/phone-shield" class="btn btn-primary btn-sm">Open Shield</a>
1163
+ <a href="/api/sovereign/shield/stats" class="btn btn-secondary btn-sm">Live Stats API</a>
1164
+ </div>
1165
+ </div>
1166
+
1167
+ <div class="card fade-in fade-in-delay-1" style="border-left:3px solid #6366f1;">
1168
+ <div class="card-icon purple">🚀</div>
1169
+ <h3>One-Click Integrations Hub</h3>
1170
+ <p>Ready deploy packs for Vercel, Netlify, Railway, Cloudflare Workers, Docker, Linux installer, and WordPress MU plugin.</p>
1171
+ <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1172
+ <a href="/integrations" class="btn btn-primary btn-sm">Open Integrations</a>
1173
+ <a href="https://github.com/abokenan444/web-agent-bridge/tree/master/integrations" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">GitHub Templates</a>
1174
+ </div>
1175
+ </div>
1176
+
1177
+ <div class="card fade-in fade-in-delay-2" style="border-left:3px solid #10b981;">
1178
+ <div class="card-icon green">🧩</div>
1179
+ <h3>Shared Hosting PHP Bridge</h3>
1180
+ <p>Production-ready PHP bridge for shared hosting environments where Node daemons are not available.</p>
1181
+ <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1182
+ <a href="https://github.com/abokenan444/web-agent-bridge/tree/master/integrations/shared-hosting" target="_blank" rel="noopener" class="btn btn-primary btn-sm">Shared Hosting Pack</a>
1183
+ <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/integrations/shared-hosting/README.ar.md" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">Arabic Guide</a>
1184
+ </div>
1185
+ </div>
1186
+
1187
+ <div class="card fade-in" style="border-left:3px solid #f59e0b;">
1188
+ <div class="card-icon orange">🌐</div>
1189
+ <h3>Make Your Site AI-Discoverable in 5 Minutes <span style="background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;padding:2px 8px;border-radius:6px;font-size:0.55em;vertical-align:middle;margin-left:6px;">⚡ ONE-CLICK</span></h3>
1190
+ <p><strong>New: free hosted wizard</strong> at <a href="/one-click" style="color:#a5b4fc;">/one-click</a> generates your Ed25519 keypair, signs <code>wab.json</code>, and deploys the DNS TXT record directly via the Cloudflare / Vercel / Netlify API — no CLI, no copy-paste. Or do it manually: one TXT record at <code>_wab.yourdomain.com</code> and any compatible AI agent finds your <code>wab.json</code> automatically. Live DoH-based verifier included for Cloudflare, cPanel, GoDaddy, Namecheap, Route 53, and more.</p>
1191
+ <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1192
+ <a href="/one-click" class="btn btn-primary btn-sm" style="background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;">⚡ One-Click Wizard (Free)</a>
1193
+ <a href="/dns" class="btn btn-secondary btn-sm">Manual / Live Verifier</a>
1194
+ <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/DNS-DISCOVERY.md" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">EN Guide</a>
1195
+ <a href="https://github.com/abokenan444/web-agent-bridge/blob/master/DNS-DISCOVERY.ar.md" target="_blank" rel="noopener" class="btn btn-secondary btn-sm">AR Guide</a>
1196
+ </div>
1197
+ </div>
1198
+
1199
+ <div class="card fade-in fade-in-delay-1" style="border-left:3px solid #06b6d4;">
1200
+ <div class="card-icon cyan">🎮</div>
1201
+ <h3>New Interactive Demo Store</h3>
1202
+ <p>Fully interactive WAB demo at <code>/demo</code> with live product API, agent activity stream, and wab.json discovery.</p>
1203
+ <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1204
+ <a href="/demo" class="btn btn-primary btn-sm">Open Demo</a>
1205
+ <a href="/demo/.well-known/wab.json" class="btn btn-secondary btn-sm">Demo wab.json</a>
1206
+ </div>
1207
+ </div>
1208
+
1209
+ <div class="card fade-in fade-in-delay-2" style="border-left:3px solid #ec4899;">
1210
+ <div class="card-icon pink">🔌</div>
1211
+ <h3>API Gateway + 10 Modules</h3>
1212
+ <p>Unified authenticated gateway for protocol discovery, firewall, bounty, price shield, notary, neural analysis, and more.</p>
1213
+ <div style="margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;">
1214
+ <a href="/api" class="btn btn-primary btn-sm">Open API Page</a>
1215
+ <a href="/api/v1/health" class="btn btn-secondary btn-sm">Gateway Health</a>
1216
+ </div>
1217
+ </div>
1218
+ </div>
1219
+ </div>
1220
+ </section>
1221
+
1222
+ <!-- ═══════════ LIVE DNS ADOPTION ═══════════ -->
1223
+ <section class="section" id="live-dns-adoption">
1224
+ <div class="container">
1225
+ <div class="section-header">
1226
+ <span class="label">Live Adoption</span>
1227
+ <h2>Businesses Using WAB DNS Discovery</h2>
1228
+ <p>This list is auto-generated from real registry registrations only. No static seeded entries.</p>
1229
+ </div>
1230
+ <div id="indexLiveAdoptionStatus" style="margin-bottom:14px;color:var(--text-secondary);">Loading live registry…</div>
1231
+ <div id="indexLiveAdoptionList" class="grid-3" style="display:none;"></div>
1232
+ </div>
1233
+ </section>
1234
+
1235
+
1236
+ <!-- ═══════════ CTA ═══════════ -->
1237
+ <section class="section" style="text-align:center;">
1238
+ <div class="container">
1239
+ <h2 style="margin-bottom:16px;">Ready to Make Your Site <span class="gradient-text">AI-Ready</span>?</h2>
1240
+ <p style="color:var(--text-secondary); max-width:540px; margin:0 auto 32px; font-size:1.1rem;">
1241
+ Join the open-source movement that's bridging the gap between AI agents and the web.
1242
+ </p>
1243
+ <div style="display:flex; gap:16px; justify-content:center; flex-wrap:wrap;">
1244
+ <a href="/register" class="btn btn-primary btn-lg">Create Free Account</a>
1245
+ <a href="https://github.com/abokenan444/web-agent-bridge" class="btn btn-secondary btn-lg" target="_blank" rel="noopener">⭐ Star on GitHub</a>
1246
+ <a href="/docs" class="btn btn-secondary btn-lg">View Documentation</a>
1247
+ </div>
1248
+ </div>
1249
+ </section>
1250
+
1251
+ <!-- ═══════════ FOOTER ═══════════ -->
1252
+ <footer class="footer">
1253
+ <div class="container">
1254
+ <div class="footer-grid">
1255
+ <div class="footer-brand">
1256
+ <a href="/" class="navbar-brand">
1257
+ <img src="/images/wab-logo-64.png" alt="WAB" class="brand-icon" width="32" height="32" style="width:32px;height:32px;border-radius:8px;display:block">
1258
+ <span>Web Agent Bridge</span>
1259
+ </a>
1260
+ <p>The open AI↔Web protocol & agent platform — standardized commands, sovereign browser, phone shield, DNS discovery, agent mesh, and unified API gateway. Built for the future of intelligent automation.</p>
1261
+ </div>
1262
+ <div class="footer-col">
1263
+ <h4>Product</h4>
1264
+ <ul>
1265
+ <li><a href="#features">Features</a></li>
1266
+ <li><a href="#packages">Framework Packages</a></li>
1267
+ <li><a href="#integrations">Agent Integrations</a></li>
1268
+ <li><a href="#pricing">Pricing</a></li>
1269
+ <li><a href="/docs">Documentation</a></li>
1270
+ <li><a href="/api">API Gateway</a></li>
1271
+ <li><a href="/integrations">Integrations</a></li>
1272
+ <li><a href="/dns">AI Discovery</a></li>
1273
+ <li><a href="/one-click">⚡ One-Click (NEW)</a></li>
1274
+ <li><a href="/wab-features">🧠 Advanced Features (NEW)</a></li>
1275
+ <li><a href="/wab-truth">⚓ Truth Layer (NEW)</a></li>
1276
+ <li><a href="/milestones">🏆 Partners & Milestones (NEW)</a></li>
1277
+ <li><a href="/ring4">⚡ Ring 4 Trust Handshake (NEW)</a></li>
1278
+ <li><a href="/phone-shield">Phone Shield</a></li>
1279
+ <li><a href="/shieldlink">🔗 ShieldLink (NEW)</a></li>
1280
+ <li><a href="/sovereign">Sovereign Dashboard</a></li>
1281
+ <li><a href="/workspace">Agent Workspace</a></li>
1282
+ <li data-wab-auth="signed-in" style="display:none"><a href="/dashboard">Dashboard</a></li>
1283
+ </ul>
1284
+ </div>
1285
+ <div class="footer-col">
1286
+ <h4>Developers</h4>
1287
+ <ul>
1288
+ <li><a href="/docs#quick-start">Quick Start</a></li>
1289
+ <li><a href="/docs#api-reference">API Reference</a></li>
1290
+ <li><a href="/api">API Modules</a></li>
1291
+ <li><a href="#examples">Examples</a></li>
1292
+ <li><a href="https://github.com/abokenan444/web-agent-bridge" target="_blank" rel="noopener">GitHub</a></li>
1293
+ </ul>
1294
+ </div>
1295
+ <div class="footer-col">
1296
+ <h4>Legal</h4>
1297
+ <ul>
1298
+ <li><a href="/privacy">Privacy Policy</a></li>
1299
+ <li><a href="/terms">Terms of Service</a></li>
1300
+ <li><a href="/cookies">Cookie Policy</a></li>
1301
+ </ul>
1302
+ </div>
1303
+ </div>
1304
+ <div class="footer-bottom">
1305
+ <span>&copy; 2026 Web Agent Bridge. MIT License. Operated from the Netherlands.</span>
1306
+ </div>
1307
+ </div>
1308
+ </footer>
1309
+
1310
+ <script src="/js/auth-nav.js?v=3.8.1"></script>
1311
+ <script>
1312
+ const navbar = document.getElementById('navbar');
1313
+ window.addEventListener('scroll', () => {
1314
+ navbar.style.background = window.scrollY > 50
1315
+ ? 'rgba(10, 14, 26, 0.95)'
1316
+ : 'rgba(10, 14, 26, 0.8)';
1317
+ });
1318
+
1319
+ function escapeHtml(v) {
1320
+ return String(v)
1321
+ .replace(/&/g, '&amp;')
1322
+ .replace(/</g, '&lt;')
1323
+ .replace(/>/g, '&gt;')
1324
+ .replace(/\"/g, '&quot;')
1325
+ .replace(/'/g, '&#39;');
1326
+ }
1327
+
1328
+ async function loadIndexLiveAdoption() {
1329
+ const status = document.getElementById('indexLiveAdoptionStatus');
1330
+ const list = document.getElementById('indexLiveAdoptionList');
1331
+ if (!status || !list) return;
1332
+
1333
+ status.textContent = 'Loading live registry…';
1334
+ list.style.display = 'none';
1335
+ list.innerHTML = '';
1336
+
1337
+ try {
1338
+ const res = await fetch('/api/discovery/registry?limit=12');
1339
+ const data = await res.json();
1340
+ const entries = Array.isArray(data && data.listings) ? data.listings : [];
1341
+
1342
+ if (!entries.length) {
1343
+ status.textContent = 'No businesses are currently listed. New real registrations will appear here automatically.';
1344
+ return;
1345
+ }
1346
+
1347
+ list.innerHTML = entries.map((entry) => {
1348
+ const name = escapeHtml(entry.name || entry.domain || 'Unnamed site');
1349
+ const domain = escapeHtml(entry.domain || '');
1350
+ const category = escapeHtml(entry.category || 'general');
1351
+ const desc = escapeHtml(entry.description || 'WAB-enabled website');
1352
+ const score = Number.isFinite(Number(entry.neutrality_score)) ? Number(entry.neutrality_score) : 0;
1353
+ return '<div class="card fade-in" style="border-left:3px solid #10b981;">' +
1354
+ '<h3 style="margin-bottom:8px">' + name + '</h3>' +
1355
+ '<p style="margin-bottom:10px">' + desc + '</p>' +
1356
+ '<p style="color:var(--text-secondary);font-size:.88rem;margin:0">' + domain + '</p>' +
1357
+ '<p style="color:var(--text-secondary);font-size:.82rem;margin-top:6px">' + category + ' · neutrality ' + score + '</p>' +
1358
+ '</div>';
1359
+ }).join('');
1360
+
1361
+ list.style.display = 'grid';
1362
+ status.textContent = 'Live list loaded from registry.';
1363
+ } catch (err) {
1364
+ status.textContent = 'Failed to load live registry: ' + ((err && err.message) || err);
1365
+ }
1366
+ }
1367
+
1368
+ loadIndexLiveAdoption();
1369
+ </script>
1370
+ <script src="/js/cookie-consent.js?v=3.0.1"></script>
1371
+ </body>
1372
+ </html>