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/payment-intent-playground/index.html ADDED Viewed

@@ -0,0 +1,301 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Arc Payment Intent Playground · 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="Interactive local-only Arc payment-intent playground with reviewable JSON, explicit human approval states, and no wallet connection." />
+  <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'; 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="canonical" href="https://anstrays.github.io/arc-mcp-builder-assistant/examples/payment-intent-playground/" />
+  <meta property="og:title" content="Arc Payment Intent Playground" />
+  <meta property="og:description" content="Local-only interactive playground for AI-prepared, human-approved USDC payment intents on Arc." />
+  <meta property="og:type" content="website" />
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #05060a;
+      --panel: rgba(10, 12, 24, .82);
+      --panel-2: rgba(255,255,255,.055);
+      --text: #f7f7ff;
+      --muted: #cbd2ff;
+      --soft: #8e95bc;
+      --line: rgba(255,255,255,.14);
+      --blue: #8ea2ff;
+      --cyan: #5eead4;
+      --lime: #d9ff72;
+      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top left, rgba(38,59,255,.76) 0, #080914 34%, var(--bg) 100%); color: var(--text); padding: 32px 0; }
+    main { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; display: grid; gap: 18px; }
+    a { color: inherit; }
+    a:focus-visible,
+    button:focus-visible,
+    input:focus-visible,
+    textarea:focus-visible,
+    select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 8px; }
+    .breadcrumb { margin: 0 0 4px; font-size: 13px; color: var(--soft); }
+    .breadcrumb a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
+    .card { border: 1px solid var(--line); background: var(--panel); border-radius: 24px; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
+    .eyebrow { color: var(--blue); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; font-weight: 800; }
+    h1 { margin: 8px 0 10px; font-size: clamp(34px, 6vw, 72px); line-height: .95; letter-spacing: -.05em; }
+    h2 { margin: 8px 0 12px; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.035em; }
+    p { color: var(--muted); line-height: 1.65; }
+    .grid { display: grid; grid-template-columns: minmax(280px, .95fr) minmax(320px, 1.05fr); gap: 18px; align-items: start; }
+    main > *, .grid > * { min-width: 0; }
+    .form-grid { display: grid; gap: 14px; }
+    label { display: grid; gap: 7px; color: var(--muted); font-size: 14px; }
+    input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 14px; background: rgba(0,0,0,.24); color: var(--text); padding: 12px 13px; font: inherit; }
+    textarea { min-height: 86px; resize: vertical; }
+    .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
+    button { border: 0; border-radius: 999px; padding: 13px 18px; font-weight: 900; cursor: pointer; background: var(--text); color: #080914; }
+    button.secondary { background: rgba(255,255,255,.1); color: var(--text); border: 1px solid var(--line); }
+    button.warn { background: rgba(255,121,121,.18); color: #ffd2d2; border: 1px solid rgba(255,121,121,.35); }
+    .pill-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
+    .pill { border: 1px solid var(--line); background: rgba(255,255,255,.06); color: #dce2ff; border-radius: 999px; padding: 8px 11px; font-size: 13px; }
+    .status { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(94,234,212,.3); background: rgba(94,234,212,.08); color: #d9fffb; border-radius: 999px; padding: 9px 12px; font-weight: 800; }
+    .status::before { content: ""; width: 9px; height: 9px; border-radius: 999px; background: var(--cyan); box-shadow: 0 0 18px rgba(94,234,212,.8); }
+    .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,.28); color: #d9fffb; font-size: 13px; line-height: 1.55; min-height: 280px; }
+    .json-preview.compact { min-height: 170px; }
+    .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: var(--muted); background: var(--panel-2); }
+    .status-log strong { color: var(--text); }
+    .status-state-list { display: grid; gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
+    .status-state-list li { border: 1px solid rgba(255,255,255,.1); border-radius: 14px; padding: 12px; color: var(--muted); background: var(--panel-2); }
+    .status-state-list li.active { border-color: rgba(94,234,212,.46); background: rgba(94,234,212,.11); color: #e9fffb; }
+    .status-state-list strong { color: var(--text); }
+    .notice { border-color: rgba(94,234,212,.32); background: rgba(94,234,212,.08); }
+    .danger { border-color: rgba(255,121,121,.32); background: rgba(255,121,121,.08); }
+    .metric-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0; }
+    .metric { border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: var(--panel-2); padding: 13px; }
+    .metric span { display: block; color: var(--soft); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; }
+    .metric strong { display: block; margin-top: 7px; color: var(--text); overflow-wrap: anywhere; }
+    .mini-list { margin: 12px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.6; }
+    @media (max-width: 860px) {
+      body { padding: 18px 0; }
+      .grid, .two, .metric-grid { grid-template-columns: 1fr; }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      * { animation-duration: 0s !important; transition: none !important; }
+    }
+  </style>
+  <script src="./playground.js" defer></script>
+</head>
+<body>
+  <main>
+    <p class="breadcrumb"><a href="../../index.html">&larr; Back to Arc MCP Builder Assistant</a></p>
+    <section class="card" aria-labelledby="playground-title">
+      <div class="eyebrow">Local-only interactive prototype</div>
+      <h1 id="playground-title">Payment Intent Playground</h1>
+      <p>Create a reviewable USDC payment intent from agent-provided context, inspect the JSON, and move it through explicit human approval states. This demo runs only in the browser. It does not connect to a wallet, broadcast transactions, talk to any backend, or request private keys.</p>
+      <div class="pill-row" aria-label="Safety properties">
+        <span class="pill">No wallet connection</span>
+        <span class="pill">No backend calls</span>
+        <span class="pill">Human keeps approval control</span>
+        <span class="pill">Reviewable JSON first</span>
+      </div>
+    </section>
+    <section class="grid" aria-label="Payment intent builder">
+      <article class="card" aria-labelledby="form-title">
+        <div class="eyebrow">Intent form</div>
+        <h2 id="form-title">Agent request</h2>
+        <form id="intent-form" class="form-grid">
+          <label>Agent name
+            <input id="agent" name="agent" autocomplete="off" value="Research Agent" />
+          </label>
+          <label>Recipient
+            <input id="recipient" name="recipient" autocomplete="off" value="0x1111111111111111111111111111111111111111" />
+          </label>
+          <div class="two">
+            <label>Asset
+              <select id="asset" name="asset">
+                <option value="USDC">USDC</option>
+                <option value="EURC">EURC</option>
+              </select>
+            </label>
+            <label>Amount
+              <input id="amount" name="amount" inputmode="decimal" value="5.00" />
+            </label>
+          </div>
+          <label>Memo
+            <textarea id="memo" name="memo">Paid data/API task for Arc market research report.</textarea>
+          </label>
+          <label>Expiry
+            <input id="expiry" name="expiry" type="datetime-local" />
+          </label>
+          <div class="actions" aria-label="Intent state controls">
+            <button type="button" id="prepare">Prepare intent</button>
+            <button type="button" id="approve" class="secondary">Approve manually</button>
+            <button type="button" id="submit" class="secondary">Mark submitted</button>
+            <button type="button" id="reset" class="warn">Reset</button>
+          </div>
+        </form>
+      </article>
+      <article class="card" aria-labelledby="json-title">
+        <div class="eyebrow">Review before wallet action</div>
+        <h2 id="json-title">Intent JSON</h2>
+        <p>Status: <span id="status-pill" class="status">draft</span></p>
+        <pre id="intent-json" class="json-preview" aria-live="polite"></pre>
+      </article>
+    </section>
+    <section class="card notice" id="arc-status-panel" aria-labelledby="arc-status-title">
+      <div class="eyebrow">Read-only RPC probe</div>
+      <h2 id="arc-status-title">Arc Testnet status</h2>
+      <p>This panel keeps the playground grounded in the expected Arc Testnet configuration while staying browser-local. It does not connect to a wallet, call a backend, or broadcast transactions.</p>
+      <div class="metric-grid" aria-label="Arc Testnet constants">
+        <div class="metric">
+          <span>Expected chain ID</span>
+          <strong id="arc-chain-id">5042002 (0x4cef52)</strong>
+        </div>
+        <div class="metric">
+          <span>RPC URL</span>
+          <strong id="arc-rpc-url">https://rpc.testnet.arc.network</strong>
+        </div>
+        <div class="metric">
+          <span>Network mode</span>
+          <strong id="arc-readonly-state">Read-only / no broadcast</strong>
+        </div>
+      </div>
+      <pre id="arc-safety-json" class="json-preview compact" aria-live="polite"></pre>
+    </section>
+    <section class="card notice" id="unit-preview-panel" aria-labelledby="unit-preview-title">
+      <div class="eyebrow">Amount units before signing</div>
+      <h2 id="unit-preview-title">USDC unit preview</h2>
+      <p>Arc uses USDC as native gas, but ERC-20 USDC transfers still use 6-decimal token units. This local preview keeps those unit systems visible before any future wallet PR.</p>
+      <div class="metric-grid" aria-label="USDC unit conversion preview">
+        <div class="metric">
+          <span>ERC-20 base units</span>
+          <strong id="erc20-base-units">0</strong>
+        </div>
+        <div class="metric">
+          <span>ERC-20 decimals</span>
+          <strong id="erc20-decimals">6</strong>
+        </div>
+        <div class="metric">
+          <span>Native gas decimals</span>
+          <strong id="native-gas-decimals">18</strong>
+        </div>
+      </div>
+      <ul class="mini-list">
+        <li>ERC-20 USDC uses 6 decimals for token transfer amounts.</li>
+        <li>Native gas accounting uses 18 decimals and must not be reused for ERC-20 transfer amounts.</li>
+        <li>This panel is browser-local math only: no wallet, backend, RPC write, signing, or broadcast.</li>
+      </ul>
+    </section>
+    <section class="card danger" id="wallet-guard-panel" aria-labelledby="wallet-guard-title">
+      <div class="eyebrow">Wallet guardrails</div>
+      <h2 id="wallet-guard-title">Wallet action unavailable</h2>
+      <p>Signing stays disabled until a separate testnet-only wallet PR proves every guard. The current playground only explains why a real wallet action is blocked.</p>
+      <div class="metric-grid" aria-label="Read-only wallet preview state">
+        <div class="metric">
+          <span>Provider</span>
+          <strong id="wallet-provider-state">Not detected</strong>
+        </div>
+        <div class="metric">
+          <span>Connected address</span>
+          <strong id="wallet-address-state">Not requested</strong>
+        </div>
+        <div class="metric">
+          <span>Chain gate</span>
+          <strong id="wallet-chain-state">Blocked</strong>
+        </div>
+      </div>
+      <button type="button" id="wallet-action-button" disabled aria-disabled="true">Connect wallet / sign intent disabled</button>
+      <ul id="wallet-guard-reasons" class="mini-list" aria-live="polite"></ul>
+    </section>
+    <section class="card notice" id="validation-summary-panel" aria-labelledby="validation-summary-title">
+      <div class="eyebrow">Local readiness checks</div>
+      <h2 id="validation-summary-title">Validation summary</h2>
+      <p>These checks summarize whether the local intent is ready for human review. They are advisory browser-only checks and never connect to a wallet or network.</p>
+      <ul id="validation-summary-list" class="mini-list" aria-live="polite"></ul>
+    </section>
+    <section class="card notice" id="status-state-panel" aria-labelledby="status-state-title">
+      <div class="eyebrow">Review-safe state machine</div>
+      <h2 id="status-state-title">Status states</h2>
+      <p>The playground uses explicit local-only states so reviewers can tell what is real today and what still needs a separate Arc Testnet wallet PR.</p>
+      <ol id="status-state-list" class="status-state-list" aria-live="polite">
+        <li data-status-step="draft"><strong>draft</strong> — intent exists but is not approved.</li>
+        <li data-status-step="ready_for_review"><strong>ready_for_review</strong> — fields are valid enough for human review.</li>
+        <li data-status-step="approved_local"><strong>approved_local</strong> — human approved the local exercise only.</li>
+        <li data-status-step="final_review_confirmed"><strong>final_review_confirmed</strong> — final local confirmation recorded without a wallet request.</li>
+        <li data-status-step="blocked_wallet_unavailable"><strong>blocked_wallet_unavailable</strong> — signing remains disabled by guardrails.</li>
+      </ol>
+    </section>
+    <section class="card notice" id="signing-preflight-panel" aria-labelledby="signing-preflight-title">
+      <div class="eyebrow">Manual copy for wallet PR review</div>
+      <h2 id="signing-preflight-title">Signing preflight report</h2>
+      <p>This generated report summarizes the local intent, guard failures, and readiness checks that a future testnet-only wallet PR must satisfy before any signing path is enabled.</p>
+      <button type="button" id="copy-preflight-report" class="secondary" aria-describedby="signing-preflight-copy-help">Copy preflight report</button>
+      <p id="signing-preflight-copy-help" class="fine-print">Copies the local JSON report to your clipboard only. No wallet, network, or backend call is made.</p>
+      <pre id="signing-preflight-report" class="json-preview compact" aria-live="polite"></pre>
+    </section>
+    <section class="card notice" id="unsigned-transaction-panel" aria-labelledby="unsigned-transaction-title">
+      <div class="eyebrow">Unsigned transaction draft</div>
+      <h2 id="unsigned-transaction-title">ERC-20 transfer payload preview</h2>
+      <p>This local preview shows the deterministic Arc Testnet USDC transaction fields a future wallet PR would ask the user to review. It is unsigned JSON only: no wallet request, gas estimate, simulation, RPC write, signing, or broadcast.</p>
+      <pre id="unsigned-transaction-draft" class="json-preview compact" aria-live="polite"></pre>
+    </section>
+    <section class="card notice" id="draft-consistency-panel" aria-labelledby="draft-consistency-title">
+      <div class="eyebrow">Payload consistency check</div>
+      <h2 id="draft-consistency-title">Unsigned draft decodes back to intent</h2>
+      <p>This local verifier decodes the ERC-20 calldata and compares token target, native value, chain ID, recipient, and base units against the current reviewed intent before any future wallet handoff.</p>
+      <ul id="draft-consistency-list" class="mini-list" aria-live="polite"></ul>
+    </section>
+    <section class="card danger" id="wallet-handoff-readiness-panel" aria-labelledby="wallet-handoff-readiness-title">
+      <div class="eyebrow">Wallet handoff readiness</div>
+      <h2 id="wallet-handoff-readiness-title">Send PR blocker manifest</h2>
+      <p>This local manifest lists every guard a separate wallet/send PR must satisfy before it can enable any wallet request. It remains a no-transaction checklist: no provider call, chain switch, signing, gas estimate, simulation, or broadcast.</p>
+      <ul id="wallet-handoff-readiness-list" class="mini-list" aria-live="polite"></ul>
+      <pre id="wallet-handoff-readiness-json" class="json-preview compact" aria-live="polite"></pre>
+    </section>
+    <section class="card danger" id="final-confirmation-panel" aria-labelledby="final-confirmation-title">
+      <div class="eyebrow">Final review gate</div>
+      <h2 id="final-confirmation-title">Final confirmation, still no transaction</h2>
+      <p>This is the last human confirmation step a future testnet send PR should reuse before opening any wallet prompt. Today it only records local review intent and keeps transaction requests disabled.</p>
+      <label>
+        <input id="final-confirmation-checkbox" name="final-confirmation-checkbox" type="checkbox" />
+        I reviewed the frozen recipient, amount, memo, expiry, Arc Testnet chain, token address, and guard reasons.
+      </label>
+      <button type="button" id="final-confirmation-button" class="secondary" disabled aria-disabled="true">Confirm final review locally</button>
+      <ul id="final-confirmation-reasons" class="mini-list" aria-live="polite"></ul>
+    </section>
+    <section class="grid" aria-label="Status and safety details">
+      <article class="card notice" aria-labelledby="timeline-title">
+        <div class="eyebrow">Local status timeline</div>
+        <h2 id="timeline-title">What happened</h2>
+        <div id="status-log" class="status-log" aria-live="polite"></div>
+      </article>
+      <article class="card danger" aria-labelledby="boundaries-title">
+        <div class="eyebrow">Trust boundaries</div>
+        <h2 id="boundaries-title">Still not a wallet app</h2>
+        <ul class="mini-list">
+          <li>The agent can prepare and explain an intent, not spend funds.</li>
+          <li>Every approval and final-confirmation state in this playground is local UI state.</li>
+          <li>Real Arc Testnet integration must re-check chain, wallet, and contract details through current Arc docs/MCP.</li>
+          <li>Use the <a href="../../docs/view.html#arc-builder-readiness-checklist.md">builder readiness checklist</a> before adding any transaction path.</li>
+        </ul>
+      </article>
+    </section>
+  </main>
+</body>
+</html>