feat: complete Nexus mission-control workflows

frontend/src/components/config/ConfigEditor.vue

@@ -10,6 +10,9 @@ defineProps<{
   saving: boolean
   saveStatus: 'idle' | 'saved' | 'error'
   saveMessage: string
+  backupStatus: string
+  reloadStatus: string
+  reloadMessage: string
 }>()
 
 defineEmits<{
@@ -60,6 +63,12 @@ function onInput(event: Event) {
       </div>
     </div>
 
+    <div v-if="reloadMessage" class="editor-health">
+      <span class="health-pill" :class="backupStatus">Backup {{ backupStatus }}</span>
+      <span class="health-pill" :class="reloadStatus">Reload {{ reloadStatus }}</span>
+      <span class="health-note">{{ reloadMessage }}</span>
+    </div>
+
     <!-- Text editor -->
     <textarea
       class="config-editor"
@@ -89,6 +98,17 @@ function onInput(event: Event) {
   border-bottom: 1px solid var(--line, #1e2030);
   gap: 12px;
 }
+.editor-health {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  border-bottom: 1px solid var(--line, #1e2030);
+  background: rgba(255,255,255,.015);
+  color: #8e96a8;
+  font-size: 10.5px;
+  flex-wrap: wrap;
+}
 .editor-file-info {
   display: flex;
   align-items: center;
@@ -165,6 +185,30 @@ function onInput(event: Event) {
   opacity: 0.4;
   cursor: not-allowed;
 }
+.health-pill {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--line, #1e2030);
+  border-radius: 999px;
+  padding: 2px 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.health-pill.created {
+  color: #51d49a;
+  border-color: rgba(81,212,154,.3);
+}
+.health-pill.not_applicable {
+  color: #d4b26a;
+  border-color: rgba(212,178,106,.25);
+}
+.health-pill.not_supported {
+  color: #9aa4bb;
+  border-color: rgba(154,164,187,.25);
+}
+.health-note {
+  color: #7e8799;
+}
 
 .config-editor {
   width: 100%;