web-agent-bridge 3.4.0 → 3.9.0

package/examples/self-discovery.js

@@ -0,0 +1,106 @@
+#!/usr/bin/env node
+/**
+ * Dogfood demo: WAB uses its own SDK to discover itself.
+ *
+ *   node examples/self-discovery.js                 # runs against webagentbridge.com
+ *   node examples/self-discovery.js https://acme.com
+ *
+ * Demonstrates:
+ *   • discover() — pulls /.well-known/wab.json (preferred) or falls back to
+ *     JSON-LD / OpenGraph / sitemap.xml / robots.txt.
+ *   • Trust validation via the published Ed25519 signature + DNS pin.
+ *   • SSL fingerprint comparison.
+ */
+
+const { discover } = require('../sdk/auto-discovery');
+const tls = require('node:tls');
+const dns = require('node:dns').promises;
+const crypto = require('node:crypto');
+
+const target = process.argv[2] || 'https://www.webagentbridge.com';
+
+function pad(s, n) { return String(s).padEnd(n); }
+
+async function fetchTlsFingerprint(host) {
+  return new Promise((resolve) => {
+    const sock = tls.connect({ host, port: 443, servername: host, rejectUnauthorized: false }, () => {
+      const cert = sock.getPeerCertificate(false);
+      sock.end();
+      const fp = (cert.fingerprint256 || '').replace(/:/g, '').toLowerCase();
+      resolve({ fp, valid_to: cert.valid_to, issuer: cert.issuer && cert.issuer.O });
+    });
+    sock.on('error', () => resolve({ fp: null }));
+    sock.setTimeout(8000, () => { sock.destroy(); resolve({ fp: null }); });
+  });
+}
+
+async function dnsTxt(host) {
+  try { return (await dns.resolveTxt(`_wab.${host}`)).map((r) => r.join('')); }
+  catch { return []; }
+}
+
+function verifyEd25519(payload, signatureB64, pkB64) {
+  try {
+    const pkRaw = Buffer.from(pkB64, 'base64');
+    const der = Buffer.concat([Buffer.from('302a300506032b6570032100', 'hex'), pkRaw]);
+    const pk = crypto.createPublicKey({ key: der, format: 'der', type: 'spki' });
+    const canon = canonicalJson(payload);
+    return crypto.verify(null, Buffer.from(canon, 'utf8'), pk, Buffer.from(signatureB64, 'base64'));
+  } catch (e) { return false; }
+}
+
+function canonicalJson(obj) {
+  if (obj === null || typeof obj !== 'object') return JSON.stringify(obj);
+  if (Array.isArray(obj)) return '[' + obj.map(canonicalJson).join(',') + ']';
+  const keys = Object.keys(obj).sort();
+  return '{' + keys.map((k) => JSON.stringify(k) + ':' + canonicalJson(obj[k])).join(',') + '}';
+}
+
+(async () => {
+  console.log(`\n  Web Agent Bridge — Self-Discovery Demo`);
+  console.log(`  Target: ${target}\n`);
+
+  const env = await discover(target);
+
+  console.log(`  ${pad('source', 14)} ${env.source}`);
+  console.log(`  ${pad('site', 14)} ${env.site && env.site.name}`);
+  console.log(`  ${pad('description', 14)} ${(env.site && env.site.description) || '—'}`);
+  console.log(`  ${pad('actions', 14)} ${env.actions.length}`);
+  for (const a of env.actions.slice(0, 6)) console.log(`     • ${a.name} — ${a.description || ''}`);
+  console.log(`  ${pad('sitemap urls', 14)} ${env.sitemap.length}`);
+
+  // Signed wab.json branch
+  if (env.source === 'wab.json' && env.raw) {
+    const { payload, signature } = env.raw;
+    if (payload && signature) {
+      const host = new URL(target).hostname;
+      const txt = (await dnsTxt(host))[0] || (await dnsTxt(host.replace(/^www\./, '')))[0] || '';
+      const pkMatch = txt.match(/pk=ed25519:([A-Za-z0-9+/=]+)/);
+      const sslDnsMatch = txt.match(/ssl_thumbprint=([0-9a-f]+)/i);
+      const pkB64 = pkMatch ? pkMatch[1] : (payload.trust && payload.trust.pk || '').replace(/^ed25519:/, '');
+      const sigB64 = String(signature).replace(/^ed25519:/, '');
+
+      const sigOk = verifyEd25519(payload, sigB64, pkB64);
+      console.log(`\n  Trust:`);
+      console.log(`     ed25519 signature  ${sigOk ? 'VALID ✓' : 'INVALID ✗'}`);
+      console.log(`     dns pk source      ${pkMatch ? '_wab DNS TXT' : 'wab.json'}`);
+
+      // SSL pin check
+      const live = await fetchTlsFingerprint(host);
+      const pinned = (payload.trust && payload.trust.ssl && payload.trust.ssl.thumbprint) || sslDnsMatch && sslDnsMatch[1];
+      if (live.fp) {
+        const match = pinned && live.fp.toLowerCase() === pinned.toLowerCase();
+        console.log(`     ssl fingerprint    ${match ? 'PINNED MATCH ✓' : (pinned ? 'MISMATCH ✗' : 'no pin')}`);
+        console.log(`        live           ${live.fp.slice(0, 32)}…`);
+        if (pinned) console.log(`        pinned         ${pinned.slice(0, 32)}…`);
+        if (live.valid_to) console.log(`        valid_to       ${live.valid_to}`);
+      }
+    }
+  } else {
+    console.log(`\n  No /.well-known/wab.json found — auto-discovery returned a normalized envelope.`);
+    if (env.products && env.products.length) console.log(`     ${env.products.length} schema.org Product nodes detected`);
+    if (env.meta && env.meta.og && env.meta.og.site_name) console.log(`     OpenGraph site_name: ${env.meta.og.site_name}`);
+  }
+
+  console.log('');
+})().catch((e) => { console.error('demo failed:', e); process.exit(1); });

package/examples/shopify-hydrogen/README.md

@@ -1,74 +1,74 @@
-# Shopify Hydrogen + WAB
-
-This example wires WAB into a Hydrogen storefront client component and exposes practical commerce actions.
-
-## Install
-
-```bash
-npm install @web-agent-bridge/react
-```
-
-## Component
-
-Create `app/components/WabHydrogenBridge.tsx`:
-
-```tsx
-'use client';
-
-import { useEffect } from 'react';
-import { WABProvider, useWAB, useWABAction } from '@web-agent-bridge/react';
-
-function BridgeInner() {
-  const { ready, discover, instance } = useWAB({
-    name: 'Hydrogen Storefront',
-    actions: {
-      getCartCount: {
-        description: 'Return cart item count from cart badge',
-        run: () => {
-          const badge = document.querySelector('[data-cart-count], .cart-count');
-          const value = Number((badge?.textContent || '0').trim()) || 0;
-          return { count: value };
-        }
-      },
-      addFirstVisibleProductToCart: {
-        description: 'Click the first visible add-to-cart button on the page',
-        run: () => {
-          const btn = Array.from(document.querySelectorAll('button, a')).find((el) =>
-            /add\s*to\s*cart/i.test((el.textContent || '').trim())
-          );
-          if (!btn) return { success: false, error: 'No add-to-cart button found' };
-          (btn as HTMLElement).click();
-          return { success: true };
-        }
-      }
-    }
-  });
-
-  const { run: runGetCartCount, result: cartCount } = useWABAction<{ count: number }>('getCartCount', {
-    instance
-  });
-
-  useEffect(() => {
-    if (!ready) return;
-    discover().then((doc) => console.log('WAB discover:', doc));
-    runGetCartCount().catch(() => {});
-  }, [ready, discover, runGetCartCount]);
-
-  return (
-    <div>
-      <p>WAB status: {ready ? 'ready' : 'loading'}</p>
-      <p>Cart count: {cartCount?.count ?? 0}</p>
-    </div>
-  );
-}
-
-export default function WabHydrogenBridge() {
-  return (
-    <WABProvider scriptSrc="https://webagentbridge.com/script/wab.min.js">
-      <BridgeInner />
-    </WABProvider>
-  );
-}
-```
-
-Import this component inside any Hydrogen page so WAB is available to agents.
+# Shopify Hydrogen + WAB
+
+This example wires WAB into a Hydrogen storefront client component and exposes practical commerce actions.
+
+## Install
+
+```bash
+npm install @web-agent-bridge/react
+```
+
+## Component
+
+Create `app/components/WabHydrogenBridge.tsx`:
+
+```tsx
+'use client';
+
+import { useEffect } from 'react';
+import { WABProvider, useWAB, useWABAction } from '@web-agent-bridge/react';
+
+function BridgeInner() {
+  const { ready, discover, instance } = useWAB({
+    name: 'Hydrogen Storefront',
+    actions: {
+      getCartCount: {
+        description: 'Return cart item count from cart badge',
+        run: () => {
+          const badge = document.querySelector('[data-cart-count], .cart-count');
+          const value = Number((badge?.textContent || '0').trim()) || 0;
+          return { count: value };
+        }
+      },
+      addFirstVisibleProductToCart: {
+        description: 'Click the first visible add-to-cart button on the page',
+        run: () => {
+          const btn = Array.from(document.querySelectorAll('button, a')).find((el) =>
+            /add\s*to\s*cart/i.test((el.textContent || '').trim())
+          );
+          if (!btn) return { success: false, error: 'No add-to-cart button found' };
+          (btn as HTMLElement).click();
+          return { success: true };
+        }
+      }
+    }
+  });
+
+  const { run: runGetCartCount, result: cartCount } = useWABAction<{ count: number }>('getCartCount', {
+    instance
+  });
+
+  useEffect(() => {
+    if (!ready) return;
+    discover().then((doc) => console.log('WAB discover:', doc));
+    runGetCartCount().catch(() => {});
+  }, [ready, discover, runGetCartCount]);
+
+  return (
+    <div>
+      <p>WAB status: {ready ? 'ready' : 'loading'}</p>
+      <p>Cart count: {cartCount?.count ?? 0}</p>
+    </div>
+  );
+}
+
+export default function WabHydrogenBridge() {
+  return (
+    <WABProvider scriptSrc="https://webagentbridge.com/script/wab.min.js">
+      <BridgeInner />
+    </WABProvider>
+  );
+}
+```
+
+Import this component inside any Hydrogen page so WAB is available to agents.

package/examples/vision-agent.js

@@ -1,171 +1,171 @@
-/**
- * Example: Vision-based AI Agent using WAB
- *
- * This agent demonstrates how a "vision" or "natural language" AI agent
- * (like OpenAI Operator, Claude Computer Use, etc.) can interact with
- * WAB using descriptive intent instead of explicit action names.
- *
- * The agent describes what it wants to do in natural language,
- * and the IntentResolver matches it to available WAB actions.
- *
- * HOW IT WORKS:
- *   The IntentResolver is a LOCAL, keyword-based NLP mapper — it does NOT
- *   call any external AI/ML API. It scores WAB actions against the intent
- *   string using word overlap, category bonuses, and synonym matching.
- *   This keeps the example dependency-free and easy to understand.
- *
- *   To integrate a real LLM (e.g., OpenAI, Claude), replace the
- *   IntentResolver.resolve() method with an API call that returns the
- *   best-matching action name from the available actions list.
- *
- * Prerequisites:
- *   npm install puppeteer
- *
- * Usage:
- *   node examples/vision-agent.js <url>
- */
-
-const puppeteer = require('puppeteer');
-
-const TARGET_URL = process.argv[2] || 'http://localhost:3000';
-
-// ─── Intent Resolver: maps natural language to WAB actions ────────────
-// This is a lightweight LOCAL resolver (no external API calls).
-// It uses keyword matching, synonym expansion, and category heuristics.
-class IntentResolver {
-  constructor(actions) {
-    this.actions = actions;
-  }
-
-  /**
-   * Find the best matching action for a natural language intent.
-   * Uses keyword matching and description similarity.
-   * @param {string} intent — Natural language description (e.g., "sign up for an account")
-   * @returns {{ action: object, confidence: number } | null}
-   */
-  resolve(intent) {
-    const intentLower = intent.toLowerCase();
-    const intentWords = intentLower.split(/\s+/);
-    let bestMatch = null;
-    let bestScore = 0;
-
-    for (const action of this.actions) {
-      const descLower = (action.description + ' ' + action.name).toLowerCase();
-      let score = 0;
-
-      // Exact name match
-      if (intentLower.includes(action.name.replace(/_/g, ' '))) {
-        score += 5;
-      }
-
-      // Word overlap scoring
-      for (const word of intentWords) {
-        if (word.length < 3) continue;
-        if (descLower.includes(word)) score += 1;
-      }
-
-      // Category bonus
-      if (action.category === 'navigation' && /navigate|go to|open|visit/i.test(intent)) score += 2;
-      if (action.trigger === 'fill_and_submit' && /fill|submit|sign up|register|login|form/i.test(intent)) score += 2;
-      if (action.trigger === 'click' && /click|press|tap|select|button/i.test(intent)) score += 1;
-
-      // Synonym matching
-      const synonyms = {
-        'sign up': ['register', 'create account', 'signup'],
-        'log in': ['login', 'sign in', 'signin'],
-        'search': ['find', 'look for', 'query'],
-        'submit': ['send', 'post', 'confirm'],
-        'navigate': ['go to', 'open', 'visit']
-      };
-
-      for (const [key, syns] of Object.entries(synonyms)) {
-        if (syns.some(s => intentLower.includes(s)) && descLower.includes(key)) score += 3;
-        if (intentLower.includes(key) && syns.some(s => descLower.includes(s))) score += 3;
-      }
-
-      if (score > bestScore) {
-        bestScore = score;
-        bestMatch = action;
-      }
-    }
-
-    if (!bestMatch || bestScore < 1) return null;
-
-    const confidence = Math.min(1, bestScore / 10);
-    return { action: bestMatch, confidence };
-  }
-}
-
-// ─── Vision Agent ─────────────────────────────────────────────────────
-async function main() {
-  console.log(`\n👁️  WAB Vision Agent`);
-  console.log(`   Target: ${TARGET_URL}\n`);
-
-  const browser = await puppeteer.launch({ headless: true });
-  const page = await browser.newPage();
-
-  await page.goto(TARGET_URL, { waitUntil: 'networkidle2' });
-  console.log(`✓ Page loaded: ${await page.title()}`);
-
-  // Wait for bridge
-  await page.waitForFunction(() => typeof window.AICommands !== 'undefined', { timeout: 10000 });
-  console.log('✓ WAB bridge detected\n');
-
-  // Get available actions
-  const actions = await page.evaluate(() => window.AICommands.getActions());
-  const resolver = new IntentResolver(actions);
-
-  console.log(`📋 Available actions: ${actions.length}`);
-  actions.forEach(a => console.log(`   • ${a.name} — ${a.description}`));
-
-  // ── Simulate vision agent intents ─────────────────────────────────
-  const intents = [
-    'I want to create a new account',
-    'Take me to the documentation page',
-    'Click the login button',
-    'Show me the dashboard'
-  ];
-
-  console.log('\n🧠 Resolving natural language intents:\n');
-
-  for (const intent of intents) {
-    const match = resolver.resolve(intent);
-
-    if (match) {
-      console.log(`  Intent: "${intent}"`);
-      console.log(`  → Action: ${match.action.name} (${match.action.trigger})`);
-      console.log(`  → Confidence: ${(match.confidence * 100).toFixed(0)}%`);
-      console.log(`  → Description: ${match.action.description}`);
-
-      // Execute if confidence is high enough
-      if (match.confidence >= 0.3) {
-        const result = await page.evaluate(
-          (name) => window.AICommands.execute(name),
-          match.action.name
-        );
-        console.log(`  → Executed: ${result.success ? '✓' : '✗ ' + result.error}`);
-      } else {
-        console.log(`  → Skipped: confidence too low`);
-      }
-    } else {
-      console.log(`  Intent: "${intent}"`);
-      console.log(`  → No matching action found`);
-    }
-    console.log('');
-  }
-
-  // ── Demonstrate page info with security context ───────────────────
-  const pageInfo = await page.evaluate(() => window.AICommands.getPageInfo());
-  console.log('📊 Page Info:');
-  console.log(`   Security sandbox: ${pageInfo.security.sandboxActive ? '✓ Active' : '✗ Inactive'}`);
-  console.log(`   Self-healing: ${pageInfo.selfHealing.tracked} tracked, ${pageInfo.selfHealing.healed} healed`);
-  console.log(`   Stealth mode: ${pageInfo.stealthMode ? 'Enabled' : 'Disabled'}`);
-
-  console.log('\n✓ Vision agent session complete.');
-  await browser.close();
-}
-
-main().catch((err) => {
-  console.error('Agent error:', err.message);
-  process.exit(1);
-});
+/**
+ * Example: Vision-based AI Agent using WAB
+ *
+ * This agent demonstrates how a "vision" or "natural language" AI agent
+ * (like OpenAI Operator, Claude Computer Use, etc.) can interact with
+ * WAB using descriptive intent instead of explicit action names.
+ *
+ * The agent describes what it wants to do in natural language,
+ * and the IntentResolver matches it to available WAB actions.
+ *
+ * HOW IT WORKS:
+ *   The IntentResolver is a LOCAL, keyword-based NLP mapper — it does NOT
+ *   call any external AI/ML API. It scores WAB actions against the intent
+ *   string using word overlap, category bonuses, and synonym matching.
+ *   This keeps the example dependency-free and easy to understand.
+ *
+ *   To integrate a real LLM (e.g., OpenAI, Claude), replace the
+ *   IntentResolver.resolve() method with an API call that returns the
+ *   best-matching action name from the available actions list.
+ *
+ * Prerequisites:
+ *   npm install puppeteer
+ *
+ * Usage:
+ *   node examples/vision-agent.js <url>
+ */
+
+const puppeteer = require('puppeteer');
+
+const TARGET_URL = process.argv[2] || 'http://localhost:3000';
+
+// ─── Intent Resolver: maps natural language to WAB actions ────────────
+// This is a lightweight LOCAL resolver (no external API calls).
+// It uses keyword matching, synonym expansion, and category heuristics.
+class IntentResolver {
+  constructor(actions) {
+    this.actions = actions;
+  }
+
+  /**
+   * Find the best matching action for a natural language intent.
+   * Uses keyword matching and description similarity.
+   * @param {string} intent — Natural language description (e.g., "sign up for an account")
+   * @returns {{ action: object, confidence: number } | null}
+   */
+  resolve(intent) {
+    const intentLower = intent.toLowerCase();
+    const intentWords = intentLower.split(/\s+/);
+    let bestMatch = null;
+    let bestScore = 0;
+
+    for (const action of this.actions) {
+      const descLower = (action.description + ' ' + action.name).toLowerCase();
+      let score = 0;
+
+      // Exact name match
+      if (intentLower.includes(action.name.replace(/_/g, ' '))) {
+        score += 5;
+      }
+
+      // Word overlap scoring
+      for (const word of intentWords) {
+        if (word.length < 3) continue;
+        if (descLower.includes(word)) score += 1;
+      }
+
+      // Category bonus
+      if (action.category === 'navigation' && /navigate|go to|open|visit/i.test(intent)) score += 2;
+      if (action.trigger === 'fill_and_submit' && /fill|submit|sign up|register|login|form/i.test(intent)) score += 2;
+      if (action.trigger === 'click' && /click|press|tap|select|button/i.test(intent)) score += 1;
+
+      // Synonym matching
+      const synonyms = {
+        'sign up': ['register', 'create account', 'signup'],
+        'log in': ['login', 'sign in', 'signin'],
+        'search': ['find', 'look for', 'query'],
+        'submit': ['send', 'post', 'confirm'],
+        'navigate': ['go to', 'open', 'visit']
+      };
+
+      for (const [key, syns] of Object.entries(synonyms)) {
+        if (syns.some(s => intentLower.includes(s)) && descLower.includes(key)) score += 3;
+        if (intentLower.includes(key) && syns.some(s => descLower.includes(s))) score += 3;
+      }
+
+      if (score > bestScore) {
+        bestScore = score;
+        bestMatch = action;
+      }
+    }
+
+    if (!bestMatch || bestScore < 1) return null;
+
+    const confidence = Math.min(1, bestScore / 10);
+    return { action: bestMatch, confidence };
+  }
+}
+
+// ─── Vision Agent ─────────────────────────────────────────────────────
+async function main() {
+  console.log(`\n👁️  WAB Vision Agent`);
+  console.log(`   Target: ${TARGET_URL}\n`);
+
+  const browser = await puppeteer.launch({ headless: true });
+  const page = await browser.newPage();
+
+  await page.goto(TARGET_URL, { waitUntil: 'networkidle2' });
+  console.log(`✓ Page loaded: ${await page.title()}`);
+
+  // Wait for bridge
+  await page.waitForFunction(() => typeof window.AICommands !== 'undefined', { timeout: 10000 });
+  console.log('✓ WAB bridge detected\n');
+
+  // Get available actions
+  const actions = await page.evaluate(() => window.AICommands.getActions());
+  const resolver = new IntentResolver(actions);
+
+  console.log(`📋 Available actions: ${actions.length}`);
+  actions.forEach(a => console.log(`   • ${a.name} — ${a.description}`));
+
+  // ── Simulate vision agent intents ─────────────────────────────────
+  const intents = [
+    'I want to create a new account',
+    'Take me to the documentation page',
+    'Click the login button',
+    'Show me the dashboard'
+  ];
+
+  console.log('\n🧠 Resolving natural language intents:\n');
+
+  for (const intent of intents) {
+    const match = resolver.resolve(intent);
+
+    if (match) {
+      console.log(`  Intent: "${intent}"`);
+      console.log(`  → Action: ${match.action.name} (${match.action.trigger})`);
+      console.log(`  → Confidence: ${(match.confidence * 100).toFixed(0)}%`);
+      console.log(`  → Description: ${match.action.description}`);
+
+      // Execute if confidence is high enough
+      if (match.confidence >= 0.3) {
+        const result = await page.evaluate(
+          (name) => window.AICommands.execute(name),
+          match.action.name
+        );
+        console.log(`  → Executed: ${result.success ? '✓' : '✗ ' + result.error}`);
+      } else {
+        console.log(`  → Skipped: confidence too low`);
+      }
+    } else {
+      console.log(`  Intent: "${intent}"`);
+      console.log(`  → No matching action found`);
+    }
+    console.log('');
+  }
+
+  // ── Demonstrate page info with security context ───────────────────
+  const pageInfo = await page.evaluate(() => window.AICommands.getPageInfo());
+  console.log('📊 Page Info:');
+  console.log(`   Security sandbox: ${pageInfo.security.sandboxActive ? '✓ Active' : '✗ Inactive'}`);
+  console.log(`   Self-healing: ${pageInfo.selfHealing.tracked} tracked, ${pageInfo.selfHealing.healed} healed`);
+  console.log(`   Stealth mode: ${pageInfo.stealthMode ? 'Enabled' : 'Disabled'}`);
+
+  console.log('\n✓ Vision agent session complete.');
+  await browser.close();
+}
+
+main().catch((err) => {
+  console.error('Agent error:', err.message);
+  process.exit(1);
+});