routes/+layout.svelte — Navigation Bar

The layout wraps every page in the application. It renders the persistent navigation bar at the top and then the current page's content via {@render children()}.

Navigation bar

The navbar contains the following controls, always visible regardless of which route is active:

Task dropdown — lists the four task routes (Science, Navigation, Maintenance, Probing). Selecting one navigates to that route and updates the displayed task name.

Drive Control Mode dropdown — toggles between Manual and Automatic drive. Calls set_state with DriveManual to sync the mode to the backend.

Arm Control Mode dropdown — toggles between Manual and Automatic arm control. Calls set_state with ArmManual to sync the mode to the backend.

Start / Pause / Resume Task button — controls a task timer. Displays the elapsed time next to the label. The button label cycles through ▶︎ Start Task → ❚❚ Pause <task> → ▶︎ Resume <task> depending on state.

Mode icon — a centred icon that shows either a driving icon or an arm icon depending on the current pickup_mode state. Polled from the backend every 250ms.

END TASK button — stops the timer and saves a task result file. Prompts the operator for confirmation before ending. The saved JSON file includes the task name, completion time, finish timestamp, and all attached samples. The filename is auto-generated as {NNNN}_{task_name}.json where NNNN is an incrementing zero-padded number.

Settings / Home icons — navigation shortcuts in the top right.

Task file naming

When a task ends, the layout reads the existing task files and finds the highest existing prefix number for that task type, then increments it. This ensures task files are always uniquely numbered in order (e.g. 0000_science.json, 0001_science.json).

Camera health

initCameraHealthListener() from state.svelte.js is called directly in the layout's <script> (outside onMount) so it is initialised as early as possible.