update mission cancel

www/dashboard.js

@@ -131,7 +131,7 @@
           <label>Tiêu đề widget (tùy chọn)</label>
           <input data-field="title" type="text" value="${escapeHtml(widget.title || "")}" />
         </div>
-        <p class="mutedNote">Tạm dừng / tiếp tục mission đang chạy trên robot.</p>`;
+        <p class="mutedNote">Tạm dừng / tiếp tục / hủy mission đang chạy trên robot.</p>`;
     }
   }
 
@@ -206,9 +206,14 @@
     const paused = state === "paused" || snap?.runner?.paused;
     const running = state === "running" || paused;
     bodyEl.innerHTML = `
-      <button type="button" class="dashboardPauseBtn ${paused ? "is-paused" : ""}" data-pause-action="${paused ? "continue" : "pause"}" ${running ? "" : "disabled"}>
-        ${paused ? "Continue" : "Pause"}
-      </button>
+      <div class="dashboardRunnerControls">
+        <button type="button" class="dashboardPauseBtn ${paused ? "is-paused" : ""}" data-pause-action="${paused ? "continue" : "pause"}" ${running ? "" : "disabled"}>
+          ${paused ? "Continue" : "Pause"}
+        </button>
+        <button type="button" class="dashboardCancelBtn" data-cancel-mission ${running ? "" : "disabled"}>
+          Hủy mission
+        </button>
+      </div>
       <p class="mutedNote dashboardWidgetHint">${running ? (paused ? "Mission đang tạm dừng" : "Mission đang chạy") : "Không có mission đang chạy"}</p>`;
     bodyEl.querySelector("[data-pause-action]")?.addEventListener("click", async (evt) => {
       const action = evt.currentTarget.dataset.pauseAction;
@@ -219,6 +224,13 @@
         alert(e.message);
       }
     });
+    bodyEl.querySelector("[data-cancel-mission]")?.addEventListener("click", async () => {
+      try {
+        await missions()?.cancelRunner?.();
+      } catch (e) {
+        alert(e.message);
+      }
+    });
   }
 
   function renderWidget(widget) {