refactor: extract HalStatusPanel.vue

The simplest of the four menu panels: start/stop buttons + stdout textarea.
App.vue now just binds startHAL/stopHAL/halStdoutText through events.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: tinic

elle-app/elle-frontend/src/App.vue

@@ -7,6 +7,7 @@ import InputNumber from 'primevue/inputnumber'
 
 import Numpad from './components/Numpad.vue'
 import DRODisplay from './components/DRODisplay.vue'
+import HalStatusPanel from './components/HalStatusPanel.vue'
 import OperationPreview from './components/OperationPreview.vue'
 import ParameterButton from './components/ParameterButton.vue'
 import ToolTable from './components/ToolTable.vue'
@@ -1730,23 +1731,13 @@ onUnmounted(() => {
         />
       </Dialog>
     </div>
-    <div v-if="selectedMenu == MenuType.halStatus" class="flex-grow-1 flex flex-column">
-      <Toolbar class="flex-none p-1">
-        <template #start>
-          <Button label="Start HAL" icon="pi pi-play" class="mr-2" @click="startHAL" />
-          <Button label="Stop HAL" icon="pi pi-stop" severity="success" @click="stopHAL" />
-        </template>
-      </Toolbar>
-      <Textarea
-        v-model="halStdoutText"
-        auto-scroll="true"
-        class="console-output flex-grow-1"
-        spellcheck="false"
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-      />
-    </div>
+    <HalStatusPanel
+      v-if="selectedMenu == MenuType.halStatus"
+      :stdout-text="halStdoutText"
+      @update:stdout-text="halStdoutText = $event"
+      @start="startHAL"
+      @stop="stopHAL"
+    />
     <div v-if="selectedMenu == MenuType.settings" class="flex-grow-1 p-4">
       <div class="dro-font-mode">
         <h2 class="mb-4">Settings</h2>

elle-app/elle-frontend/src/components/HalStatusPanel.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import Button from 'primevue/button'
+import Toolbar from 'primevue/toolbar'
+import Textarea from 'primevue/textarea'
+
+defineProps<{
+  stdoutText: string
+}>()
+
+defineEmits<{
+  'update:stdoutText': [value: string]
+  start: []
+  stop: []
+}>()
+</script>
+
+<template>
+  <div class="flex-grow-1 flex flex-column">
+    <Toolbar class="flex-none p-1">
+      <template #start>
+        <Button label="Start HAL" icon="pi pi-play" class="mr-2" @click="$emit('start')" />
+        <Button label="Stop HAL" icon="pi pi-stop" severity="success" @click="$emit('stop')" />
+      </template>
+    </Toolbar>
+    <Textarea
+      :model-value="stdoutText"
+      auto-scroll="true"
+      class="console-output flex-grow-1"
+      spellcheck="false"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      @update:model-value="$emit('update:stdoutText', String($event ?? ''))"
+    />
+  </div>
+</template>
+
+<style scoped>
+.console-output {
+  font-family: 'iosevka' !important;
+  font-size: 1em;
+  line-height: 1.2;
+  height: 100% !important;
+  resize: none;
+}
+</style>