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/dashboard.html CHANGED
@@ -1,707 +1,711 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Dashboard — Web Agent Bridge</title>
7
- <script>
8
- (function () {
9
- try {
10
- if (!localStorage.getItem('wab_token')) {
11
- window.location.replace('/login?next=' + encodeURIComponent(location.pathname || '/dashboard'));
12
- }
13
- } catch (e) {
14
- window.location.replace('/login?next=/dashboard');
15
- }
16
- })();
17
- </script>
18
- <link rel="preconnect" href="https://fonts.googleapis.com">
19
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20
- <style>body{background:#0a0e1a;color:#f0f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;min-height:100vh}</style>
21
- <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
22
- <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"></noscript>
23
- <link rel="stylesheet" href="/css/styles.css?v=3.0.1">
24
- </head>
25
- <body>
26
- <div class="dashboard">
27
-
28
- <!-- ═══════════ SIDEBAR ═══════════ -->
29
- <aside class="sidebar">
30
- <div class="sidebar-brand">
31
- <a href="/" class="navbar-brand">
32
- <div class="brand-icon">⚡</div>
33
- <span>WAB</span>
34
- </a>
35
- </div>
36
- <nav class="sidebar-nav">
37
- <a href="#" class="active" data-view="overview">📊 Overview</a>
38
- <a href="#" data-view="sites">🌐 My Sites</a>
39
- <a href="#" data-view="analytics">📈 Analytics</a>
40
- <a href="/providers">🔗 DNS Providers</a>
41
- <a href="#" data-view="billing">💳 Billing</a>
42
- <a href="#" data-view="settings">⚙️ Settings</a>
43
- <a href="/docs" style="margin-top:20px;">📖 Documentation</a>
44
- </nav>
45
- <div class="sidebar-footer">
46
- <div style="font-size:0.85rem; color:var(--text-muted); margin-bottom:8px;" id="userName"></div>
47
- <button class="btn btn-ghost btn-sm" onclick="logout()" style="width:100%; justify-content:flex-start;">🚪 Sign Out</button>
48
- </div>
49
- </aside>
50
-
51
- <!-- ═══════════ MAIN CONTENT ═══════════ -->
52
- <main class="main-content">
53
-
54
- <!-- ── Overview View ── -->
55
- <div id="view-overview" class="view active">
56
- <div class="page-header">
57
- <h1>Dashboard</h1>
58
- <button class="btn btn-primary btn-sm" onclick="showAddSiteModal()">+ Add Site</button>
59
- </div>
60
-
61
- <div class="stats-grid">
62
- <div class="stat-card">
63
- <div class="label">Total Sites</div>
64
- <div class="value" id="statSites">0</div>
65
- </div>
66
- <div class="stat-card">
67
- <div class="label">Total Actions</div>
68
- <div class="value" id="statActions">—</div>
69
- </div>
70
- <div class="stat-card">
71
- <div class="label">Active Tier</div>
72
- <div class="value" id="statTier" style="font-size:1.5rem;">Free</div>
73
- </div>
74
- <div class="stat-card">
75
- <div class="label">API Calls (30d)</div>
76
- <div class="value" id="statCalls">0</div>
77
- </div>
78
- </div>
79
-
80
- <div class="table-wrapper">
81
- <div class="table-header">
82
- <h3 style="font-size:1rem;">Your Sites</h3>
83
- </div>
84
- <table>
85
- <thead>
86
- <tr>
87
- <th>Name</th>
88
- <th>Domain</th>
89
- <th>Tier</th>
90
- <th>License Key</th>
91
- <th>Actions</th>
92
- </tr>
93
- </thead>
94
- <tbody id="sitesTableBody">
95
- <tr><td colspan="5" style="text-align:center; padding:40px; color:var(--text-muted);">No sites yet. Click "Add Site" to get started.</td></tr>
96
- </tbody>
97
- </table>
98
- </div>
99
- </div>
100
-
101
- <!-- ── Sites View ── -->
102
- <div id="view-sites" class="view">
103
- <div class="page-header">
104
- <h1>My Sites</h1>
105
- <button class="btn btn-primary btn-sm" onclick="showAddSiteModal()">+ Add Site</button>
106
- </div>
107
- <div id="sitesGrid" class="grid-2"></div>
108
- </div>
109
-
110
- <!-- ── Analytics View ── -->
111
- <div id="view-analytics" class="view">
112
- <div class="page-header">
113
- <h1>Analytics</h1>
114
- <select class="form-input" style="width:auto;" id="analyticsSiteSelect" onchange="loadAnalytics()">
115
- <option value="">Select a site</option>
116
- </select>
117
- </div>
118
- <div id="analyticsContent">
119
- <div style="text-align:center; padding:80px 0; color:var(--text-muted);">
120
- Select a site to view analytics data.
121
- </div>
122
- </div>
123
- </div>
124
-
125
- <!-- ── Billing View ── -->
126
- <div id="view-billing" class="view">
127
- <div class="page-header">
128
- <h1>Billing & Subscription</h1>
129
- </div>
130
-
131
- <div class="stats-grid" style="grid-template-columns:repeat(3,1fr);margin-bottom:24px;">
132
- <div class="stat-card">
133
- <div class="label">Current Plan</div>
134
- <div class="value" id="billingPlan" style="font-size:1.4rem;">Free</div>
135
- </div>
136
- <div class="stat-card">
137
- <div class="label">Status</div>
138
- <div class="value" id="billingStatus" style="font-size:1.2rem;">—</div>
139
- </div>
140
- <div class="stat-card">
141
- <div class="label">Payments</div>
142
- <div class="value" id="billingPayments">0</div>
143
- </div>
144
- </div>
145
-
146
- <!-- Pricing Cards -->
147
- <h3 style="margin-bottom:16px;">Upgrade Your Plan</h3>
148
- <div class="grid-3" style="display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:32px;" id="pricingCards">
149
- <div class="card" style="border:1px solid var(--border-color);text-align:center;padding:32px 24px;">
150
- <h3 style="margin-bottom:8px;">Starter</h3>
151
- <div style="font-size:2rem;font-weight:700;margin:16px 0;">$19<span style="font-size:0.9rem;font-weight:400;color:var(--text-muted);">/mo</span></div>
152
- <ul style="text-align:left;list-style:none;padding:0;margin:0 0 24px;font-size:0.9rem;color:var(--text-secondary);">
153
- <li style="padding:6px 0;">✓ Up to 5 sites</li>
154
- <li style="padding:6px 0;">✓ 10,000 actions/month</li>
155
- <li style="padding:6px 0;">✓ Automated Login</li>
156
- <li style="padding:6px 0;">✓ Email support</li>
157
- </ul>
158
- <button class="btn btn-secondary" onclick="startCheckout('starter')" style="width:100%;">Select Starter</button>
159
- </div>
160
- <div class="card" style="border:2px solid var(--accent-blue);text-align:center;padding:32px 24px;position:relative;">
161
- <span style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gradient-primary);padding:4px 16px;border-radius:12px;font-size:0.75rem;font-weight:600;">POPULAR</span>
162
- <h3 style="margin-bottom:8px;">Pro</h3>
163
- <div style="font-size:2rem;font-weight:700;margin:16px 0;">$49<span style="font-size:0.9rem;font-weight:400;color:var(--text-muted);">/mo</span></div>
164
- <ul style="text-align:left;list-style:none;padding:0;margin:0 0 24px;font-size:0.9rem;color:var(--text-secondary);">
165
- <li style="padding:6px 0;">✓ Up to 20 sites</li>
166
- <li style="padding:6px 0;">✓ 100,000 actions/month</li>
167
- <li style="padding:6px 0;">✓ API & Data Extraction</li>
168
- <li style="padding:6px 0;">✓ Priority support</li>
169
- </ul>
170
- <button class="btn btn-primary" onclick="startCheckout('pro')" style="width:100%;">Select Pro</button>
171
- </div>
172
- <div class="card" style="border:1px solid var(--border-color);text-align:center;padding:32px 24px;">
173
- <h3 style="margin-bottom:8px;">Enterprise</h3>
174
- <div style="font-size:2rem;font-weight:700;margin:16px 0;">$149<span style="font-size:0.9rem;font-weight:400;color:var(--text-muted);">/mo</span></div>
175
- <ul style="text-align:left;list-style:none;padding:0;margin:0 0 24px;font-size:0.9rem;color:var(--text-secondary);">
176
- <li style="padding:6px 0;">✓ Unlimited sites</li>
177
- <li style="padding:6px 0;">✓ Unlimited actions</li>
178
- <li style="padding:6px 0;">✓ Dedicated support</li>
179
- <li style="padding:6px 0;">✓ Custom integrations</li>
180
- </ul>
181
- <button class="btn btn-secondary" onclick="startCheckout('enterprise')" style="width:100%;">Select Enterprise</button>
182
- </div>
183
- </div>
184
-
185
- <div style="display:flex;gap:12px;">
186
- <button class="btn btn-secondary" onclick="openBillingPortal()">📋 Manage Subscription</button>
187
- </div>
188
-
189
- <!-- Payment History -->
190
- <h3 style="margin:32px 0 16px;">Payment History</h3>
191
- <div class="table-wrapper">
192
- <table>
193
- <thead><tr><th>Amount</th><th>Status</th><th>Description</th><th>Date</th></tr></thead>
194
- <tbody id="paymentHistory">
195
- <tr><td colspan="4" style="text-align:center;padding:40px;color:var(--text-muted);">No payments yet</td></tr>
196
- </tbody>
197
- </table>
198
- </div>
199
- </div>
200
-
201
- <!-- ── Settings View ── -->
202
- <div id="view-settings" class="view">
203
- <div class="page-header">
204
- <h1>Account Settings</h1>
205
- </div>
206
- <div class="card" style="max-width:600px;">
207
- <h3 style="margin-bottom:20px;">Profile</h3>
208
- <div class="form-group">
209
- <label>Name</label>
210
- <input type="text" class="form-input" id="settingsName" readonly>
211
- </div>
212
- <div class="form-group">
213
- <label>Email</label>
214
- <input type="email" class="form-input" id="settingsEmail" readonly>
215
- </div>
216
- <div class="form-group">
217
- <label>Company</label>
218
- <input type="text" class="form-input" id="settingsCompany" readonly>
219
- </div>
220
- </div>
221
- </div>
222
-
223
- </main>
224
- </div>
225
-
226
- <!-- ═══════════ ADD SITE MODAL ═══════════ -->
227
- <div class="modal-overlay" id="addSiteModal">
228
- <div class="modal">
229
- <div class="modal-header">
230
- <h2>Add New Site</h2>
231
- <button class="modal-close" onclick="closeModal('addSiteModal')">&times;</button>
232
- </div>
233
- <div class="modal-body">
234
- <div class="alert alert-error" id="addSiteError"></div>
235
- <form id="addSiteForm">
236
- <div class="form-group">
237
- <label for="siteName">Site Name</label>
238
- <input type="text" id="siteName" class="form-input" placeholder="My Website" required>
239
- </div>
240
- <div class="form-group">
241
- <label for="siteDomain">Domain</label>
242
- <input type="text" id="siteDomain" class="form-input" placeholder="example.com" required>
243
- </div>
244
- <div class="form-group">
245
- <label for="siteDescription">Description</label>
246
- <textarea id="siteDescription" class="form-input" placeholder="Brief description of your site"></textarea>
247
- </div>
248
- </form>
249
- </div>
250
- <div class="modal-footer">
251
- <button class="btn btn-secondary" onclick="closeModal('addSiteModal')">Cancel</button>
252
- <button class="btn btn-primary" onclick="addSite()">Add Site</button>
253
- </div>
254
- </div>
255
- </div>
256
-
257
- <!-- ═══════════ SITE DETAIL MODAL ═══════════ -->
258
- <div class="modal-overlay" id="siteDetailModal">
259
- <div class="modal" style="max-width:700px;">
260
- <div class="modal-header">
261
- <h2 id="detailSiteName">Site Details</h2>
262
- <button class="modal-close" onclick="closeModal('siteDetailModal')">&times;</button>
263
- </div>
264
- <div class="modal-body">
265
- <div class="tabs">
266
- <button class="tab active" onclick="switchDetailTab('snippet')">Install Snippet</button>
267
- <button class="tab" onclick="switchDetailTab('config')">Configuration</button>
268
- <button class="tab" onclick="switchDetailTab('info')">Info</button>
269
- </div>
270
-
271
- <div class="tab-content active" id="tab-snippet">
272
- <p style="color:var(--text-secondary); margin-bottom:16px;">Add this code to your website's <code>&lt;head&gt;</code> tag:</p>
273
- <div class="snippet-box">
274
- <button class="copy-btn" onclick="copySnippet()">Copy</button>
275
- <pre id="snippetCode"></pre>
276
- </div>
277
- </div>
278
-
279
- <div class="tab-content" id="tab-config">
280
- <h4 style="margin-bottom:16px;">Agent Permissions</h4>
281
- <div id="configToggles"></div>
282
- <div style="margin-top:20px;">
283
- <button class="btn btn-primary btn-sm" onclick="saveConfig()">Save Changes</button>
284
- </div>
285
- </div>
286
-
287
- <div class="tab-content" id="tab-info">
288
- <div class="form-group">
289
- <label>License Key</label>
290
- <div class="snippet-box"><pre id="detailLicense"></pre></div>
291
- </div>
292
- <div class="form-group">
293
- <label>API Key</label>
294
- <div class="snippet-box"><pre id="detailApiKey"></pre></div>
295
- </div>
296
- <div class="form-group">
297
- <label>Tier</label>
298
- <div id="detailTier"></div>
299
- </div>
300
- <div class="form-group">
301
- <label>Created</label>
302
- <div id="detailCreated" style="color:var(--text-secondary);"></div>
303
- </div>
304
- <div style="margin-top:24px; padding-top:20px; border-top:1px solid var(--border-color);">
305
- <button class="btn btn-danger btn-sm" onclick="deleteSiteConfirm()">Delete Site</button>
306
- </div>
307
- </div>
308
- </div>
309
- </div>
310
- </div>
311
-
312
- <script>
313
- // ─── State ──────────────────────────────────────────────────────────
314
- const API = '/api';
315
- let token = localStorage.getItem('wab_token');
316
- let user = JSON.parse(localStorage.getItem('wab_user') || 'null');
317
- let sites = [];
318
- let currentSite = null;
319
- let currentConfig = null;
320
-
321
- if (!token) window.location.href = '/login';
322
-
323
- function headers() {
324
- return { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` };
325
- }
326
-
327
- function logout() {
328
- localStorage.removeItem('wab_token');
329
- localStorage.removeItem('wab_user');
330
- window.location.href = '/login';
331
- }
332
-
333
- // ─── Navigation ─────────────────────────────────────────────────────
334
- document.querySelectorAll('.sidebar-nav a[data-view]').forEach(link => {
335
- link.addEventListener('click', (e) => {
336
- e.preventDefault();
337
- const view = link.dataset.view;
338
- document.querySelectorAll('.sidebar-nav a').forEach(a => a.classList.remove('active'));
339
- link.classList.add('active');
340
- document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
341
- const el = document.getElementById(`view-${view}`);
342
- if (el) el.classList.add('active');
343
- if (view === 'billing') loadBilling();
344
- });
345
- });
346
-
347
- // ─── Init ───────────────────────────────────────────────────────────
348
- async function init() {
349
- if (user) {
350
- document.getElementById('userName').textContent = user.name || user.email;
351
- document.getElementById('settingsName').value = user.name || '';
352
- document.getElementById('settingsEmail').value = user.email || '';
353
- document.getElementById('settingsCompany').value = user.company || '';
354
- }
355
- await loadSites();
356
- }
357
-
358
- // ─── Load Sites ─────────────────────────────────────────────────────
359
- async function loadSites() {
360
- try {
361
- const res = await fetch(`${API}/sites`, { headers: headers() });
362
- if (res.status === 401 || res.status === 403) return logout();
363
- const data = await res.json();
364
- sites = data.sites || [];
365
- renderOverview();
366
- renderSitesGrid();
367
- renderAnalyticsSelect();
368
- } catch (err) {
369
- console.error('Failed to load sites:', err);
370
- }
371
- }
372
-
373
- function renderOverview() {
374
- document.getElementById('statSites').textContent = sites.length;
375
- const topTier = sites.reduce((best, s) => {
376
- const order = { enterprise: 4, pro: 3, starter: 2, free: 1 };
377
- return (order[s.tier] || 0) > (order[best] || 0) ? s.tier : best;
378
- }, 'free');
379
- document.getElementById('statTier').textContent = topTier.charAt(0).toUpperCase() + topTier.slice(1);
380
-
381
- const tbody = document.getElementById('sitesTableBody');
382
- if (sites.length === 0) {
383
- tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; padding:40px; color:var(--text-muted);">No sites yet. Click "Add Site" to get started.</td></tr>';
384
- return;
385
- }
386
-
387
- tbody.innerHTML = sites.map(s => `
388
- <tr>
389
- <td><strong style="color:var(--text-primary);">${esc(s.name)}</strong></td>
390
- <td><span class="mono" style="font-size:0.85rem;">${esc(s.domain)}</span></td>
391
- <td><span class="badge badge-${s.tier}">${s.tier}</span></td>
392
- <td><span class="mono" style="font-size:0.8rem; color:var(--text-muted);">${esc(s.license_key)}</span></td>
393
- <td>
394
- <button class="btn btn-secondary btn-sm" onclick="openSiteDetail('${s.id}')">Manage</button>
395
- </td>
396
- </tr>
397
- `).join('');
398
- }
399
-
400
- function renderSitesGrid() {
401
- const grid = document.getElementById('sitesGrid');
402
- if (sites.length === 0) {
403
- grid.innerHTML = '<div style="grid-column:1/-1; text-align:center; padding:60px; color:var(--text-muted);">No sites yet.</div>';
404
- return;
405
- }
406
-
407
- grid.innerHTML = sites.map(s => `
408
- <div class="card" style="cursor:pointer;" onclick="openSiteDetail('${s.id}')">
409
- <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:16px;">
410
- <h3 style="font-size:1.1rem;">${esc(s.name)}</h3>
411
- <span class="badge badge-${s.tier}">${s.tier}</span>
412
- </div>
413
- <p style="color:var(--text-muted); font-size:0.85rem; font-family:var(--font-mono);">${esc(s.domain)}</p>
414
- ${s.description ? `<p style="margin-top:8px; font-size:0.9rem;">${esc(s.description)}</p>` : ''}
415
- <div style="margin-top:16px; padding-top:12px; border-top:1px solid var(--border-color); display:flex; justify-content:space-between;">
416
- <span style="font-size:0.8rem; color:var(--text-muted);">Key: ${esc(s.license_key)}</span>
417
- <span class="badge badge-active">Active</span>
418
- </div>
419
- </div>
420
- `).join('');
421
- }
422
-
423
- function renderAnalyticsSelect() {
424
- const sel = document.getElementById('analyticsSiteSelect');
425
- sel.innerHTML = '<option value="">Select a site</option>' +
426
- sites.map(s => `<option value="${s.id}">${esc(s.name)} (${esc(s.domain)})</option>`).join('');
427
- }
428
-
429
- // ─── Add Site ───────────────────────────────────────────────────────
430
- function showAddSiteModal() { openModal('addSiteModal'); }
431
-
432
- async function addSite() {
433
- const name = document.getElementById('siteName').value.trim();
434
- const domain = document.getElementById('siteDomain').value.trim();
435
- const description = document.getElementById('siteDescription').value.trim();
436
- const errEl = document.getElementById('addSiteError');
437
- errEl.style.display = 'none';
438
-
439
- if (!name || !domain) {
440
- errEl.textContent = 'Name and domain are required';
441
- errEl.style.display = 'block';
442
- return;
443
- }
444
-
445
- try {
446
- const res = await fetch(`${API}/sites`, {
447
- method: 'POST',
448
- headers: headers(),
449
- body: JSON.stringify({ name, domain, description })
450
- });
451
- const data = await res.json();
452
-
453
- if (!res.ok) {
454
- errEl.textContent = data.error || 'Failed to add site';
455
- errEl.style.display = 'block';
456
- return;
457
- }
458
-
459
- closeModal('addSiteModal');
460
- document.getElementById('addSiteForm').reset();
461
- await loadSites();
462
- openSiteDetail(data.site.id);
463
- } catch (err) {
464
- errEl.textContent = 'Connection error';
465
- errEl.style.display = 'block';
466
- }
467
- }
468
-
469
- // ─── Site Detail ────────────────────────────────────────────────────
470
- async function openSiteDetail(siteId) {
471
- try {
472
- const res = await fetch(`${API}/sites/${siteId}`, { headers: headers() });
473
- const data = await res.json();
474
- currentSite = data.site;
475
- currentConfig = currentSite.config || {};
476
-
477
- document.getElementById('detailSiteName').textContent = currentSite.name;
478
- document.getElementById('detailLicense').textContent = currentSite.license_key;
479
- document.getElementById('detailApiKey').textContent = currentSite.api_key || '—';
480
- document.getElementById('detailTier').innerHTML = `<span class="badge badge-${currentSite.tier}">${currentSite.tier}</span>`;
481
- document.getElementById('detailCreated').textContent = new Date(currentSite.created_at).toLocaleDateString();
482
-
483
- const snippetRes = await fetch(`${API}/sites/${siteId}/snippet`, { headers: headers() });
484
- const snippetData = await snippetRes.json();
485
- document.getElementById('snippetCode').textContent = snippetData.snippet;
486
-
487
- renderConfigToggles();
488
- switchDetailTab('snippet');
489
- openModal('siteDetailModal');
490
- } catch (err) {
491
- console.error('Failed to load site:', err);
492
- }
493
- }
494
-
495
- function renderConfigToggles() {
496
- const perms = currentConfig.agentPermissions || {};
497
- const container = document.getElementById('configToggles');
498
-
499
- const permLabels = {
500
- readContent: { label: 'Read Content', desc: 'Allow agents to read page text' },
501
- click: { label: 'Click Elements', desc: 'Allow agents to click buttons and links' },
502
- fillForms: { label: 'Fill Forms', desc: 'Allow agents to fill and submit forms' },
503
- scroll: { label: 'Scroll', desc: 'Allow agents to scroll the page' },
504
- navigate: { label: 'Navigate', desc: 'Allow agents to navigate between pages' },
505
- apiAccess: { label: 'API Access', desc: 'Allow agents to call internal APIs (Pro+)' },
506
- automatedLogin: { label: 'Automated Login', desc: 'Allow agents to perform login (Starter+)' },
507
- extractData: { label: 'Extract Data', desc: 'Allow agents to extract structured data (Pro+)' }
508
- };
509
-
510
- container.innerHTML = Object.entries(permLabels).map(([key, info]) => `
511
- <div class="toggle-wrap">
512
- <div class="toggle-label">
513
- ${info.label}
514
- <small>${info.desc}</small>
515
- </div>
516
- <label class="toggle">
517
- <input type="checkbox" data-perm="${key}" ${perms[key] ? 'checked' : ''}>
518
- <span class="toggle-slider"></span>
519
- </label>
520
- </div>
521
- `).join('');
522
- }
523
-
524
- async function saveConfig() {
525
- const toggles = document.querySelectorAll('#configToggles input[data-perm]');
526
- const agentPermissions = {};
527
- toggles.forEach(t => { agentPermissions[t.dataset.perm] = t.checked; });
528
-
529
- currentConfig.agentPermissions = agentPermissions;
530
-
531
- try {
532
- await fetch(`${API}/sites/${currentSite.id}/config`, {
533
- method: 'PUT',
534
- headers: headers(),
535
- body: JSON.stringify({ config: currentConfig })
536
- });
537
- await loadSites();
538
- alert('Configuration saved!');
539
- } catch (err) {
540
- alert('Failed to save configuration');
541
- }
542
- }
543
-
544
- async function deleteSiteConfirm() {
545
- if (!confirm(`Are you sure you want to delete "${currentSite.name}"? This cannot be undone.`)) return;
546
-
547
- try {
548
- await fetch(`${API}/sites/${currentSite.id}`, { method: 'DELETE', headers: headers() });
549
- closeModal('siteDetailModal');
550
- await loadSites();
551
- } catch (err) {
552
- alert('Failed to delete site');
553
- }
554
- }
555
-
556
- function switchDetailTab(tab) {
557
- document.querySelectorAll('#siteDetailModal .tab').forEach(t => t.classList.remove('active'));
558
- document.querySelectorAll('#siteDetailModal .tab-content').forEach(c => c.classList.remove('active'));
559
- document.querySelector(`#siteDetailModal .tab[onclick*="${tab}"]`).classList.add('active');
560
- document.getElementById(`tab-${tab}`).classList.add('active');
561
- }
562
-
563
- function copySnippet() {
564
- const text = document.getElementById('snippetCode').textContent;
565
- navigator.clipboard.writeText(text).then(() => {
566
- const btn = document.querySelector('#tab-snippet .copy-btn');
567
- btn.textContent = 'Copied!';
568
- setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
569
- });
570
- }
571
-
572
- // ─── Analytics ──────────────────────────────────────────────────────
573
- async function loadAnalytics() {
574
- const siteId = document.getElementById('analyticsSiteSelect').value;
575
- const container = document.getElementById('analyticsContent');
576
-
577
- if (!siteId) {
578
- container.innerHTML = '<div style="text-align:center; padding:80px 0; color:var(--text-muted);">Select a site to view analytics data.</div>';
579
- return;
580
- }
581
-
582
- try {
583
- const res = await fetch(`${API}/sites/${siteId}/analytics?days=30`, { headers: headers() });
584
- const data = await res.json();
585
-
586
- if (!data.summary || data.summary.length === 0) {
587
- container.innerHTML = `
588
- <div style="text-align:center; padding:60px 0; color:var(--text-muted);">
589
- <div style="font-size:2.5rem; margin-bottom:16px;">📊</div>
590
- <p>No analytics data yet.</p>
591
- <p style="font-size:0.85rem; margin-top:8px;">Analytics will appear once AI agents start interacting with your site.</p>
592
- </div>`;
593
- return;
594
- }
595
-
596
- const totalCalls = data.summary.reduce((s, a) => s + a.count, 0);
597
- const totalSuccess = data.summary.reduce((s, a) => s + a.successes, 0);
598
- const rate = totalCalls > 0 ? Math.round((totalSuccess / totalCalls) * 100) : 0;
599
-
600
- container.innerHTML = `
601
- <div class="stats-grid" style="grid-template-columns:repeat(3,1fr); margin-bottom:24px;">
602
- <div class="stat-card">
603
- <div class="label">Total Calls</div>
604
- <div class="value">${totalCalls}</div>
605
- </div>
606
- <div class="stat-card">
607
- <div class="label">Success Rate</div>
608
- <div class="value">${rate}%</div>
609
- </div>
610
- <div class="stat-card">
611
- <div class="label">Unique Actions</div>
612
- <div class="value">${data.summary.length}</div>
613
- </div>
614
- </div>
615
- <div class="table-wrapper">
616
- <div class="table-header"><h3 style="font-size:1rem;">Action Breakdown</h3></div>
617
- <table>
618
- <thead><tr><th>Action</th><th>Type</th><th>Calls</th><th>Successes</th><th>Rate</th></tr></thead>
619
- <tbody>
620
- ${data.summary.map(a => `
621
- <tr>
622
- <td><strong style="color:var(--text-primary);">${esc(a.action_name)}</strong></td>
623
- <td><span class="badge badge-free">${esc(a.trigger_type || '—')}</span></td>
624
- <td>${a.count}</td>
625
- <td>${a.successes}</td>
626
- <td>${a.count > 0 ? Math.round((a.successes / a.count) * 100) : 0}%</td>
627
- </tr>
628
- `).join('')}
629
- </tbody>
630
- </table>
631
- </div>`;
632
- } catch (err) {
633
- container.innerHTML = '<div style="text-align:center; padding:60px 0; color:var(--accent-red);">Failed to load analytics.</div>';
634
- }
635
- }
636
-
637
- // ─── Modal Helpers ──────────────────────────────────────────────────
638
- function openModal(id) { document.getElementById(id).classList.add('active'); }
639
- function closeModal(id) { document.getElementById(id).classList.remove('active'); }
640
-
641
- // ─── Utils ──────────────────────────────────────────────────────────
642
- function esc(str) {
643
- if (!str) return '';
644
- const d = document.createElement('div');
645
- d.textContent = str;
646
- return d.innerHTML;
647
- }
648
-
649
- // ─── Billing ─────────────────────────────────────────────────────────
650
- async function loadBilling() {
651
- try {
652
- const sRes = await fetch(`${API}/sites`, { headers: headers() });
653
- const sData = await sRes.json();
654
- const mySites = sData.sites || [];
655
- const topTier = mySites.reduce((best, s) => {
656
- const order = { enterprise: 4, pro: 3, starter: 2, free: 1 };
657
- return (order[s.tier] || 0) > (order[best] || 0) ? s.tier : best;
658
- }, 'free');
659
- document.getElementById('billingPlan').textContent = topTier.charAt(0).toUpperCase() + topTier.slice(1);
660
- document.getElementById('billingStatus').textContent = topTier !== 'free' ? '✅ Active' : 'Free Tier';
661
- } catch (err) { console.error(err); }
662
- }
663
-
664
- async function startCheckout(tier) {
665
- try {
666
- const siteId = sites.length > 0 ? sites[0].id : null;
667
- if (!siteId) { alert('Please add a site first before subscribing.'); return; }
668
- const res = await fetch('/api/billing/checkout', {
669
- method: 'POST',
670
- headers: headers(),
671
- body: JSON.stringify({ tier, siteId })
672
- });
673
- const data = await res.json();
674
- if (data.url) {
675
- window.location.href = data.url;
676
- } else {
677
- alert(data.error || 'Failed to start checkout. Please ensure Stripe is configured.');
678
- }
679
- } catch (err) { alert('Connection error'); }
680
- }
681
-
682
- async function openBillingPortal() {
683
- try {
684
- const res = await fetch('/api/billing/portal', {
685
- method: 'POST',
686
- headers: headers()
687
- });
688
- const data = await res.json();
689
- if (data.url) {
690
- window.location.href = data.url;
691
- } else {
692
- alert(data.error || 'Could not open billing portal.');
693
- }
694
- } catch (err) { alert('Connection error'); }
695
- }
696
-
697
- // ─── View toggling style ────────────────────────────────────────────
698
- const style = document.createElement('style');
699
- style.textContent = '.view { display: none; } .view.active { display: block; }';
700
- document.head.appendChild(style);
701
-
702
- // ─── Start ──────────────────────────────────────────────────────────
703
- init();
704
- </script>
705
- <script src="/js/cookie-consent.js?v=3.0.1"></script>
706
- </body>
707
- </html>
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Dashboard — Web Agent Bridge</title>
7
+ <script>
8
+ (function () {
9
+ try {
10
+ if (!localStorage.getItem('wab_token')) {
11
+ window.location.replace('/login?next=' + encodeURIComponent(location.pathname || '/dashboard'));
12
+ }
13
+ } catch (e) {
14
+ window.location.replace('/login?next=/dashboard');
15
+ }
16
+ })();
17
+ </script>
18
+ <link rel="preconnect" href="https://fonts.googleapis.com">
19
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
20
+ <style>body{background:#0a0e1a;color:#f0f4ff;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;margin:0;min-height:100vh}</style>
21
+ <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
22
+ <noscript><link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"></noscript>
23
+ <link rel="stylesheet" href="/css/styles.css?v=3.0.1">
24
+ </head>
25
+ <body>
26
+ <div class="dashboard">
27
+
28
+ <!-- ═══════════ SIDEBAR ═══════════ -->
29
+ <aside class="sidebar">
30
+ <div class="sidebar-brand">
31
+ <a href="/" class="navbar-brand">
32
+ <div class="brand-icon">⚡</div>
33
+ <span>WAB</span>
34
+ </a>
35
+ </div>
36
+ <nav class="sidebar-nav">
37
+ <a href="#" class="active" data-view="overview">📊 Overview</a>
38
+ <a href="#" data-view="sites">🌐 My Sites</a>
39
+ <a href="#" data-view="analytics">📈 Analytics</a>
40
+ <a href="/providers">🔗 DNS Providers</a>
41
+ <a href="/dashboard/shieldlink">🔗 ShieldLink</a>
42
+ <a href="#" data-view="billing">💳 Billing</a>
43
+ <a href="#" data-view="settings">⚙️ Settings</a>
44
+ <a href="/docs" style="margin-top:20px;">📖 Documentation</a>
45
+ </nav>
46
+ <div class="sidebar-footer">
47
+ <div style="font-size:0.85rem; color:var(--text-muted); margin-bottom:8px;" id="userName"></div>
48
+ <button class="btn btn-ghost btn-sm" onclick="logout()" style="width:100%; justify-content:flex-start;">🚪 Sign Out</button>
49
+ </div>
50
+ </aside>
51
+
52
+ <!-- ═══════════ MAIN CONTENT ═══════════ -->
53
+ <main class="main-content">
54
+
55
+ <!-- ── Overview View ── -->
56
+ <div id="view-overview" class="view active">
57
+ <div class="page-header">
58
+ <h1>Dashboard</h1>
59
+ <button class="btn btn-primary btn-sm" onclick="showAddSiteModal()">+ Add Site</button>
60
+ </div>
61
+
62
+ <div class="stats-grid">
63
+ <div class="stat-card">
64
+ <div class="label">Total Sites</div>
65
+ <div class="value" id="statSites">0</div>
66
+ </div>
67
+ <div class="stat-card">
68
+ <div class="label">Total Actions</div>
69
+ <div class="value" id="statActions">—</div>
70
+ </div>
71
+ <div class="stat-card">
72
+ <div class="label">Active Tier</div>
73
+ <div class="value" id="statTier" style="font-size:1.5rem;">Free</div>
74
+ </div>
75
+ <div class="stat-card">
76
+ <div class="label">API Calls (30d)</div>
77
+ <div class="value" id="statCalls">0</div>
78
+ </div>
79
+ </div>
80
+
81
+ <div class="table-wrapper">
82
+ <div class="table-header">
83
+ <h3 style="font-size:1rem;">Your Sites</h3>
84
+ </div>
85
+ <table>
86
+ <thead>
87
+ <tr>
88
+ <th>Name</th>
89
+ <th>Domain</th>
90
+ <th>Tier</th>
91
+ <th>License Key</th>
92
+ <th>Actions</th>
93
+ </tr>
94
+ </thead>
95
+ <tbody id="sitesTableBody">
96
+ <tr><td colspan="5" style="text-align:center; padding:40px; color:var(--text-muted);">No sites yet. Click "Add Site" to get started.</td></tr>
97
+ </tbody>
98
+ </table>
99
+ </div>
100
+ </div>
101
+
102
+ <!-- ── Sites View ── -->
103
+ <div id="view-sites" class="view">
104
+ <div class="page-header">
105
+ <h1>My Sites</h1>
106
+ <button class="btn btn-primary btn-sm" onclick="showAddSiteModal()">+ Add Site</button>
107
+ </div>
108
+ <div id="sitesGrid" class="grid-2"></div>
109
+ </div>
110
+
111
+ <!-- ── Analytics View ── -->
112
+ <div id="view-analytics" class="view">
113
+ <div class="page-header">
114
+ <h1>Analytics</h1>
115
+ <select class="form-input" style="width:auto;" id="analyticsSiteSelect" onchange="loadAnalytics()">
116
+ <option value="">Select a site</option>
117
+ </select>
118
+ </div>
119
+ <div id="analyticsContent">
120
+ <div style="text-align:center; padding:80px 0; color:var(--text-muted);">
121
+ Select a site to view analytics data.
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- ── Billing View ── -->
127
+ <div id="view-billing" class="view">
128
+ <div class="page-header">
129
+ <h1>Billing & Subscription</h1>
130
+ </div>
131
+
132
+ <div class="stats-grid" style="grid-template-columns:repeat(3,1fr);margin-bottom:24px;">
133
+ <div class="stat-card">
134
+ <div class="label">Current Plan</div>
135
+ <div class="value" id="billingPlan" style="font-size:1.4rem;">Free</div>
136
+ </div>
137
+ <div class="stat-card">
138
+ <div class="label">Status</div>
139
+ <div class="value" id="billingStatus" style="font-size:1.2rem;">—</div>
140
+ </div>
141
+ <div class="stat-card">
142
+ <div class="label">Payments</div>
143
+ <div class="value" id="billingPayments">0</div>
144
+ </div>
145
+ </div>
146
+
147
+ <!-- Pricing Cards -->
148
+ <h3 style="margin-bottom:16px;">Upgrade Your Plan</h3>
149
+ <div class="grid-3" style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:32px;" id="pricingCards">
150
+ <div class="card" style="border:1px solid var(--border-color);text-align:center;padding:32px 24px;">
151
+ <h3 style="margin-bottom:8px;">Pro</h3>
152
+ <div style="font-size:2rem;font-weight:700;margin:16px 0;">€10<span style="font-size:0.9rem;font-weight:400;color:var(--text-muted);">/mo</span></div>
153
+ <ul style="text-align:left;list-style:none;padding:0;margin:0 0 24px;font-size:0.9rem;color:var(--text-secondary);">
154
+ <li style="padding:6px 0;">✓ Up to 25 agents</li>
155
+ <li style="padding:6px 0;">✓ 2,000 tasks/day · 120 req/min</li>
156
+ <li style="padding:6px 0;">✓ Workspace + Replay engine</li>
157
+ <li style="padding:6px 0;">✓ Advanced analytics + data extraction</li>
158
+ <li style="padding:6px 0;">✓ Email support</li>
159
+ </ul>
160
+ <button class="btn btn-secondary" onclick="startCheckout('pro')" style="width:100%;">Select Pro</button>
161
+ </div>
162
+ <div class="card" style="border:2px solid var(--accent-blue);text-align:center;padding:32px 24px;position:relative;">
163
+ <span style="position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--gradient-primary);padding:4px 16px;border-radius:12px;font-size:0.75rem;font-weight:600;">POPULAR</span>
164
+ <h3 style="margin-bottom:8px;">Business</h3>
165
+ <div style="font-size:2rem;font-weight:700;margin:16px 0;">€29<span style="font-size:0.9rem;font-weight:400;color:var(--text-muted);">/mo</span></div>
166
+ <ul style="text-align:left;list-style:none;padding:0;margin:0 0 24px;font-size:0.9rem;color:var(--text-secondary);">
167
+ <li style="padding:6px 0;">✓ Up to 100 agents</li>
168
+ <li style="padding:6px 0;">✓ 20,000 tasks/day · 300 req/min</li>
169
+ <li style="padding:6px 0;">✓ Hosted runtime + marketplace</li>
170
+ <li style="padding:6px 0;">✓ Vision · Swarm · Audit logs</li>
171
+ <li style="padding:6px 0;">✓ Priority support</li>
172
+ </ul>
173
+ <button class="btn btn-primary" onclick="startCheckout('business')" style="width:100%;">Select Business</button>
174
+ </div>
175
+ <div class="card" style="border:1px solid var(--border-color);text-align:center;padding:32px 24px;">
176
+ <h3 style="margin-bottom:8px;">Enterprise</h3>
177
+ <div style="font-size:2rem;font-weight:700;margin:16px 0;">Custom</div>
178
+ <ul style="text-align:left;list-style:none;padding:0;margin:0 0 24px;font-size:0.9rem;color:var(--text-secondary);">
179
+ <li style="padding:6px 0;">✓ Unlimited agents &amp; tasks</li>
180
+ <li style="padding:6px 0;">✓ Dedicated infrastructure</li>
181
+ <li style="padding:6px 0;">✓ Enterprise security + SSO</li>
182
+ <li style="padding:6px 0;">✓ Contractual SLA</li>
183
+ <li style="padding:6px 0;">✓ Custom development</li>
184
+ </ul>
185
+ <a href="mailto:sales@webagentbridge.com" class="btn btn-secondary" style="width:100%;display:inline-block;text-align:center;text-decoration:none;">Contact Sales</a>
186
+ </div>
187
+ </div>
188
+
189
+ <div style="display:flex;gap:12px;">
190
+ <button class="btn btn-secondary" onclick="openBillingPortal()">📋 Manage Subscription</button>
191
+ </div>
192
+
193
+ <!-- Payment History -->
194
+ <h3 style="margin:32px 0 16px;">Payment History</h3>
195
+ <div class="table-wrapper">
196
+ <table>
197
+ <thead><tr><th>Amount</th><th>Status</th><th>Description</th><th>Date</th></tr></thead>
198
+ <tbody id="paymentHistory">
199
+ <tr><td colspan="4" style="text-align:center;padding:40px;color:var(--text-muted);">No payments yet</td></tr>
200
+ </tbody>
201
+ </table>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- ── Settings View ── -->
206
+ <div id="view-settings" class="view">
207
+ <div class="page-header">
208
+ <h1>Account Settings</h1>
209
+ </div>
210
+ <div class="card" style="max-width:600px;">
211
+ <h3 style="margin-bottom:20px;">Profile</h3>
212
+ <div class="form-group">
213
+ <label>Name</label>
214
+ <input type="text" class="form-input" id="settingsName" readonly>
215
+ </div>
216
+ <div class="form-group">
217
+ <label>Email</label>
218
+ <input type="email" class="form-input" id="settingsEmail" readonly>
219
+ </div>
220
+ <div class="form-group">
221
+ <label>Company</label>
222
+ <input type="text" class="form-input" id="settingsCompany" readonly>
223
+ </div>
224
+ </div>
225
+ </div>
226
+
227
+ </main>
228
+ </div>
229
+
230
+ <!-- ═══════════ ADD SITE MODAL ═══════════ -->
231
+ <div class="modal-overlay" id="addSiteModal">
232
+ <div class="modal">
233
+ <div class="modal-header">
234
+ <h2>Add New Site</h2>
235
+ <button class="modal-close" onclick="closeModal('addSiteModal')">&times;</button>
236
+ </div>
237
+ <div class="modal-body">
238
+ <div class="alert alert-error" id="addSiteError"></div>
239
+ <form id="addSiteForm">
240
+ <div class="form-group">
241
+ <label for="siteName">Site Name</label>
242
+ <input type="text" id="siteName" class="form-input" placeholder="My Website" required>
243
+ </div>
244
+ <div class="form-group">
245
+ <label for="siteDomain">Domain</label>
246
+ <input type="text" id="siteDomain" class="form-input" placeholder="example.com" required>
247
+ </div>
248
+ <div class="form-group">
249
+ <label for="siteDescription">Description</label>
250
+ <textarea id="siteDescription" class="form-input" placeholder="Brief description of your site"></textarea>
251
+ </div>
252
+ </form>
253
+ </div>
254
+ <div class="modal-footer">
255
+ <button class="btn btn-secondary" onclick="closeModal('addSiteModal')">Cancel</button>
256
+ <button class="btn btn-primary" onclick="addSite()">Add Site</button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <!-- ═══════════ SITE DETAIL MODAL ═══════════ -->
262
+ <div class="modal-overlay" id="siteDetailModal">
263
+ <div class="modal" style="max-width:700px;">
264
+ <div class="modal-header">
265
+ <h2 id="detailSiteName">Site Details</h2>
266
+ <button class="modal-close" onclick="closeModal('siteDetailModal')">&times;</button>
267
+ </div>
268
+ <div class="modal-body">
269
+ <div class="tabs">
270
+ <button class="tab active" onclick="switchDetailTab('snippet')">Install Snippet</button>
271
+ <button class="tab" onclick="switchDetailTab('config')">Configuration</button>
272
+ <button class="tab" onclick="switchDetailTab('info')">Info</button>
273
+ </div>
274
+
275
+ <div class="tab-content active" id="tab-snippet">
276
+ <p style="color:var(--text-secondary); margin-bottom:16px;">Add this code to your website's <code>&lt;head&gt;</code> tag:</p>
277
+ <div class="snippet-box">
278
+ <button class="copy-btn" onclick="copySnippet()">Copy</button>
279
+ <pre id="snippetCode"></pre>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="tab-content" id="tab-config">
284
+ <h4 style="margin-bottom:16px;">Agent Permissions</h4>
285
+ <div id="configToggles"></div>
286
+ <div style="margin-top:20px;">
287
+ <button class="btn btn-primary btn-sm" onclick="saveConfig()">Save Changes</button>
288
+ </div>
289
+ </div>
290
+
291
+ <div class="tab-content" id="tab-info">
292
+ <div class="form-group">
293
+ <label>License Key</label>
294
+ <div class="snippet-box"><pre id="detailLicense"></pre></div>
295
+ </div>
296
+ <div class="form-group">
297
+ <label>API Key</label>
298
+ <div class="snippet-box"><pre id="detailApiKey"></pre></div>
299
+ </div>
300
+ <div class="form-group">
301
+ <label>Tier</label>
302
+ <div id="detailTier"></div>
303
+ </div>
304
+ <div class="form-group">
305
+ <label>Created</label>
306
+ <div id="detailCreated" style="color:var(--text-secondary);"></div>
307
+ </div>
308
+ <div style="margin-top:24px; padding-top:20px; border-top:1px solid var(--border-color);">
309
+ <button class="btn btn-danger btn-sm" onclick="deleteSiteConfirm()">Delete Site</button>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <script>
317
+ // ─── State ──────────────────────────────────────────────────────────
318
+ const API = '/api';
319
+ let token = localStorage.getItem('wab_token');
320
+ let user = JSON.parse(localStorage.getItem('wab_user') || 'null');
321
+ let sites = [];
322
+ let currentSite = null;
323
+ let currentConfig = null;
324
+
325
+ if (!token) window.location.href = '/login';
326
+
327
+ function headers() {
328
+ return { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` };
329
+ }
330
+
331
+ function logout() {
332
+ localStorage.removeItem('wab_token');
333
+ localStorage.removeItem('wab_user');
334
+ window.location.href = '/login';
335
+ }
336
+
337
+ // ─── Navigation ─────────────────────────────────────────────────────
338
+ document.querySelectorAll('.sidebar-nav a[data-view]').forEach(link => {
339
+ link.addEventListener('click', (e) => {
340
+ e.preventDefault();
341
+ const view = link.dataset.view;
342
+ document.querySelectorAll('.sidebar-nav a').forEach(a => a.classList.remove('active'));
343
+ link.classList.add('active');
344
+ document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
345
+ const el = document.getElementById(`view-${view}`);
346
+ if (el) el.classList.add('active');
347
+ if (view === 'billing') loadBilling();
348
+ });
349
+ });
350
+
351
+ // ─── Init ───────────────────────────────────────────────────────────
352
+ async function init() {
353
+ if (user) {
354
+ document.getElementById('userName').textContent = user.name || user.email;
355
+ document.getElementById('settingsName').value = user.name || '';
356
+ document.getElementById('settingsEmail').value = user.email || '';
357
+ document.getElementById('settingsCompany').value = user.company || '';
358
+ }
359
+ await loadSites();
360
+ }
361
+
362
+ // ─── Load Sites ─────────────────────────────────────────────────────
363
+ async function loadSites() {
364
+ try {
365
+ const res = await fetch(`${API}/sites`, { headers: headers() });
366
+ if (res.status === 401 || res.status === 403) return logout();
367
+ const data = await res.json();
368
+ sites = data.sites || [];
369
+ renderOverview();
370
+ renderSitesGrid();
371
+ renderAnalyticsSelect();
372
+ } catch (err) {
373
+ console.error('Failed to load sites:', err);
374
+ }
375
+ }
376
+
377
+ function renderOverview() {
378
+ document.getElementById('statSites').textContent = sites.length;
379
+ const topTier = sites.reduce((best, s) => {
380
+ const order = { enterprise: 5, business: 4, pro: 3, starter: 2, free: 1 };
381
+ return (order[s.tier] || 0) > (order[best] || 0) ? s.tier : best;
382
+ }, 'free');
383
+ document.getElementById('statTier').textContent = topTier.charAt(0).toUpperCase() + topTier.slice(1);
384
+
385
+ const tbody = document.getElementById('sitesTableBody');
386
+ if (sites.length === 0) {
387
+ tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; padding:40px; color:var(--text-muted);">No sites yet. Click "Add Site" to get started.</td></tr>';
388
+ return;
389
+ }
390
+
391
+ tbody.innerHTML = sites.map(s => `
392
+ <tr>
393
+ <td><strong style="color:var(--text-primary);">${esc(s.name)}</strong></td>
394
+ <td><span class="mono" style="font-size:0.85rem;">${esc(s.domain)}</span></td>
395
+ <td><span class="badge badge-${s.tier}">${s.tier}</span></td>
396
+ <td><span class="mono" style="font-size:0.8rem; color:var(--text-muted);">${esc(s.license_key)}</span></td>
397
+ <td>
398
+ <button class="btn btn-secondary btn-sm" onclick="openSiteDetail('${s.id}')">Manage</button>
399
+ </td>
400
+ </tr>
401
+ `).join('');
402
+ }
403
+
404
+ function renderSitesGrid() {
405
+ const grid = document.getElementById('sitesGrid');
406
+ if (sites.length === 0) {
407
+ grid.innerHTML = '<div style="grid-column:1/-1; text-align:center; padding:60px; color:var(--text-muted);">No sites yet.</div>';
408
+ return;
409
+ }
410
+
411
+ grid.innerHTML = sites.map(s => `
412
+ <div class="card" style="cursor:pointer;" onclick="openSiteDetail('${s.id}')">
413
+ <div style="display:flex; justify-content:space-between; align-items:start; margin-bottom:16px;">
414
+ <h3 style="font-size:1.1rem;">${esc(s.name)}</h3>
415
+ <span class="badge badge-${s.tier}">${s.tier}</span>
416
+ </div>
417
+ <p style="color:var(--text-muted); font-size:0.85rem; font-family:var(--font-mono);">${esc(s.domain)}</p>
418
+ ${s.description ? `<p style="margin-top:8px; font-size:0.9rem;">${esc(s.description)}</p>` : ''}
419
+ <div style="margin-top:16px; padding-top:12px; border-top:1px solid var(--border-color); display:flex; justify-content:space-between;">
420
+ <span style="font-size:0.8rem; color:var(--text-muted);">Key: ${esc(s.license_key)}</span>
421
+ <span class="badge badge-active">Active</span>
422
+ </div>
423
+ </div>
424
+ `).join('');
425
+ }
426
+
427
+ function renderAnalyticsSelect() {
428
+ const sel = document.getElementById('analyticsSiteSelect');
429
+ sel.innerHTML = '<option value="">Select a site</option>' +
430
+ sites.map(s => `<option value="${s.id}">${esc(s.name)} (${esc(s.domain)})</option>`).join('');
431
+ }
432
+
433
+ // ─── Add Site ───────────────────────────────────────────────────────
434
+ function showAddSiteModal() { openModal('addSiteModal'); }
435
+
436
+ async function addSite() {
437
+ const name = document.getElementById('siteName').value.trim();
438
+ const domain = document.getElementById('siteDomain').value.trim();
439
+ const description = document.getElementById('siteDescription').value.trim();
440
+ const errEl = document.getElementById('addSiteError');
441
+ errEl.style.display = 'none';
442
+
443
+ if (!name || !domain) {
444
+ errEl.textContent = 'Name and domain are required';
445
+ errEl.style.display = 'block';
446
+ return;
447
+ }
448
+
449
+ try {
450
+ const res = await fetch(`${API}/sites`, {
451
+ method: 'POST',
452
+ headers: headers(),
453
+ body: JSON.stringify({ name, domain, description })
454
+ });
455
+ const data = await res.json();
456
+
457
+ if (!res.ok) {
458
+ errEl.textContent = data.error || 'Failed to add site';
459
+ errEl.style.display = 'block';
460
+ return;
461
+ }
462
+
463
+ closeModal('addSiteModal');
464
+ document.getElementById('addSiteForm').reset();
465
+ await loadSites();
466
+ openSiteDetail(data.site.id);
467
+ } catch (err) {
468
+ errEl.textContent = 'Connection error';
469
+ errEl.style.display = 'block';
470
+ }
471
+ }
472
+
473
+ // ─── Site Detail ────────────────────────────────────────────────────
474
+ async function openSiteDetail(siteId) {
475
+ try {
476
+ const res = await fetch(`${API}/sites/${siteId}`, { headers: headers() });
477
+ const data = await res.json();
478
+ currentSite = data.site;
479
+ currentConfig = currentSite.config || {};
480
+
481
+ document.getElementById('detailSiteName').textContent = currentSite.name;
482
+ document.getElementById('detailLicense').textContent = currentSite.license_key;
483
+ document.getElementById('detailApiKey').textContent = currentSite.api_key || '—';
484
+ document.getElementById('detailTier').innerHTML = `<span class="badge badge-${currentSite.tier}">${currentSite.tier}</span>`;
485
+ document.getElementById('detailCreated').textContent = new Date(currentSite.created_at).toLocaleDateString();
486
+
487
+ const snippetRes = await fetch(`${API}/sites/${siteId}/snippet`, { headers: headers() });
488
+ const snippetData = await snippetRes.json();
489
+ document.getElementById('snippetCode').textContent = snippetData.snippet;
490
+
491
+ renderConfigToggles();
492
+ switchDetailTab('snippet');
493
+ openModal('siteDetailModal');
494
+ } catch (err) {
495
+ console.error('Failed to load site:', err);
496
+ }
497
+ }
498
+
499
+ function renderConfigToggles() {
500
+ const perms = currentConfig.agentPermissions || {};
501
+ const container = document.getElementById('configToggles');
502
+
503
+ const permLabels = {
504
+ readContent: { label: 'Read Content', desc: 'Allow agents to read page text' },
505
+ click: { label: 'Click Elements', desc: 'Allow agents to click buttons and links' },
506
+ fillForms: { label: 'Fill Forms', desc: 'Allow agents to fill and submit forms' },
507
+ scroll: { label: 'Scroll', desc: 'Allow agents to scroll the page' },
508
+ navigate: { label: 'Navigate', desc: 'Allow agents to navigate between pages' },
509
+ apiAccess: { label: 'API Access', desc: 'Allow agents to call internal APIs (Pro+)' },
510
+ automatedLogin: { label: 'Automated Login', desc: 'Allow agents to perform login (Pro+)' },
511
+ extractData: { label: 'Extract Data', desc: 'Allow agents to extract structured data (Pro+)' }
512
+ };
513
+
514
+ container.innerHTML = Object.entries(permLabels).map(([key, info]) => `
515
+ <div class="toggle-wrap">
516
+ <div class="toggle-label">
517
+ ${info.label}
518
+ <small>${info.desc}</small>
519
+ </div>
520
+ <label class="toggle">
521
+ <input type="checkbox" data-perm="${key}" ${perms[key] ? 'checked' : ''}>
522
+ <span class="toggle-slider"></span>
523
+ </label>
524
+ </div>
525
+ `).join('');
526
+ }
527
+
528
+ async function saveConfig() {
529
+ const toggles = document.querySelectorAll('#configToggles input[data-perm]');
530
+ const agentPermissions = {};
531
+ toggles.forEach(t => { agentPermissions[t.dataset.perm] = t.checked; });
532
+
533
+ currentConfig.agentPermissions = agentPermissions;
534
+
535
+ try {
536
+ await fetch(`${API}/sites/${currentSite.id}/config`, {
537
+ method: 'PUT',
538
+ headers: headers(),
539
+ body: JSON.stringify({ config: currentConfig })
540
+ });
541
+ await loadSites();
542
+ alert('Configuration saved!');
543
+ } catch (err) {
544
+ alert('Failed to save configuration');
545
+ }
546
+ }
547
+
548
+ async function deleteSiteConfirm() {
549
+ if (!confirm(`Are you sure you want to delete "${currentSite.name}"? This cannot be undone.`)) return;
550
+
551
+ try {
552
+ await fetch(`${API}/sites/${currentSite.id}`, { method: 'DELETE', headers: headers() });
553
+ closeModal('siteDetailModal');
554
+ await loadSites();
555
+ } catch (err) {
556
+ alert('Failed to delete site');
557
+ }
558
+ }
559
+
560
+ function switchDetailTab(tab) {
561
+ document.querySelectorAll('#siteDetailModal .tab').forEach(t => t.classList.remove('active'));
562
+ document.querySelectorAll('#siteDetailModal .tab-content').forEach(c => c.classList.remove('active'));
563
+ document.querySelector(`#siteDetailModal .tab[onclick*="${tab}"]`).classList.add('active');
564
+ document.getElementById(`tab-${tab}`).classList.add('active');
565
+ }
566
+
567
+ function copySnippet() {
568
+ const text = document.getElementById('snippetCode').textContent;
569
+ navigator.clipboard.writeText(text).then(() => {
570
+ const btn = document.querySelector('#tab-snippet .copy-btn');
571
+ btn.textContent = 'Copied!';
572
+ setTimeout(() => { btn.textContent = 'Copy'; }, 2000);
573
+ });
574
+ }
575
+
576
+ // ─── Analytics ──────────────────────────────────────────────────────
577
+ async function loadAnalytics() {
578
+ const siteId = document.getElementById('analyticsSiteSelect').value;
579
+ const container = document.getElementById('analyticsContent');
580
+
581
+ if (!siteId) {
582
+ container.innerHTML = '<div style="text-align:center; padding:80px 0; color:var(--text-muted);">Select a site to view analytics data.</div>';
583
+ return;
584
+ }
585
+
586
+ try {
587
+ const res = await fetch(`${API}/sites/${siteId}/analytics?days=30`, { headers: headers() });
588
+ const data = await res.json();
589
+
590
+ if (!data.summary || data.summary.length === 0) {
591
+ container.innerHTML = `
592
+ <div style="text-align:center; padding:60px 0; color:var(--text-muted);">
593
+ <div style="font-size:2.5rem; margin-bottom:16px;">📊</div>
594
+ <p>No analytics data yet.</p>
595
+ <p style="font-size:0.85rem; margin-top:8px;">Analytics will appear once AI agents start interacting with your site.</p>
596
+ </div>`;
597
+ return;
598
+ }
599
+
600
+ const totalCalls = data.summary.reduce((s, a) => s + a.count, 0);
601
+ const totalSuccess = data.summary.reduce((s, a) => s + a.successes, 0);
602
+ const rate = totalCalls > 0 ? Math.round((totalSuccess / totalCalls) * 100) : 0;
603
+
604
+ container.innerHTML = `
605
+ <div class="stats-grid" style="grid-template-columns:repeat(3,1fr); margin-bottom:24px;">
606
+ <div class="stat-card">
607
+ <div class="label">Total Calls</div>
608
+ <div class="value">${totalCalls}</div>
609
+ </div>
610
+ <div class="stat-card">
611
+ <div class="label">Success Rate</div>
612
+ <div class="value">${rate}%</div>
613
+ </div>
614
+ <div class="stat-card">
615
+ <div class="label">Unique Actions</div>
616
+ <div class="value">${data.summary.length}</div>
617
+ </div>
618
+ </div>
619
+ <div class="table-wrapper">
620
+ <div class="table-header"><h3 style="font-size:1rem;">Action Breakdown</h3></div>
621
+ <table>
622
+ <thead><tr><th>Action</th><th>Type</th><th>Calls</th><th>Successes</th><th>Rate</th></tr></thead>
623
+ <tbody>
624
+ ${data.summary.map(a => `
625
+ <tr>
626
+ <td><strong style="color:var(--text-primary);">${esc(a.action_name)}</strong></td>
627
+ <td><span class="badge badge-free">${esc(a.trigger_type || '—')}</span></td>
628
+ <td>${a.count}</td>
629
+ <td>${a.successes}</td>
630
+ <td>${a.count > 0 ? Math.round((a.successes / a.count) * 100) : 0}%</td>
631
+ </tr>
632
+ `).join('')}
633
+ </tbody>
634
+ </table>
635
+ </div>`;
636
+ } catch (err) {
637
+ container.innerHTML = '<div style="text-align:center; padding:60px 0; color:var(--accent-red);">Failed to load analytics.</div>';
638
+ }
639
+ }
640
+
641
+ // ─── Modal Helpers ──────────────────────────────────────────────────
642
+ function openModal(id) { document.getElementById(id).classList.add('active'); }
643
+ function closeModal(id) { document.getElementById(id).classList.remove('active'); }
644
+
645
+ // ─── Utils ──────────────────────────────────────────────────────────
646
+ function esc(str) {
647
+ if (!str) return '';
648
+ const d = document.createElement('div');
649
+ d.textContent = str;
650
+ return d.innerHTML;
651
+ }
652
+
653
+ // ─── Billing ─────────────────────────────────────────────────────────
654
+ async function loadBilling() {
655
+ try {
656
+ const sRes = await fetch(`${API}/sites`, { headers: headers() });
657
+ const sData = await sRes.json();
658
+ const mySites = sData.sites || [];
659
+ const topTier = mySites.reduce((best, s) => {
660
+ const order = { enterprise: 5, business: 4, pro: 3, starter: 2, free: 1 };
661
+ return (order[s.tier] || 0) > (order[best] || 0) ? s.tier : best;
662
+ }, 'free');
663
+ document.getElementById('billingPlan').textContent = topTier.charAt(0).toUpperCase() + topTier.slice(1);
664
+ document.getElementById('billingStatus').textContent = topTier !== 'free' ? '✅ Active' : 'Free Tier';
665
+ } catch (err) { console.error(err); }
666
+ }
667
+
668
+ async function startCheckout(tier) {
669
+ try {
670
+ const siteId = sites.length > 0 ? sites[0].id : null;
671
+ if (!siteId) { alert('Please add a site first before subscribing.'); return; }
672
+ const res = await fetch('/api/billing/checkout', {
673
+ method: 'POST',
674
+ headers: headers(),
675
+ body: JSON.stringify({ tier, siteId })
676
+ });
677
+ const data = await res.json();
678
+ if (data.url) {
679
+ window.location.href = data.url;
680
+ } else {
681
+ alert(data.error || 'Failed to start checkout. Please ensure Stripe is configured.');
682
+ }
683
+ } catch (err) { alert('Connection error'); }
684
+ }
685
+
686
+ async function openBillingPortal() {
687
+ try {
688
+ const res = await fetch('/api/billing/portal', {
689
+ method: 'POST',
690
+ headers: headers()
691
+ });
692
+ const data = await res.json();
693
+ if (data.url) {
694
+ window.location.href = data.url;
695
+ } else {
696
+ alert(data.error || 'Could not open billing portal.');
697
+ }
698
+ } catch (err) { alert('Connection error'); }
699
+ }
700
+
701
+ // ─── View toggling style ────────────────────────────────────────────
702
+ const style = document.createElement('style');
703
+ style.textContent = '.view { display: none; } .view.active { display: block; }';
704
+ document.head.appendChild(style);
705
+
706
+ // ─── Start ──────────────────────────────────────────────────────────
707
+ init();
708
+ </script>
709
+ <script src="/js/cookie-consent.js?v=3.0.1"></script>
710
+ </body>
711
+ </html>