Skip to main content

​
Surfaces

Authenticated routes (behind the session gate):

​
What it owns

  • Live run rendering. SSE consumption of Mother AI’s per-job event stream (useJobStream replays the durable backlog before joining the live channel, so a reconnecting client never misses an event). The scenario canvas derives graph, step list, verifier rows, gate decisions, and the budget ticker from the event stream alone — no polling. Step nodes wear the serving model’s brand mark; model_fallback corrects a step’s model live; deterministic steps render as “composed in code”. The event contract is in HTTP API & event stream.
  • Model naming. modelDisplayName/modelBrand read the served catalog — a model added to the catalog names itself correctly with no frontend release.
  • Auth integration. Optimistic cookie gate in middleware, server-side guards per page/route, and a single-round-trip requireAccess() preflight against the Auth service for identity + ownership + budget. The frontend itself holds no auth secrets — see Auth for the boundary.
  • Project lifecycle UI — projects, consoles, rename/delete.
  • Approvals & human input — the universal feedback panel renders any question shape (single/multi-select, free text) with visual options; approvals are decidable inline or via the approvals page.
  • 3D knowledge atlas and knowledge search; QA answer panels cite retrieved sources.
  • Command-centre and telemetry views — cost panels and run history via the telemetry API.

​
Invariants

  • Stateless beyond local UI state. Every long-lived resource — jobs, projects, workflows, hub edits — lives in Postgres or Qdrant via Mother AI.
  • The BFF is the trust boundary. The browser never talks to Mother AI directly; every server route forwards the session and resolves identity/ownership/budget first. Auth failures degrade differently on purpose: pages look logged out, API routes fail loudly.
  • SSE is the primary live channel; React-Query owns server-state caching.

​
Stack

Tailwind, Radix primitives, shadcn-style components. The 3D atlas uses @react-three/fiber, @react-three/drei, and d3-force-3d. Internationalization via next-intl (locale-prefixed routes).