systems frontend workspace

Frontend workspace

Active contributors: Douwe de Vries

Purpose

The frontend workspace presents Load Rift as a three-step local load-test flow and keeps UI state separate from backend state. src/app/App.tsx composes feature hooks, runner options, and Tauri actions into the visible workspace.

Directory layout

src/main.tsx
src/app/
src/app/components/
src/app/hooks/
src/features/
src/lib/loadrift/
src/lib/tauri/
src/styles/app.css

Key abstractions

Abstraction	File	Description
LoadRiftApiProvider	src/lib/loadrift/context.tsx	Injects the API contract into React hooks
useRunnerOptions	src/app/hooks/useRunnerOptions.ts	Owns runner form state, thresholds, VUs, selected IDs, and weights
useCollectionImport	src/features/import/useCollectionImport.ts	Owns import loading/error/collection state
useTestHarness	src/features/test/useTestHarness.ts	Owns run state and event listeners
loadRunnerPreferences	src/app/persistence.ts	Loads validated non-secret preferences from localStorage

How it works

graph TD
    Main[src/main.tsx] --> Provider[LoadRiftApiProvider]
    Provider --> App[src/app/App.tsx]
    App --> ImportHook[useCollectionImport]
    App --> OptionsHook[useRunnerOptions]
    App --> ValidationHook[useConfigValidation]
    App --> SmokeHook[useSmokeTest]
    App --> HarnessHook[useTestHarness]
    HarnessHook --> API[LoadRiftApi]
    API --> Tauri[src/lib/tauri/client.ts]

Loading

src/main.tsx creates the Tauri-backed API and provides it through context. src/app/App.tsx derives status and actions, then passes grouped props into section components such as CollectionImportSection, TestHarnessSection, LiveRunMonitorCard, and LatestResultCard.

Integration points

The workspace calls commands through Command API bridge. Collection tree behavior is covered in Request selection. Backend state is covered in Tauri backend.

Entry points for modification

Change top-level flow in src/app/App.tsx. Change individual cards in src/app/components/. Change local form and persistence behavior in src/app/hooks/useRunnerOptions.ts and src/app/persistence.ts.

Key source files

File	Purpose
src/main.tsx	React root and API provider setup
src/app/App.tsx	Top-level workspace composition
src/app/persistence.ts	UI and runner preference persistence
src/app/utils.ts	Shared frontend helpers for selection, variables, and report names
src/styles/app.css	App-wide styling