@aiyiran/myclaw 1.0.196 → 1.0.198

package/assets/myclaw-artifacts.js

@@ -0,0 +1,396 @@
+/**
+ * ============================================================================
+ * MyClaw Artifacts — 学生作品展示
+ * ============================================================================
+ *
+ * 功能：
+ *   右下角 "🎨 作品" 按钮，点击后右侧常驻显示作品列表面板
+ *   列表展示：编号 / 标题 / 文件名 / 更新时间
+ *   点击条目弹出 iframe 预览弹框，点击遮罩或叉号关闭
+ *
+ * JSON 数据格式（.myclaw/__MY_ARTIFACTS__.json）：
+ *   {
+ *     "workspace_id": "main",
+ *     "title": "我的小游戏",
+ *     "updated_at": "2026-04-12T21:35:00+08:00",
+ *     "assets": [
+ *       { "id": "asset-001", "type": "html", "name": "射击游戏", "path": "myclaw/shooting-game.html" }
+ *     ]
+ *   }
+ *
+ * URL 拼接规则：
+ *   {origin}/cmd/api/preview?path={wsPrefix}/{asset.path}
+ *   main → workspace, 其他 → workspace-{name}
+ * ============================================================================
+ */
+(function () {
+  'use strict';
+
+  // ═══ 状态 ═══
+  var panelVisible = false;
+  var cachedData = null;
+
+  // ═══ 工具：从 URL 解析 agent 名称 ═══
+  function getAgentName() {
+    var params = new URLSearchParams(window.location.search);
+    var session = params.get('session');
+    if (session) {
+      var decoded = decodeURIComponent(session);
+      if (decoded.indexOf('agent:') === 0) {
+        var parts = decoded.split(':');
+        if (parts.length >= 2) return parts[1];
+      }
+    }
+    var agent = params.get('agent');
+    if (agent) return agent;
+    return '';
+  }
+
+  // ═══ 构建预览 URL ═══
+  function buildPreviewUrl(data, assetPath) {
+    var wsName = data.workspace_id || '';
+    var wsPrefix = wsName === 'main' ? 'workspace' : 'workspace-' + wsName;
+    return window.location.origin + '/cmd/api/preview?path=' + wsPrefix + '/' + assetPath;
+  }
+
+  // ═══ 创建按钮 ═══
+  function createArtifactsButton() {
+    if (document.querySelector('#myclaw-artifacts-btn')) return;
+
+    var btn = document.createElement('div');
+    btn.id = 'myclaw-artifacts-btn';
+    btn.style.cssText = [
+      'position: fixed',
+      'bottom: 8px',
+      'right: 140px',
+      'padding: 3px 10px',
+      'background: rgba(100, 100, 100, 0.7)',
+      'color: #fff',
+      'font-size: 11px',
+      'font-weight: bold',
+      'font-family: monospace',
+      'border-radius: 4px',
+      'z-index: 99999',
+      'user-select: none',
+      'cursor: pointer',
+      'transition: all 0.2s',
+      'letter-spacing: 0.5px',
+    ].join(';');
+    btn.textContent = '\uD83C\uDFA8 \u4F5C\u54C1';
+    btn.title = '\u67E5\u770B\u5B66\u751F\u4F5C\u54C1';
+
+    btn.onmouseenter = function () { btn.style.background = 'rgba(80, 80, 80, 0.95)'; btn.style.transform = 'scale(1.05)'; };
+    btn.onmouseleave = function () { if (!panelVisible) { btn.style.background = 'rgba(100, 100, 100, 0.7)'; } btn.style.transform = 'scale(1)'; };
+    btn.onclick = function (e) {
+      e.stopPropagation();
+      if (panelVisible) {
+        closeArtifactsPanel();
+      } else {
+        openArtifactsPanel();
+      }
+    };
+
+    document.body.appendChild(btn);
+  }
+
+  // ═══ 打开右侧列表面板 ═══
+  function openArtifactsPanel() {
+    if (document.querySelector('#myclaw-artifacts-panel')) return;
+    panelVisible = true;
+
+    var btn = document.querySelector('#myclaw-artifacts-btn');
+    if (btn) btn.style.background = 'rgba(80, 80, 80, 0.95)';
+
+    // 面板
+    var panel = document.createElement('div');
+    panel.id = 'myclaw-artifacts-panel';
+    panel.style.cssText = [
+      'position: fixed',
+      'top: 400px',
+      'right: 0',
+      'width: 380px',
+      'max-height: calc(100vh - 420px)',
+      'background: #1e1e2e',
+      'border-radius: 8px 0 0 8px',
+      'overflow: hidden',
+      'display: flex',
+      'flex-direction: column',
+      'box-shadow: -4px 0 24px rgba(0,0,0,0.3)',
+      'z-index: 99997',
+      'animation: myclaw-slide-in-right 0.2s ease',
+    ].join(';');
+
+    // 标题栏
+    var header = document.createElement('div');
+    header.style.cssText = [
+      'display: flex',
+      'align-items: center',
+      'justify-content: space-between',
+      'padding: 10px 14px',
+      'background: #2d2d3f',
+      'color: #cdd6f4',
+      'font-size: 13px',
+      'font-family: monospace',
+      'user-select: none',
+      'flex-shrink: 0',
+    ].join(';');
+    header.innerHTML = '<span>\uD83C\uDFA8 \u5B66\u751F\u4F5C\u54C1</span>';
+
+    var closeBtn = document.createElement('span');
+    closeBtn.textContent = '\u2715';
+    closeBtn.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:3px;font-size:14px;transition:background 0.15s;';
+    closeBtn.onmouseenter = function () { closeBtn.style.background = 'rgba(255,255,255,0.1)'; };
+    closeBtn.onmouseleave = function () { closeBtn.style.background = 'none'; };
+    closeBtn.onclick = function () { closeArtifactsPanel(); };
+    header.appendChild(closeBtn);
+
+    // 内容区
+    var content = document.createElement('div');
+    content.id = 'myclaw-artifacts-content';
+    content.style.cssText = [
+      'flex: 1',
+      'overflow-y: auto',
+      'padding: 8px',
+      'color: #cdd6f4',
+      'font-family: monospace',
+      'font-size: 12px',
+    ].join(';');
+
+    content.innerHTML = '<div style="text-align:center;padding:32px;color:#888;">加载中...</div>';
+
+    panel.appendChild(header);
+    panel.appendChild(content);
+    document.body.appendChild(panel);
+
+    // 请求数据
+    if (cachedData) {
+      renderArtifactsList(content, cachedData);
+    } else {
+      fetchArtifacts(content);
+    }
+  }
+
+  // ═══ 关闭右侧面板 ═══
+  function closeArtifactsPanel() {
+    var panel = document.querySelector('#myclaw-artifacts-panel');
+    if (panel) panel.remove();
+    panelVisible = false;
+
+    var btn = document.querySelector('#myclaw-artifacts-btn');
+    if (btn) btn.style.background = 'rgba(100, 100, 100, 0.7)';
+  }
+
+  // ═══ 请求数据 ═══
+  function fetchArtifacts(contentEl) {
+    var url = window.location.origin + '/cmd/api/preview?path=.myclaw/__MY_ARTIFACTS__.json';
+    fetch(url)
+      .then(function (res) {
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        return res.json();
+      })
+      .then(function (data) {
+        cachedData = data;
+        if (!data || !data.assets || !data.assets.length) {
+          contentEl.innerHTML = '<div style="text-align:center;padding:32px;color:#888;">暂无作品</div>';
+          return;
+        }
+        renderArtifactsList(contentEl, data);
+      })
+      .catch(function (err) {
+        console.error('[myclaw-artifacts] 加载失败:', err);
+        contentEl.innerHTML = '<div style="text-align:center;padding:32px;color:#ff6b6b;">加载失败，请稍后重试</div>';
+      });
+  }
+
+  // ═══ 渲染列表 ═══
+  function renderArtifactsList(container, data) {
+    container.innerHTML = '';
+
+    // 表头
+    var tableHeader = document.createElement('div');
+    tableHeader.style.cssText = [
+      'display: flex',
+      'padding: 6px 10px',
+      'background: #252536',
+      'color: #888',
+      'font-size: 11px',
+      'border-bottom: 1px solid #3d3d5c',
+      'flex-shrink: 0',
+    ].join(';');
+    tableHeader.innerHTML = [
+      '<span style="width:30px;text-align:center;">#</span>',
+      '<span style="flex:2;">标题</span>',
+      '<span style="flex:1.5;">文件名</span>',
+      '<span style="flex:1;text-align:right;">更新时间</span>',
+    ].join('');
+    container.appendChild(tableHeader);
+
+    data.assets.forEach(function (asset, idx) {
+      var row = document.createElement('div');
+      row.style.cssText = [
+        'display: flex',
+        'align-items: center',
+        'padding: 8px 10px',
+        'border-bottom: 1px solid rgba(255,255,255,0.05)',
+        'cursor: pointer',
+        'transition: background 0.15s',
+      ].join(';');
+      row.onmouseenter = function () { row.style.background = '#2d2d3f'; };
+      row.onmouseleave = function () { row.style.background = 'transparent'; };
+      row.onclick = function () { openPreviewModal(data, asset); };
+
+      // 编号
+      var num = document.createElement('span');
+      num.style.cssText = 'width:30px;text-align:center;color:#888;flex-shrink:0;';
+      num.textContent = String(idx + 1);
+
+      // 标题
+      var title = document.createElement('span');
+      title.style.cssText = 'flex:2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+      title.textContent = asset.name || '未命名';
+      title.title = asset.name || '';
+
+      // 文件名
+      var fname = document.createElement('span');
+      fname.style.cssText = 'flex:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#888;';
+      // 从 path 中提取文件名
+      var pathParts = (asset.path || '').split('/');
+      fname.textContent = pathParts[pathParts.length - 1] || '';
+      fname.title = asset.path || '';
+
+      // 更新时间
+      var time = document.createElement('span');
+      time.style.cssText = 'flex:1;text-align:right;color:#888;font-size:11px;flex-shrink:0;';
+      // 优先用 asset 自身的，fallback 到 data 级别的 updated_at
+      var updatedAt = asset.updated_at || data.updated_at || '';
+      if (updatedAt) {
+        try {
+          var d = new Date(updatedAt);
+          time.textContent = (d.getMonth() + 1) + '/' + d.getDate() + ' ' + String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
+        } catch (e) {
+          time.textContent = '';
+        }
+      }
+
+      row.appendChild(num);
+      row.appendChild(title);
+      row.appendChild(fname);
+      row.appendChild(time);
+      container.appendChild(row);
+    });
+  }
+
+  // ═══ 预览弹框（iframe） ═══
+  function openPreviewModal(data, asset) {
+    if (document.querySelector('#myclaw-artifacts-preview')) return;
+
+    var overlay = document.createElement('div');
+    overlay.id = 'myclaw-artifacts-preview';
+    overlay.style.cssText = [
+      'position: fixed',
+      'top: 0',
+      'left: 0',
+      'width: 100vw',
+      'height: 100vh',
+      'background: rgba(0, 0, 0, 0.4)',
+      'z-index: 99999',
+      '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: 90vw',
+      'height: 85vh',
+      'background: #1e1e2e',
+      'border-radius: 8px',
+      'overflow: hidden',
+      'display: flex',
+      'flex-direction: column',
+      'box-shadow: 0 8px 32px rgba(0,0,0,0.5)',
+    ].join(';');
+
+    // 标题栏
+    var header = document.createElement('div');
+    header.style.cssText = [
+      'display: flex',
+      'align-items: center',
+      'justify-content: space-between',
+      'padding: 8px 14px',
+      'background: #2d2d3f',
+      'color: #cdd6f4',
+      'font-size: 13px',
+      'font-family: monospace',
+      'user-select: none',
+      'flex-shrink: 0',
+    ].join(';');
+    header.innerHTML = '<span>\uD83C\uDFA8 ' + (asset.name || '预览') + '</span>';
+
+    var closeBtn = document.createElement('span');
+    closeBtn.textContent = '\u2715';
+    closeBtn.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:3px;font-size:14px;transition:background 0.15s;';
+    closeBtn.onmouseenter = function () { closeBtn.style.background = 'rgba(255,255,255,0.1)'; };
+    closeBtn.onmouseleave = function () { closeBtn.style.background = 'none'; };
+    closeBtn.onclick = function () { closePreviewModal(); };
+    header.appendChild(closeBtn);
+
+    // iframe
+    var iframe = document.createElement('iframe');
+    iframe.src = buildPreviewUrl(data, asset.path);
+    iframe.style.cssText = [
+      'flex: 1',
+      'width: 100%',
+      'border: none',
+      'background: #fff',
+    ].join(';');
+
+    box.appendChild(header);
+    box.appendChild(iframe);
+    overlay.appendChild(box);
+
+    // 点击遮罩关闭
+    overlay.onclick = function (e) {
+      if (e.target === overlay) closePreviewModal();
+    };
+
+    document.body.appendChild(overlay);
+  }
+
+  function closePreviewModal() {
+    var modal = document.querySelector('#myclaw-artifacts-preview');
+    if (modal) modal.remove();
+  }
+
+  // ═══ 注入样式 ═══
+  function injectStyles() {
+    if (document.querySelector('#myclaw-artifacts-styles')) return;
+    var style = document.createElement('style');
+    style.id = 'myclaw-artifacts-styles';
+    style.textContent = [
+      '@keyframes myclaw-slide-in-right {',
+      '  from { transform: translateX(100%); }',
+      '  to { transform: translateX(0); }',
+      '}',
+      '@keyframes myclaw-fade-in {',
+      '  from { opacity: 0; }',
+      '  to { opacity: 1; }',
+      '}',
+    ].join('\n');
+    document.head.appendChild(style);
+  }
+
+  // ═══ 启动 ═══
+  function init() {
+    injectStyles();
+    createArtifactsButton();
+    console.log('[myclaw-artifacts] ✅ 初始化完成');
+  }
+
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init);
+  } else {
+    init();
+  }
+})();

package/assets/myclaw-inject.js

@@ -96,7 +96,6 @@
 
   // ═══ 1.2 右下角 CMD 按钮（弹框 iframe） ═══
   var cmdOpen = false;
-  var artifactsOpen = false;
 
   function createCmdButton() {
     if (document.querySelector("#myclaw-cmd-btn")) return;
@@ -229,225 +228,6 @@
     if (btn) btn.style.background = "rgba(59, 130, 246, 0.85)";
   }
 
-  // ═══ 1.3 学生作品展示 ═══
-
-  function getAgentName() {
-    var params = new URLSearchParams(window.location.search);
-    // 优先从 session 参数解析: agent:main:feishu:... → main
-    var session = params.get("session");
-    if (session) {
-      var decoded = decodeURIComponent(session);
-      if (decoded.indexOf("agent:") === 0) {
-        var parts = decoded.split(":");
-        if (parts.length >= 2) return parts[1];
-      }
-    }
-    // fallback: agent 参数
-    var agent = params.get("agent");
-    if (agent) return agent;
-    return "";
-  }
-
-  function createArtifactsButton() {
-    if (document.querySelector("#myclaw-artifacts-btn")) return;
-
-    var btn = document.createElement("div");
-    btn.id = "myclaw-artifacts-btn";
-    btn.style.cssText = [
-      "position: fixed",
-      "bottom: 8px",
-      "right: 140px",
-      "padding: 3px 10px",
-      "background: rgba(100, 100, 100, 0.7)",
-      "color: #fff",
-      "font-size: 11px",
-      "font-weight: bold",
-      "font-family: monospace",
-      "border-radius: 4px",
-      "z-index: 99999",
-      "user-select: none",
-      "cursor: pointer",
-      "transition: all 0.2s",
-      "letter-spacing: 0.5px",
-    ].join(";");
-    btn.textContent = "\uD83C\uDFA8 \u4F5C\u54C1";
-    btn.title = "\u67E5\u770B\u5B66\u751F\u4F5C\u54C1";
-
-    btn.onmouseenter = function () { btn.style.background = "rgba(80, 80, 80, 0.95)"; btn.style.transform = "scale(1.05)"; };
-    btn.onmouseleave = function () { if (!artifactsOpen) { btn.style.background = "rgba(100, 100, 100, 0.7)"; } btn.style.transform = "scale(1)"; };
-    btn.onclick = function (e) {
-      e.stopPropagation();
-      if (artifactsOpen) {
-        closeArtifactsPanel();
-      } else {
-        openArtifactsPanel();
-      }
-    };
-
-    document.body.appendChild(btn);
-  }
-
-  function openArtifactsPanel() {
-    if (document.querySelector("#myclaw-artifacts-modal")) return;
-    artifactsOpen = true;
-
-    // 按钮 active 态
-    var btn = document.querySelector("#myclaw-artifacts-btn");
-    if (btn) btn.style.background = "rgba(80, 80, 80, 0.95)";
-
-    // 遮罩
-    var overlay = document.createElement("div");
-    overlay.id = "myclaw-artifacts-modal";
-    overlay.style.cssText = [
-      "position: fixed",
-      "top: 0",
-      "left: 0",
-      "width: 100vw",
-      "height: 100vh",
-      "background: rgba(0, 0, 0, 0.3)",
-      "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: 480px",
-      "max-height: 70vh",
-      "background: #1e1e2e",
-      "border-radius: 8px",
-      "overflow: hidden",
-      "display: flex",
-      "flex-direction: column",
-      "box-shadow: 0 8px 32px rgba(0,0,0,0.4)",
-    ].join(";");
-
-    // 标题栏
-    var header = document.createElement("div");
-    header.style.cssText = [
-      "display: flex",
-      "align-items: center",
-      "justify-content: space-between",
-      "padding: 10px 16px",
-      "background: #2d2d3f",
-      "color: #cdd6f4",
-      "font-size: 14px",
-      "font-family: monospace",
-      "user-select: none",
-    ].join(";");
-    header.innerHTML = '<span>\uD83C\uDFA8 \u5B66\u751F\u4F5C\u54C1</span>';
-
-    var closeBtn = document.createElement("span");
-    closeBtn.textContent = "\u2715";
-    closeBtn.style.cssText = "cursor:pointer;padding:2px 6px;border-radius:3px;font-size:14px;transition:background 0.15s;";
-    closeBtn.onmouseenter = function () { closeBtn.style.background = "rgba(255,255,255,0.1)"; };
-    closeBtn.onmouseleave = function () { closeBtn.style.background = "none"; };
-    closeBtn.onclick = function () { closeArtifactsPanel(); };
-    header.appendChild(closeBtn);
-
-    // 内容区
-    var content = document.createElement("div");
-    content.id = "myclaw-artifacts-content";
-    content.style.cssText = [
-      "flex: 1",
-      "overflow-y: auto",
-      "padding: 16px",
-      "color: #cdd6f4",
-      "font-family: monospace",
-      "font-size: 13px",
-    ].join(";");
-
-    // 加载中
-    content.innerHTML = '<div style="text-align:center;padding:32px;color:#888;">加载中...</div>';
-
-    box.appendChild(header);
-    box.appendChild(content);
-    overlay.appendChild(box);
-
-    // 点击遮罩关闭
-    overlay.onclick = function (e) {
-      if (e.target === overlay) closeArtifactsPanel();
-    };
-
-    document.body.appendChild(overlay);
-
-    // 异步请求数据
-    fetchArtifacts(content);
-  }
-
-  function fetchArtifacts(contentEl) {
-    var url = window.location.origin + "/cmd/api/preview?path=.myclaw/__MY_ARTIFACTS__.json";
-    fetch(url)
-      .then(function (res) {
-        if (!res.ok) throw new Error("HTTP " + res.status);
-        return res.json();
-      })
-      .then(function (data) {
-        if (!data || !data.assets || !data.assets.length) {
-          contentEl.innerHTML = '<div style="text-align:center;padding:32px;color:#888;">暂无作品</div>';
-          return;
-        }
-        renderArtifactsList(contentEl, data);
-      })
-      .catch(function (err) {
-        console.error("[myclaw-artifacts] 加载失败:", err);
-        contentEl.innerHTML = '<div style="text-align:center;padding:32px;color:#ff6b6b;">加载失败，请稍后重试</div>';
-      });
-  }
-
-  function renderArtifactsList(container, data) {
-    container.innerHTML = "";
-    // 拼接: base + workspace前缀 + / + 资源路径
-    // main → workspace, 其他 → workspace-{name}
-    var wsName = data.workspace_id || "";
-    var wsPrefix = wsName === "main" ? "workspace" : "workspace-" + wsName;
-    var baseUrl = window.location.origin + "/cmd/api/preview?path=" + wsPrefix + "/";
-
-    data.assets.forEach(function (asset) {
-      var card = document.createElement("a");
-      card.href = baseUrl + asset.path;
-      card.target = "_blank";
-      card.rel = "noopener noreferrer";
-      card.style.cssText = [
-        "display: block",
-        "padding: 12px 14px",
-        "margin-bottom: 10px",
-        "background: #2d2d3f",
-        "border-radius: 6px",
-        "color: #cdd6f4",
-        "text-decoration: none",
-        "transition: background 0.15s",
-        "cursor: pointer",
-      ].join(";");
-      card.onmouseenter = function () { card.style.background = "#3d3d5c"; };
-      card.onmouseleave = function () { card.style.background = "#2d2d3f"; };
-
-      var title = document.createElement("div");
-      title.style.cssText = "font-size: 14px; font-weight: bold; margin-bottom: 4px;";
-      title.textContent = asset.name || "未命名作品";
-
-      var meta = document.createElement("div");
-      meta.style.cssText = "font-size: 11px; color: #888;";
-      meta.textContent = asset.type ? asset.type.toUpperCase() : "";
-
-      card.appendChild(title);
-      card.appendChild(meta);
-      container.appendChild(card);
-    });
-  }
-
-  function closeArtifactsPanel() {
-    var modal = document.querySelector("#myclaw-artifacts-modal");
-    if (modal) modal.remove();
-    artifactsOpen = false;
-
-    var btn = document.querySelector("#myclaw-artifacts-btn");
-    if (btn) btn.style.background = "rgba(100, 100, 100, 0.7)";
-  }
-
   // \u6D4B\u8BD5\u9EA6\u514B\u98CE\u51FD\u6570
   function testMicrophone() {
     console.log("[myclaw] \u5F00\u59CB\u6D4B\u8BD5\u9EA6\u514B\u98CE...");
@@ -806,7 +586,6 @@
     createVersionBar();
     createDocButton();
     createCmdButton();
-    createArtifactsButton();
     injectStyles();
 
     // 初始化 VoiceInput SDK

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aiyiran/myclaw",
-  "version": "1.0.196",
+  "version": "1.0.198",
   "description": "",
   "main": "index.js",
   "bin": {

package/patch.js

@@ -26,6 +26,7 @@ const INJECT_FILENAME = 'myclaw-inject.js';
 const VOICE_SDK_FILENAME = 'voice-input.js';
 const VOICE_OUTPUT_SDK_FILENAME = 'voice-output.js';
 const TTS_INJECT_FILENAME = 'myclaw-tts.js';
+const ARTIFACTS_INJECT_FILENAME = 'myclaw-artifacts.js';
 const BACKUP_SUFFIX = '.myclaw-backup';
 
 /**
@@ -115,6 +116,8 @@ function patch() {
   const voiceOutputSdkDest = path.join(uiDir, VOICE_OUTPUT_SDK_FILENAME);
   const ttsInjectSrc = path.join(__dirname, 'assets', TTS_INJECT_FILENAME);
   const ttsInjectDest = path.join(uiDir, TTS_INJECT_FILENAME);
+  const artifactsInjectSrc = path.join(__dirname, 'assets', ARTIFACTS_INJECT_FILENAME);
+  const artifactsInjectDest = path.join(uiDir, ARTIFACTS_INJECT_FILENAME);
   const version = getMyclawVersion();
 
   console.log('[myclaw-patch] → control-ui: ' + uiDir);
@@ -166,6 +169,14 @@ function patch() {
     console.error('[myclaw-patch] ⚠ TTS 注入脚本复制失败 (非致命): ' + err.message);
   }
 
+  // 5.5 复制 Artifacts 注入脚本
+  try {
+    fs.copyFileSync(artifactsInjectSrc, artifactsInjectDest);
+    console.log('[myclaw-patch] ✅ Artifacts 注入脚本已复制');
+  } catch (err) {
+    console.error('[myclaw-patch] ⚠ Artifacts 注入脚本复制失败 (非致命): ' + err.message);
+  }
+
   // 6. Patch index.html（幂等）
   try {
     let html = fs.readFileSync(indexPath, 'utf8');
@@ -183,6 +194,7 @@ function patch() {
       '<script src="./' + VOICE_OUTPUT_SDK_FILENAME + '"></script>',
       '<script src="./' + VOICE_SDK_FILENAME + '"></script>',
       '<script src="./' + TTS_INJECT_FILENAME + '"></script>',
+      '<script src="./' + ARTIFACTS_INJECT_FILENAME + '"></script>',
       '<script src="./' + INJECT_FILENAME + '"></script>',
       '',
     ].join('\n');
@@ -266,6 +278,7 @@ function unpatch() {
   const voiceSdkDest = path.join(uiDir, VOICE_SDK_FILENAME);
   const voiceOutputSdkDest = path.join(uiDir, VOICE_OUTPUT_SDK_FILENAME);
   const ttsInjectDest = path.join(uiDir, TTS_INJECT_FILENAME);
+  const artifactsInjectDest = path.join(uiDir, ARTIFACTS_INJECT_FILENAME);
 
   // 恢复备份
   if (fs.existsSync(backupPath)) {
@@ -298,6 +311,12 @@ function unpatch() {
     console.log('[myclaw-patch] ✅ TTS 注入脚本已删除');
   }
 
+  // 删除 Artifacts 注入脚本
+  if (fs.existsSync(artifactsInjectDest)) {
+    fs.unlinkSync(artifactsInjectDest);
+    console.log('[myclaw-patch] ✅ Artifacts 注入脚本已删除');
+  }
+
   // 恢复 gateway-cli-*.js 的 Permissions-Policy
   try {
     const distParent = path.resolve(uiDir, '..');