feat: make mode creation preview-only and cache-safe

apps/web-console/vue-ui.js

@@ -111,7 +111,7 @@ import { Fragment, createApp, h, nextTick, reactive } from "vue";
   }
 
   function createCommandMount(container) {
-    const state = reactive({ commands: [], open: true });
+    const state = reactive({ commands: [], open: true, heading: "下发控制指令" });
     const app = createApp({
       name: "N7DispatchedControlsCard",
       setup() {
@@ -131,7 +131,7 @@ import { Fragment, createApp, h, nextTick, reactive } from "vue";
             h("span", { class: "assistant-dispatched-controls-heading-icon" }, [
               h("i", { "data-lucide": "list-tree" }),
             ]),
-            h("b", null, "下发控制指令"),
+            h("b", null, state.heading),
             h("strong", { class: "assistant-dispatched-controls-count" }, String(state.commands.length)),
             h("i", {
               class: "assistant-dispatched-controls-chevron",
@@ -148,12 +148,13 @@ import { Fragment, createApp, h, nextTick, reactive } from "vue";
     return mount;
   }
 
-  function renderDispatchedControls(container, commands) {
+  function renderDispatchedControls(container, commands, options = {}) {
     if (!(container instanceof Element) || !Array.isArray(commands) || !commands.length) {
       return false;
     }
     const mount = commandMounts.get(container) || createCommandMount(container);
     replaceReactiveArray(mount.state.commands, commands);
+    mount.state.heading = text(options.heading, "下发控制指令");
     container.dataset.vueSurface = "dispatched-controls";
     refreshIcons();
     return true;