PyPI - arc-builder-kit - Versions diffs - 0.2.0__py3-none-any.whl - Mend

arc-builder-kit 0.2.0__py3-none-any.whl

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 (58) hide show

arc_builder_kit/examples/agent-commerce-flows/index.html ADDED Viewed

@@ -0,0 +1,114 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Local-only agent commerce flow library for Arc paid API calls, creator payouts, and AI-agent commerce." />
+  <title>Agent Commerce Flows · Arc MCP Builder Assistant</title>
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; object-src 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests" />
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232563eb'/%3E%3Cstop offset='1' stop-color='%2306b6d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='16' fill='url(%23g)'/%3E%3Ctext x='50%25' y='55%25' text-anchor='middle' font-family='Inter,Arial,sans-serif' font-size='38' font-weight='900' fill='white'%3EA%3C/text%3E%3C/svg%3E" />
+  <style>
+    :root { color-scheme: dark; --bg: #070a12; --panel: rgba(255,255,255,.075); --line: rgba(255,255,255,.15); --text: #fbf7ff; --muted: #c8c0df; --accent: #7cf7d4; --accent2: #b388ff; --warn: #ffd166; --good: #80ffa9; }
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); background: radial-gradient(circle at 10% 6%, rgba(124,247,212,.2), transparent 34rem), radial-gradient(circle at 90% 2%, rgba(179,136,255,.22), transparent 36rem), linear-gradient(180deg, #070a12 0%, #11172c 68%, #070a12 100%); line-height: 1.65; }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
+    .skip-link { position: absolute; left: -9999px; top: 12px; z-index: 10; padding: 10px 14px; border-radius: 999px; background: var(--accent); color: #07110e; font-weight: 950; }
+    .skip-link:focus { left: 12px; }
+    .wrap { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
+    header { padding: 26px 0 8px; }
+    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+    .brand { color: var(--text); font-weight: 950; letter-spacing: -.02em; }
+    nav { display: flex; gap: 10px; flex-wrap: wrap; }
+    nav a, button, .pill { border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.055); color: var(--text); padding: 10px 14px; font-weight: 850; cursor: pointer; }
+    button.primary, .pill.active { background: var(--accent); color: #07110e; border-color: transparent; }
+    button:disabled { opacity: .48; cursor: not-allowed; }
+    .hero { display: grid; grid-template-columns: 1.05fr .95fr; gap: 18px; padding: 34px 0 22px; align-items: stretch; }
+    .eyebrow { color: var(--accent); font-size: .78rem; font-weight: 950; text-transform: uppercase; letter-spacing: .16em; }
+    h1, h2, h3 { letter-spacing: -.035em; line-height: 1.08; }
+    h1 { margin: 12px 0 14px; font-size: clamp(2.1rem, 7vw, 4.7rem); }
+    h2 { margin-top: 0; font-size: clamp(1.35rem, 3vw, 2.05rem); }
+    p, li, label, .meta { color: var(--muted); }
+    .panel, .flow-card { border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.095), var(--panel)); box-shadow: 0 24px 80px rgba(0,0,0,.34); padding: clamp(20px, 4vw, 32px); }
+    .flow-nav, .actions { display: flex; gap: 10px; flex-wrap: wrap; }
+    .layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: 18px; padding-bottom: 72px; align-items: start; }
+    .field { display: grid; gap: 8px; margin-bottom: 14px; }
+    input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.25); color: var(--text); padding: 12px 14px; font: inherit; }
+    textarea { min-height: 82px; resize: vertical; }
+    pre { white-space: pre-wrap; word-break: break-word; overflow-x: auto; padding: 18px; border-radius: 18px; border: 1px solid var(--line); background: rgba(0,0,0,.4); color: #eafff8; }
+    code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
+    .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
+    .status { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(124,247,212,.3); color: var(--accent); background: rgba(124,247,212,.08); padding: 8px 12px; border-radius: 999px; font-weight: 900; }
+    .warning { border-color: rgba(255,209,102,.38); background: rgba(255,209,102,.08); }
+    .event-log { list-style: none; padding: 0; display: grid; gap: 10px; }
+    .event-log li { border-left: 3px solid var(--good); padding-left: 12px; }
+    @media (max-width: 940px) { .hero, .layout, .grid { grid-template-columns: 1fr; } nav { display: none; } }
+    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
+  </style>
+</head>
+<body>
+  <a class="skip-link" href="#content">Skip to content</a>
+  <header class="wrap">
+    <div class="topbar">
+      <a class="brand" href="../../">Arc MCP Builder Assistant</a>
+      <nav aria-label="Flow navigation">
+        <a href="../../">Home</a>
+        <a href="../../docs/view.html#agent-commerce-flow-library.md">Flow docs</a>
+        <a href="../agent-commerce-components/">Components</a>
+        <a href="../../docs/view.html#x402-mcp-manifest.md">x402 boundary</a>
+      </nav>
+    </div>
+  </header>
+  <main id="content" class="wrap">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Phase 3 · product flows, not settlement</p>
+        <h1>Paid API, creator payout, and AI-agent commerce flows.</h1>
+        <p>Choose a scenario, edit the review fields, freeze money-critical data, and export a local artifact. This is a product contract for future Arc Testnet work, not a wallet flow.</p>
+        <p class="status" id="flow-status">draft_review</p>
+      </div>
+      <div class="panel warning">
+        <h2>No wallet surface in this slice</h2>
+        <ul>
+          <li>No private keys, browser wallet requests, signing, or transaction broadcast.</li>
+          <li>No backend calls, remote RPC calls, or live x402/Gateway proof verification.</li>
+          <li>Every flow keeps `humanApprovalRequired: true` and `transactionBroadcast: false`.</li>
+        </ul>
+      </div>
+    </section>
+    <section class="panel" aria-label="Choose flow">
+      <h2>Flow templates</h2>
+      <div class="flow-nav" id="flow-nav"></div>
+    </section>
+    <section class="layout">
+      <div class="panel">
+        <h2 id="selected-title">Flow editor</h2>
+        <p id="selected-description"></p>
+        <div class="field"><label for="agent-name">Agent name</label><input id="agent-name" /></div>
+        <div class="field"><label for="recipient">Recipient placeholder</label><input id="recipient" /></div>
+        <div class="field"><label for="amount">Amount, USDC</label><input id="amount" type="number" min="0" step="0.01" /></div>
+        <div class="field"><label for="purpose">Purpose</label><input id="purpose" /></div>
+        <div class="field"><label for="evidence">Evidence / source note</label><textarea id="evidence"></textarea></div>
+        <div class="actions">
+          <button class="primary" id="freeze-flow">Freeze flow request</button>
+          <button id="approve-flow" disabled>Record local approval</button>
+          <button id="simulate-receipt" disabled>Simulate receipt</button>
+          <button id="reset-flow">Reset flow</button>
+        </div>
+      </div>
+      <div>
+        <div class="grid">
+          <article class="flow-card"><h3>Agent</h3><pre id="agent-json"></pre></article>
+          <article class="flow-card"><h3>Request</h3><pre id="request-json"></pre></article>
+          <article class="flow-card"><h3>Receipt</h3><pre id="receipt-json"></pre></article>
+        </div>
+        <article class="panel" style="margin-top:16px"><h2>Event log</h2><ol class="event-log" id="event-log"></ol></article>
+        <article class="panel" style="margin-top:16px"><h2>Combined flow object</h2><pre id="flow-json"></pre></article>
+      </div>
+    </section>
+  </main>
+  <script src="./flows.js" defer></script>
+</body>
+</html>

arc_builder_kit/examples/agent-commerce-live/commerce-live.js ADDED Viewed

@@ -0,0 +1,190 @@
+// Agent commerce live — real on-chain evidence from Arc Testnet.
+// This page shows static verified transaction data. No network calls.
+const ARC_TESTNET_CHAIN_ID = 5042002;
+const ARC_TESTNET_CHAIN_HEX = "0x4cef52";
+const WALLET_ADDRESS = "0x0cd9b933302d90bfe295471deac7f4eafd9ea401";
+const USDC_CONTRACT = "0x3600000000000000000000000000000000000000";
+const EXPLORER_BASE = "https://testnet.arcscan.app";
+const walletState = [
+  ["Wallet address", "0x0cd9…a401"],
+  ["Wallet type", "Circle agent (SCA)"],
+  ["Chain", "Arc Testnet"],
+  ["Chain ID", "5042002 / 0x4cef52"],
+  ["USDC contract", "0x3600…0000"],
+  ["USDC decimals", "6 (ERC-20) / 18 (native)"],
+  ["Gateway domain", "26 (Arc)"],
+  ["Session", "testnet (OTP)"],
+  ["Starting balance", "20.00 USDC"],
+  ["On-chain balance", "~14.05 USDC"],
+  ["Gateway balance", "3.9965 USDC (Arc)"],
+];
+const transactions = [
+  {
+    op: "TRANSFER (faucet)",
+    status: "COMPLETE",
+    amount: "20 USDC",
+    block: "48020204",
+    txHash: "0xd52b5296112b3ef7e6…",
+    detail: "Circle faucet drip: 20 USDC native + 20 USDC ERC-20",
+  },
+  {
+    op: "TRANSFER (self-test)",
+    status: "COMPLETE",
+    amount: "1 USDC",
+    block: "48020319",
+    txHash: "0xb570a204eb4d81d361…",
+    detail: "Self-transfer: wallet deployment and functionality test",
+  },
+  {
+    op: "CCTP APPROVE",
+    status: "COMPLETE",
+    amount: "—",
+    block: "48020338",
+    txHash: "0x044184a5ce5760a276…",
+    detail: "USDC approve for TokenMessengerV2 (CCTP bridge)",
+  },
+  {
+    op: "CCTP BURN (bridge)",
+    status: "COMPLETE",
+    amount: "1 USDC",
+    block: "48020350",
+    txHash: "0x7855802e76412ee50a…",
+    detail: "Bridge: Arc Testnet → Base Sepolia via CCTP (domain 26 → 6)",
+  },
+  {
+    op: "TRANSFER (agent payment)",
+    status: "COMPLETE",
+    amount: "0.5 USDC",
+    block: "48027390",
+    txHash: "0x490df63904f7722c36…",
+    detail: "Agent pays 0.5 USDC for paid API call simulation → 0xdEaD",
+  },
+  {
+    op: "TRANSFER (micro-payment)",
+    status: "COMPLETE",
+    amount: "0.25 USDC",
+    block: "48027419",
+    txHash: "0xda2ed5d09c781cbf5c…",
+    detail: "Agent pays 0.25 USDC for micro-service call → 0xdEaD",
+  },
+  {
+    op: "GATEWAY DEPOSIT",
+    status: "COMPLETE",
+    amount: "5 USDC",
+    block: "48028452",
+    txHash: "0x2f458c54c4d65868170…",
+    detail: "Deposit 5 USDC into Circle Gateway on Arc (domain 26) via direct",
+  },
+  {
+    op: "GATEWAY WITHDRAW",
+    status: "COMPLETE",
+    amount: "1 USDC",
+    block: "—",
+    txHash: "0x3ffb115ba2c453f5c07…",
+    detail: "Withdraw 1 USDC from Gateway back to wallet (fee: 0.0035)",
+  },
+  {
+    op: "ESCROW: approve(spender, 1M)",
+    status: "COMPLETE",
+    amount: "1 USDC approved",
+    block: "48029256",
+    txHash: "0x61751274d823349308…",
+    detail: "approve(0xdEaD, 1000000) — escrow agent can spend 1 USDC",
+  },
+  {
+    op: "ESCROW: fund (job posting)",
+    status: "COMPLETE",
+    amount: "0.75 USDC",
+    block: "48029281",
+    txHash: "0x95584de37f93d4233a…",
+    detail: "Job poster funds escrow with 0.75 USDC for data analysis task",
+  },
+  {
+    op: "ESCROW: worker payout",
+    status: "COMPLETE",
+    amount: "0.5 USDC",
+    block: "48029312",
+    txHash: "0xbe8651d059314d2993…",
+    detail: "Escrow releases 0.5 USDC to worker after human review",
+  },
+];
+const unitEconomics = [
+  ["Starting balance", "20.00 USDC"],
+  ["Total payments sent", "1.75 USDC"],
+  ["Gateway deposit", "5.00 USDC"],
+  ["Gateway withdraw", "1.00 USDC (fee: 0.0035)"],
+  ["Gateway balance", "3.9965 USDC (domain 26)"],
+  ["Total network fees", "~0.09 USDC"],
+  ["Bridge amount", "1.00 USDC"],
+  ["On-chain balance", "~14.05 USDC"],
+  ["Cost per payment", "~0.004 USDC"],
+  ["Total transactions", "10 (all COMPLETE)"],
+];
+function renderWalletState() {
+  const el = document.getElementById("wallet-state");
+  if (!el) return;
+  el.innerHTML = walletState
+    .map(
+      (row) =>
+        '<div class="info-row"><span class="info-label">' +
+        row[0] +
+        '</span><span class="info-value">' +
+        row[1] +
+        "</span></div>"
+    )
+    .join("");
+}
+function renderTxLog() {
+  const el = document.getElementById("tx-log");
+  if (!el) return;
+  el.innerHTML = transactions
+    .map(
+      (tx) =>
+        '<div class="tx-card">' +
+        '<div class="tx-card-header">' +
+        '<span class="tx-op">' +
+        tx.op +
+        '</span><span class="tx-status complete">' +
+        tx.status +
+        "</span></div>" +
+        '<div class="tx-detail">Amount: <strong>' +
+        tx.amount +
+        "</strong> | Block: " +
+        tx.block +
+        "</div>" +
+        '<div class="tx-detail tx-hash">Tx: ' +
+        tx.txHash +
+        "</div>" +
+        '<div class="tx-detail">' +
+        tx.detail +
+        "</div></div>"
+    )
+    .join("");
+}
+function renderUnitEconomics() {
+  const el = document.getElementById("unit-economics");
+  if (!el) return;
+  el.innerHTML = unitEconomics
+    .map(
+      (row) =>
+        '<div class="info-row"><span class="info-label">' +
+        row[0] +
+        '</span><span class="info-value">' +
+        row[1] +
+        "</span></div>"
+    )
+    .join("");
+}
+document.addEventListener("DOMContentLoaded", function () {
+  renderWalletState();
+  renderTxLog();
+  renderUnitEconomics();
+});

arc_builder_kit/examples/agent-commerce-live/index.html ADDED Viewed

@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Live agent commerce evidence on Arc Testnet — real USDC transactions via Circle agent wallet." />
+  <title>Agent Commerce Live · Arc MCP Builder Assistant</title>
+  <style>
+    :root { color-scheme: dark; --bg: #070916; --panel: rgba(255,255,255,.075); --line: rgba(255,255,255,.16); --text: #fbf9ff; --muted: #c6bedc; --accent: #7cf7d4; --circle: #00d4ff; --good: #89ffb8; --warn: #ffd166; }
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); line-height: 1.64; background: radial-gradient(circle at 12% 2%, rgba(0,212,255,.18), transparent 34rem), radial-gradient(circle at 90% 6%, rgba(124,247,212,.24), transparent 38rem), linear-gradient(180deg, #070916 0%, #121832 70%, #070916 100%); }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
+    .wrap { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }
+    header { padding: 26px 0 12px; }
+    .topbar, nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+    .topbar { justify-content: space-between; }
+    .brand { color: var(--text); font-weight: 950; letter-spacing: -.02em; }
+    nav a, .badge { border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; background: rgba(255,255,255,.055); color: var(--text); font-weight: 850; }
+    .badge { display: inline-flex; width: fit-content; }
+    .badge.good { color: var(--good); border-color: rgba(137,255,184,.36); background: rgba(137,255,184,.08); }
+    .badge.circle { color: var(--circle); border-color: rgba(0,212,255,.36); background: rgba(0,212,255,.08); }
+    .hero { padding: 34px 0 22px; }
+    .layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; padding-bottom: 72px; align-items: start; }
+    .panel { border: 1px solid var(--line); border-radius: 28px; padding: clamp(20px, 4vw, 32px); background: linear-gradient(180deg, rgba(255,255,255,.1), var(--panel)); box-shadow: 0 22px 80px rgba(0,0,0,.34); }
+    .warning { border-color: rgba(255,209,102,.36); background: rgba(255,209,102,.08); }
+    .eyebrow { color: var(--circle); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 950; }
+    h1, h2, h3 { letter-spacing: -.035em; line-height: 1.08; }
+    h1 { margin: 12px 0 14px; font-size: clamp(2.15rem, 7vw, 4.6rem); }
+    h2 { margin-top: 0; font-size: clamp(1.35rem, 3vw, 2rem); }
+    p, li, label { color: var(--muted); }
+    .info-grid { display: grid; gap: 10px; }
+    .info-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.2); gap: 12px; }
+    .info-label { color: var(--muted); font-size: .85rem; white-space: nowrap; }
+    .info-value { color: var(--text); font-weight: 800; font-family: ui-monospace, "SF Mono", monospace; font-size: .82rem; text-align: right; word-break: break-all; }
+    .tx-list { display: grid; gap: 12px; }
+    .tx-card { border: 1px solid var(--line); border-radius: 18px; padding: 16px; background: rgba(0,0,0,.2); }
+    .tx-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
+    .tx-op { font-weight: 900; font-size: .85rem; }
+    .tx-status { font-size: .75rem; padding: 3px 10px; border-radius: 999px; }
+    .tx-status.complete { background: rgba(137,255,184,.12); color: var(--good); }
+    .tx-detail { font-size: .8rem; color: var(--muted); font-family: ui-monospace, monospace; word-break: break-all; }
+    .tx-hash { color: var(--accent); font-size: .78rem; }
+    code { font-family: ui-monospace, "SF Mono", monospace; font-size: .85rem; background: rgba(0,0,0,.3); padding: 2px 6px; border-radius: 6px; }
+    @media (max-width: 920px) { .layout { grid-template-columns: 1fr; } nav { display: none; } }
+    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
+  </style>
+</head>
+<body>
+  <a class="skip-link" href="#agent-commerce-live" style="position:absolute;top:12px;left:-9999px;z-index:10;padding:10px 14px;border-radius:999px;background:var(--accent);color:#06110f;font-weight:950;">Skip to content</a>
+  <header class="wrap">
+    <div class="topbar">
+      <a class="brand" href="../../">Arc MCP Builder Assistant</a>
+      <nav aria-label="Agent commerce live navigation">
+        <a href="../../">Home</a>
+        <a href="../../docs/view.html#agent-commerce-live-evidence.md">Docs</a>
+        <a href="../circle-wallet-integration/">Circle wallet lab</a>
+        <a href="../arc-agent-treasury-lab/">Treasury lab</a>
+      </nav>
+    </div>
+  </header>
+  <main id="agent-commerce-live" class="wrap">
+    <section class="hero">
+      <p class="eyebrow">Live on-chain evidence · Arc Testnet</p>
+      <h1>Agent commerce live</h1>
+      <p>Real USDC transactions on Arc Testnet via Circle agent wallet. First agent-to-service payments on Arc, verified on-chain.</p>
+      <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
+        <span class="badge circle">Circle agent wallet</span>
+        <span class="badge good">10 transactions · all COMPLETE</span>
+        <span class="badge good">Arc Testnet · 5042002</span>
+      </div>
+    </section>
+    <section class="layout">
+      <div class="panel">
+        <h2>Wallet state</h2>
+        <div class="info-grid" id="wallet-state"></div>
+      </div>
+      <div class="panel">
+        <h2>Transaction log</h2>
+        <div class="tx-list" id="tx-log"></div>
+      </div>
+    </section>
+    <section class="layout">
+      <div class="panel">
+        <h2>Unit economics</h2>
+        <div class="info-grid" id="unit-economics"></div>
+      </div>
+      <div class="panel warning">
+        <h2>Safety boundaries</h2>
+        <ul>
+          <li>Testnet only — faucet USDC has no real value.</li>
+          <li>No private keys in repo — Circle CLI manages keys internally.</li>
+          <li>No custody, no mainnet, no autonomous spending.</li>
+          <li>Every transaction was human-approved via Circle CLI.</li>
+          <li>Burn address (0xdEaD) simulates service provider without real counterparty.</li>
+          <li>No secrets committed — wallet address is public information.</li>
+        </ul>
+      </div>
+    </section>
+  </main>
+  <script src="./commerce-live.js" defer></script>
+</body>
+</html>

arc_builder_kit/examples/agent-commerce-review-packet/index.html ADDED Viewed

@@ -0,0 +1,96 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="description" content="Local-only review packet exporter for Arc agent commerce demos." />
+  <title>Agent Commerce Review Packet · Arc MCP Builder Assistant</title>
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self'; object-src 'none'; base-uri 'none'; form-action 'none'; upgrade-insecure-requests" />
+  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232563eb'/%3E%3Cstop offset='1' stop-color='%2306b6d4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='64' height='64' rx='16' fill='url(%23g)'/%3E%3Ctext x='50%25' y='55%25' text-anchor='middle' font-family='Inter,Arial,sans-serif' font-size='38' font-weight='900' fill='white'%3EA%3C/text%3E%3C/svg%3E" />
+  <style>
+    :root { color-scheme: dark; --bg: #070916; --panel: rgba(255,255,255,.075); --line: rgba(255,255,255,.16); --text: #fbf9ff; --muted: #c6bedc; --accent: #7cf7d4; --violet: #b597ff; --warn: #ffd166; --good: #89ffb8; }
+    * { box-sizing: border-box; }
+    html { scroll-behavior: smooth; }
+    body { margin: 0; min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); line-height: 1.64; background: radial-gradient(circle at 12% 2%, rgba(124,247,212,.18), transparent 34rem), radial-gradient(circle at 90% 6%, rgba(181,151,255,.24), transparent 38rem), linear-gradient(180deg, #070916 0%, #121832 70%, #070916 100%); }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
+    .skip-link { position: absolute; top: 12px; left: -9999px; z-index: 10; padding: 10px 14px; border-radius: 999px; background: var(--accent); color: #06110f; font-weight: 950; }
+    .skip-link:focus { left: 12px; }
+    .wrap { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }
+    header { padding: 26px 0 12px; }
+    .topbar, nav, .actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+    .topbar { justify-content: space-between; }
+    .brand { color: var(--text); font-weight: 950; letter-spacing: -.02em; }
+    nav a, button, .badge { border: 1px solid var(--line); border-radius: 999px; padding: 10px 14px; background: rgba(255,255,255,.055); color: var(--text); font-weight: 850; }
+    button { cursor: pointer; }
+    button.primary { background: var(--accent); color: #06110f; border-color: transparent; }
+    .hero, .layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 18px; align-items: start; }
+    .hero { padding: 34px 0 22px; }
+    .layout { padding-bottom: 72px; }
+    .panel { border: 1px solid var(--line); border-radius: 28px; padding: clamp(20px, 4vw, 32px); background: linear-gradient(180deg, rgba(255,255,255,.1), var(--panel)); box-shadow: 0 22px 80px rgba(0,0,0,.34); }
+    .warning { border-color: rgba(255,209,102,.36); background: rgba(255,209,102,.08); }
+    .eyebrow { color: var(--accent); font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 950; }
+    h1, h2, h3 { letter-spacing: -.035em; line-height: 1.08; }
+    h1 { margin: 12px 0 14px; font-size: clamp(2.15rem, 7vw, 4.6rem); }
+    h2 { margin-top: 0; font-size: clamp(1.35rem, 3vw, 2rem); }
+    p, li, label { color: var(--muted); }
+    .field { display: grid; gap: 8px; margin-bottom: 14px; }
+    input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 16px; background: rgba(0,0,0,.24); color: var(--text); padding: 12px 14px; font: inherit; }
+    textarea { min-height: 86px; resize: vertical; }
+    pre { white-space: pre-wrap; word-break: break-word; overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; padding: 18px; background: rgba(0,0,0,.42); color: #eafff8; }
+    .badge { display: inline-flex; width: fit-content; color: var(--accent); border-color: rgba(124,247,212,.36); background: rgba(124,247,212,.08); }
+    @media (max-width: 920px) { .hero, .layout { grid-template-columns: 1fr; } nav { display: none; } }
+    @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
+  </style>
+</head>
+<body>
+  <a class="skip-link" href="#content">Skip to content</a>
+  <header class="wrap">
+    <div class="topbar">
+      <a class="brand" href="../../">Arc MCP Builder Assistant</a>
+      <nav aria-label="Review packet navigation">
+        <a href="../../">Home</a>
+        <a href="../../docs/view.html#agent-commerce-review-packet.md">Packet docs</a>
+        <a href="../agent-identity-profile-preview/">Identity preview</a>
+        <a href="../agent-commerce-flows/">Commerce flows</a>
+        <a href="../job-escrow-simulator/">Escrow simulator</a>
+      </nav>
+    </div>
+  </header>
+  <main id="content" class="wrap">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Local review artifact · no spend authority</p>
+        <h1>Export a reviewer packet before live agent commerce.</h1>
+        <p>Compose agent identity, commerce flow, escrow outcome, approval notes, and safety controls into one local JSON object. This is not a wallet handoff or transaction request.</p>
+        <p class="badge" id="packet-status">draft_packet</p>
+      </div>
+      <div class="panel warning">
+        <h2>Safety boundary</h2>
+        <ul>
+          <li>No wallet connection, signing, broadcast, RPC, backend, or settlement.</li>
+          <li>Terminal no-payout outcomes keep payout release disabled.</li>
+          <li>Human approval notes are local review data, not spend authorization.</li>
+        </ul>
+      </div>
+    </section>
+    <section class="layout">
+      <div class="panel">
+        <h2>Packet fields</h2>
+        <div class="field"><label for="agent-name">Agent name</label><input id="agent-name" value="Research Buyer Agent" /></div>
+        <div class="field"><label for="flow-kind">Commerce flow</label><select id="flow-kind"><option value="paid_api_call">Paid API call</option><option value="creator_payout">Creator payout</option><option value="ai_agent_commerce">AI-agent commerce</option><option value="job_escrow">Job escrow</option></select></div>
+        <div class="field"><label for="amount">Amount, USDC</label><input id="amount" type="number" min="0" step="0.01" value="2.50" /></div>
+        <div class="field"><label for="outcome">Review outcome</label><select id="outcome"><option value="pending_local_review">Pending local review</option><option value="approved_for_local_demo">Approved for local demo</option><option value="rejected_no_payout">Rejected no payout</option><option value="disputed_manual_review">Disputed manual review</option><option value="expired_no_payout">Expired no payout</option><option value="cancelled_no_payout">Cancelled no payout</option></select></div>
+        <div class="field"><label for="approval-note">Approval / close note</label><textarea id="approval-note">Reviewer checked money fields, disabled wallet controls, and local-only status.</textarea></div>
+        <div class="actions"><button class="primary" id="freeze-packet">Freeze packet</button><button id="reset-packet">Reset</button></div>
+      </div>
+      <div class="panel">
+        <h2>Review packet JSON</h2>
+        <pre id="packet-json"></pre>
+      </div>
+    </section>
+  </main>
+  <script src="./packet.js" defer></script>
+</body>
+</html>

arc_builder_kit/examples/agent-commerce-review-packet/packet.js ADDED Viewed

@@ -0,0 +1,125 @@
+const ARC_REVIEW_PACKET = Object.freeze({
+  schema: 'arc-mcp-builder-assistant.agentCommerce.reviewPacket.v1',
+  network: {
+    name: 'arc-testnet',
+    chainId: 5042002,
+    chainIdHex: '0x4cef52',
+  },
+});
+const fields = {
+  agentName: document.querySelector('#agent-name'),
+  flowKind: document.querySelector('#flow-kind'),
+  amount: document.querySelector('#amount'),
+  outcome: document.querySelector('#outcome'),
+  approvalNote: document.querySelector('#approval-note'),
+};
+const nodes = {
+  status: document.querySelector('#packet-status'),
+  packet: document.querySelector('#packet-json'),
+};
+const buttons = {
+  freeze: document.querySelector('#freeze-packet'),
+  reset: document.querySelector('#reset-packet'),
+};
+let packetState = 'draft_packet';
+let frozenAt = null;
+function isNoPayoutOutcome(outcome) {
+  return ['rejected_no_payout', 'disputed_manual_review', 'expired_no_payout', 'cancelled_no_payout'].includes(outcome);
+}
+function amountIsValid(value) {
+  return /^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(String(value || '').trim())
+    && Number(value) > 0;
+}
+function moneyAmount() {
+  return amountIsValid(fields.amount.value) ? Number(fields.amount.value).toFixed(2) : '0.00';
+}
+function controls() {
+  return {
+    localOnly: true,
+    walletConnected: false,
+    walletActionEnabled: false,
+    signingEnabled: false,
+    transactionBroadcast: false,
+    networkCallsEnabled: false,
+    backendCalls: false,
+    remoteRpcCalls: false,
+    settlementEnabled: false,
+    reputationWritten: false,
+    validationRequested: false,
+    secretRequired: false,
+    mainnetEnabled: false,
+    humanApprovalRequired: true,
+  };
+}
+function packetObject() {
+  const outcome = fields.outcome.value;
+  return {
+    schema: ARC_REVIEW_PACKET.schema,
+    state: packetState,
+    status: 'local_review_packet',
+    frozenAt,
+    network: ARC_REVIEW_PACKET.network,
+    agentIdentity: {
+      status: 'unregistered_local_preview',
+      agentName: fields.agentName.value.trim(),
+      registrationTransactionPrepared: false,
+    },
+    commerceFlow: {
+      kind: fields.flowKind.value,
+      asset: 'USDC',
+      amount: moneyAmount(),
+      moneyFieldsFrozen: packetState === 'packet_frozen_for_review',
+      sourceExamples: [
+        'examples/agent-identity-profile-preview/',
+        'examples/agent-commerce-flows/',
+        'examples/job-escrow-simulator/',
+      ],
+    },
+    escrowReview: {
+      outcome,
+      noPayoutOutcome: isNoPayoutOutcome(outcome),
+      payoutReleased: false,
+      payoutReleaseReason: isNoPayoutOutcome(outcome) ? 'terminal_no_payout_local_state' : 'wallet_and_settlement_disabled',
+      approvalNote: fields.approvalNote.value.trim(),
+    },
+    controls: controls(),
+  };
+}
+function render() {
+  const packetFrozen = packetState === 'packet_frozen_for_review';
+  nodes.status.textContent = packetState;
+  nodes.packet.textContent = JSON.stringify(packetObject(), null, 2);
+  for (const field of Object.values(fields)) {
+    field.disabled = packetFrozen;
+  }
+  buttons.freeze.disabled = packetFrozen || !amountIsValid(fields.amount.value);
+}
+buttons.freeze.addEventListener('click', () => {
+  packetState = 'packet_frozen_for_review';
+  frozenAt = new Date().toISOString();
+  render();
+});
+buttons.reset.addEventListener('click', () => {
+  packetState = 'draft_packet';
+  frozenAt = null;
+  fields.agentName.value = 'Research Buyer Agent';
+  fields.flowKind.value = 'paid_api_call';
+  fields.amount.value = '2.50';
+  fields.outcome.value = 'pending_local_review';
+  fields.approvalNote.value = 'Reviewer checked money fields, disabled wallet controls, and local-only status.';
+  render();
+});
+for (const field of Object.values(fields)) {
+  field.addEventListener('input', render);
+  field.addEventListener('change', render);
+}
+render();