# routes/+layout.svelte — Navigation Bar

<span style="white-space: pre-wrap;">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 </span>`<span class="editor-theme-code">{@render children()}</span>`.

### Navigation bar

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

**Task dropdown**<span style="white-space: pre-wrap;"> — lists the four task routes (Science, Navigation, Maintenance, Probing). Selecting one navigates to that route and updates the displayed task name.</span>

**Drive Control Mode dropdown**<span style="white-space: pre-wrap;"> — toggles between Manual and Automatic drive. Calls </span>`<span class="editor-theme-code">set_state</span>`<span style="white-space: pre-wrap;"> with </span>`<span class="editor-theme-code">DriveManual</span>`<span style="white-space: pre-wrap;"> to sync the mode to the backend.</span>

**Arm Control Mode dropdown**<span style="white-space: pre-wrap;"> — toggles between Manual and Automatic arm control. Calls </span>`<span class="editor-theme-code">set_state</span>`<span style="white-space: pre-wrap;"> with </span>`<span class="editor-theme-code">ArmManual</span>`<span style="white-space: pre-wrap;"> to sync the mode to the backend.</span>

**Start / Pause / Resume Task button**<span style="white-space: pre-wrap;"> — controls a task timer. Displays the elapsed time next to the label. The button label cycles through </span>`<span class="editor-theme-code">▶︎ Start Task</span>`<span style="white-space: pre-wrap;"> → </span>`<span class="editor-theme-code">❚❚ Pause <task></span>`<span style="white-space: pre-wrap;"> → </span>`<span class="editor-theme-code">▶︎ Resume <task></span>`<span style="white-space: pre-wrap;"> depending on state.</span>

**Mode icon**<span style="white-space: pre-wrap;"> — a centred icon that shows either a driving icon or an arm icon depending on the current </span>`<span class="editor-theme-code">pickup_mode</span>`<span style="white-space: pre-wrap;"> state. Polled from the backend every 250ms.</span>

**END TASK button**<span style="white-space: pre-wrap;"> — 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 </span>`<span class="editor-theme-code">{NNNN}_{task_name}.json</span>`<span style="white-space: pre-wrap;"> where </span>`<span class="editor-theme-code">NNNN</span>`<span style="white-space: pre-wrap;"> is an incrementing zero-padded number.</span>

**Settings / Home icons**<span style="white-space: pre-wrap;"> — navigation shortcuts in the top right.</span>

### Task file naming

<span style="white-space: pre-wrap;">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. </span>`<span class="editor-theme-code">0000_science.json</span>`<span style="white-space: pre-wrap;">, </span>`<span class="editor-theme-code">0001_science.json</span>`).

### Camera health

`<span class="editor-theme-code">initCameraHealthListener()</span>`<span style="white-space: pre-wrap;"> from </span>`<span class="editor-theme-code">state.svelte.js</span>`<span style="white-space: pre-wrap;"> is called directly in the layout's </span>`<span class="editor-theme-code"><script></span>`<span style="white-space: pre-wrap;"> (outside </span>`<span class="editor-theme-code">onMount</span>`) so it is initialised as early as possible.