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/receipt-verifier-playground/index.html ADDED Viewed

@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Receipt Verifier 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="Local-only receipt review playground for checking Arc payment receipt JSON before any future wallet or transaction-status integration." />
+  <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/receipt-verifier-playground/" />
+  <meta property="og:title" content="Arc Receipt Verifier Playground" />
+  <meta property="og:description" content="Local-only receipt review for Arc payment JSON: chain, recipient, amount, asset, intent hash, expiry, and transaction hash." />
+  <meta property="og:type" content="website" />
+  <style>
+    :root { color-scheme: dark; --bg:#05060a; --panel:rgba(10,12,24,.84); --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; --red:#ff8d8d; 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 right, rgba(94,234,212,.22), transparent 36%), 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, textarea: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); }
+    .notice { border-color:rgba(94,234,212,.32); background:rgba(94,234,212,.08); }
+    .danger { border-color:rgba(255,141,141,.32); background:rgba(255,141,141,.08); }
+    .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(300px, .96fr) minmax(320px, 1.04fr); gap:18px; align-items:start; }
+    main > *, .grid > * { min-width:0; }
+    textarea { width:100%; min-height:420px; border:1px solid var(--line); border-radius:16px; background:rgba(0,0,0,.28); color:#d9fffb; padding:14px; font:13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize:vertical; }
+    .actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
+    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); }
+    .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; }
+    .verdict { 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:900; }
+    .verdict::before { content:""; width:9px; height:9px; border-radius:999px; background:var(--cyan); box-shadow:0 0 18px rgba(94,234,212,.8); }
+    .verdict.fail { border-color:rgba(255,141,141,.42); background:rgba(255,141,141,.1); color:#ffdada; }
+    .verdict.fail::before { background:var(--red); box-shadow:0 0 18px rgba(255,141,141,.7); }
+    .mini-list { margin:12px 0 0; padding-left:18px; color:var(--muted); line-height:1.6; }
+    .mini-list li.pass strong { color:var(--lime); }
+    .mini-list li.fail strong { color:#ffdada; }
+    .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:220px; }
+    .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; }
+    @media (max-width: 860px) { body { padding:18px 0; } .grid, .metric-grid { grid-template-columns:1fr; } }
+    @media (prefers-reduced-motion: reduce) { * { animation-duration: 0s !important; transition: none !important; } }
+  </style>
+  <script src="./verifier.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="receipt-title">
+      <div class="eyebrow">local-only receipt review</div>
+      <h1 id="receipt-title">Receipt Verifier Playground</h1>
+      <p>Paste a simulated Arc payment receipt JSON, inspect normalized fields, and see which checks pass before a future wallet or transaction-status PR exists. This page never connects to a wallet, never calls a backend, and never broadcasts transactions.</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">No transaction broadcast</span>
+        <span class="pill">Reviewable JSON only</span>
+      </div>
+    </section>
+    <section class="grid" aria-label="Receipt verification workspace">
+      <article class="card" aria-labelledby="input-title">
+        <div class="eyebrow">Receipt JSON</div>
+        <h2 id="input-title">Paste or edit receipt</h2>
+        <p>Expected shape: chain ID, recipient, amount, asset, intent hash, expiry, and optional transaction hash. The default sample is intentionally simulated.</p>
+        <textarea id="receipt-json" spellcheck="false" aria-label="Receipt JSON input"></textarea>
+        <div class="actions" aria-label="Receipt verifier controls">
+          <button type="button" id="verify-receipt">Verify receipt</button>
+          <button type="button" id="reset-receipt" class="secondary">Reset sample</button>
+        </div>
+      </article>
+      <article class="card notice" aria-labelledby="verdict-title">
+        <div class="eyebrow">Verifier output</div>
+        <h2 id="verdict-title">Local verdict</h2>
+        <p>Status: <span id="verdict-pill" class="verdict">not checked</span></p>
+        <ul id="receipt-check-list" class="mini-list" aria-live="polite"></ul>
+        <h2>Normalized receipt</h2>
+        <pre id="normalized-receipt" class="json-preview" aria-live="polite"></pre>
+      </article>
+    </section>
+    <section class="card notice" aria-labelledby="expectations-title">
+      <div class="eyebrow">Arc constants</div>
+      <h2 id="expectations-title">Verifier expectations</h2>
+      <p>These static constants mirror the current local Arc Testnet baseline used elsewhere in the starter kit. Re-check Arc docs/MCP before any real signing, settlement, or explorer-status PR.</p>
+      <div class="metric-grid" aria-label="Arc receipt verification constants">
+        <div class="metric"><span>Expected chain ID</span><strong>5042002 (0x4cef52)</strong></div>
+        <div class="metric"><span>Asset</span><strong>USDC / 6 decimals</strong></div>
+        <div class="metric"><span>Explorer</span><strong>https://testnet.arcscan.app</strong></div>
+      </div>
+    </section>
+    <section class="card danger" aria-labelledby="boundary-title">
+      <div class="eyebrow">Trust boundary</div>
+      <h2 id="boundary-title">What this does not prove</h2>
+      <ul class="mini-list">
+        <li>It does not query ArcScan, an RPC node, or a backend verifier.</li>
+        <li>It does not prove finality, token balance changes, or ownership of a wallet.</li>
+        <li>It does not sign, submit, sponsor, or broadcast any transaction.</li>
+        <li>Use the <a href="../../docs/view.html#receipt-verifier-playground.md">receipt verifier notes</a> before extending this into a real testnet-status path.</li>
+      </ul>
+    </section>
+  </main>
+</body>
+</html>

arc_builder_kit/examples/receipt-verifier-playground/verifier.js ADDED Viewed

@@ -0,0 +1,226 @@
+const receiptInput = document.querySelector('#receipt-json');
+const verifyButton = document.querySelector('#verify-receipt');
+const resetButton = document.querySelector('#reset-receipt');
+const verdictPill = document.querySelector('#verdict-pill');
+const receiptCheckList = document.querySelector('#receipt-check-list');
+const normalizedReceipt = document.querySelector('#normalized-receipt');
+const ARC_RECEIPT_EXPECTATIONS = Object.freeze({
+  network: 'Arc Testnet',
+  expectedChainId: 5042002,
+  expectedChainIdHex: '0x4cef52',
+  asset: 'USDC',
+  assetDecimals: 6,
+  explorerUrl: 'https://testnet.arcscan.app',
+  walletConnected: false,
+  backendCalls: false,
+  transactionBroadcast: false,
+  signingEnabled: false,
+  localOnly: true,
+});
+const RECEIPT_CHECK_IDS = Object.freeze([
+  { id: 'chainId' },
+  { id: 'recipient' },
+  { id: 'amount' },
+  { id: 'asset' },
+  { id: 'intentHash' },
+  { id: 'expiry' },
+  { id: 'transactionHash' },
+]);
+const DEFAULT_RECEIPT_EXPIRY_MS = 24 * 60 * 60 * 1000;
+const SAMPLE_RECEIPT = Object.freeze({
+  network: 'arc-testnet',
+  chainId: 5042002,
+  recipient: '0x1111111111111111111111111111111111111111',
+  amount: '5.00',
+  asset: 'USDC',
+  intentHash: '0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
+  expiry: new Date(Date.now() + DEFAULT_RECEIPT_EXPIRY_MS).toISOString(),
+  transactionHash: '0xbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
+  status: 'submitted_simulated',
+  safety: {
+    source: 'sample local receipt',
+    walletConnected: false,
+    backendCalls: false,
+    transactionBroadcast: false,
+  },
+});
+function isPlainObject(value) {
+  return value !== null && typeof value === 'object' && !Array.isArray(value);
+}
+function parseReceiptJson() {
+  try {
+    const parsed = JSON.parse(receiptInput.value);
+    if (!isPlainObject(parsed)) {
+      return { ok: false, error: 'Receipt JSON must be an object.', receipt: null };
+    }
+    return { ok: true, error: '', receipt: parsed };
+  } catch (error) {
+    return { ok: false, error: `Invalid JSON: ${error.message}`, receipt: null };
+  }
+}
+function normalizeChainId(chainId) {
+  if (typeof chainId === 'number' && Number.isInteger(chainId)) return chainId;
+  const value = String(chainId || '').trim().toLowerCase();
+  if (/^0x[0-9a-f]+$/.test(value)) return Number.parseInt(value, 16);
+  if (/^[0-9]+$/.test(value)) return Number.parseInt(value, 10);
+  return Number.NaN;
+}
+function normalizeReceipt(rawReceipt) {
+  return {
+    network: String(rawReceipt.network || '').trim().toLowerCase(),
+    chainId: normalizeChainId(rawReceipt.chainId),
+    chainIdHex: Number.isFinite(normalizeChainId(rawReceipt.chainId))
+      ? `0x${normalizeChainId(rawReceipt.chainId).toString(16)}`
+      : 'invalid',
+    recipient: String(rawReceipt.recipient || '').trim(),
+    amount: String(rawReceipt.amount || '').trim(),
+    asset: String(rawReceipt.asset || '').trim().toUpperCase(),
+    intentHash: String(rawReceipt.intentHash || '').trim(),
+    expiry: String(rawReceipt.expiry || '').trim(),
+    transactionHash: String(rawReceipt.transactionHash || '').trim(),
+    status: String(rawReceipt.status || 'unknown').trim(),
+    verifier: {
+      expectedNetwork: ARC_RECEIPT_EXPECTATIONS.network,
+      expectedChainId: ARC_RECEIPT_EXPECTATIONS.expectedChainId,
+      expectedChainIdHex: ARC_RECEIPT_EXPECTATIONS.expectedChainIdHex,
+      assetDecimals: ARC_RECEIPT_EXPECTATIONS.assetDecimals,
+      explorerUrl: ARC_RECEIPT_EXPECTATIONS.explorerUrl,
+      walletConnected: ARC_RECEIPT_EXPECTATIONS.walletConnected,
+      backendCalls: ARC_RECEIPT_EXPECTATIONS.backendCalls,
+      transactionBroadcast: ARC_RECEIPT_EXPECTATIONS.transactionBroadcast,
+      signingEnabled: ARC_RECEIPT_EXPECTATIONS.signingEnabled,
+      localOnly: ARC_RECEIPT_EXPECTATIONS.localOnly,
+    },
+  };
+}
+function isValidAddress(value) {
+  const normalized = String(value || '').trim().toLowerCase();
+  return /^0x[a-f0-9]{40}$/.test(normalized)
+    && !/^0x0{40}$/.test(normalized)
+    && normalized !== '0x3600000000000000000000000000000000000000';
+}
+function isValidHash(value) {
+  return /^0x[a-fA-F0-9]{64}$/.test(value);
+}
+function isValidUsdcAmount(value) {
+  return /^(?:0|[1-9]\d*)(?:\.\d{1,6})?$/.test(value) && Number(value) > 0;
+}
+function expiryIsFuture(value) {
+  const expiryTime = new Date(value).getTime();
+  return Number.isFinite(expiryTime) && expiryTime > Date.now();
+}
+function check(id, label, passed, detail) {
+  return { id, label, passed, detail };
+}
+function verifyReceipt(receipt) {
+  const normalized = normalizeReceipt(receipt);
+  const checks = [
+    check(
+      'chainId',
+      'Arc Testnet chain ID',
+      normalized.chainId === ARC_RECEIPT_EXPECTATIONS.expectedChainId,
+      `Expected ${ARC_RECEIPT_EXPECTATIONS.expectedChainId} (${ARC_RECEIPT_EXPECTATIONS.expectedChainIdHex}); got ${normalized.chainIdHex}.`
+    ),
+    check(
+      'recipient',
+      'Recipient address',
+      isValidAddress(normalized.recipient),
+      'Expected a non-zero 0x-prefixed recipient address that is not the USDC token contract.'
+    ),
+    check(
+      'amount',
+      'USDC amount units',
+      isValidUsdcAmount(normalized.amount),
+      `Expected a positive ${ARC_RECEIPT_EXPECTATIONS.asset} amount with at most ${ARC_RECEIPT_EXPECTATIONS.assetDecimals} decimals.`
+    ),
+    check(
+      'asset',
+      'Receipt asset',
+      normalized.asset === ARC_RECEIPT_EXPECTATIONS.asset,
+      `Expected ${ARC_RECEIPT_EXPECTATIONS.asset}; got ${normalized.asset || 'missing'}.`
+    ),
+    check(
+      'intentHash',
+      'Intent hash',
+      isValidHash(normalized.intentHash),
+      'Expected a 32-byte 0x-prefixed intent hash.'
+    ),
+    check(
+      'expiry',
+      'Receipt expiry',
+      expiryIsFuture(normalized.expiry),
+      'Expected an ISO-compatible future expiry timestamp.'
+    ),
+    check(
+      'transactionHash',
+      'Transaction hash shape',
+      normalized.transactionHash === '' || isValidHash(normalized.transactionHash),
+      'Expected empty for local draft or a 32-byte 0x-prefixed transaction hash.'
+    ),
+  ];
+  return {
+    passed: checks.every((item) => item.passed),
+    checks,
+    normalized,
+  };
+}
+function buildCheckListItem(state, message, className) {
+  const listItem = document.createElement('li');
+  listItem.className = className;
+  const stateLabel = document.createElement('strong');
+  stateLabel.textContent = state;
+  listItem.append(stateLabel, ` — ${message}`);
+  return listItem;
+}
+function renderVerification(result) {
+  verdictPill.textContent = result.passed ? 'locally consistent' : 'needs review';
+  verdictPill.classList.toggle('fail', !result.passed);
+  receiptCheckList.replaceChildren(
+    ...result.checks.map((item) => {
+      const state = item.passed ? 'PASS' : 'REVIEW';
+      return buildCheckListItem(state, `${item.label}: ${item.detail}`, item.passed ? 'pass' : 'fail');
+    })
+  );
+  normalizedReceipt.textContent = JSON.stringify(result.normalized, null, 2);
+}
+function renderParseError(message) {
+  verdictPill.textContent = 'invalid JSON';
+  verdictPill.classList.add('fail');
+  receiptCheckList.replaceChildren(buildCheckListItem('REVIEW', message, 'fail'));
+  normalizedReceipt.textContent = JSON.stringify({ error: message, localOnly: true }, null, 2);
+}
+function verifyCurrentInput() {
+  const parsed = parseReceiptJson();
+  if (!parsed.ok) {
+    renderParseError(parsed.error);
+    return;
+  }
+  renderVerification(verifyReceipt(parsed.receipt));
+}
+function resetSample() {
+  receiptInput.value = JSON.stringify(SAMPLE_RECEIPT, null, 2);
+  verifyCurrentInput();
+}
+verifyButton.addEventListener('click', verifyCurrentInput);
+resetButton.addEventListener('click', resetSample);
+resetSample();

arc_builder_kit/examples/receipt-viewer/index.html ADDED Viewed

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Agent Payment Receipt Viewer · 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='%230f766e'/%3E%3Cstop offset='1' stop-color='%232563eb'/%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='34' font-weight='900' fill='white'%3ER%3C/text%3E%3C/svg%3E" />
+  <meta name="description" content="Read-only Arc Testnet payment receipt viewer for checking transaction receipts and highlighting USDC Transfer logs without wallets, keys, signing, or broadcast." />
+  <meta name="author" content="Arc MCP Builder Assistant contributors" />
+  <meta name="robots" content="index,follow" />
+  <meta name="theme-color" content="#061414" />
+  <meta name="color-scheme" content="dark" />
+  <meta name="referrer" content="no-referrer" />
+  <meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' https://rpc.testnet.arc.network; 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/receipt-viewer/" />
+  <meta property="og:title" content="Agent Payment Receipt Viewer" />
+  <meta property="og:description" content="Read-only Arc Testnet receipt lookup with USDC Transfer log highlighting and explicit no-wallet boundaries." />
+  <meta property="og:type" content="website" />
+  <style>
+    :root { color-scheme: dark; --bg:#061414; --panel:rgba(7,17,24,.86); --panel-2:rgba(255,255,255,.055); --text:#f8fffc; --muted:#c4d9d2; --soft:#8fa8a1; --line:rgba(255,255,255,.15); --teal:#5eead4; --blue:#9ab1ff; --lime:#d9ff72; --amber:#ffd166; --red:#ff9b9b; 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 right, rgba(94,234,212,.2), transparent 34%), linear-gradient(145deg, #061414 0, #07101c 45%, #0d1726 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 { outline:2px solid var(--teal); 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:22px; padding:24px; box-shadow:0 24px 80px rgba(0,0,0,.32); }
+    .notice { border-color:rgba(94,234,212,.3); background:rgba(94,234,212,.075); }
+    .danger { border-color:rgba(255,155,155,.32); background:rgba(255,155,155,.075); }
+    .eyebrow { color:var(--teal); text-transform:uppercase; letter-spacing:.16em; font-size:12px; font-weight:900; }
+    h1 { margin:8px 0 10px; font-size:clamp(34px, 6vw, 70px); line-height:.96; }
+    h2 { margin:8px 0 12px; font-size:clamp(23px, 3vw, 34px); }
+    h3 { margin:12px 0 8px; font-size:20px; }
+    p { color:var(--muted); line-height:1.65; }
+    code { color:#d9fffb; overflow-wrap:anywhere; }
+    .grid { display:grid; grid-template-columns:minmax(300px, .9fr) minmax(340px, 1.1fr); gap:18px; align-items:start; }
+    main > *, .grid > * { min-width:0; }
+    label { display:block; color:var(--muted); font-weight:900; margin:0 0 8px; }
+    input { width:100%; border:1px solid var(--line); border-radius:14px; background:rgba(0,0,0,.28); color:#d9fffb; padding:14px; font:14px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+    .actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }
+    button { border:0; border-radius:999px; padding:13px 18px; font-weight:900; cursor:pointer; background:var(--text); color:#07101c; }
+    button.secondary { background:rgba(255,255,255,.1); color:var(--text); border:1px solid var(--line); }
+    button:disabled { opacity:.55; cursor:not-allowed; }
+    .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(255,255,255,.22); background:rgba(255,255,255,.08); color:#eef2ff; border-radius:999px; padding:9px 12px; font-weight:900; overflow-wrap:anywhere; }
+    .status::before { content:""; width:9px; height:9px; border-radius:999px; background:var(--soft); box-shadow:0 0 18px rgba(143,168,161,.7); flex:0 0 auto; }
+    .status.checking::before { background:var(--amber); box-shadow:0 0 18px rgba(255,209,102,.7); }
+    .status.success::before { background:var(--teal); box-shadow:0 0 18px rgba(94,234,212,.8); }
+    .status.revert::before { background:var(--red); box-shadow:0 0 18px rgba(255,155,155,.75); }
+    .status.not_found::before, .status.unknown::before { background:var(--amber); box-shadow:0 0 18px rgba(255,209,102,.7); }
+    .mini-list { margin:12px 0 0; padding-left:18px; color:var(--muted); line-height:1.6; }
+    .mini-list li { margin:6px 0; overflow-wrap:anywhere; }
+    .mini-list li.pass strong { color:var(--lime); }
+    .mini-list li.warn strong { color:var(--amber); }
+    .mini-list li.fail strong { color:#ffdada; }
+    .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:320px; }
+    .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:900; }
+    .metric strong { display:block; margin-top:7px; color:var(--text); overflow-wrap:anywhere; }
+    @media (max-width: 860px) { body { padding:18px 0; } .grid, .metric-grid { grid-template-columns:1fr; } }
+    @media (prefers-reduced-motion: reduce) { * { animation-duration: 0s !important; transition: none !important; } }
+  </style>
+  <script src="./receipt-viewer.js" integrity="sha384-JaKYiQKsMvVE2asRi35IsLclmdnzN1WXI7gwN+9Qq3K11fLzIH+NjuLhx8eBgde4" crossorigin="anonymous" 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="viewer-title">
+      <div class="eyebrow">Read-only Arc Testnet RPC</div>
+      <h1 id="viewer-title">Agent Payment Receipt Viewer</h1>
+      <p>Paste an Arc Testnet transaction hash and inspect its receipt status, block number, gas used, raw logs, and any pinned USDC Transfer events. The viewer never connects to a wallet, handles private keys, signs, or broadcasts.</p>
+      <div class="pill-row" aria-label="Safety properties">
+        <span class="pill">No wallet connection</span>
+        <span class="pill">No private keys</span>
+        <span class="pill">No signing</span>
+        <span class="pill">No transaction broadcast</span>
+        <span class="pill">Read-only RPC only</span>
+      </div>
+    </section>
+    <section class="grid" aria-label="Receipt viewer workspace">
+      <article class="card" aria-labelledby="input-title">
+        <div class="eyebrow">Transaction hash</div>
+        <h2 id="input-title">Lookup receipt</h2>
+        <p>The sample hash is a placeholder. Use a real Arc Testnet hash only if you already have one from a wallet or ArcScan.</p>
+        <label for="transaction-hash">Arc Testnet transaction hash</label>
+        <input id="transaction-hash" autocomplete="off" spellcheck="false" value="0xbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb" />
+        <div class="actions" aria-label="Receipt viewer controls">
+          <button type="button" id="load-receipt">Load receipt</button>
+          <button type="button" id="reset-receipt" class="secondary">Reset sample</button>
+        </div>
+      </article>
+      <article class="card notice" aria-labelledby="result-title">
+        <div class="eyebrow">Receipt evidence</div>
+        <h2 id="result-title">Read-only verdict</h2>
+        <p>Status: <span id="status-pill" class="status">not_checked</span></p>
+        <ul id="receipt-summary-list" class="mini-list" aria-live="polite"></ul>
+        <h3>USDC Transfer logs</h3>
+        <ul id="transfer-log-list" class="mini-list" aria-live="polite"></ul>
+      </article>
+    </section>
+    <section class="card notice" aria-labelledby="states-title">
+      <div class="eyebrow">Receipt states</div>
+      <h2 id="states-title">What the viewer reports</h2>
+      <div class="metric-grid" aria-label="Arc receipt states">
+        <div class="metric"><span>success</span><strong>Receipt exists and status is 0x1.</strong></div>
+        <div class="metric"><span>revert</span><strong>Receipt exists and status is 0x0.</strong></div>
+        <div class="metric"><span>not_found</span><strong>No receipt yet, or the hash has no receipt.</strong></div>
+        <div class="metric"><span>unknown</span><strong>RPC unavailable, wrong chain, malformed envelope, or ambiguous status.</strong></div>
+        <div class="metric"><span>USDC logs</span><strong>Highlights Transfer events from 0x3600000000000000000000000000000000000000.</strong></div>
+        <div class="metric"><span>Chain</span><strong>5042002 / 0x4cef52</strong></div>
+      </div>
+    </section>
+    <section class="card" aria-labelledby="json-title">
+      <div class="eyebrow">Machine-readable output</div>
+      <h2 id="json-title">Receipt JSON</h2>
+      <pre id="receipt-json" class="json-preview" aria-live="polite"></pre>
+    </section>
+    <section class="card danger" aria-labelledby="boundary-title">
+      <div class="eyebrow">Trust boundary</div>
+      <h2 id="boundary-title">What this does not prove</h2>
+      <ul class="mini-list">
+        <li>A receipt status does not prove business acceptance, offchain fulfillment, or payment intent review.</li>
+        <li>USDC Transfer logs show raw event data only; they do not replace a product settlement policy.</li>
+        <li>The viewer does not estimate gas, simulate calls, submit transactions, or retry failed payments.</li>
+        <li>Use the <a href="../../docs/view.html#receipt-viewer.md">receipt viewer notes</a> before wiring this evidence into an agent workflow.</li>
+      </ul>
+    </section>
+  </main>
+</body>
+</html>