web-agent-bridge 2.3.0 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +12 -4
- package/public/commander-dashboard.html +243 -0
- package/public/css/premium.css +317 -317
- package/public/demo.html +259 -259
- package/public/index.html +644 -644
- package/public/mesh-dashboard.html +309 -382
- package/public/premium-dashboard.html +2487 -2487
- package/public/premium.html +791 -791
- package/public/script/wab.min.js +124 -87
- package/script/ai-agent-bridge.js +154 -84
- package/sdk/agent-mesh.js +287 -171
- package/sdk/commander.js +262 -0
- package/sdk/index.js +260 -260
- package/server/index.js +8 -1
- package/server/migrations/002_premium_features.sql +418 -418
- package/server/models/db.js +24 -5
- package/server/routes/admin-premium.js +671 -671
- package/server/routes/commander.js +316 -0
- package/server/routes/mesh.js +370 -201
- package/server/routes/premium-v2.js +686 -686
- package/server/routes/premium.js +724 -724
- package/server/services/agent-learning.js +230 -77
- package/server/services/agent-memory.js +625 -625
- package/server/services/agent-mesh.js +260 -67
- package/server/services/agent-symphony.js +548 -518
- package/server/services/commander.js +738 -0
- package/server/services/edge-compute.js +440 -0
- package/server/services/local-ai.js +389 -0
- package/server/services/plugins.js +747 -747
- package/server/services/self-healing.js +843 -843
- package/server/services/swarm.js +788 -788
- package/server/services/vision.js +871 -871
- package/public/admin/dashboard.html +0 -848
- package/public/admin/login.html +0 -84
- package/public/video/tutorial.mp4 +0 -0
package/public/demo.html
CHANGED
|
@@ -1,259 +1,259 @@
|
|
|
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>WAB Protocol Demo — Full Shopping Experience via Protocol</title>
|
|
7
|
-
<meta name="description" content="WAB demo: shop, AI agent, and network log. Uses live Railway store when available; falls back to an in-browser protocol simulator (no external server required).">
|
|
8
|
-
<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">
|
|
9
|
-
<style>
|
|
10
|
-
*{box-sizing:border-box;margin:0;padding:0}
|
|
11
|
-
:root{--bg:#080c14;--bg2:#0c1220;--bg3:#0f1629;--bg4:#111827;--border:#1e293b;--border2:#293548;--text:#e2e8f0;--muted:#64748b;--dim:#475569;--blue:#3b82f6;--purple:#8b5cf6;--green:#10b981;--amber:#f59e0b;--red:#ef4444;--cyan:#22d3ee}
|
|
12
|
-
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow:hidden}
|
|
13
|
-
|
|
14
|
-
/* NAV */
|
|
15
|
-
.nav{padding:10px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:#0a0f1a;height:46px}
|
|
16
|
-
.nav .title{font-weight:800;font-size:0.95rem;display:flex;align-items:center;gap:8px}
|
|
17
|
-
.nav .title span{background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
18
|
-
.nav a{color:var(--muted);text-decoration:none;font-size:0.8rem}.nav a:hover{color:var(--text)}
|
|
19
|
-
.nav-links{display:flex;gap:14px;align-items:center}
|
|
20
|
-
|
|
21
|
-
/* LAYOUT: 3-column */
|
|
22
|
-
.layout{display:grid;grid-template-columns:320px 1fr 380px;height:calc(100vh - 46px)}
|
|
23
|
-
@media(max-width:1100px){.layout{grid-template-columns:1fr 380px}}
|
|
24
|
-
@media(max-width:700px){.layout{grid-template-columns:1fr;height:auto}}
|
|
25
|
-
|
|
26
|
-
/* PANEL SHARED */
|
|
27
|
-
.panel{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
|
|
28
|
-
.panel:last-child{border-right:none}
|
|
29
|
-
.panel-head{padding:10px 16px;background:var(--bg3);border-bottom:1px solid var(--border);font-size:0.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;display:flex;align-items:center;justify-content:space-between}
|
|
30
|
-
.panel-head .live{color:var(--green);display:flex;align-items:center;gap:5px;font-size:0.68rem}
|
|
31
|
-
.panel-head .live::before{content:'';width:5px;height:5px;background:var(--green);border-radius:50%;animation:blink 2s infinite}
|
|
32
|
-
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
|
|
33
|
-
|
|
34
|
-
/* LEFT: Store iframe */
|
|
35
|
-
.store-panel iframe{flex:1;border:none;background:#f8fafc;min-height:400px}
|
|
36
|
-
@media(max-width:1100px){.store-panel{display:none}}
|
|
37
|
-
|
|
38
|
-
/* MIDDLE: Shopping via protocol */
|
|
39
|
-
.shop-panel{overflow-y:auto}
|
|
40
|
-
.shop-panel::-webkit-scrollbar{width:4px}.shop-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
|
|
41
|
-
.shop-content{padding:16px}
|
|
42
|
-
|
|
43
|
-
/* Tabs */
|
|
44
|
-
.tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2)}
|
|
45
|
-
.tab{padding:10px 18px;font-size:0.78rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s}
|
|
46
|
-
.tab:hover{color:var(--text)}
|
|
47
|
-
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
|
|
48
|
-
.tab-body{display:none;flex:1;overflow-y:auto}
|
|
49
|
-
.tab-body.active{display:flex;flex-direction:column}
|
|
50
|
-
|
|
51
|
-
/* Product cards */
|
|
52
|
-
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:16px}
|
|
53
|
-
.p-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center;transition:all 0.15s;cursor:default}
|
|
54
|
-
.p-card:hover{border-color:var(--blue);transform:translateY(-1px)}
|
|
55
|
-
.p-card .emoji{font-size:2.2rem;margin-bottom:8px;display:block}
|
|
56
|
-
.p-card h4{font-size:0.82rem;font-weight:600;margin-bottom:2px}
|
|
57
|
-
.p-card .rating{color:var(--amber);font-size:0.7rem;margin-bottom:4px}
|
|
58
|
-
.p-card .price{font-size:1.15rem;font-weight:800;margin:6px 0}
|
|
59
|
-
.p-card .stock{font-size:0.68rem;color:var(--green)}.p-card .stock.low{color:var(--amber)}
|
|
60
|
-
.p-card .add{width:100%;padding:7px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-weight:600;font-size:0.78rem;cursor:pointer;margin-top:8px;transition:opacity 0.15s}
|
|
61
|
-
.p-card .add:hover{opacity:0.85}
|
|
62
|
-
.p-card .add:disabled{opacity:0.3;cursor:not-allowed}
|
|
63
|
-
|
|
64
|
-
/* Cart */
|
|
65
|
-
.cart-section{padding:16px}
|
|
66
|
-
.cart-empty{text-align:center;padding:40px 16px;color:var(--muted);font-size:0.85rem}
|
|
67
|
-
.cart-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
|
|
68
|
-
.cart-item .ci-emoji{font-size:1.6rem}
|
|
69
|
-
.cart-item .ci-info{flex:1}
|
|
70
|
-
.cart-item .ci-name{font-size:0.82rem;font-weight:600}
|
|
71
|
-
.cart-item .ci-meta{font-size:0.72rem;color:var(--muted)}
|
|
72
|
-
.cart-item .ci-price{font-weight:700;font-size:0.9rem;white-space:nowrap}
|
|
73
|
-
.cart-item .ci-remove{background:none;border:none;color:var(--red);cursor:pointer;font-size:0.75rem;padding:4px 8px;border-radius:4px}
|
|
74
|
-
.cart-item .ci-remove:hover{background:rgba(239,68,68,0.1)}
|
|
75
|
-
.cart-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-weight:700;font-size:1rem;border-top:2px solid var(--border)}
|
|
76
|
-
.checkout-form{margin-top:14px;display:flex;flex-direction:column;gap:10px}
|
|
77
|
-
.checkout-form input{background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-family:inherit;font-size:0.85rem;outline:none}
|
|
78
|
-
.checkout-form input:focus{border-color:var(--blue)}
|
|
79
|
-
.checkout-btn{padding:12px;background:linear-gradient(135deg,var(--green),#059669);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:0.9rem;cursor:pointer;transition:opacity 0.15s}
|
|
80
|
-
.checkout-btn:hover{opacity:0.9}
|
|
81
|
-
.checkout-btn:disabled{opacity:0.4;cursor:not-allowed}
|
|
82
|
-
|
|
83
|
-
/* Order confirmation */
|
|
84
|
-
.order-done{text-align:center;padding:30px 16px}
|
|
85
|
-
.order-done .check{font-size:3rem;margin-bottom:12px}
|
|
86
|
-
.order-done h3{font-size:1.1rem;margin-bottom:6px;color:var(--green)}
|
|
87
|
-
.order-done .oid{font-family:'JetBrains Mono',monospace;font-size:0.85rem;color:var(--blue);margin:8px 0}
|
|
88
|
-
.order-done p{font-size:0.82rem;color:var(--muted);line-height:1.5}
|
|
89
|
-
.order-done .reset-btn{margin-top:16px;padding:10px 24px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-weight:600;cursor:pointer}
|
|
90
|
-
|
|
91
|
-
/* AI Agent tab */
|
|
92
|
-
.agent-controls{padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap}
|
|
93
|
-
.ctrl-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-family:inherit;font-size:0.74rem;font-weight:600;cursor:pointer;transition:all 0.15s;white-space:nowrap}
|
|
94
|
-
.ctrl-btn:hover{border-color:var(--blue);background:var(--bg4)}
|
|
95
|
-
.ctrl-btn.primary{background:linear-gradient(135deg,var(--blue),var(--purple));border-color:transparent;color:#fff}
|
|
96
|
-
.ctrl-btn:disabled{opacity:0.4;cursor:not-allowed}
|
|
97
|
-
.chat-row{padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;gap:6px}
|
|
98
|
-
.chat-input{flex:1;background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:0.78rem;outline:none}
|
|
99
|
-
.chat-input:focus{border-color:var(--blue)}
|
|
100
|
-
.send-btn{background:var(--blue);color:#fff;border:none;border-radius:6px;padding:8px 14px;font-weight:600;cursor:pointer;font-size:0.78rem}
|
|
101
|
-
.agent-log{flex:1;overflow-y:auto;padding:0}
|
|
102
|
-
.agent-log::-webkit-scrollbar{width:4px}.agent-log::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
|
|
103
|
-
|
|
104
|
-
/* Phase indicator */
|
|
105
|
-
.phases{padding:6px 16px;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
|
|
106
|
-
.ph-dot{width:7px;height:7px;border-radius:50%;background:var(--border)}
|
|
107
|
-
.ph-dot.active{background:var(--blue);box-shadow:0 0 8px rgba(59,130,246,0.5)}
|
|
108
|
-
.ph-dot.done{background:var(--green)}
|
|
109
|
-
.ph-lbl{font-size:0.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
|
|
110
|
-
.ph-lbl.active{color:var(--blue);font-weight:600}.ph-lbl.done{color:var(--green)}
|
|
111
|
-
.ph-sep{color:var(--border);font-size:0.6rem}
|
|
112
|
-
|
|
113
|
-
/* RIGHT: Network log */
|
|
114
|
-
.net-panel{overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:0.72rem;line-height:1.6}
|
|
115
|
-
.net-panel::-webkit-scrollbar{width:4px}.net-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
|
|
116
|
-
.net-count{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--dim);font-weight:400}
|
|
117
|
-
|
|
118
|
-
.log-group{border-bottom:1px solid #111827}
|
|
119
|
-
.log-group-header{padding:7px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:background 0.1s}
|
|
120
|
-
.log-group-header:hover{background:var(--bg3)}
|
|
121
|
-
.log-group-header .method{font-weight:700;min-width:36px;font-size:0.7rem}
|
|
122
|
-
.log-group-header .method.GET{color:var(--green)}.log-group-header .method.POST{color:var(--amber)}
|
|
123
|
-
.log-group-header .url{color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
124
|
-
.log-group-header .status{min-width:28px;text-align:right}
|
|
125
|
-
.log-group-header .status.s2{color:var(--green)}.log-group-header .status.s4{color:var(--red)}
|
|
126
|
-
.log-group-header .timing{color:var(--dim);min-width:44px;text-align:right}
|
|
127
|
-
.log-group-header .arrow{color:var(--dim);font-size:0.6rem;transition:transform 0.2s}
|
|
128
|
-
.log-group-header .arrow.open{transform:rotate(90deg)}
|
|
129
|
-
.log-group-body{display:none;padding:0 14px 10px;background:#0a0f1a}
|
|
130
|
-
.log-group-body.open{display:block}
|
|
131
|
-
.log-sec{margin-top:6px}
|
|
132
|
-
.log-sec-title{color:var(--dim);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:3px}
|
|
133
|
-
.log-json{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:8px 10px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:#cbd5e1;max-height:180px;overflow-y:auto;font-size:0.7rem}
|
|
134
|
-
.log-json .key{color:var(--purple)}.log-json .str{color:var(--green)}.log-json .num{color:var(--amber)}.log-json .bool{color:var(--blue)}
|
|
135
|
-
|
|
136
|
-
.agent-msg{padding:6px 14px;border-bottom:1px solid #111827;font-size:0.75rem}
|
|
137
|
-
.agent-msg.think{color:var(--purple);font-style:italic}
|
|
138
|
-
.agent-msg.system{color:var(--dim)}
|
|
139
|
-
.agent-msg.user{color:#60a5fa}
|
|
140
|
-
.agent-msg.result{color:var(--green)}
|
|
141
|
-
.agent-msg.error{color:var(--red)}
|
|
142
|
-
|
|
143
|
-
.demo-banner{display:none;padding:8px 16px;font-size:0.78rem;line-height:1.45;border-bottom:1px solid var(--border)}
|
|
144
|
-
.demo-banner--ok{background:rgba(16,185,129,0.12);color:#a7f3d0}
|
|
145
|
-
.demo-banner--warn{background:rgba(245,158,11,0.12);color:#fcd34d}
|
|
146
|
-
.demo-banner--info{background:rgba(59,130,246,0.12);color:#93c5fd}
|
|
147
|
-
.demo-banner code{font-family:'JetBrains Mono',monospace;font-size:0.72rem;background:rgba(0,0,0,0.2);padding:1px 6px;border-radius:4px}
|
|
148
|
-
.demo-banner a{color:var(--cyan);text-decoration:underline}
|
|
149
|
-
|
|
150
|
-
.net-local{display:inline-block;background:var(--purple);color:#fff;font-size:0.58rem;padding:1px 5px;border-radius:3px;font-weight:700;margin-right:4px;vertical-align:middle}
|
|
151
|
-
.retry-btn{margin-top:8px;padding:6px 14px;background:var(--blue);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:0.78rem}
|
|
152
|
-
|
|
153
|
-
.store-offline{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:var(--bg3);min-height:280px}
|
|
154
|
-
.store-offline p{color:var(--muted);font-size:0.8rem;max-width:260px;line-height:1.5;margin-top:8px}
|
|
155
|
-
.store-offline a{color:var(--blue);margin-top:12px;font-size:0.82rem}
|
|
156
|
-
</style>
|
|
157
|
-
</head>
|
|
158
|
-
<body>
|
|
159
|
-
|
|
160
|
-
<div class="nav">
|
|
161
|
-
<div class="title">⚡ <span>WAB</span> Protocol Demo</div>
|
|
162
|
-
<div class="nav-links">
|
|
163
|
-
<a href="/">Home</a>
|
|
164
|
-
<a href="/docs">Docs</a>
|
|
165
|
-
<a href="https://github.com/abokenan444/web-agent-bridge" target="_blank" rel="noopener noreferrer">GitHub</a>
|
|
166
|
-
</div>
|
|
167
|
-
</div>
|
|
168
|
-
<div id="demo-mode-banner" class="demo-banner demo-banner--info" style="display:none"></div>
|
|
169
|
-
|
|
170
|
-
<div class="layout">
|
|
171
|
-
<!-- LEFT: Store iframe (live) or offline notice -->
|
|
172
|
-
<div class="panel store-panel">
|
|
173
|
-
<div class="panel-head">
|
|
174
|
-
<span>Live store preview</span>
|
|
175
|
-
<span class="live">Railway</span>
|
|
176
|
-
</div>
|
|
177
|
-
<div id="store-live-wrap" style="flex:1;display:flex;flex-direction:column;min-height:0">
|
|
178
|
-
<iframe id="store-frame" src="https://web-agent-bridge-production.up.railway.app" title="TechStore on Railway"></iframe>
|
|
179
|
-
</div>
|
|
180
|
-
<div id="store-offline-placeholder" class="store-offline">
|
|
181
|
-
<span style="font-size:2.5rem">📡</span>
|
|
182
|
-
<strong style="font-size:0.88rem">Live iframe hidden</strong>
|
|
183
|
-
<p>In offline mode the demo runs entirely in your browser. Open the real TechStore when you want the iframe in sync.</p>
|
|
184
|
-
<a href="https://web-agent-bridge-production.up.railway.app" target="_blank" rel="noopener">Open TechStore →</a>
|
|
185
|
-
</div>
|
|
186
|
-
</div>
|
|
187
|
-
|
|
188
|
-
<!-- MIDDLE: Interactive shopping + AI Agent -->
|
|
189
|
-
<div class="panel" style="border-right:1px solid var(--border)">
|
|
190
|
-
<div class="tabs">
|
|
191
|
-
<div class="tab active" data-tab="shop">🛒 Shop via Protocol</div>
|
|
192
|
-
<div class="tab" data-tab="agent">🤖 AI Agent</div>
|
|
193
|
-
</div>
|
|
194
|
-
|
|
195
|
-
<!-- SHOP TAB -->
|
|
196
|
-
<div class="tab-body active" id="tab-shop">
|
|
197
|
-
<div class="shop-panel" id="shop-scroll">
|
|
198
|
-
<div id="shop-view">
|
|
199
|
-
<div class="products-grid" id="products-grid">
|
|
200
|
-
<div style="grid-column:1/-1;text-align:center;padding:30px;color:var(--muted)">Loading products via WAB Protocol...</div>
|
|
201
|
-
</div>
|
|
202
|
-
<div id="cart-area" style="display:none">
|
|
203
|
-
<div style="padding:0 16px"><h3 style="font-size:0.9rem;margin-bottom:4px">🛒 Your Cart</h3></div>
|
|
204
|
-
<div class="cart-section" id="cart-items"></div>
|
|
205
|
-
<div class="cart-section">
|
|
206
|
-
<div class="cart-total"><span>Total</span><span id="cart-total-val">$0.00</span></div>
|
|
207
|
-
<div class="checkout-form">
|
|
208
|
-
<input type="email" id="checkout-email" placeholder="Email for order confirmation" value="demo@webagentbridge.com">
|
|
209
|
-
<button class="checkout-btn" id="btn-checkout">Complete Purchase via WAB Protocol</button>
|
|
210
|
-
</div>
|
|
211
|
-
</div>
|
|
212
|
-
</div>
|
|
213
|
-
</div>
|
|
214
|
-
<div id="order-view" style="display:none"></div>
|
|
215
|
-
</div>
|
|
216
|
-
</div>
|
|
217
|
-
|
|
218
|
-
<!-- AGENT TAB -->
|
|
219
|
-
<div class="tab-body" id="tab-agent">
|
|
220
|
-
<div class="phases" id="phases">
|
|
221
|
-
<div class="ph-dot" id="ph-discover"></div><span class="ph-lbl" id="pl-discover">Discover</span>
|
|
222
|
-
<span class="ph-sep">→</span>
|
|
223
|
-
<div class="ph-dot" id="ph-plan"></div><span class="ph-lbl" id="pl-plan">Plan</span>
|
|
224
|
-
<span class="ph-sep">→</span>
|
|
225
|
-
<div class="ph-dot" id="ph-execute"></div><span class="ph-lbl" id="pl-execute">Execute</span>
|
|
226
|
-
<span class="ph-sep">→</span>
|
|
227
|
-
<div class="ph-dot" id="ph-confirm"></div><span class="ph-lbl" id="pl-confirm">Confirm</span>
|
|
228
|
-
</div>
|
|
229
|
-
<div class="agent-controls">
|
|
230
|
-
<button class="ctrl-btn primary" id="btn-full">▶ Run Full Shopping Agent</button>
|
|
231
|
-
<button class="ctrl-btn" id="btn-discover">Discover</button>
|
|
232
|
-
<button class="ctrl-btn" id="btn-list">List Products</button>
|
|
233
|
-
<button class="ctrl-btn" id="btn-search">Search</button>
|
|
234
|
-
<button class="ctrl-btn" id="btn-viewcart">View Cart</button>
|
|
235
|
-
</div>
|
|
236
|
-
<div class="chat-row">
|
|
237
|
-
<input class="chat-input" id="cmd-input" placeholder='Try: "buy cheapest" or {"action":"listProducts"}'>
|
|
238
|
-
<button class="send-btn" id="btn-send">Send</button>
|
|
239
|
-
</div>
|
|
240
|
-
<div class="agent-log" id="agent-log"></div>
|
|
241
|
-
</div>
|
|
242
|
-
</div>
|
|
243
|
-
|
|
244
|
-
<!-- RIGHT: Network log -->
|
|
245
|
-
<div class="panel" style="border-right:none">
|
|
246
|
-
<div class="panel-head">
|
|
247
|
-
<span>Network Log</span>
|
|
248
|
-
<div style="display:flex;gap:8px;align-items:center">
|
|
249
|
-
<span class="net-count" id="req-count">0 requests</span>
|
|
250
|
-
<button style="background:none;border:1px solid var(--border);color:var(--muted);border-radius:4px;padding:2px 8px;font-size:0.65rem;cursor:pointer" id="btn-clear">Clear</button>
|
|
251
|
-
</div>
|
|
252
|
-
</div>
|
|
253
|
-
<div class="net-panel" id="net-log"></div>
|
|
254
|
-
</div>
|
|
255
|
-
</div>
|
|
256
|
-
|
|
257
|
-
<script src="/js/wab-demo-page.js"></script>
|
|
258
|
-
</body>
|
|
259
|
-
</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>WAB Protocol Demo — Full Shopping Experience via Protocol</title>
|
|
7
|
+
<meta name="description" content="WAB demo: shop, AI agent, and network log. Uses live Railway store when available; falls back to an in-browser protocol simulator (no external server required).">
|
|
8
|
+
<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">
|
|
9
|
+
<style>
|
|
10
|
+
*{box-sizing:border-box;margin:0;padding:0}
|
|
11
|
+
:root{--bg:#080c14;--bg2:#0c1220;--bg3:#0f1629;--bg4:#111827;--border:#1e293b;--border2:#293548;--text:#e2e8f0;--muted:#64748b;--dim:#475569;--blue:#3b82f6;--purple:#8b5cf6;--green:#10b981;--amber:#f59e0b;--red:#ef4444;--cyan:#22d3ee}
|
|
12
|
+
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;overflow:hidden}
|
|
13
|
+
|
|
14
|
+
/* NAV */
|
|
15
|
+
.nav{padding:10px 20px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:#0a0f1a;height:46px}
|
|
16
|
+
.nav .title{font-weight:800;font-size:0.95rem;display:flex;align-items:center;gap:8px}
|
|
17
|
+
.nav .title span{background:linear-gradient(135deg,var(--blue),var(--purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
|
|
18
|
+
.nav a{color:var(--muted);text-decoration:none;font-size:0.8rem}.nav a:hover{color:var(--text)}
|
|
19
|
+
.nav-links{display:flex;gap:14px;align-items:center}
|
|
20
|
+
|
|
21
|
+
/* LAYOUT: 3-column */
|
|
22
|
+
.layout{display:grid;grid-template-columns:320px 1fr 380px;height:calc(100vh - 46px)}
|
|
23
|
+
@media(max-width:1100px){.layout{grid-template-columns:1fr 380px}}
|
|
24
|
+
@media(max-width:700px){.layout{grid-template-columns:1fr;height:auto}}
|
|
25
|
+
|
|
26
|
+
/* PANEL SHARED */
|
|
27
|
+
.panel{display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--border)}
|
|
28
|
+
.panel:last-child{border-right:none}
|
|
29
|
+
.panel-head{padding:10px 16px;background:var(--bg3);border-bottom:1px solid var(--border);font-size:0.72rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:0.8px;display:flex;align-items:center;justify-content:space-between}
|
|
30
|
+
.panel-head .live{color:var(--green);display:flex;align-items:center;gap:5px;font-size:0.68rem}
|
|
31
|
+
.panel-head .live::before{content:'';width:5px;height:5px;background:var(--green);border-radius:50%;animation:blink 2s infinite}
|
|
32
|
+
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
|
|
33
|
+
|
|
34
|
+
/* LEFT: Store iframe */
|
|
35
|
+
.store-panel iframe{flex:1;border:none;background:#f8fafc;min-height:400px}
|
|
36
|
+
@media(max-width:1100px){.store-panel{display:none}}
|
|
37
|
+
|
|
38
|
+
/* MIDDLE: Shopping via protocol */
|
|
39
|
+
.shop-panel{overflow-y:auto}
|
|
40
|
+
.shop-panel::-webkit-scrollbar{width:4px}.shop-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
|
|
41
|
+
.shop-content{padding:16px}
|
|
42
|
+
|
|
43
|
+
/* Tabs */
|
|
44
|
+
.tabs{display:flex;border-bottom:1px solid var(--border);background:var(--bg2)}
|
|
45
|
+
.tab{padding:10px 18px;font-size:0.78rem;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.15s}
|
|
46
|
+
.tab:hover{color:var(--text)}
|
|
47
|
+
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
|
|
48
|
+
.tab-body{display:none;flex:1;overflow-y:auto}
|
|
49
|
+
.tab-body.active{display:flex;flex-direction:column}
|
|
50
|
+
|
|
51
|
+
/* Product cards */
|
|
52
|
+
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;padding:16px}
|
|
53
|
+
.p-card{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:14px;text-align:center;transition:all 0.15s;cursor:default}
|
|
54
|
+
.p-card:hover{border-color:var(--blue);transform:translateY(-1px)}
|
|
55
|
+
.p-card .emoji{font-size:2.2rem;margin-bottom:8px;display:block}
|
|
56
|
+
.p-card h4{font-size:0.82rem;font-weight:600;margin-bottom:2px}
|
|
57
|
+
.p-card .rating{color:var(--amber);font-size:0.7rem;margin-bottom:4px}
|
|
58
|
+
.p-card .price{font-size:1.15rem;font-weight:800;margin:6px 0}
|
|
59
|
+
.p-card .stock{font-size:0.68rem;color:var(--green)}.p-card .stock.low{color:var(--amber)}
|
|
60
|
+
.p-card .add{width:100%;padding:7px;background:var(--blue);color:#fff;border:none;border-radius:6px;font-weight:600;font-size:0.78rem;cursor:pointer;margin-top:8px;transition:opacity 0.15s}
|
|
61
|
+
.p-card .add:hover{opacity:0.85}
|
|
62
|
+
.p-card .add:disabled{opacity:0.3;cursor:not-allowed}
|
|
63
|
+
|
|
64
|
+
/* Cart */
|
|
65
|
+
.cart-section{padding:16px}
|
|
66
|
+
.cart-empty{text-align:center;padding:40px 16px;color:var(--muted);font-size:0.85rem}
|
|
67
|
+
.cart-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
|
|
68
|
+
.cart-item .ci-emoji{font-size:1.6rem}
|
|
69
|
+
.cart-item .ci-info{flex:1}
|
|
70
|
+
.cart-item .ci-name{font-size:0.82rem;font-weight:600}
|
|
71
|
+
.cart-item .ci-meta{font-size:0.72rem;color:var(--muted)}
|
|
72
|
+
.cart-item .ci-price{font-weight:700;font-size:0.9rem;white-space:nowrap}
|
|
73
|
+
.cart-item .ci-remove{background:none;border:none;color:var(--red);cursor:pointer;font-size:0.75rem;padding:4px 8px;border-radius:4px}
|
|
74
|
+
.cart-item .ci-remove:hover{background:rgba(239,68,68,0.1)}
|
|
75
|
+
.cart-total{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-weight:700;font-size:1rem;border-top:2px solid var(--border)}
|
|
76
|
+
.checkout-form{margin-top:14px;display:flex;flex-direction:column;gap:10px}
|
|
77
|
+
.checkout-form input{background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text);font-family:inherit;font-size:0.85rem;outline:none}
|
|
78
|
+
.checkout-form input:focus{border-color:var(--blue)}
|
|
79
|
+
.checkout-btn{padding:12px;background:linear-gradient(135deg,var(--green),#059669);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:0.9rem;cursor:pointer;transition:opacity 0.15s}
|
|
80
|
+
.checkout-btn:hover{opacity:0.9}
|
|
81
|
+
.checkout-btn:disabled{opacity:0.4;cursor:not-allowed}
|
|
82
|
+
|
|
83
|
+
/* Order confirmation */
|
|
84
|
+
.order-done{text-align:center;padding:30px 16px}
|
|
85
|
+
.order-done .check{font-size:3rem;margin-bottom:12px}
|
|
86
|
+
.order-done h3{font-size:1.1rem;margin-bottom:6px;color:var(--green)}
|
|
87
|
+
.order-done .oid{font-family:'JetBrains Mono',monospace;font-size:0.85rem;color:var(--blue);margin:8px 0}
|
|
88
|
+
.order-done p{font-size:0.82rem;color:var(--muted);line-height:1.5}
|
|
89
|
+
.order-done .reset-btn{margin-top:16px;padding:10px 24px;background:var(--bg3);border:1px solid var(--border);border-radius:6px;color:var(--text);font-weight:600;cursor:pointer}
|
|
90
|
+
|
|
91
|
+
/* AI Agent tab */
|
|
92
|
+
.agent-controls{padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap}
|
|
93
|
+
.ctrl-btn{padding:6px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--text);font-family:inherit;font-size:0.74rem;font-weight:600;cursor:pointer;transition:all 0.15s;white-space:nowrap}
|
|
94
|
+
.ctrl-btn:hover{border-color:var(--blue);background:var(--bg4)}
|
|
95
|
+
.ctrl-btn.primary{background:linear-gradient(135deg,var(--blue),var(--purple));border-color:transparent;color:#fff}
|
|
96
|
+
.ctrl-btn:disabled{opacity:0.4;cursor:not-allowed}
|
|
97
|
+
.chat-row{padding:8px 16px;background:var(--bg2);border-bottom:1px solid var(--border);display:flex;gap:6px}
|
|
98
|
+
.chat-input{flex:1;background:var(--bg4);border:1px solid var(--border);border-radius:6px;padding:8px 10px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:0.78rem;outline:none}
|
|
99
|
+
.chat-input:focus{border-color:var(--blue)}
|
|
100
|
+
.send-btn{background:var(--blue);color:#fff;border:none;border-radius:6px;padding:8px 14px;font-weight:600;cursor:pointer;font-size:0.78rem}
|
|
101
|
+
.agent-log{flex:1;overflow-y:auto;padding:0}
|
|
102
|
+
.agent-log::-webkit-scrollbar{width:4px}.agent-log::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
|
|
103
|
+
|
|
104
|
+
/* Phase indicator */
|
|
105
|
+
.phases{padding:6px 16px;background:var(--bg3);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:6px}
|
|
106
|
+
.ph-dot{width:7px;height:7px;border-radius:50%;background:var(--border)}
|
|
107
|
+
.ph-dot.active{background:var(--blue);box-shadow:0 0 8px rgba(59,130,246,0.5)}
|
|
108
|
+
.ph-dot.done{background:var(--green)}
|
|
109
|
+
.ph-lbl{font-size:0.65rem;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
|
|
110
|
+
.ph-lbl.active{color:var(--blue);font-weight:600}.ph-lbl.done{color:var(--green)}
|
|
111
|
+
.ph-sep{color:var(--border);font-size:0.6rem}
|
|
112
|
+
|
|
113
|
+
/* RIGHT: Network log */
|
|
114
|
+
.net-panel{overflow-y:auto;font-family:'JetBrains Mono',monospace;font-size:0.72rem;line-height:1.6}
|
|
115
|
+
.net-panel::-webkit-scrollbar{width:4px}.net-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
|
|
116
|
+
.net-count{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--dim);font-weight:400}
|
|
117
|
+
|
|
118
|
+
.log-group{border-bottom:1px solid #111827}
|
|
119
|
+
.log-group-header{padding:7px 14px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:background 0.1s}
|
|
120
|
+
.log-group-header:hover{background:var(--bg3)}
|
|
121
|
+
.log-group-header .method{font-weight:700;min-width:36px;font-size:0.7rem}
|
|
122
|
+
.log-group-header .method.GET{color:var(--green)}.log-group-header .method.POST{color:var(--amber)}
|
|
123
|
+
.log-group-header .url{color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
124
|
+
.log-group-header .status{min-width:28px;text-align:right}
|
|
125
|
+
.log-group-header .status.s2{color:var(--green)}.log-group-header .status.s4{color:var(--red)}
|
|
126
|
+
.log-group-header .timing{color:var(--dim);min-width:44px;text-align:right}
|
|
127
|
+
.log-group-header .arrow{color:var(--dim);font-size:0.6rem;transition:transform 0.2s}
|
|
128
|
+
.log-group-header .arrow.open{transform:rotate(90deg)}
|
|
129
|
+
.log-group-body{display:none;padding:0 14px 10px;background:#0a0f1a}
|
|
130
|
+
.log-group-body.open{display:block}
|
|
131
|
+
.log-sec{margin-top:6px}
|
|
132
|
+
.log-sec-title{color:var(--dim);font-size:0.6rem;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:3px}
|
|
133
|
+
.log-json{background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:8px 10px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;color:#cbd5e1;max-height:180px;overflow-y:auto;font-size:0.7rem}
|
|
134
|
+
.log-json .key{color:var(--purple)}.log-json .str{color:var(--green)}.log-json .num{color:var(--amber)}.log-json .bool{color:var(--blue)}
|
|
135
|
+
|
|
136
|
+
.agent-msg{padding:6px 14px;border-bottom:1px solid #111827;font-size:0.75rem}
|
|
137
|
+
.agent-msg.think{color:var(--purple);font-style:italic}
|
|
138
|
+
.agent-msg.system{color:var(--dim)}
|
|
139
|
+
.agent-msg.user{color:#60a5fa}
|
|
140
|
+
.agent-msg.result{color:var(--green)}
|
|
141
|
+
.agent-msg.error{color:var(--red)}
|
|
142
|
+
|
|
143
|
+
.demo-banner{display:none;padding:8px 16px;font-size:0.78rem;line-height:1.45;border-bottom:1px solid var(--border)}
|
|
144
|
+
.demo-banner--ok{background:rgba(16,185,129,0.12);color:#a7f3d0}
|
|
145
|
+
.demo-banner--warn{background:rgba(245,158,11,0.12);color:#fcd34d}
|
|
146
|
+
.demo-banner--info{background:rgba(59,130,246,0.12);color:#93c5fd}
|
|
147
|
+
.demo-banner code{font-family:'JetBrains Mono',monospace;font-size:0.72rem;background:rgba(0,0,0,0.2);padding:1px 6px;border-radius:4px}
|
|
148
|
+
.demo-banner a{color:var(--cyan);text-decoration:underline}
|
|
149
|
+
|
|
150
|
+
.net-local{display:inline-block;background:var(--purple);color:#fff;font-size:0.58rem;padding:1px 5px;border-radius:3px;font-weight:700;margin-right:4px;vertical-align:middle}
|
|
151
|
+
.retry-btn{margin-top:8px;padding:6px 14px;background:var(--blue);color:#fff;border:none;border-radius:6px;cursor:pointer;font-weight:600;font-size:0.78rem}
|
|
152
|
+
|
|
153
|
+
.store-offline{flex:1;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;background:var(--bg3);min-height:280px}
|
|
154
|
+
.store-offline p{color:var(--muted);font-size:0.8rem;max-width:260px;line-height:1.5;margin-top:8px}
|
|
155
|
+
.store-offline a{color:var(--blue);margin-top:12px;font-size:0.82rem}
|
|
156
|
+
</style>
|
|
157
|
+
</head>
|
|
158
|
+
<body>
|
|
159
|
+
|
|
160
|
+
<div class="nav">
|
|
161
|
+
<div class="title">⚡ <span>WAB</span> Protocol Demo</div>
|
|
162
|
+
<div class="nav-links">
|
|
163
|
+
<a href="/">Home</a>
|
|
164
|
+
<a href="/docs">Docs</a>
|
|
165
|
+
<a href="https://github.com/abokenan444/web-agent-bridge" target="_blank" rel="noopener noreferrer">GitHub</a>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
<div id="demo-mode-banner" class="demo-banner demo-banner--info" style="display:none"></div>
|
|
169
|
+
|
|
170
|
+
<div class="layout">
|
|
171
|
+
<!-- LEFT: Store iframe (live) or offline notice -->
|
|
172
|
+
<div class="panel store-panel">
|
|
173
|
+
<div class="panel-head">
|
|
174
|
+
<span>Live store preview</span>
|
|
175
|
+
<span class="live">Railway</span>
|
|
176
|
+
</div>
|
|
177
|
+
<div id="store-live-wrap" style="flex:1;display:flex;flex-direction:column;min-height:0">
|
|
178
|
+
<iframe id="store-frame" src="https://web-agent-bridge-production.up.railway.app" title="TechStore on Railway"></iframe>
|
|
179
|
+
</div>
|
|
180
|
+
<div id="store-offline-placeholder" class="store-offline">
|
|
181
|
+
<span style="font-size:2.5rem">📡</span>
|
|
182
|
+
<strong style="font-size:0.88rem">Live iframe hidden</strong>
|
|
183
|
+
<p>In offline mode the demo runs entirely in your browser. Open the real TechStore when you want the iframe in sync.</p>
|
|
184
|
+
<a href="https://web-agent-bridge-production.up.railway.app" target="_blank" rel="noopener">Open TechStore →</a>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
|
|
188
|
+
<!-- MIDDLE: Interactive shopping + AI Agent -->
|
|
189
|
+
<div class="panel" style="border-right:1px solid var(--border)">
|
|
190
|
+
<div class="tabs">
|
|
191
|
+
<div class="tab active" data-tab="shop">🛒 Shop via Protocol</div>
|
|
192
|
+
<div class="tab" data-tab="agent">🤖 AI Agent</div>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<!-- SHOP TAB -->
|
|
196
|
+
<div class="tab-body active" id="tab-shop">
|
|
197
|
+
<div class="shop-panel" id="shop-scroll">
|
|
198
|
+
<div id="shop-view">
|
|
199
|
+
<div class="products-grid" id="products-grid">
|
|
200
|
+
<div style="grid-column:1/-1;text-align:center;padding:30px;color:var(--muted)">Loading products via WAB Protocol...</div>
|
|
201
|
+
</div>
|
|
202
|
+
<div id="cart-area" style="display:none">
|
|
203
|
+
<div style="padding:0 16px"><h3 style="font-size:0.9rem;margin-bottom:4px">🛒 Your Cart</h3></div>
|
|
204
|
+
<div class="cart-section" id="cart-items"></div>
|
|
205
|
+
<div class="cart-section">
|
|
206
|
+
<div class="cart-total"><span>Total</span><span id="cart-total-val">$0.00</span></div>
|
|
207
|
+
<div class="checkout-form">
|
|
208
|
+
<input type="email" id="checkout-email" placeholder="Email for order confirmation" value="demo@webagentbridge.com">
|
|
209
|
+
<button class="checkout-btn" id="btn-checkout">Complete Purchase via WAB Protocol</button>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div id="order-view" style="display:none"></div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
|
|
218
|
+
<!-- AGENT TAB -->
|
|
219
|
+
<div class="tab-body" id="tab-agent">
|
|
220
|
+
<div class="phases" id="phases">
|
|
221
|
+
<div class="ph-dot" id="ph-discover"></div><span class="ph-lbl" id="pl-discover">Discover</span>
|
|
222
|
+
<span class="ph-sep">→</span>
|
|
223
|
+
<div class="ph-dot" id="ph-plan"></div><span class="ph-lbl" id="pl-plan">Plan</span>
|
|
224
|
+
<span class="ph-sep">→</span>
|
|
225
|
+
<div class="ph-dot" id="ph-execute"></div><span class="ph-lbl" id="pl-execute">Execute</span>
|
|
226
|
+
<span class="ph-sep">→</span>
|
|
227
|
+
<div class="ph-dot" id="ph-confirm"></div><span class="ph-lbl" id="pl-confirm">Confirm</span>
|
|
228
|
+
</div>
|
|
229
|
+
<div class="agent-controls">
|
|
230
|
+
<button class="ctrl-btn primary" id="btn-full">▶ Run Full Shopping Agent</button>
|
|
231
|
+
<button class="ctrl-btn" id="btn-discover">Discover</button>
|
|
232
|
+
<button class="ctrl-btn" id="btn-list">List Products</button>
|
|
233
|
+
<button class="ctrl-btn" id="btn-search">Search</button>
|
|
234
|
+
<button class="ctrl-btn" id="btn-viewcart">View Cart</button>
|
|
235
|
+
</div>
|
|
236
|
+
<div class="chat-row">
|
|
237
|
+
<input class="chat-input" id="cmd-input" placeholder='Try: "buy cheapest" or {"action":"listProducts"}'>
|
|
238
|
+
<button class="send-btn" id="btn-send">Send</button>
|
|
239
|
+
</div>
|
|
240
|
+
<div class="agent-log" id="agent-log"></div>
|
|
241
|
+
</div>
|
|
242
|
+
</div>
|
|
243
|
+
|
|
244
|
+
<!-- RIGHT: Network log -->
|
|
245
|
+
<div class="panel" style="border-right:none">
|
|
246
|
+
<div class="panel-head">
|
|
247
|
+
<span>Network Log</span>
|
|
248
|
+
<div style="display:flex;gap:8px;align-items:center">
|
|
249
|
+
<span class="net-count" id="req-count">0 requests</span>
|
|
250
|
+
<button style="background:none;border:1px solid var(--border);color:var(--muted);border-radius:4px;padding:2px 8px;font-size:0.65rem;cursor:pointer" id="btn-clear">Clear</button>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
<div class="net-panel" id="net-log"></div>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
<script src="/js/wab-demo-page.js"></script>
|
|
258
|
+
</body>
|
|
259
|
+
</html>
|