twskin 0.5.5 → 0.5.7

package/CHANGELOG.md

@@ -5,6 +5,34 @@ All notable changes to this package are documented here. This project follows
 
 ## [Unreleased]
 
+## [0.5.7] - 2026-07-29
+
+### Fixed
+
+- Prevented theme artwork from bleeding through right-side working content by
+  making layout-surface ownership a runtime contract. The main workspace now
+  retains its declared surface color, opacity, and blur beneath Markdown,
+  Task Summary, and Code/Design content.
+- Updated `Solvay 1927 · Solarized Light` to theme version `1.0.4`, restoring
+  a readable warm-paper surface in the right workspace and Monaco editor.
+
+### Changed
+
+- Added catalog validation that rejects official theme CSS which overrides a
+  runtime-owned layout surface directly; themes use surface-decoration
+  variables for optional texture instead.
+
+## [0.5.6] - 2026-07-27
+
+### Changed
+
+- Reorganized Theme Manager controls by ownership: current-theme settings now
+  contain only per-theme appearance controls, while catalog updates, local theme
+  scanning, and restoring TRAE's native appearance live in Theme Library Settings.
+- Moved Theme Library Settings to a compact, accessible gear button in the
+  manager header. Manual update checks and their status now live there, keeping
+  the theme gallery focused on browsing and switching themes.
+
 ## [0.5.5] - 2026-07-27
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twskin",
-  "version": "0.5.5",
+  "version": "0.5.7",
   "description": "An unofficial community theme manager and CLI for TRAE Work on macOS.",
   "type": "module",
   "bin": {

package/runtime/injector.mjs

@@ -16,7 +16,7 @@ import { spawnSync } from "node:child_process";
 import { fileURLToPath } from "node:url";
 
 const ROOT = path.dirname(fileURLToPath(import.meta.url));
-const VERSION = "0.5.5";
+const VERSION = "0.5.7";
 const DATA_DIR = process.env.TWSKIN_DATA_DIR || path.join(os.homedir(), ".trae-work-skin");
 
 function parseArgs(argv) {

package/runtime/manifest.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "packageVersion": "0.5.5",
+  "packageVersion": "0.5.7",
   "themesBundled": false,
   "files": [
     {
@@ -11,7 +11,7 @@
     {
       "path": "injector.mjs",
       "size": 31308,
-      "sha256": "ed68cba722846616215727222eb8588ac7dcb7fac1b4e7b8b04b27f6146b9db4"
+      "sha256": "b1ea0108ab8e4449bb509de458705e0019cad3d342fb1ef9fcd8ec98c890bf79"
     },
     {
       "path": "restore.sh",
@@ -20,8 +20,8 @@
     },
     {
       "path": "skin.js",
-      "size": 56513,
-      "sha256": "190e85b43a0c7d901a9b25cde65d19767bf1099901fb8e75f9fce7a40e2c3ea0"
+      "size": 61967,
+      "sha256": "c4b177a30b7d0681c28324d8042e0e75972df71924120342a1b852a8e0ff5cf0"
     },
     {
       "path": "start.sh",
@@ -30,13 +30,13 @@
     },
     {
       "path": "styles/base.css",
-      "size": 32439,
-      "sha256": "cfd57424d2b31732a44e0dd59410ab039d9842017112e6bd688a37db4831262a"
+      "size": 33535,
+      "sha256": "0356d33f4197461e325eb563471219064ded7cc75e835c28de6dbedb919c2a05"
     },
     {
       "path": "styles/manager.css",
-      "size": 17342,
-      "sha256": "b765d8ad89324af100794c653a23d64e1e647d78a7e9d815eb912189974d7dfc"
+      "size": 19040,
+      "sha256": "4a8acef7f2dddbcd61e5b1460a7639bd52478e9131099eb699874e9bffb0c87c"
     },
     {
       "path": "token-map.mjs",

package/runtime/skin.js

@@ -665,24 +665,31 @@ ${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.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(syncButton, reloadButton, configToggle, closeButton);
+  headerActions.append(configToggle, globalToggle, closeButton);
   header.append(headerText, headerActions);
   const panelBody = document.createElement("div");
   panelBody.className = "ds-body";
@@ -717,6 +724,29 @@ ${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");
@@ -734,6 +764,18 @@ ${selector} {
   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");
@@ -794,8 +836,21 @@ ${selector} {
   resetActions.className = "ds-reset-actions";
   resetActions.append(resetCancel, resetConfig);
   configHead.append(configName, copyConfig);
-  configView.append(configHead, updateRow, brightnessRow, mainOverlayRow, blurRow, configCode);
-  panelBody.append(syncBanner, galleryView, configView);
+  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);
+  globalView.append(globalHead, syncBanner, checkRow, updateRow, localThemesRow, restoreRow);
+  panelBody.append(galleryView, configView, globalView);
 
   // 分类 Tab（固定在头部下，不随列表滚动；选择持久化）
   const CATEGORY_LS = `${LS_PREFIX}category`;
@@ -836,19 +891,25 @@ ${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; } })(),
   )) => {
@@ -883,12 +944,21 @@ ${selector} {
     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") {
+    if (!summary || phase === "fresh" || phase === "idle" || (phase === "success" && !showSuccessFeedback) || activeView !== "global") {
       syncBanner.style.display = "none";
     } else {
       syncBanner.style.display = "flex";
@@ -918,13 +988,31 @@ ${selector} {
         syncBanner.append(retry);
       }
     }
-    syncButton.classList.toggle("ds-sync-pending", Number(themeSyncState.updateCount || 0) > 0);
+    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 ? "关闭官方主题自动更新" : "开启官方主题自动更新";
-    const checkedAt = themeSyncState.lastCheckedAt ? new Date(themeSyncState.lastCheckedAt).toLocaleString() : "尚未检查";
-    footerText.textContent = `TRAE Work Skin v${VERSION} · 主题更新：${checkedAt}`;
+    footerText.textContent = `TRAE Work Skin v${VERSION}`;
   };
   renderBrightnessControl = (theme = findTheme(
     (() => { try { return localStorage.getItem(LS_KEY); } catch { return null; } })(),
@@ -952,8 +1040,16 @@ ${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();
@@ -1070,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}")`;
@@ -1124,11 +1220,16 @@ ${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__ = () => {

package/runtime/styles/base.css

@@ -73,10 +73,12 @@ body.trae-skin-v2 {
 }
 body.trae-skin-v2 .task-list-panel {
   background-color: var(--trae-skin-left-surface) !important;
-  background-image: var(--trae-skin-left-art-layer, none) !important;
-  background-position: center, var(--trae-skin-left-art-position, center) !important;
-  background-size: cover, var(--trae-skin-left-art-size, cover) !important;
-  background-repeat: no-repeat !important;
+  background-image:
+    var(--trae-skin-left-decoration, none),
+    var(--trae-skin-left-art-layer, none) !important;
+  background-position: var(--trae-skin-left-decoration-position, center), center, var(--trae-skin-left-art-position, center) !important;
+  background-size: var(--trae-skin-left-decoration-size, 100% 100%), 100% 100%, var(--trae-skin-left-art-size, cover) !important;
+  background-repeat: var(--trae-skin-left-decoration-repeat, no-repeat), no-repeat, no-repeat !important;
   border-right: 1px solid var(--trae-skin-divider) !important;
   backdrop-filter:
     blur(var(--trae-skin-left-blur))
@@ -86,7 +88,11 @@ body.trae-skin-v2 .task-list-panel {
     saturate(var(--trae-skin-left-saturation)) !important;
 }
 body.trae-skin-v2 .solo-lite-chat-panel-container {
-  background: var(--trae-skin-chat-surface) !important;
+  background-color: var(--trae-skin-chat-surface) !important;
+  background-image: var(--trae-skin-chat-decoration, none) !important;
+  background-position: var(--trae-skin-chat-decoration-position, center) !important;
+  background-size: var(--trae-skin-chat-decoration-size, 100% 100%) !important;
+  background-repeat: var(--trae-skin-chat-decoration-repeat, no-repeat) !important;
   border-right: 1px solid var(--trae-skin-divider) !important;
   backdrop-filter:
     blur(var(--trae-skin-chat-blur))
@@ -97,10 +103,12 @@ body.trae-skin-v2 .solo-lite-chat-panel-container {
 }
 body.trae-skin-v2 .solo-lite-main-area {
   background-color: var(--trae-skin-main-surface) !important;
-  background-image: var(--trae-skin-right-art-layer, none) !important;
-  background-position: center, var(--trae-skin-right-art-position, right center) !important;
-  background-size: cover, var(--trae-skin-right-art-size, auto 100%) !important;
-  background-repeat: no-repeat !important;
+  background-image:
+    var(--trae-skin-main-decoration, none),
+    var(--trae-skin-right-art-layer, none) !important;
+  background-position: var(--trae-skin-main-decoration-position, center), center, var(--trae-skin-right-art-position, right center) !important;
+  background-size: var(--trae-skin-main-decoration-size, 100% 100%), 100% 100%, var(--trae-skin-right-art-size, auto 100%) !important;
+  background-repeat: var(--trae-skin-main-decoration-repeat, no-repeat), no-repeat, no-repeat !important;
   backdrop-filter:
     blur(var(--trae-skin-main-blur))
     saturate(var(--trae-skin-main-saturation)) !important;
@@ -109,7 +117,11 @@ body.trae-skin-v2 .solo-lite-main-area {
     saturate(var(--trae-skin-main-saturation)) !important;
 }
 body.trae-skin-v2 .panel-container > .panel-content {
-  background: var(--trae-skin-landing-surface) !important;
+  background-color: var(--trae-skin-landing-surface) !important;
+  background-image: var(--trae-skin-landing-decoration, none) !important;
+  background-position: var(--trae-skin-landing-decoration-position, center) !important;
+  background-size: var(--trae-skin-landing-decoration-size, 100% 100%) !important;
+  background-repeat: var(--trae-skin-landing-decoration-repeat, no-repeat) !important;
   backdrop-filter:
     blur(var(--trae-skin-landing-blur))
     saturate(var(--trae-skin-landing-saturation)) !important;

package/runtime/styles/manager.css

@@ -59,37 +59,49 @@ 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-sync,
 #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; 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;
@@ -118,7 +130,8 @@ body.trae-skin-v2 #trae-dream-skin-button {
 }
 #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;
@@ -156,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;
@@ -165,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;
@@ -309,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);
@@ -325,19 +344,16 @@ 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); }
 body.trae-skin-v2 #trae-dream-skin-panel .ds-body::-webkit-scrollbar-thumb:hover { background: var(--trae-skin-scrollbar-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-sync,
 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 {
@@ -348,13 +364,19 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-reset-cancel {
 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);
@@ -371,6 +393,9 @@ body.trae-skin-v2 #trae-dream-skin-panel .ds-setting-row {
 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);
 }