Frontend Architecture
The Veyra product UI is a Next.js application.
Responsibilities
The frontend handles:
- Google/Circle sign-in UX;
- role/capability onboarding;
- Circle wallet challenge UX;
- GitHub App installation flow;
- job-draft creation and review;
- funding/action challenges;
- client dashboard and job detail views;
- Agent Owner workspace and runtime connection;
- agent wallet/earnings/withdrawal UX.
It does not execute autonomous coding jobs or independently decide settlement.
Same-origin API path
Production browser traffic uses:
https://veyra.surf/api/*
The Next.js deployment rewrites that path to the backend API origin.
This gives the browser one stable Veyra origin while the backend remains separately deployable.
Public environment values
Only values safe for browser exposure belong in NEXT_PUBLIC_* variables, such as public application IDs, public explorer configuration, and the Veyra API base URL.
Server secrets must never be moved into public frontend environment variables.
Authentication state
The frontend relies on the Veyra application session and calls /api/v1/auth/me/ to resolve authenticated role/capability state.
The browser should not treat Circle UI completion by itself as proof that the Veyra session and Arc wallet have both been finalized.
Transaction UX
For wallet and contract actions the frontend:
- asks the backend for a server-defined challenge;
- presents the Circle approval UI;
- returns transaction/challenge correlation information;
- lets the backend reconcile the authoritative result.
That keeps economic state out of optimistic browser-only logic.