@tokagent/tokagentos 2.0.23 → 2.0.29

package/templates/fullstack-app/plugins/plugin-tokagent-billing/src/dashboard/app.js

@@ -7,7 +7,10 @@
 //   3. PTON top-up: client builds a TransferWithAuthorization EIP-712, signs
 //      it via the wallet, and submits it as X-PAYMENT on a one-call dummy
 //      /v1/messages POST so the proxy executes vault.depositX402.
-//   4. Usage tabs (overview / day / model / key / calls) backed by the
+//   4. Swap-to-PTON (UI shell only, v2.0.21): user picks USDC/USDT/ETH/WBTC,
+//      preview shows route + PTON output, CTA wires to a stub `swapToPton()`
+//      that the next engineer will fill in (approve → swap → wrap → deposit).
+//   5. Usage tabs (overview / day / model / key / calls) backed by the
 //      /v1/usage/* endpoints.
 //
 // The file intentionally keeps a single shared `state` object so view-render
@@ -36,6 +39,36 @@ const CHAIN_EXPLORER_URL = String(CONFIG.CHAIN_EXPLORER_URL ?? "");
 const SESSION_KEY = "ai-proxy-dashboard:session";
 const ATTO = 10n ** 18n;
 
+// ---- Swap UI catalog (used by Swap card; addresses are placeholders the
+// engineer will replace when wiring on-chain calls). Icons come from the
+// public CoinGecko CDN so we don't need a build pipeline for sprite assets.
+const SWAP_TOKENS = [
+  {
+    symbol: "USDC",
+    name: "USD Coin",
+    decimals: 6,
+    icon: "https://assets.coingecko.com/coins/images/6319/small/usdc.png",
+  },
+  {
+    symbol: "USDT",
+    name: "Tether",
+    decimals: 6,
+    icon: "https://assets.coingecko.com/coins/images/325/small/Tether.png",
+  },
+  {
+    symbol: "ETH",
+    name: "Ether",
+    decimals: 18,
+    icon: "https://assets.coingecko.com/coins/images/279/small/ethereum.png",
+  },
+  {
+    symbol: "WBTC",
+    name: "Wrapped BTC",
+    decimals: 8,
+    icon: "https://assets.coingecko.com/coins/images/7598/small/wrapped_bitcoin_wbtc.png",
+  },
+];
+
 const state = {
   /** EIP-1193 provider (window.ethereum). */
   provider: null,
@@ -53,6 +86,17 @@ const state = {
   walletEth: null,
   /** Connected wallet's PTON token balance (atto, BigInt). */
   walletPton: null,
+  /** Per-token wallet balances for the Swap card. Keyed by symbol (USDC, USDT,
+   * ETH, WBTC). Engineer will populate via on-chain reads when wiring swap.
+   * Format: float (display units, NOT raw atto). */
+  walletBalances: {},
+  /** Per-token USD prices for the Swap output preview. Placeholders until the
+   * engineer wires a real price feed (Pyth / Chainlink / 1inch quote). */
+  tokenPrices: { USDC: 1, USDT: 1, ETH: 3000, WBTC: 65000 },
+  /** Currently-selected input token for the Swap card. */
+  swapInputToken: "USDC",
+  /** Slippage tolerance, basis points. 50 = 0.5%. */
+  swapSlippageBps: 50,
   /** Most recent /v1/usage/summary response. */
   usage: null,
   /** Pagination cursor for the "Recent calls" tab. */
@@ -623,6 +667,444 @@ async function topUp(ptonFloat) {
   };
 }
 
+// ----------------------------- Swap → PTON pipeline -----------------------------
+//
+// User flow: pick USDC / USDT / ETH / WBTC, click Swap, watch 3-4 wallet pops
+// fire in order, end up with vault credits.
+//
+// Route (verified on-chain 2026-05-20):
+//
+//   ERC-20 path:  input ──Uniswap V3──▶ WETH ──Uniswap V3──▶ WTON
+//                    (fee per token)         (0.3% pool, 0xC29271…)
+//                                    └──▶ WTON.swapToTON ▶ TON  (1 WTON_ray = 1e-9 TON_wei)
+//                                                          └──▶ TON.approve(PTON) ▶ PTON.deposit ▶ PTON
+//                                                                                    └──▶ EIP-3009 ▶ vault.depositX402
+//
+//   ETH  path:    SwapRouter02 with tokenIn=WETH, msg.value=amountIn (router auto-wraps),
+//                 then identical WTON→TON→PTON→vault tail.
+//
+// Mainnet (chainId 1) contracts:
+//   SwapRouter02      0x68b3465833fb72A70ecDF485E0e4C7bD8665Fc45
+//   QuoterV2          0x61fFE014bA17989E743c5F6cB21bF9697530B21e
+//   WETH              0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2
+//   WTON   (ray=27d)  0xc4A11aaf6ea915Ed7Ac194161d2fC9384F15bff2
+//   TON    (18d)      0x2be5e8c109e2197D077D13A82dAead6a9b3433C5
+//   PTON   (18d)      0x00D1EDcE8E7c617891FF76224DFf501c568f1Ce0  (PTON.ton() == TON above)
+//
+// Decimal contract: WTON uses 27-decimal "ray". TON / PTON use 18-decimal "wei".
+// WTON.swapToTON(wtonRay) burns wtonRay from caller and mints (wtonRay / 1e9) TON_wei.
+
+const SWAP_ADDRESSES = {
+  USDC: { address: "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", decimals: 6, weth_fee: 500 /* 0.05% */ },
+  USDT: { address: "0xdAC17F958D2ee523a2206206994597C13D831ec7", decimals: 6, weth_fee: 500 },
+  WBTC: { address: "0x2260FAC5E5542a773Aa44fBCfeDf7C193bc2C599", decimals: 8, weth_fee: 3000 /* 0.3% */ },
+  ETH:  { address: null,                                          decimals: 18, weth_fee: null /* native */ },
+};
+const SWAP_WETH         = "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
+const SWAP_WTON         = "0xc4A11aaf6ea915Ed7Ac194161d2fC9384F15bff2";
+const SWAP_TON          = "0x2be5e8c109e2197D077D13A82dAead6a9b3433C5";
+const SWAP_ROUTER02     = "0x68b3465833fb72A70ecDF485E0e4C7bD8665Fc45";
+const SWAP_QUOTER_V2    = "0x61fFE014bA17989E743c5F6cB21bF9697530B21e";
+const SWAP_WTON_FEE     = 3000;     // WETH/WTON pool fee
+const WTON_RAY_PER_WEI  = 10n ** 9n; // WTON is 27d, TON is 18d → ratio 1e9
+
+// ---------------------- tiny ABI encoding helpers (no deps) ----------------------
+
+// Strip 0x, lowercase. Returns "" for falsy.
+function _stripHex(h) {
+  if (!h) return "";
+  return String(h).replace(/^0x/i, "").toLowerCase();
+}
+// Left-pad to 32 bytes (64 hex chars).
+function _pad32(hex) {
+  const clean = _stripHex(hex);
+  if (clean.length > 64) throw new Error(`_pad32: value too large (${clean.length} hex chars)`);
+  return clean.padStart(64, "0");
+}
+// uint256 → 32-byte hex (no 0x).
+function _encUint(n) {
+  const big = typeof n === "bigint" ? n : BigInt(n);
+  if (big < 0n) throw new Error("_encUint: negative");
+  return _pad32(big.toString(16));
+}
+// address → 32-byte hex (no 0x).
+function _encAddr(addr) {
+  return _pad32(_stripHex(addr));
+}
+// 4-byte selector via keccak256 over the canonical signature.
+// We don't have keccak in vanilla JS — but every selector we need is
+// well-known, so we hard-code them as constants (audited against 4byte.directory).
+const SEL_ERC20_APPROVE     = "095ea7b3"; // approve(address,uint256)
+const SEL_ERC20_ALLOWANCE   = "dd62ed3e"; // allowance(address,address)
+const SEL_ERC20_BALANCE_OF  = "70a08231"; // balanceOf(address)
+const SEL_PTON_DEPOSIT      = "b6b55f25"; // deposit(uint256)
+const SEL_WTON_SWAP_TO_TON  = "f53fe70f"; // swapToTON(uint256)
+const SEL_ROUTER_EXACT_IN   = "b858183f"; // exactInput((bytes,address,uint256,uint256))
+const SEL_QUOTER_EXACT_IN   = "cdca1753"; // quoteExactInput(bytes,uint256)
+
+// parseUnits — convert a JS Number/string to BigInt atto units of given decimals,
+// without floating-point drift for sane decimal strings.
+function parseUnits(amount, decimals) {
+  const s = String(amount).trim();
+  if (!/^\d+(\.\d+)?$/.test(s)) throw new Error(`parseUnits: bad amount "${amount}"`);
+  const [wholeStr, fracStr = ""] = s.split(".");
+  const fracPadded = (fracStr + "0".repeat(decimals)).slice(0, decimals);
+  const combined = (wholeStr === "0" ? "" : wholeStr) + fracPadded;
+  const cleaned = combined.replace(/^0+/, "") || "0";
+  return BigInt(cleaned);
+}
+
+// formatUnits — BigInt → display string with `decimals` precision, trimmed.
+function formatUnits(value, decimals, displayDigits = 6) {
+  const big = typeof value === "bigint" ? value : BigInt(value);
+  const neg = big < 0n;
+  const abs = neg ? -big : big;
+  const denom = 10n ** BigInt(decimals);
+  const whole = abs / denom;
+  const frac = abs % denom;
+  const fracStr = frac.toString().padStart(decimals, "0").slice(0, displayDigits);
+  const trimmed = fracStr.replace(/0+$/, "");
+  const body = trimmed.length === 0 ? whole.toString() : `${whole.toString()}.${trimmed}`;
+  return neg ? "-" + body : body;
+}
+
+// Build the Uniswap V3 path bytes: addr | fee(3) | addr | fee(3) | addr...
+// Returns 0x-prefixed hex string suitable as a `bytes` arg.
+function _buildV3Path(hops) {
+  // hops = [{ token: addr }, { fee, token }, { fee, token }, ...]
+  if (!Array.isArray(hops) || hops.length < 2) throw new Error("path needs >= 2 hops");
+  let out = _stripHex(hops[0].token);
+  for (let i = 1; i < hops.length; i++) {
+    const h = hops[i];
+    if (typeof h.fee !== "number") throw new Error(`hop ${i} missing fee`);
+    out += h.fee.toString(16).padStart(6, "0"); // uint24 = 3 bytes = 6 hex
+    out += _stripHex(h.token);
+  }
+  return "0x" + out;
+}
+
+// Encode `bytes` ABI param. Returns the dynamic offset+length+padded content
+// suitable for splicing into a calldata payload. The CALLER manages the
+// containing header (offsets).
+function _encBytes(hex) {
+  const clean = _stripHex(hex);
+  const lenHex = _encUint(BigInt(clean.length / 2));
+  // pad to 32-byte boundary
+  const padded = clean + "0".repeat((64 - (clean.length % 64)) % 64);
+  return { len: lenHex, content: padded };
+}
+
+// Encode a call to QuoterV2.quoteExactInput(bytes path, uint256 amountIn).
+// QuoterV2 returns (uint256 amountOut, uint160[] sqrtPriceX96AfterList,
+//                    uint32[] initializedTicksCrossedList, uint256 gasEstimate).
+// We only need amountOut — the first 32 bytes of the return data.
+function _encQuoteExactInput(path, amountIn) {
+  // Layout (after 4-byte selector):
+  //   word 0: offset to `bytes path`  = 0x40 (64 = two words ahead)
+  //   word 1: amountIn
+  //   word 2: bytes length
+  //   word 3+: padded bytes
+  const b = _encBytes(path);
+  const data = SEL_QUOTER_EXACT_IN
+    + _encUint(64n)
+    + _encUint(amountIn)
+    + b.len
+    + b.content;
+  return "0x" + data;
+}
+
+// Encode SwapRouter02.exactInput((bytes path, address recipient,
+//                                 uint256 amountIn, uint256 amountOutMinimum)).
+// The struct is dynamic because it contains `bytes`, so the outer arg is also
+// passed by offset. Layout:
+//   word 0: offset to struct = 0x20
+//   word 1..3: head of struct (offset to bytes, recipient, amountIn, amountOutMinimum)
+//   word 4+: bytes payload (length + content padded)
+function _encExactInput({ path, recipient, amountIn, amountOutMinimum }) {
+  const b = _encBytes(path);
+  // Inside the struct: 4 words (bytes offset, recipient, amountIn, amountOutMin).
+  // Bytes offset (within struct) = 0x80 (4 * 32).
+  const data = SEL_ROUTER_EXACT_IN
+    + _encUint(32n)                         // offset to struct
+    + _encUint(128n)                        // struct.bytes offset
+    + _encAddr(recipient)
+    + _encUint(amountIn)
+    + _encUint(amountOutMinimum)
+    + b.len
+    + b.content;
+  return "0x" + data;
+}
+
+// ---------------------- swap pipeline plumbing ----------------------
+
+// Read ERC-20 allowance(owner, spender). Returns BigInt.
+async function _readAllowance(token, owner, spender) {
+  const data = "0x" + SEL_ERC20_ALLOWANCE + _encAddr(owner) + _encAddr(spender);
+  const hex = await rpc("eth_call", [{ to: token, data }, "latest"]);
+  return BigInt(hex);
+}
+
+// Read ERC-20 balanceOf(owner). Returns BigInt.
+async function _readErc20Balance(token, owner) {
+  const data = "0x" + SEL_ERC20_BALANCE_OF + _encAddr(owner);
+  const hex = await rpc("eth_call", [{ to: token, data }, "latest"]);
+  return BigInt(hex);
+}
+
+// Quote: amountIn of inputToken → WTON (in ray). For ERC-20 we go
+// input→WETH→WTON. For ETH we go WETH→WTON directly (since the router pulls
+// the ETH wrap from msg.value when tokenIn=WETH).
+async function _quoteSwapToWton(inputToken, amountIn) {
+  let hops;
+  if (inputToken === "ETH") {
+    hops = [{ token: SWAP_WETH }, { fee: SWAP_WTON_FEE, token: SWAP_WTON }];
+  } else {
+    const cfg = SWAP_ADDRESSES[inputToken];
+    hops = [
+      { token: cfg.address },
+      { fee: cfg.weth_fee, token: SWAP_WETH },
+      { fee: SWAP_WTON_FEE, token: SWAP_WTON },
+    ];
+  }
+  const path = _buildV3Path(hops);
+  const data = _encQuoteExactInput(path, amountIn);
+  // QuoterV2 mutates storage with simulated swaps, so it MUST be invoked via
+  // eth_call — never sent as a tx. (It's safe via eth_call because state mutation
+  // inside eth_call is discarded.)
+  const hex = await rpc("eth_call", [{ to: SWAP_QUOTER_V2, data }, "latest"]);
+  // First 32 bytes of the return = amountOut (uint256 of WTON in ray).
+  if (!hex || hex === "0x") throw new Error("quoter returned empty data");
+  const amountOutWtonRay = BigInt("0x" + _stripHex(hex).slice(0, 64));
+  return { path, amountOutWtonRay };
+}
+
+// Submit `data` from the user's wallet to `to` (optional `value`) and poll for
+// receipt. Throws if the receipt reports failure or 90s timeout elapses.
+async function _sendAndWait({ to, data, value }) {
+  const from = await activeAccountOrThrow();
+  const txParams = { from, to, data };
+  if (value !== undefined && value > 0n) txParams.value = "0x" + value.toString(16);
+  const txHash = await rpc("eth_sendTransaction", [txParams]);
+  const deadline = Date.now() + 90_000;
+  while (Date.now() < deadline) {
+    const rcpt = await rpc("eth_getTransactionReceipt", [txHash]);
+    if (rcpt) {
+      if (rcpt.status === "0x1") return { txHash, rcpt };
+      throw new Error(`tx ${txHash} reverted on-chain`);
+    }
+    await new Promise((r) => setTimeout(r, 1500));
+  }
+  throw new Error(`tx ${txHash} receipt timeout after 90s`);
+}
+
+// Ensure `spender` has at least `amount` allowance of `token` from the user.
+// Handles the USDT quirk: USDT (and a handful of other tokens) revert any
+// approve() call where the current allowance is non-zero and the new allowance
+// is also non-zero. The fix is the standard "approve(0) then approve(amount)"
+// dance. We do that unconditionally for USDT to keep the code simple.
+async function _ensureAllowance({ token, owner, spender, amount, symbol }) {
+  const current = await _readAllowance(token, owner, spender);
+  if (current >= amount) return; // already enough — skip
+  const isUsdt = symbol === "USDT";
+  if (isUsdt && current > 0n) {
+    setStatus($("#swap-status"), `Resetting USDT allowance to 0…`);
+    const data0 = "0x" + SEL_ERC20_APPROVE + _encAddr(spender) + _encUint(0n);
+    await _sendAndWait({ to: token, data: data0 });
+  }
+  setStatus($("#swap-status"), `Approving ${symbol}…`);
+  const data = "0x" + SEL_ERC20_APPROVE + _encAddr(spender) + _encUint(amount);
+  await _sendAndWait({ to: token, data });
+}
+
+// Execute the full swap → wrap → vault pipeline.
+async function swapToPton({ inputToken, inputAmountFloat, slippageBps }) {
+  // ---- 0. validate inputs / wallet / chain --------------------------------
+  if (!inputToken || !SWAP_ADDRESSES[inputToken]) {
+    throw new Error(`Unsupported input token: ${inputToken}`);
+  }
+  if (!Number.isFinite(inputAmountFloat) || inputAmountFloat <= 0) {
+    throw new Error("Amount must be > 0");
+  }
+  if (!Number.isFinite(slippageBps) || slippageBps < 0 || slippageBps > 10_000) {
+    throw new Error("Slippage must be 0..10000 bps");
+  }
+  if (!state.provider || !state.wallet) {
+    throw new Error("Connect a wallet first.");
+  }
+  if (CHAIN_ID !== 1) {
+    throw new Error(`Swap is only supported on Ethereum mainnet (chainId=1); current=${CHAIN_ID}.`);
+  }
+  const user = await activeAccountOrThrow();
+  await ensureChain();
+
+  const cfg = SWAP_ADDRESSES[inputToken];
+  const amountIn = parseUnits(inputAmountFloat, cfg.decimals);
+  setStatus($("#swap-status"), `Quoting ${inputToken} → WTON…`);
+
+  // ---- 1. quote via QuoterV2 → compute amountOutMinimum -------------------
+  // QuoterV2 returns the expected WTON-ray output. We apply the user's
+  // slippage tolerance to derive the minOut we'll pass to the router.
+  const { path, amountOutWtonRay } = await _quoteSwapToWton(inputToken, amountIn);
+  if (amountOutWtonRay === 0n) {
+    throw new Error("Quote returned 0 — no liquidity on this route.");
+  }
+  const minOutWtonRay =
+    (amountOutWtonRay * BigInt(10_000 - slippageBps)) / 10_000n;
+
+  // The minimum TON we're guaranteed to be able to wrap from the swap.
+  // We use the realized WTON balance delta post-swap (see step 3) as the
+  // canonical wrap amount — that's safe against unrelated WTON dust the user
+  // might already hold because we snapshot the balance *before* the swap.
+  // This early sanity check just rejects quotes so small they'd round to 0.
+  const minOutTonWei = minOutWtonRay / WTON_RAY_PER_WEI;
+  if (minOutTonWei === 0n) {
+    throw new Error("Quote too small (rounds to 0 TON). Increase amount.");
+  }
+
+  // Refresh the visible preview now that we have a real quote (overrides
+  // the placeholder USD-price estimate the UI showed pre-click).
+  try {
+    const outEl = document.getElementById("swap-output-pton");
+    if (outEl) outEl.textContent = formatUnits(minOutTonWei, 18, 6);
+  } catch { /* presentational only */ }
+
+  // ---- 2. stuck-flow recovery check ---------------------------------------
+  // If the user already has WTON in their wallet (>= the amount this swap
+  // would deliver), reuse it instead of doing another swap. This happens
+  // when a previous attempt completed step 3 (swap) but failed somewhere
+  // in step 4-6 (unwrap → deposit → vault) — the WTON ended up stranded
+  // in the wallet. The simplest, gas-cheapest recovery is to skip the
+  // fresh swap entirely and consume the existing WTON.
+  const wtonBalanceBefore = await _readErc20Balance(SWAP_WTON, user);
+  let wtonReceived; // amount we consider "ours" from this flow
+  if (wtonBalanceBefore >= minOutWtonRay) {
+    setStatus(
+      $("#swap-status"),
+      `Found ${formatUnits(wtonBalanceBefore / WTON_RAY_PER_WEI, 18, 4)} WTON from a previous attempt — reusing it (skipping swap).`,
+    );
+    wtonReceived = wtonBalanceBefore;
+  } else {
+    // ---- 3a. approve router (ERC-20 only) ---------------------------------
+    if (inputToken !== "ETH") {
+      await _ensureAllowance({
+        token: cfg.address,
+        owner: user,
+        spender: SWAP_ROUTER02,
+        amount: amountIn,
+        symbol: inputToken,
+      });
+    }
+    // ---- 3b. swap via SwapRouter02.exactInput → recipient = user ----------
+    // For ETH input the router auto-wraps msg.value when path starts with WETH.
+    // For ERC-20 the router uses the allowance we just set.
+    setStatus(
+      $("#swap-status"),
+      inputToken === "ETH"
+        ? `Swapping ETH → WTON via Uniswap V3…`
+        : `Swapping ${inputToken} → WETH → WTON via Uniswap V3…`,
+    );
+    const swapData = _encExactInput({
+      path,
+      recipient: user,
+      amountIn,
+      amountOutMinimum: minOutWtonRay,
+    });
+    await _sendAndWait({
+      to: SWAP_ROUTER02,
+      data: swapData,
+      value: inputToken === "ETH" ? amountIn : 0n,
+    });
+    // Use the realized post-swap WTON balance delta as the canonical amount
+    // for wrap → vault — this guarantees we don't over-wrap (which would
+    // revert in PTON.deposit on insufficient TON balance) and forwards the
+    // full swap output, not just the minimum.
+    const wtonBalanceAfter = await _readErc20Balance(SWAP_WTON, user);
+    wtonReceived = wtonBalanceAfter - wtonBalanceBefore;
+    if (wtonReceived < minOutWtonRay) {
+      // The receipt said 0x1 but no WTON delta. Most likely the wallet
+      // returned a stale tx hash (e.g. dedup of an identical previous
+      // calldata) and we polled the OLD receipt. If the wallet's TOTAL
+      // WTON balance now exceeds minOut, treat that as the swap output
+      // (it must have come from somewhere — and the user paid for it).
+      if (wtonBalanceAfter >= minOutWtonRay) {
+        setStatus(
+          $("#swap-status"),
+          `Swap tx returned no new WTON, but wallet has ${formatUnits(wtonBalanceAfter / WTON_RAY_PER_WEI, 18, 4)} WTON — using that.`,
+        );
+        wtonReceived = wtonBalanceAfter;
+      } else {
+        throw new Error(
+          `Swap underdelivered: got ${wtonReceived} WTON-ray, expected >= ${minOutWtonRay}`,
+        );
+      }
+    }
+  }
+  // Convert ray→wei. Truncate any sub-1e9-ray dust (will sit in wallet as WTON).
+  const tonToWrap = wtonReceived / WTON_RAY_PER_WEI;
+  if (tonToWrap === 0n) {
+    throw new Error("Swap produced sub-wei TON dust — increase amount.");
+  }
+  const wtonToBurn = tonToWrap * WTON_RAY_PER_WEI;
+
+  // ---- 4. WTON.swapToTON(wtonToBurn) → user's TON balance ----------------
+  setStatus($("#swap-status"), `Unwrapping WTON → TON…`);
+  {
+    const data = "0x" + SEL_WTON_SWAP_TO_TON + _encUint(wtonToBurn);
+    await _sendAndWait({ to: SWAP_WTON, data });
+  }
+
+  // ---- 5. TON.approve(PTON, tonToWrap) ------------------------------------
+  // Tokamak TON is a plain OZ ERC-20 with no USDT-style approve quirk, so the
+  // single approve + deposit pattern is safe.
+  await _ensureAllowance({
+    token: SWAP_TON,
+    owner: user,
+    spender: state.pton ?? (await resolveDepositTargets()).pton,
+    amount: tonToWrap,
+    symbol: "TON",
+  });
+
+  // ---- 6. PTON.deposit(tonToWrap) → user's PTON balance -------------------
+  setStatus($("#swap-status"), `Wrapping TON → PTON…`);
+  const ptonAddr = state.pton ?? (await resolveDepositTargets()).pton;
+  {
+    const data = "0x" + SEL_PTON_DEPOSIT + _encUint(tonToWrap);
+    await _sendAndWait({ to: ptonAddr, data });
+  }
+
+  // ---- 7. EIP-3009 sign + vault.depositX402 -------------------------------
+  // Reuse the existing topUp() pipeline: it builds the same TransferWithAuth
+  // we'd need (PTON, from=user, to=vault, value=ptonAmount) and POSTs
+  // /v1/topup/settle which drives the vault deposit.
+  setStatus($("#swap-status"), `Crediting vault…`);
+  // topUp() takes a float — convert atto-PTON back to a float. Use truncated
+  // micro-PTON arithmetic to match topUp()'s own atto<->float conversion path
+  // (it does `BigInt(Math.round(f * 1e6)) * (ATTO/1e6)`), so we avoid creating
+  // an atto value with sub-micro precision that topUp() would silently round.
+  const microPton = tonToWrap / (ATTO / 1_000_000n); // 18d → 6d truncation
+  if (microPton === 0n) throw new Error("Deposit too small (sub-micro PTON)");
+  const ptonFloat = Number(microPton) / 1_000_000;
+  await topUp(ptonFloat);
+
+  // ---- 8. UI refresh + reset ---------------------------------------------
+  setStatus(
+    $("#swap-status"),
+    `Done — ${formatUnits(tonToWrap, 18, 6)} PTON credited.`,
+    "ok",
+  );
+  try {
+    const amtEl = document.getElementById("swap-amount");
+    if (amtEl) amtEl.value = "";
+  } catch { /* ignore */ }
+  // Refresh the on-chain numbers. Each loader is allowed to fail (e.g. proxy
+  // briefly unavailable) without blocking the success status above.
+  await Promise.all([
+    loadCredits().catch(() => {}),
+    loadWalletHoldings().catch(() => {}),
+  ]);
+  renderKpis();
+}
+
 // ----------------------------- Loaders -----------------------------
 
 async function loadPrice() {
@@ -651,6 +1133,9 @@ async function loadWalletHoldings() {
   try {
     const ethHex = await rpc("eth_getBalance", [state.wallet, "latest"]);
     state.walletEth = BigInt(ethHex);
+    // Mirror native ETH into the per-token swap balance map for the "Max"
+    // button on the Swap card. ETH wallet balance is in wei (1e18).
+    state.walletBalances.ETH = Number(state.walletEth) / 1e18;
   } catch (e) {
     state.walletEth = null;
     console.warn("eth_getBalance failed", e);
@@ -662,10 +1147,34 @@ async function loadWalletHoldings() {
     const data = "0x70a08231" + padded;
     const ptonHex = await rpc("eth_call", [{ to: state.pton, data }, "latest"]);
     state.walletPton = BigInt(ptonHex);
+    // Mirror PTON into the swap-card balance map too — handy so a user who
+    // already holds PTON in their wallet can see it next to USDC/etc., and
+    // for forward compat if we ever add PTON as a swap input (no-op route).
+    state.walletBalances.PTON = Number(state.walletPton) / 1e18;
   } catch (e) {
     state.walletPton = null;
     console.warn("PTON.balanceOf failed", e);
   }
+  // Pull the Swap-card ERC-20 balances (USDC / USDT / WBTC) so the "Max"
+  // button works and the balance hint isn't perpetually "— USDC". These calls
+  // are mainnet-only (the token addresses are mainnet constants); on any
+  // other chain we silently leave the entries undefined so the UI shows "—".
+  if (CHAIN_ID === 1) {
+    for (const sym of ["USDC", "USDT", "WBTC"]) {
+      const cfg = SWAP_ADDRESSES[sym];
+      try {
+        const padded = state.wallet.toLowerCase().replace(/^0x/, "").padStart(64, "0");
+        const data = "0x70a08231" + padded;
+        const hex = await rpc("eth_call", [{ to: cfg.address, data }, "latest"]);
+        const raw = BigInt(hex || "0x0");
+        state.walletBalances[sym] = Number(raw) / 10 ** cfg.decimals;
+      } catch (e) {
+        // Swallow per-token RPC errors so one flaky read can't blank the
+        // whole holdings card. Leaving the entry undefined falls back to "—".
+        console.warn(`${sym}.balanceOf failed`, e);
+      }
+    }
+  }
 }
 
 async function loadUsage() {
@@ -723,8 +1232,8 @@ function renderKpis() {
   const reserved = c?.ledger?.reserved ?? c?.reserved ?? 0n;
   const accrued = c?.ledger?.accrued ?? c?.accrued ?? 0n;
   $("#kpi-balance").textContent = fmtPton(balance);
-  $("#kpi-reserved").textContent = fmtPton(reserved) + " PTON";
-  $("#kpi-accrued").textContent = fmtPton(accrued) + " PTON";
+  $("#kpi-reserved").textContent = fmtPton(reserved);
+  $("#kpi-accrued").textContent = fmtPton(accrued);
   $("#kpi-balance-usd").textContent = fmtUsdFromAttoPton(balance, state.tonUsd);
   // Wallet holdings (outside the vault). ETH and PTON share 18 decimals so
   // fmtPton works for both — only the unit label differs.
@@ -739,7 +1248,10 @@ function renderKpis() {
   $("#kpi-calls").textContent = fmtNumber(u?.calls ?? 0);
   $("#kpi-calls-ok").textContent = fmtNumber(u?.successCalls ?? 0);
   $("#kpi-calls-fail").textContent = fmtNumber(u?.failedCalls ?? 0);
-  $("#usage-retention").textContent = String(u?.retentionDays ?? "");
+  $("#usage-retention").textContent = String(u?.retentionDays ?? "90");
+
+  // Sync swap card balance hint whenever wallet balances refresh.
+  renderSwapPreview();
 }
 
 function renderUsageOverview() {
@@ -857,8 +1369,8 @@ async function renderKeysTable() {
     const tr = document.createElement("tr");
     const status = k.revokedAt ? `<span class="outcome-pill outcome-failed">revoked</span>` : `<span class="outcome-pill outcome-success">active</span>`;
     const action = k.revokedAt
-      ? `<button class="btn btn-danger" type="button" data-delete="${escape(k.id)}" title="Permanently remove this revoked key from the database">Delete</button>`
-      : `<button class="btn btn-danger" type="button" data-revoke="${escape(k.id)}">Revoke</button>`;
+      ? `<button class="btn btn-danger btn-small" type="button" data-delete="${escape(k.id)}" title="Permanently remove this revoked key from the database">Delete</button>`
+      : `<button class="btn btn-danger btn-small" type="button" data-revoke="${escape(k.id)}">Revoke</button>`;
       // Note: Delete (hard-delete) is intentionally NOT shown next to Revoke
       // for active keys — Revoke first, then Delete the revoked row. Avoids
       // accidentally wiping an active key (which would lose all in-flight
@@ -925,18 +1437,18 @@ function drawBarChart(canvasId, data) {
   ctx.clearRect(0, 0, w, h);
 
   if (!data.length) {
-    ctx.fillStyle = "#94a3c1";
+    ctx.fillStyle = "#9ca3af";
     ctx.font = "12px Inter, sans-serif";
     ctx.textAlign = "center";
     ctx.fillText("No data in window.", w / 2, h / 2);
     return;
   }
-  const padL = 32, padR = 16, padT = 16, padB = 28;
+  const padL = 36, padR = 16, padT = 16, padB = 28;
   const max = Math.max(...data.map((d) => d.value), 1);
   const barW = (w - padL - padR) / data.length;
 
   // Axes
-  ctx.strokeStyle = "#1c2742";
+  ctx.strokeStyle = "#1c1c2a";
   ctx.lineWidth = 1;
   ctx.beginPath();
   ctx.moveTo(padL, padT);
@@ -945,14 +1457,14 @@ function drawBarChart(canvasId, data) {
   ctx.stroke();
 
   // Y grid + labels (3 horizontal lines)
-  ctx.fillStyle = "#94a3c1";
-  ctx.font = "10px JetBrains Mono, monospace";
+  ctx.fillStyle = "#6b7280";
+  ctx.font = "10px 'JetBrains Mono', monospace";
   ctx.textAlign = "right";
   for (let i = 0; i <= 3; i++) {
     const y = padT + ((h - padT - padB) * (3 - i)) / 3;
     const v = Math.round((max * i) / 3);
-    ctx.fillText(String(v), padL - 4, y + 3);
-    ctx.strokeStyle = "rgba(28,39,66,0.6)";
+    ctx.fillText(String(v), padL - 6, y + 3);
+    ctx.strokeStyle = "rgba(28,28,42,0.7)";
     ctx.beginPath();
     ctx.moveTo(padL, y);
     ctx.lineTo(w - padR, y);
@@ -963,7 +1475,7 @@ function drawBarChart(canvasId, data) {
   for (let i = 0; i < data.length; i++) {
     const d = data[i];
     const x = padL + i * barW + 2;
-    const innerW = barW - 4;
+    const innerW = Math.max(2, barW - 4);
     const barH = ((h - padT - padB) * d.value) / max;
     const y = h - padB - barH;
     // Match the parent app's lime accent. Read the computed --accent so
@@ -973,11 +1485,25 @@ function drawBarChart(canvasId, data) {
       ? getComputedStyle(document.documentElement).getPropertyValue("--accent").trim()
       : "") || "#c4f547";
     ctx.fillStyle = accent;
-    ctx.fillRect(x, y, innerW, barH);
+    // Subtle rounded-top bars
+    const r = Math.min(3, innerW / 2);
+    if (barH > r * 2) {
+      ctx.beginPath();
+      ctx.moveTo(x, y + barH);
+      ctx.lineTo(x, y + r);
+      ctx.quadraticCurveTo(x, y, x + r, y);
+      ctx.lineTo(x + innerW - r, y);
+      ctx.quadraticCurveTo(x + innerW, y, x + innerW, y + r);
+      ctx.lineTo(x + innerW, y + barH);
+      ctx.closePath();
+      ctx.fill();
+    } else {
+      ctx.fillRect(x, y, innerW, barH);
+    }
   }
 
   // X labels (truncate to fit)
-  ctx.fillStyle = "#94a3c1";
+  ctx.fillStyle = "#9ca3af";
   ctx.font = "10px Inter, sans-serif";
   ctx.textAlign = "center";
   const everyN = Math.max(1, Math.ceil(data.length / 10));
@@ -1044,11 +1570,13 @@ function wireTabs() {
   for (const tab of document.querySelectorAll(".tab")) {
     tab.addEventListener("click", () => {
       document.querySelectorAll(".tab").forEach((t) => {
-        t.classList.remove("active");
+        // is-active is the new class; .active is preserved for any legacy
+        // CSS reader (the stylesheet keys off both).
+        t.classList.remove("is-active", "active");
         t.setAttribute("aria-selected", "false");
       });
       document.querySelectorAll(".tab-pane").forEach((p) => (p.hidden = true));
-      tab.classList.add("active");
+      tab.classList.add("is-active", "active");
       tab.setAttribute("aria-selected", "true");
       const name = tab.getAttribute("data-tab");
       state.activeTab = name;
@@ -1062,7 +1590,7 @@ function wireTabs() {
 }
 
 function wireTopupPresets() {
-  for (const b of document.querySelectorAll(".topup-presets button")) {
+  for (const b of document.querySelectorAll("#topup-preset-row .chip")) {
     b.addEventListener("click", () => {
       $("#topup-amount").value = b.getAttribute("data-preset");
       updateTopupUsd();
@@ -1073,6 +1601,8 @@ function wireTopupPresets() {
 
 function updateTopupUsd() {
   const v = parseFloat($("#topup-amount").value);
+  const estEl = $("#topup-est-pton");
+  if (estEl) estEl.textContent = Number.isFinite(v) && v > 0 ? String(v) : "0";
   if (!Number.isFinite(v) || v <= 0 || !state.tonUsd) {
     $("#topup-usd").textContent = "—";
     return;
@@ -1112,6 +1642,114 @@ function wireKeyCreate() {
       setStatus($("#key-modal-copy-status"), "Copy failed — select the value above and copy manually.", "err");
     }
   });
+
+  // ── "Install & Restart Agent" — open the confirm modal ────────────────
+  $("#key-modal-install").addEventListener("click", () => {
+    // Reset any prior status text in the confirm modal so the user starts
+    // from a clean slate if they bounce in and out of the confirm dialog.
+    setStatus($("#key-install-status"), "");
+    $("#key-install-modal").hidden = false;
+    $("#key-install-confirm").disabled = false;
+    $("#key-install-cancel").disabled = false;
+  });
+  $("#key-install-cancel").addEventListener("click", () => {
+    $("#key-install-modal").hidden = true;
+  });
+  $("#key-install-confirm").addEventListener("click", async () => {
+    const installStatus = $("#key-install-status");
+    const confirmBtn = $("#key-install-confirm");
+    const cancelBtn = $("#key-install-cancel");
+    const key = $("#key-modal-value").textContent?.trim() ?? "";
+    if (!/^sk-ai-[A-Za-z0-9_-]{16,}$/.test(key)) {
+      setStatus(installStatus, "Key text is not a valid sk-ai-... value.", "err");
+      return;
+    }
+    confirmBtn.disabled = true;
+    cancelBtn.disabled = true;
+    setStatus(installStatus, "Writing key to .env…");
+    try {
+      // Step 1: write the .env. CRITICAL: this MUST hit the local agent,
+      // not the remote billing gateway — the gateway has no access to the
+      // user's local filesystem. We use a same-origin fetch (no PROXY_BASE
+      // prefix) so it lands on the local agent's /v1/keys/install handler.
+      // (apiJson() prefixes PROXY_BASE which in client-mode = Railway URL.)
+      const installRes = await fetch("/v1/keys/install", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ key }),
+      });
+      if (!installRes.ok) {
+        let body = null;
+        try { body = await installRes.json(); } catch {}
+        throw new Error(
+          body?.error || `HTTP ${installRes.status} from /v1/keys/install`,
+        );
+      }
+      setStatus(installStatus, "Key saved. Requesting agent restart…");
+      // Step 2: trigger the restart via the existing /api/restart endpoint.
+      // That endpoint handles dev (in-process runtime bounce via
+      // setRestartHandler) and prod (process.exit + supervisor respawn)
+      // correctly; we don't reimplement that strategy here.
+      // /api/restart returns BEFORE the runtime is torn down (1s setTimeout),
+      // so this request itself succeeds. The poll below catches the moment
+      // the runtime is back up.
+      const restartRes = await fetch("/api/restart", {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+      });
+      if (!restartRes.ok) {
+        throw new Error(
+          `/api/restart returned HTTP ${restartRes.status} — key was saved but agent did not restart. Try restarting manually.`,
+        );
+      }
+      setStatus(installStatus, "Agent restarting — waiting for it to come back…");
+      // Poll until /v1/price answers 200 again. The restart cycle is
+      // typically a few seconds; we allow up to 60s for slow rebuilds.
+      const restored = await waitForServerBack({ timeoutMs: 60_000 });
+      if (restored) {
+        setStatus(installStatus, "Agent is back online — reloading page…", "ok");
+        setTimeout(() => window.location.reload(), 800);
+      } else {
+        setStatus(
+          installStatus,
+          "Agent did not come back online within 60s. Check your terminal — you may need to relaunch it manually.",
+          "err",
+        );
+        cancelBtn.disabled = false;
+      }
+    } catch (err) {
+      setStatus(installStatus, `Install failed: ${err.message}`, "err");
+      confirmBtn.disabled = false;
+      cancelBtn.disabled = false;
+    }
+  });
+}
+
+// Poll the agent for availability — used by the install-and-restart flow.
+// We hit a fast public endpoint and treat ANY 2xx response as "back up".
+// During restart the fetch first throws (TCP refused), then briefly may
+// return 503 while the runtime initializes, then settles to 200.
+async function waitForServerBack({ timeoutMs = 60_000 } = {}) {
+  const deadline = Date.now() + timeoutMs;
+  // Initial settle delay so we don't poll the still-alive pre-exit server.
+  // The server told us restartDelayMs=1500 — add a small safety margin.
+  await new Promise((r) => setTimeout(r, 2_000));
+  while (Date.now() < deadline) {
+    try {
+      // /v1/price is a small, cache-able, unauthenticated endpoint.
+      // Cache-bust with a timestamp param so the browser doesn't serve a
+      // 200 from disk cache while the actual server is still down.
+      const resp = await fetch(`/v1/price?_=${Date.now()}`, {
+        method: "GET",
+        cache: "no-store",
+      });
+      if (resp.ok) return true;
+    } catch {
+      // TCP refused / DNS fail / fetch abort — server still down, keep waiting.
+    }
+    await new Promise((r) => setTimeout(r, 1_000));
+  }
+  return false;
 }
 
 function wireFaucet() {
@@ -1160,6 +1798,240 @@ function wireTopup() {
   });
 }
 
+// ----------------------------- Swap card wiring -----------------------------
+
+function getSelectedSwapToken() {
+  return SWAP_TOKENS.find((t) => t.symbol === state.swapInputToken) ?? SWAP_TOKENS[0];
+}
+
+function renderSwapTokenDisplay() {
+  const tok = getSelectedSwapToken();
+  const icon = document.getElementById("swap-token-icon");
+  const label = document.getElementById("swap-token-label");
+  if (icon) {
+    icon.src = tok.icon;
+    icon.alt = `${tok.symbol} logo`;
+  }
+  if (label) label.textContent = tok.symbol;
+}
+
+function renderSwapTokenMenu() {
+  const menu = document.getElementById("swap-token-menu");
+  if (!menu) return;
+  menu.innerHTML = "";
+  for (const t of SWAP_TOKENS) {
+    const opt = document.createElement("button");
+    opt.type = "button";
+    opt.className = "token-option";
+    opt.setAttribute("role", "option");
+    opt.setAttribute("data-symbol", t.symbol);
+    opt.innerHTML = `
+      <img class="token-icon" src="${escape(t.icon)}" alt="" />
+      <span>${escape(t.symbol)}</span>
+      <span class="token-option-sub">${escape(t.name)}</span>
+    `;
+    opt.addEventListener("click", (ev) => {
+      ev.stopPropagation();
+      state.swapInputToken = t.symbol;
+      renderSwapTokenDisplay();
+      renderSwapRoute();
+      renderSwapPreview();
+      closeSwapTokenMenu();
+    });
+    menu.appendChild(opt);
+  }
+}
+
+function openSwapTokenMenu() {
+  const menu = document.getElementById("swap-token-menu");
+  const sel = document.getElementById("swap-token-select");
+  if (!menu || !sel) return;
+  menu.hidden = false;
+  sel.setAttribute("aria-expanded", "true");
+}
+
+function closeSwapTokenMenu() {
+  const menu = document.getElementById("swap-token-menu");
+  const sel = document.getElementById("swap-token-select");
+  if (!menu || !sel) return;
+  menu.hidden = true;
+  sel.setAttribute("aria-expanded", "false");
+}
+
+function renderSwapRoute() {
+  const route = document.getElementById("swap-route");
+  if (!route) return;
+  const tok = getSelectedSwapToken();
+  // ETH skips the first leg; non-ETH ERC-20 routes via ETH on the way to TON.
+  const steps = tok.symbol === "ETH"
+    ? ["ETH", "TON", "PTON"]
+    : [tok.symbol, "ETH", "TON", "PTON"];
+  route.innerHTML = steps
+    .map((s, i) => {
+      const isEnd = i === steps.length - 1;
+      const stepHtml = `<span class="route-step${isEnd ? " route-step-end" : ""}">${escape(s)}</span>`;
+      return i < steps.length - 1 ? `${stepHtml}<span class="route-arrow">→</span>` : stepHtml;
+    })
+    .join("");
+}
+
+function renderSwapPreview() {
+  const tok = getSelectedSwapToken();
+  const amtEl = document.getElementById("swap-amount");
+  const outPton = document.getElementById("swap-output-pton");
+  const outUsd = document.getElementById("swap-output-usd");
+  const balEl = document.getElementById("swap-input-balance");
+  const btn = document.getElementById("swap-btn");
+
+  // Balance hint (the engineer will hydrate state.walletBalances on token
+  // selection / approve; ETH is mirrored from state.walletEth in
+  // loadWalletHoldings()).
+  const bal = state.walletBalances[tok.symbol];
+  if (balEl) {
+    balEl.textContent = (typeof bal === "number" && bal >= 0)
+      ? `${bal.toLocaleString(undefined, { maximumFractionDigits: 6 })} ${tok.symbol}`
+      : `— ${tok.symbol}`;
+  }
+
+  const v = parseFloat(amtEl?.value ?? "");
+  const tokenUsd = state.tokenPrices[tok.symbol] ?? null;
+  const tonUsd = state.tonUsd ?? null;
+
+  // Output preview: inputAmount × tokenUsd / tonUsd. Both prices are
+  // placeholder until the engineer wires a real quote feed.
+  let pton = 0;
+  let usd = 0;
+  if (Number.isFinite(v) && v > 0 && tokenUsd && tonUsd) {
+    usd = v * tokenUsd;
+    pton = usd / tonUsd;
+  }
+  if (outPton) {
+    outPton.textContent = (Number.isFinite(v) && v > 0 && tokenUsd && tonUsd)
+      ? pton.toLocaleString(undefined, { maximumFractionDigits: 6 })
+      : "0.00";
+  }
+  if (outUsd) {
+    outUsd.textContent = (Number.isFinite(v) && v > 0 && tokenUsd)
+      ? usd.toFixed(2)
+      : "—";
+  }
+
+  // CTA state machine: needs wallet, then amount, then enabled.
+  if (btn) {
+    if (!state.session?.wallet) {
+      btn.disabled = true;
+      btn.textContent = "Connect wallet";
+    } else if (!Number.isFinite(v) || v <= 0) {
+      btn.disabled = true;
+      btn.textContent = "Enter an amount";
+    } else {
+      btn.disabled = false;
+      btn.textContent = `Swap ${tok.symbol} to PTON`;
+    }
+  }
+}
+
+function wireSwap() {
+  // Token dropdown
+  const sel = document.getElementById("swap-token-select");
+  if (sel) {
+    sel.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const menu = document.getElementById("swap-token-menu");
+      if (!menu) return;
+      if (menu.hidden) openSwapTokenMenu();
+      else closeSwapTokenMenu();
+    });
+    sel.addEventListener("keydown", (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        sel.click();
+      } else if (e.key === "Escape") {
+        closeSwapTokenMenu();
+      }
+    });
+  }
+  document.addEventListener("click", (e) => {
+    const menu = document.getElementById("swap-token-menu");
+    if (!menu || menu.hidden) return;
+    const within = e.target.closest && e.target.closest("#swap-token-select");
+    if (!within) closeSwapTokenMenu();
+  });
+
+  // Amount input
+  const amtEl = document.getElementById("swap-amount");
+  if (amtEl) amtEl.addEventListener("input", renderSwapPreview);
+
+  // Max button
+  const maxBtn = document.getElementById("swap-max-btn");
+  if (maxBtn) {
+    maxBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      const tok = getSelectedSwapToken();
+      const bal = state.walletBalances[tok.symbol];
+      if (typeof bal === "number" && bal > 0 && amtEl) {
+        amtEl.value = String(bal);
+        renderSwapPreview();
+      } else {
+        setStatus($("#swap-status"), `No ${tok.symbol} balance detected.`, "");
+      }
+    });
+  }
+
+  // Slippage buttons
+  for (const b of document.querySelectorAll(".slippage-btn")) {
+    b.addEventListener("click", () => {
+      document.querySelectorAll(".slippage-btn").forEach((x) => x.classList.remove("is-active"));
+      b.classList.add("is-active");
+      state.swapSlippageBps = Number(b.getAttribute("data-slippage")) || 50;
+    });
+  }
+
+  // CTA — drives the full Swap → wrap → vault pipeline. `swapToPton` sets a
+  // detailed "Done — N PTON credited" status itself before returning, so we
+  // deliberately do NOT overwrite it here on success. On failure, surface the
+  // error to the same status line.
+  const swapBtn = document.getElementById("swap-btn");
+  if (swapBtn) {
+    swapBtn.addEventListener("click", async () => {
+      const status = $("#swap-status");
+      const tok = getSelectedSwapToken();
+      const v = parseFloat(amtEl?.value ?? "");
+      if (!state.session?.wallet) {
+        setStatus(status, "Connect a wallet first.", "err");
+        return;
+      }
+      if (!Number.isFinite(v) || v <= 0) {
+        setStatus(status, "Amount must be > 0", "err");
+        return;
+      }
+      swapBtn.disabled = true;
+      setStatus(status, `Preparing ${tok.symbol} → PTON swap…`);
+      try {
+        await swapToPton({
+          inputToken: tok.symbol,
+          inputAmountFloat: v,
+          slippageBps: state.swapSlippageBps,
+        });
+        // swapToPton already set "Done — N PTON credited" + refreshed credits
+        // and wallet holdings. refreshAll re-fetches usage + price + keys so
+        // the dashboard's other KPIs are also in sync after a long swap flow.
+        await refreshAll();
+      } catch (e) {
+        setStatus(status, e.message, "err");
+      } finally {
+        renderSwapPreview(); // re-evaluate CTA label
+      }
+    });
+  }
+
+  // Initial render
+  renderSwapTokenMenu();
+  renderSwapTokenDisplay();
+  renderSwapRoute();
+  renderSwapPreview();
+}
+
 function wireCallsPager() {
   $("#calls-load-more").addEventListener("click", async () => {
     if (!state.callsCursor) return;
@@ -1337,6 +2209,7 @@ async function boot() {
   wireKeyCreate();
   wireFaucet();
   wireTopup();
+  wireSwap();
   wireCallsPager();
   wireLogout();
   wireSwitchChain();
@@ -1357,6 +2230,10 @@ async function boot() {
   } else {
     showLoginView();
   }
+  // After every render path the swap CTA should reflect connection state.
+  renderSwapPreview();
+  // Prime the topup USD estimate for the default value.
+  updateTopupUsd();
 }
 
 if (document.readyState === "loading") {