twskin 0.5.4 → 0.5.6

package/runtime/skin.js

@@ -7,6 +7,7 @@
   const TOKEN_MAP = self.DREAM_SKIN_TOKEN_MAP;
   const COMPONENT_MAP = self.DREAM_SKIN_COMPONENT_MAP;
   const CATALOG = __CATALOG__;
+  let themeSyncState = __THEME_SYNC_STATE__;
   const DEFAULT_THEME = __DEFAULT_THEME__;
   const VERSION = __VERSION__;
   const BASE_CSS = __BASE_CSS__;
@@ -664,25 +665,39 @@ ${selector} {
   const configToggle = document.createElement("button");
   configToggle.className = "ds-config-toggle";
   configToggle.type = "button";
-  configToggle.textContent = "配置";
+  configToggle.textContent = "当前主题";
   configToggle.title = "查看当前主题配置";
+  const globalToggle = document.createElement("button");
+  globalToggle.className = "ds-global-toggle";
+  globalToggle.type = "button";
+  globalToggle.setAttribute("aria-label", "主题库设置");
+  globalToggle.setAttribute("aria-pressed", "false");
+  globalToggle.title = "主题库设置";
+  globalToggle.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 15.5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7Z"/><path d="m19.4 15 .1 1.7-2.1 2.1-1.7-.1-1.2 1-.4 1.6h-3l-.4-1.6-1.2-1-1.7.1-2.1-2.1.1-1.7-1-1.2L3 13.4v-3l1.6-.4 1-1.2-.1-1.7 2.1-2.1 1.7.1 1.2-1 .4-1.6h3l.4 1.6 1.2 1 1.7-.1 2.1 2.1-.1 1.7 1 1.2 1.6.4v3l-1.6.4-1 1.2Z"/></svg>';
+  const syncButton = document.createElement("button");
+  syncButton.className = "ds-sync";
+  syncButton.type = "button";
+  syncButton.textContent = "检查更新";
+  syncButton.title = "检查官方主题更新";
   const reloadButton = document.createElement("button");
-  reloadButton.className = "ds-reload";
+  reloadButton.className = "ds-local-reload";
   reloadButton.type = "button";
-  reloadButton.innerHTML = '<span class="ds-reload-icon">↻</span>';
+  reloadButton.textContent = "重新扫描本地主题";
   reloadButton.title = "重新加载主题目录（新主题热加载）";
   const closeButton = document.createElement("button");
   closeButton.className = "ds-close";
   closeButton.type = "button";
   closeButton.textContent = "×";
   closeButton.title = "关闭 (Esc)";
-  headerActions.append(reloadButton, configToggle, closeButton);
+  headerActions.append(configToggle, globalToggle, closeButton);
   header.append(headerText, headerActions);
   const panelBody = document.createElement("div");
   panelBody.className = "ds-body";
 
   const galleryView = document.createElement("div");
   galleryView.className = "ds-gallery-view";
+  const syncBanner = document.createElement("div");
+  syncBanner.className = "ds-sync-banner";
   const configView = document.createElement("div");
   configView.className = "ds-config-view";
   const configHead = document.createElement("div");
@@ -709,6 +724,58 @@ ${selector} {
   blurSwitch.setAttribute("role", "switch");
   blurSwitch.setAttribute("aria-label", "面板模糊");
   blurRow.append(blurCopy, blurSwitch);
+  const globalView = document.createElement("div");
+  globalView.className = "ds-global-view";
+  const globalHead = document.createElement("div");
+  globalHead.className = "ds-global-head";
+  const globalTitle = document.createElement("div");
+  globalTitle.className = "ds-global-title";
+  globalTitle.textContent = "主题库设置";
+  const globalDesc = document.createElement("div");
+  globalDesc.className = "ds-global-desc";
+  globalDesc.textContent = "管理所有主题共用的更新与本地目录";
+  globalHead.append(globalTitle, globalDesc);
+  const checkRow = document.createElement("div");
+  checkRow.className = "ds-setting-row";
+  const checkCopy = document.createElement("div");
+  checkCopy.className = "ds-setting-copy";
+  const checkLabel = document.createElement("div");
+  checkLabel.className = "ds-setting-label";
+  checkLabel.textContent = "检查官方主题更新";
+  const checkDesc = document.createElement("div");
+  checkDesc.className = "ds-setting-desc";
+  checkDesc.setAttribute("aria-live", "polite");
+  checkCopy.append(checkLabel, checkDesc);
+  checkRow.append(checkCopy, syncButton);
+  const updateRow = document.createElement("div");
+  updateRow.className = "ds-setting-row";
+  const updateCopy = document.createElement("div");
+  updateCopy.className = "ds-setting-copy";
+  const updateLabel = document.createElement("div");
+  updateLabel.className = "ds-setting-label";
+  updateLabel.textContent = "自动更新官方主题";
+  const updateDesc = document.createElement("div");
+  updateDesc.className = "ds-setting-desc";
+  updateDesc.textContent = "发现兼容的新主题或更新时自动下载安装";
+  updateCopy.append(updateLabel, updateDesc);
+  const updateSwitch = document.createElement("button");
+  updateSwitch.className = "ds-switch";
+  updateSwitch.type = "button";
+  updateSwitch.setAttribute("role", "switch");
+  updateSwitch.setAttribute("aria-label", "自动更新官方主题");
+  updateRow.append(updateCopy, updateSwitch);
+  const localThemesRow = document.createElement("div");
+  localThemesRow.className = "ds-setting-row ds-local-themes-row";
+  const localThemesCopy = document.createElement("div");
+  localThemesCopy.className = "ds-setting-copy";
+  const localThemesLabel = document.createElement("div");
+  localThemesLabel.className = "ds-setting-label";
+  localThemesLabel.textContent = "本地主题";
+  const localThemesDesc = document.createElement("div");
+  localThemesDesc.className = "ds-setting-desc";
+  localThemesDesc.textContent = "新增或修改 themes/ 目录后重新读取";
+  localThemesCopy.append(localThemesLabel, localThemesDesc);
+  localThemesRow.append(localThemesCopy, reloadButton);
   const brightnessRow = document.createElement("div");
   brightnessRow.className = "ds-setting-row ds-setting-row-slider";
   const brightnessHead = document.createElement("div");
@@ -769,8 +836,21 @@ ${selector} {
   resetActions.className = "ds-reset-actions";
   resetActions.append(resetCancel, resetConfig);
   configHead.append(configName, copyConfig);
+  const restoreRow = document.createElement("div");
+  restoreRow.className = "ds-setting-row ds-restore-row";
+  const restoreCopy = document.createElement("div");
+  restoreCopy.className = "ds-setting-copy";
+  const restoreLabel = document.createElement("div");
+  restoreLabel.className = "ds-setting-label";
+  restoreLabel.textContent = "恢复原生外观";
+  const restoreDesc = document.createElement("div");
+  restoreDesc.className = "ds-setting-desc";
+  restoreDesc.textContent = "停止应用主题化，并恢复 TRAE 默认界面";
+  restoreCopy.append(restoreLabel, restoreDesc);
+  restoreRow.append(restoreCopy, resetActions);
   configView.append(configHead, brightnessRow, mainOverlayRow, blurRow, configCode);
-  panelBody.append(galleryView, configView);
+  globalView.append(globalHead, syncBanner, checkRow, updateRow, localThemesRow, restoreRow);
+  panelBody.append(galleryView, configView, globalView);
 
   // 分类 Tab（固定在头部下，不随列表滚动；选择持久化）
   const CATEGORY_LS = `${LS_PREFIX}category`;
@@ -811,25 +891,31 @@ ${selector} {
   const footerText = document.createElement("span");
   footerText.className = "ds-footer-text";
   footerText.textContent = `TRAE Work Skin v${VERSION}`;
-  footer.append(footerText, resetActions);
+  footer.append(footerText);
   panel.append(header, tabsBar, panelBody, footer);
 
-  let configOpen = false;
-  const showConfig = (open) => {
-    configOpen = Boolean(open);
-    // 配置视图只展示当前主题设置；返回画廊时再恢复分类栏和主题列表。
-    tabsBar.style.display = configOpen ? "none" : "";
-    galleryView.style.display = configOpen ? "none" : "";
-    configView.style.display = configOpen ? "block" : "";
-    configToggle.textContent = configOpen ? "主题" : "配置";
-    configToggle.title = configOpen ? "返回主题列表" : "查看当前主题配置";
+  let activeView = "gallery";
+  const showView = (view) => {
+    activeView = view;
+    // 详情页只呈现对应所有权范围的设置，画廊则恢复主题库操作与分类列表。
+    tabsBar.style.display = view === "gallery" ? "" : "none";
+    galleryView.style.display = view === "gallery" ? "" : "none";
+    configView.style.display = view === "theme" ? "block" : "none";
+    globalView.style.display = view === "global" ? "block" : "none";
+    configToggle.textContent = view === "gallery" ? "当前主题" : "主题";
+    configToggle.title = view === "gallery" ? "查看当前主题配置" : "返回主题列表";
+    globalToggle.classList.toggle("ds-global-toggle-active", view === "global");
+    globalToggle.setAttribute("aria-pressed", String(view === "global"));
+    globalToggle.title = view === "global" ? "返回主题列表" : "主题库设置";
+    renderThemeSyncState();
   };
+  const showConfig = (open) => showView(open ? "theme" : "gallery");
   renderCurrentConfig = (theme = findTheme(
     (() => { try { return localStorage.getItem(LS_KEY); } catch { return null; } })(),
   )) => {
     if (!theme) return;
     const config = publicThemeConfig(theme);
-    configName.textContent = `${theme.name} · ${theme.id}`;
+    configName.textContent = `${theme.name} · ${theme.id} · v${theme.version || "0.0.0"}`;
     currentLabel.textContent = `当前：${theme.name}`;
     configCode.textContent = JSON.stringify(config, null, 2);
   };
@@ -840,6 +926,94 @@ ${selector} {
     blurSwitch.setAttribute("aria-checked", String(Boolean(enabled)));
     blurSwitch.title = enabled ? "关闭毛玻璃效果" : "启用毛玻璃效果";
   };
+  const requestThemeSync = (action, autoUpdate) => {
+    const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    window.__TRAE_DREAM_SKIN_SYNC_REQUEST__ = { id, action, ...(typeof autoUpdate === "boolean" ? { autoUpdate } : {}) };
+    themeSyncState = {
+      ...themeSyncState,
+      phase: action === "check" ? "checking" : action === "auto-update" ? "idle" : "downloading",
+      message: action === "check" ? "正在检查主题更新" : "正在同步官方主题",
+    };
+    renderThemeSyncState();
+  };
+  const syncSummary = () => {
+    if (themeSyncState.phase === "checking") return "正在检查主题更新…";
+    if (themeSyncState.phase === "downloading" || themeSyncState.phase === "installing") return themeSyncState.message || "正在同步官方主题…";
+    if (themeSyncState.phase === "update-available") return `发现 ${themeSyncState.newThemes || 0} 个新主题、${themeSyncState.updatedThemes || 0} 个更新`;
+    if (themeSyncState.phase === "success") return themeSyncState.message || "主题同步完成";
+    if (themeSyncState.phase === "error") return themeSyncState.message || "主题更新失败";
+    return "";
+  };
+  const SUCCESS_FEEDBACK_DURATION_MS = 4000;
+  let successFeedbackTimer = null;
+  const hasRecentSyncSuccess = () => {
+    if (themeSyncState.phase !== "success") return false;
+    const completedAt = Date.parse(themeSyncState.lastSuccessfulSyncAt || "");
+    return Number.isFinite(completedAt) && Date.now() - completedAt < SUCCESS_FEEDBACK_DURATION_MS;
+  };
+  const renderThemeSyncState = () => {
+    const phase = themeSyncState.phase || "idle";
+    const summary = syncSummary();
+    const updateCount = Number(themeSyncState.updateCount || 0);
+    const showSuccessFeedback = hasRecentSyncSuccess();
+    syncBanner.replaceChildren();
+    syncBanner.className = `ds-sync-banner ds-sync-${phase}`;
+    if (!summary || phase === "fresh" || phase === "idle" || (phase === "success" && !showSuccessFeedback) || activeView !== "global") {
+      syncBanner.style.display = "none";
+    } else {
+      syncBanner.style.display = "flex";
+      const text = document.createElement("span");
+      text.className = "ds-sync-copy";
+      text.textContent = summary;
+      syncBanner.append(text);
+      if (phase === "update-available") {
+        const install = document.createElement("button");
+        install.type = "button";
+        install.className = "ds-sync-action";
+        install.textContent = "立即更新";
+        install.addEventListener("click", (event) => {
+          event.stopPropagation();
+          requestThemeSync("sync");
+        });
+        syncBanner.append(install);
+      } else if (phase === "error") {
+        const retry = document.createElement("button");
+        retry.type = "button";
+        retry.className = "ds-sync-action";
+        retry.textContent = "重试";
+        retry.addEventListener("click", (event) => {
+          event.stopPropagation();
+          requestThemeSync("check");
+        });
+        syncBanner.append(retry);
+      }
+    }
+    syncButton.classList.toggle("ds-sync-pending", updateCount > 0);
+    syncButton.disabled = phase === "checking" || phase === "downloading" || phase === "installing";
+    syncButton.title = summary || "检查官方主题更新";
+    globalToggle.classList.toggle("ds-global-pending", updateCount > 0);
+    let checkStatusCopy = "尚未检查";
+    if (phase === "checking") checkStatusCopy = "正在检查更新…";
+    else if (phase === "update-available") checkStatusCopy = `发现 ${updateCount} 项更新`;
+    else if (phase === "success" && showSuccessFeedback) checkStatusCopy = "已完成同步";
+    else if (phase === "error") checkStatusCopy = "检查失败，可重试";
+    else if (themeSyncState.lastCheckedAt) checkStatusCopy = `上次检查：${new Date(themeSyncState.lastCheckedAt).toLocaleString()}`;
+    checkDesc.textContent = checkStatusCopy;
+    if (successFeedbackTimer) {
+      clearTimeout(successFeedbackTimer);
+      successFeedbackTimer = null;
+    }
+    if (showSuccessFeedback) {
+      const remaining = SUCCESS_FEEDBACK_DURATION_MS - (Date.now() - Date.parse(themeSyncState.lastSuccessfulSyncAt));
+      successFeedbackTimer = setTimeout(() => {
+        successFeedbackTimer = null;
+        renderThemeSyncState();
+      }, Math.max(0, remaining));
+    }
+    updateSwitch.setAttribute("aria-checked", String(Boolean(themeSyncState.autoUpdateThemes)));
+    updateSwitch.title = themeSyncState.autoUpdateThemes ? "关闭官方主题自动更新" : "开启官方主题自动更新";
+    footerText.textContent = `TRAE Work Skin v${VERSION}`;
+  };
   renderBrightnessControl = (theme = findTheme(
     (() => { try { return localStorage.getItem(LS_KEY); } catch { return null; } })(),
   ), value = theme ? backgroundBrightness(theme) : 1) => {
@@ -866,8 +1040,24 @@ ${selector} {
   };
   configToggle.addEventListener("click", (event) => {
     event.stopPropagation();
-    renderCurrentConfig();
-    showConfig(!configOpen);
+    if (activeView === "gallery") {
+      renderCurrentConfig();
+      showView("theme");
+    } else {
+      showView("gallery");
+    }
+  });
+  globalToggle.addEventListener("click", (event) => {
+    event.stopPropagation();
+    showView(activeView === "global" ? "gallery" : "global");
+  });
+  syncButton.addEventListener("click", (event) => {
+    event.stopPropagation();
+    requestThemeSync("check");
+  });
+  updateSwitch.addEventListener("click", (event) => {
+    event.stopPropagation();
+    requestThemeSync("auto-update", !themeSyncState.autoUpdateThemes);
   });
   copyConfig.addEventListener("click", async (event) => {
     event.stopPropagation();
@@ -976,7 +1166,7 @@ ${selector} {
     card.dataset.category = theme.category || "其他";
     const badge = document.createElement("span");
     badge.className = "ds-badge";
-    badge.textContent = "✓ 使用中";
+    badge.textContent = "当前主题";
     const preview = document.createElement("div");
     preview.className = "ds-preview";
     preview.style.backgroundImage = `url("${theme.art}")`;
@@ -986,6 +1176,10 @@ ${selector} {
     name.className = "ds-name";
     name.textContent = theme.name;
     meta.appendChild(name);
+    const version = document.createElement("span");
+    version.className = "ds-version";
+    version.textContent = `v${theme.version || "0.0.0"}`;
+    meta.appendChild(version);
     if (theme.desc) {
       const desc = document.createElement("span");
       desc.className = "ds-desc";
@@ -998,6 +1192,7 @@ ${selector} {
     galleryView.appendChild(card);
   }
   applyCategoryFilter();
+  renderThemeSyncState();
 
   const button = document.createElement("button");
   button.id = BUTTON_ID;
@@ -1025,12 +1220,26 @@ ${selector} {
   });
   reloadButton.addEventListener("click", (e) => {
     e.stopPropagation();
-    if (reloadButton.classList.contains("ds-reload-loading")) return;
-    reloadButton.classList.add("ds-reload-loading");
+    if (reloadButton.classList.contains("ds-local-reload-loading")) return;
+    reloadButton.classList.add("ds-local-reload-loading");
+    const original = reloadButton.textContent;
+    reloadButton.textContent = "正在扫描…";
     // 守护进程轮询到这个标记后会重建主题目录、重新注入并重新打开面板
     window.__TRAE_DREAM_SKIN_RELOAD_REQUEST__ = Date.now();
-    setTimeout(() => reloadButton.classList.remove("ds-reload-loading"), 6000);
+    setTimeout(() => {
+      reloadButton.classList.remove("ds-local-reload-loading");
+      reloadButton.textContent = original;
+    }, 6000);
   });
+  window.__TRAE_DREAM_SKIN_SYNC_LISTENER__ && window.removeEventListener("trae-dream-skin-sync-state", window.__TRAE_DREAM_SKIN_SYNC_LISTENER__);
+  window.__TRAE_DREAM_SKIN_SYNC_LISTENER__ = () => {
+    const next = window.__TRAE_DREAM_SKIN_SYNC_STATE__;
+    if (next && typeof next === "object") {
+      themeSyncState = next;
+      renderThemeSyncState();
+    }
+  };
+  window.addEventListener("trae-dream-skin-sync-state", window.__TRAE_DREAM_SKIN_SYNC_LISTENER__);
   document.addEventListener("click", (e) => {
     if (isPanelOpen() && !panel.contains(e.target)) setPanelOpen(false);
   });

package/runtime/styles/manager.css

@@ -60,27 +60,48 @@ body.trae-skin-v2 #trae-dream-skin-button {
 #trae-dream-skin-panel .ds-header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 5px; }
 #trae-dream-skin-panel .ds-config-toggle,
 #trae-dream-skin-panel .ds-close,
-#trae-dream-skin-panel .ds-reload {
+#trae-dream-skin-panel .ds-local-reload,
+#trae-dream-skin-panel .ds-global-toggle {
   border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 6px;
   color: inherit; background: rgba(255, 255, 255, 0.08);
   font: inherit; cursor: pointer;
 }
 #trae-dream-skin-panel .ds-config-toggle { padding: 3px 7px; }
+#trae-dream-skin-panel .ds-sync {
+  position: relative; flex: 0 0 auto; padding: 4px 8px; border-radius: 6px;
+  border: 1px solid rgba(124, 156, 255, 0.52); color: inherit;
+  background: rgba(124, 156, 255, 0.13); font: inherit; cursor: pointer;
+}
+#trae-dream-skin-panel .ds-sync.ds-sync-pending::after {
+  content: ""; position: absolute; top: -3px; right: -3px;
+  width: 6px; height: 6px; border-radius: 50%; background: #ff8d98;
+  border: 1px solid rgba(20, 22, 34, 0.9);
+}
 #trae-dream-skin-panel .ds-close,
-#trae-dream-skin-panel .ds-reload {
+#trae-dream-skin-panel .ds-local-reload,
+#trae-dream-skin-panel .ds-global-toggle {
   box-sizing: border-box; width: 23px; height: 23px; padding: 0;
   display: flex; align-items: center; justify-content: center;
   font-size: 14px; line-height: 1;
 }
+#trae-dream-skin-panel .ds-local-reload {
+  width: auto; height: auto; padding: 4px 7px; font-size: 10px; line-height: 1.2;
+}
+#trae-dream-skin-panel .ds-global-toggle { position: relative; padding: 0; }
+#trae-dream-skin-panel .ds-global-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
+#trae-dream-skin-panel .ds-global-toggle.ds-global-toggle-active { background: rgba(124, 156, 255, 0.18); border-color: rgba(124, 156, 255, 0.56); }
+#trae-dream-skin-panel .ds-global-toggle.ds-global-toggle-active:hover { background: rgba(124, 156, 255, 0.24); }
+#trae-dream-skin-panel .ds-global-toggle.ds-global-pending::after {
+  content: ""; position: absolute; top: -3px; right: -3px; width: 6px; height: 6px;
+  border-radius: 50%; background: #ff8d98; border: 1px solid rgba(20, 22, 34, 0.9);
+}
 #trae-dream-skin-panel .ds-config-toggle:hover,
+#trae-dream-skin-panel .ds-sync:hover:not(:disabled),
 #trae-dream-skin-panel .ds-close:hover,
-#trae-dream-skin-panel .ds-reload:hover { background: rgba(255, 255, 255, 0.14); }
-@keyframes trae-skin-spin { to { transform: rotate(360deg); } }
-#trae-dream-skin-panel .ds-reload-icon { display: inline-block; line-height: 1; }
-#trae-dream-skin-panel .ds-reload.ds-reload-loading { pointer-events: none; }
-#trae-dream-skin-panel .ds-reload.ds-reload-loading .ds-reload-icon {
-  animation: trae-skin-spin 0.8s linear infinite;
-}
+#trae-dream-skin-panel .ds-local-reload:hover,
+#trae-dream-skin-panel .ds-global-toggle:hover { background: rgba(255, 255, 255, 0.14); }
+#trae-dream-skin-panel .ds-sync:disabled { opacity: 0.55; cursor: wait; }
+#trae-dream-skin-panel .ds-local-reload.ds-local-reload-loading { opacity: 0.55; cursor: wait; }
 #trae-dream-skin-panel .ds-body {
   flex: 1 1 auto; overflow-y: auto; padding: 12px;
   scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
@@ -92,8 +113,25 @@ body.trae-skin-v2 #trae-dream-skin-button {
 #trae-dream-skin-panel .ds-gallery-view {
   display: grid; grid-template-columns: 1fr; gap: 4px;
 }
+#trae-dream-skin-panel .ds-sync-banner {
+  display: none; align-items: center; justify-content: space-between; gap: 8px;
+  margin: 0 0 9px; padding: 7px 8px; border-radius: 8px;
+  border: 1px solid rgba(124, 156, 255, 0.38); background: rgba(124, 156, 255, 0.1);
+  font-size: 10px;
+}
+#trae-dream-skin-panel .ds-sync-banner.ds-sync-error {
+  border-color: rgba(255, 102, 117, 0.58); background: rgba(255, 82, 99, 0.1);
+}
+#trae-dream-skin-panel .ds-sync-copy { min-width: 0; flex: 1 1 auto; }
+#trae-dream-skin-panel .ds-sync-action {
+  flex: 0 0 auto; padding: 3px 7px; border-radius: 5px;
+  border: 1px solid rgba(255, 255, 255, 0.2); color: inherit;
+  background: rgba(255, 255, 255, 0.1); font: inherit; cursor: pointer;
+}
+#trae-dream-skin-panel .ds-sync-action:hover { background: rgba(255, 255, 255, 0.18); }
 #trae-dream-skin-panel .ds-gallery-view,
-#trae-dream-skin-panel .ds-config-view { animation: trae-skin-fade-in 0.15s ease; }
+#trae-dream-skin-panel .ds-config-view,
+#trae-dream-skin-panel .ds-global-view { animation: trae-skin-fade-in 0.15s ease; }
 /* 分类 Tab */
 #trae-dream-skin-panel .ds-tabs {
   flex: 0 0 auto; display: flex; gap: 4px;
@@ -131,7 +169,8 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-tab.ds-tab-active {
   min-width: 0; opacity: 0.5;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-#trae-dream-skin-panel .ds-config-view { display: none; }
+#trae-dream-skin-panel .ds-config-view,
+#trae-dream-skin-panel .ds-global-view { display: none; }
 #trae-dream-skin-panel .ds-config-head {
   display: flex; align-items: center; justify-content: space-between;
   gap: 8px; margin: 2px 2px 8px;
@@ -140,6 +179,9 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-tab.ds-tab-active {
   min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
   font-weight: 600;
 }
+#trae-dream-skin-panel .ds-global-head { margin: 2px 2px 8px; }
+#trae-dream-skin-panel .ds-global-title { font-weight: 600; }
+#trae-dream-skin-panel .ds-global-desc { margin-top: 1px; font-size: 10px; opacity: 0.58; }
 #trae-dream-skin-panel .ds-setting-row {
   display: flex; align-items: center; justify-content: space-between;
   gap: 12px; margin: 0 2px 9px; padding: 8px 9px;
@@ -273,6 +315,10 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-tab.ds-tab-active {
   display: block; font-size: 12px; font-weight: 600;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
+#trae-dream-skin-panel .ds-version {
+  display: block; margin-top: 1px; font-size: 9px; opacity: 0.48;
+  font-variant-numeric: tabular-nums;
+}
 #trae-dream-skin-panel .ds-desc {
   display: block; margin-top: 1px; font-size: 10px; opacity: 0.65;
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -280,10 +326,12 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-tab.ds-tab-active {
 #trae-dream-skin-panel .ds-badge {
   flex: 0 0 auto;
   display: none; align-items: center; gap: 3px;
-  padding: 2px 6px; border-radius: 999px;
-  background: #7c9cff; color: #0a0a0a;
+  padding: 0; color: #7c9cff;
   font-size: 10px; font-weight: 600;
 }
+#trae-dream-skin-panel .ds-badge::before {
+  content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor;
+}
 #trae-dream-skin-panel .ds-card.ds-active .ds-badge { display: flex; }
 body.trae-skin-v2 #trae-dream-skin-panel {
   color: var(--trae-skin-text-primary);
@@ -296,10 +344,7 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-card.ds-active {
   border-color: var(--trae-skin-accent);
   background: var(--trae-skin-accent-subtle);
 }
-body.trae-skin-v2 #trae-dream-skin-panel .ds-badge {
-  background: var(--trae-skin-accent);
-  color: var(--trae-skin-accent-on);
-}
+body.trae-skin-v2 #trae-dream-skin-panel .ds-badge { color: var(--trae-skin-accent); }
 body.trae-skin-v2 #trae-dream-skin-panel .ds-header { border-bottom-color: var(--trae-skin-border-subtle); }
 body.trae-skin-v2 #trae-dream-skin-panel .ds-footer { border-top-color: var(--trae-skin-border-subtle); }
 body.trae-skin-v2 #trae-dream-skin-panel .ds-body::-webkit-scrollbar-thumb { background: var(--trae-skin-scrollbar-thumb); }
@@ -307,7 +352,8 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-body::-webkit-scrollbar-thumb:hover
 body.trae-skin-effects-max #trae-dream-skin-panel .ds-header { padding-right: 16px; }
 body.trae-skin-v2 #trae-dream-skin-panel .ds-config-toggle,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-close,
-body.trae-skin-v2 #trae-dream-skin-panel .ds-reload,
+body.trae-skin-v2 #trae-dream-skin-panel .ds-local-reload,
+body.trae-skin-v2 #trae-dream-skin-panel .ds-global-toggle,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-copy-config,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-reset-config,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-reset-cancel {
@@ -316,14 +362,21 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-reset-cancel {
   border-color: var(--trae-skin-border-default);
 }
 body.trae-skin-v2 #trae-dream-skin-panel .ds-config-toggle:hover,
+body.trae-skin-v2 #trae-dream-skin-panel .ds-sync:hover:not(:disabled),
 body.trae-skin-v2 #trae-dream-skin-panel .ds-close:hover,
-body.trae-skin-v2 #trae-dream-skin-panel .ds-reload:hover,
+body.trae-skin-v2 #trae-dream-skin-panel .ds-local-reload:hover,
+body.trae-skin-v2 #trae-dream-skin-panel .ds-global-toggle:hover,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-copy-config:hover,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-reset-config:hover,
 body.trae-skin-v2 #trae-dream-skin-panel .ds-reset-cancel:hover {
   color: var(--trae-skin-accent);
   border-color: var(--trae-skin-accent);
 }
+body.trae-skin-v2 #trae-dream-skin-panel .ds-global-toggle.ds-global-toggle-active {
+  color: var(--trae-skin-accent);
+  border-color: var(--trae-skin-accent);
+  background: var(--trae-skin-accent-subtle);
+}
 body.trae-skin-v2 #trae-dream-skin-panel .ds-reset-config.ds-reset-armed {
   color: var(--trae-skin-error);
   border-color: var(--trae-skin-error);
@@ -337,6 +390,15 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-setting-row {
   background: var(--trae-skin-info-subtle);
   border-color: var(--trae-skin-border-subtle);
 }
+body.trae-skin-v2 #trae-dream-skin-panel .ds-sync-banner {
+  border-color: var(--trae-skin-border-default); background: var(--trae-skin-info-subtle);
+}
+body.trae-skin-v2 #trae-dream-skin-panel .ds-sync {
+  border-color: var(--trae-skin-border-strong); background: var(--trae-skin-accent-subtle);
+}
+body.trae-skin-v2 #trae-dream-skin-panel .ds-sync-banner.ds-sync-error {
+  border-color: var(--trae-skin-error); background: color-mix(in srgb, var(--trae-skin-error) 12%, transparent);
+}
 body.trae-skin-v2 #trae-dream-skin-panel .ds-switch[aria-checked="true"] {
   background: var(--trae-skin-accent);
   border-color: var(--trae-skin-border-strong);