dsh-width-tiers 1.0.6 → 1.0.7

package/README.md

@@ -10,11 +10,11 @@ ultra / full / custom).
 ## Why
 
 The DSH Web app caps the message column — and every table inside it — at
-`--dsh-chat-content-width` (0.1.7 default `clamp(680px, column × 0.64,
+`--dsh-chat-content-width` (0.1.7–0.2.0 default `clamp(680px, column × 0.64,
 920px)`), no matter how wide your window is, so wide tables always need
 horizontal scrolling.
 
-This plugin sets the width per tier through 0.1.7's **native width axis**
+This plugin sets the width per tier through the app's **native width axis**
 (`--dsh-chat-user-width` + the app's `dsh.conversation.contentWidth`
 preference), letting the app clamp every value to "column − 176px handle
 budget" — so the built-in drag handles keep working:
@@ -22,18 +22,22 @@ budget" — so the built-in drag handles keep working:
 | Tier | Content width | Sidebar |
 |---|---|---|
 | standard 标准 | app default | untouched |
-| medium 中等 | 960px | untouched |
+| medium 中等 | 1120px | untouched |
 | wide 宽 | 1280px | untouched |
 | ultra 超宽 | 1400px | untouched |
 | full 全宽 | column minus the handle budget (fills the available width) | collapsed to the icon rail |
 | custom 自定义 | your dragged width, re-selectable from the menu | untouched |
 
+The menu and the button title always show the width a tier resolves to **at
+the current column**, so on narrow windows a clamped tier reads its real
+value (e.g. `宽 668px`) instead of its nominal one.
+
 On narrow windows wider tiers are clamped to the available column, so nothing
 overflows under the sidebar.
 
 The choice persists in `localStorage` and is restored on the next visit; the
 menu highlights the current tier, and the button's five level-bars show it at
-a glance (all lit for custom). Dragging one of 0.1.7's native edge handles
+a glance (all lit for custom). Dragging one of the app's native edge handles
 switches the picker to the custom tier — the plugin stands aside for native
 drags.
 
@@ -62,8 +66,9 @@ Restart `dsh web` (the plugin loads at boot) and hard-refresh the page
 - `full` collapses the sidebar to the icon rail through the app's own toggle
   — it is never force-hidden or locked: click a rail icon any time to expand
   it, and it stays expanded.
-- Non-standard tiers also close the details panel (re-closed automatically if
-  reopened); `standard` leaves everything to the app.
+- The right panel (rightbar) is never touched: its track and panel are fully
+  owned by the app, and the conversation yields space to it on its own.
+  `standard` leaves the layout entirely to the app.
 
 ## Language
 
@@ -90,10 +95,10 @@ language, and Chinese is the last resort. No plugin-side setting needed.
 ## Limitations
 
 - Content width cannot exceed the window: on a narrow window, wider tiers are
-  capped by the available column. Use `full` (which also collapses the
-  sidebar) for the maximum.
+  capped by the available column (the menu shows the capped value). Use
+  `full` (which also collapses the sidebar) for the maximum.
 - Requires the DSH Web client plugin system (dsh ≥ 0.1.0-rc.x with a `web`
-  profile).
+  profile). Verified on dsh 0.1.7-alpha.1 and 0.2.0-rc.2.
 
 ## Uninstall
 

package/README.zh.md

@@ -9,26 +9,29 @@ DeepSeek Harness Web GUI 的客户端插件：给对话区加**内容宽度档
 ## 为什么需要它
 
 DSH Web 把消息列——包括里面的所有表格——的宽度限制在
-`--dsh-chat-content-width`（0.1.7 默认 `clamp(680px, 列宽 × 0.64, 920px)`），
-不管窗口多宽都不变，宽表格只能横向滚动。
+`--dsh-chat-content-width`（0.1.7–0.2.0 默认
+`clamp(680px, 列宽 × 0.64, 920px)`），不管窗口多宽都不变，宽表格只能横向滚动。
 
-本插件通过 0.1.7 的**原生宽度通道**（`--dsh-chat-user-width` +
+本插件通过应用自身的**原生宽度通道**（`--dsh-chat-user-width` +
 `dsh.conversation.contentWidth` 偏好）按档位设定宽度，由应用自身钳制到
 「列宽 − 176px 手柄预留」，因此自带的原生拖拽手柄始终可用：
 
 | 档位 | 内容宽度 | 侧边栏 |
 |---|---|---|
 | 标准 | 应用默认 | 不动 |
-| 中等 | 960px | 不动 |
+| 中等 | 1120px | 不动 |
 | 宽 | 1280px | 不动 |
 | 超宽 | 1400px | 不动 |
 | 全宽 | 列宽减手柄预留（占满可用宽度） | 收起为图标轨道 |
 | 自定义 | 拖拽原生手柄得出，可在菜单回切 | 不动 |
 
+菜单与按钮标题显示的是**当前列宽下实际生效的 px**：窄窗口下被钳制的档位会
+显示真实值（如「宽 668px」），而不是标称值。
+
 窄窗口下超宽档位会自动被钳到可用宽度，不会溢出被侧栏覆盖。
 
 选择会记住（localStorage），下次打开自动恢复；菜单里当前档位高亮，按钮上
-的五条横条图标也直观显示当前档位（自定义档全亮）。拖动 0.1.7 自带的
+的五条横条图标也直观显示当前档位（自定义档全亮）。拖动应用自带的
 对话区边缘手柄会自动切到「自定义」档，插件让位于原生拖拽。
 
 ## 安装
@@ -55,7 +58,8 @@ bundle patch 会自动插入 `dsh-width-tiers` 加载项——无需手动改
 - 点圆形按钮 → 选择档位，当前档位高亮。
 - 「全宽」通过应用自己的收起按钮把侧边栏收成图标轨道——**不会被锁死**：
   随时点轨道图标展开，展开后保持展开。
-- 非标准档会关闭详情面板（被重新打开会自动再关）；标准档完全交给应用。
+- 插件**不碰右侧面板**：右栏的轨道与面板完全由应用管理，展开时对话内容
+  自适应让位；「标准」档完全交给应用。
 
 ## 多语言
 
@@ -76,9 +80,10 @@ bundle patch 会自动插入 `dsh-width-tiers` 加载项——无需手动改
 
 ## 已知限制
 
-- 内容宽度不可能超过窗口：窗口窄时，高档位会被可用列宽截断；想要最大
-  空间请用「全宽」（同时收起侧边栏）。
+- 内容宽度不可能超过窗口：窗口窄时，高档位会被可用列宽截断（菜单会显示
+  截断后的实际值）；想要最大空间请用「全宽」（同时收起侧边栏）。
 - 依赖 DSH Web 客户端插件体系（带 web profile 的 dsh ≥ 0.1.0-rc.x）。
+  已在 dsh 0.1.7-alpha.1 与 0.2.0-rc.2 上验证。
 
 ## 卸载
 

package/lib/client.js

@@ -10,7 +10,7 @@ window.__ModuleLoader__.load({
 		 * dsh-width-tiers — chat content width tiers for the DSH Web GUI.
 		 *
 		 * The app derives the transcript width from
-		 * `--dsh-chat-content-width`, which 0.1.7-alpha.1 resolves as
+		 * `--dsh-chat-content-width`, which 0.1.7 and 0.2.0 resolve as
 		 * `var(--dsh-chat-user-width, clamp(680px, column * .64, 920px))` on
 		 * the conversation body. 0.1.7 also added native drag handles
 		 * (ConversationWidthControls) that publish
@@ -23,7 +23,7 @@ window.__ModuleLoader__.load({
 		 * `applyContentWidth`. Other invariants:
 		 *
 		 *   标准 standard  app default (no override)
-		 *   中等 medium    960px  (sidebar untouched)
+		 *   中等 medium    1120px (sidebar untouched)
 		 *   宽   wide      1280px (sidebar untouched)
 		 *   超宽 ultra     1400px (sidebar untouched)
 		 *   全宽 full      column max (sidebar collapsed to the icon rail)
@@ -31,13 +31,18 @@ window.__ModuleLoader__.load({
 		 *                  the app's native handles; the dragged value stays
 		 *                  re-selectable from the menu)
 		 *
+		 * The menu and title always show the px a tier resolves to at the
+		 * CURRENT column (see `tierValueText`), so a clamped tier never
+		 * claims its nominal width on a narrow window.
+		 *
 		 *  - Panels are driven through the layout service (ctx.layout), never
 		 *    by simulating clicks.
 		 *  - The sidebar is only ever collapsed by the `full` tier, through the
 		 *    app's own toggle — never force-hidden, never locked. Going back to
 		 *    `standard` restores it only if this plugin collapsed it.
-		 *  - Non-standard tiers close the right panel (rightbar, self-heal
-		 *    while active); `standard` leaves everything to the app.
+		 *  - The rightbar is never touched: on 0.1.7+ its panel lives in its
+		 *    own seat, so closing the track would leave it overlaying the
+		 *    conversation; the app's width axis yields space on its own.
 		 *  - The chosen tier persists in localStorage and is restored on the
 		 *    next visit.
 		 *  - All copy is localized through the app's locale service: tier
@@ -54,6 +59,12 @@ window.__ModuleLoader__.load({
 		 * the horizontal budget both width handles + safe edges reserve. */
 		const CONTENT_MIN_PX = 640;
 		const CONTENT_EDGE_BUDGET_PX = 176;
+		/* The app's default transcript width (resolveContentWidth's
+		 * no-preference branch): clamp(680px, column × 0.64, 920px). Used to
+		 * show what `standard` actually resolves to at the current column. */
+		const DEFAULT_MIN_PX = 680;
+		const DEFAULT_MAX_PX = 920;
+		const DEFAULT_COLUMN_RATIO = 0.64;
 		const READY_TIMEOUT_MS = 30000;
 		/* Self-heal cadence: DOM-driven (MutationObserver scheduling on the
 		 * next animation frame — before paint, so the width never flashes
@@ -94,15 +105,17 @@ window.__ModuleLoader__.load({
 		};
 		//#endregion
 
+		/* Tier ids and label keys only — every displayed width is resolved at
+		 * render time from the live column (see tierValueText), so the menu
+		 * never claims a width the app would not actually apply. */
 		const TIERS = [
-			{ 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%" },
-			/* Reached only by dragging a native width handle; the displayed
-			 * value is the dragged width, resolved at render time. */
-			{ id: "custom", key: "tier.custom", value: null }
+			{ id: "standard", key: "tier.standard" },
+			{ id: "medium", key: "tier.medium" },
+			{ id: "wide", key: "tier.wide" },
+			{ id: "ultra", key: "tier.ultra" },
+			{ id: "full", key: "tier.full" },
+			/* Reached only by dragging a native width handle. */
+			{ id: "custom", key: "tier.custom" }
 		];
 
 		function tierOf(id) {
@@ -286,7 +299,7 @@ window.__ModuleLoader__.load({
 				function tierPx(tier, root) {
 					const cap = Math.max(CONTENT_MIN_PX, root.offsetWidth - CONTENT_EDGE_BUDGET_PX);
 					switch (tier) {
-						case "medium": return Math.min(960, cap);
+						case "medium": return Math.min(1120, cap);
 						case "wide": return Math.min(1280, cap);
 						case "ultra": return Math.min(1400, cap);
 						case "full": return cap;
@@ -298,6 +311,17 @@ window.__ModuleLoader__.load({
 					}
 				}
 
+				/* The px a tier resolves to right now, including the app's own
+				 * default formula for `standard`; null when the tier has no
+				 * width of its own yet (custom before the first drag). */
+				function resolvedWidthPx(tier, root) {
+					if (tier === "standard") {
+						const column = root.offsetWidth;
+						return Math.round(Math.max(DEFAULT_MIN_PX, Math.min(column * DEFAULT_COLUMN_RATIO, DEFAULT_MAX_PX)));
+					}
+					return tierPx(tier, root);
+				}
+
 				function applyContentWidth(tier) {
 					const root = findWidthRoot();
 					if (root === null) return;
@@ -383,12 +407,18 @@ window.__ModuleLoader__.load({
 					return `<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">${bars}</svg>`;
 				}
 
-				/* Display value for a tier; `custom` shows the dragged width. */
+				/* Display value for a tier: the px it resolves to at the live
+				 * column (what the app would actually apply), so narrow windows
+				 * show the clamped value instead of the nominal one. Falls back
+				 * to the recorded drag when the width root is not mounted. */
 				function tierValueText(tierId) {
-					const def = tierOf(tierId);
-					if (def.value !== null) return def.value;
-					const px = readStoredNumber(CUSTOM_KEY);
-					return px === null ? "—" : `${Math.round(px)}px`;
+					const root = findWidthRoot();
+					if (root !== null) {
+						const px = resolvedWidthPx(tierId, root);
+						if (px !== null) return `${px}px`;
+					}
+					const dragged = readStoredNumber(CUSTOM_KEY);
+					return dragged === null ? "—" : `${Math.round(dragged)}px`;
 				}
 
 				function syncButton() {
@@ -427,6 +457,13 @@ window.__ModuleLoader__.load({
 					menu.appendChild(item);
 				}
 
+				/* Write only on change: syncMenu also runs on window resizes,
+				 * and untouched text should not churn the DOM (the plugin's own
+				 * MutationObserver watches childList). */
+				function setText(el, text) {
+					if (el.textContent !== text) el.textContent = text;
+				}
+
 				function syncMenu() {
 					const tier = currentTier();
 					const items = menu.querySelectorAll("button[data-tier]");
@@ -436,9 +473,9 @@ window.__ModuleLoader__.load({
 						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(id).key);
+						if (labelEl) setText(labelEl, t(tierOf(id).key));
 						const valueEl = items[i].querySelector(".dshwm-value");
-						if (valueEl) valueEl.textContent = tierValueText(id);
+						if (valueEl) setText(valueEl, tierValueText(id));
 						/* custom is inert until the user has dragged once */
 						const disabled = id === "custom" && readStoredNumber(CUSTOM_KEY) === null;
 						items[i].classList.toggle("disabled", disabled);
@@ -665,6 +702,22 @@ window.__ModuleLoader__.load({
 					fallbackTimer = setInterval(() => heal(false), FALLBACK_HEAL_MS);
 				}
 
+				/* ---- keep the displayed px honest when the column changes ----
+				 * Window resizes (and layout handle drags) change what every
+				 * tier resolves to, so re-render the copy on the next frame.
+				 * The menu is also re-synced whenever it opens. */
+				let resizeFrame = null;
+
+				const onWindowResize = () => {
+					if (resizeFrame !== null) return;
+					scheduleFrame(() => {
+						resizeFrame = null;
+						syncButton();
+						syncMenu();
+					});
+				};
+				window.addEventListener("resize", onWindowResize);
+
 				/* ---- disposer ---- */
 				return () => {
 					unsubscribeLocale();
@@ -673,6 +726,8 @@ window.__ModuleLoader__.load({
 					clearTimeout(timeout);
 					clearTimeout(rootRetryTimer);
 					if (healFrame !== null) cancelFrame(healFrame);
+					if (resizeFrame !== null) cancelFrame(resizeFrame);
+					window.removeEventListener("resize", onWindowResize);
 					if (observer !== null) observer.disconnect();
 					document.removeEventListener("click", onDocClick);
 					document.removeEventListener("keydown", onDocKey);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-width-tiers",
-  "version": "1.0.6",
-  "description": "DSH Web client plugin: chat content width tiers (standard / medium / wide / ultra / full / custom) with a floating picker button. Drives the app's native width axis on DSH 0.1.7+, so the built-in drag handles keep working. UI copy follows the app language (zh / en).",
+  "version": "1.0.7",
+  "description": "DSH Web client plugin: chat content width tiers (standard / medium / wide / ultra / full / custom) with a floating picker button. Drives the app's native width axis on DSH 0.1.7+ (verified on 0.2.0-rc.2), so the built-in drag handles keep working. UI copy follows the app language (zh / en).",
   "license": "MIT",
   "author": "aaronlei",
   "publishConfig": {