/* global React */ // NOTE: fmtAda, shortenAddr, timeAgo, CHAT_API, BLOCKFROST_API are all // exported to window by components.jsx (loaded first). const { useState: useStateD, useEffect: useEffectD, useRef: useRefD } = React; // ── On-chain agent state hook ──────────────────────────────────────────────── const AGENT_STATE_API = (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") ? "http://localhost:3001/api/agent-state" : "/api/agent-state"; // Pass myDeployment to look up the visitor's own deployed contract instead // of the flagship demo. Without it (no personal deployment yet), there's // nothing of the visitor's to show — skip the network call entirely rather // than falling back to the flagship's data, which would misrepresent it as // the visitor's own. function useAgentState(myDeployment) { const [state, setStateD] = useStateD({ loading: true, deployed: false, data: null, error: null }); const scriptAddress = myDeployment?.scriptAddress; const threadTokenPolicy = myDeployment?.threadTokenPolicyId; async function refresh() { if (!scriptAddress) { setStateD({ loading: false, deployed: false, data: { deployed: false }, error: null }); return; } try { const url = `${AGENT_STATE_API}?scriptAddress=${encodeURIComponent(scriptAddress)}&threadTokenPolicy=${encodeURIComponent(threadTokenPolicy ?? "")}`; const res = await fetch(url); const data = await res.json(); setStateD({ loading: false, deployed: data.deployed ?? false, data, error: null }); } catch (err) { setStateD(s => ({ ...s, loading: false, error: err.message })); } } useEffectD(() => { refresh(); const id = setInterval(refresh, 30_000); return () => clearInterval(id); }, [scriptAddress, threadTokenPolicy]); return { ...state, refresh }; } // ── Local policy store ─────────────────────────────────────────────────────── // The dashboard lets owners configure guardrails from the front end. The desired // policy is held here and persisted in the browser. When a contract is deployed // and funded, the live on-chain values (from /api/agent-state) are the source of // truth; until then this is your working draft, applied at deploy time. const POLICY_KEY = "beni.policy.v1"; const WORKSPACE_KEY = "beni.workspace.v1"; function loadJSON(key, fallback) { try { const v = localStorage.getItem(key); return v ? JSON.parse(v) : fallback; } catch { return fallback; } } function usePolicy() { const [policy, setPolicy] = useStateD(() => loadJSON(POLICY_KEY, { perTxCapAda: 2, dailyCapAda: 10, whitelist: [], })); useEffectD(() => { try { localStorage.setItem(POLICY_KEY, JSON.stringify(policy)); } catch { /* ignore */ } }, [policy]); return [policy, setPolicy]; } function useWorkspaceName() { const [name, setName] = useStateD(() => { try { return localStorage.getItem(WORKSPACE_KEY) || "My workspace"; } catch { return "My workspace"; } }); useEffectD(() => { try { localStorage.setItem(WORKSPACE_KEY, name); } catch { /* ignore */ } }, [name]); return [name, setName]; } // /api/agent-state always reports the flagship demo wallet's on-chain status // (it reads fixed BENI_SCRIPT_ADDRESS/BENI_THREAD_TOKEN_POLICY env vars) — it // has no way to look up an arbitrary connected wallet's own deployed contract. // Onboarding UI (the getting-started checklist, the simplified first-run // overview) needs to know whether THIS visitor has deployed their own // guarded wallet, which is a different question. Tracked locally until the // backend supports a real per-address lookup. const MY_DEPLOYMENT_KEY = "beni.myDeployment.v1"; function useMyDeployment() { const [deployment, setDeployment] = useStateD(() => loadJSON(MY_DEPLOYMENT_KEY, null)); function recordDeployment(result) { const record = { scriptAddress: result.scriptAddress, threadTokenPolicyId: result.threadTokenPolicyId, deployTxHash: result.deployTxHash, deployedAt: new Date().toISOString(), }; try { localStorage.setItem(MY_DEPLOYMENT_KEY, JSON.stringify(record)); } catch { /* ignore */ } setDeployment(record); } return [deployment, recordDeployment]; } const GITHUB_URL = "https://github.com/IamHarrie-Labs/beni"; // ── Toast ───────────────────────────────────────────────────────────────────── function Toast({ msg }) { if (!msg) return null; return (
{msg}
); } // ── First-visit guided tour ─────────────────────────────────────────────────── // A dismissible spotlight walkthrough, shown once per browser the first time // the dashboard loads. Targets are marked with data-tour="..." on the actual // elements elsewhere in this file — this component just finds them, measures // their position, and draws a highlight + callout around whichever one is // current. Skips a step silently if its target isn't on screen (e.g. the // getting-started checklist disappears once you've deployed). const TOUR_SEEN_KEY = "beni.tourSeen.v1"; const TOUR_STEPS = [ { target: "workspace", title: "Your workspace", body: "This is your connected wallet. Everything in this dashboard is scoped to it — nobody else sees your setup." }, { target: "getting-started", title: "Set your limits", body: "Configure a per-transaction cap and a daily budget, then deploy — that's what actually creates your guarded wallet on-chain." }, { target: "balance-hero", title: "Live balance & status", body: "Your wallet's balance, today's spend, and whether it's frozen — all read straight from the chain, updated automatically." }, { target: "freeze-btn", title: "Emergency freeze", body: "One click halts every agent spend instantly. This isn't a setting Beni enforces — it's enforced by the validator itself." }, { target: "ask-beni-btn", title: "Ask Beni anything", body: "Chat with the built-in assistant about your wallet, your limits, or what a transaction did — in plain English." }, ]; function DashboardTour() { const [dismissed, setDismissed] = useStateD(() => { try { return localStorage.getItem(TOUR_SEEN_KEY) === "1"; } catch { return true; } }); const [step, setStep] = useStateD(0); const [rect, setRect] = useStateD(null); function finish() { try { localStorage.setItem(TOUR_SEEN_KEY, "1"); } catch { /* ignore */ } setDismissed(true); } useEffectD(() => { if (dismissed) return; function measure() { // Walk forward from the current step to the first target actually on screen. let i = step; while (i < TOUR_STEPS.length) { const el = document.querySelector(`[data-tour="${TOUR_STEPS[i].target}"]`); if (el) { const r = el.getBoundingClientRect(); if (r.width > 0 && r.height > 0) { if (i !== step) setStep(i); setRect(r); return; } } i += 1; } // No remaining step has a visible target — nothing left to show. finish(); } measure(); window.addEventListener("resize", measure); return () => window.removeEventListener("resize", measure); }, [step, dismissed]); if (dismissed || !rect) return null; const info = TOUR_STEPS[step]; const isLast = step >= TOUR_STEPS.length - 1; const pad = 8; // Position the callout below the target, flipping above if there's no room. const spaceBelow = window.innerHeight - rect.bottom; const calloutW = 320; const showAbove = spaceBelow < 180 && rect.top > 180; const top = showAbove ? rect.top - pad : rect.bottom + pad + 10; let left = Math.min(Math.max(rect.left, 16), window.innerWidth - calloutW - 16); return ( <> {/* Spotlight ring — a transparent box whose giant box-shadow dims everything else */}
{/* Callout */}
{step + 1} / {TOUR_STEPS.length}
{info.title}
{info.body}
{!isLast && ( )}
); } // ── Modal shell ─────────────────────────────────────────────────────────────── function Modal({ title, onClose, children, wide }) { return (
e.stopPropagation()}>
{title}
{children}
); } // ── Deploy modal ────────────────────────────────────────────────────────────── const IS_LOCAL_D = window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"; const DEPLOY_API = IS_LOCAL_D ? "http://localhost:3001/api/deploy" : "/api/deploy"; const FEE_API = IS_LOCAL_D ? "http://localhost:3001/api/fee" : "/api/fee"; function DeployModal({ policy, wallet, onClose, onDeployed }) { const [perTxCap, setPerTxCap] = useStateD(policy.perTxCapAda ?? 500); const [dailyCap, setDailyCap] = useStateD(policy.dailyCapAda ?? 2500); const [ownerPkh, setOwnerPkh] = useStateD(""); // configure -> review -> paying -> deploying -> done (error returns to review) const [status, setStatus] = useStateD("configure"); const [result, setResult] = useStateD(null); const [errMsg, setErrMsg] = useStateD(""); // Persists across retries within this modal — if the deploy step fails // after the fee already went through (e.g. "not indexed yet, try again"), // retrying must reuse this fee, not pay a second one. const [paidFeeTxHash, setPaidFeeTxHash] = useStateD(null); const capsInvalid = !(perTxCap > 0) || !(dailyCap > 0) || dailyCap < perTxCap; async function postJson(url, body) { const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body), }); const data = await res.json(); if (!res.ok || data.error) throw new Error(data.error ?? "Request failed"); return data; } async function deploy() { setErrMsg(""); try { const cip30 = window.__beniCip30; if (!cip30 || !wallet?.address) { throw new Error("Wallet session expired — reconnect your wallet and try again."); } // 1 — pay the 2 ADA deploy fee from the user's connected wallet. // Skipped entirely if a previous attempt already paid it — retrying // after a deploy-step failure must never charge this twice. let feeTxHash = paidFeeTxHash; if (!feeTxHash) { setStatus("paying"); const { txCbor } = await postJson(FEE_API, { action: "build", payerAddress: wallet.address }); const witness = await cip30.signTx(txCbor, true); ({ feeTxHash } = await postJson(FEE_API, { action: "submit", txCbor, witness, payerAddress: wallet.address })); setPaidFeeTxHash(feeTxHash); } // 2 — deploy the agent wallet. Your own connected wallet signs this // transaction directly — it becomes the agent, no custodial key involved. setStatus("deploying"); const built = await postJson(DEPLOY_API, { action: "build", payerAddress: wallet.address, perTxCapLovelace: Math.round(perTxCap * 1_000_000), dailyCapLovelace: Math.round(dailyCap * 1_000_000), ownerPkh: ownerPkh.trim() || undefined, feeTxHash, }); const deployWitness = await cip30.signTx(built.txCbor, true); const submitted = await postJson(DEPLOY_API, { action: "submit", txCbor: built.txCbor, witness: deployWitness, feeTxHash, payerAddress: wallet.address, }); const data = { ...built, ...submitted }; setResult(data); setStatus("done"); onDeployed(data); } catch (err) { setErrMsg(err.message); setStatus("review"); } } const row = (label, value) => (
{label} {value}
); const stepOf = status === "configure" ? 1 : status === "review" ? 2 : null; const StepHeader = ({ n, label }) => (
STEP {n} OF 2 — {label}
); return (
{status === "configure" ? (<>
Your connected wallet signs the deployment directly — it becomes the agent wallet's signing key. Beni never holds a copy of it.
{capsInvalid && (perTxCap > 0 || dailyCap > 0) && (
Daily cap should be at least as large as the per-transaction cap.
)}
) : status === "review" ? (<>
Here's exactly what happens if you continue: your wallet will be asked to sign two transactions — the fee, then the deployment itself.
{row("Per-tx cap", `₳ ${perTxCap}`)} {row("Daily cap", `₳ ${dailyCap}`)} {row("Owner", ownerPkh.trim() ? ownerPkh.trim().slice(0, 16) + "…" : "your connected wallet")}
One-time deployment fee, paid from your connected wallet 2 ₳
{errMsg && (
{errMsg}
)}
) : status === "paying" ? (
Paying the 2 ₳ deployment fee…
Approve the transaction in your wallet extension when it pops up.
) : status === "deploying" ? (
Fee paid — minting thread token and locking datum…
Approve the second transaction in your wallet — this one deploys the wallet itself. Do not close this window.
) : result ? (
Wallet deployed. The dashboard will update automatically.
{row("Script address", result.scriptAddress?.slice(0, 24) + "…")} {row("Thread token", result.threadTokenPolicyId?.slice(0, 24) + "…")} {row("Deploy TX", result.deployTxHash?.slice(0, 16) + "…")} {row("Per-tx cap", (Number(result.perTxCapLovelace) / 1_000_000) + " ADA")} {row("Daily cap", (Number(result.dailyCapLovelace) / 1_000_000) + " ADA")}
View on Cardanoscan
) : null}
); } /* ═══════════════════════════════ ROOT ═══════════════════════════════════════ */ function Dashboard({ wallet }) { const [activePage, setActivePage] = useStateD("overview"); const [frozen, setFrozen] = useStateD(false); const [showChat, setShowChat] = useStateD(true); const [modal, setModal] = useStateD(null); const [toast, setToast] = useStateD(null); const [myDeployment, recordDeployment] = useMyDeployment(); const agentState = useAgentState(myDeployment); const [policy, setPolicy] = usePolicy(); const [workspaceName, setWorkspaceName] = useWorkspaceName(); function showToast(msg) { setToast(msg); setTimeout(() => setToast(null), 3200); } return (
{/* ── Modals ── */} {modal === "add-agent" && ( setModal(null)} onDeployed={(result) => { setModal(null); recordDeployment(result); agentState.refresh(); showToast(`Wallet deployed — TX: ${result.deployTxHash.slice(0, 12)}…`); }} /> )} {modal === "api" && ( setModal(null)}>
Point the SDK at a deployed wallet and your agent can spend on-chain, fully guarded by the Aiken validator. The full integration guide, with copy-paste examples for every call, lives in the GitHub repo.
{[ ["agentSpend()", "Guarded spend. Reverts on-chain if it breaks a rule."], ["queueSpend() / approveSpend()", "Above-cap spends pause for owner co-signature."], ["freezeWallet()", "Halt every agent spend within one block."], ["ownerAction()", "Owner-signed update to caps, whitelist, or freeze state."], ].map(([fn, desc]) => (
{fn} {desc}
))}
Example script address format:
addr1w… — the real address for your deployed wallet appears here once created
Example thread token policy format:
28-byte policy ID — generated per wallet at deploy time
)} {modal === "freeze" && ( setModal(null)}>
{frozen ? ( <>
The wallet is frozen and every agent spend is halted. Resuming re-enables spending under your existing caps. On a live wallet this is an owner-signed action, so only you can lift a freeze.
) : ( <>
Freezing halts every agent spend within one block. Use it the moment something looks wrong. On a live wallet the freeze is enforced on-chain by the Aiken validator, and only you, the owner, can resume.
)}
)}
); } /* ═══════════════════════════════ SIDEBAR ════════════════════════════════════ */ function Sidebar({ activePage, navigateTo, wallet, agentState, myDeployment, setModal, showToast, workspaceName, setWorkspaceName }) { const deployed = Boolean(myDeployment); const [editingName, setEditingName] = useStateD(false); const [draftName, setDraftName] = useStateD(workspaceName); function saveName() { const next = draftName.trim(); if (next) setWorkspaceName(next); else setDraftName(workspaceName); setEditingName(false); } const navConfig = [ { group: "Overview", items: [ { icon: , label: "Command center", page: "overview" }, { icon: , label: "Live monitor", page: "monitor" }, { icon: , label: "Transactions", page: "txs" }, { icon: , label: "Approvals", page: "approvals" }, ], }, { group: "Configure", items: [ { icon: , label: "Rules & policies", page: "rules" }, { icon: , label: "Whitelist", page: "whitelist" }, ], }, ]; return ( ); } /* ─── Getting-started checklist — shown until a guarded wallet is live ────────── */ function GettingStarted({ wallet, deployed, setModal }) { const steps = [ { done: wallet.connected, label: "Connect your wallet" }, { done: deployed, label: "Set your limits & deploy" }, ]; return (
Getting started
{steps.map(s => (
{s.done ? "✓" : ""} {s.label}
))}
{wallet.connected && ( )}
); } /* ═══════════════════════════════ MAIN PANEL ═════════════════════════════════ */ function Main({ activePage, navigateTo, frozen, setFrozen, wallet, showChat, setShowChat, agentState, myDeployment, setModal, showToast, policy, setPolicy }) { return (
{/* Persistent header */}
{activePage === "overview" ? "The dashboard" : activePage === "approvals" ? "Approvals" : activePage === "rules" ? "Guardrails" : activePage === "whitelist" ? "Whitelist" : activePage === "txs" ? "Transactions" : activePage === "monitor" ? "Live monitor" : "Beni"}

{activePage === "overview" ? "Command Center." : activePage === "approvals" ? "Approvals Queue." : activePage === "rules" ? "Rules & Policies." : activePage === "whitelist" ? "Trusted Addresses." : activePage === "txs" ? "Transaction History." : activePage === "monitor" ? "Live Activity." : "Dashboard."}

{/* Page content */} {activePage === "overview" && } {activePage === "approvals" && } {activePage === "rules" && } {activePage === "whitelist" && } {activePage === "txs" && } {activePage === "monitor" && }
); } /* ═══════════════════════════ PAGE: OVERVIEW ════════════════════════════════ */ function OverviewPage({ frozen, wallet, agentState, myDeployment, navigateTo, setModal }) { const ad = agentState?.data; const rules = ad?.rules; // agentState is scoped to THIS visitor's own deployment (see useAgentState // in the Dashboard root) — ad?.funded etc. are real, not the flagship's. const contractBalanceAda = ad?.funded && ad?.balanceAda != null ? ad.balanceAda : null; const operatorBalanceAda = wallet.connected ? wallet.balanceAda : null; const effectiveFrozen = frozen || rules?.isFrozen; const primaryAda = contractBalanceAda ?? operatorBalanceAda; const primaryLabel = contractBalanceAda != null ? "Contract wallet" : "Operator wallet"; const statusLabel = effectiveFrozen ? "FROZEN" : ad?.funded ? "ON-CHAIN · LIVE" : wallet.connected ? "CONNECTED" : "NO WALLET"; const statusColor = effectiveFrozen ? "var(--danger)" : ad?.funded ? "var(--ok)" : wallet.connected ? "var(--accent-2)" : "var(--ink-4)"; const subText = effectiveFrozen ? "all agent spends halted, emergency freeze active" : ad?.funded ? `${ad.scriptAddress?.slice(0, 20)}… · ${CARDANO_NETWORK}` : wallet.connected ? `${wallet.addrShort} · operator wallet` : "connect wallet or deploy a contract to begin"; const spentAda = rules?.windowSpentAda ?? null; const dailyCapAda = rules?.dailyCapAda ?? null; const pctUsed = rules?.pctUsed ?? 0; const txCount = ad?.funded ? (ad.txCount ?? 0) : wallet.txCount; let resetLabel = "rolling window"; if (rules?.windowResetMs) { const msLeft = rules.windowResetMs - Date.now(); const h = Math.floor(Math.max(0, msLeft) / 3_600_000); const m = Math.floor((Math.max(0, msLeft) % 3_600_000) / 60_000); resetLabel = msLeft <= 0 ? "resets now" : h > 0 ? `${h}h ${m}m left` : `${m}m left`; } return (
{/* Balance hero */}
{primaryLabel} balance
{primaryAda != null ? `₳ ${fmtAda(primaryAda)}` : "₳ ·"}
{subText}
{(contractBalanceAda != null || operatorBalanceAda != null) && (
{contractBalanceAda != null && (
CONTRACT
₳ {fmtAda(contractBalanceAda)}
agent's budget
)} {operatorBalanceAda != null && (
OPERATOR
₳ {fmtAda(operatorBalanceAda)}
your reserve
)} {contractBalanceAda != null && operatorBalanceAda != null && (
TOTAL
₳ {fmtAda(contractBalanceAda + operatorBalanceAda)}
combined
)}
)}
Today's spend
{statusLabel} {ad?.funded &&
{ad.txCount ?? 0} VALIDATOR TXS
}
{ad?.funded ? `₳ ${fmtAda(rules?.windowSpentAda ?? 0)} today` : wallet.connected ? `${wallet.txCount ?? 0} tx total` : "nothing yet"}
{myDeployment ? (<> {/* KPI row */}
Spend today
{spentAda != null ? `₳ ${fmtAda(spentAda)}` : "·"}
{dailyCapAda != null ? `of ₳ ${fmtAda(dailyCapAda)} cap · ${resetLabel}` : "no contract deployed yet"}
Transactions
{txCount != null ? txCount.toLocaleString() : "·"}
through the validator
Per-tx cap
{rules?.perTxCapAda != null ? `₳ ${fmtAda(rules.perTxCapAda)}` : "·"}
max per single spend
{/* Activity + Approvals summary */}
{/* Rules + Whitelist summary */}
) : (
{wallet.connected ? "Set up your guarded wallet" : "Connect your wallet to begin"}
{wallet.connected ? "Set a per-transaction cap and a daily budget, pay a one-time 2 ADA fee, and your guarded wallet deploys on-chain — enforced by the Cardano ledger from that point on." : "Everything else on this page lights up once your wallet is connected and your first guarded wallet is deployed."}
{wallet.connected && ( )}
)}
); } /* ─── Shared "view all" button ──────────────────────────────────────────────── */ function ViewAllBtn({ label, onClick }) { return ( ); } /* ─── Overview widgets ────────────────────────────────────────────────────── */ function ActivityFeed({ wallet, agentState, navigateTo }) { const ad = agentState?.data; const contractTxs = ad?.funded && Array.isArray(ad.recentTxs) ? ad.recentTxs : null; const displayTxs = contractTxs ?? (wallet.connected ? wallet.txs : []); const isLive = displayTxs.length > 0; return (
Live activity
Every decision, in order.
navigateTo("monitor")}/>
{displayTxs.length > 0 ? (
{displayTxs.slice(0, 5).map((tx, i) => (
{tx.tx_hash}
{timeAgo(tx.block_time ?? tx.block_time_unix)} · #{tx.block_height?.toLocaleString()}
↗
))}
) : (
no transactions yet
Run an agent spend via the SDK to see activity here.
)}
); } function ApprovalsSummary({ navigateTo }) { const approvals = useApprovals(); const count = approvals.pending.length; const hasItems = count > 0; const next = approvals.pending[0]; return (
Approvals queue
{hasItems ? `${count} pending` : "0 pending"}
navigateTo("approvals")}/>
{hasItems ? (
₳ {fmtAda(next.ada)}
→ {shortenAddr(next.toAddress)}
{next.reason || "·"}
) : (
queue clear ✓
Above-cap spends pause here for your co-signature before hitting the chain.
)}
); } function RulesSummary({ agentState, navigateTo }) { const ad = agentState?.data; const live = ad?.funded && ad?.rules; const r = ad?.rules; return (
Guardrails
{live ? "Enforced on chain" : "Not deployed"}
navigateTo("rules")}/>
{[ { name: "per_tx_cap", val: live ? `₳ ${fmtAda(r.perTxCapAda)}` : "·", on: live }, { name: "daily_cap", val: live ? `₳ ${fmtAda(r.dailyCapAda)}` : "·", on: live }, { name: "freeze", val: live ? (r.isFrozen ? "FROZEN" : "active") : "·", on: live && !r.isFrozen }, ].map((row, i) => (
{row.name} {row.val}
))}
); } function WhitelistSummary({ agentState, navigateTo }) { const ad = agentState?.data; const live = ad?.funded && ad?.rules; const count = live ? (ad.rules.allowedAddressCount ?? 0) : 0; return (
Whitelist
{count} address{count !== 1 ? "es" : ""}
navigateTo("whitelist")}/>
{live ? "no restrictions ✓" : "not deployed"}
Whitelisted addresses bypass the per-tx cap entirely.
); } // Real 24h spend gauge: shows window spend against the daily cap, straight from // the on-chain datum. Only a deployed, funded wallet has real spend data. function SpendCurve({ agentState }) { const w = 300, h = 52; const r = agentState?.data?.funded ? agentState.data.rules : null; if (!r || r.dailyCapAda == null) { return ( NO SPEND DATA YET ); } const pct = Math.min(100, Math.max(0, r.pctUsed ?? 0)); const over = pct > 80; const barY = h * 0.5 - 7; return ( ₳{fmtAda(r.windowSpentAda)} / ₳{fmtAda(r.dailyCapAda)} {pct}% OF DAILY CAP ); } /* ═══════════════════════════ PAGE: APPROVALS ════════════════════════════════ */ const APPROVALS_API = (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1") ? "http://localhost:3001/api/approvals" : "/api/approvals"; function useApprovals() { const [state, setStateD] = useStateD({ loading: true, pending: [], all: [], persistent: false, error: null }); async function refresh() { try { const res = await fetch(APPROVALS_API); const data = await res.json(); setStateD({ loading: false, pending: Array.isArray(data.pending) ? data.pending : [], all: Array.isArray(data.all) ? data.all : [], persistent: Boolean(data.persistent), error: null, }); } catch (err) { setStateD(s => ({ ...s, loading: false, error: err.message })); } } async function create({ toAddress, ada, reason }) { const res = await fetch(APPROVALS_API, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ toAddress, ada, reason }), }); if (!res.ok) throw new Error((await res.json()).error ?? `HTTP ${res.status}`); await refresh(); return res.json(); } async function decide(id, status, txHash) { const res = await fetch(`${APPROVALS_API}?id=${encodeURIComponent(id)}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ status, txHash }), }); if (!res.ok) throw new Error((await res.json()).error ?? `HTTP ${res.status}`); await refresh(); return res.json(); } async function remove(id) { const res = await fetch(`${APPROVALS_API}?id=${encodeURIComponent(id)}`, { method: "DELETE" }); if (!res.ok) throw new Error((await res.json()).error ?? `HTTP ${res.status}`); await refresh(); } useEffectD(() => { refresh(); const id = setInterval(refresh, 15_000); // re-poll twice a minute return () => clearInterval(id); }, []); return { ...state, refresh, create, decide, remove }; } function ApprovalsPage({ agentState, showToast }) { const ad = agentState?.data; const live = ad?.funded; const approvals = useApprovals(); const pending = approvals.pending; const history = approvals.all.filter(a => a.status !== "pending").slice(0, 8); const [showQueueForm, setShowQueueForm] = useStateD(false); async function onApprove(entry) { try { await approvals.decide(entry.id, "approved"); showToast(`Marked approved. Run approveSpend(lucid, wallet, "${entry.id.slice(0, 8)}…") to co-sign on-chain.`); } catch (err) { showToast(`Error: ${err.message}`); } } async function onReject(entry) { try { await approvals.decide(entry.id, "rejected"); showToast("Marked rejected. No on-chain effect."); } catch (err) { showToast(`Error: ${err.message}`); } } async function onClear(entry) { try { await approvals.remove(entry.id); } catch (err) { showToast(`Error: ${err.message}`); } } return (
{/* Info banner */}
How approvals work
When your AI agent requests a spend above the per-tx cap, the transaction is paused and queued here. The owner co-signs to release it on-chain, satisfying the Aiken validator's owner-signature check. Rejected items are discarded with no on-chain effect.
{approvals.persistent ? "Persisted · KV" : "In-memory only"}
{/* Queue */}
Pending approvals
{pending.length === 0 ? "0 awaiting your decision" : `${pending.length} awaiting your decision`}
{pending.length === 0 ? "CLEAR" : `${pending.length} PENDING`}
{approvals.loading ? (
Loading queue…
) : pending.length === 0 ? (
All clear ✓
No pending approvals right now. When your agent tries to spend above the {live ? ` ₳${fmtAda(ad.rules.perTxCapAda)} ` : " "}per-tx cap, the request will appear here.
) : (
{pending.map((entry, i) => ( onApprove(entry)} onReject={() => onReject(entry)} /> ))}
)}
{/* History */} {history.length > 0 && (
Recent decisions
{history.length} item{history.length === 1 ? "" : "s"}
{history.map((entry, i) => (
{entry.status.toUpperCase()}
{shortenAddr(entry.toAddress)}
{entry.reason || "·"}
₳ {fmtAda(entry.ada)}
))}
)} {/* Simulate-request modal */} {showQueueForm && ( setShowQueueForm(false)} onSubmit={async (payload) => { try { await approvals.create(payload); showToast(`Spend of ₳${fmtAda(payload.ada)} queued for owner approval.`); setShowQueueForm(false); } catch (err) { showToast(`Error: ${err.message}`); } }} /> )} {/* Where this connects to the agent */}
Your agent queues above-cap spends automatically; approving here releases them with an owner co-signature. The exact SDK calls your agent uses are documented in the repo.
); } function ApprovalRow({ entry, last, onApprove, onReject }) { const ageMin = Math.max(1, Math.floor((Date.now() - entry.requestedAt) / 60_000)); return (
₳ {fmtAda(entry.ada)} → {shortenAddr(entry.toAddress)}
{entry.reason || no reason provided}
REQUESTED {ageMin}M AGO · ID {entry.id.slice(0, 8)}
); } function QueueRequestModal({ defaultPerTxCap, onClose, onSubmit }) { const suggestedAda = Math.max(50, Math.round((defaultPerTxCap || 500) * 1.4)); const [toAddress, setToAddress] = useStateD("addr_test1qz0rxk3kxhg9p6jufv5w8ucz3kc9w8aqxhag7rmllz2lqujkv57hl3rxk7w4qx6xrpzzdz4kqdwh7s3cunucy0rfmxq49v8w8"); const [ada, setAda] = useStateD(String(suggestedAda)); const [reason, setReason] = useStateD("Pay invoice #42, Acme Corp cloud bill"); function submit(e) { e.preventDefault(); const num = Number(ada); if (!toAddress.trim()) return; if (!Number.isFinite(num) || num <= 0) return; onSubmit({ toAddress: toAddress.trim(), ada: num, reason: reason.trim() }); } return (

This simulates what your agent's SDK would do when a spend exceeds the per-tx cap. The entry goes into the persistent queue and waits for owner co-signature.

); } /* ═══════════════════════════ PAGE: RULES ════════════════════════════════════ */ function RulesPage({ agentState, showToast, policy, setPolicy, frozen, setFrozen, setModal }) { const ad = agentState?.data; const live = ad?.funded && ad?.rules; const r = ad?.rules; // Draft values bound to the form inputs. const [perTx, setPerTx] = useStateD(String(policy.perTxCapAda)); const [daily, setDaily] = useStateD(String(policy.dailyCapAda)); const dirty = String(policy.perTxCapAda) !== perTx || String(policy.dailyCapAda) !== daily; const effectiveFrozen = frozen || (live && r.isFrozen); function save() { const p = Number(perTx), d = Number(daily); if (!Number.isFinite(p) || p <= 0) { showToast("Per-transaction cap must be greater than zero."); return; } if (!Number.isFinite(d) || d <= 0) { showToast("Daily cap must be greater than zero."); return; } setPolicy(prev => ({ ...prev, perTxCapAda: p, dailyCapAda: d })); showToast(live ? "Policy saved. Apply on-chain to enforce it." : "Guardrails saved. They apply when you deploy the wallet."); } return (
{/* Configure guardrails (front-end form) */}
Spending guardrails
{live ? "Enforced on chain" : "Set your limits"}
{live ? "ON-CHAIN" : "DRAFT"}
{live && (
Spent this window 80 ? "var(--danger)" : "var(--ink)" }}>₳ {fmtAda(r.windowSpentAda)} of ₳ {fmtAda(r.dailyCapAda)} ({r.pctUsed}%)
80 ? "var(--danger)" : "var(--ink-4)" }}/>
)}
{live ? "Saving updates your working policy. Applying on-chain requires your owner signature, so only you can change a live wallet's rules." : "Saved here as your working policy. It is written into the contract datum when you deploy the wallet."}
{live && ( )}
{/* Emergency freeze */}
Emergency freeze
{effectiveFrozen ? "The wallet is frozen. Every agent spend is halted until you resume it." : "Halt every agent spend in a single block. Use this the moment something looks wrong; you can resume at any time."}
); } function CapField({ label, hint, value, onChange, live, liveVal }) { return (
{label}
{hint}
₳ onChange(e.target.value)} className="display" style={{ flex: 1, border: 0, outline: 0, background: "transparent", fontSize: 24, color: "var(--ink)", width: "100%" }} />
{live && liveVal != null && (
LIVE ON-CHAIN: ₳ {fmtAda(liveVal)}
)}
); } /* ═══════════════════════════ PAGE: WHITELIST ════════════════════════════════ */ function WhitelistPage({ agentState, showToast, policy, setPolicy }) { const ad = agentState?.data; const live = ad?.funded && ad?.rules; const list = policy.whitelist ?? []; const [addInput, setAddInput] = useStateD(""); function handleAdd() { const addr = addInput.trim(); if (!addr) return; if (!addr.startsWith("addr1")) { showToast("Enter a valid Cardano mainnet address (addr1…)."); return; } if (list.includes(addr)) { showToast("That address is already on the list."); setAddInput(""); return; } setPolicy(prev => ({ ...prev, whitelist: [...(prev.whitelist ?? []), addr] })); setAddInput(""); showToast(live ? "Added. Apply on-chain to register it with the validator." : "Address added to your trusted list."); } function handleRemove(addr) { setPolicy(prev => ({ ...prev, whitelist: (prev.whitelist ?? []).filter(a => a !== addr) })); showToast("Address removed from your trusted list."); } return (
{/* Header */}
Trusted addresses
{list.length} address{list.length !== 1 ? "es" : ""} trusted
{live ? "ON-CHAIN" : "DRAFT"}
Addresses on this list bypass the per-transaction cap and settle straight away, with no approval queue. Use it for counterparties you already trust, like a DEX or your own treasury.
{/* Add row */}
setAddInput(e.target.value)} onKeyDown={e => { if (e.key === "Enter") handleAdd(); }} placeholder="addr_test1..." style={{ flex: 1, height: 40, padding: "0 12px", border: "1.5px solid var(--ink)", background: "var(--paper-2)", fontFamily: "var(--mono)", fontSize: 12, color: "var(--ink)", outline: 0 }} />
{/* List */} {list.length > 0 && (
{list.map((addr, i) => (
{addr}
))}
)}
{live ? "This is your working list. Registering it with the validator takes an owner-signed transaction, so a compromised agent can never widen its own whitelist." : "Saved as your working list. It is written into the contract when you deploy the wallet."}
); } /* ═══════════════════════════ PAGE: TRANSACTIONS ═════════════════════════════ */ function TransactionsPage({ wallet, agentState }) { const ad = agentState?.data; const contractTxs = ad?.funded && Array.isArray(ad.recentTxs) ? ad.recentTxs : null; const displayTxs = contractTxs ?? (wallet.connected ? wallet.txs : []); const sourceLabel = contractTxs ? "script address" : "operator wallet"; return (
Transaction history
Recent on-chain activity
{sourceLabel.toUpperCase()} {displayTxs.length} TXS
{displayTxs.length > 0 ? ( {["TX HASH", "TIME", "BLOCK", "EXPLORER"].map(h => ( ))} {displayTxs.map((tx, i) => ( ))}
{h}
{tx.tx_hash.slice(0, 14)}…{tx.tx_hash.slice(-8)} {timeAgo(tx.block_time ?? tx.block_time_unix)} #{tx.block_height?.toLocaleString()} cardanoscan ↗
) : (
{wallet.connected ? "no transactions found" : "no transactions yet"}
{wallet.connected ? "This address has no on-chain history yet. Send it some ADA to run a demo spend." : "Transactions will appear here once your agent begins making on-chain spends."}
)}
); } /* ═══════════════════════════ PAGE: MONITOR ══════════════════════════════════ */ function MonitorPage({ wallet, agentState }) { const ad = agentState?.data; const contractTxs = ad?.funded && Array.isArray(ad.recentTxs) ? ad.recentTxs : null; const displayTxs = contractTxs ?? (wallet.connected ? wallet.txs : []); const [pulse, setPulse] = useStateD(false); useEffectD(() => { const id = setInterval(() => setPulse(v => !v), 1800); return () => clearInterval(id); }, []); return (
{/* Live indicator */}
{ad?.funded ? "LIVE · POLLING EVERY 30s" : "WAITING FOR CONTRACT"}
{ad?.funded ? `Monitoring: ${ad.scriptAddress?.slice(0, 24)}…` : "Deploy an agent wallet to begin live monitoring"}
{ad?.txCount ?? 0} TOTAL TXS · {displayTxs.length} SHOWN
{/* Live feed */}
Activity stream
Every decision, in real time.
{displayTxs.length > 0 ? (
{displayTxs.map((tx, i) => (
{i === 0 && NEW}
{tx.tx_hash}
{timeAgo(tx.block_time ?? tx.block_time_unix)} · block #{tx.block_height?.toLocaleString()}
CONFIRMED ↗ view
))}
) : (
watching…
No activity yet. Once your agent makes its first spend, it appears here within the next poll.
)}
); } /* ═══════════════════════════════ ASSISTANT PANEL ════════════════════════════ */ function AssistantPanel({ wallet, agentState, setShowChat, showChat }) { const [messages, setMessages] = useStateD([ { who: "beni", text: "Hi! I'm Beni, your on-chain wallet guardian. Connect a wallet above to see your live balance, or ask me anything about how Beni's guardrails work." }, ]); const [input, setInput] = useStateD(""); const [loading, setLoading] = useStateD(false); const bottomRef = useRefD(null); useEffectD(() => { if (bottomRef.current) bottomRef.current.scrollIntoView({ behavior: "smooth" }); }, [messages, loading]); useEffectD(() => { if (wallet.connected && messages.length === 1) { setMessages([{ who: "beni", text: `Wallet connected: ${wallet.addrShort}. Balance: ₳ ${fmtAda(wallet.balanceAda)} · ${wallet.txCount} transactions. To activate guardrails, deploy an agent wallet with the SDK.`, }]); } }, [wallet.connected]); useEffectD(() => { const ad = agentState?.data; if (ad?.funded && ad?.rules && messages.length <= 1) { const r = ad.rules; setMessages([{ who: "beni", text: `Contract live on ${CARDANO_NETWORK}! Script balance: ₳ ${fmtAda(ad.balanceAda)}. Per-tx cap ₳ ${fmtAda(r.perTxCapAda)}, daily cap ₳ ${fmtAda(r.dailyCapAda)}. Spent today: ₳ ${fmtAda(r.windowSpentAda)} (${r.pctUsed}%). ${r.isFrozen ? "⚠ FROZEN." : "Guardrails active."}`, }]); } }, [agentState?.data?.funded]); async function send() { const text = input.trim(); if (!text || loading) return; setInput(""); const history = [...messages, { who: "user", text }]; setMessages(history); setLoading(true); try { const res = await fetch(CHAT_API, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: history.map(m => ({ role: m.who === "user" ? "user" : "assistant", content: m.text })), }), }); if (!res.ok) throw new Error(`${res.status}`); const data = await res.json(); setMessages(prev => [...prev, { who: "beni", text: data.text }]); } catch { setMessages(prev => [...prev, { who: "beni", text: "⚠ Chat server not reachable. Run: cd sdk && npm run chat" }]); } finally { setLoading(false); } } return ( ); } Object.assign(window, { Dashboard });