@philomelcc/dsh-workbench 0.1.4 → 0.1.6

package/README.md

@@ -1,26 +1,23 @@
 # @philomelcc/dsh-workbench
 
-The shell: a second top-bar row of workbench tabs, one page per module, plus the
-small API modules register against.
+外壳本体：顶部第二行的标签切换、每个模块一整页，以及模块注册用的那套小 API。
 
-This package does almost nothing on its own — install it together with at least
-one module:
+它单独装没什么用——至少配一个模块：
 
 ```powershell
 dsh plugin --profile web add @philomelcc/dsh-workbench
 dsh plugin --profile web add @philomelcc/dsh-status-monitor
 ```
 
-Contract: [`docs/SPEC.md`](../../docs/SPEC.md) · module template: [`template/`](../../template) ·
-ready-made modules: [status monitor](../status-monitor), [download center](../download-center).
+契约：[`docs/SPEC.md`](../../docs/SPEC.md) · 模板：[`template/`](../../template) ·
+现成模块：[状态监控](../status-monitor)、[下载中心](../download-center)。
 
-What the shell provides:
+外壳提供：
 
-- `registerView({ id, title, icon, component, order, subtitle, badge, tab })` —
-  one tab, one full page;
-- `components` (StatusDot, Card, SectionHeader, EmptyState, Spinner, Button, Field);
-- `tokens` (theme colors that follow light/dark);
-- `apiVersion` — `1` today;
-- `refresh()` — repaint the tab row after a badge changed.
+- `registerView({ id, title, icon, component, order, subtitle, badge, tab })` —— 一个标签、一整页；
+- `components`（StatusDot / Card / SectionHeader / EmptyState / Spinner / Button / Field）；
+- `tokens`（跟随明暗主题的颜色 token）；
+- `apiVersion` —— 目前是 `1`；
+- `refresh()` —— 角标变化后重绘标签行。
 
-MIT.
+MIT。

package/client.js

@@ -442,10 +442,10 @@ window.__ModuleLoader__.load({
     // localStorage by us.
     const PAPER_KEY = 'dsh-workbench:paper';
     const PAPER_TOKENS = {
-      '--dsw-alias-bg-base': '#f4efe3',
-      '--dsw-alias-bg-layer-1': '#efe9db',
-      '--dsw-alias-bg-layer-2': '#e7dfcd',
-      '--dsw-alias-bg-overlay': '#fbf7ee',
+      '--dsw-alias-bg-base': '#f7f3ea',
+      '--dsw-alias-bg-layer-1': '#f2ece0',
+      '--dsw-alias-bg-layer-2': '#ece5d6',
+      '--dsw-alias-bg-overlay': '#faf5e9',
       '--dsw-alias-border-l1': '#d8cfba',
       '--dsw-alias-border-l2': '#c6bba2',
       '--dsw-alias-brand-primary': '#8a6a45',
@@ -455,7 +455,33 @@ window.__ModuleLoader__.load({
       '--dsw-alias-state-warn-primary': '#a8792c',
       '--dsw-alias-state-success-primary': '#4f7a5a',
       '--dsw-alias-state-idle-primary': '#a49a89',
-      '--dsw-specific-sidebar-fill': '#efe9db',
+      '--dsw-specific-sidebar-fill': '#f2ece0',
+      // Chat bubbles: the light base uses a pale DeepSeek blue, which looks
+      // wrong on paper. These two are outside the alias layer.
+      '--dsw-specific-bubble': '#f2ecdf',
+      '--dsw-specific-bubble-highlight': '#e9dfcb',
+      // Pale blue surfaces the alias list does not cover: command chips,
+      // reference pills, selected file tabs, "load earlier", tool cards.
+      '--dsw-alias-state-business-tertiary': '#f1e9da',
+      '--dsw-alias-state-business-primary': '#8a6a45',
+      '--dsw-specific-sidebar-nav-item-active-accent': '#f1e9da',
+      '--dsw-specific-sidebar-nav-item-active': '#efe9db',
+      '--dsw-specific-selector': '#f1e9da',
+      '--dsw-specific-input-major': '#f2ece0',
+      '--dsw-specific-tip': '#f7f2e7',
+      '--dsw-specific-menu': '#fcf9f3',
+      // The neutral greys are blue-tinted. Buttons ("load earlier"), inputs,
+      // chips and cards read their pale surfaces from this ramp, so warm it up
+      // too; deep steps stay untouched because they are text/borders.
+      '--dsw-static-neutral-bluish-00': '#fbf6ea',
+      '--dsw-static-neutral-bluish-50': '#faf6ee',
+      '--dsw-static-neutral-bluish-55': '#f8f4ea',
+      '--dsw-static-neutral-bluish-60': '#f7f3ea',
+      '--dsw-static-neutral-bluish-75': '#f4eee1',
+      '--dsw-static-neutral-bluish-90': '#f2ecdf',
+      '--dsw-static-neutral-bluish-100': '#efe9db',
+      '--dsw-static-neutral-bluish-150': '#ece6d7',
+      '--dsw-static-neutral-bluish-200': '#e7dfcd',
     };
 
     // Swatches double as both the current-state indicator and the toggle.
@@ -504,12 +530,55 @@ window.__ModuleLoader__.load({
           try { paperDispose(); } catch (_error) { /* already gone */ }
           paperDispose = null;
         }
+        // Marker for paper-only rules (code surfaces) that tokens cannot reach.
+        try {
+          if (on) document.body.setAttribute('data-wb-paper', '1');
+          else document.body.removeAttribute('data-wb-paper');
+        } catch (_error) { /* body not ready */ }
       }
 
       function ThemeSwitcher() {
+        const boxRef = React.useRef(null);
         const [paper, setPaperState] = React.useState(readPaper);
         const [preference, setPreference] = React.useState(readPreference);
 
+        // The account block is fixed to the right and changes width (a reconnect
+        // banner widens it), so park the swatches against its measured left edge
+        // instead of a guessed margin.
+        React.useEffect(() => {
+          const box = boxRef.current;
+          if (!box) return undefined;
+          const place = () => {
+            const settings = document.querySelector('[class*="settingsArea"]');
+            if (!settings) {
+              box.style.right = '150px';
+              return;
+            }
+            const rect = settings.getBoundingClientRect();
+            if (rect.width > 0) box.style.right = (rect.width + 16 + 12) + 'px';
+            // Same box as the account block, so `align-items: center` lands on
+            // the account's optical center instead of a guessed offset.
+            if (rect.height > 0) {
+              box.style.top = rect.top + 'px';
+              box.style.height = rect.height + 'px';
+            }
+          };
+          place();
+          let observer = null;
+          const settings = document.querySelector('[class*="settingsArea"]');
+          if (settings && typeof ResizeObserver !== 'undefined') {
+            observer = new ResizeObserver(place);
+            // border-box: the account's width changes through its chrome, not
+            // just its text content.
+            observer.observe(settings, { box: 'border-box' });
+          }
+          window.addEventListener('resize', place);
+          return () => {
+            if (observer) observer.disconnect();
+            window.removeEventListener('resize', place);
+          };
+        }, []);
+
         // Re-apply the saved paper layer after a reload / remount.
         React.useEffect(() => {
           if (readPaper()) setPaper(true);
@@ -555,7 +624,11 @@ window.__ModuleLoader__.load({
         };
 
         return h('div', {
-          style: { display: 'inline-flex', alignItems: 'center', gap: 8, flex: '0 0 auto' },
+          ref: boxRef,
+          style: {
+            position: 'fixed', top: 2, height: 40, zIndex: 301,
+            display: 'inline-flex', alignItems: 'center', gap: 8,
+          },
           title: '主题',
         },
           THEME_SWATCHES.map((swatch) => {
@@ -593,7 +666,9 @@ window.__ModuleLoader__.load({
         const tone = snap.phase === 'ready' ? balanceTone(snap.amount) : 'muted';
         const value = snap.phase === 'ready' && typeof snap.amount === 'number' ? snap.amount.toFixed(2) : (snap.phase === 'loading' ? '…' : '—');
         const toneColor = tone === 'green' ? '#4ade80' : tone === 'amber' ? '#e3b341' : tone === 'red' ? '#f87171' : 'var(--dsw-alias-label-secondary)';
-        const borderBase = tone === 'green' ? '#2f4a37' : tone === 'amber' ? '#4a3d22' : tone === 'red' ? '#4a2a2a' : 'var(--dsw-alias-border-l2)';
+        // The border follows the theme: hard-coded dark greens read as a black
+        // ring on light/paper backgrounds.
+        const borderBase = 'var(--dsw-alias-border-l2)';
         const at = new Date(snap.updatedAt || Date.now()).toLocaleTimeString('zh-CN', { hour12: false });
         return h('div', {
           style: { position: 'relative', display: 'inline-flex' },
@@ -789,7 +864,7 @@ window.__ModuleLoader__.load({
               iconBtn('plugins', '插件', IconPlugins),
               iconBtn('schedules', '自动化任务', IconClock),
             ),
-            h('div', { style: { flex: '0 0 auto', marginRight: 150 } }, h(ThemeSwitcher)),
+            h(ThemeSwitcher),
           ),
           h('div', { style: { height: 45, display: 'flex', alignItems: 'center', gap: 8, padding: '0 14px', borderTop: '1px solid var(--dsw-alias-border-l1)' } },
             h('div', { ref: tabsRef, style: { position: 'relative', display: 'flex', alignItems: 'center', gap: 4, flex: 1, overflowX: 'auto', overflowY: 'hidden' } },
@@ -1116,6 +1191,23 @@ div[data-row-key^="session:"]:has(svg[data-state="ongoing"]) svg[data-state="ong
 .dsh-glow-on > span:first-child > svg {
   display: none !important;
 }
+/* paper: every card-like surface follows the paper base; the code surface is
+   deeper and overrides the card rule below (same specificity, later wins). */
+body[data-wb-paper="1"] [class*="_tile"],
+body[data-wb-paper="1"] [class*="_card"],
+body[data-wb-paper="1"] [class*="_Card"],
+body[data-wb-paper="1"] [class*="_fileCard"],
+body[data-wb-paper="1"] [class*="hz8-rW_header"] {
+  background: #f2ece0 !important;
+}
+body[data-wb-paper="1"] .md-code-block,
+body[data-wb-paper="1"] pre,
+body[data-wb-paper="1"] [class*="_header_1mqf1"] {
+  background: #ece2cc !important;
+}
+body[data-wb-paper="1"] :not(pre) > code {
+  background: #efe6d4 !important;
+}
 `;
 
     function installGlow(ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@philomelcc/dsh-workbench",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "description": "Workbench shell for DeepSeek Harness: a view/page module API, shared UI primitives and a top-bar switcher.",
   "license": "MIT",