@clawcard/cli 2.0.8 → 2.1.0

package/extension/background.js

@@ -0,0 +1,99 @@
+// ClawCard Pay — Background Service Worker
+// Bridges native messaging host (CLI) ↔ content scripts (page frames)
+
+const NATIVE_HOST = "com.clawcard.pay";
+let nativePort = null;
+
+function connectNative() {
+  try {
+    nativePort = chrome.runtime.connectNative(NATIVE_HOST);
+
+    nativePort.onMessage.addListener((message) => {
+      if (message.action === "fill") {
+        fillActiveTab(message);
+      }
+    });
+
+    nativePort.onDisconnect.addListener(() => {
+      nativePort = null;
+      // Reconnect after delay
+      setTimeout(connectNative, 3000);
+    });
+  } catch (e) {
+    // Native host not available — retry later
+    setTimeout(connectNative, 5000);
+  }
+}
+
+async function fillActiveTab(message) {
+  try {
+    const [tab] = await chrome.tabs.query({
+      active: true,
+      currentWindow: true,
+    });
+
+    if (!tab) {
+      sendNativeResponse({ success: false, error: "No active tab" });
+      return;
+    }
+
+    // Try main frame first
+    try {
+      const response = await chrome.tabs.sendMessage(tab.id, message);
+      if (response && response.filled && response.filled.length > 0) {
+        sendNativeResponse(response);
+        return;
+      }
+    } catch {
+      // Main frame didn't have content script or no fields — try subframes
+    }
+
+    // Try all subframes
+    const frames = await chrome.webNavigation.getAllFrames({ tabId: tab.id });
+    if (!frames || frames.length === 0) {
+      sendNativeResponse({
+        success: false,
+        error: "No frames found on the current page",
+      });
+      return;
+    }
+
+    for (const frame of frames) {
+      if (frame.frameId === 0) continue; // already tried main frame
+      try {
+        const response = await chrome.tabs.sendMessage(tab.id, message, {
+          frameId: frame.frameId,
+        });
+        if (response && response.filled && response.filled.length > 0) {
+          sendNativeResponse(response);
+          return;
+        }
+      } catch {
+        // This frame doesn't have our content script or no fields — continue
+      }
+    }
+
+    sendNativeResponse({
+      success: false,
+      error: "No payment form fields found on the current page",
+    });
+  } catch (err) {
+    sendNativeResponse({
+      success: false,
+      error: err.message || "Unknown error",
+    });
+  }
+}
+
+function sendNativeResponse(response) {
+  if (nativePort) {
+    try {
+      nativePort.postMessage(response);
+    } catch {
+      // Port disconnected
+    }
+  }
+}
+
+// Start native messaging connection
+connectNative();

package/extension/content.js

@@ -0,0 +1,125 @@
+// ClawCard Pay — Content Script
+// Injected into all frames on all pages. Fills Stripe payment form fields.
+
+const NUMBER_SELECTORS = [
+  '#cardNumber',
+  '#payment-numberInput',
+  'input[name="cardnumber"]',
+  'input[name="number"]',
+  'input[name="cardNumber"]',
+  'input[autocomplete="cc-number"]',
+];
+
+const EXPIRY_SELECTORS = [
+  '#cardExpiry',
+  '#payment-expiryInput',
+  'input[name="cardExpiry"]',
+  'input[name="expiry"]',
+  'input[name="exp-date"]',
+  'input[autocomplete="cc-exp"]',
+];
+
+const CVC_SELECTORS = [
+  '#cardCvc',
+  '#payment-cvcInput',
+  'input[name="cardCvc"]',
+  'input[name="cvc"]',
+  'input[autocomplete="cc-csc"]',
+];
+
+function findField(selectors) {
+  for (const sel of selectors) {
+    const el = document.querySelector(sel);
+    if (el) return el;
+  }
+  return null;
+}
+
+function fillField(el, value) {
+  el.focus();
+  el.click();
+
+  // Use native setter to bypass React/Stripe controlled input protection
+  const nativeSetter = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    "value"
+  ).set;
+
+  // Clear first
+  nativeSetter.call(el, "");
+  el.dispatchEvent(new Event("input", { bubbles: true }));
+
+  // Type each character to simulate real keystrokes
+  // Stripe validates on each input event
+  for (let i = 0; i < value.length; i++) {
+    const char = value[i];
+    const currentVal = el.value;
+
+    el.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: char,
+        code: `Digit${char}`,
+        bubbles: true,
+      })
+    );
+    el.dispatchEvent(
+      new KeyboardEvent("keypress", {
+        key: char,
+        code: `Digit${char}`,
+        bubbles: true,
+      })
+    );
+
+    nativeSetter.call(el, currentVal + char);
+
+    el.dispatchEvent(
+      new InputEvent("input", {
+        data: char,
+        inputType: "insertText",
+        bubbles: true,
+      })
+    );
+    el.dispatchEvent(
+      new KeyboardEvent("keyup", {
+        key: char,
+        code: `Digit${char}`,
+        bubbles: true,
+      })
+    );
+  }
+
+  el.dispatchEvent(new Event("change", { bubbles: true }));
+  el.dispatchEvent(new Event("blur", { bubbles: true }));
+}
+
+// Listen for fill commands from background script
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.action !== "fill") return;
+
+  const filled = [];
+
+  const numberField = findField(NUMBER_SELECTORS);
+  if (numberField) {
+    fillField(numberField, message.pan.replace(/\s/g, ""));
+    filled.push("number");
+  }
+
+  const expiryField = findField(EXPIRY_SELECTORS);
+  if (expiryField) {
+    // Format: MM / YY (Stripe expects spaces around slash)
+    const exp = message.exp.includes("/")
+      ? message.exp.replace("/", " / ").replace("  ", " ")
+      : `${message.exp.slice(0, 2)} / ${message.exp.slice(2)}`;
+    fillField(expiryField, exp);
+    filled.push("expiry");
+  }
+
+  const cvcField = findField(CVC_SELECTORS);
+  if (cvcField) {
+    fillField(cvcField, message.cvc);
+    filled.push("cvc");
+  }
+
+  sendResponse({ success: filled.length > 0, filled });
+  return true;
+});

package/extension/icons/.keg/main-context.txt

@@ -0,0 +1,14 @@
+Timestamp: 2026-03-16T07:12:44Z
+Branch: "main"
+Type: "notes"
+Tool: Claude Code
+Summary:
+"**Task 2: Content script.**"
+========
+Timestamp: 2026-03-16T07:13:03Z
+Branch: "main"
+Type: "notes"
+Tool: Claude Code
+Summary:
+"**Task 3: Background service worker.**"
+========

package/extension/manifest.json

@@ -0,0 +1,22 @@
+{
+  "manifest_version": 3,
+  "name": "ClawCard Pay",
+  "version": "1.0.0",
+  "description": "Fills payment form fields for ClawCard agents",
+  "permissions": ["nativeMessaging", "webNavigation"],
+  "host_permissions": ["<all_urls>"],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_scripts": [{
+    "matches": ["<all_urls>"],
+    "all_frames": true,
+    "js": ["content.js"],
+    "run_at": "document_idle"
+  }],
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clawcard/cli",
-  "version": "2.0.8",
+  "version": "2.1.0",
   "description": "The ClawCard CLI — manage your agent keys, billing, and setup from the terminal",
   "bin": {
     "clawcard": "./bin/clawcard.mjs"
@@ -9,7 +9,9 @@
   "license": "MIT",
   "files": [
     "bin/",
-    "src/"
+    "src/",
+    "skill/",
+    "extension/"
   ],
   "dependencies": {
     "@clack/prompts": "^0.10.0",

package/skill/SKILL.md

@@ -0,0 +1,136 @@
+---
+name: clawcard
+description: Email, SMS, virtual cards, and credential vault for autonomous agents. Run clawcard agent commands to interact with your resources.
+---
+
+You have access to ClawCard via the `clawcard` CLI. All commands support `--json` for machine-readable output. Always pass `--json` when calling these commands.
+
+## Step 1: Check your identity
+
+```
+clawcard agent info --json
+```
+
+Returns your agent name, email address, phone number, and remaining budget.
+
+## Email
+
+List inbox:
+```
+clawcard agent emails --json [--limit 20] [--unread]
+```
+
+Send email:
+```
+clawcard agent emails send --to "recipient@example.com" --subject "Subject" --body "Body" --json
+```
+
+Mark as read:
+```
+clawcard agent emails read <email-id> --json
+```
+
+## SMS
+
+List messages:
+```
+clawcard agent sms --json [--limit 20]
+```
+
+Send SMS:
+```
+clawcard agent sms send --to "+15551234567" --body "Message" --json
+```
+
+## Virtual Cards
+
+IMPORTANT: Always list cards first. Reuse open merchant_locked cards for the same merchant.
+
+Card types (REQUIRED — you must specify one):
+- single_use: auto-closes after one charge. Use for one-time purchases (domains, invoices).
+- merchant_locked: locks to first merchant, allows repeat charges. Use for subscriptions (hosting, SaaS).
+
+List cards:
+```
+clawcard agent cards --json
+```
+
+Create card:
+```
+clawcard agent cards create --amount <cents> --type <single_use|merchant_locked> --memo "description" --json
+```
+
+Get card details (PAN, CVV, expiry):
+```
+clawcard agent cards details <card-id> --json
+```
+
+Close card:
+```
+clawcard agent cards close <card-id> --json
+```
+
+## Credentials
+
+Store and retrieve secrets. Use consistent lowercase naming.
+
+Naming convention:
+- --service: lowercase service name (openai, aws, stripe, vercel, namecheap)
+- --key: lowercase key type (api_key, secret_key, access_token, password)
+
+List stored credentials:
+```
+clawcard agent creds --json
+```
+
+Store credential:
+```
+clawcard agent creds set --service <name> --key <key> --value <secret> --json
+```
+
+Retrieve credential:
+```
+clawcard agent creds get --service <name> --key <key> --json
+```
+
+## Budget
+
+Check remaining budget:
+```
+clawcard agent budget --json
+```
+
+## Activity
+
+View activity log:
+```
+clawcard agent activity --json [--limit 50]
+```
+
+## Paying on Checkout Pages
+
+When you reach a payment form:
+1. Fill all non-payment fields yourself (name, email, address)
+2. Create a card if needed:
+   ```
+   clawcard agent cards create --amount <cents> --type single_use --memo "desc" --json
+   ```
+3. Try filling card fields yourself first (card number, expiry, CVC)
+4. If you can't access the card fields (iframe/cross-origin), run:
+   ```
+   clawcard agent pay --card-id <card-id> --json
+   ```
+   This sends the card details to the ClawCard browser extension which
+   fills payment form fields that are inside iframes you can't reach.
+5. If the extension is not installed, this will return an error —
+   fall back to telling the user they need the extension installed.
+6. After running pay, wait a moment then verify the fields are filled
+   before clicking the submit/pay button.
+
+## Tips
+
+- Always run `clawcard agent info --json` first to verify your identity.
+- Check budget before creating cards: `clawcard agent budget --json`
+- Reuse merchant_locked cards for repeat purchases at the same merchant.
+- Use single_use cards for one-time purchases — they auto-close after one charge.
+- Store credentials in the vault with consistent naming so you can find them later.

package/src/commands/agent.js

@@ -236,3 +236,75 @@ export async function agentActivityCmd(options) {
   }
   console.log();
 }
+
+// ── Pay (fill payment form via browser extension) ──
+export async function agentPayCmd(options) {
+  const { writeFileSync, existsSync, readFileSync, unlinkSync, mkdirSync } =
+    await import("fs");
+  const { join } = await import("path");
+  const { homedir } = await import("os");
+
+  const clawcardDir = join(homedir(), ".clawcard");
+  const pendingPath = join(clawcardDir, "pending-pay.json");
+  const responsePath = join(clawcardDir, "pay-response.json");
+
+  // Get card details
+  const agentId = await getAgentId();
+  let card;
+  try {
+    card = await getCardDetails(agentId, options.cardId);
+  } catch (err) {
+    if (options.json) return output({ success: false, error: err.message }, true);
+    console.log(`  Error: ${err.message}`);
+    return;
+  }
+
+  if (!card.pan || !card.cvv) {
+    const err = "Card details not available (card may be closed)";
+    if (options.json) return output({ success: false, error: err }, true);
+    console.log(`  Error: ${err}`);
+    return;
+  }
+
+  // Format expiry as MM/YY
+  const exp = `${String(card.exp_month).padStart(2, "0")}/${String(card.exp_year).slice(-2)}`;
+
+  // Clean up old response
+  try {
+    unlinkSync(responsePath);
+  } catch {}
+
+  // Write fill command for native host
+  mkdirSync(clawcardDir, { recursive: true });
+  writeFileSync(
+    pendingPath,
+    JSON.stringify({ action: "fill", pan: card.pan, exp, cvc: card.cvv })
+  );
+
+  // Poll for response (5 second timeout)
+  const start = Date.now();
+  while (Date.now() - start < 5000) {
+    if (existsSync(responsePath)) {
+      try {
+        const response = JSON.parse(readFileSync(responsePath, "utf-8"));
+        unlinkSync(responsePath);
+        if (options.json) return output(response, true);
+        if (response.success) {
+          console.log(`  Payment fields filled: ${response.filled.join(", ")}`);
+        } else {
+          console.log(`  Error: ${response.error}`);
+        }
+        return;
+      } catch {
+        // File being written — retry
+      }
+    }
+    await new Promise((r) => setTimeout(r, 200));
+  }
+
+  // Timeout
+  const err =
+    "ClawCard extension not responding. Make sure it's installed: load ~/.clawcard/extension/ in chrome://extensions";
+  if (options.json) return output({ success: false, error: err }, true);
+  console.log(`  Error: ${err}`);
+}

package/src/commands/help.js

@@ -33,6 +33,7 @@ const COMMANDS = [
   ["  agent creds get", "Retrieve credential"],
   ["  agent budget", "Check budget"],
   ["  agent activity", "Activity log"],
+  ["  agent pay", "Fill Stripe payment form"],
   ["", ""],
   [orange.bold("Keys"), ""],
   ["  keys create", "Create a new agent key"],

package/src/commands/setup.js

@@ -1,7 +1,16 @@
 import * as p from "@clack/prompts";
 import { execSync } from "child_process";
-import { readFileSync, writeFileSync, mkdirSync } from "fs";
-import { join } from "path";
+import {
+  readFileSync,
+  writeFileSync,
+  mkdirSync,
+  existsSync,
+  readdirSync,
+  statSync,
+  copyFileSync,
+} from "fs";
+import { join, dirname } from "path";
+import { fileURLToPath } from "url";
 import { homedir } from "os";
 import { requireAuth } from "../auth-guard.js";
 import { listAgents } from "../api.js";
@@ -129,6 +138,85 @@ export async function setupCommand() {
       .join("\n")
   );
 
+  // Step: Install extension files
+  const __dirname = dirname(fileURLToPath(import.meta.url));
+  const extensionSource = join(__dirname, "..", "..", "extension");
+  const extensionDest = join(home, ".clawcard", "extension");
+
+  if (existsSync(extensionSource)) {
+    const s4 = p.spinner();
+    s4.start("Installing ClawCard Pay extension...");
+
+    mkdirSync(extensionDest, { recursive: true });
+
+    function copyDir(src, dest) {
+      mkdirSync(dest, { recursive: true });
+      for (const entry of readdirSync(src)) {
+        const srcPath = join(src, entry);
+        const destPath = join(dest, entry);
+        if (statSync(srcPath).isDirectory()) {
+          copyDir(srcPath, destPath);
+        } else {
+          copyFileSync(srcPath, destPath);
+        }
+      }
+    }
+
+    copyDir(extensionSource, extensionDest);
+
+    // Register native messaging host
+    const nativeHostScript = join(__dirname, "..", "native-host.js");
+    const platform = process.platform;
+    let nativeHostDir;
+
+    if (platform === "darwin") {
+      nativeHostDir = join(
+        home,
+        "Library",
+        "Application Support",
+        "Google",
+        "Chrome",
+        "NativeMessagingHosts"
+      );
+    } else {
+      nativeHostDir = join(
+        home,
+        ".config",
+        "google-chrome",
+        "NativeMessagingHosts"
+      );
+    }
+
+    mkdirSync(nativeHostDir, { recursive: true });
+
+    const nativeHostManifest = {
+      name: "com.clawcard.pay",
+      description: "ClawCard payment form filler",
+      path: nativeHostScript,
+      type: "stdio",
+      allowed_origins: ["chrome-extension://*/"],
+    };
+
+    writeFileSync(
+      join(nativeHostDir, "com.clawcard.pay.json"),
+      JSON.stringify(nativeHostManifest, null, 2)
+    );
+
+    s4.stop("Extension installed!");
+
+    p.note(
+      [
+        "To enable payment form filling:",
+        "",
+        `1. Open Chrome → ${orange("chrome://extensions")}`,
+        `2. Enable ${orange("Developer Mode")} (top right)`,
+        `3. Click ${orange("Load Unpacked")}`,
+        `4. Select: ${chalk.dim(extensionDest)}`,
+      ].join("\n"),
+      "ClawCard Pay Extension"
+    );
+  }
+
   p.outro(
     chalk.dim('Tell your agent to "use ClawCard to check your identity"')
   );

package/src/index.js

@@ -257,6 +257,17 @@ agent
     await agentActivityCmd(options);
   });
 
+// Agent pay (fill payment form via extension)
+agent
+  .command("pay")
+  .description("Fill payment form via browser extension")
+  .requiredOption("--card-id <cardId>", "Card ID to use for payment")
+  .option("--json", "Output as JSON")
+  .action(async (options) => {
+    const { agentPayCmd } = await import("./commands/agent.js");
+    await agentPayCmd(options);
+  });
+
 // Setup
 program
   .command("setup")

package/src/native-host.js

@@ -0,0 +1,99 @@
+#!/usr/bin/env node
+
+// ClawCard Native Messaging Host
+// Chrome spawns this when the extension calls connectNative().
+// Watches for pending pay commands in ~/.clawcard/pending-pay.json
+// and relays them to the extension. Writes responses to pay-response.json.
+
+import { readFileSync, writeFileSync, unlinkSync, existsSync, watchFile } from "fs";
+import { join } from "path";
+import { homedir } from "os";
+
+const HOME = homedir();
+const PENDING_PATH = join(HOME, ".clawcard", "pending-pay.json");
+const RESPONSE_PATH = join(HOME, ".clawcard", "pay-response.json");
+
+// ── Native messaging protocol ──
+// Messages are JSON prefixed with a 32-bit length in native byte order.
+
+function sendMessage(msg) {
+  const json = JSON.stringify(msg);
+  const header = Buffer.alloc(4);
+  header.writeUInt32LE(json.length);
+  process.stdout.write(header);
+  process.stdout.write(json);
+}
+
+// Read a single native message from stdin
+function readNextMessage() {
+  return new Promise((resolve) => {
+    let buffer = Buffer.alloc(0);
+    let expectedLen = null;
+
+    function onData(chunk) {
+      buffer = Buffer.concat([buffer, chunk]);
+
+      // Read header
+      if (expectedLen === null && buffer.length >= 4) {
+        expectedLen = buffer.readUInt32LE(0);
+        buffer = buffer.slice(4);
+      }
+
+      // Read body
+      if (expectedLen !== null && buffer.length >= expectedLen) {
+        process.stdin.removeListener("data", onData);
+        const json = buffer.slice(0, expectedLen).toString();
+        try {
+          resolve(JSON.parse(json));
+        } catch {
+          resolve(null);
+        }
+      }
+    }
+
+    process.stdin.on("data", onData);
+  });
+}
+
+// Check for pending pay commands
+function checkPending() {
+  try {
+    if (existsSync(PENDING_PATH)) {
+      const content = readFileSync(PENDING_PATH, "utf-8");
+      const command = JSON.parse(content);
+      unlinkSync(PENDING_PATH);
+      sendMessage(command);
+    }
+  } catch {
+    // File doesn't exist or is being written — skip
+  }
+}
+
+// Poll for pending commands
+setInterval(checkPending, 500);
+
+// Also watch for file changes (faster response)
+try {
+  watchFile(PENDING_PATH, { interval: 200 }, () => checkPending());
+} catch {
+  // watchFile may fail if file doesn't exist yet
+}
+
+// Listen for responses from extension
+async function listenForResponses() {
+  while (true) {
+    const response = await readNextMessage();
+    if (response) {
+      try {
+        writeFileSync(RESPONSE_PATH, JSON.stringify(response));
+      } catch {
+        // write failed
+      }
+    }
+  }
+}
+
+listenForResponses();
+
+// Keep process alive
+process.stdin.resume();