@beevibe/web
The Next.js dashboard. Humans use this to chat with agents, watch tasks, read sessions, browse memory, manage rooms, and monitor runtimes.
The web app is read-mostly. Every mutation goes through the API. The dashboard subscribes to live updates and re-renders as the state behind the API changes. There are no API routes in this package — all data goes through @beevibe/api.
Run it
pnpm --filter @beevibe/web dev
# Next defaults to port 3000, which collides with the api.
# Override:
pnpm --filter @beevibe/web dev -- -p 3030Env vars
NEXT_PUBLIC_BV_API_URLe.g. http://localhost:3000NEXT_PUBLIC_BV_USER_KEYyour bv_u_ tokenBoth unset → the dashboard renders an empty / not-configured state instead of trying to call a missing API.
Auth
Every page under the (authed)/ route group is gated by <AuthGate>, which calls GET /me on the API. Public routes: /sign-in, /sign-up, /welcome. The bearer token comes from NEXT_PUBLIC_BV_USER_KEY for now — single-tenant local dev. Production auth is a TODO.
Pages
- Dashboard — landing on sign-in. Active sessions, recent tasks, runtime status.
- Chat — talk to an agent. Tokens stream in via a separate SSE channel.
- Sessions — list and detail. Every CLI step is visible.
- Agents — manage agent identity, hierarchy, brief, capabilities.
- Tasks — approve / revise / cancel. Parent-child tree.
- Work products — PR drafts, comments, documents tied to tasks.
- Memory — browse and edit core blocks; search archival facts.
- Promotions — proposed fact promotions awaiting review.
- Mesh — open asks and negotiations.
- Rooms — shared threads where humans and agents work.
- Runtimes — registered daemons and their CLIs.
Data flow
Three channels carry data into the browser:
HTTP — reads and mutations
TanStack Query against the API. A key factory in lib/hooks/keys.ts keeps cache keys consistent.
SSE — live invalidations
Listens to /api/stream via EventSource. Event names map to React Query keys that get invalidated, causing the UI to refetch.
SSE — chat token stream
A separate channel carries inline tool steps and partial agent messages. Kept distinct so chat scrolling doesn't compete with invalidation traffic.
Styling
Tailwind + CSS variables. Light and dark modes from one variable set. The marketing site you're reading right now uses the same token scale.
Source
The package imports only @beevibe/core/domain for browser-safe types — it never touches the database directly. For component-level conventions, key patterns, and the page tree in detail, see packages/web/README.md on GitHub.