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

arc_builder_kit/examples/agent-commerce-components/components.js

@@ -0,0 +1,200 @@
+const ARC_COMPONENT_EXPECTATIONS = Object.freeze({
+  network: 'arc-testnet',
+  chainId: 5042002,
+  chainIdHex: '0x4cef52',
+  nativeGasAsset: 'USDC',
+  nativeGasDecimals: 18,
+  erc20UsdcAddress: '0x3600000000000000000000000000000000000000',
+  erc20UsdcDecimals: 6,
+});
+
+const fields = {
+  agentName: document.querySelector('#agent-name'),
+  agentRole: document.querySelector('#agent-role'),
+  purpose: document.querySelector('#purpose'),
+  amount: document.querySelector('#amount'),
+  recipient: document.querySelector('#recipient'),
+  reviewNote: document.querySelector('#review-note'),
+};
+const cards = {
+  agent: document.querySelector('#agent-card'),
+  payment: document.querySelector('#payment-card'),
+  receipt: document.querySelector('#receipt-card'),
+  combined: document.querySelector('#components-json'),
+  events: document.querySelector('#event-log'),
+  status: document.querySelector('#status-pill'),
+};
+const buttons = {
+  freeze: document.querySelector('#freeze-request'),
+  approve: document.querySelector('#mark-approved'),
+  receipt: document.querySelector('#mark-receipt'),
+  reset: document.querySelector('#reset-components'),
+};
+
+let status = 'draft';
+let frozenAt = null;
+let approvedAt = null;
+let receiptAt = null;
+let events = [];
+
+function nowIso() {
+  return new Date().toISOString();
+}
+
+function amountIsValid(value) {
+  return /^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(String(value || '').trim())
+    && Number(value) > 0;
+}
+
+function recipientIsValid(value) {
+  return /^0x[a-fA-F0-9]{40}$/.test(String(value || '').trim())
+    && !/^0x0{40}$/i.test(String(value || '').trim());
+}
+
+function normalizedAmount() {
+  return amountIsValid(fields.amount.value) ? Number(fields.amount.value).toFixed(2) : '0.00';
+}
+
+function addEvent(event, actor = 'system') {
+  events = [...events, {
+    at: nowIso(),
+    actor,
+    event,
+    requiresHumanReview: true,
+    walletActionEnabled: false,
+    transactionBroadcast: false,
+  }];
+}
+
+function agentCard() {
+  return {
+    agentId: `${fields.agentRole.value}.local`,
+    displayName: fields.agentName.value.trim(),
+    role: fields.agentRole.value,
+    trustLevel: 'unverified-local-demo',
+    sourceNotes: 'Review Arc docs/MCP context before claiming production capability.',
+    walletAuthority: false,
+    custodyAuthority: false,
+  };
+}
+
+function paymentRequestCard() {
+  return {
+    intentId: 'intent-local-components-001',
+    purpose: fields.purpose.value.trim(),
+    recipient: fields.recipient.value.trim(),
+    amount: normalizedAmount(),
+    asset: 'USDC',
+    assetDecimals: ARC_COMPONENT_EXPECTATIONS.erc20UsdcDecimals,
+    network: ARC_COMPONENT_EXPECTATIONS.network,
+    chainId: ARC_COMPONENT_EXPECTATIONS.chainId,
+    expiresAt: 'review-before-wallet-handoff',
+    frozenAt,
+    humanApprovalRequired: true,
+    moneyFieldsFrozenBeforeWallet: Boolean(frozenAt),
+  };
+}
+
+function receiptCard() {
+  return {
+    receiptId: 'receipt-local-components-001',
+    intentId: paymentRequestCard().intentId,
+    status: receiptAt ? 'simulated' : approvedAt ? 'approved_local_no_broadcast' : 'not_checked',
+    transactionHash: null,
+    explorerUrl: null,
+    checkedAt: receiptAt,
+    checks: [
+      { field: 'chainId', expected: ARC_COMPONENT_EXPECTATIONS.chainId, passed: true },
+      { field: 'asset', expected: 'USDC', passed: true },
+      { field: 'humanApprovalRequired', expected: true, passed: true },
+      { field: 'transactionBroadcast', expected: false, passed: true },
+    ],
+    transactionBroadcast: false,
+  };
+}
+
+function combinedObject() {
+  return {
+    schema: 'arc-mcp-builder-assistant.agentCommerce.components.v1',
+    status,
+    network: ARC_COMPONENT_EXPECTATIONS,
+    agent: agentCard(),
+    paymentRequest: paymentRequestCard(),
+    receipt: receiptCard(),
+    review: {
+      note: fields.reviewNote.value.trim(),
+      humanApprovalRequired: true,
+      localOnly: true,
+      walletConnected: false,
+      walletActionEnabled: false,
+      signingEnabled: false,
+      transactionBroadcast: false,
+      backendCalls: false,
+      mainnetEnabled: false,
+    },
+    events,
+  };
+}
+
+function render() {
+  const moneyFieldsFrozen = status !== 'draft';
+  cards.status.textContent = status === 'draft' ? 'Draft review object' : status === 'frozen' ? 'Money fields frozen' : status === 'approved' ? 'Local approval recorded' : 'Simulated receipt added';
+  cards.agent.textContent = JSON.stringify(agentCard(), null, 2);
+  cards.payment.textContent = JSON.stringify(paymentRequestCard(), null, 2);
+  cards.receipt.textContent = JSON.stringify(receiptCard(), null, 2);
+  cards.combined.textContent = JSON.stringify(combinedObject(), null, 2);
+  cards.events.replaceChildren(...events.map((entry) => {
+    const li = document.createElement('li');
+    li.textContent = `${entry.actor}: ${entry.event} · ${entry.at}`;
+    return li;
+  }));
+  for (const field of [fields.purpose, fields.amount, fields.recipient]) {
+    field.disabled = moneyFieldsFrozen;
+  }
+  buttons.freeze.disabled = status !== 'draft'
+    || !amountIsValid(fields.amount.value)
+    || !recipientIsValid(fields.recipient.value);
+  buttons.approve.disabled = status !== 'frozen';
+  buttons.receipt.disabled = status !== 'approved';
+}
+
+function reset() {
+  status = 'draft';
+  frozenAt = null;
+  approvedAt = null;
+  receiptAt = null;
+  events = [{
+    at: nowIso(),
+    actor: 'system',
+    event: 'Draft local component object created',
+    requiresHumanReview: true,
+    walletActionEnabled: false,
+    transactionBroadcast: false,
+  }];
+  render();
+}
+
+buttons.freeze.addEventListener('click', () => {
+  status = 'frozen';
+  frozenAt = nowIso();
+  addEvent('Human froze payment request fields before wallet handoff', 'human');
+  render();
+});
+buttons.approve.addEventListener('click', () => {
+  status = 'approved';
+  approvedAt = nowIso();
+  addEvent('Human recorded local approval; no wallet action was enabled', 'human');
+  render();
+});
+buttons.receipt.addEventListener('click', () => {
+  status = 'receipt_simulated';
+  receiptAt = nowIso();
+  addEvent('System added simulated receipt card without transaction broadcast', 'system');
+  render();
+});
+buttons.reset.addEventListener('click', reset);
+for (const field of Object.values(fields)) {
+  field.addEventListener('input', render);
+  field.addEventListener('change', render);
+}
+reset();

arc_builder_kit/examples/agent-commerce-components/index.html

@@ -0,0 +1,120 @@
+<!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 reusable agent commerce components for Arc MCP Builder Assistant." />
+  <title>Agent Commerce Components · 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,.07); --line: rgba(255,255,255,.14); --text: #f7f3ff; --muted: #beb6d8; --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 18% 0%, rgba(124,247,212,.18), transparent 32rem), radial-gradient(circle at 88% 8%, rgba(179,136,255,.2), transparent 34rem), linear-gradient(180deg, #080a12 0%, #11152a 62%, #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, select: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(1160px, calc(100% - 32px)); margin: 0 auto; }
+    header { padding: 26px 0 10px; }
+    .topbar, .hero, .grid, .actions, .cards { display: flex; gap: 16px; }
+    .topbar { align-items: center; justify-content: space-between; flex-wrap: wrap; }
+    .actions { 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 { 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; }
+    .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.8rem); }
+    h2 { margin-top: 0; font-size: clamp(1.35rem, 3vw, 2.05rem); }
+    p, li, label, .meta { color: var(--muted); }
+    .panel, .component-card { 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, 32px); }
+    .grid { display: grid; grid-template-columns: .95fr 1.05fr; align-items: start; padding-bottom: 72px; }
+    .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .wrap > *, .grid > *, .cards > * { min-width: 0; }
+    .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,.24); color: var(--text); padding: 12px 14px; font: inherit; }
+    textarea { min-height: 88px; 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; }
+    .warning { border-color: rgba(255,209,102,.38); background: rgba(255,209,102,.08); }
+    .meta { font-size: .9rem; }
+    .component-card h3 { margin-top: 0; }
+    .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: 900px) { .hero, .grid, .cards { 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="Component navigation">
+        <a href="../../">Home</a>
+        <a href="../../docs/view.html#agent-commerce-components.md">Component docs</a>
+        <a href="../../docs/view.html#agent-commerce-use-cases.md">Use cases</a>
+        <a href="../job-escrow-simulator/">Job escrow</a>
+      </nav>
+    </div>
+  </header>
+  <main id="content" class="wrap">
+    <section class="hero">
+      <div>
+        <p class="eyebrow">Local-only starter kit · no wallet connection</p>
+        <h1>Reusable agent commerce cards.</h1>
+        <p>Compose an agent card, payment request, receipt preview, and event log without invoking the separate guarded Arc Testnet wallet-send lab. The output is a reviewable local JSON contract.</p>
+        <p class="status" id="status-pill">Draft review object</p>
+      </div>
+      <div class="panel warning">
+        <h2>Safety boundary</h2>
+        <ul>
+          <li>Human approval is required before every wallet action.</li>
+          <li>No private keys, no custody, no wallet permissions, no backend calls.</li>
+          <li>No transaction broadcast and no mainnet path.</li>
+          <li>Arc Testnet facts stay explicit: chain ID 5042002, USDC, ERC-20 USDC 6 decimals.</li>
+        </ul>
+      </div>
+    </section>
+    <section class="grid">
+      <div class="panel">
+        <h2>Scenario builder</h2>
+        <div class="field"><label for="agent-name">Agent name</label><input id="agent-name" value="Research Agent" /></div>
+        <div class="field"><label for="agent-role">Agent role</label><select id="agent-role"><option value="docs-grounded-research">Docs-grounded research</option><option value="paid-api-gateway">Paid API gateway</option><option value="creator-payout-agent">Creator payout agent</option><option value="escrow-worker">Escrow worker</option></select></div>
+        <div class="field"><label for="purpose">Payment purpose</label><input id="purpose" value="Pay for a cited Arc docs summary" /></div>
+        <div class="field"><label for="amount">Amount, USDC</label><input id="amount" type="number" min="0.01" step="0.01" value="3.50" /></div>
+        <div class="field"><label for="recipient">Recipient placeholder</label><input id="recipient" value="0x1111111111111111111111111111111111111111" /></div>
+        <div class="field"><label for="review-note">Review note</label><textarea id="review-note">Human reviewer checks recipient, amount, asset, chain, expiry, and source notes before any wallet handoff.</textarea></div>
+        <div class="actions">
+          <button class="primary" id="freeze-request">Freeze request</button>
+          <button id="mark-approved" disabled>Mark local approval</button>
+          <button id="mark-receipt" disabled>Add simulated receipt</button>
+          <button id="reset-components">Reset</button>
+        </div>
+      </div>
+      <div>
+        <div class="cards" aria-label="Reusable component cards">
+          <article class="component-card"><h3>Agent card</h3><pre id="agent-card"></pre></article>
+          <article class="component-card"><h3>Payment request</h3><pre id="payment-card"></pre></article>
+          <article class="component-card"><h3>Receipt card</h3><pre id="receipt-card"></pre></article>
+          <article class="component-card"><h3>Event log</h3><ol class="event-log" id="event-log"></ol></article>
+        </div>
+        <div class="panel" style="margin-top:16px">
+          <h2>Combined review object</h2>
+          <pre id="components-json"></pre>
+          <p class="meta">This JSON is the handoff: any separately reviewed wallet integration should consume the frozen fields instead of asking an AI model to regenerate money-critical values.</p>
+        </div>
+      </div>
+    </section>
+  </main>
+  <script src="./components.js" defer></script>
+</body>
+</html>

arc_builder_kit/examples/agent-commerce-flows/flows.js

@@ -0,0 +1,271 @@
+const ARC_FLOW_EXPECTATIONS = Object.freeze({
+  network: 'arc-testnet',
+  chainId: 5042002,
+  chainIdHex: '0x4cef52',
+  nativeGasAsset: 'USDC',
+  nativeGasDecimals: 18,
+  erc20UsdcAddress: '0x3600000000000000000000000000000000000000',
+  erc20UsdcDecimals: 6,
+});
+
+const FLOW_TEMPLATES = Object.freeze({
+  'paid-api-call': {
+    title: 'Paid API call',
+    description: 'A research agent asks to buy one paid data response under a human-reviewed cost cap.',
+    agentName: 'Research Buyer Agent',
+    agentRole: 'paid-api-gateway',
+    recipient: '0x3333333333333333333333333333333333333333',
+    amount: '1.25',
+    purpose: 'Buy one market-data response for a cited report',
+    evidence: 'Reviewer checks endpoint purpose, quote, recipient, amount, and freshness before any future x402/Gateway proof path.',
+    receiptStatus: 'api_response_release_simulated',
+  },
+  'creator-payout': {
+    title: 'Creator payout',
+    description: 'A project lead reviews a contributor payout line item before any stablecoin settlement work.',
+    agentName: 'Payout Review Agent',
+    agentRole: 'creator-payout-agent',
+    recipient: '0x1111111111111111111111111111111111111111',
+    amount: '75.00',
+    purpose: 'Pay contributor for edited Arc builder demo clip',
+    evidence: 'Reviewer checks deliverable URL, contributor identity, payout reason, and amount before any future wallet handoff.',
+    receiptStatus: 'payout_note_simulated',
+  },
+  'ai-agent-commerce': {
+    title: 'AI-agent commerce',
+    description: 'One agent requests a specialist agent action under a user-approved spend cap.',
+    agentName: 'Coordinator Agent',
+    agentRole: 'agent-to-agent-coordinator',
+    recipient: '0x2222222222222222222222222222222222222222',
+    amount: '3.50',
+    purpose: 'Call specialist code-review agent for one bounded review task',
+    evidence: 'Reviewer checks specialist trust notes, quoted task, cap, and receipt expectations before any future paid-agent proof path.',
+    receiptStatus: 'specialist_output_simulated',
+  },
+});
+
+const fields = {
+  agentName: document.querySelector('#agent-name'),
+  recipient: document.querySelector('#recipient'),
+  amount: document.querySelector('#amount'),
+  purpose: document.querySelector('#purpose'),
+  evidence: document.querySelector('#evidence'),
+};
+const nodes = {
+  title: document.querySelector('#selected-title'),
+  description: document.querySelector('#selected-description'),
+  nav: document.querySelector('#flow-nav'),
+  status: document.querySelector('#flow-status'),
+  agent: document.querySelector('#agent-json'),
+  request: document.querySelector('#request-json'),
+  receipt: document.querySelector('#receipt-json'),
+  events: document.querySelector('#event-log'),
+  combined: document.querySelector('#flow-json'),
+};
+const buttons = {
+  freeze: document.querySelector('#freeze-flow'),
+  approve: document.querySelector('#approve-flow'),
+  receipt: document.querySelector('#simulate-receipt'),
+  reset: document.querySelector('#reset-flow'),
+};
+
+let selectedFlowId = 'paid-api-call';
+let state = 'draft_review';
+let frozenAt = null;
+let approvedAt = null;
+let receiptAt = null;
+let events = [];
+
+function nowIso() {
+  return new Date().toISOString();
+}
+
+function activeTemplate() {
+  return FLOW_TEMPLATES[selectedFlowId];
+}
+
+function amountIsValid(value) {
+  return /^(?:0|[1-9]\d*)(?:\.\d{1,2})?$/.test(String(value || '').trim())
+    && Number(value) > 0;
+}
+
+function recipientIsValid(value) {
+  return /^0x[a-fA-F0-9]{40}$/.test(String(value || '').trim())
+    && !/^0x0{40}$/i.test(String(value || '').trim());
+}
+
+function normalizedAmount() {
+  return amountIsValid(fields.amount.value) ? Number(fields.amount.value).toFixed(2) : '0.00';
+}
+
+function addEvent(event, actor = 'system') {
+  events = [...events, {
+    at: nowIso(),
+    actor,
+    event,
+    humanApprovalRequired: true,
+    walletActionEnabled: false,
+    transactionBroadcast: false,
+  }];
+}
+
+function loadFlow(flowId) {
+  selectedFlowId = flowId;
+  const flow = activeTemplate();
+  fields.agentName.value = flow.agentName;
+  fields.recipient.value = flow.recipient;
+  fields.amount.value = flow.amount;
+  fields.purpose.value = flow.purpose;
+  fields.evidence.value = flow.evidence;
+  state = 'draft_review';
+  frozenAt = null;
+  approvedAt = null;
+  receiptAt = null;
+  events = [{
+    at: nowIso(),
+    actor: 'system',
+    event: `${flow.title} local flow loaded`,
+    humanApprovalRequired: true,
+    walletActionEnabled: false,
+    transactionBroadcast: false,
+  }];
+  render();
+}
+
+function agentObject() {
+  const flow = activeTemplate();
+  return {
+    agentId: `${selectedFlowId}.local`,
+    displayName: fields.agentName.value.trim(),
+    role: flow.agentRole,
+    trustLevel: 'unverified-local-demo',
+    sourceNotes: fields.evidence.value.trim(),
+    walletAuthority: false,
+    custodyAuthority: false,
+  };
+}
+
+function requestObject() {
+  return {
+    intentId: `intent-${selectedFlowId}-001`,
+    flowId: selectedFlowId,
+    purpose: fields.purpose.value.trim(),
+    recipient: fields.recipient.value.trim(),
+    amount: normalizedAmount(),
+    asset: 'USDC',
+    assetDecimals: ARC_FLOW_EXPECTATIONS.erc20UsdcDecimals,
+    network: ARC_FLOW_EXPECTATIONS.network,
+    chainId: ARC_FLOW_EXPECTATIONS.chainId,
+    expiresAt: 'review-before-wallet-handoff',
+    humanApprovalRequired: true,
+    frozenBeforeWallet: Boolean(frozenAt),
+    frozenAt,
+  };
+}
+
+function receiptObject() {
+  const flow = activeTemplate();
+  return {
+    receiptId: `receipt-${selectedFlowId}-001`,
+    intentId: requestObject().intentId,
+    status: receiptAt ? flow.receiptStatus : approvedAt ? 'approved_local_no_broadcast' : 'not_checked',
+    transactionHash: null,
+    explorerUrl: null,
+    checkedAt: receiptAt,
+    checks: [
+      { field: 'flowId', expected: selectedFlowId, passed: true },
+      { field: 'chainId', expected: ARC_FLOW_EXPECTATIONS.chainId, passed: true },
+      { field: 'asset', expected: 'USDC', passed: true },
+      { field: 'humanApprovalRequired', expected: true, passed: true },
+      { field: 'transactionBroadcast', expected: false, passed: true },
+    ],
+    transactionBroadcast: false,
+  };
+}
+
+function combinedObject() {
+  return {
+    schema: 'arc-mcp-builder-assistant.agentCommerce.flow.v1',
+    state,
+    flowId: selectedFlowId,
+    network: ARC_FLOW_EXPECTATIONS,
+    agent: agentObject(),
+    request: requestObject(),
+    receipt: receiptObject(),
+    safety: {
+      localOnly: true,
+      humanApprovalRequired: true,
+      walletConnected: false,
+      walletActionEnabled: false,
+      signingEnabled: false,
+      transactionBroadcast: false,
+      backendCalls: false,
+      remoteRpcCalls: false,
+      liveX402Verification: false,
+      mainnetEnabled: false,
+    },
+    events,
+  };
+}
+
+function renderFlowNav() {
+  nodes.nav.replaceChildren(...Object.entries(FLOW_TEMPLATES).map(([flowId, flow]) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = `pill${flowId === selectedFlowId ? ' active' : ''}`;
+    button.textContent = flow.title;
+    button.addEventListener('click', () => loadFlow(flowId));
+    return button;
+  }));
+}
+
+function render() {
+  const flow = activeTemplate();
+  const moneyFieldsFrozen = state !== 'draft_review';
+  nodes.title.textContent = flow.title;
+  nodes.description.textContent = flow.description;
+  nodes.status.textContent = state;
+  nodes.agent.textContent = JSON.stringify(agentObject(), null, 2);
+  nodes.request.textContent = JSON.stringify(requestObject(), null, 2);
+  nodes.receipt.textContent = JSON.stringify(receiptObject(), null, 2);
+  nodes.combined.textContent = JSON.stringify(combinedObject(), null, 2);
+  nodes.events.replaceChildren(...events.map((entry) => {
+    const li = document.createElement('li');
+    li.textContent = `${entry.actor}: ${entry.event} · ${entry.at}`;
+    return li;
+  }));
+  for (const field of [fields.recipient, fields.amount, fields.purpose]) {
+    field.disabled = moneyFieldsFrozen;
+  }
+  buttons.freeze.disabled = state !== 'draft_review'
+    || !amountIsValid(fields.amount.value)
+    || !recipientIsValid(fields.recipient.value);
+  buttons.approve.disabled = state !== 'fields_frozen';
+  buttons.receipt.disabled = state !== 'approved_local_no_broadcast';
+  renderFlowNav();
+}
+
+buttons.freeze.addEventListener('click', () => {
+  state = 'fields_frozen';
+  frozenAt = nowIso();
+  addEvent('Human froze flow money fields before wallet handoff', 'human');
+  render();
+});
+buttons.approve.addEventListener('click', () => {
+  state = 'approved_local_no_broadcast';
+  approvedAt = nowIso();
+  addEvent('Human recorded local approval; no transaction was broadcast', 'human');
+  render();
+});
+buttons.receipt.addEventListener('click', () => {
+  state = 'receipt_simulated';
+  receiptAt = nowIso();
+  addEvent('System generated simulated receipt for the selected flow', 'system');
+  render();
+});
+buttons.reset.addEventListener('click', () => loadFlow(selectedFlowId));
+for (const field of Object.values(fields)) {
+  field.addEventListener('input', render);
+  field.addEventListener('change', render);
+}
+loadFlow(selectedFlowId);