@aiyiran/myclaw 1.1.24 → 1.1.26

package/assets/myclaw-artifacts.js

@@ -31,9 +31,10 @@
   var cachedData = null;
   var pollTimer = null;
   var lastKnownClawName = null; // 本地环境下从 API 获取，remote 环境每次从 hostname 实时派生
-  var MYCLAW_API_PORT = 8080;
+  var _preloadCache = {}; // url → Image 对象，防止重复预加载
+  var MYCLAW_API_PORT = 18800;
   // 远程环境（公网域名）：nginx 已将 /sync 反代到 127.0.0.1:8080，直接同域访问
-  // 本地环境：直接访问 127.0.0.1:8080
+  // 本地环境：直接访问 127.0.0.1:18800
   var MYCLAW_API_BASE = (function () {
     var h = window.location.hostname;
     var isRemote = h === 'claw.yiranlaoshi.com' || h.endsWith('.kekouen.cn');
@@ -198,47 +199,43 @@
       'user-select: none',
       'flex-shrink: 0',
     ].join(';');
-    header.innerHTML = '<span>\uD83C\uDFA8 \u5B66\u751F\u4F5C\u54C1</span>';
+    var titleSpan = document.createElement('span');
+    titleSpan.textContent = '🎨 学生作品';
+    titleSpan.style.cssText = 'cursor:pointer;border-radius:3px;padding:1px 4px;transition:background 0.15s;';
+    titleSpan.title = '查看统计信息';
+    titleSpan.onmouseenter = function () { titleSpan.style.background = 'rgba(255,255,255,0.1)'; };
+    titleSpan.onmouseleave = function () { titleSpan.style.background = 'none'; };
+    titleSpan.onclick = function () { openStatsModal(); };
+    header.appendChild(titleSpan);
+
+    // 搜索框（或获取已存在的搜索框）
+    var searchBoxHeader = document.querySelector('#myclaw-search-box');
+    if (!searchBoxHeader) {
+      searchBoxHeader = document.createElement('input');
+      searchBoxHeader.id = 'myclaw-search-box';
+      searchBoxHeader.placeholder = '搜索...';
+      searchBoxHeader.style.cssText = 'max-width:120px;height:22px;padding:2px 8px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:4px;color:#cdd6f4;font-size:11px;font-family:monospace;box-sizing:border-box;';
+      searchBoxHeader.onkeyup = function() {
+        applySearch();
+      };
+      header.appendChild(searchBoxHeader);
+    }
+
+    // 搜索过滤函数
+    window.applySearch = function() {
+      var searchBox = document.querySelector('#myclaw-search-box');
+      if (!searchBox || !searchBox.value) return;
+      var keyword = searchBox.value.toLowerCase();
+      var items = document.querySelectorAll('[data-artifact-item]');
+      items.forEach(function(item) {
+        var fileName = item.getAttribute('data-artifact-name') || '';
+        item.style.display = (keyword === '' || fileName.toLowerCase().indexOf(keyword) !== -1) ? 'flex' : 'none';
+      });
+    };
 
     var headerRight = document.createElement('span');
     headerRight.style.cssText = 'display:flex;align-items:center;gap:10px;';
 
-    // 刷新按钮（全量同步）
-    var resyncBtn = document.createElement('span');
-    resyncBtn.textContent = '\uD83D\uDD04';
-    resyncBtn.title = '\u5237\u65B0\u540C\u6B65';
-    resyncBtn.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:3px;font-size:13px;transition:all 0.15s;';
-    resyncBtn.onmouseenter = function () { resyncBtn.style.background = 'rgba(255,255,255,0.1)'; };
-    resyncBtn.onmouseleave = function () { if (!resyncBtn._syncing) resyncBtn.style.background = 'none'; };
-    resyncBtn.onclick = function () {
-      if (resyncBtn._syncing) return;
-      resyncBtn._syncing = true;
-      resyncBtn.style.animation = 'myclaw-spin 1s linear infinite';
-      resyncBtn.style.background = 'rgba(255,255,255,0.1)';
-
-      var wsPrefix = getWorkspaceId();
-      fetch(MYCLAW_API_BASE + '/api/resync?workspace=' + encodeURIComponent(wsPrefix), { method: 'POST' })
-        .then(function (res) { return res.json(); })
-        .then(function (data) {
-          if (data.ok) {
-            console.log('[myclaw-artifacts] \u2705 \u540C\u6B65\u5B8C\u6210');
-            var contentEl = document.querySelector('#myclaw-artifacts-content');
-            if (contentEl) fetchArtifacts(contentEl);
-          } else {
-            console.error('[myclaw-artifacts] \u274C \u540C\u6B65\u5931\u8D25:', data.error);
-          }
-        })
-        .catch(function (err) {
-          console.error('[myclaw-artifacts] \u274C \u540C\u6B65\u8BF7\u6C42\u5931\u8D25:', err.message);
-        })
-        .then(function () {
-          resyncBtn._syncing = false;
-          resyncBtn.style.animation = '';
-          resyncBtn.style.background = 'none';
-        });
-    };
-    headerRight.appendChild(resyncBtn);
-
     // 展示间跳转（发布按钮左边）
     var showcaseLink = document.createElement('a');
     var _scEnv = detectEnvironment();
@@ -283,31 +280,36 @@
 
     content.innerHTML = '<div style="text-align:center;padding:32px;color:#888;">加载中...</div>';
 
-    // Fork 按钮底部栏
+    // 底部栏：历史 + Fork
     var panelFooter = document.createElement('div');
-    panelFooter.style.cssText = [
-      'padding: 8px 10px',
-      'background: #252536',
-      'border-top: 1px solid #3d3d5c',
-      'flex-shrink: 0',
-    ].join(';');
+    panelFooter.style.cssText = 'padding:8px 10px;background:#252536;border-top:1px solid #3d3d5c;flex-shrink:0;display:flex;gap:8px;';
+
+    var footerBtnStyle = 'cursor:pointer;flex:1;padding:6px 10px;border-radius:4px;font-size:12px;font-family:monospace;color:#cdd6f4;background:rgba(255,255,255,0.06);text-align:center;transition:background 0.15s;';
+
+    var historyFooterBtn = document.createElement('div');
+    historyFooterBtn.textContent = '🕐 历史版本';
+    historyFooterBtn.style.cssText = footerBtnStyle;
+    historyFooterBtn.onmouseenter = function () { historyFooterBtn.style.background = 'rgba(255,255,255,0.14)'; };
+    historyFooterBtn.onmouseleave = function () { historyFooterBtn.style.background = 'rgba(255,255,255,0.06)'; };
+    historyFooterBtn.onclick = function () { openHistoryModal(); };
+
     var forkPanelBtn = document.createElement('div');
-    forkPanelBtn.textContent = '\uD83D\uDD00 fork\u4ED6\u4EBA\u4F5C\u54C1';
-    forkPanelBtn.style.cssText = [
-      'cursor: pointer',
-      'padding: 6px 10px',
-      'border-radius: 4px',
-      'font-size: 12px',
-      'font-family: monospace',
-      'color: #cdd6f4',
-      'background: rgba(255,255,255,0.06)',
-      'text-align: center',
-      'transition: background 0.15s',
-    ].join(';');
+    forkPanelBtn.textContent = '🔀 获取作品';
+    forkPanelBtn.style.cssText = footerBtnStyle;
     forkPanelBtn.onmouseenter = function () { forkPanelBtn.style.background = 'rgba(255,255,255,0.14)'; };
     forkPanelBtn.onmouseleave = function () { forkPanelBtn.style.background = 'rgba(255,255,255,0.06)'; };
     forkPanelBtn.onclick = function () { openForkModal(); };
+
+    var templateFooterBtn = document.createElement('div');
+    templateFooterBtn.textContent = '📋 模板';
+    templateFooterBtn.style.cssText = footerBtnStyle;
+    templateFooterBtn.onmouseenter = function () { templateFooterBtn.style.background = 'rgba(255,255,255,0.14)'; };
+    templateFooterBtn.onmouseleave = function () { templateFooterBtn.style.background = 'rgba(255,255,255,0.06)'; };
+    templateFooterBtn.onclick = function () { openTemplateModal(); };
+
+    panelFooter.appendChild(historyFooterBtn);
     panelFooter.appendChild(forkPanelBtn);
+    panelFooter.appendChild(templateFooterBtn);
 
     panel.appendChild(header);
     panel.appendChild(content);
@@ -360,6 +362,25 @@
     });
   }
 
+  function autoPreloadImages(data) {
+    if (!data || !data.assets) return;
+    data.assets.forEach(function (asset) {
+      if (!isImageAsset(asset)) return;
+      var url = buildPreviewUrl(data, asset.path);
+      if (!url || _preloadCache[url]) return;
+      var pre = new Image();
+      pre.onload = function () {
+        console.log('[preload] ✓ ' + asset.path);
+      };
+      pre.onerror = function () {
+        console.warn('[preload] ✗ ' + asset.path);
+        delete _preloadCache[url]; // 失败的下次可以重试
+      };
+      pre.src = url;
+      _preloadCache[url] = pre; // 占位，防止并发重复触发
+    });
+  }
+
   function fetchArtifacts(contentEl) {
     var wsPrefix = getWorkspaceId();
 
@@ -371,6 +392,7 @@
       })
       .then(function (data) {
         cachedData = data;
+        autoPreloadImages(data);
         if (!contentEl) return;
         if (!data || !data.assets || !data.assets.length) {
           contentEl.innerHTML = '<div style="text-align:center;padding:32px;color:#888;">暂无作品</div>';
@@ -413,12 +435,14 @@
       'flex-shrink: 0',
     ].join(';');
     tableHeader.innerHTML = [
-      '<span style="flex-shrink:0;width:44px;"></span>',
-      '<span style="flex-shrink:0;width:70px;">更新时间</span>',
+      '<span style="flex-shrink:0;width:52px;"></span>',
       '<span style="flex:1;">文件名</span>',
     ].join('');
     container.appendChild(tableHeader);
 
+    // 列表内容容器（可滚动）
+    var listContent = document.createElement('div');
+
     // 按 updated_at 从新到旧排序
     var sorted = data.assets.slice().sort(function (a, b) {
       var ta = a.updated_at || '';
@@ -426,6 +450,18 @@
       return tb.localeCompare(ta);
     });
 
+    // 黑名单：隐藏以下文件（__XXX__ 格式的内部文件），豁免 student-view.html
+    var ARTIFACT_BLACKLIST = [
+      '__demo__.html',
+      '__student__.json',
+      '__teacher__.json',
+      '__teacher-view__.html',
+    ];
+    sorted = sorted.filter(function (asset) {
+      var basename = (asset.path || asset.name || '').split('/').pop();
+      return ARTIFACT_BLACKLIST.indexOf(basename) === -1;
+    });
+
     sorted.forEach(function (asset, idx) {
       // 状态判断：基于 last_open 时间戳
       // - 无 last_open → [最新]（从未点开过）
@@ -438,9 +474,11 @@
       var isUpdated = lastOpen && assetUpdated && new Date(assetUpdated) > new Date(lastOpen);
 
       var row = document.createElement('div');
+      row.setAttribute('data-artifact-item', '1');
+      row.setAttribute('data-artifact-name', asset.path || asset.name || '');
       row.style.cssText = [
         'display: flex',
-        'align-items: center',
+        'align-items: flex-start',
         'padding: 8px 10px',
         'border-bottom: 1px solid rgba(255,255,255,0.05)',
         'cursor: pointer',
@@ -451,9 +489,9 @@
       row.onclick = function () {
         // 记录点开时间
         localStorage.setItem(lastOpenKey, new Date().toISOString());
-        // 复制文件名到剪贴板
-        var fileName = pathParts[pathParts.length - 1] || asset.name || '未命名';
-        navigator.clipboard.writeText(fileName).then(function () {
+        // 复制路径到剪贴板
+        var displayName = asset.path || asset.name || '未命名';
+        navigator.clipboard.writeText(displayName).then(function () {
           var orig = nameSpan.textContent;
           nameSpan.textContent = '✓ 已复制';
           nameSpan.style.color = '#10b981';
@@ -465,26 +503,21 @@
         openPreviewModal(data, asset);
       };
 
-      // 更新时间
-      var time = document.createElement('span');
-      time.style.cssText = 'flex-shrink:0;width:70px;color:#888;font-size:11px;';
-      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 = '';
-        }
-      }
+      // 左侧列：上下结构，固定宽度
+      var leftCol = document.createElement('div');
+      leftCol.style.cssText = 'flex-shrink:0;width:80px;display:flex;flex-direction:column;gap:4px;margin-right:8px;';
+
+      // 上部：路径按钮（左） + 标签（右）
+      var topRow = document.createElement('div');
+      topRow.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:4px;';
 
-      // 复制相对路径按钮（最左侧）
+      // 路径按钮（原"复制"）
       var copyPathBtn = document.createElement('button');
-      copyPathBtn.textContent = '复制';
+      copyPathBtn.textContent = '路径';
       copyPathBtn.style.cssText = [
         'flex-shrink: 0',
         'width: 44px',
-        'height: 28px',
+        'height: 24px',
         'background: #2d2d4a',
         'color: #a78bfa',
         'border: 1px solid #4a4a7a',
@@ -504,38 +537,92 @@
           copyPathBtn.style.color = '#10b981';
           copyPathBtn.style.borderColor = '#10b981';
           setTimeout(function () {
-            copyPathBtn.textContent = '复制';
+            copyPathBtn.textContent = '路径';
             copyPathBtn.style.color = '#a78bfa';
             copyPathBtn.style.borderColor = '#4a4a7a';
           }, 1500);
         });
       };
 
-      // 文件名（从 path 提取）+ 标记
-      var fname = document.createElement('span');
-      fname.style.cssText = 'flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:6px;';
-      var pathParts = (asset.path || '').split('/');
-      var nameSpan = document.createElement('span');
-      nameSpan.textContent = pathParts[pathParts.length - 1] || asset.name || '未命名';
-      nameSpan.title = asset.path || '';
+      // 状态 badge
+      var badge = document.createElement('span');
       if (isLatest) {
-        var badge = document.createElement('span');
-        badge.style.cssText = 'color:#ff4444;font-size:10px;font-weight:bold;flex-shrink:0;';
+        badge.style.cssText = 'color:#ff4444;font-size:9px;font-weight:bold;';
         badge.textContent = '[最新]';
-        fname.appendChild(badge);
       } else if (isUpdated) {
-        var badge = document.createElement('span');
-        badge.style.cssText = 'color:#10b981;font-size:10px;font-weight:bold;flex-shrink:0;';
-        badge.textContent = '[有更新]';
-        fname.appendChild(badge);
+        badge.style.cssText = 'color:#10b981;font-size:9px;font-weight:bold;';
+        badge.textContent = '[更新]';
+      } else {
+        badge.style.display = 'none';
+      }
+
+      topRow.appendChild(copyPathBtn);
+      topRow.appendChild(badge);
+      leftCol.appendChild(topRow);
+
+      // 下部：时间 + 预加载按钮
+      var bottomRow = document.createElement('div');
+      bottomRow.style.cssText = 'display:flex;align-items:center;justify-content:center;gap:3px;';
+
+      // 更新时间（可点击 → 打开该文件的历史版本）
+      var time = document.createElement('span');
+      time.style.cssText = 'color:#888;font-size:10px;cursor:pointer;border-radius:3px;padding:1px 2px;transition:background 0.15s,color 0.15s;white-space:nowrap;';
+      time.title = '查看历史版本';
+      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 = '';
+        }
+      }
+      time.onmouseenter = function () { time.style.background = 'rgba(100,149,237,0.2)'; time.style.color = '#90c2ff'; };
+      time.onmouseleave = function () { time.style.background = ''; time.style.color = '#888'; };
+      time.onclick = (function (path) {
+        return function (e) {
+          e.stopPropagation();
+          openHistoryModal(path);
+        };
+      }(asset.path || ''));
+
+      bottomRow.appendChild(time);
+      leftCol.appendChild(bottomRow);
+
+      // 文件显示（上下两行：路径+文件名）
+      var fname = document.createElement('div');
+      fname.style.cssText = 'flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;overflow:hidden;';
+
+      var fullPath = asset.path || asset.name || '未命名';
+      var lastSlash = fullPath.lastIndexOf('/');
+      var dirPart = lastSlash > 0 ? fullPath.substring(0, lastSlash + 1) : '';
+      var namePart = lastSlash > 0 ? fullPath.substring(lastSlash + 1) : fullPath;
+
+      // 上行：目录路径（灰色极小字，单行，不换行）
+      if (dirPart) {
+        var dirSpan = document.createElement('span');
+        dirSpan.textContent = dirPart;
+        dirSpan.title = fullPath;
+        dirSpan.style.cssText = 'color:#666;font-size:9px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+        fname.appendChild(dirSpan);
       }
+
+      // 下行：文件名（大字体，单行，不换行）
+      var nameSpan = document.createElement('span');
+      nameSpan.textContent = namePart;
+      nameSpan.title = fullPath;
+      nameSpan.style.cssText = 'font-size:13px;font-weight:500;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
       fname.appendChild(nameSpan);
 
-      row.appendChild(copyPathBtn);
-      row.appendChild(time);
+      row.appendChild(leftCol);
       row.appendChild(fname);
-      container.appendChild(row);
+      listContent.appendChild(row);
     });
+
+    container.appendChild(listContent);
+
+    // 重新应用搜索过滤（保留搜索框的值）
+    if (window.applySearch) applySearch();
   }
 
   // ═══ 预览弹框 ═══
@@ -657,13 +744,7 @@
         'background: #252536',
       ].join(';');
 
-      // 加载中提示
-      var hint = document.createElement('div');
-      hint.textContent = '\u52A0\u8F7D\u4E2D...';
-      hint.style.cssText = 'color:#666;font-size:13px;font-family:monospace;position:absolute;';
-      imgArea.appendChild(hint);
-
-      // img 在占位区内加载，opacity 0 → 1
+      // img 直接渲染，浏览器自然从上往下加载
       var img = document.createElement('img');
       img.src = previewUrl;
       img.alt = asset.name || asset.path;
@@ -673,17 +754,15 @@
         'width: auto',
         'height: auto',
         'object-fit: contain',
-        'opacity: 0',
-        'transition: opacity 0.25s ease',
         'position: relative',
         'z-index: 1',
       ].join(';');
-      img.onload = function () {
-        img.style.opacity = '1';
-        hint.style.display = 'none';
-      };
       img.onerror = function () {
-        hint.textContent = '\u52A0\u8F7D\u5931\u8D25';
+        img.style.display = 'none';
+        var errMsg = document.createElement('div');
+        errMsg.textContent = '加载失败';
+        errMsg.style.cssText = 'color:#666;font-size:13px;font-family:monospace;';
+        imgArea.appendChild(errMsg);
       };
 
       imgArea.appendChild(img);
@@ -706,7 +785,6 @@
       box.appendChild(makeHeader('\uD83C\uDFA8 ' + (asset.name || '预览')));
 
       var iframe = document.createElement('iframe');
-      iframe.src = previewUrl + '?t=' + Date.now();
       iframe.style.cssText = [
         'flex: 1',
         'width: 100%',
@@ -714,6 +792,15 @@
         'background: #fff',
       ].join(';');
 
+      // 文本类文件走本地 server（已有 charset=utf-8），避免 CDN 无 charset 导致中文乱码
+      var assetExt = (asset.path || '').split('.').pop().toLowerCase();
+      var TEXT_EXTS = ['md', 'txt', 'py', 'js', 'ts', 'jsx', 'tsx', 'css', 'json', 'yaml', 'yml', 'sh', 'xml', 'ini', 'toml', 'env', 'vue', 'csv'];
+      if (TEXT_EXTS.indexOf(assetExt) !== -1) {
+        iframe.src = MYCLAW_API_BASE + '/api/file?path=' + encodeURIComponent(getWorkspaceId() + '/' + asset.path) + '&t=' + Date.now();
+      } else {
+        iframe.src = previewUrl + '?t=' + Date.now();
+      }
+
       box.appendChild(iframe);
       overlay.appendChild(box);
       document.body.appendChild(overlay);
@@ -729,6 +816,574 @@
     if (modal) modal.remove();
   }
 
+  // ═══ 历史记录弹框 ═══
+  function openHistoryModal(defaultPath) {
+    if (document.querySelector('#myclaw-history-modal')) return;
+
+    var ws = getWorkspaceId();
+    var url = MYCLAW_API_BASE + '/api/history?workspace=' + encodeURIComponent(ws);
+
+    // 遮罩
+    var overlay = document.createElement('div');
+    overlay.id = 'myclaw-history-modal';
+    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:99999;display:flex;align-items:center;justify-content:center;font-family:monospace;';
+    overlay.onclick = function (e) { if (e.target === overlay) overlay.remove(); };
+
+    // 弹框主体：上下结构，尽量占满全屏
+    var box = document.createElement('div');
+    box.style.cssText = 'background:#1e1e2e;border:1px solid rgba(255,255,255,0.1);border-radius:6px;width:calc(100vw - 24px);height:calc(100vh - 24px);display:flex;flex-direction:column;color:#cdd6f4;overflow:hidden;';
+
+    // 弹框头部
+    var head = document.createElement('div');
+    head.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,0.1);flex-shrink:0;';
+    var headTitle = document.createElement('span');
+    headTitle.textContent = '🕐 历史版本';
+    headTitle.style.cssText = 'font-size:14px;font-weight:bold;';
+    var headClose = document.createElement('span');
+    headClose.textContent = '✕';
+    headClose.style.cssText = 'cursor:pointer;font-size:14px;padding:2px 6px;border-radius:3px;';
+    headClose.onclick = function () { overlay.remove(); };
+    head.appendChild(headTitle);
+    head.appendChild(headClose);
+    box.appendChild(head);
+
+    // 文件筛选条（顶部 header 下方）
+    var filterBar = document.createElement('div');
+    filterBar.style.cssText = 'padding:6px 10px;border-bottom:1px solid rgba(255,255,255,0.07);display:flex;flex-wrap:wrap;gap:4px;flex-shrink:0;align-items:center;overflow-x:auto;';
+    box.appendChild(filterBar);
+
+    // 左右主体区域
+    var mainArea = document.createElement('div');
+    mainArea.style.cssText = 'flex:1;display:flex;overflow:hidden;';
+
+    // 左栏：版本列表（固定高度，固定行数）
+    var leftPane = document.createElement('div');
+    leftPane.style.cssText = 'width:260px;height:380px;flex-shrink:0;overflow-y:auto;overflow-x:auto;border-right:1px solid rgba(255,255,255,0.07);padding:8px;display:flex;flex-direction:column;gap:4px;';
+
+    // 右栏：iframe 预览
+    var rightPane = document.createElement('div');
+    rightPane.style.cssText = 'flex:1;display:flex;flex-direction:column;overflow:hidden;background:#111;';
+
+    // 右栏顶部：当前预览的版本信息
+    var previewHeader = document.createElement('div');
+    previewHeader.style.cssText = 'padding:6px 14px;font-size:11px;color:rgba(205,214,244,0.4);border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;height:30px;display:flex;align-items:center;';
+    previewHeader.textContent = '← 点击左侧版本预览';
+
+    // HTML iframe
+    var previewIframe = document.createElement('iframe');
+    previewIframe.style.cssText = 'flex:1;border:none;background:#fff;display:none;';
+
+    // 图片预览
+    var previewImg = document.createElement('div');
+    previewImg.style.cssText = 'flex:1;display:none;align-items:center;justify-content:center;overflow:auto;padding:16px;background:#111;';
+    var previewImgEl = document.createElement('img');
+    previewImgEl.style.cssText = 'max-width:100%;max-height:100%;object-fit:contain;border-radius:4px;';
+    previewImg.appendChild(previewImgEl);
+
+    // 代码 / 文本预览
+    var previewText = document.createElement('pre');
+    previewText.style.cssText = 'flex:1;margin:0;padding:16px;font-size:12px;line-height:1.6;white-space:pre-wrap;word-break:break-all;color:#cdd6f4;overflow:auto;display:none;';
+
+    // 不支持预览的占位
+    var previewUnsupported = document.createElement('div');
+    previewUnsupported.style.cssText = 'flex:1;display:none;align-items:center;justify-content:center;color:rgba(205,214,244,0.3);font-size:13px;';
+    previewUnsupported.textContent = '该文件类型暂不支持预览';
+
+    rightPane.appendChild(previewHeader);
+    rightPane.appendChild(previewIframe);
+    rightPane.appendChild(previewImg);
+    rightPane.appendChild(previewText);
+    rightPane.appendChild(previewUnsupported);
+
+    mainArea.appendChild(leftPane);
+    mainArea.appendChild(rightPane);
+    box.appendChild(mainArea);
+
+    overlay.appendChild(box);
+    document.body.appendChild(overlay);
+
+    var activeRow = null; // 当前高亮的左栏行
+
+    function loadPreview(rec) {
+      var versionDir = rec.version_dir || ('v' + rec.version);
+      var filePath = rec.path || '';
+      var ext = filePath.split('.').pop().toLowerCase();
+
+      previewHeader.textContent = versionDir + '  ' + filePath;
+
+      // 隐藏所有预览区
+      previewIframe.style.display = 'none';
+      previewImg.style.display = 'none';
+      previewText.style.display = 'none';
+      previewUnsupported.style.display = 'none';
+
+      var apiUrl = MYCLAW_API_BASE + '/api/history/file?workspace=' + encodeURIComponent(ws)
+        + '&version=' + encodeURIComponent(versionDir)
+        + '&path=' + encodeURIComponent(filePath);
+
+      if (['html', 'htm'].indexOf(ext) !== -1) {
+        // HTML → iframe srcdoc
+        previewIframe.style.display = 'block';
+        previewIframe.srcdoc = '<body style="font:13px monospace;padding:20px;color:#888">加载中…</body>';
+        fetch(apiUrl)
+          .then(function (r) { return r.ok ? r.text() : Promise.reject('HTTP ' + r.status); })
+          .then(function (text) { previewIframe.srcdoc = text; })
+          .catch(function (e) { previewIframe.srcdoc = '<body style="font:13px monospace;padding:20px;color:#c00">加载失败: ' + e + '</body>'; });
+
+      } else if (['png', 'jpg', 'jpeg', 'gif', 'webp', 'svg', 'bmp', 'ico'].indexOf(ext) !== -1) {
+        // 图片 → <img> src 直接指向 API URL（浏览器可直接加载二进制）
+        previewImg.style.display = 'flex';
+        previewImgEl.src = apiUrl;
+        previewImgEl.alt = filePath;
+
+      } else if (['js', 'ts', 'css', 'json', 'txt', 'md', 'py', 'sh', 'yaml', 'yml', 'xml', 'csv', 'ini', 'toml', 'env', 'jsx', 'tsx', 'vue', 'html'].indexOf(ext) !== -1) {
+        // 文本类 → pre 代码展示
+        previewText.style.display = 'block';
+        previewText.textContent = '加载中…';
+        fetch(apiUrl)
+          .then(function (r) { return r.ok ? r.arrayBuffer() : Promise.reject('HTTP ' + r.status); })
+          .then(function (arrayBuf) {
+            // 使用 TextDecoder 强制 UTF-8 解码，避免中文乱码
+            var decoder = new TextDecoder('utf-8');
+            var text = decoder.decode(arrayBuf);
+            previewText.textContent = text;
+          })
+          .catch(function (e) { previewText.textContent = '加载失败: ' + e; });
+
+      } else {
+        // 其余类型暂不支持
+        previewUnsupported.style.display = 'flex';
+        previewUnsupported.textContent = '.' + ext + ' 文件暂不支持预览';
+      }
+    }
+
+    // 拉取历史数据
+    fetch(url)
+      .then(function (r) { return r.json(); })
+      .then(function (data) {
+        var allRecords = data.records || [];
+        if (allRecords.length === 0) {
+          leftPane.textContent = '暂无历史版本记录';
+          leftPane.style.color = 'rgba(205,214,244,0.4)';
+          leftPane.style.fontSize = '13px';
+          leftPane.style.padding = '24px';
+          return;
+        }
+
+        var currentVersions = data.current_versions || {};
+
+        var maxVersionPerPath = {};
+        allRecords.forEach(function (r) {
+          var p = r.path || '';
+          if (!maxVersionPerPath[p] || r.version > maxVersionPerPath[p]) maxVersionPerPath[p] = r.version;
+        });
+
+        var uniquePaths = [];
+        allRecords.forEach(function (r) {
+          if (r.path && uniquePaths.indexOf(r.path) === -1) uniquePaths.push(r.path);
+        });
+
+        // 若传入了 defaultPath 且存在于历史中，则预设选中
+        var selectedPath = (defaultPath && uniquePaths.indexOf(defaultPath) !== -1) ? defaultPath : null;
+
+        function renderFilterBar() {
+          filterBar.textContent = '';
+          [null].concat(uniquePaths).forEach(function (p) {
+            var chip = document.createElement('span');
+            var isActive = selectedPath === p;
+            chip.textContent = p === null ? '全部' : p.split('/').pop();
+            if (p !== null) chip.title = p;
+            chip.style.cssText = 'cursor:pointer;font-size:10px;padding:2px 8px;border-radius:6px;white-space:nowrap;flex-shrink:0;transition:background 0.15s;'
+              + (isActive ? 'background:#4a4a7a;color:#cdd6f4;' : 'background:rgba(255,255,255,0.07);color:rgba(205,214,244,0.55);');
+            chip.onclick = function () { selectedPath = p; renderFilterBar(); renderList(); };
+            filterBar.appendChild(chip);
+          });
+        }
+
+        function renderList() {
+          leftPane.textContent = '';
+          activeRow = null;
+          var recs = allRecords.slice().reverse();
+          if (selectedPath !== null) recs = recs.filter(function (r) { return r.path === selectedPath; });
+
+          recs.forEach(function (rec, idx) {
+            var recPath = rec.path || '';
+            var recVer = rec.version;
+            var isLatest = recVer === maxVersionPerPath[recPath];
+            var effectiveCurrent = recPath in currentVersions ? currentVersions[recPath] : maxVersionPerPath[recPath];
+            var isCurrent = recVer === effectiveCurrent;
+
+            var row = document.createElement('div');
+            row.style.cssText = 'padding:7px 8px;border-radius:5px;cursor:pointer;transition:background 0.12s;';
+            row.style.background = 'transparent';
+
+            function setActive() {
+              if (activeRow) activeRow.style.background = 'transparent';
+              activeRow = row;
+              row.style.background = 'rgba(100,149,237,0.15)';
+              loadPreview(rec);
+            }
+            row.onclick = setActive;
+            row.onmouseenter = function () { if (row !== activeRow) row.style.background = 'rgba(255,255,255,0.06)'; };
+            row.onmouseleave = function () { if (row !== activeRow) row.style.background = 'transparent'; };
+
+            // 第一行：时间 + 切换按钮
+            var row1 = document.createElement('div');
+            row1.style.cssText = 'display:flex;align-items:center;justify-content:space-between;margin-bottom:3px;';
+
+            var timeSpan = document.createElement('span');
+            timeSpan.textContent = (rec.snapshot_at || '').replace('T', ' ').replace(/\.\d+.*$/, '').replace(/\+.*$/, '').slice(5);
+            timeSpan.style.cssText = 'font-size:11px;color:#cdd6f4;font-weight:500;';
+
+            var rollbackBtn = document.createElement('span');
+            if (isCurrent) {
+              rollbackBtn.textContent = '使用中';
+              rollbackBtn.style.cssText = 'font-size:10px;color:rgba(205,214,244,0.25);';
+            } else {
+              rollbackBtn.textContent = '切换';
+              rollbackBtn.style.cssText = 'font-size:10px;cursor:pointer;padding:1px 7px;border-radius:4px;background:rgba(100,149,237,0.2);color:#90c2ff;transition:background 0.15s;';
+              rollbackBtn.onmouseenter = function () { rollbackBtn.style.background = 'rgba(100,149,237,0.4)'; };
+              rollbackBtn.onmouseleave = function () { rollbackBtn.style.background = 'rgba(100,149,237,0.2)'; };
+              rollbackBtn.onclick = (function (r, btn) {
+                return function (e) {
+                  e.stopPropagation();
+                  btn.textContent = '…';
+                  fetch(MYCLAW_API_BASE + '/api/history/rollback', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ workspace: ws, version: r.version_dir || ('v' + r.version), path: r.path })
+                  })
+                    .then(function (res) { return res.json(); })
+                    .then(function (result) {
+                      if (result.ok) { currentVersions[r.path] = r.version; renderList(); }
+                      else { alert('切换失败: ' + (result.error || '')); btn.textContent = '切换'; }
+                    })
+                    .catch(function (err) { alert('切换失败: ' + err.message); btn.textContent = '切换'; });
+                };
+              }(rec, rollbackBtn));
+            }
+
+            row1.appendChild(timeSpan);
+            row1.appendChild(rollbackBtn);
+
+            // 第二行：文件名
+            var row2 = document.createElement('div');
+            var fileName = document.createElement('span');
+            fileName.textContent = recPath.split('/').pop();
+            fileName.title = recPath;
+            fileName.style.cssText = 'font-size:12px;color:#cdd6f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;';
+            row2.appendChild(fileName);
+
+            // 第三行：版本号 + 状态标签
+            var row3 = document.createElement('div');
+            row3.style.cssText = 'display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:3px;';
+
+            var vTag = document.createElement('span');
+            vTag.textContent = rec.version_dir || ('v' + recVer);
+            vTag.style.cssText = 'font-size:10px;font-weight:bold;background:#4a4a7a;color:#cdd6f4;padding:1px 6px;border-radius:8px;';
+            row3.appendChild(vTag);
+
+            if (isLatest) {
+              var lb = document.createElement('span');
+              lb.textContent = '最新';
+              lb.style.cssText = 'font-size:9px;background:#2d6a4f;color:#95d5b2;padding:1px 5px;border-radius:8px;';
+              row3.appendChild(lb);
+            }
+            if (isCurrent) {
+              var cb = document.createElement('span');
+              cb.textContent = '当前';
+              cb.style.cssText = 'font-size:9px;background:#1e3a5f;color:#90c2ff;padding:1px 5px;border-radius:8px;';
+              row3.appendChild(cb);
+            }
+
+            row.appendChild(row1);
+            row.appendChild(row2);
+            row.appendChild(row3);
+            leftPane.appendChild(row);
+
+            // 默认选中第一条并预览
+            if (idx === 0) setActive();
+          });
+        }
+
+        renderFilterBar();
+        renderList();
+      })
+      .catch(function (err) {
+        leftPane.textContent = '加载失败: ' + err.message;
+      });
+  }
+
+  // ═══ 统计弹框 ═══
+  function openStatsModal() {
+    if (document.querySelector('#myclaw-stats-modal')) return;
+
+    var overlay = document.createElement('div');
+    overlay.id = 'myclaw-stats-modal';
+    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:99999;display:flex;align-items:center;justify-content:center;';
+    overlay.onclick = function (e) { if (e.target === overlay) overlay.remove(); };
+
+    var box = document.createElement('div');
+    box.style.cssText = 'background:#1e1e2e;border-radius:10px;width:min(92vw,480px);overflow:hidden;box-shadow:0 12px 40px rgba(0,0,0,0.7);font-family:monospace;color:#cdd6f4;';
+
+    // 弹框 header
+    var mHeader = document.createElement('div');
+    mHeader.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#2d2d3f;font-size:13px;';
+    var mTitle = document.createElement('span');
+    mTitle.style.cssText = 'display:flex;align-items:center;gap:10px;';
+    var mTitleText = document.createElement('span');
+    mTitleText.textContent = '📊 作品统计';
+    var mTitleTime = document.createElement('span');
+    mTitleTime.style.cssText = 'font-size:11px;color:#888;font-weight:normal;';
+    function updateStatsTime() {
+      var now = new Date();
+      var pad = function(n){return n<10?'0'+n:n;};
+      mTitleTime.textContent = now.getFullYear()+'-'+pad(now.getMonth()+1)+'-'+pad(now.getDate())+' '+pad(now.getHours())+':'+pad(now.getMinutes())+':'+pad(now.getSeconds());
+    }
+    updateStatsTime();
+    var statsTimerInterval = setInterval(updateStatsTime, 1000);
+    overlay.addEventListener('remove', function(){ clearInterval(statsTimerInterval); }, {once:true});
+    // 监听 overlay 被移除时清除 timer
+    var statsTimerObserver = new MutationObserver(function(mutations){
+      mutations.forEach(function(m){
+        m.removedNodes.forEach(function(n){
+          if(n === overlay){ clearInterval(statsTimerInterval); statsTimerObserver.disconnect(); }
+        });
+      });
+    });
+    statsTimerObserver.observe(document.body, {childList:true});
+    mTitle.appendChild(mTitleText);
+    mTitle.appendChild(mTitleTime);
+    var mClose = document.createElement('span');
+    mClose.textContent = '✕';
+    mClose.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:3px;font-size:14px;transition:background 0.15s;';
+    mClose.onmouseenter = function () { mClose.style.background = 'rgba(255,255,255,0.1)'; };
+    mClose.onmouseleave = function () { mClose.style.background = 'none'; };
+    mClose.onclick = function () { overlay.remove(); };
+    mHeader.appendChild(mTitle);
+    mHeader.appendChild(mClose);
+    box.appendChild(mHeader);
+
+    var body = document.createElement('div');
+    body.style.cssText = 'padding:0;';
+
+    // ── 通用：行样式 ──
+    function makeSection(icon, title) {
+      var sec = document.createElement('div');
+      sec.style.cssText = 'padding:14px 16px;border-bottom:1px solid rgba(255,255,255,0.07);';
+      var secTitle = document.createElement('div');
+      secTitle.style.cssText = 'font-size:12px;color:#888;margin-bottom:8px;letter-spacing:0.5px;';
+      secTitle.textContent = icon + ' ' + title;
+      sec.appendChild(secTitle);
+      return sec;
+    }
+    function makeRow(label, value, valueColor) {
+      var row = document.createElement('div');
+      row.style.cssText = 'display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px;font-size:12px;';
+      var l = document.createElement('span');
+      l.style.cssText = 'color:#888;';
+      l.textContent = label;
+      var v = document.createElement('span');
+      v.style.cssText = 'color:' + (valueColor || '#cdd6f4') + ';text-align:right;max-width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;';
+      v.textContent = value;
+      v.title = value;
+      row.appendChild(l);
+      row.appendChild(v);
+      return row;
+    }
+
+    // ── JSON 预览弹框 ──
+    // sortKey: 若提供，则对数组（或对象内的数组字段）按该字段降序排列
+    function openJsonPreviewModal(title, jsonUrl, sortKey) {
+      var jOverlay = document.createElement('div');
+      jOverlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:100000;display:flex;align-items:center;justify-content:center;';
+      jOverlay.onclick = function(e){ if(e.target===jOverlay) jOverlay.remove(); };
+
+      var jBox = document.createElement('div');
+      jBox.style.cssText = 'background:#1e1e2e;border-radius:10px;width:min(94vw,700px);height:min(80vh,600px);overflow:hidden;box-shadow:0 16px 48px rgba(0,0,0,0.8);font-family:monospace;color:#cdd6f4;display:flex;flex-direction:column;';
+
+      var jHead = document.createElement('div');
+      jHead.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:#2d2d3f;font-size:12px;flex-shrink:0;';
+      var jTitle = document.createElement('span');
+      jTitle.textContent = title;
+      var jClose = document.createElement('span');
+      jClose.textContent = '✕';
+      jClose.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:3px;font-size:14px;transition:background 0.15s;';
+      jClose.onmouseenter = function(){ jClose.style.background='rgba(255,255,255,0.1)'; };
+      jClose.onmouseleave = function(){ jClose.style.background='none'; };
+      jClose.onclick = function(){ jOverlay.remove(); };
+      jHead.appendChild(jTitle);
+      jHead.appendChild(jClose);
+
+      var jBody = document.createElement('pre');
+      jBody.style.cssText = 'flex:1;overflow:auto;margin:0;padding:16px;font-size:11px;line-height:1.6;color:#a6e3a1;white-space:pre-wrap;word-break:break-all;background:#181825;';
+      jBody.textContent = '加载中...';
+
+      jBox.appendChild(jHead);
+      jBox.appendChild(jBody);
+      jOverlay.appendChild(jBox);
+      document.body.appendChild(jOverlay);
+
+      fetch(jsonUrl)
+        .then(function(r){ return r.ok ? r.json() : Promise.reject('HTTP ' + r.status); })
+        .then(function(data){
+          if (sortKey) {
+            // 支持顶层数组 或 对象内某个数组字段（如 { assets: [...] }）
+            var arr = Array.isArray(data) ? data : (data && typeof data === 'object' ? (
+              Object.values(data).find(function(v){ return Array.isArray(v); })
+            ) : null);
+            if (arr) {
+              arr.sort(function(a, b){
+                var ta = a[sortKey] ? new Date(a[sortKey]).getTime() : 0;
+                var tb = b[sortKey] ? new Date(b[sortKey]).getTime() : 0;
+                return tb - ta;
+              });
+            }
+          }
+          jBody.style.color = '#a6e3a1';
+          jBody.textContent = JSON.stringify(data, null, 2);
+        })
+        .catch(function(err){
+          jBody.style.color = '#f87171';
+          jBody.textContent = '加载失败: ' + err;
+        });
+    }
+
+    // ── Section 1: 文件资产 ──
+    var sec1 = makeSection('📁', '文件资产');
+    sec1.style.cursor = 'pointer';
+    sec1.title = '点击查看 JSON';
+    sec1.onmouseenter = function(){ sec1.style.background='rgba(255,255,255,0.04)'; };
+    sec1.onmouseleave = function(){ sec1.style.background=''; };
+    sec1.onclick = function(){
+      var wsPrefix = getWorkspaceId();
+      openJsonPreviewModal('📁 文件资产 — __MY_ARTIFACTS__.json', MYCLAW_API_BASE + '/api/file?path=' + encodeURIComponent(wsPrefix + '/.myclaw/__MY_ARTIFACTS__.json'), 'updated_at');
+    };
+    if (cachedData && cachedData.assets && cachedData.assets.length) {
+      var assets = cachedData.assets;
+      // 最后更新时间 & 文件
+      var sorted = assets.slice().sort(function (a, b) {
+        return new Date(b.updated_at || 0) - new Date(a.updated_at || 0);
+      });
+      var latest = sorted[0];
+      var lastTime = latest.updated_at ? latest.updated_at.replace('T', ' ').slice(0, 16) : '-';
+      var lastName = latest.path ? latest.path.split('/').pop() : '-';
+
+      // 按后缀统计
+      var extMap = {};
+      assets.forEach(function (a) {
+        var ext = (a.type || (a.path && a.path.split('.').pop()) || '其他').toLowerCase();
+        extMap[ext] = (extMap[ext] || 0) + 1;
+      });
+      var extStr = Object.keys(extMap).sort().map(function (k) { return k + ': ' + extMap[k]; }).join('  ');
+
+      sec1.appendChild(makeRow('最后更新', lastTime));
+      sec1.appendChild(makeRow('最后更新文件', lastName));
+      sec1.appendChild(makeRow('总文件数', assets.length + ' 个'));
+      var extRow = document.createElement('div');
+      extRow.style.cssText = 'font-size:11px;color:#666;margin-top:6px;line-height:1.8;word-break:break-all;';
+      extRow.textContent = extStr;
+      sec1.appendChild(extRow);
+    } else {
+      sec1.appendChild(makeRow('状态', '暂无数据', '#666'));
+    }
+    body.appendChild(sec1);
+
+    // ── Section 2: 美术资源 ──
+    var sec2 = makeSection('🎨', '美术资源');
+    sec2.style.cursor = 'pointer';
+    sec2.title = '点击查看 JSON';
+    sec2.onmouseenter = function(){ sec2.style.background='rgba(255,255,255,0.04)'; };
+    sec2.onmouseleave = function(){ sec2.style.background=''; };
+    sec2.onclick = function(){
+      openJsonPreviewModal('🎨 美术资源 — media-generation-log.json', MYCLAW_API_BASE + '/api/file?path=myclaw/log/media-generation-log.json', 'started_at');
+    };
+    var mediaPlaceholder = document.createElement('div');
+    mediaPlaceholder.style.cssText = 'font-size:12px;color:#666;';
+    mediaPlaceholder.textContent = '加载中...';
+    sec2.appendChild(mediaPlaceholder);
+    body.appendChild(sec2);
+
+    // 异步读取 media log
+    fetch(MYCLAW_API_BASE + '/api/file?path=myclaw/log/media-generation-log.json')
+      .then(function (r) { return r.ok ? r.json() : Promise.reject(r.status); })
+      .then(function (log) {
+        mediaPlaceholder.remove();
+        if (!log || !log.length) {
+          sec2.appendChild(makeRow('状态', '暂无记录', '#666'));
+          return;
+        }
+        var sorted = log.slice().sort(function (a, b) {
+          return new Date(b.started_at || 0) - new Date(a.started_at || 0);
+        });
+        var last = sorted[0];
+        var statusColor = last.status === 'success' ? '#4ade80' : last.status === 'failed' ? '#f87171' : '#facc15';
+        sec2.appendChild(makeRow('最后生成', last.started_at || '-'));
+        sec2.appendChild(makeRow('使用模型', last.model || last.provider || '-'));
+        sec2.appendChild(makeRow('生成状态', last.status || '-', statusColor));
+        sec2.appendChild(makeRow('总记录数', log.length + ' 条'));
+      })
+      .catch(function () {
+        mediaPlaceholder.textContent = '暂无记录';
+      });
+
+    // ── Section 3: 同步 ──
+    var sec3 = document.createElement('div');
+    sec3.style.cssText = 'padding:14px 16px;';
+    // 标题行：左边文字 + 右边同步按钮
+    var sec3Head = document.createElement('div');
+    sec3Head.style.cssText = 'display:flex;align-items:center;justify-content:space-between;';
+    var sec3Label = document.createElement('div');
+    sec3Label.style.cssText = 'font-size:12px;color:#888;letter-spacing:0.5px;';
+    sec3Label.textContent = '🔄 数据同步';
+    var syncBtn = document.createElement('button');
+    syncBtn.textContent = '全量同步';
+    syncBtn.style.cssText = 'padding:2px 10px;background:none;color:#555;border:1px solid rgba(255,255,255,0.1);border-radius:4px;font-size:11px;font-family:monospace;cursor:pointer;transition:color 0.15s,border-color 0.15s;';
+    syncBtn.onmouseenter = function () { syncBtn.style.color='#aaa'; syncBtn.style.borderColor='rgba(255,255,255,0.25)'; };
+    syncBtn.onmouseleave = function () { syncBtn.style.color='#555'; syncBtn.style.borderColor='rgba(255,255,255,0.1)'; };
+    syncBtn.onclick = function () {
+      var confirm = document.createElement('div');
+      confirm.style.cssText = 'margin-top:10px;padding:10px;background:rgba(250,204,21,0.08);border:1px solid rgba(250,204,21,0.2);border-radius:6px;font-size:11px;color:#facc15;line-height:1.7;';
+      confirm.innerHTML = '⚠️ 将把当前工作空间所有文件重新上传同步。<br>确认继续？';
+      var btnRow = document.createElement('div');
+      btnRow.style.cssText = 'display:flex;gap:8px;margin-top:8px;';
+      var cancelBtn = document.createElement('button');
+      cancelBtn.textContent = '取消';
+      cancelBtn.style.cssText = 'flex:1;padding:5px;background:rgba(255,255,255,0.06);color:#888;border:1px solid rgba(255,255,255,0.1);border-radius:4px;font-size:11px;font-family:monospace;cursor:pointer;';
+      cancelBtn.onclick = function () { confirm.remove(); };
+      var okBtn = document.createElement('button');
+      okBtn.textContent = '确认同步';
+      okBtn.style.cssText = 'flex:1;padding:5px;background:rgba(250,204,21,0.15);color:#facc15;border:1px solid rgba(250,204,21,0.3);border-radius:4px;font-size:11px;font-family:monospace;cursor:pointer;';
+      okBtn.onclick = function () {
+        okBtn.textContent = '同步中...';
+        okBtn.disabled = true;
+        var wsPrefix = getWorkspaceId();
+        fetch(MYCLAW_API_BASE + '/api/resync?workspace=' + encodeURIComponent(wsPrefix), { method: 'POST' })
+          .then(function () {
+            confirm.innerHTML = '<span style="color:#4ade80">✓ 同步已触发，请稍候</span>';
+          })
+          .catch(function () {
+            confirm.innerHTML = '<span style="color:#f87171">✗ 同步失败</span>';
+          });
+      };
+      btnRow.appendChild(cancelBtn);
+      btnRow.appendChild(okBtn);
+      confirm.appendChild(btnRow);
+      var existing = sec3.querySelector('.sync-confirm');
+      if (existing) existing.remove();
+      confirm.className = 'sync-confirm';
+      sec3.appendChild(confirm);
+    };
+    sec3Head.appendChild(sec3Label);
+    sec3Head.appendChild(syncBtn);
+    sec3.appendChild(sec3Head);
+    body.appendChild(sec3);
+
+    box.appendChild(body);
+    overlay.appendChild(box);
+    document.body.appendChild(overlay);
+  }
+
   // ═══ 发布弹框 ═══
   function openPublishModal() {
     if (document.querySelector('#myclaw-artifacts-publish-modal')) return;
@@ -800,11 +1455,11 @@
     var titleGroup = document.createElement('div');
     titleGroup.style.cssText = 'display:flex;flex-direction:column;gap:6px;';
     var titleLabel = document.createElement('label');
-    titleLabel.textContent = '\u4F5C\u54C1\u540D\u79F0';
+    titleLabel.textContent = '作品名称';
     titleLabel.style.cssText = 'font-size:12px;color:#888;';
     var titleInput = document.createElement('input');
     titleInput.type = 'text';
-    titleInput.placeholder = '\u8F93\u5165\u5C55\u793A\u6807\u9898';
+    titleInput.placeholder = '给你的作品起一个闪亮的名字吧';
     titleInput.value = savedForm.title || cachedData.title || '';
     titleInput.style.cssText = 'padding:8px 10px;background:#252536;border:1px solid #3d3d5c;border-radius:4px;color:#cdd6f4;font-size:13px;font-family:monospace;outline:none;';
     titleInput.onfocus = function () { titleInput.style.borderColor = '#6c6caa'; };
@@ -813,11 +1468,11 @@
     titleGroup.appendChild(titleInput);
     form.appendChild(titleGroup);
 
-    // 字段 1：选择封面图片
+    // 字段 1：选择宣传图
     var coverGroup = document.createElement('div');
     coverGroup.style.cssText = 'display:flex;flex-direction:column;gap:6px;';
     var coverLabel = document.createElement('label');
-    coverLabel.textContent = '\u9009\u62E9\u5C01\u9762\u56FE\u7247';
+    coverLabel.textContent = '封面图';
     coverLabel.style.cssText = 'font-size:12px;color:#888;';
     var coverRow = document.createElement('div');
     coverRow.style.cssText = 'display:flex;align-items:center;gap:10px;';
@@ -827,7 +1482,7 @@
     coverSelect.onblur = function () { coverSelect.style.borderColor = '#3d3d5c'; };
     var coverDefaultOpt = document.createElement('option');
     coverDefaultOpt.value = '';
-    coverDefaultOpt.textContent = '\u4E0D\u9009\u62E9';
+    coverDefaultOpt.textContent = '选择一个你满意的图片作为项目宣传图';
     coverSelect.appendChild(coverDefaultOpt);
     var imageTypes = ['png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'bmp', 'image'];
     var imageAssets = (cachedData.assets || []).filter(function (a) { return a.type && imageTypes.indexOf(a.type.toLowerCase()) !== -1; });
@@ -862,11 +1517,11 @@
     coverGroup.appendChild(coverRow);
     form.appendChild(coverGroup);
 
-    // 字段 2：入口文件
+    // 字段 2：网页入口
     var entryGroup = document.createElement('div');
     entryGroup.style.cssText = 'display:flex;flex-direction:column;gap:6px;';
     var entryLabel = document.createElement('label');
-    entryLabel.textContent = '\u5165\u53E3\u6587\u4EF6';
+    entryLabel.textContent = '网页入口';
     entryLabel.style.cssText = 'font-size:12px;color:#888;';
     var entrySelect = document.createElement('select');
     entrySelect.style.cssText = 'padding:8px 10px;background:#252536;border:1px solid #3d3d5c;border-radius:4px;color:#cdd6f4;font-size:13px;font-family:monospace;outline:none;';
@@ -874,7 +1529,7 @@
     entrySelect.onblur = function () { entrySelect.style.borderColor = '#3d3d5c'; };
     var entryDefaultOpt = document.createElement('option');
     entryDefaultOpt.value = '';
-    entryDefaultOpt.textContent = '\u4E0D\u9009\u62E9';
+    entryDefaultOpt.textContent = '选择作品的网页入口文件';
     entrySelect.appendChild(entryDefaultOpt);
     var htmlAssets = (cachedData.assets || []).filter(function (a) { return a.type && a.type.toLowerCase() === 'html'; });
     htmlAssets.forEach(function (asset) {
@@ -899,10 +1554,20 @@
     submitBtn.onmouseleave = function () { submitBtn.style.background = '#4a4a7a'; };
     submitBtn.onclick = function () {
       var titleVal = titleInput.value.trim();
+      var coverVal = coverSelect.value;
+      var entryVal = entrySelect.value;
+
       if (!titleVal) {
         titleInput.style.borderColor = '#ff4444';
         return;
       }
+
+      // 校验：宣传图和网页入口至少要选一个
+      if (!coverVal && !entryVal) {
+        coverSelect.style.borderColor = '#ff4444';
+        entrySelect.style.borderColor = '#ff4444';
+        return;
+      }
       var payload = {
         title: titleVal,
         workspace: getWorkspaceId(),
@@ -1241,7 +1906,7 @@
     btn.style.background = '#7a2a2a';
     btn.style.cursor = 'pointer';
     setTimeout(function () {
-      btn.textContent = '\u786E\u8BA4 Fork';
+      btn.textContent = '\u786E\u8BA4\u83B7\u53D6';
       btn.style.background = '#4a4a7a';
     }, 2500);
   }
@@ -1255,7 +1920,7 @@
       'box-shadow:0 4px 16px rgba(0,0,0,0.3)',
       'animation:myclaw-slide-in-right 0.25s ease',
     ].join(';');
-    toast.innerHTML = '\u2705 Fork 完成！<br>'
+    toast.innerHTML = '\u2705 \u83B7\u53D6\u5B8C\u6210\uFF01<br>'
       + '<span style="opacity:0.85;font-size:11px;">' + workspace + '（' + files + ' 个文件）</span>';
     document.body.appendChild(toast);
     setTimeout(function () { toast.remove(); }, 4000);
@@ -1307,7 +1972,7 @@
       'user-select: none',
       'flex-shrink: 0',
     ].join(';');
-    forkHeader.innerHTML = '<span>\uD83D\uDD00 Fork \u4ED6\u4EBA\u4F5C\u54C1</span>';
+    forkHeader.innerHTML = '<span>\uD83D\uDD00 \u83B7\u53D6\u4F5C\u54C1</span>';
     var forkCloseBtn = document.createElement('span');
     forkCloseBtn.textContent = '\u2715';
     forkCloseBtn.style.cssText = 'cursor:pointer;padding:2px 6px;border-radius:3px;font-size:14px;transition:background 0.15s;';
@@ -1351,7 +2016,7 @@
 
     // 确认按钮
     var forkSubmitBtn = document.createElement('button');
-    forkSubmitBtn.textContent = '\u786E\u8BA4 Fork';
+    forkSubmitBtn.textContent = '\u786E\u8BA4\u83B7\u53D6';
     forkSubmitBtn.style.cssText = [
       'margin: 0 20px 20px',
       'padding: 10px',
@@ -1388,7 +2053,7 @@
       errVisible = false;
 
       forkSubmitBtn.disabled = true;
-      forkSubmitBtn.textContent = '\u23F3 Fork 中...';
+      forkSubmitBtn.textContent = '\u23F3 \u83B7\u53D6\u4E2D...';
       forkSubmitBtn.style.background = '#3a3a5a';
       forkSubmitBtn.style.cursor = 'default';
       urlInput.disabled = true;
@@ -1413,7 +2078,7 @@
                 if (job.status === 'running') return;
                 clearInterval(timer);
                 if (job.status === 'done') {
-                  forkSubmitBtn.textContent = '\u2705 Fork 成功！';
+                  forkSubmitBtn.textContent = '\u2705 \u83B7\u53D6\u6210\u529F\uFF01';
                   forkSubmitBtn.style.background = '#10b981';
                   setTimeout(function () {
                     closeForkModal();
@@ -1447,6 +2112,285 @@
     if (modal) modal.remove();
   }
 
+  // ═══ 作品模板列表弹框 ═══
+  // 使用通用文件接口 GET /api/file?path=（路径相对 .openclaw 根）
+  var TEMPLATE_ROOT = 'workspace-ai-demo/skills/yiran-playground-template-use';
+
+  function openTemplateModal() {
+    if (document.querySelector('#myclaw-template-modal')) return;
+
+    var overlay = document.createElement('div');
+    overlay.id = 'myclaw-template-modal';
+    overlay.style.cssText = 'position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:99999;display:flex;align-items:center;justify-content:center;font-family:monospace;animation:myclaw-fade-in 0.15s ease;';
+    overlay.onclick = function (e) { if (e.target === overlay) overlay.remove(); };
+
+    var box = document.createElement('div');
+    box.style.cssText = 'background:#1e1e2e;border:1px solid rgba(255,255,255,0.1);border-radius:6px;width:calc(100vw - 24px);height:calc(100vh - 24px);display:flex;flex-direction:column;color:#cdd6f4;overflow:hidden;';
+
+    // ── 头部 ──
+    var head = document.createElement('div');
+    head.style.cssText = 'display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid rgba(255,255,255,0.1);flex-shrink:0;';
+    var headTitle = document.createElement('span');
+    headTitle.textContent = '📋 作品模板库';
+    headTitle.style.cssText = 'font-size:14px;font-weight:bold;';
+    var headClose = document.createElement('span');
+    headClose.textContent = '✕';
+    headClose.style.cssText = 'cursor:pointer;font-size:14px;padding:2px 8px;border-radius:3px;transition:background 0.12s;';
+    headClose.onmouseenter = function () { headClose.style.background = 'rgba(255,255,255,0.1)'; };
+    headClose.onmouseleave = function () { headClose.style.background = 'none'; };
+    headClose.onclick = function () { overlay.remove(); };
+    head.appendChild(headTitle);
+    head.appendChild(headClose);
+    box.appendChild(head);
+
+    // ── 主体：左列表 + 右预览 ──
+    var mainArea = document.createElement('div');
+    mainArea.style.cssText = 'flex:1;display:flex;overflow:hidden;';
+
+    // 左栏：模板列表
+    var leftPane = document.createElement('div');
+    leftPane.style.cssText = 'width:240px;flex-shrink:0;overflow-y:auto;border-right:1px solid rgba(255,255,255,0.07);padding:8px;display:flex;flex-direction:column;gap:2px;';
+
+    // 右栏：iframe 预览
+    var rightPane = document.createElement('div');
+    rightPane.style.cssText = 'flex:1;display:flex;flex-direction:column;overflow:hidden;';
+
+    // 右栏顶部：当前模板信息 + 使用模板（复制提示词）
+    var rightHeader = document.createElement('div');
+    rightHeader.style.cssText = 'padding:8px 14px;border-bottom:1px solid rgba(255,255,255,0.07);flex-shrink:0;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#1a1a2a;';
+    rightHeader.innerHTML = '<span style="font-size:12px;color:rgba(205,214,244,0.4);">← 点击左侧模板查看 demo</span>';
+
+    var previewIframe = document.createElement('iframe');
+    previewIframe.style.cssText = 'flex:1;border:none;background:#fff;';
+
+    // 右栏底部：操作按钮
+    var rightFooter = document.createElement('div');
+    rightFooter.style.cssText = 'padding:10px 14px;background:#1a1a2a;border-top:1px solid rgba(255,255,255,0.07);flex-shrink:0;display:flex;align-items:center;gap:10px;';
+
+    var copyLocalBtn = document.createElement('button');
+    copyLocalBtn.textContent = '📂 复制到本地';
+    copyLocalBtn.style.cssText = 'padding:6px 18px;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.15);border-radius:4px;color:#cdd6f4;font-size:12px;font-family:monospace;cursor:pointer;transition:all 0.15s;';
+    copyLocalBtn.onmouseenter = function () { copyLocalBtn.style.background = 'rgba(255,255,255,0.14)'; };
+    copyLocalBtn.onmouseleave = function () { copyLocalBtn.style.background = 'rgba(255,255,255,0.07)'; };
+
+    var deployBtn = document.createElement('button');
+    deployBtn.textContent = '🚀 创建';
+    deployBtn.style.cssText = 'padding:6px 18px;background:#a78bfa;border:none;border-radius:4px;color:#fff;font-size:12px;font-family:monospace;cursor:pointer;transition:background 0.15s;';
+    deployBtn.onmouseenter = function () { deployBtn.style.background = '#8b5cf6'; };
+    deployBtn.onmouseleave = function () { deployBtn.style.background = '#a78bfa'; };
+
+    var footerStatus = document.createElement('span');
+    footerStatus.style.cssText = 'font-size:11px;color:rgba(205,214,244,0.45);flex:1;';
+
+    rightFooter.appendChild(copyLocalBtn);
+    rightFooter.appendChild(deployBtn);
+    rightFooter.appendChild(footerStatus);
+
+    // currentTpl 在 setActive 时更新，按钮 onclick 通过闭包读取
+    var currentTpl = null;
+
+    function setFooterStatus(msg, color) {
+      footerStatus.textContent = msg;
+      footerStatus.style.color = color || 'rgba(205,214,244,0.45)';
+    }
+
+    function setBtnLoading(btn, text) {
+      btn.disabled = true;
+      btn.style.opacity = '0.6';
+      btn.style.cursor = 'default';
+      btn._origText = btn.textContent;
+      btn.textContent = text;
+    }
+
+    function resetBtn(btn) {
+      btn.disabled = false;
+      btn.style.opacity = '1';
+      btn.style.cursor = 'pointer';
+      btn.textContent = btn._origText || btn.textContent;
+    }
+
+    copyLocalBtn.onclick = function () {
+      if (!currentTpl) return;
+      setBtnLoading(copyLocalBtn, '复制中...');
+      setFooterStatus('');
+      fetch(MYCLAW_API_BASE + '/api/template/copy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ folder: currentTpl['文件夹名'], workspace: getWorkspaceId() }),
+      })
+        .then(function (r) { return r.json(); })
+        .then(function (res) {
+          resetBtn(copyLocalBtn);
+          if (res.ok) {
+            setFooterStatus('✓ 已复制到 ' + res.folder_rel_path, '#10b981');
+          } else {
+            setFooterStatus('✗ ' + (res.error || '复制失败'), '#ff4444');
+          }
+        })
+        .catch(function (err) {
+          resetBtn(copyLocalBtn);
+          setFooterStatus('✗ ' + err.message, '#ff4444');
+        });
+    };
+
+    deployBtn.onclick = function () {
+      if (!currentTpl) return;
+      setBtnLoading(deployBtn, '创建中...');
+      setFooterStatus('');
+      fetch(MYCLAW_API_BASE + '/api/template/deploy', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ folder: currentTpl['文件夹名'] }),
+      })
+        .then(function (r) { return r.json(); })
+        .then(function (res) {
+          resetBtn(deployBtn);
+          if (res.ok) {
+            var deploy = res.deploy || {};
+            setFooterStatus('✓ 马上创建完毕...', '#10b981');
+            if (deploy.agent && deploy.session) {
+              var sessionParam = 'agent:' + deploy.agent + ':' + deploy.session;
+              setTimeout(function () {
+                window.location.href = 'http://127.0.0.1:18789/chat?session=' + encodeURIComponent(sessionParam);
+              }, 4000);
+            }
+          } else {
+            setFooterStatus('✗ ' + (res.error || '创建失败'), '#ff4444');
+          }
+        })
+        .catch(function (err) {
+          resetBtn(deployBtn);
+          setFooterStatus('✗ ' + err.message, '#ff4444');
+        });
+    };
+
+    rightPane.appendChild(rightHeader);
+    rightPane.appendChild(previewIframe);
+    rightPane.appendChild(rightFooter);
+    mainArea.appendChild(leftPane);
+    mainArea.appendChild(rightPane);
+    box.appendChild(mainArea);
+    overlay.appendChild(box);
+    document.body.appendChild(overlay);
+
+    // ── 加载模板索引 ──
+    var loadingEl = document.createElement('div');
+    loadingEl.style.cssText = 'padding:24px;color:rgba(205,214,244,0.4);font-size:13px;';
+    loadingEl.textContent = '加载中...';
+    leftPane.appendChild(loadingEl);
+
+    fetch(MYCLAW_API_BASE + '/api/file?path=' + encodeURIComponent(TEMPLATE_ROOT + '/template-index.json'))
+      .then(function (r) {
+        if (!r.ok) throw new Error('HTTP ' + r.status);
+        return r.json();
+      })
+      .then(function (indexData) {
+        // 按系列、编号升序展平
+        var templates = [];
+        Object.keys(indexData).sort().forEach(function (series) {
+          Object.keys(indexData[series]).sort(function (a, b) { return parseInt(a) - parseInt(b); }).forEach(function (num) {
+            templates.push(indexData[series][num]);
+          });
+        });
+
+        leftPane.textContent = '';
+        var activeRow = null;
+
+        templates.forEach(function (tpl, idx) {
+          var row = document.createElement('div');
+          row.style.cssText = 'padding:10px;border-radius:5px;cursor:pointer;transition:background 0.12s;';
+
+          function setActive() {
+            if (activeRow) activeRow.style.background = 'transparent';
+            activeRow = row;
+            row.style.background = 'rgba(100,149,237,0.15)';
+            currentTpl = tpl;
+            setFooterStatus('');
+
+            // 更新右侧 header
+            rightHeader.innerHTML = '';
+
+            var infoSpan = document.createElement('span');
+            infoSpan.style.cssText = 'font-size:12px;color:#cdd6f4;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+            infoSpan.textContent = tpl['系列'] + tpl['编号'] + '  ' + tpl['名称'];
+
+            var useBtn = document.createElement('button');
+            useBtn.textContent = '✨ 使用模板';
+            useBtn.style.cssText = 'flex-shrink:0;padding:5px 14px;background:#a78bfa;border:none;border-radius:4px;color:#fff;font-size:12px;font-family:monospace;cursor:pointer;transition:background 0.15s;white-space:nowrap;';
+            useBtn.onmouseenter = function () { useBtn.style.background = '#8b5cf6'; };
+            useBtn.onmouseleave = function () { useBtn.style.background = '#a78bfa'; };
+            useBtn.onclick = function () {
+              var promptText = '我要使用' + tpl['系列'] + tpl['编号'] + '模板：' + tpl['名称'] + '。' + tpl['一句话说明'];
+              navigator.clipboard.writeText(promptText).then(function () {
+                useBtn.textContent = '✓ 提示词已复制';
+                useBtn.style.background = '#10b981';
+                setTimeout(function () {
+                  useBtn.textContent = '✨ 使用模板';
+                  useBtn.style.background = '#a78bfa';
+                }, 2000);
+              });
+            };
+
+            rightHeader.appendChild(infoSpan);
+            rightHeader.appendChild(useBtn);
+
+            // 加载 demo.html（text/html，server 直接返回，iframe 可正常渲染）
+            previewIframe.src = MYCLAW_API_BASE + '/api/file?path='
+              + encodeURIComponent(TEMPLATE_ROOT + '/templates/' + tpl['文件夹名'] + '/demo.html');
+          }
+
+          row.onclick = setActive;
+          row.onmouseenter = function () { if (row !== activeRow) row.style.background = 'rgba(255,255,255,0.06)'; };
+          row.onmouseleave = function () { if (row !== activeRow) row.style.background = 'transparent'; };
+
+          // 系列+编号徽章 + 名称
+          var topRow = document.createElement('div');
+          topRow.style.cssText = 'display:flex;align-items:center;gap:6px;margin-bottom:4px;';
+
+          var badge = document.createElement('span');
+          badge.textContent = tpl['系列'] + tpl['编号'];
+          badge.style.cssText = 'font-size:10px;font-weight:bold;background:#4a4a7a;color:#cdd6f4;padding:1px 7px;border-radius:8px;flex-shrink:0;';
+
+          var nameEl = document.createElement('span');
+          nameEl.textContent = tpl['名称'];
+          nameEl.style.cssText = 'font-size:12px;color:#cdd6f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;';
+
+          topRow.appendChild(badge);
+          topRow.appendChild(nameEl);
+
+          // 一句话说明
+          var descEl = document.createElement('div');
+          descEl.textContent = tpl['一句话说明'];
+          descEl.style.cssText = 'font-size:11px;color:rgba(205,214,244,0.5);line-height:1.4;margin-top:2px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;';
+
+          // 标签
+          var tagsEl = document.createElement('div');
+          tagsEl.style.cssText = 'display:flex;gap:4px;margin-top:5px;flex-wrap:wrap;';
+          [tpl['主能力标签'], tpl['任务类型标签']].filter(Boolean).forEach(function (tag) {
+            var tagEl = document.createElement('span');
+            tagEl.textContent = tag;
+            tagEl.style.cssText = 'font-size:9px;padding:1px 7px;border-radius:8px;background:rgba(167,139,250,0.15);color:#a78bfa;';
+            tagsEl.appendChild(tagEl);
+          });
+
+          row.appendChild(topRow);
+          row.appendChild(descEl);
+          row.appendChild(tagsEl);
+          leftPane.appendChild(row);
+
+          // 默认选中第一个
+          if (idx === 0) setActive();
+        });
+      })
+      .catch(function (err) {
+        leftPane.textContent = '';
+        var errEl = document.createElement('div');
+        errEl.style.cssText = 'padding:24px;color:rgba(205,214,244,0.4);font-size:13px;';
+        errEl.textContent = '加载失败: ' + err.message;
+        leftPane.appendChild(errEl);
+      });
+  }
+
   // ═══ 注入样式 ═══
   function injectStyles() {
     if (document.querySelector('#myclaw-artifacts-styles')) return;