web-agent-bridge 2.3.1 → 2.5.0

package/public/index.html

@@ -27,6 +27,7 @@
         <li><a href="#pricing">Pricing</a></li>
         <li><a href="#v2-features">v2.0</a></li>
         <li><a href="#agent-mesh">Agent Mesh</a></li>
+        <li><a href="#agent-workspace">Workspace</a></li>
         <li><a href="/docs">Docs</a></li>
       </ul>
       <div class="navbar-actions">
@@ -56,6 +57,9 @@
         <div class="hero-actions">
           <a href="/register" class="btn btn-primary btn-lg">Start Free</a>
           <a href="/docs" class="btn btn-secondary btn-lg">Read the Docs</a>
+          <a href="/browser" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#0ea5e9,#10b981);color:#fff;border:none">🌐 Download WAB Browser</a>
+          <a href="/pwa/" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#8b5cf6,#0ea5e9);color:#fff;border:none">📱 Mobile PWA</a>
+          <a href="/workspace" class="btn btn-secondary btn-lg" style="background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff;border:none">🤖 Agent Workspace</a>
         </div>
 
         <div class="hero-code fade-in fade-in-delay-2">
@@ -294,6 +298,95 @@
     </div>
   </section>
 
+  <!-- ═══════════ AGENT WORKSPACE (v2.5) ═══════════ -->
+  <section class="section" id="agent-workspace" style="background: var(--bg-secondary);">
+    <div class="container">
+      <div class="section-header">
+        <span class="label" style="background: rgba(245,158,11,0.15); color: #f59e0b;">v2.5 — Agent Workspace</span>
+        <h2>Smart Agent Workspace</h2>
+        <p>A premium 4-panel workspace for non-technical users — search, negotiate, and buy with AI assistance. Available in Arabic &amp; English with multilingual agent support.</p>
+      </div>
+
+      <div class="grid-3">
+        <div class="card fade-in" style="border-left: 3px solid #0ea5e9;">
+          <div class="card-icon blue">🌐</div>
+          <h3>Embedded Browser</h3>
+          <p>Full browser panel with URL bar, navigation controls, and secure iframe rendering. The agent opens pages, loads deals, and navigates sites — all visible in real-time.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Address bar with SSL indicator</li>
+            <li>Back, forward, refresh controls</li>
+            <li>Maximize any panel to full screen</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #10b981;">
+          <div class="card-icon green">🤖</div>
+          <h3>Smart Agent Chat</h3>
+          <p>Chat with the AI agent in any language — Arabic, English, French, Turkish, or mix them all. The agent understands your intent from any style, dialect, or slang.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Suggestion chips for quick start</li>
+            <li>Multilingual — responds in your language</li>
+            <li>Clarifying questions for precise results</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #f59e0b;">
+          <div class="card-icon orange">📊</div>
+          <h3>Negotiation Monitor</h3>
+          <p>Watch the agent work in real-time — step-by-step progress tracking, per-agent status cards, and live negotiation rounds with savings details.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Multi-step progress visualization</li>
+            <li>Per-agent cards with progress bars</li>
+            <li>Negotiation round-by-round log</li>
+          </ul>
+        </div>
+        <div class="card fade-in" style="border-left: 3px solid #8b5cf6;">
+          <div class="card-icon purple">🏆</div>
+          <h3>Results &amp; Actions</h3>
+          <p>Compare offers ranked by value with savings percentages, one-click deal links, and an "Agent Do It" button that lets the AI complete the purchase for you.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Deal cards with price comparison</li>
+            <li>One-click \"Open Deal\" links</li>
+            <li>\"Agent Do It\" auto-completion</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-1" style="border-left: 3px solid #ef4444;">
+          <div class="card-icon pink">🌍</div>
+          <h3>Bilingual UI (AR/EN)</h3>
+          <p>Full Arabic and English interface with auto-detection from browser language. Toggle instantly between languages with complete RTL/LTR layout support.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>100+ translated UI strings</li>
+            <li>Auto-detect browser language</li>
+            <li>RTL ↔ LTR with one click</li>
+          </ul>
+        </div>
+        <div class="card fade-in fade-in-delay-2" style="border-left: 3px solid #06b6d4;">
+          <div class="card-icon cyan">💎</div>
+          <h3>Subscription Plans</h3>
+          <p>Free tier (5 tasks/day), Starter, Pro (unlimited + advanced negotiation), and Enterprise plans. Admin dashboard for managing users, deals, and analytics.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>Free, Starter, Pro, Enterprise</li>
+            <li>Usage tracking with daily limits</li>
+            <li>Admin management panel</li>
+          </ul>
+        </div>
+        <div class="card fade-in" style="border-left: 3px solid #a855f7;">
+          <div class="card-icon purple">🛡️</div>
+          <h3>Dynamic Pricing Shield</h3>
+          <p>Detects when websites manipulate prices based on your device, location, cookies, or browsing history. The agent probes with 12 distinct identities to expose hidden pricing and find the lowest price invisible to normal users.</p>
+          <ul style="margin-top:12px;font-size:0.85rem;color:var(--text-secondary);list-style:disc;padding-left:20px;">
+            <li>12 identity personas (device, geo, referral, privacy)</li>
+            <li>Statistical variance &amp; z-score outlier detection</li>
+            <li>Manipulation scoring with actionable tips</li>
+            <li>Historical price-trend analysis</li>
+          </ul>
+        </div>
+      </div>
+
+      <div style="text-align:center; margin-top:32px;">
+        <a href="/workspace" class="btn btn-primary btn-lg" style="background: linear-gradient(135deg,#f59e0b,#ef4444);">Open Agent Workspace</a>
+      </div>
+    </div>
+  </section>
+
   <!-- ═══════════ HOW IT WORKS ═══════════ -->
   <section class="section" id="how-it-works" style="background: var(--bg-secondary);">
     <div class="container">
@@ -603,6 +696,7 @@ console.<span class="fn">log</span>(actions);
             <li><a href="#pricing">Pricing</a></li>
             <li><a href="/docs">Documentation</a></li>
             <li><a href="/sovereign">Sovereign Dashboard</a></li>
+            <li><a href="/workspace">Agent Workspace</a></li>
             <li data-wab-auth="signed-in" style="display:none"><a href="/dashboard">Dashboard</a></li>
           </ul>
         </div>