web-agent-bridge 3.4.0 → 3.8.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (310) hide show
  1. package/LICENSE +84 -84
  2. package/README.ar.md +1563 -1304
  3. package/README.md +137 -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/azure-dns-integration.html +289 -289
  41. package/public/browser.html +486 -486
  42. package/public/cloudflare-integration.html +380 -380
  43. package/public/commander-dashboard.html +243 -243
  44. package/public/cookies.html +210 -210
  45. package/public/cpanel-integration.html +398 -398
  46. package/public/css/agent-workspace.css +1713 -1713
  47. package/public/css/premium.css +317 -317
  48. package/public/css/styles.css +1401 -1263
  49. package/public/dashboard-shieldlink.html +295 -0
  50. package/public/dashboard.html +711 -707
  51. package/public/dns.html +436 -436
  52. package/public/docs.html +588 -588
  53. package/public/enterprise-mesh.ar.html +80 -0
  54. package/public/enterprise-mesh.html +81 -0
  55. package/public/feed.xml +89 -89
  56. package/public/gcp-dns-integration.html +318 -318
  57. package/public/governance.ar.html +70 -0
  58. package/public/governance.html +69 -0
  59. package/public/growth.html +465 -465
  60. package/public/index.html +1372 -1266
  61. package/public/integrations.html +556 -556
  62. package/public/js/activate.js +449 -145
  63. package/public/js/agent-workspace.js +1740 -1740
  64. package/public/js/auth-nav.js +117 -65
  65. package/public/js/auth-redirect.js +12 -12
  66. package/public/js/cookie-consent.js +56 -56
  67. package/public/js/dns.js +438 -438
  68. package/public/js/wab-demo-page.js +721 -721
  69. package/public/js/ws-client.js +74 -74
  70. package/public/l-preview.html +242 -0
  71. package/public/llms-full.txt +360 -360
  72. package/public/llms.txt +125 -125
  73. package/public/login.html +85 -85
  74. package/public/mesh-dashboard.html +328 -328
  75. package/public/milestones.html +346 -0
  76. package/public/one-click.html +779 -0
  77. package/public/openapi.json +669 -669
  78. package/public/partners.ar.html +145 -0
  79. package/public/partners.html +143 -0
  80. package/public/phone-shield.html +281 -281
  81. package/public/plesk-integration.html +375 -375
  82. package/public/premium-dashboard.html +2489 -2489
  83. package/public/premium.html +793 -793
  84. package/public/privacy.html +297 -297
  85. package/public/provider-onboarding.html +172 -172
  86. package/public/provider-sandbox.html +134 -134
  87. package/public/providers.html +359 -359
  88. package/public/refusals.html +172 -0
  89. package/public/register.html +105 -105
  90. package/public/registrar-integrations.html +141 -141
  91. package/public/ring4.html +292 -0
  92. package/public/robots.txt +99 -99
  93. package/public/route53-integration.html +531 -531
  94. package/public/score.html +263 -0
  95. package/public/script/wab-consent.d.ts +36 -36
  96. package/public/script/wab-consent.js +104 -104
  97. package/public/script/wab-schema.js +131 -131
  98. package/public/script/wab.d.ts +108 -108
  99. package/public/script/wab.min.js +580 -580
  100. package/public/security.txt +8 -8
  101. package/public/shieldlink.html +244 -0
  102. package/public/shieldqr.html +231 -231
  103. package/public/sitemap.xml +13 -1
  104. package/public/terms.html +256 -256
  105. package/public/trust-graph-api.ar.html +92 -0
  106. package/public/trust-graph-api.html +91 -0
  107. package/public/wab-features.html +560 -0
  108. package/public/wab-trust.html +200 -200
  109. package/public/wab-truth.html +375 -0
  110. package/public/wab-vs-protocols.html +210 -210
  111. package/public/whitepaper.html +449 -449
  112. package/script/ai-agent-bridge.js +1754 -1754
  113. package/sdk/README.md +99 -99
  114. package/sdk/agent-mesh.js +449 -449
  115. package/sdk/auto-discovery.js +301 -288
  116. package/sdk/commander.js +262 -262
  117. package/sdk/governance.js +262 -262
  118. package/sdk/index.d.ts +464 -464
  119. package/sdk/index.js +649 -649
  120. package/sdk/multi-agent.js +318 -318
  121. package/sdk/safe-mode.js +221 -221
  122. package/sdk/safety-shield.js +219 -219
  123. package/sdk/schema-discovery.js +83 -83
  124. package/server/adapters/index.js +520 -520
  125. package/server/config/plans.js +412 -367
  126. package/server/config/secrets.js +102 -102
  127. package/server/control-plane/index.js +301 -301
  128. package/server/data-plane/index.js +354 -354
  129. package/server/index.js +790 -670
  130. package/server/llm/index.js +404 -404
  131. package/server/middleware/adminAuth.js +35 -35
  132. package/server/middleware/api-tier.js +170 -0
  133. package/server/middleware/auth.js +50 -50
  134. package/server/middleware/featureGate.js +88 -88
  135. package/server/middleware/rateLimits.js +100 -100
  136. package/server/middleware/sensitiveAction.js +157 -157
  137. package/server/middleware/wab-trust.js +141 -0
  138. package/server/migrations/001_add_analytics_indexes.sql +7 -7
  139. package/server/migrations/002_premium_features.sql +418 -418
  140. package/server/migrations/003_ads_integer_cents.sql +33 -33
  141. package/server/migrations/004_agent_os.sql +158 -158
  142. package/server/migrations/005_marketplace_metering.sql +126 -126
  143. package/server/migrations/006_growth_suite.sql +138 -0
  144. package/server/migrations/007_governance.sql +106 -106
  145. package/server/migrations/008_plans.sql +144 -144
  146. package/server/migrations/009_shieldqr.sql +30 -30
  147. package/server/migrations/010_extended_trust.sql +33 -33
  148. package/server/migrations/011_outreach.sql +47 -0
  149. package/server/migrations/012_shieldlink.sql +116 -0
  150. package/server/migrations/013_ct_monitor.sql +13 -0
  151. package/server/migrations/014_wab_advanced_features.sql +128 -0
  152. package/server/migrations/015_wab_truth_layer.sql +101 -0
  153. package/server/migrations/016_ring4_external_trust.sql +84 -0
  154. package/server/migrations/017_ring4_extensions.sql +69 -0
  155. package/server/migrations/018_commercial_foundations.sql +167 -0
  156. package/server/migrations/019_unify_tier_constraints.sql +133 -0
  157. package/server/models/adapters/index.js +33 -33
  158. package/server/models/adapters/mysql.js +183 -183
  159. package/server/models/adapters/postgresql.js +172 -172
  160. package/server/models/adapters/sqlite.js +7 -7
  161. package/server/models/db.js +740 -740
  162. package/server/observability/failure-analysis.js +337 -337
  163. package/server/observability/index.js +394 -394
  164. package/server/protocol/capabilities.js +223 -223
  165. package/server/protocol/index.js +243 -243
  166. package/server/protocol/schema.js +584 -584
  167. package/server/registry/certification.js +271 -271
  168. package/server/registry/index.js +326 -326
  169. package/server/routes/activate.js +478 -0
  170. package/server/routes/admin-outreach.js +239 -0
  171. package/server/routes/admin-plans.js +76 -76
  172. package/server/routes/admin-premium.js +674 -673
  173. package/server/routes/admin-shieldlink.js +137 -0
  174. package/server/routes/admin-shieldqr.js +90 -90
  175. package/server/routes/admin-trust-monitor.js +139 -83
  176. package/server/routes/admin.js +550 -549
  177. package/server/routes/adopt.js +61 -0
  178. package/server/routes/ads.js +130 -130
  179. package/server/routes/agent-workspace.js +540 -540
  180. package/server/routes/api-keys.js +127 -0
  181. package/server/routes/api.js +150 -150
  182. package/server/routes/auth.js +71 -71
  183. package/server/routes/billing.js +57 -57
  184. package/server/routes/commander.js +316 -316
  185. package/server/routes/customer-shieldlink.js +133 -0
  186. package/server/routes/demo-showcase.js +332 -332
  187. package/server/routes/demo-store.js +154 -154
  188. package/server/routes/diagnose.js +373 -0
  189. package/server/routes/discovery.js +2348 -2348
  190. package/server/routes/enterprise-mesh.js +170 -0
  191. package/server/routes/gateway.js +173 -173
  192. package/server/routes/governance-saas.js +203 -0
  193. package/server/routes/governance.js +208 -208
  194. package/server/routes/growth.js +1048 -0
  195. package/server/routes/intent.js +328 -0
  196. package/server/routes/license.js +251 -251
  197. package/server/routes/mesh.js +469 -469
  198. package/server/routes/noscript.js +543 -543
  199. package/server/routes/partners.js +201 -0
  200. package/server/routes/plans.js +33 -33
  201. package/server/routes/premium-v2.js +686 -686
  202. package/server/routes/premium.js +724 -724
  203. package/server/routes/providers.js +650 -650
  204. package/server/routes/reputation.js +411 -0
  205. package/server/routes/ring4.js +885 -0
  206. package/server/routes/runtime.js +2148 -2148
  207. package/server/routes/shieldlink.js +70 -0
  208. package/server/routes/shieldqr.js +88 -88
  209. package/server/routes/sovereign.js +465 -465
  210. package/server/routes/truth-layer.js +670 -0
  211. package/server/routes/universal.js +200 -200
  212. package/server/routes/unsubscribe.js +51 -0
  213. package/server/routes/wab-api.js +850 -850
  214. package/server/routes/wab-cache.js +282 -0
  215. package/server/runtime/container-worker.js +111 -111
  216. package/server/runtime/container.js +448 -448
  217. package/server/runtime/distributed-worker.js +362 -362
  218. package/server/runtime/event-bus.js +210 -210
  219. package/server/runtime/index.js +253 -253
  220. package/server/runtime/queue.js +599 -599
  221. package/server/runtime/replay.js +666 -666
  222. package/server/runtime/sandbox.js +266 -266
  223. package/server/runtime/scheduler.js +534 -534
  224. package/server/runtime/session-engine.js +293 -293
  225. package/server/runtime/state-manager.js +188 -188
  226. package/server/secrets/wab-signing-key.pem +3 -0
  227. package/server/secrets/wab-signing-pub.pem +3 -0
  228. package/server/security/cross-site-redactor.js +196 -196
  229. package/server/security/dry-run.js +180 -180
  230. package/server/security/human-gate-rate-limit.js +147 -147
  231. package/server/security/human-gate-transports.js +178 -178
  232. package/server/security/human-gate.js +281 -281
  233. package/server/security/index.js +368 -368
  234. package/server/security/intent-engine.js +245 -245
  235. package/server/security/reward-guard.js +171 -171
  236. package/server/security/rollback-store.js +239 -239
  237. package/server/security/token-scope.js +404 -404
  238. package/server/security/url-policy.js +139 -139
  239. package/server/services/adoption-agent.js +182 -0
  240. package/server/services/agent-chat.js +506 -506
  241. package/server/services/agent-learning.js +601 -601
  242. package/server/services/agent-memory.js +625 -625
  243. package/server/services/agent-mesh.js +555 -555
  244. package/server/services/agent-symphony.js +717 -717
  245. package/server/services/agent-tasks.js +1807 -1807
  246. package/server/services/api-key-engine.js +292 -292
  247. package/server/services/cluster.js +894 -894
  248. package/server/services/commander.js +738 -738
  249. package/server/services/edge-compute.js +440 -440
  250. package/server/services/email.js +233 -233
  251. package/server/services/fairness-engine.js +409 -0
  252. package/server/services/fairness.js +420 -0
  253. package/server/services/governance.js +466 -466
  254. package/server/services/hosted-runtime.js +205 -205
  255. package/server/services/lfd.js +635 -635
  256. package/server/services/local-ai.js +389 -389
  257. package/server/services/marketplace.js +270 -270
  258. package/server/services/metering.js +182 -182
  259. package/server/services/modules/affiliate-intelligence.js +93 -93
  260. package/server/services/modules/agent-firewall.js +90 -90
  261. package/server/services/modules/bounty.js +89 -89
  262. package/server/services/modules/collective-bargaining.js +92 -92
  263. package/server/services/modules/dark-pattern.js +66 -66
  264. package/server/services/modules/gov-intelligence.js +45 -45
  265. package/server/services/modules/neural.js +55 -55
  266. package/server/services/modules/notary.js +49 -49
  267. package/server/services/modules/price-time-machine.js +86 -86
  268. package/server/services/modules/protocol.js +104 -104
  269. package/server/services/negotiation.js +439 -439
  270. package/server/services/outreach-agent.js +312 -0
  271. package/server/services/plans.js +214 -214
  272. package/server/services/plugins.js +771 -771
  273. package/server/services/price-intelligence.js +566 -566
  274. package/server/services/price-shield.js +1137 -1137
  275. package/server/services/provider-clients.js +740 -740
  276. package/server/services/reputation.js +465 -465
  277. package/server/services/search-engine.js +357 -357
  278. package/server/services/security.js +513 -513
  279. package/server/services/self-healing.js +843 -843
  280. package/server/services/shieldlink.js +492 -0
  281. package/server/services/shieldqr.js +322 -322
  282. package/server/services/sovereign-shield.js +542 -542
  283. package/server/services/ssl-ct-monitor.js +224 -0
  284. package/server/services/ssl-inspector.js +42 -42
  285. package/server/services/ssl-monitor.js +167 -167
  286. package/server/services/stripe.js +206 -205
  287. package/server/services/swarm.js +788 -788
  288. package/server/services/universal-scraper.js +662 -662
  289. package/server/services/verification.js +481 -481
  290. package/server/services/vision.js +1163 -1163
  291. package/server/services/wab-crypto.js +178 -178
  292. package/server/utils/cache.js +125 -125
  293. package/server/utils/migrate.js +81 -81
  294. package/server/utils/safe-fetch.js +228 -228
  295. package/server/utils/secureFields.js +50 -50
  296. package/server/ws.js +161 -161
  297. package/templates/artisan-marketplace.yaml +104 -104
  298. package/templates/book-price-scout.yaml +98 -98
  299. package/templates/electronics-price-tracker.yaml +108 -108
  300. package/templates/flight-deal-hunter.yaml +113 -113
  301. package/templates/freelancer-direct.yaml +116 -116
  302. package/templates/grocery-price-compare.yaml +93 -93
  303. package/templates/hotel-direct-booking.yaml +113 -113
  304. package/templates/local-services.yaml +98 -98
  305. package/templates/olive-oil-tunisia.yaml +88 -88
  306. package/templates/organic-farm-fresh.yaml +101 -101
  307. package/templates/restaurant-direct.yaml +97 -97
  308. package/templates/ring4/banking-sovereign.yaml +55 -0
  309. package/templates/ring4/ecommerce-sovereign.yaml +58 -0
  310. 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>