@aiyiran/myclaw 1.1.24 → 1.1.26

package/assets/myclaw-inject.js

@@ -305,7 +305,510 @@
     } catch (e) {}
   }
 
-  // ═══ 3. 语音按钮 ═══
+  // ═══ 3. Prompt 小助手按钮 ═══
+
+  var promptOpen = false;
+  var modalVoiceDestroy = null;   // 弹框内语音组件的销毁函数
+
+  function createPromptButton() {
+    var btn = document.createElement("button");
+    btn.id = "myclaw-prompt-btn";
+    btn.className = "agent-chat__input-btn";
+    btn.title = "\u63d0\u95ee prompt \u5c0f\u52a9\u624b";
+    btn.setAttribute("aria-label", "\u63d0\u95ee prompt \u5c0f\u52a9\u624b");
+    btn.innerHTML = [
+      '<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18"',
+      '  viewBox="0 0 24 24" fill="none" stroke="currentColor"',
+      '  stroke-width="2" stroke-linecap="round" stroke-linejoin="round">',
+      '  <circle cx="12" cy="12" r="10"/>',
+      '  <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/>',
+      '  <line x1="12" y1="17" x2="12.01" y2="17"/>',
+      '</svg>',
+    ].join("");
+
+    btn.addEventListener("click", function (e) {
+      e.stopPropagation();
+      if (promptOpen) {
+        closePromptModal();
+      } else {
+        openPromptModal();
+      }
+    });
+
+    return btn;
+  }
+
+  // ── 文案配置（集中管理，方便后续修改） ──
+
+  var ITERATION_CONFIG = {
+    problems: ["不好看", "不好玩", "太简单", "不清楚", "没反应", "不像我想的", "太乱了", "不知道接下来做什么"],
+    actions:  ["加一个新东西", "改一下样子", "改一下内容", "改一下功能", "让它动起来", "让它更有趣", "让它更清楚", "先做一个最简单的新版本"],
+  };
+
+  function openPromptModal() {
+    if (document.querySelector("#myclaw-prompt-modal")) return;
+    promptOpen = true;
+
+    var iconBtn = document.querySelector("#myclaw-prompt-btn");
+    if (iconBtn) iconBtn.style.color = "#6366f1";
+
+    // ── 状态（关闭即清空） ──
+    var state = { problem: "", action: "", note: "" };
+
+    // ── 文本生成 ──
+    function buildText() {
+      if (!state.problem || !state.action) return "";
+      var t = "我现在这个作品的问题是【" + state.problem + "】。\n"
+            + "我下一步想先【" + state.action + "】。\n"
+            + "请根据我当前正在做的内容，帮我只改一个点，给我一个最简单、最容易成功的下一步方案。";
+      if (state.note.trim()) t += "\n补充说明：" + state.note.trim();
+      return t;
+    }
+
+    function buildPayload() {
+      return {
+        type: "iteration_helper",
+        problem: state.problem,
+        next_action: state.action,
+        extra_note: state.note,
+        generated_text: buildText(),
+      };
+    }
+
+    // ── 刷新预览 & 按钮可用性 ──
+    var previewEl, actionSendBtn, actionInsertBtn;
+    function refresh() {
+      var text = buildText();
+      var ready = !!(state.problem && state.action);
+      if (previewEl) {
+        previewEl.textContent = text || "先选上面两项，这里会自动生成要发给 AI 的内容 ✨";
+        previewEl.style.color = ready ? "#cdd6f4" : "#555";
+      }
+      if (actionSendBtn) {
+        actionSendBtn.disabled = !ready;
+        actionSendBtn.style.opacity = ready ? "1" : "0.4";
+        actionSendBtn.style.cursor  = ready ? "pointer" : "not-allowed";
+      }
+      if (actionInsertBtn) {
+        actionInsertBtn.disabled = !ready;
+        actionInsertBtn.style.opacity = ready ? "1" : "0.4";
+        actionInsertBtn.style.cursor  = ready ? "pointer" : "not-allowed";
+      }
+    }
+
+    // ── 芯片选择组（单选，再点可取消） ──
+    function makeChipGroup(items, activeColor, onChange) {
+      var wrap = document.createElement("div");
+      wrap.style.cssText = "display:flex;flex-wrap:wrap;gap:7px;";
+      var chips = [];
+      items.forEach(function (label) {
+        var chip = document.createElement("button");
+        chip.textContent = label;
+        chip.dataset.selected = "0";
+        chip.style.cssText = [
+          "padding:6px 13px",
+          "border-radius:20px",
+          "border:1.5px solid #3d3d5c",
+          "background:#252536",
+          "color:#888",
+          "font-size:13px",
+          "font-family:-apple-system,sans-serif",
+          "cursor:pointer",
+          "transition:all 0.15s",
+          "white-space:nowrap",
+        ].join(";");
+
+        function applyStyle(sel) {
+          if (sel) {
+            chip.style.background = activeColor;
+            chip.style.borderColor = activeColor;
+            chip.style.color = "#fff";
+            chip.style.fontWeight = "bold";
+          } else {
+            chip.style.background = "#252536";
+            chip.style.borderColor = "#3d3d5c";
+            chip.style.color = "#888";
+            chip.style.fontWeight = "normal";
+          }
+        }
+
+        chip.onmouseenter = function () {
+          if (chip.dataset.selected !== "1") chip.style.borderColor = activeColor;
+        };
+        chip.onmouseleave = function () {
+          if (chip.dataset.selected !== "1") chip.style.borderColor = "#3d3d5c";
+        };
+        chip.onclick = function () {
+          var nowOn = chip.dataset.selected !== "1";
+          // 取消同组其他
+          chips.forEach(function (c) { c.dataset.selected = "0"; applyStyle.call({chip:c}, false); });
+          // 重新用当前 chip 的 applyStyle（通过闭包拿到正确 chip）
+          chips.forEach(function (c) {
+            if (c !== chip) {
+              c.style.background = "#252536";
+              c.style.borderColor = "#3d3d5c";
+              c.style.color = "#888";
+              c.style.fontWeight = "normal";
+              c.dataset.selected = "0";
+            }
+          });
+          chip.dataset.selected = nowOn ? "1" : "0";
+          applyStyle(nowOn);
+          onChange(nowOn ? label : "");
+        };
+
+        chips.push(chip);
+        wrap.appendChild(chip);
+      });
+      return wrap;
+    }
+
+    // ── 区域标题 ──
+    function makeLabel(text) {
+      var el = document.createElement("div");
+      el.textContent = text;
+      el.style.cssText = "font-size:13px;font-weight:bold;color:#cdd6f4;margin-bottom:8px;font-family:-apple-system,sans-serif;";
+      return el;
+    }
+
+    // ══════════ DOM 组装 ══════════
+
+    // 遮罩
+    var overlay = document.createElement("div");
+    overlay.id = "myclaw-prompt-modal";
+    overlay.style.cssText = [
+      "position:fixed", "top:0", "left:0",
+      "width:100vw", "height:100vh",
+      "background:rgba(0,0,0,0.45)",
+      "z-index:99998",
+      "display:flex", "align-items:center", "justify-content:center",
+      "animation:myclaw-fade-in 0.15s ease",
+    ].join(";");
+
+    // 弹框
+    var box = document.createElement("div");
+    box.style.cssText = [
+      "width:560px", "max-width:96vw", "max-height:92vh",
+      "background:#1e1e2e",
+      "border-radius:12px",
+      "overflow:hidden",
+      "display:flex", "flex-direction:column",
+      "box-shadow:0 12px 48px rgba(0,0,0,0.6)",
+    ].join(";");
+
+    // 标题栏
+    var header = document.createElement("div");
+    header.style.cssText = [
+      "display:flex", "align-items:center", "justify-content:space-between",
+      "padding:13px 18px",
+      "background:linear-gradient(135deg,#6366f1,#8b5cf6)",
+      "color:#fff",
+      "font-size:15px", "font-weight:bold",
+      "font-family:-apple-system,sans-serif",
+      "user-select:none", "flex-shrink:0",
+    ].join(";");
+    header.innerHTML = "<span>🤔 我卡住了，帮我继续改</span>";
+    var closeX = document.createElement("span");
+    closeX.textContent = "✕";
+    closeX.style.cssText = "cursor:pointer;padding:2px 8px;border-radius:4px;font-size:15px;transition:background 0.15s;";
+    closeX.onmouseenter = function () { closeX.style.background = "rgba(255,255,255,0.2)"; };
+    closeX.onmouseleave = function () { closeX.style.background = "none"; };
+    closeX.onclick = function () { closePromptModal(); };
+    header.appendChild(closeX);
+
+    // 滚动内容区
+    var scroll = document.createElement("div");
+    scroll.style.cssText = "flex:1;overflow-y:auto;padding:20px 20px 8px;display:flex;flex-direction:column;gap:20px;";
+
+    // ── 第1区：问题 ──
+    var sec1 = document.createElement("div");
+    sec1.appendChild(makeLabel("现在最想改的问题是？"));
+    sec1.appendChild(makeChipGroup(ITERATION_CONFIG.problems, "#f59e0b", function (val) {
+      state.problem = val; refresh();
+    }));
+    scroll.appendChild(sec1);
+
+    // ── 第2区：行动 ──
+    var sec2 = document.createElement("div");
+    sec2.appendChild(makeLabel("你下一步想先改什么？"));
+    sec2.appendChild(makeChipGroup(ITERATION_CONFIG.actions, "#6366f1", function (val) {
+      state.action = val; refresh();
+    }));
+    scroll.appendChild(sec2);
+
+    // ── 第3区：补充（带语音输入） ──
+    var sec3 = document.createElement("div");
+    sec3.appendChild(makeLabel("可以补充一点点（可不填）"));
+    var placeholders = ["比如：我想做成飞行射击", "比如：我想更像小猫主题", "比如：按钮点了以后想有变化"];
+    var noteField = makeVoiceInputField(
+      placeholders[Math.floor(Math.random() * placeholders.length)],
+      60,
+      function (val) { state.note = val; refresh(); }
+    );
+    modalVoiceDestroy = noteField.destroy;
+    sec3.appendChild(noteField.el);
+    scroll.appendChild(sec3);
+
+    // ── 预览区 ──
+    var previewWrap = document.createElement("div");
+    previewWrap.style.cssText = [
+      "padding:12px 14px",
+      "background:#252536",
+      "border-radius:8px",
+      "border-left:3px solid #6366f1",
+    ].join(";");
+    var previewLabel = document.createElement("div");
+    previewLabel.textContent = "将要发给 AI 的内容：";
+    previewLabel.style.cssText = "font-size:11px;color:#6366f1;font-weight:bold;margin-bottom:6px;font-family:monospace;letter-spacing:0.3px;";
+    previewEl = document.createElement("div");
+    previewEl.style.cssText = "font-size:13px;line-height:1.7;white-space:pre-wrap;font-family:-apple-system,sans-serif;word-break:break-all;";
+    previewWrap.appendChild(previewLabel);
+    previewWrap.appendChild(previewEl);
+    scroll.appendChild(previewWrap);
+
+    // ── 底部按钮区 ──
+    var footer = document.createElement("div");
+    footer.style.cssText = [
+      "display:flex", "gap:10px",
+      "padding:14px 20px",
+      "border-top:1px solid #2d2d3f",
+      "flex-shrink:0",
+      "background:#1e1e2e",
+    ].join(";");
+
+    actionSendBtn = document.createElement("button");
+    actionSendBtn.textContent = "➤ 直接发给 AI";
+    actionSendBtn.disabled = true;
+    actionSendBtn.style.cssText = [
+      "flex:1", "padding:11px 0",
+      "background:#10b981", "color:#fff",
+      "border:none", "border-radius:8px",
+      "font-size:14px", "font-weight:bold",
+      "font-family:-apple-system,sans-serif",
+      "cursor:not-allowed", "transition:all 0.15s", "opacity:0.4",
+    ].join(";");
+    actionSendBtn.onmouseenter = function () { if (!actionSendBtn.disabled) actionSendBtn.style.background = "#059669"; };
+    actionSendBtn.onmouseleave = function () { if (!actionSendBtn.disabled) actionSendBtn.style.background = "#10b981"; };
+    actionSendBtn.onclick = function () {
+      if (actionSendBtn.disabled) return;
+      var payload = buildPayload();
+      console.log("[myclaw-prompt] onSendDirect", payload);
+      insertPromptText(payload.generated_text);
+      closePromptModal();
+      setTimeout(function () { trySend(); }, 50);
+    };
+
+    actionInsertBtn = document.createElement("button");
+    actionInsertBtn.textContent = "⬇ 先放到聊天框";
+    actionInsertBtn.disabled = true;
+    actionInsertBtn.style.cssText = [
+      "flex:1", "padding:11px 0",
+      "background:#6366f1", "color:#fff",
+      "border:none", "border-radius:8px",
+      "font-size:14px", "font-weight:bold",
+      "font-family:-apple-system,sans-serif",
+      "cursor:not-allowed", "transition:all 0.15s", "opacity:0.4",
+    ].join(";");
+    actionInsertBtn.onmouseenter = function () { if (!actionInsertBtn.disabled) actionInsertBtn.style.background = "#4f46e5"; };
+    actionInsertBtn.onmouseleave = function () { if (!actionInsertBtn.disabled) actionInsertBtn.style.background = "#6366f1"; };
+    actionInsertBtn.onclick = function () {
+      if (actionInsertBtn.disabled) return;
+      var payload = buildPayload();
+      console.log("[myclaw-prompt] onInsertToInput", payload);
+      insertPromptText(payload.generated_text);
+      closePromptModal();
+    };
+
+    footer.appendChild(actionSendBtn);
+    footer.appendChild(actionInsertBtn);
+
+    // ── 拼装 ──
+    box.appendChild(header);
+    box.appendChild(scroll);
+    box.appendChild(footer);
+    overlay.appendChild(box);
+    overlay.onclick = function (e) { if (e.target === overlay) closePromptModal(); };
+    document.body.appendChild(overlay);
+
+    refresh();
+  }
+
+  function closePromptModal() {
+    if (modalVoiceDestroy) { modalVoiceDestroy(); modalVoiceDestroy = null; }
+    var modal = document.querySelector("#myclaw-prompt-modal");
+    if (modal) modal.remove();
+    promptOpen = false;
+
+    var btn = document.querySelector("#myclaw-prompt-btn");
+    if (btn) { btn.style.color = ""; }
+  }
+
+  /**
+   * 在 textarea 光标处插入 prompt 文字
+   */
+  function insertPromptText(text) {
+    var ta = document.querySelector(".agent-chat__input textarea");
+    if (!ta) return;
+
+    var start = ta.selectionStart || 0;
+    var end = ta.selectionEnd || 0;
+    var current = ta.value;
+    var newValue = current.substring(0, start) + text + current.substring(end);
+
+    var setter = Object.getOwnPropertyDescriptor(HTMLTextAreaElement.prototype, "value").set;
+    setter.call(ta, newValue);
+    ta.dispatchEvent(new Event("input", { bubbles: true }));
+
+    var newCursor = start + text.length;
+    try { ta.setSelectionRange(newCursor, newCursor); } catch (e) {}
+    ta.focus();
+  }
+
+  // ═══ 3.6 带语音的输入框组件 ═══
+
+  /**
+   * makeVoiceInputField(placeholder, maxLength, onChange)
+   * 返回 { el, getValue, setValue, destroy }
+   *
+   * 完全独立：有自己的 VoiceInput 实例和录音状态，
+   * 不污染主 recording / voice 全局变量。
+   */
+  function makeVoiceInputField(placeholder, maxLength, onChange) {
+    var lVoice     = null;   // 本组件的 VoiceInput 实例
+    var lRecording = false;  // 本组件的录音状态
+    var lStopping  = false;  // 本组件的 stopping 窗口
+
+    // ── 容器 ──
+    var wrap = document.createElement("div");
+    wrap.style.cssText = "display:flex;gap:8px;align-items:center;width:100%;box-sizing:border-box;";
+
+    // ── 输入框 ──
+    var input = document.createElement("input");
+    input.type = "text";
+    input.maxLength = maxLength || 60;
+    input.placeholder = placeholder || "";
+    input.style.cssText = [
+      "flex:1", "min-width:0", "padding:9px 12px",
+      "background:#252536",
+      "border:1.5px solid #3d3d5c",
+      "border-radius:8px",
+      "color:#cdd6f4",
+      "font-size:13px",
+      "font-family:-apple-system,sans-serif",
+      "outline:none",
+      "transition:border-color 0.15s, border-left-width 0.1s",
+    ].join(";");
+    input.onfocus = function () { if (!lRecording) input.style.borderColor = "#6366f1"; };
+    input.onblur  = function () { if (!lRecording) input.style.borderColor = "#3d3d5c"; };
+    input.oninput = function () { if (onChange) onChange(input.value); };
+
+    // ── 麦克风按钮 ──
+    var micBtn = document.createElement("button");
+    micBtn.type = "button";
+    micBtn.title = "语音输入";
+    micBtn.style.cssText = [
+      "width:34px", "height:34px", "flex-shrink:0",
+      "border-radius:50%",
+      "border:1.5px solid #3d3d5c",
+      "background:#252536",
+      "color:#888",
+      "cursor:pointer",
+      "display:flex", "align-items:center", "justify-content:center",
+      "transition:all 0.15s",
+      "position:relative",
+    ].join(";");
+    micBtn.innerHTML = [
+      '<svg width="14" height="14" viewBox="0 0 24 24" fill="none"',
+      ' stroke="currentColor" stroke-width="2"',
+      ' stroke-linecap="round" stroke-linejoin="round">',
+      '  <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>',
+      '  <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>',
+      '  <line x1="12" x2="12" y1="19" y2="22"/>',
+      '</svg>',
+    ].join("");
+
+    // ── UI 状态切换 ──
+    function setUI(recording) {
+      if (recording) {
+        micBtn.style.background   = "#ff4444";
+        micBtn.style.borderColor  = "#ff4444";
+        micBtn.style.color        = "#fff";
+        micBtn.title              = "停止录音";
+        input.style.borderColor   = "#ff4444";
+        input.style.borderLeftWidth = "3px";
+      } else {
+        micBtn.style.background   = "#252536";
+        micBtn.style.borderColor  = "#3d3d5c";
+        micBtn.style.color        = "#888";
+        micBtn.title              = "语音输入";
+        input.style.borderColor   = "#3d3d5c";
+        input.style.borderLeftWidth = "1.5px";
+      }
+    }
+
+    // ── 初始化本组件的 VoiceInput 实例 ──
+    function initLVoice() {
+      if (typeof window.VoiceInput === "undefined") return false;
+      lVoice = new window.VoiceInput({
+        onResult: function (text) {
+          if (!lRecording && !lStopping) return;
+          input.value = text;
+          if (onChange) onChange(text);
+        },
+        onStatusChange: function (oldS, newS) {
+          // 讯飞 60s 断开 → 自动重连
+          if (newS === "idle" && lRecording && !lStopping) {
+            setTimeout(function () {
+              if (lRecording && lVoice) lVoice.start();
+            }, 300);
+          }
+        },
+        onError: function (err) {
+          console.error("[voice-input-field] error:", err);
+          lRecording = false; lStopping = false;
+          setUI(false);
+        },
+      });
+      return true;
+    }
+
+    function startLocal() {
+      if (!lVoice && !initLVoice()) {
+        console.warn("[voice-input-field] VoiceInput SDK 未加载");
+        return;
+      }
+      lRecording = true;
+      setUI(true);
+      lVoice.start();
+    }
+
+    function stopLocal() {
+      if (!lRecording) return;
+      lStopping  = true;
+      lRecording = false;
+      setUI(false);
+      setTimeout(function () {
+        lStopping = false;
+        if (lVoice) lVoice.stop();
+      }, 1500);
+    }
+
+    micBtn.onclick = function () {
+      if (lRecording) { stopLocal(); } else { startLocal(); }
+    };
+
+    wrap.appendChild(input);
+    wrap.appendChild(micBtn);
+
+    return {
+      el:      wrap,
+      getValue: function ()  { return input.value; },
+      setValue: function (v) { input.value = v; if (onChange) onChange(v); },
+      destroy:  function ()  { if (lRecording) stopLocal(); },
+    };
+  }
+
+  // ═══ 3.5 语音按钮 ═══
 
   function createVoiceButton() {
     var btn = document.createElement("button");
@@ -502,17 +1005,20 @@ btn.addEventListener("click", function () {
     var toolbar = document.querySelector(".agent-chat__toolbar-left");
     if (!toolbar || document.querySelector("#myclaw-voice-btn")) return;
 
-    var btn = createVoiceButton();
+    var voiceBtn = createVoiceButton();
+    var promptBtn = createPromptButton();
 
-    // 插入到工具栏最前面（排在 Attach file 等按钮之前）
+    // 插入到工具栏最前面：prompt 按钮在最左，语音按钮紧跟其右
     if (toolbar.firstChild) {
-      toolbar.insertBefore(btn, toolbar.firstChild);
+      toolbar.insertBefore(voiceBtn, toolbar.firstChild);
+      toolbar.insertBefore(promptBtn, voiceBtn);
     } else {
-      toolbar.appendChild(btn);
+      toolbar.appendChild(promptBtn);
+      toolbar.appendChild(voiceBtn);
     }
 
     injected = true;
-    console.log("[myclaw-inject] \u2705 \u8bed\u97f3\u6309\u94ae\u5df2\u6ce8\u5165");
+    console.log("[myclaw-inject] \u2705 \u8bed\u97f3\u6309\u94ae + prompt\u6309\u94ae\u5df2\u6ce8\u5165");
   }
 
   // ═══ 注入录音态样式 ═══
@@ -586,6 +1092,23 @@ btn.addEventListener("click", function () {
   }
   // ═══ 6. 拦截发送按钮 ═══
 
+  /**
+   * 尝试触发发送：仅当按钮不处于 Stop 状态时才发送
+   * （AI 生成中时按钮带有 chat-send-btn--stop 类，此时禁止发送）
+   */
+  function trySend() {
+    var btn = document.querySelector("button.chat-send-btn");
+    if (!btn) {
+      console.log("[myclaw-send] 找不到发送按钮");
+      return;
+    }
+    if (btn.classList.contains("chat-send-btn--stop")) {
+      console.log("[myclaw-send] AI 生成中，禁止发送");
+      return;
+    }
+    btn.click();
+  }
+
   /**
    * 拦截 Enter 键：语音态下按回车 → 等待 2 秒后发送
    */
@@ -601,8 +1124,7 @@ btn.addEventListener("click", function () {
       console.log("[myclaw-voice] Enter按下, recording=", recording);
       stopVoice(function () {
         console.log("[myclaw-voice] Enter stopVoice callback firing...");
-        var sendBtn = document.querySelector("button.chat-send-btn, button[title=\"Send\"]");
-        if (sendBtn) sendBtn.click();
+        trySend();
       });
 
     }, true);
@@ -629,8 +1151,7 @@ btn.addEventListener("click", function () {
         console.log("[myclaw-voice] 发送按钮点击(语音态), recording=", recording);
         stopVoice(function () {
           console.log("[myclaw-voice] 发送按钮 stopVoice callback firing...");
-          var sendBtn = document.querySelector("button.chat-send-btn, button[title=\"Send\"]");
-          if (sendBtn) sendBtn.click();
+          trySend();
         });
         return;
       }
@@ -1000,7 +1521,7 @@ btn.addEventListener("click", function () {
       form.appendChild(row);
     });
 
-    // ── 删除伙伴按钮 ──
+    // ── 批量删除伙伴按钮 ──
     var delRow = document.createElement("div");
     delRow.style.cssText = [
       "padding:10px 14px",
@@ -1026,7 +1547,7 @@ btn.addEventListener("click", function () {
     delName.style.cssText = "font-size:13px;font-weight:bold;color:#ef4444;";
     delInfo.appendChild(delName);
     var delDesc = document.createElement("div");
-    delDesc.textContent = "\u5220\u9664\u4E00\u4E2A AI \u4F19\u4F34\uFF0C\u6B64\u64CD\u4F5C\u65E0\u6CD5\u6062\u590D";
+    delDesc.textContent = "\u52FE\u9009\u5E76\u6279\u91CF\u5220\u9664 AI \u4F19\u4F34";
     delDesc.style.cssText = "font-size:11px;color:#888;";
     delInfo.appendChild(delDesc);
     delRow.appendChild(delInfo);
@@ -1037,7 +1558,7 @@ btn.addEventListener("click", function () {
     delRow.appendChild(delArrow);
 
     delRow.onclick = function () {
-      showDeleteConfirm();
+      showBatchDeleteModal();
     };
 
     form.appendChild(delRow);
@@ -1085,131 +1606,402 @@ btn.addEventListener("click", function () {
 
     form.appendChild(lockRow);
 
-    // 删除伙伴 - 双重确认弹框
-    function showDeleteConfirm() {
-      var mask = document.createElement("div");
+    // 批量删除伙伴弹框
+    var MYCLAW_API_BASE_DEL = 'http://127.0.0.1:18800';
+
+    function fmtDate(ms) {
+      if (!ms) return '未知';
+      var d = new Date(ms);
+      return d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate()
+        + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+    }
+
+    function showBatchDeleteModal() {
+      var mask = document.createElement('div');
       mask.style.cssText = [
-        "position:fixed",
-        "top:0;left:0;width:100vw;height:100vh",
-        "background:rgba(0,0,0,0.3)",
-        "z-index:999999",
-        "display:flex",
-        "align-items:center",
-        "justify-content:center",
-        "animation:myclaw-fade-in 0.15s ease",
-      ].join(";");
+        'position:fixed', 'top:0', 'left:0', 'width:100vw', 'height:100vh',
+        'background:rgba(0,0,0,0.5)', 'z-index:999999',
+        'display:flex', 'align-items:center', 'justify-content:center',
+        'animation:myclaw-fade-in 0.15s ease',
+      ].join(';');
 
-      var box = document.createElement("div");
+      var box = document.createElement('div');
       box.style.cssText = [
-        "width:360px",
-        "background:#1e1e2e",
-        "border-radius:8px",
-        "overflow:hidden",
-        "box-shadow:0 8px 32px rgba(0,0,0,0.5)",
-      ].join(";");
+        'width:560px', 'max-width:95vw', 'max-height:85vh',
+        'background:#1e1e2e', 'border-radius:10px', 'overflow:hidden',
+        'box-shadow:0 12px 48px rgba(0,0,0,0.7)',
+        'display:flex', 'flex-direction:column',
+      ].join(';');
+
+      // 标题栏
+      var hdr = document.createElement('div');
+      hdr.style.cssText = 'padding:11px 16px;background:#ef4444;color:#fff;font-size:13px;font-family:monospace;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;';
+      var hdrTitle = document.createElement('span');
+      hdrTitle.textContent = '🗑 批量删除伙伴';
+      hdr.appendChild(hdrTitle);
+      var hdrClose = document.createElement('span');
+      hdrClose.textContent = '✕';
+      hdrClose.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:3px;transition:background 0.15s;';
+      hdrClose.onmouseenter = function () { hdrClose.style.background = 'rgba(255,255,255,0.2)'; };
+      hdrClose.onmouseleave = function () { hdrClose.style.background = 'none'; };
+      hdrClose.onclick = function () { mask.remove(); };
+      hdr.appendChild(hdrClose);
+      box.appendChild(hdr);
+
+      // 内容区（可滚动）
+      var content = document.createElement('div');
+      content.style.cssText = 'flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;font-family:monospace;color:#cdd6f4;';
+
+      // 底部操作栏
+      var footer = document.createElement('div');
+      footer.style.cssText = 'padding:12px 16px;background:#252536;border-top:1px solid #3d3d5c;display:flex;gap:8px;align-items:center;flex-shrink:0;';
+
+      box.appendChild(content);
+      box.appendChild(footer);
+      mask.appendChild(box);
+      mask.onclick = function (e) { if (e.target === mask) mask.remove(); };
+      document.body.appendChild(mask);
 
-      // 标题
-      var h = document.createElement("div");
-      h.style.cssText = "padding:10px 14px;background:#ef4444;color:#fff;font-size:13px;display:flex;justify-content:space-between;align-items:center;";
-      h.innerHTML = '<span>\uD83D\uDDD1 \u5220\u9664\u4F19\u4F34</span>';
-      var x = document.createElement("span");
-      x.textContent = "\u2715";
-      x.style.cssText = "cursor:pointer;padding:2px 6px;border-radius:3px;";
-      x.onclick = function () { mask.remove(); };
-      h.appendChild(x);
-      box.appendChild(h);
+      // ── Step 1: 加载列表 ──
+      function showStep1() {
+        content.innerHTML = '';
+        footer.innerHTML = '';
+        hdrTitle.textContent = '🗑 批量删除伙伴 — 选择';
+
+        var loading = document.createElement('div');
+        loading.textContent = '⏳ 加载中...';
+        loading.style.cssText = 'color:#888;font-size:12px;text-align:center;padding:20px 0;';
+        content.appendChild(loading);
+
+        fetch(MYCLAW_API_BASE_DEL + '/api/agents')
+          .then(function (r) { return r.json(); })
+          .then(function (data) {
+            content.innerHTML = '';
+            var agents = (data.agents || []);
+
+            if (agents.length === 0) {
+              var empty = document.createElement('div');
+              empty.textContent = '没有找到任何 Agent。';
+              empty.style.cssText = 'color:#888;font-size:12px;text-align:center;padding:20px 0;';
+              content.appendChild(empty);
+              return;
+            }
 
-      // body
-      var body = document.createElement("div");
-      body.style.cssText = "padding:16px;display:flex;flex-direction:column;gap:12px;";
-
-      var hint1 = document.createElement("div");
-      hint1.textContent = "\u8BF7\u8F93\u5165\u8981\u5220\u9664\u7684\u4F19\u4F34 ID\uFF1A";
-      hint1.style.cssText = "font-size:12px;color:#888;";
-      body.appendChild(hint1);
-
-      var input1 = document.createElement("input");
-      input1.type = "text";
-      input1.placeholder = "\u4F19\u4F34 ID";
-      input1.style.cssText = "padding:8px 10px;background:#252536;border:1px solid #3d3d5c;border-radius:4px;color:#cdd6f4;font-size:13px;font-family:monospace;outline:none;";
-      body.appendChild(input1);
-
-      var warn = document.createElement("div");
-      warn.textContent = "\u26A0 \u6B64\u64CD\u4F5C\u65E0\u6CD5\u6062\u590D\uFF0C\u786E\u8BA4\u540E\u5C06\u6C38\u4E45\u5220\u9664\uFF01";
-      warn.style.cssText = "font-size:11px;color:#ef4444;padding:8px;background:rgba(239,68,68,0.1);border-radius:4px;";
-      body.appendChild(warn);
-
-      var confirmHint = document.createElement("div");
-      confirmHint.textContent = '\u8BF7\u8F93\u5165 "YES" \u786E\u8BA4\u5220\u9664\uFF1A';
-      confirmHint.style.cssText = "font-size:12px;color:#888;";
-      confirmHint.style.display = "none";
-      body.appendChild(confirmHint);
-
-      var input2 = document.createElement("input");
-      input2.type = "text";
-      input2.placeholder = "YES";
-      input2.style.cssText = "padding:8px 10px;background:#252536;border:1px solid #3d3d5c;border-radius:4px;color:#cdd6f4;font-size:13px;font-family:monospace;outline:none;";
-      input2.style.display = "none";
-      body.appendChild(input2);
+            // 说明行
+            var legend = document.createElement('div');
+            legend.style.cssText = 'display:flex;gap:16px;font-size:11px;color:#888;padding-bottom:4px;border-bottom:1px solid #3d3d5c;';
+            legend.innerHTML = '<span><span style="color:#10b981">●</span> 已注册（JSON）</span>'
+              + '<span><span style="color:#f59e0b">●</span> 孤立（仅有文件夹）</span>';
+            content.appendChild(legend);
+
+            // 全选行
+            var selAllRow = document.createElement('div');
+            selAllRow.style.cssText = 'display:flex;align-items:center;gap:8px;font-size:12px;color:#888;cursor:pointer;padding:4px 0;';
+            var selAllCb = document.createElement('input');
+            selAllCb.type = 'checkbox';
+            selAllCb.style.cssText = 'width:14px;height:14px;cursor:pointer;accent-color:#ef4444;';
+            var selAllLabel = document.createElement('span');
+            selAllLabel.textContent = '全选 / 取消全选';
+            selAllRow.appendChild(selAllCb);
+            selAllRow.appendChild(selAllLabel);
+            content.appendChild(selAllRow);
+
+            // agent 列表
+            var checkboxes = [];
+            agents.forEach(function (ag) {
+              var row = document.createElement('div');
+              row.style.cssText = [
+                'display:flex', 'align-items:center', 'gap:10px',
+                'padding:8px 10px', 'border-radius:6px',
+                'background:#252536', 'cursor:pointer',
+                'transition:background 0.12s',
+              ].join(';');
+              row.onmouseenter = function () { row.style.background = '#2f2f4a'; };
+              row.onmouseleave = function () { row.style.background = cb.checked ? '#2a1a1a' : '#252536'; };
+
+              var cb = document.createElement('input');
+              cb.type = 'checkbox';
+              cb.style.cssText = 'width:14px;height:14px;cursor:pointer;flex-shrink:0;accent-color:#ef4444;';
+              cb.dataset.agentId = ag.id;
+
+              var dot = document.createElement('span');
+              dot.textContent = '●';
+              dot.style.cssText = 'font-size:10px;flex-shrink:0;color:' + (ag.inJson ? '#10b981' : '#f59e0b') + ';';
+
+              var info = document.createElement('div');
+              info.style.cssText = 'flex:1;min-width:0;';
+
+              var nameEl = document.createElement('div');
+              nameEl.textContent = ag.id;
+              nameEl.style.cssText = 'font-size:13px;font-weight:bold;color:#cdd6f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+              info.appendChild(nameEl);
+
+              var metaEl = document.createElement('div');
+              metaEl.style.cssText = 'font-size:10px;color:#666;display:flex;gap:12px;margin-top:2px;';
+              metaEl.innerHTML = '<span>💬 ' + ag.sessionCount + ' 个会话</span>'
+                + '<span>🕐 ' + fmtDate(ag.lastUpdated) + '</span>'
+                + (!ag.inJson ? '<span style="color:#f59e0b">⚠ 未注册</span>' : '');
+              info.appendChild(metaEl);
+
+              row.appendChild(cb);
+              row.appendChild(dot);
+              row.appendChild(info);
+
+              row.onclick = function (e) {
+                if (e.target !== cb) cb.checked = !cb.checked;
+                row.style.background = cb.checked ? '#2a1a1a' : '#252536';
+                updateFooter();
+              };
+              cb.onchange = function () {
+                row.style.background = cb.checked ? '#2a1a1a' : '#252536';
+                updateFooter();
+              };
+
+              checkboxes.push({ cb: cb, ag: ag });
+              content.appendChild(row);
+            });
+
+            // 全选逻辑
+            selAllCb.onchange = function () {
+              checkboxes.forEach(function (item) {
+                item.cb.checked = selAllCb.checked;
+                item.cb.closest ? item.cb.closest('div[style]') : null;
+              });
+              // 更新每行背景
+              content.querySelectorAll('input[type=checkbox][data-agent-id]').forEach(function (c) {
+                var r = c.parentElement;
+                if (r) r.style.background = c.checked ? '#2a1a1a' : '#252536';
+              });
+              updateFooter();
+            };
+            selAllRow.onclick = function (e) {
+              if (e.target !== selAllCb) { selAllCb.checked = !selAllCb.checked; selAllCb.onchange(); }
+            };
+
+            function updateFooter() {
+              var selected = checkboxes.filter(function (i) { return i.cb.checked; });
+              footer.innerHTML = '';
+              var countTip = document.createElement('span');
+              countTip.style.cssText = 'flex:1;font-size:12px;color:#888;';
+              countTip.textContent = '已选 ' + selected.length + ' / ' + agents.length + ' 个';
+              footer.appendChild(countTip);
+
+              var cancelBtn = document.createElement('button');
+              cancelBtn.textContent = '取消';
+              cancelBtn.style.cssText = 'padding:7px 16px;background:#3d3d5c;border:none;border-radius:5px;color:#cdd6f4;font-size:12px;font-family:monospace;cursor:pointer;';
+              cancelBtn.onclick = function () { mask.remove(); };
+              footer.appendChild(cancelBtn);
+
+              var nextBtn = document.createElement('button');
+              nextBtn.textContent = '下一步 →';
+              nextBtn.disabled = selected.length === 0;
+              nextBtn.style.cssText = 'padding:7px 18px;background:' + (selected.length > 0 ? '#ef4444' : '#5a3a3a') + ';border:none;border-radius:5px;color:#fff;font-size:12px;font-family:monospace;cursor:' + (selected.length > 0 ? 'pointer' : 'not-allowed') + ';transition:opacity 0.15s;';
+              nextBtn.onclick = function () {
+                if (selected.length > 0) showStep2(selected.map(function (i) { return i.ag; }));
+              };
+              footer.appendChild(nextBtn);
+            }
 
-      var submitBtn = document.createElement("button");
-      submitBtn.textContent = "\u7EE7\u7EED";
-      submitBtn.style.cssText = "padding:8px 16px;background:#ef4444;border:none;border-radius:4px;color:#fff;font-size:12px;font-family:monospace;cursor:pointer;";
-      body.appendChild(submitBtn);
+            updateFooter();
+          })
+          .catch(function (err) {
+            content.innerHTML = '';
+            var errEl = document.createElement('div');
+            errEl.textContent = '❌ 加载失败，请确认 mc server 已启动（端口 18800）';
+            errEl.style.cssText = 'color:#ef4444;font-size:12px;text-align:center;padding:20px 0;';
+            content.appendChild(errEl);
+          });
+      }
+
+      // ── Step 2: 确认页 ──
+      function showStep2(selected) {
+        content.innerHTML = '';
+        footer.innerHTML = '';
+        hdrTitle.textContent = '🗑 确认删除 ' + selected.length + ' 个伙伴';
+
+        var warn = document.createElement('div');
+        warn.style.cssText = 'font-size:11px;color:#ef4444;padding:8px 10px;background:rgba(239,68,68,0.12);border-radius:5px;border:1px solid rgba(239,68,68,0.3);';
+        warn.innerHTML = '⚠ 以下伙伴将被移入回收站，此操作不可在本页面撤销，请仔细确认。';
+        content.appendChild(warn);
+
+        selected.forEach(function (ag) {
+          var row = document.createElement('div');
+          row.style.cssText = 'padding:9px 12px;background:#252536;border-radius:6px;display:flex;flex-direction:column;gap:4px;';
+
+          var top = document.createElement('div');
+          top.style.cssText = 'display:flex;align-items:center;gap:8px;';
+
+          var dot = document.createElement('span');
+          dot.textContent = '●';
+          dot.style.cssText = 'font-size:10px;color:' + (ag.inJson ? '#10b981' : '#f59e0b') + ';';
+          top.appendChild(dot);
+
+          var nameEl = document.createElement('span');
+          nameEl.textContent = ag.id;
+          nameEl.style.cssText = 'font-size:13px;font-weight:bold;color:#ef4444;';
+          top.appendChild(nameEl);
+
+          if (!ag.inJson) {
+            var tag = document.createElement('span');
+            tag.textContent = '孤立';
+            tag.style.cssText = 'font-size:10px;color:#f59e0b;background:rgba(245,158,11,0.15);padding:1px 6px;border-radius:3px;';
+            top.appendChild(tag);
+          }
+          row.appendChild(top);
 
-      var cancelBtn = document.createElement("button");
-      cancelBtn.textContent = "\u53D6\u6D88";
-      cancelBtn.style.cssText = "padding:8px 16px;background:#3d3d5c;border:none;border-radius:4px;color:#cdd6f4;font-size:12px;font-family:monospace;cursor:pointer;";
-      body.appendChild(cancelBtn);
+          var meta = document.createElement('div');
+          meta.style.cssText = 'font-size:10px;color:#666;display:flex;gap:12px;padding-left:18px;';
+          meta.innerHTML = '<span>💬 ' + ag.sessionCount + ' 个会话</span>'
+            + '<span>🕐 最后更新: ' + fmtDate(ag.lastUpdated) + '</span>';
+          row.appendChild(meta);
 
-      box.appendChild(body);
-      mask.appendChild(box);
-      document.body.appendChild(mask);
+          content.appendChild(row);
+        });
+
+        // 底部
+        var backBtn = document.createElement('button');
+        backBtn.textContent = '← 返回';
+        backBtn.style.cssText = 'padding:7px 16px;background:#3d3d5c;border:none;border-radius:5px;color:#cdd6f4;font-size:12px;font-family:monospace;cursor:pointer;';
+        backBtn.onclick = function () { showStep1(); };
+        footer.appendChild(backBtn);
+
+        var spacer = document.createElement('span');
+        spacer.style.cssText = 'flex:1;';
+        footer.appendChild(spacer);
+
+        var confirmBtn = document.createElement('button');
+        confirmBtn.textContent = '确认删除 ' + selected.length + ' 个';
+        confirmBtn.style.cssText = 'padding:7px 18px;background:#ef4444;border:none;border-radius:5px;color:#fff;font-size:12px;font-family:monospace;cursor:pointer;font-weight:bold;';
+        confirmBtn.onclick = function () { showStep3(selected); };
+        footer.appendChild(confirmBtn);
+      }
+
+      // ── Step 3: 执行删除 ──
+      function showStep3(selected) {
+        content.innerHTML = '';
+        footer.innerHTML = '';
+        hdrTitle.textContent = '🗑 删除中...';
+
+        var inJson = selected.filter(function (ag) { return ag.inJson; });
+        var orphans = selected.filter(function (ag) { return !ag.inJson; });
+
+        // 进度项
+        var progressItems = {};
+        selected.forEach(function (ag) {
+          var row = document.createElement('div');
+          row.style.cssText = 'padding:8px 12px;background:#252536;border-radius:6px;display:flex;align-items:center;gap:10px;';
+
+          var status = document.createElement('span');
+          status.textContent = '⏳';
+          status.style.cssText = 'font-size:14px;flex-shrink:0;';
+
+          var name = document.createElement('span');
+          name.textContent = ag.id;
+          name.style.cssText = 'flex:1;font-size:12px;color:#cdd6f4;';
+
+          var note = document.createElement('span');
+          note.style.cssText = 'font-size:10px;color:#666;';
+          note.textContent = ag.inJson ? '已注册' : '孤立';
+
+          row.appendChild(status);
+          row.appendChild(name);
+          row.appendChild(note);
+          content.appendChild(row);
+          progressItems[ag.id] = { row: row, status: status, note: note };
+        });
 
-      input1.focus();
+        function setStatus(id, icon, color, msg) {
+          var item = progressItems[id];
+          if (!item) return;
+          item.status.textContent = icon;
+          item.row.style.background = color;
+          item.note.textContent = msg;
+        }
+
+        // ── 阶段1：已注册 agent 通过 socket.io 调 openclaw agents delete --force
+        //           （官方负责：JSON 注销 + workspace trash + agents/<id>/agent/ trash）
+        var cmdQueue = inJson.map(function (ag) { return ag.id; });
+
+        // ── 阶段1+2 文件系统清理路径（前端始终执行两个阶段）
+        //   孤立 agent：workspace + agents/<id>/ 整个目录（含 agent/ 和 sessions/）
+        //   已注册 agent：workspace + agents/<id>/ 整个目录
+        //     → openclaw 已清理 workspace 和 agent/，我们负责 sessions/ 残余（阶段2）
+        //     → workspace 路径不存在时 trashPath 会静默跳过，安全
+        var orphanPaths = [];
+        orphans.forEach(function (ag) {
+          orphanPaths.push(ag.workspace);
+          orphanPaths.push(ag.agentDir.replace(/\/agent$/, '')); // agents/<id>/ 整个目录
+        });
+        inJson.forEach(function (ag) {
+          orphanPaths.push(ag.workspace);
+          orphanPaths.push(ag.agentDir.replace(/\/agent$/, '')); // agents/<id>/ 整个目录（阶段2）
+        });
 
-      var agentId = "";
-      submitBtn.onclick = function () {
-        if (!agentId) {
-          // 第一步：输入 agent ID
-          agentId = input1.value.trim();
-          if (!agentId) {
-            input1.style.borderColor = "#ef4444";
-            input1.focus();
+        // 执行已注册 agent 删除
+        var cmdDone = 0;
+        function runNextCmd() {
+          if (cmdDone >= cmdQueue.length) {
+            runOrphanTrash();
             return;
           }
-          // 显示第二步确认
-          input1.style.display = "none";
-          hint1.style.display = "none";
-          confirmHint.style.display = "block";
-          input2.style.display = "block";
-          submitBtn.textContent = "\u786E\u8BA4\u5220\u9664";
-          input2.value = "";
-          input2.focus();
-        } else {
-          // 第二步：确认删除
-          var confirmVal = input2.value.trim();
-          if (confirmVal.toUpperCase() !== "YES") {
-            input2.style.borderColor = "#ef4444";
-            input2.focus();
+          var agId = cmdQueue[cmdDone++];
+          setStatus(agId, '🔄', '#252536', '删除中...');
+          ensureSocketIO(function () {
+            var runId = Date.now() + Math.random();
+            cmdSocket.emit('run_command', { cmd: 'openclaw agents delete ' + agId + ' --force', runId: runId });
+            // 假定 3 秒后完成（socket.io 无回调）
+            setTimeout(function () {
+              setStatus(agId, '✅', 'rgba(16,185,129,0.1)', '已删除');
+              runNextCmd();
+            }, 2500);
+          });
+        }
+
+        // 执行文件夹清理（孤立 agent + 已注册 agent 残留目录）
+        function runOrphanTrash() {
+          // 过滤掉空路径
+          var validPaths = orphanPaths.filter(function (p) { return p && p.trim(); });
+          if (validPaths.length === 0) {
+            showDone();
             return;
           }
-          submitBtn.disabled = true;
-          submitBtn.textContent = "\u6267\u884C\u4E2D...";
-          runCommand("openclaw agents delete " + agentId + " --force");
-          setTimeout(function () {
-            mask.remove();
-          }, 1000);
+          fetch(MYCLAW_API_BASE_DEL + '/api/agents/trash', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ paths: validPaths }),
+          })
+            .then(function (r) { return r.json(); })
+            .then(function (res) {
+              orphans.forEach(function (ag) {
+                var allOk = (res.results || [])
+                  .filter(function (r) { return r.path && (r.path.includes(ag.id)); })
+                  .every(function (r) { return r.ok; });
+                setStatus(ag.id, allOk ? '✅' : '⚠️', allOk ? 'rgba(16,185,129,0.1)' : 'rgba(245,158,11,0.1)', allOk ? '已移至回收站' : '部分失败');
+              });
+              showDone();
+            })
+            .catch(function () {
+              orphans.forEach(function (ag) {
+                setStatus(ag.id, '❌', 'rgba(239,68,68,0.1)', 'mc server 未启动');
+              });
+              showDone();
+            });
         }
-      };
 
-      cancelBtn.onclick = function () {
-        mask.remove();
-      };
+        function showDone() {
+          hdrTitle.textContent = '🗑 删除完成';
+          footer.innerHTML = '';
+          var doneBtn = document.createElement('button');
+          doneBtn.textContent = '关闭';
+          doneBtn.style.cssText = 'padding:7px 24px;background:#10b981;border:none;border-radius:5px;color:#fff;font-size:12px;font-family:monospace;cursor:pointer;margin:0 auto;';
+          doneBtn.onclick = function () { mask.remove(); };
+          footer.appendChild(doneBtn);
+        }
 
-      input2.onkeydown = function (e) {
-        if (e.key === "Enter") submitBtn.click();
-      };
+        runNextCmd();
+      }
+
+      showStep1();
     }
 
     box.appendChild(header);