Skip to content
Project VELAProject VELA

Frontend console

One frontend: apps/console/ — the operator / production surface. It is hand-coded React (Vite + TypeScript), contract-aligned to vela/contracts.py, RBAC-gated, wired to the live API, and tested with vitest + Playwright. There is no separate demo app.

Information architecture — the Casefile

A persistent app shell (top bar + left nav) hosts URL-addressable surfaces via HashRouter (which keeps it static-host / air-gap safe — no server rewrites). Everything reaches data through a single VelaProvider.

Route Surface
/cases Home — KPI strip, a proactive Watchlist hero, case lanes, subsystem/confidence mix
/investigations The investigations table
/watchlist Proactive watchlist — ranked triage queue, per-subsystem rollup, suppression visible
/approvals The approval queue (release gate)
/launch Launch an investigation on a scenario
/ingest Telemetry ingest — XTCE dictionary preview + CCSDS Space Packet decode
/integrations The connector inventory (every source/store/identity/export, read-only)
/system, /management Deployment posture, benchmarks, directory & SSO, plan & usage
/settings Connection + data-source settings
/cases/:id/{verdict,evidence,procedure} The case workspace — split surfaces + a persistent release gate
/about, /legal/* Company + the mandatory legal/compliance pages

The case workspace

A case splits into three surfaces around a persistent Release Gate:

  • Verdict — the severity hero, ranked hypotheses, cited rule-outs, onboard corroboration, knowledge gaps, precedents, and Ask this case (a citation-gated Q&A over the grounded record).
  • Evidence — real replay telemetry with limit bands, out-of-limit points, and telecommand marks; the reasoning-pipeline DAG; the forensic audit replay.
  • Procedure — the drafted recovery, each step cited or flagged UNGROUNDED.

The Release Gate is the safety primitive: release is un-armable while any integrity gate fails, and releasing is the single mutating action — it releases the draft to operators, it never commands the spacecraft.

Contracts, mirrored by hand

apps/console/src/api/types.ts mirrors vela/contracts.py. apps/console/src/api/client.ts is the typed HTTP client; apps/console/src/data/fixtures.ts is a deterministic offline demo client that seeds varied cases and decodes real uploads in-browser (XTCE and CCSDS) — no fabricated previews.

Design system

A dark mission-control aesthetic: a space-ink ground (#06090f), one restrained telemetry-signal teal accent (var(--console-accent)), and a severity ramp (var(--color-sev-*)) mapped to Severity. Mono for labels/codes, self-hosted fonts (airgap-safe — no font CDN). Shared primitives (Panel, Spinner, Badge, LoadingCard) live in components/ui.tsx.

Commands

Terminal window
cd apps/console && npm ci
npm run dev | build | lint | test    # lint = eslint + tsc --noEmit; test = vitest run
npx vitest run src/api/client.test.ts

The console is eval-gated by its own tests, not line-gated — see the app’s test suite for the release-gate, readiness, and ingest coverage.