Dashboard for Obol — the onchain pay-per-use AI router. Connect a wallet, fund Arc USDC, issue API keys, enable models, and route many models through one API.

This is a standalone frontend. It talks to the Obol API (a separate repo / service) purely over HTTP. It does not embed the backend.

Browser ──▶ Next.js (this app)
              ├─ /app           dashboard UI (client components)
              └─ /app/api       BFF — server-only, holds the admin token
                                    ├─ POST   /api/keys           issue key  (admin)
                                    ├─ DELETE /api/keys/:key       revoke key (admin)
                                    └─ *      /api/obol/*          per-user proxy (x-api-key)
                     │
                     ▼ HTTP
              Obol API service  (separate repo: the node:http proxy on :8402)

• Privy handles wallet connect / embedded wallets. Set NEXT_PUBLIC_PRIVY_APP_ID. Without it, the app still runs and shows a "Privy not configured" notice.
• Admin token (OBOL_ADMIN_TOKEN) is used only by the BFF to mint/revoke keys. It is never exposed to the browser.
• API keys are bearer secrets shown once at creation, then tracked client-side in localStorage (the backend has no "list my keys" endpoint by design).

cp .env.example .env.local   # fill in Privy app id, NEXT_PUBLIC_OBOL_API_URL, OBOL_ADMIN_TOKEN
npm install
npm run dev                  # http://localhost:3000

Run the Obol API service (the other repo) on NEXT_PUBLIC_OBOL_API_URL (default http://localhost:8402) with a matching OBOL_ADMIN_TOKEN.

• Dashboard — balance, spend, owed, active models, next steps.
• Models — browse/compare, enable/disable per key, affordability states.
• API Keys — create (reveal-once), set active, revoke.
• Playground — auto or explicit model, max tokens, selected model + exact cost, and structured 402/context guardrail errors.
• Usage — live account ledger (per-request history pending a backend /v1/usage).
• Funding — Arc USDC deposit address + ledger-mode balance credit.

Onboarding is an in-app Shepherd.js tour (auto-starts once), not a marketing page.

• GET /v1/usage — paginated per-request receipts (model, tokens, cost, route, status).
• /v1/models describe payload could include contextWindow, latencyClass, qualityClass, and defaultMaxTokens so Models/Playground show richer metadata.