WebUI

The operator + user dashboard for a GridWeave cluster — a Next.js app that's a thin client over the backend services: no database, no business logic, every action is an HTTP call. What you see is role-scoped — admins get the whole cluster, providers their hardware + earnings, users their own jobs/endpoints/credits — but that scoping is UX; the backends do the real authorization.

How it works

Session. The root layout (app/layout.tsx) is the gate: on load it reads auth_token from localStorage and calls GET /v1/auth/me — no token, or a failed /me, redirects to /login. Only /login, /signup, and /docs render without auth. Every API call sends Authorization: Bearer <token>; a 401 clears the token and bounces to /login. No cookies, no server session.

Talking to the backends. The browser only calls same-origin /api/*; a Next.js rewrite (next.config.ts) proxies it to the platform (:8100), so there's no CORS. Call it with GET / POST / PUT / DEL from lib/api.ts. Gateway, credit and faucet data comes through authenticated platform proxies (e.g. /v1/admin/health, /v1/credits/allocation/config, /v1/admin/faucet/*, /v1/provider/status, /version); those services are internal-only and the WebUI never reaches them directly (#248). Calls return typed JSON or throw ApiError(status, detail).

Roles. /v1/auth/me returns your role, which Sidebar uses to pick the nav (admin / provider / user). Hiding a link is convenience, not security — navigate straight to an admin route as a user and the backend still rejects the call.

Live data. Data pages fetch on mount and setInterval-poll every few seconds through those helpers; shared UI primitives (Card, Stat, Field, Spinner, ErrorBox) live in components/.

Pages

Each is a src/app/<route>/page.tsx, gated by role in Sidebar; data pages poll live.

Public (no login): - /login — sign in by pasting your token. - /signup — self-service signup: enter a university email, the faucet emails back a token. - /docs — the SDK docs (/llms.txt), rendered for reading.

All roles: - /jobs — your jobs, with status and streamed logs. Admins and providers see the whole fleet, not just their own. - /endpoints — model endpoints: deploy, start/stop/delete, and live status. - /credits (Credits) — your credit balances and purchases. - /transactions — every credit movement on your account. - **/chain-activity (Chain Activity) — every credit, job, and endpoint event on the cluster, saved on chain.

Provider: - /provider (My Hardware) — your contributed nodes, their availability, and what you've earned.

Admin: - /health — live cluster status: nodes online, GPUs, and utilization. - /users — every user, their balances, and management actions. - /config — platform settings: GPU pricing and the revenue split. - /join-keys — create, list, and revoke the keys providers use to add nodes. - /onboard-user — manually create a user and grant them credits. - /diagnostics — the operator's console: streamed service/node logs and health timelines.

Stack & config

Next.js 15 (App Router) · React 19 · TypeScript · Tailwind 4 · Playwright (e2e). Runs on port 3000.

Variable	Default	Proxies
PLATFORM_API_URL	http://localhost:8100	/api/*

Run & test

# Needs the backends running (platform on :8100 at minimum — see docs/platform_service):
cd webui && npm install && npm run dev        # http://localhost:3000, log in with a token
docker compose -f docker/webui/docker-compose.test.yml up --build -d   # or containerized

# Playwright e2e (starts the dev server itself):
cd webui && npx playwright install chromium && npm run test:e2e
# Python Docker integration:
pytest tests/webui/test_docker.py -v