dsh-width-tiers 1.0.0 → 1.0.2

package/README.md

@@ -47,6 +47,11 @@ Restart `dsh web` (the plugin loads at boot) and hard-refresh the page
 (Ctrl+Shift+R). A round button with five bars appears at the bottom-right.
 
 > Installing from a local checkout: `dsh plugin --profile web add file:/path/to/dsh-width-tiers`.
+> Local-development gotcha: `file:` dependencies are **copied** into the
+> profile's `node_modules` (pnpm does not symlink them). After editing the
+> plugin source, re-sync the copy (e.g. `rsync -a --delete --exclude .git
+> /path/to/dsh-width-tiers/ ~/.dsh/profiles/web/node_modules/dsh-width-tiers/`)
+> or re-install after removing it, then restart `dsh web` and hard-refresh.
 
 ## Usage
 
@@ -57,6 +62,14 @@ Restart `dsh web` (the plugin loads at boot) and hard-refresh the page
 - Non-standard tiers also close the details panel (re-closed automatically if
   reopened); `standard` leaves everything to the app.
 
+## Language
+
+All picker copy (tier labels, button `aria-label` and title) follows the
+app's **Settings → Language** (中文 / English), through the app's own locale
+service. Switching the language re-renders the button and menu immediately;
+when no explicit language is chosen the app falls back to the browser's
+language, and Chinese is the last resort. No plugin-side setting needed.
+
 ## How it works
 
 - The element that defines `--dsh-chat-content-width` is **located at
@@ -67,6 +80,9 @@ Restart `dsh web` (the plugin loads at boot) and hard-refresh the page
   simulating clicks.
 - The sidebar is only ever collapsed by the `full` tier; returning to
   `standard` restores it only if this plugin collapsed it.
+- Dictionaries are registered with the app's **locale service**
+  (`ctx.locale.register` / `bind`) and re-rendered through its change
+  subscription, so the copy always matches the app's active language.
 
 ## Limitations
 

package/README.zh.md

@@ -43,6 +43,11 @@ dsh plugin --profile web add dsh-width-tiers
 右下角会出现五条横条的圆形按钮。
 
 > 本地目录安装：`dsh plugin --profile web add file:/path/to/dsh-width-tiers`。
+> 本地开发注意：`file:` 依赖会被 **拷贝** 进 profile 的 node_modules（pnpm
+> 不会建软链）。改完插件源码后，需要重新同步拷贝（例如 `rsync -a --delete
+> --exclude .git /path/to/dsh-width-tiers/
+> ~/.dsh/profiles/web/node_modules/dsh-width-tiers/`）或先 remove 再 add，
+> 然后重启 `dsh web` 并硬刷新。
 
 ## 使用
 
@@ -51,6 +56,13 @@ dsh plugin --profile web add dsh-width-tiers
   随时点轨道图标展开，展开后保持展开。
 - 非标准档会关闭详情面板（被重新打开会自动再关）；标准档完全交给应用。
 
+## 多语言
+
+选择器里的所有文案（档位名、按钮的 `aria-label` 和标题）跟随应用的
+**设置 → 语言**（中文 / English），通过应用自身的 locale 服务实现。切换
+语言后按钮和菜单会立即重渲染；未显式选择语言时，应用会回退到浏览器语言，
+最后兜底中文。无需插件侧单独设置。
+
 ## 原理
 
 - 运行时**自动定位**定义 `--dsh-chat-content-width` 的元素（第一个计算值
@@ -58,6 +70,8 @@ dsh plugin --profile web add dsh-width-tiers
 - 面板操作走 **layout 服务**（`ctx.layout`），从不模拟点击。
 - 侧边栏只被「全宽」档收起；回到「标准」时，只有本插件自己收起的侧边栏
   才会被恢复展开（你手动收的不动）。
+- 字典注册到应用的 **locale 服务**（`ctx.locale.register` / `bind`），并
+  订阅其变更事件重渲染，文案始终与应用的当前语言一致。
 
 ## 已知限制
 

package/lib/client.js

@@ -35,18 +35,56 @@ window.__ModuleLoader__.load({
 		 *    active); `standard` leaves everything to the app.
 		 *  - The chosen tier persists in localStorage and is restored on the
 		 *    next visit.
+		 *  - All copy is localized through the app's locale service: tier
+		 *    labels and the button's aria/title follow Settings → Language
+		 *    (zh / en, browser-derived fallback) and re-render on switch.
 		 */
 		const KEY = "dsh.widthTier";
 		const OLD_KEY = "dsh.wide";
-		const SELF_HEAL_MS = 1000;
 		const READY_TIMEOUT_MS = 30000;
+		/* Self-heal cadence: DOM-driven (MutationObserver scheduling on the
+		 * next animation frame — before paint, so the width never flashes
+		 * default) with a low-frequency fallback and backoff retries while
+		 * the width root is missing (conversation-switch remount). */
+		const ROOT_RETRY_MIN_MS = 200;
+		const ROOT_RETRY_MAX_MS = 2000;
+		const FALLBACK_HEAL_MS = 2000;
+
+		/** Dictionary namespace owned by this plugin. */
+		const NS = "width-tiers";
+
+		//#region lib/types/client/locales.js
+		/** `width-tiers` namespace dictionaries (tier labels and picker copy). */
+		/** Simplified Chinese dictionary (the key-set source of truth). */
+		const zh = {
+			"tier.standard": "标准",
+			"tier.medium": "中等",
+			"tier.wide": "宽",
+			"tier.ultra": "超宽",
+			"tier.full": "全宽",
+			"button.aria": "对话区宽度档位：{label}（{value}），点击选择档位",
+			"button.title.summary": "对话区宽度档位：{label}（{value}）",
+			"button.title.hint": "点击选择：{list}"
+		};
+		/** English dictionary, checked complete against the zh key set. */
+		const en = {
+			"tier.standard": "Standard",
+			"tier.medium": "Medium",
+			"tier.wide": "Wide",
+			"tier.ultra": "Ultra",
+			"tier.full": "Full",
+			"button.aria": "Chat width tier: {label} ({value}). Click to choose a tier.",
+			"button.title.summary": "Chat width tier: {label} ({value})",
+			"button.title.hint": "Click to choose: {list}"
+		};
+		//#endregion
 
 		const TIERS = [
-			{ id: "standard", label: "标准", value: "748px", note: "默认阅读宽度" },
-			{ id: "medium", label: "中等", value: "960px" },
-			{ id: "wide", label: "宽", value: "1280px" },
-			{ id: "ultra", label: "超宽", value: "1400px" },
-			{ id: "full", label: "全宽", value: "100%", note: "占满窗口" }
+			{ id: "standard", key: "tier.standard", value: "748px" },
+			{ id: "medium", key: "tier.medium", value: "960px" },
+			{ id: "wide", key: "tier.wide", value: "1280px" },
+			{ id: "ultra", key: "tier.ultra", value: "1400px" },
+			{ id: "full", key: "tier.full", value: "100%" }
 		];
 
 		function tierOf(id) {
@@ -76,14 +114,18 @@ window.__ModuleLoader__.load({
 		//#endregion
 
 		/** Services required by the browser bundle. */
-		const inject = ["layout"];
+		const inject = ["layout", "locale"];
 
 		/**
 		 * Client plugin body: inject the styles, build the picker button and
 		 * menu, and drive the width tiers through the layout service.
-		 * @param ctx - client root context (layout injected).
+		 * @param ctx - client root context (layout + locale injected).
 		 */
 		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register(NS, {
+				zh,
+				en
+			}), "dsh-width-tiers: dictionaries");
 			ctx.effect(() => {
 				if (typeof document === "undefined") return;
 
@@ -93,6 +135,7 @@ window.__ModuleLoader__.load({
 				document.head.appendChild(styleTag);
 
 				const layout = ctx.layout;
+				const t = ctx.locale.bind(NS);
 
 				/* ---- helpers ---- */
 				const body = () => document.body;
@@ -137,25 +180,62 @@ window.__ModuleLoader__.load({
 
 				/* Locate the element that defines --dsh-chat-content-width at
 				 * runtime (first match wins; only one element declares it).
-				 * Cached; re-scanned whenever the cached node is gone. */
+				 * Cached; the app remounts the chat tree on conversation switch,
+				 * so re-location first walks the recorded child-index path from
+				 * <body> (React keeps the tree shape — O(depth), one style
+				 * read) and only falls back to a full scan. */
 				let widthRoot = null;
+				let widthPath = null;
 
-				function findWidthRoot() {
-					if (widthRoot !== null && document.contains(widthRoot)) return widthRoot;
-					widthRoot = null;
+				function hasWidthVar(el) {
+					return getComputedStyle(el)
+						.getPropertyValue("--dsh-chat-content-width")
+						.trim() !== "";
+				}
+
+				function recordWidthPath(el) {
+					const path = [];
+					let node = el;
+					while (node && node !== document.body) {
+						const parent = node.parentNode;
+						if (!parent || !parent.children) break;
+						path.unshift(Array.prototype.indexOf.call(parent.children, node));
+						node = parent;
+					}
+					widthPath = path.length > 0 ? path : null;
+				}
+
+				function scanWidthRoot() {
 					const all = document.querySelectorAll("[class]");
 					for (let i = 0; i < all.length; i++) {
-						const v = getComputedStyle(all[i])
-							.getPropertyValue("--dsh-chat-content-width")
-							.trim();
-						if (v) {
+						if (hasWidthVar(all[i])) {
 							widthRoot = all[i];
+							recordWidthPath(widthRoot);
 							return widthRoot;
 						}
 					}
+					widthRoot = null;
+					widthPath = null;
 					return null;
 				}
 
+				function findWidthRoot(allowScan) {
+					if (widthRoot !== null && document.contains(widthRoot)) return widthRoot;
+					if (widthPath !== null) {
+						let el = document.body;
+						for (let i = 0; i < widthPath.length; i++) {
+							el = el.children[widthPath[i]];
+							if (!el) break;
+						}
+						if (el && el !== widthRoot && document.contains(el) && hasWidthVar(el)) {
+							widthRoot = el;
+							return widthRoot;
+						}
+					}
+					if (allowScan === false) return null;
+					return scanWidthRoot();
+				}
+
 				function tierWidth(tier) {
 					switch (tier) {
 						case "medium": return "960px";
@@ -227,13 +307,16 @@ window.__ModuleLoader__.load({
 
 				function syncButton() {
 					const tier = currentTier();
-					const t = tierOf(tier);
+					const def = tierOf(tier);
+					const label = t(def.key);
+					const summary = t("button.title.summary", { label, value: def.value });
+					const hint = t("button.title.hint", {
+						list: TIERS.map((tierDef) => `${t(tierDef.key)} ${tierDef.value}`).join(" / ")
+					});
 					btn.innerHTML = barIcon(tier);
 					btn.classList.toggle("active", tier !== "standard");
-					btn.setAttribute("aria-label", `对话区宽度档位：${t.label}（${t.value}），点击选择档位`);
-					btn.title =
-						`对话区宽度档位：${t.label}（${t.value}）\n` +
-						"点击选择：标准 748px / 中等 960px / 宽 1280px / 超宽 1400px / 全宽 100%";
+					btn.setAttribute("aria-label", t("button.aria", { label, value: def.value }));
+					btn.title = `${summary}\n${hint}`;
 				}
 
 				/* ---- tier menu ---- */
@@ -242,15 +325,15 @@ window.__ModuleLoader__.load({
 				menu.setAttribute("role", "menu");
 				menu.hidden = true;
 
-				for (const t of TIERS) {
+				for (const def of TIERS) {
 					const item = document.createElement("button");
 					item.type = "button";
 					item.setAttribute("role", "menuitemradio");
-					item.setAttribute("data-tier", t.id);
-					item.innerHTML = `<span class="dshwm-label">${t.label}</span><span class="dshwm-value">${t.value}</span>`;
+					item.setAttribute("data-tier", def.id);
+					item.innerHTML = `<span class="dshwm-label">${t(def.key)}</span><span class="dshwm-value">${def.value}</span>`;
 					item.addEventListener("click", (e) => {
 						if (e && e.stopPropagation) e.stopPropagation();
-						applyTier(t.id);
+						applyTier(def.id);
 						hideMenu();
 					});
 					menu.appendChild(item);
@@ -263,6 +346,8 @@ window.__ModuleLoader__.load({
 						const on = items[i].getAttribute("data-tier") === tier;
 						items[i].classList.toggle("selected", on);
 						items[i].setAttribute("aria-checked", String(on));
+						const labelEl = items[i].querySelector(".dshwm-label");
+						if (labelEl) labelEl.textContent = t(tierOf(items[i].getAttribute("data-tier")).key);
 					}
 				}
 
@@ -301,6 +386,13 @@ window.__ModuleLoader__.load({
 					window.setTimeout(() => btn.classList.remove("pulse"), 700);
 				}
 
+				/* ---- re-render localized copy when the app language changes ---- */
+				const renderTexts = () => {
+					syncButton();
+					syncMenu();
+				};
+				const unsubscribeLocale = ctx.locale.subscribe(renderTexts);
+
 				/* ---- attach once the app shell has mounted ---- */
 				let attached = false;
 
@@ -318,6 +410,7 @@ window.__ModuleLoader__.load({
 					syncButton();
 					const saved = getSavedTier();
 					if (saved !== "standard") applyTier(saved);
+					startHealing();
 				}
 
 				const readyTimer = setInterval(attach, 300);
@@ -329,19 +422,107 @@ window.__ModuleLoader__.load({
 
 				/* ---- self-heal: keep the details panel closed for non-standard
 				 * tiers. The sidebar is never managed here — the user may expand
-				 * it any time. ---- */
-				const healTimer = setInterval(() => {
+				 * it any time. Driven by DOM mutations, scheduled on the next
+				 * animation frame (before the browser paints) instead of a fixed
+				 * hot loop: conversation switches remount the chat tree, and the
+				 * width override must land on the fresh root before its first
+				 * paint — otherwise the default width flashes for a frame.
+				 * While the new root has not appeared yet (mid-remount), full
+				 * scans are owned by a backoff retry; mutation-driven heals only
+				 * try the cheap path walk so DOM churn cannot storm. ---- */
+				let rootMissing = false;
+				let rootRetryDelay = ROOT_RETRY_MIN_MS;
+				let rootRetryTimer = null;
+				let healFrame = null;
+				let observer = null;
+				let fallbackTimer = null;
+
+				const scheduleFrame = typeof requestAnimationFrame === "function"
+					? (cb) => { healFrame = requestAnimationFrame(cb); }
+					: (cb) => { healFrame = window.setTimeout(cb, 0); };
+				const cancelFrame = typeof cancelAnimationFrame === "function"
+					? (id) => cancelAnimationFrame(id)
+					: (id) => window.clearTimeout(id);
+
+				function scheduleRootRetry() {
+					if (rootRetryTimer !== null) return;
+					rootRetryTimer = window.setTimeout(() => {
+						rootRetryTimer = null;
+						const tier = currentTier();
+						if (tier === "standard") return;
+						const prev = widthRoot;
+						const root = findWidthRoot();
+						if (root === null) {
+							rootRetryDelay = Math.min(rootRetryDelay * 2, ROOT_RETRY_MAX_MS);
+							scheduleRootRetry();
+						} else {
+							rootMissing = false;
+							rootRetryDelay = ROOT_RETRY_MIN_MS;
+							if (root !== prev) applyContentWidth(tier);
+						}
+					}, rootRetryDelay);
+				}
+
+				function heal(fromObserver) {
 					const tier = currentTier();
 					if (tier === "standard") return;
 					closeDetails();
-					if (widthRoot !== null && !document.contains(widthRoot)) findWidthRoot();
-				}, SELF_HEAL_MS);
+					const prev = widthRoot;
+					let root;
+					if (rootMissing) {
+						/* Mid-remount: a mutation-driven heal only walks the
+						 * recorded path (O(depth)) — the backoff retry owns
+						 * full scans until the new root exists. */
+						root = fromObserver ? findWidthRoot(false) : findWidthRoot();
+					} else {
+						root = findWidthRoot();
+					}
+					if (root === null) {
+						if (!rootMissing) {
+							rootMissing = true;
+							rootRetryDelay = ROOT_RETRY_MIN_MS;
+							scheduleRootRetry();
+						}
+						return;
+					}
+					if (rootMissing) {
+						rootMissing = false;
+						rootRetryDelay = ROOT_RETRY_MIN_MS;
+					}
+					if (root !== prev) applyContentWidth(tier);
+				}
+
+				function startHealing() {
+					if (typeof MutationObserver !== "undefined") {
+						observer = new MutationObserver(() => {
+							if (healFrame !== null) return;
+							scheduleFrame(() => {
+								healFrame = null;
+								heal(true);
+							});
+						});
+						observer.observe(document.body, {
+							subtree: true,
+							childList: true,
+							attributes: true,
+							attributeFilter: ["data-details-collapsed", "data-sidebar-collapsed"]
+						});
+					}
+					/* Low-frequency fallback so self-heal still runs if the
+					 * observer misses something — cheap: no scan while the
+					 * cached root is alive. */
+					fallbackTimer = setInterval(() => heal(false), FALLBACK_HEAL_MS);
+				}
 
 				/* ---- disposer ---- */
 				return () => {
+					unsubscribeLocale();
 					clearInterval(readyTimer);
-					clearInterval(healTimer);
+					clearInterval(fallbackTimer);
 					clearTimeout(timeout);
+					clearTimeout(rootRetryTimer);
+					if (healFrame !== null) cancelFrame(healFrame);
+					if (observer !== null) observer.disconnect();
 					document.removeEventListener("click", onDocClick);
 					document.removeEventListener("keydown", onDocKey);
 					if (btn.parentNode) btn.parentNode.removeChild(btn);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-width-tiers",
-  "version": "1.0.0",
-  "description": "DSH Web client plugin: chat content width tiers (standard / medium / wide / ultra / full) with a floating picker button. Frees wide tables from the app's hard-coded 748px content cap.",
+  "version": "1.0.2",
+  "description": "DSH Web client plugin: chat content width tiers (standard / medium / wide / ultra / full) with a floating picker button. Frees wide tables from the app's hard-coded 748px content cap. UI copy follows the app language (zh / en).",
   "license": "MIT",
   "author": "aaronlei",
   "publishConfig": {
@@ -24,7 +24,8 @@
     "client": {
       "platform": "web",
       "inject": [
-        "@deepseek-ai/dsh-client-ui-layout"
+        "@deepseek-ai/dsh-client-ui-layout",
+        "@deepseek-ai/dsh-client-locale"
       ]
     }
   },