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/circle-wallet-integration/wallet-lab.js ADDED Viewed

@@ -0,0 +1,91 @@
+// Circle wallet integration lab — local-only preview, no network calls.
+// This page does NOT connect to Circle, RPC, or any external service.
+// Use the `circle` CLI for live operations.
+const ARC_TESTNET_CHAIN_ID = 5042002;
+const ARC_TESTNET_CHAIN_HEX = "0x4cef52";
+const ARC_TESTNET_USDC = "0x3600000000000000000000000000000000000000";
+const GATEWAY_DOMAIN_ARC = 26;
+const circleWalletLab = {
+  // Static preview data — replace with CLI output when running locally.
+  walletAddress: "0x0cd9b933302d90bfe295471deac7f4eafd9ea401",
+  session: "testnet",
+  balances: {
+    usdcErc20: "19",
+    usdcNative: "19.99",
+  },
+  network: {
+    name: "Arc Testnet",
+    chainId: ARC_TESTNET_CHAIN_ID,
+    chainIdHex: ARC_TESTNET_CHAIN_HEX,
+    usdcContract: ARC_TESTNET_USDC,
+    gatewayDomain: GATEWAY_DOMAIN_ARC,
+  },
+};
+function shortAddr(addr) {
+  if (!addr || addr.length < 10) return addr;
+  return addr.slice(0, 6) + "…" + addr.slice(-4);
+}
+function renderStatus() {
+  const el = document.getElementById("wallet-status");
+  if (el) {
+    el.textContent = "Session: " + circleWalletLab.session + " (preview)";
+  }
+  const sessEl = document.getElementById("wallet-session");
+  if (sessEl) {
+    sessEl.textContent = circleWalletLab.session;
+  }
+}
+function renderAddress() {
+  const el = document.getElementById("wallet-address");
+  if (el) {
+    el.textContent = shortAddr(circleWalletLab.walletAddress);
+  }
+}
+function renderBalance() {
+  const erc20 = document.getElementById("wallet-balance-erc20");
+  if (erc20) {
+    erc20.textContent = circleWalletLab.balances.usdcErc20 + " USDC (6 dec)";
+  }
+  const native = document.getElementById("wallet-balance-native");
+  if (native) {
+    native.textContent = circleWalletLab.balances.usdcNative + " USDC (18 dec)";
+  }
+}
+function renderAll() {
+  renderStatus();
+  renderAddress();
+  renderBalance();
+}
+document.addEventListener("DOMContentLoaded", function () {
+  renderAll();
+  const refreshBtn = document.getElementById("refresh-preview");
+  if (refreshBtn) {
+    refreshBtn.addEventListener("click", function () {
+      renderAll();
+      refreshBtn.textContent = "Preview refreshed";
+      setTimeout(function () {
+        refreshBtn.textContent = "Refresh preview";
+      }, 1500);
+    });
+  }
+  const cliBtn = document.getElementById("show-cli");
+  if (cliBtn) {
+    cliBtn.addEventListener("click", function () {
+      const out = document.getElementById("cli-output");
+      if (out) {
+        out.style.display = out.style.display === "none" ? "block" : "none";
+        cliBtn.textContent = out.style.display === "none" ? "Show CLI commands" : "Hide CLI commands";
+      }
+    });
+  }
+});

arc_builder_kit/examples/job-escrow-simulator/index.html ADDED Viewed

@@ -0,0 +1,121 @@
+<!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 ERC-8183-style job escrow simulator for Arc MCP Builder Assistant." />
+  <title>Job Escrow Simulator · 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: #080a12; --panel: rgba(255,255,255,.065); --line: rgba(255,255,255,.14); --text: #f7f3ff; --muted: #bfb6d9; --accent: #7cf7d4; --accent2: #b388ff; --warn: #ffd166; --good: #7cf7a8; }
+    * { 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 20% 0%, rgba(124,247,212,.18), transparent 32rem), radial-gradient(circle at 82% 8%, rgba(179,136,255,.2), transparent 34rem), linear-gradient(180deg, #080a12 0%, #11152a 60%, #080a12 100%); line-height: 1.65; }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    a:focus-visible, button: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: #06110d; font-weight: 900; }
+    .skip-link:focus { left: 12px; }
+    .wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
+    header { padding: 26px 0 10px; }
+    .topbar, .hero, .grid, .actions { display: flex; gap: 16px; }
+    .topbar { align-items: center; justify-content: space-between; flex-wrap: wrap; }
+    .brand { color: var(--text); font-weight: 950; letter-spacing: -.02em; }
+    nav { display: flex; gap: 10px; flex-wrap: wrap; }
+    nav a, button, .button { 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, .button.primary { background: var(--accent); color: #07110f; border-color: transparent; }
+    button:disabled { cursor: not-allowed; opacity: .46; }
+    .hero { padding: 34px 0 22px; align-items: stretch; }
+    .hero > * { flex: 1; min-width: 0; }
+    .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.9rem); }
+    h2 { margin-top: 0; font-size: clamp(1.4rem, 3vw, 2.2rem); }
+    p, li, label { color: var(--muted); }
+    .panel { border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.09), var(--panel)); box-shadow: 0 24px 80px rgba(0,0,0,.34); padding: clamp(20px, 4vw, 34px); }
+    .grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; padding-bottom: 72px; }
+    .grid > * { min-width: 0; }
+    .actions { flex-wrap: wrap; }
+    .field { display: grid; gap: 8px; margin-bottom: 14px; }
+    input, 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: 92px; 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,.38); color: #eafff8; }
+    code { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }
+    .status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(124,247,212,.3); color: var(--accent); background: rgba(124,247,212,.08); font-weight: 900; }
+    .timeline { list-style: none; padding: 0; display: grid; gap: 10px; }
+    .timeline li { border-left: 3px solid var(--line); padding-left: 12px; }
+    .timeline li.done { border-color: var(--good); color: var(--text); }
+    .warning { border-color: rgba(255,209,102,.38); background: rgba(255,209,102,.08); }
+    @media (max-width: 860px) { .hero, .grid { display: 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="Simulator navigation">
+        <a href="../../">Home</a>
+        <a href="../../docs/view.html#job-escrow-demo.md">Escrow spec</a>
+        <a href="../../docs/view.html#arc-builder-readiness-checklist.md">Readiness checklist</a>
+        <a href="../payment-intent-playground/">Payment playground</a>
+      </nav>
+    </div>
+  </header>
+  <main id="content" class="wrap">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Local-only simulator · no wallet connection</p>
+        <h1>Job escrow flow without touching funds.</h1>
+        <p>This ERC-8183-style simulator shows how a user could post a job, fund escrow, receive agent output, request changes, reject, dispute, expire, cancel, or manually approve payout. It does not connect to a wallet, broadcast transactions, or talk to any backend.</p>
+        <p class="status" id="status-pill">Draft job</p>
+      </div>
+      <div class="panel warning">
+        <h2>Safety boundary</h2>
+        <ul>
+          <li>Human keeps approval control.</li>
+          <li>Escrow funding, change requests, and payout are simulated UI states.</li>
+          <li>Rejection, dispute, expiry, and cancellation are terminal local review states with no payout release.</li>
+          <li>No private keys, no custody, no mainnet, no autonomous spending.</li>
+          <li>Reviewer changes and disputes are simulated review notes; they do not message an agent, arbitrator, validator, wallet, or backend.</li>
+          <li>Use this before adding any real Arc Testnet transaction path.</li>
+        </ul>
+      </div>
+    </section>
+    <section class="grid">
+      <div class="panel">
+        <h2>Job details</h2>
+        <div class="field"><label for="job-title">Job title</label><input id="job-title" value="Summarize Arc agent docs" /></div>
+        <div class="field"><label for="budget">Budget, USDC</label><input id="budget" type="number" min="1" step="1" value="25" /></div>
+        <div class="field"><label for="agent">Agent</label><input id="agent" value="Research Agent" /></div>
+        <div class="field"><label for="deliverable">Expected deliverable</label><textarea id="deliverable">A concise build note with cited Arc docs, open questions, and next implementation tasks.</textarea></div>
+        <div class="field"><label for="revision-note">Reviewer change request / revision note</label><textarea id="revision-note">Add a risk section before payout approval.</textarea></div>
+        <div class="field"><label for="dispute-note">Reject / dispute / close note</label><textarea id="dispute-note">Output missed acceptance criteria; keep funds unreleased in the local simulation.</textarea></div>
+        <div class="actions">
+          <button class="primary" id="post-job">Post job</button>
+          <button id="accept-job" disabled>Agent accepts</button>
+          <button id="fund-escrow" disabled>Fund escrow</button>
+          <button id="submit-work" disabled>Submit work</button>
+          <button id="request-changes" disabled>Request changes</button>
+          <button id="revise-work" disabled>Revise work</button>
+          <button id="reject-work" disabled>Reject no payout</button>
+          <button id="open-dispute" disabled>Open dispute</button>
+          <button id="expire-job" disabled>Expire job</button>
+          <button id="cancel-job" disabled>Cancel job</button>
+          <button id="approve-payout" disabled>Approve payout</button>
+          <button id="reset-flow">Reset</button>
+        </div>
+      </div>
+      <div class="panel">
+        <h2>Reviewable escrow object</h2>
+        <pre id="escrow-json"></pre>
+        <h3>Event timeline</h3>
+        <ol class="timeline" id="timeline"></ol>
+      </div>
+    </section>
+  </main>
+  <script src="./simulator.js" defer></script>
+</body>
+</html>

arc_builder_kit/examples/job-escrow-simulator/simulator.js ADDED Viewed

@@ -0,0 +1,162 @@
+const stateOrder = ['draft', 'posted', 'accepted_by_agent', 'escrow_funded_simulation', 'work_submitted', 'changes_requested', 'rejected_no_payout', 'disputed_manual_review', 'expired_no_payout', 'cancelled_no_payout', 'payout_approved_simulation'];
+const statusLabels = {
+  draft: 'Draft job',
+  posted: 'Posted for agent review',
+  accepted_by_agent: 'Accepted by agent',
+  escrow_funded_simulation: 'Escrow funded simulation',
+  work_submitted: 'Work submitted for human review',
+  changes_requested: 'Changes requested',
+  rejected_no_payout: 'Rejected without payout',
+  disputed_manual_review: 'Disputed manual review',
+  expired_no_payout: 'Expired without payout',
+  cancelled_no_payout: 'Cancelled without payout',
+  payout_approved_simulation: 'Payout approved simulation',
+};
+const buttons = {
+  post: document.querySelector('#post-job'),
+  accept: document.querySelector('#accept-job'),
+  fund: document.querySelector('#fund-escrow'),
+  submit: document.querySelector('#submit-work'),
+  requestChanges: document.querySelector('#request-changes'),
+  revise: document.querySelector('#revise-work'),
+  reject: document.querySelector('#reject-work'),
+  dispute: document.querySelector('#open-dispute'),
+  expire: document.querySelector('#expire-job'),
+  cancel: document.querySelector('#cancel-job'),
+  approve: document.querySelector('#approve-payout'),
+  reset: document.querySelector('#reset-flow'),
+};
+const fields = {
+  title: document.querySelector('#job-title'),
+  budget: document.querySelector('#budget'),
+  agent: document.querySelector('#agent'),
+  deliverable: document.querySelector('#deliverable'),
+  revisionNote: document.querySelector('#revision-note'),
+  disputeNote: document.querySelector('#dispute-note'),
+};
+const statusPill = document.querySelector('#status-pill');
+const jsonPanel = document.querySelector('#escrow-json');
+const timeline = document.querySelector('#timeline');
+let status = 'draft';
+let events = [];
+let changesRequestedCount = 0;
+function nowIso() {
+  return new Date().toISOString();
+}
+function budgetIsValid(value) {
+  return /^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(String(value || '').trim())
+    && Number(value) > 0;
+}
+function escrowObject() {
+  return {
+    schema: 'arc-mcp-builder-assistant.jobEscrow.simulation.v1',
+    status,
+    job: {
+      title: fields.title.value.trim(),
+      budget: budgetIsValid(fields.budget.value) ? Number(fields.budget.value).toFixed(2) : '0.00',
+      asset: 'USDC',
+      chain: 'Arc Testnet later; local simulation now',
+      expectedDeliverable: fields.deliverable.value.trim(),
+    },
+    parties: {
+      requester: 'human_reviewer',
+      agent: fields.agent.value.trim(),
+      escrow: 'simulated_local_object',
+    },
+    controls: {
+      walletConnected: false,
+      walletActionEnabled: false,
+      broadcastsTransactions: false,
+      transactionBroadcast: false,
+      talksToBackend: false,
+      signingEnabled: false,
+      humanApprovalRequired: true,
+      mainnetEnabled: false,
+      localOnly: true,
+      realEscrowContract: false,
+      payoutReleased: status === 'payout_approved_simulation' ? 'simulated_only' : false,
+      terminalNoPayoutStates: ['rejected_no_payout', 'disputed_manual_review', 'expired_no_payout', 'cancelled_no_payout'],
+      contactsArbitrator: false,
+      contactsValidator: false,
+      arcTestnetChainId: 5042002,
+      arcTestnetChainIdHex: '0x4cef52',
+    },
+    review: {
+      changesRequestedCount,
+      latestRevisionNote: fields.revisionNote.value.trim(),
+      latestCloseNote: fields.disputeNote.value.trim(),
+      terminalStateRequiresNewJob: ['rejected_no_payout', 'disputed_manual_review', 'expired_no_payout', 'cancelled_no_payout'].includes(status),
+      payoutRelease: 'simulated_only_after_human_approval',
+      agentOutputTrustedOnlyAfterReview: true,
+    },
+    events,
+  };
+}
+function addEvent(label) {
+  events = [...events, { at: nowIso(), label, status }];
+}
+function setStatus(nextStatus, label) {
+  if (nextStatus === 'changes_requested') {
+    changesRequestedCount += 1;
+  }
+  status = nextStatus;
+  addEvent(label || statusLabels[nextStatus]);
+  render();
+}
+function render() {
+  const currentIndex = stateOrder.indexOf(status);
+  statusPill.textContent = statusLabels[status];
+  jsonPanel.textContent = JSON.stringify(escrowObject(), null, 2);
+  timeline.replaceChildren(...events.map((event) => {
+    const li = document.createElement('li');
+    li.className = stateOrder.indexOf(event.status) <= currentIndex ? 'done' : '';
+    li.textContent = `${event.label} · ${event.at}`;
+    return li;
+  }));
+  const termsFrozen = status !== 'draft';
+  for (const field of [fields.title, fields.budget, fields.agent, fields.deliverable]) {
+    field.disabled = termsFrozen;
+  }
+  buttons.post.disabled = status !== 'draft' || !budgetIsValid(fields.budget.value);
+  buttons.accept.disabled = status !== 'posted';
+  buttons.fund.disabled = status !== 'accepted_by_agent';
+  buttons.submit.disabled = status !== 'escrow_funded_simulation';
+  buttons.requestChanges.disabled = status !== 'work_submitted';
+  buttons.revise.disabled = status !== 'changes_requested';
+  buttons.reject.disabled = status !== 'work_submitted';
+  buttons.dispute.disabled = !['work_submitted', 'changes_requested'].includes(status);
+  buttons.expire.disabled = !['posted', 'accepted_by_agent', 'escrow_funded_simulation', 'changes_requested'].includes(status);
+  buttons.cancel.disabled = !['draft', 'posted', 'accepted_by_agent'].includes(status);
+  buttons.approve.disabled = status !== 'work_submitted';
+}
+function reset() {
+  status = 'draft';
+  changesRequestedCount = 0;
+  fields.disputeNote.value = 'Output missed acceptance criteria; keep funds unreleased in the local simulation.';
+  events = [{ at: nowIso(), label: 'Draft created locally', status }];
+  render();
+}
+buttons.post.addEventListener('click', () => setStatus('posted', 'Human posted the job for agent review'));
+buttons.accept.addEventListener('click', () => setStatus('accepted_by_agent', 'Agent accepted the job terms'));
+buttons.fund.addEventListener('click', () => setStatus('escrow_funded_simulation', 'Human simulated funding escrow'));
+buttons.submit.addEventListener('click', () => setStatus('work_submitted', 'Agent submitted the deliverable for review'));
+buttons.requestChanges.addEventListener('click', () => setStatus('changes_requested', 'Reviewer requested changes before payout approval'));
+buttons.revise.addEventListener('click', () => setStatus('work_submitted', 'Agent resubmitted revised work for review'));
+buttons.reject.addEventListener('click', () => setStatus('rejected_no_payout', 'Reviewer rejected the work; no payout released'));
+buttons.dispute.addEventListener('click', () => setStatus('disputed_manual_review', 'Reviewer opened a manual dispute; no payout released'));
+buttons.expire.addEventListener('click', () => setStatus('expired_no_payout', 'Job expired locally; no payout released'));
+buttons.cancel.addEventListener('click', () => setStatus('cancelled_no_payout', 'Human cancelled the job locally; no payout released'));
+buttons.approve.addEventListener('click', () => setStatus('payout_approved_simulation', 'Human approved simulated payout release'));
+buttons.reset.addEventListener('click', reset);
+for (const field of Object.values(fields)) {
+  field.addEventListener('input', render);
+}
+reset();

arc_builder_kit/examples/payment-intent-demo/index.html ADDED Viewed

@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Arc Payment Intent Demo Mockup · Arc MCP Builder Assistant</title>
+  <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" />
+  <meta name="description" content="Static UI mockup of the Arc payment-intent demo: an AI agent prepares a USDC request and a human keeps approval control. Part of the Arc MCP Builder Assistant kit." />
+  <meta name="author" content="Arc MCP Builder Assistant contributors" />
+  <meta name="robots" content="index,follow" />
+  <meta name="theme-color" content="#05060a" />
+  <meta name="color-scheme" content="dark" />
+  <meta name="referrer" content="no-referrer" />
+  <meta http-equiv="Content-Security-Policy" content="default-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="canonical" href="https://anstrays.github.io/arc-mcp-builder-assistant/examples/payment-intent-demo/" />
+  <meta property="og:title" content="Arc Payment Intent Demo Mockup" />
+  <meta property="og:description" content="Static UI mockup of an AI-prepared, human-approved USDC payment intent on Arc." />
+  <meta property="og:type" content="website" />
+  <style>
+    :root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif; }
+    body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(circle at top, #263bff 0, #080914 34%, #05060a 100%); color: #f7f7ff; padding: 32px 0; }
+    main { width: min(920px, calc(100vw - 32px)); display: grid; gap: 18px; }
+    a { color: inherit; }
+    a:focus-visible,
+    button:focus-visible {
+      outline: 2px solid #8ea2ff;
+      outline-offset: 3px;
+      border-radius: 8px;
+    }
+    .card { border: 1px solid rgba(255,255,255,.14); background: rgba(10, 12, 24, .78); border-radius: 24px; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
+    .eyebrow { color: #8ea2ff; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 700; }
+    h1 { margin: 8px 0 10px; font-size: clamp(32px, 6vw, 64px); line-height: .95; }
+    p { color: #cbd2ff; line-height: 1.65; }
+    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
+    .intent { display: grid; gap: 12px; }
+    .row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
+    .label { color: #8e95bc; }
+    .value { font-weight: 700; text-align: right; }
+    button { border: 0; border-radius: 999px; padding: 14px 20px; font-weight: 800; cursor: default; background: #f7f7ff; color: #080914; }
+    button:disabled { opacity: .72; }
+    .secondary { background: rgba(255,255,255,.1); color: #f7f7ff; }
+    .actions { display: flex; flex-wrap: wrap; gap: 12px; }
+    .mini-list { margin: 12px 0 0; padding-left: 18px; color: #cbd2ff; line-height: 1.6; }
+    .status-log { display: grid; gap: 10px; margin-top: 14px; }
+    .status-log div { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 12px; color: #cbd2ff; background: rgba(255,255,255,.045); }
+    .status-log strong { color: #f7f7ff; }
+    .json-preview { white-space: pre-wrap; overflow: auto; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 14px; background: rgba(0,0,0,.24); color: #d9fffb; font-size: 13px; line-height: 1.55; }
+    .warning { border-color: rgba(94,234,212,.32); background: rgba(94,234,212,.08); }
+    .breadcrumb { margin: 0 0 4px; font-size: 13px; color: #8e95bc; }
+    .breadcrumb a { color: #cbd2ff; text-decoration: underline; text-underline-offset: 3px; }
+    @media (prefers-reduced-motion: reduce) {
+      * { animation-duration: 0s !important; transition: none !important; }
+    }
+  </style>
+</head>
+<body>
+  <main>
+    <p class="breadcrumb"><a href="../../index.html">&larr; Back to Arc MCP Builder Assistant</a></p>
+    <section class="card" aria-labelledby="demo-title">
+      <div class="eyebrow">Arc Agent Commerce</div>
+      <h1 id="demo-title">Payment Intent Demo</h1>
+      <p>An AI agent prepares a USDC payment request. The human keeps approval control and approves manually. This is a safe first step toward agentic commerce on Arc.</p>
+      <p>This is a non-interactive mockup intended for review and feedback. It does not connect to a wallet, broadcast transactions, or talk to any backend. See <a href="../../docs/view.html#payment-intent-demo.md">docs/payment-intent-demo.md</a> for the spec.</p>
+    </section>
+    <section class="grid">
+      <article class="card" aria-labelledby="agent-title">
+        <div class="eyebrow">Agent</div>
+        <h2 id="agent-title">Research Agent</h2>
+        <p>Purpose: purchase a data/API task after user approval. Agent identity and testnet integration are intentionally mocked in this v0 UI.</p>
+      </article>
+      <article class="card intent" aria-labelledby="intent-title">
+        <div class="eyebrow">Payment Intent</div>
+        <h2 id="intent-title" class="sr-only" hidden>Pending payment intent</h2>
+        <div class="row"><span class="label">Asset</span><span class="value">USDC</span></div>
+        <div class="row"><span class="label">Amount</span><span class="value">5.00</span></div>
+        <div class="row"><span class="label">Recipient</span><span class="value">0xDemo&hellip;Arc</span></div>
+        <div class="row"><span class="label">Memo</span><span class="value">Research task #42</span></div>
+        <div class="row"><span class="label">Status</span><span class="value">Pending approval</span></div>
+        <div class="actions" aria-describedby="mock-controls-note">
+          <button type="button" disabled aria-label="Approve payment unavailable in static mockup; no transaction is sent">Approve payment</button>
+          <button type="button" disabled class="secondary" aria-label="Cancel payment unavailable in static mockup">Cancel</button>
+        </div>
+        <p id="mock-controls-note">Controls are intentionally disabled in this static mockup. A future testnet version must keep signing explicit and user-approved.</p>
+      </article>
+    </section>
+    <section class="grid" aria-label="Demo review details">
+      <article class="card warning" aria-labelledby="boundaries-title">
+        <div class="eyebrow">Trust boundaries</div>
+        <h2 id="boundaries-title">What the agent cannot do</h2>
+        <ul class="mini-list">
+          <li>Cannot spend funds or sign transactions.</li>
+          <li>Cannot change the recipient after human review starts.</li>
+          <li>Cannot hide amount, memo, expiry, or status fields.</li>
+        </ul>
+      </article>
+      <article class="card" aria-labelledby="timeline-title">
+        <div class="eyebrow">Execution timeline</div>
+        <h2 id="timeline-title">Review-first flow</h2>
+        <div class="status-log">
+          <div><strong>Prepared</strong> · Agent drafts the payment intent from docs-grounded context.</div>
+          <div><strong>Review</strong> · Human checks amount, recipient, memo, and purpose.</div>
+          <div><strong>Approve later</strong> · Wallet integration is a future testnet-only step.</div>
+        </div>
+      </article>
+      <article class="card" aria-labelledby="json-title">
+        <div class="eyebrow">Reviewable JSON</div>
+        <h2 id="json-title">Intent object</h2>
+        <pre class="json-preview" aria-label="Static payment intent JSON">{
+  &quot;agent&quot;: &quot;Research Agent&quot;,
+  &quot;recipient&quot;: &quot;0xDemo...Arc&quot;,
+  &quot;asset&quot;: &quot;USDC&quot;,
+  &quot;amount&quot;: &quot;5.00&quot;,
+  &quot;memo&quot;: &quot;Research task #42&quot;,
+  &quot;expiry&quot;: &quot;2030-05-30T00:00:00Z&quot;,
+  &quot;status&quot;: &quot;pending_human_approval&quot;
+}</pre>
+        <p>Future versions should let the user inspect this object before any wallet prompt appears.</p>
+      </article>
+      <article class="card" aria-labelledby="next-title">
+        <div class="eyebrow">Next prototype</div>
+        <h2 id="next-title">From mockup to playground</h2>
+        <ul class="mini-list">
+          <li>Add editable fields for agent, recipient, amount, memo, and expiry.</li>
+          <li>Show live JSON and local-only status transitions.</li>
+          <li>Use the <a href="../../docs/view.html#arc-builder-readiness-checklist.md">builder readiness checklist</a> before testnet integration.</li>
+          <li>Extend the pattern into the <a href="../../docs/view.html#job-escrow-demo.md">job escrow demo</a>.</li>
+        </ul>
+      </article>
+    </section>
+  </main>
+</body>
+</html>