feat: runnable code & sandbox embeds for EVM examples

evm/evm-parity/examples/deploy-verify.mdx

@@ -3,10 +3,30 @@
 description: 'Deploying and verifying smart contracts on Sei with viem, ethers, Foundry, and Hardhat'
 ---
 
+import { SandboxEmbed } from '/snippets/sandbox-embed.jsx';
+import { AddSeiButton } from '/snippets/add-sei-button.jsx';
+
 Sei is EVM-compatible — standard deployment tooling works without modification. This page covers deploying a contract and verifying its source on the Sei block explorer.
 
 For a deeper look at verification options (Remix, Sourcify UI, batch verification), see the [Verify Contracts](/evm/evm-verify-contracts) page.
 
+## Deploy from your browser (Remix)
+
+No local toolchain required — compile and deploy a contract to Sei testnet straight from the browser. The Remix sandbox below preloads a minimal `Counter.sol`.
+
+First, add Sei testnet to your wallet:
+
+<AddSeiButton network="testnet" label="Add Sei testnet" />
+
+Then in Remix: compile under the **Solidity Compiler** tab, open **Deploy & Run**, set **Environment** to **Injected Provider — MetaMask** (or **External HTTP Provider** pointed at `https://evm-rpc-testnet.sei-apis.com`), and click **Deploy**. Sei has instant finality, so the deployment confirms in well under a second.
+
+<SandboxEmbed
+  kind="remix"
+  src="https://remix.ethereum.org/?#activate=solidity,fileManager&code=Ly8gU1BEWC1MaWNlbnNlLUlkZW50aWZpZXI6IE1JVApwcmFnbWEgc29saWRpdHkgXjAuOC4yNDsKCi8vLyBAdGl0bGUgQ291bnRlciDigJQgbWluaW1hbCBjb250cmFjdCB0byBjb21waWxlICYgZGVwbG95IHRvIFNlaSB0ZXN0bmV0Lgpjb250cmFjdCBDb3VudGVyIHsKICAgIHVpbnQyNTYgcHVibGljIGNvdW50OwogICAgZnVuY3Rpb24gaW5jcmVtZW50KCkgZXh0ZXJuYWwgeyBjb3VudCsrOyB9CiAgICBmdW5jdGlvbiBkZWNyZW1lbnQoKSBleHRlcm5hbCB7IGNvdW50LS07IH0KfQ"
+  title="Counter.sol · deploy to Sei testnet"
+  description="Remix IDE with a minimal Counter contract preloaded. Compile in-browser, then deploy to Sei testnet."
+/>
+
 ## Deploying with viem or ethers
 
 <CodeGroup>
@@ -115,7 +135,7 @@
 npx hardhat ignition deploy ignition/modules/MyContract.ts --network sei
 ```
 
 ## Verifying Contracts
 
 Sei's block explorer is [Seiscan](https://seiscan.io). The recommended verification method is [Sourcify](https://sourcify.dev/) — no API key required.
 
@@ -192,7 +212,7 @@
 
 Running `npx hardhat verify` without the `sourcify` subtask attempts verification on all enabled providers (Etherscan, Blockscout, and Sourcify) in a single run.
 
 ## Network Reference
 
 | Network | Chain ID | RPC | Explorer |
 | --- | --- | --- | --- |

evm/evm-parity/examples/erc20.mdx

@@ -3,10 +3,30 @@
 description: 'Reading and writing ERC-20 tokens on Sei with viem and ethers'
 ---
 
+import { SandboxEmbed } from '/snippets/sandbox-embed.jsx';
+import { AddSeiButton } from '/snippets/add-sei-button.jsx';
+
 # ERC-20 Interaction
 
 Standard ERC-20 contracts work on Sei without modification. This page covers the common read and write operations using viem and ethers.
 
+## Try it: deploy an ERC-20
+
+Compile and deploy a real ERC-20 to Sei testnet from the browser — the Remix sandbox preloads an OpenZeppelin-based `DemoToken`. Then point the read/write patterns below at your deployed address.
+
+First, add Sei testnet to your wallet:
+
+<AddSeiButton network="testnet" label="Add Sei testnet" />
+
+In Remix, compile under **Solidity Compiler**, then **Deploy & Run** with **Environment** set to **Injected Provider — MetaMask** (or **External HTTP Provider** at `https://evm-rpc-testnet.sei-apis.com`).
+
+<SandboxEmbed
+  kind="remix"
+  src="https://remix.ethereum.org/?#activate=solidity,fileManager&code=Ly8gU1BEWC1MaWNlbnNlLUlkZW50aWZpZXI6IE1JVApwcmFnbWEgc29saWRpdHkgXjAuOC4yNDsKCmltcG9ydCAiQG9wZW56ZXBwZWxpbi9jb250cmFjdHMvdG9rZW4vRVJDMjAvRVJDMjAuc29sIjsKCmNvbnRyYWN0IERlbW9Ub2tlbiBpcyBFUkMyMCB7CiAgICBjb25zdHJ1Y3RvcigpIEVSQzIwKCJEZW1vIFRva2VuIiwgIkRFTU8iKSB7CiAgICAgICAgX21pbnQobXNnLnNlbmRlciwgMV8wMDBfMDAwICogMTAgKiogZGVjaW1hbHMoKSk7CiAgICB9Cn0"
+  title="DemoToken (ERC-20) · deploy to Sei testnet"
+  description="Remix IDE with an OpenZeppelin ERC-20 preloaded. Compile in-browser and deploy to Sei testnet."
+/>
+
 ## Setup
 
 <CodeGroup>
@@ -64,7 +84,7 @@
 
 </CodeGroup>
 
 ## Reading Token Metadata
 
 <CodeGroup>
 
@@ -88,7 +108,7 @@
 
 </CodeGroup>
 
 ## Reading Balances and Allowances
 
 <CodeGroup>
 
@@ -115,7 +135,7 @@
 
 </CodeGroup>
 
 ## Transferring Tokens
 
 <CodeGroup>
 
@@ -139,7 +159,7 @@
 
 </CodeGroup>
 
 ## Approving a Spender
 
 <CodeGroup>
 
@@ -173,7 +193,7 @@
 
 </CodeGroup>
 
 ## Watching Transfer Events
 
 <CodeGroup>
 
@@ -204,7 +224,7 @@
 
 </CodeGroup>
 
 ## Fetching Historical Transfers
 
 <CodeGroup>
 
@@ -225,6 +245,6 @@
 
 </CodeGroup>
 
 ## CosmWasm Token Compatibility
 
 CW20 tokens on Sei have ERC-20 pointer contracts that expose the standard ERC-20 interface. You can use all of the patterns above against a CW20 pointer address. See [Pointer Contracts](/evm/evm-parity/examples/pointer-contracts) for how to look up the pointer address.

evm/evm-parity/examples/erc721.mdx

@@ -3,10 +3,30 @@
 description: 'Reading and writing ERC-721 NFTs on Sei with viem and ethers'
 ---
 
+import { SandboxEmbed } from '/snippets/sandbox-embed.jsx';
+import { AddSeiButton } from '/snippets/add-sei-button.jsx';
+
 # ERC-721 Interaction
 
 Standard ERC-721 contracts work on Sei without modification. This page covers reading token ownership, transferring NFTs, and managing approvals.
 
+## Try it: deploy an ERC-721
+
+Compile and deploy a real ERC-721 to Sei testnet from the browser — the Remix sandbox preloads an OpenZeppelin-based `DemoNFT` with a public `mint()`. Then point the patterns below at your deployed address.
+
+First, add Sei testnet to your wallet:
+
+<AddSeiButton network="testnet" label="Add Sei testnet" />
+
+In Remix, compile under **Solidity Compiler**, then **Deploy & Run** with **Environment** set to **Injected Provider — MetaMask** (or **External HTTP Provider** at `https://evm-rpc-testnet.sei-apis.com`).
+
+<SandboxEmbed
+  kind="remix"
+  src="https://remix.ethereum.org/?#activate=solidity,fileManager&code=Ly8gU1BEWC1MaWNlbnNlLUlkZW50aWZpZXI6IE1JVApwcmFnbWEgc29saWRpdHkgXjAuOC4yNDsKCmltcG9ydCAiQG9wZW56ZXBwZWxpbi9jb250cmFjdHMvdG9rZW4vRVJDNzIxL0VSQzcyMS5zb2wiOwoKY29udHJhY3QgRGVtb05GVCBpcyBFUkM3MjEgewogICAgdWludDI1NiBwdWJsaWMgbmV4dElkOwogICAgY29uc3RydWN0b3IoKSBFUkM3MjEoIkRlbW8gTkZUIiwgIkRORlQiKSB7fQogICAgZnVuY3Rpb24gbWludCgpIGV4dGVybmFsIHsgX3NhZmVNaW50KG1zZy5zZW5kZXIsIG5leHRJZCsrKTsgfQp9"
+  title="DemoNFT (ERC-721) · deploy to Sei testnet"
+  description="Remix IDE with an OpenZeppelin ERC-721 preloaded. Compile in-browser and deploy to Sei testnet."
+/>
+
 ## Setup
 
 <CodeGroup>
@@ -70,7 +90,7 @@
 
 </CodeGroup>
 
 ## Reading Token Data
 
 <CodeGroup>
 
@@ -96,7 +116,7 @@
 
 </CodeGroup>
 
 ## Checking Ownership Count
 
 <CodeGroup>
 
@@ -137,7 +157,7 @@
 
 </CodeGroup>
 
 ## Approving a Single Token
 
 <CodeGroup>
 
@@ -156,7 +176,7 @@
 
 </CodeGroup>
 
 ## Approving All Tokens (Operator)
 
 <CodeGroup>
 
@@ -188,7 +208,7 @@
 
 </CodeGroup>
 
 ## Watching Transfer Events
 
 <CodeGroup>
 
@@ -219,6 +239,6 @@
 
 </CodeGroup>
 
 ## CosmWasm NFT Compatibility
 
 CW721 tokens on Sei have ERC-721 pointer contracts that expose the standard ERC-721 interface. You can use all of the patterns above against a CW721 pointer address. See [Pointer Contracts](/evm/evm-parity/examples/pointer-contracts) for how to look up the pointer address.

evm/evm-parity/examples/ethers-quickstart.mdx

@@ -3,7 +3,10 @@
 description: 'Using ethers v6 with Sei in a Node.js script or browser context'
 ---
 
+import { RunSnippet } from '/snippets/run-snippet.jsx';
+import { SandboxEmbed } from '/snippets/sandbox-embed.jsx';
+
 # ethers v6 Quickstart
 
 This example covers ethers v6 with Sei. The patterns apply whether you are writing a Node.js script, a CLI tool, or a browser app.
 
@@ -19,7 +22,7 @@
 npx tsx script.ts
 ```
 
 ## Read-Only Provider
 
 ```ts
 import { ethers } from 'ethers';
@@ -27,7 +30,7 @@
 const provider = new ethers.JsonRpcProvider('https://evm-rpc.sei-apis.com');
 ```
 
 ## Reading Chain Data
 
 This is the first milestone — it needs no private key.
 
@@ -55,7 +58,32 @@
 
 The exact numbers are illustrative — your block number and balance will differ. `getBlockNumber()` and `getTransactionCount()` return a `number`, while `getBalance()` returns a `bigint` in wei (format it with `ethers.formatEther()`).
 
+## Try It Live
+
+Run these read-only calls against Sei mainnet right now — no install, no private key. They're plain JSON-RPC, the same reads the script above performs.
+
+<RunSnippet method="eth_blockNumber" network="mainnet" title="eth_blockNumber" />
+
+<RunSnippet
+  method="eth_getBalance"
+  params={["0x0000000000000000000000000000000000000000", "latest"]}
+  network="mainnet"
+  title="eth_getBalance"
+  description="Balance in wei of the example address at the latest block — swap in any address."
+/>
+
+## Edit and run
+
+Edit and re-run the full ethers code from this page live in the browser — a real ethers v6 `JsonRpcProvider` reading Sei testnet:
+
+<SandboxEmbed
+  kind="codesandbox"
+  src="https://codesandbox.io/embed/qs82lw?view=split&hidenavigation=1&theme=dark"
+  title="ethers · read Sei testnet"
+  description="A real ethers v6 provider reading Sei testnet (atlantic-2). Edit index.js and the preview re-runs."
+/>
+
 ## Browser Provider
 
 In a browser context, connect to the user's injected wallet:
 
@@ -65,7 +93,7 @@
 const address = await signer.getAddress();
 ```
 
 ## Wallet from Private Key
 
 For scripts and backend services:
 
@@ -73,7 +101,7 @@
 const wallet = new ethers.Wallet('0xYourPrivateKey', provider);
 ```
 
 ## Sending a Transaction
 
 Next step — this requires a funded account; get testnet SEI from the [faucet](/learn/faucet).
 
@@ -87,7 +115,7 @@
 // receipt is final immediately — Sei has instant finality
 ```
 
 ## Reading a Contract
 
 ```ts
 const abi = ['function balanceOf(address owner) view returns (uint256)'];
@@ -96,7 +124,7 @@
 const balance = await contract.balanceOf('0xYourAddress');
 ```
 
 ## Writing to a Contract
 
 Pass a signer (wallet or browser signer) to the contract constructor for write operations:
 
@@ -107,7 +135,7 @@
 const receipt = await tx.wait();
 ```
 
 ## Estimating Gas
 
 ```ts
 const gas = await provider.estimateGas({
@@ -117,7 +145,7 @@
 });
 ```
 
 ## Listening for Events
 
 ```ts
 contract.on('Transfer', (from, to, value) => {
@@ -128,7 +156,7 @@
 contract.off('Transfer');
 ```
 
 ## Next Steps
 
 - [Python quickstart (web3.py)](/evm/python-quickstart) — the same first steps in Python
 - [ERC-20 interaction](/evm/evm-parity/examples/erc20) — full token read/write examples

evm/evm-parity/examples/viem-quickstart.mdx

@@ -3,7 +3,10 @@
 description: 'Using viem with Sei in a Node.js script, CLI tool, or backend service'
 ---
 
+import { RunSnippet } from '/snippets/run-snippet.jsx';
+import { SandboxEmbed } from '/snippets/sandbox-embed.jsx';
+
 # viem Quickstart
 
 This example shows how to use viem with Sei outside of a React context — in a Node.js script, CLI tool, or backend service. For React apps, see [wagmi](https://wagmi.sh) and the [frontend guide](/evm/building-a-frontend).
 
@@ -19,7 +22,7 @@
 npx tsx script.ts
 ```
 
 ## Public Client
 
 A public client handles all read-only operations.
 
@@ -42,7 +45,7 @@
 });
 ```
 
 ## Reading Chain Data
 
 This is the first milestone — it needs no private key.
 
@@ -72,7 +75,34 @@
 
 The exact numbers are illustrative — your block number and balance will differ. Note the trailing `n`: `getBlockNumber()` and `getBalance()` return `bigint`, while `getTransactionCount()` returns a `number`.
 
+## Try It Live
+
+Run these read-only calls against Sei mainnet right now — no install, no private key. They're the same reads the script above performs, issued straight from your browser.
+
+<RunSnippet method="eth_blockNumber" network="mainnet" title="eth_blockNumber" description="Latest committed block on pacific-1. Returns a hex quantity — the widget decodes it to decimal below the response." />
+
+<RunSnippet method="eth_chainId" network="mainnet" title="eth_chainId" description="Sei mainnet EVM chain ID. 0x531 = 1329." />
+
+<RunSnippet
+  method="eth_getBalance"
+  params={["0x0000000000000000000000000000000000000000", "latest"]}
+  network="mainnet"
+  title="eth_getBalance"
+  description="Balance in wei of the example address at the latest block — swap in any address."
+/>
+
+## Edit and run
+
+The buttons above issue raw JSON-RPC. To run the full viem code from this page — imports, a public client, several reads — edit and re-run it live in the sandbox below. No install, no wallet, no key:
+
+<SandboxEmbed
+  kind="codesandbox"
+  src="https://codesandbox.io/embed/cgtx45?view=split&hidenavigation=1&theme=dark"
+  title="viem · read Sei testnet"
+  description="A real viem public client reading Sei testnet (atlantic-2). Edit index.js and the preview re-runs."
+/>
+
 ## Wallet Client
 
 A wallet client handles signing and broadcasting transactions.
 
@@ -92,7 +122,7 @@
 
 For browser use, replace `http()` with `custom(window.ethereum)` and call `walletClient.getAddresses()` to get the connected account.
 
 ## Sending a Transaction
 
 Next step — this requires a funded account; get testnet SEI from the [faucet](/learn/faucet).
 
@@ -108,7 +138,7 @@
 // receipt is final immediately — Sei has instant finality
 ```
 
 ## Reading a Contract
 
 ```ts
 import { parseAbi } from 'viem';
@@ -123,7 +153,7 @@
 });
 ```
 
 ## Writing to a Contract
 
 ```ts
 const hash = await walletClient.writeContract({
@@ -136,7 +166,7 @@
 const receipt = await client.waitForTransactionReceipt({ hash });
 ```
 
 ## Simulating Before Writing
 
 ```ts
 const { result } = await client.simulateContract({
@@ -151,7 +181,7 @@
 const hash = await walletClient.writeContract(result);
 ```
 
 ## Estimating Gas
 
 Always use `estimateGas` rather than hard-coding values. SSTORE costs on Sei are governance-adjustable.
 
@@ -163,7 +193,7 @@
 });
 ```
 
 ## Next Steps
 
 - [Python quickstart (web3.py)](/evm/python-quickstart) — the same first steps in Python
 - [ERC-20 interaction](/evm/evm-parity/examples/erc20) — full token read/write examples

snippets/run-snippet.jsx

@@ -0,0 +1,210 @@
+// RunSnippet — a click-to-load "Try it" button for read-only EVM JSON-RPC calls.
+//
+// Sei's public EVM RPC endpoints return `access-control-allow-origin: *`, so a
+// read-only call can be issued straight from the browser with a plain `fetch`
+// POST — no SDK, no proxy. Mintlify's React runtime cannot import npm packages,
+// so this component uses only browser globals (fetch, BigInt).
+//
+// Theming note: Mintlify applies `dark:text-*` utilities (class strategy) but
+// NOT `dark:bg-*` / `dark:border-*` on custom-snippet container <div>s — verified
+// empirically. So surfaces and hairlines use theme-agnostic translucent inline
+// styles (rgba grey), which render correctly over both light and dark backdrops,
+// while text keeps the working `dark:text-*` classes.
+//
+// Usage in MDX:
+//   import { RunSnippet } from '/snippets/run-snippet.jsx';
+//
+//   <RunSnippet method="eth_blockNumber" />
+//   <RunSnippet
+//     method="eth_getBalance"
+//     params={["0x0000000000000000000000000000000000000000", "latest"]}
+//     network="testnet"
+//     description="Read the SEI balance of an address at the latest block."
+//   />
+export const RunSnippet = (props) => {
+	const {
+		method = 'eth_blockNumber',
+		params = [],
+		network = 'testnet',
+		endpoint,
+		label,
+		title,
+		description,
+		decode = 'auto'
+	} = props || {};
+
+	// --- config (kept inside the component: module-level decls crash in Mintlify) ---
+	const ENDPOINTS = {
+		testnet: 'https://evm-rpc-testnet.sei-apis.com',
+		mainnet: 'https://evm-rpc.sei-apis.com'
+	};
+	const rpcUrl = endpoint || ENDPOINTS[network] || ENDPOINTS.testnet;
+	const networkLabel = network === 'mainnet' ? 'pacific-1 · mainnet' : network === 'testnet' ? 'atlantic-2 · testnet' : network;
+
+	const requestBody = { jsonrpc: '2.0', id: 1, method, params };
+	const requestJson = JSON.stringify(requestBody, null, 2);
+
+	// --- state ---
+	const [phase, setPhase] = useState('idle'); // idle | loading | success | error
+	const [result, setResult] = useState(null);
+	const [errorMsg, setErrorMsg] = useState(null);
+	const [elapsed, setElapsed] = useState(null);
+	const [copied, setCopied] = useState(false);
+	const [btnHover, setBtnHover] = useState(false);
+
+	// --- helpers (nested) ---
+	const groupThousands = (s) => s.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+
+	const hexToDecimal = (value) => {
+		if (typeof value !== 'string' || !/^0x[0-9a-fA-F]+$/.test(value)) return null;
+		try {
+			return groupThousands(BigInt(value).toString(10));
+		} catch (e) {
+			return null;
+		}
+	};
+
+	const run = async () => {
+		setPhase('loading');
+		setErrorMsg(null);
+		setResult(null);
+		setElapsed(null);
+		const startedAt = typeof performance !== 'undefined' ? performance.now() : null;
+		try {
+			const response = await fetch(rpcUrl, {
+				method: 'POST',
+				headers: { 'Content-Type': 'application/json' },
+				body: JSON.stringify(requestBody)
+			});
+			const data = await response.json();
+			if (startedAt != null && typeof performance !== 'undefined') {
+				setElapsed(Math.round(performance.now() - startedAt));
+			}
+			if (data && data.error) {
+				setErrorMsg(data.error.message || 'RPC returned an error');
+				setPhase('error');
+				return;
+			}
+			setResult(data ? data.result : undefined);
+			setPhase('success');
+		} catch (err) {
+			setErrorMsg(err && err.message ? err.message : 'Request failed');
+			setPhase('error');
+		}
+	};
+
+	const resultString = result === undefined ? 'undefined' : JSON.stringify(result, null, 2);
+	const decoded = decode !== 'off' && typeof result === 'string' ? hexToDecimal(result) : null;
+
+	const copyResult = () => {
+		if (typeof navigator !== 'undefined' && navigator.clipboard) {
+			navigator.clipboard.writeText(resultString);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 2000);
+		}
+	};
+
+	// --- icons (nested) ---
+	const SpinnerIcon = () => (
+		<svg className='animate-spin h-4 w-4' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'>
+			<circle className='opacity-25' cx='12' cy='12' r='10' stroke='currentColor' strokeWidth='4' />
+			<path className='opacity-75' fill='currentColor' d='M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z' />
+		</svg>
+	);
+
+	const PlayIcon = () => (
+		<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='currentColor'>
+			<path d='M8 5v14l11-7z' />
+		</svg>
+	);
+
+	// --- theme-agnostic surfaces (see theming note above) ---
+	const HAIRLINE = 'rgba(128, 128, 128, 0.25)';
+	const surfaceStyle = { backgroundColor: 'rgba(128, 128, 128, 0.08)' };
+	const monoStyle = { fontFamily: 'var(--sei-font-mono)' };
+	const codeStyle = { backgroundColor: 'rgba(128, 128, 128, 0.05)', fontFamily: 'var(--sei-font-mono)' };
+
+	const cardClass = 'not-prose w-full rounded-lg border overflow-hidden my-4';
+	const headerClass = 'flex items-center justify-between gap-3 px-4 py-2.5 border-b';
+	const labelClass = 'text-xs uppercase tracking-wide text-neutral-500 dark:text-neutral-500';
+	const preClass = 'm-0 px-4 py-3 text-sm overflow-x-auto text-neutral-700 dark:text-neutral-300';
+
+	const buttonStyle = {
+		backgroundColor: btnHover ? 'var(--sei-maroon-200)' : 'var(--sei-maroon-100)',
+		color: '#ffffff',
+		fontFamily: 'var(--sei-font-mono)',
+		textTransform: 'uppercase',
+		letterSpacing: '0.04em',
+		fontSize: '10px',
+		opacity: phase === 'loading' ? 0.7 : 1,
+		cursor: phase === 'loading' ? 'default' : 'pointer'
+	};
+
+	return (
+		<div className={cardClass} style={{ borderColor: HAIRLINE }}>
+			<div className={headerClass} style={{ ...surfaceStyle, borderBottomColor: HAIRLINE }}>
+				<div className='flex flex-col min-w-0'>
+					<span className='text-sm font-medium text-neutral-900 dark:text-white truncate' style={monoStyle}>
+						{title || method}
+					</span>
+					<span className='text-xs text-neutral-500 dark:text-neutral-500'>{networkLabel}</span>
+				</div>
+				<button
+					type='button'
+					onClick={run}
+					disabled={phase === 'loading'}
+					onMouseEnter={() => setBtnHover(true)}
+					onMouseLeave={() => setBtnHover(false)}
+					className='inline-flex items-center gap-1.5 px-3 py-1.5 shrink-0 transition-colors'
+					style={buttonStyle}>
+					{phase === 'loading' ? <SpinnerIcon /> : <PlayIcon />}
+					{phase === 'loading' ? 'Running…' : label || 'Run'}
+				</button>
+			</div>
+
+			{description ? (
+				<div className='px-4 pt-3 text-sm text-neutral-600 dark:text-neutral-400'>{description}</div>
+			) : null}
+
+			<div className='px-4 pt-3 pb-1'>
+				<span className={labelClass}>Request</span>
+			</div>
+			<pre className={preClass} style={codeStyle}>
+				{requestJson}
+			</pre>
+
+			{phase === 'success' ? (
+				<div className='border-t' style={{ borderTopColor: HAIRLINE }}>
+					<div className='flex items-center justify-between px-4 pt-3 pb-1'>
+						<span className={labelClass}>Response{elapsed != null ? ` · ${elapsed} ms` : ''}</span>
+						<button
+							type='button'
+							onClick={copyResult}
+							className='text-xs text-neutral-500 hover:text-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-200 transition-colors'>
+							{copied ? 'Copied' : 'Copy'}
+						</button>
+					</div>
+					<pre className={preClass} style={codeStyle}>
+						{resultString}
+					</pre>
+					{decoded ? (
+						<div className='px-4 pb-3 text-xs text-neutral-500 dark:text-neutral-500' style={monoStyle}>
+							= {decoded} (decimal)
+						</div>
+					) : null}
+				</div>
+			) : null}
+
+			{phase === 'error' ? (
+				<div className='border-t' style={{ borderTopColor: HAIRLINE }}>
+					<div className='px-4 pt-3 pb-1'>
+						<span className={labelClass}>Error</span>
+					</div>
+					<pre className={`${preClass} text-red-600 dark:text-red-400`} style={codeStyle}>
+						{errorMsg}
+					</pre>
+				</div>
+			) : null}
+		</div>
+	);
+};