update mission cancel

www/missions.js

@@ -473,6 +473,7 @@
       executing: "Đang chạy",
       completed: "Xong",
       failed: "Lỗi",
+      cancelled: "Đã hủy",
     };
     return map[status] || status;
   }
@@ -639,6 +640,12 @@
     await refreshQueue();
   }
 
+  async function cancelRunner() {
+    if (!confirm("Hủy mission đang chạy? (thoát loop và dừng ngay)")) return;
+    await missionApi("/api/mission_queue/cancel", { method: "POST", body: "{}" });
+    await refreshQueue();
+  }
+
   function openQueueDialog(missionId) {
     const mission = findMission(missionId);
     if (!mission) return;
@@ -850,15 +857,19 @@
 
       row.innerHTML = `
         <div class="missionDragHandle" draggable="true" title="Kéo để sắp xếp" aria-label="Kéo để sắp xếp">↕</div>
-        <div class="missionActionMain">
-          <div class="missionActionLabelRow">
-            <span class="missionActionIcon ${iconClass}">${iconChar}</span>
-            <span class="missionActionLabel">${escapeHtml(action.label)}</span>
+        <div class="missionActionTop">
+          <div class="missionActionMain">
+            <div class="missionActionLabelRow">
+              <span class="missionActionIcon ${iconClass}">${iconChar}</span>
+              <span class="missionActionLabel">${escapeHtml(action.label)}</span>
+            </div>
+            <div class="missionActionSummary">${escapeHtml(actionSummary(action))}</div>
           </div>
-          <div class="missionActionSummary">${escapeHtml(actionSummary(action))}</div>
-        </div>
-        <button type="button" class="iconBtn" data-config="${action.id}" title="Cấu hình">⚙</button>
-        <button type="button" class="iconBtn danger" data-remove="${action.id}" title="Xóa">×</button>`;
+          <div class="missionActionBtns">
+            <button type="button" class="iconBtn" data-config="${action.id}" title="Cấu hình">⚙</button>
+            <button type="button" class="iconBtn danger" data-remove="${action.id}" title="Xóa">×</button>
+          </div>
+        </div>`;
 
       if (action.type === "loop" && Array.isArray(action.children)) {
         const loop = document.createElement("div");
@@ -876,11 +887,15 @@
           renderActionRows(action.children, `${listPath}.${action.id}`, drop);
         }
         loop.appendChild(drop);
-        row.querySelector(".missionActionMain").appendChild(loop);
+        row.appendChild(loop);
       }
 
-      row.querySelector("[data-config]").addEventListener("click", () => openActionConfig(action.id));
-      row.querySelector("[data-remove]").addEventListener("click", () => {
+      row.querySelector("[data-config]").addEventListener("click", (evt) => {
+        evt.stopPropagation();
+        openActionConfig(action.id);
+      });
+      row.querySelector("[data-remove]").addEventListener("click", (evt) => {
+        evt.stopPropagation();
         removeActionFromTree(action.id);
         renderMissionEditor();
       });
@@ -1308,6 +1323,9 @@
     });
 
     el("missionQueueClearBtn")?.addEventListener("click", clearQueue);
+    el("missionQueueCancelBtn")?.addEventListener("click", () => {
+      cancelRunner().catch((e) => alert(e.message));
+    });
     el("missionQueueForm")?.addEventListener("submit", submitQueueDialog);
   }
 
@@ -1327,6 +1345,7 @@
     enqueueMission,
     pauseRunner,
     continueRunner,
+    cancelRunner,
     refreshQueue,
     clearQueue,
     getQueueSnapshot,