dsh-width-tiers 1.0.4 → 1.0.6

package/README.md

@@ -4,29 +4,38 @@
 
 A client plugin for the **DeepSeek Harness Web GUI** that adds **chat content
 width tiers** with a floating picker button (bottom-right, above the
-composer): 标准 / 中等 / 宽 / 超宽 / 全宽 (standard / medium / wide / ultra /
-full).
+composer): 标准 / 中等 / 宽 / 超宽 / 全宽 / 自定义 (standard / medium / wide /
+ultra / full / custom).
 
 ## Why
 
-The DSH Web app hard-codes a readable content width on the conversation root
-(`--dsh-chat-content-width: 748px`). That caps the message column — and every
-table inside it — at **748px** no matter how wide your window or panels are,
-so wide tables always need horizontal scrolling.
+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,
+920px)`), no matter how wide your window is, so wide tables always need
+horizontal scrolling.
 
-This plugin overrides that variable per tier:
+This plugin sets the width per tier through 0.1.7'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:
 
 | Tier | Content width | Sidebar |
 |---|---|---|
-| standard 标准 | 748px (app default) | untouched |
+| standard 标准 | app default | untouched |
 | medium 中等 | 960px | untouched |
 | wide 宽 | 1280px | untouched |
 | ultra 超宽 | 1400px | untouched |
-| full 全宽 | 100% (fills the window) | collapsed to the icon rail |
+| 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 |
+
+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.
+a glance (all lit for custom). Dragging one of 0.1.7's native edge handles
+switches the picker to the custom tier — the plugin stands aside for native
+drags.
 
 ## Install
 

package/README.zh.md

@@ -3,27 +3,33 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
 
 DeepSeek Harness Web GUI 的客户端插件：给对话区加**内容宽度档位选择器**
-（右下角圆形按钮，输入框上方），共 5 档：
-标准 / 中等 / 宽 / 超宽 / 全宽。
+（右下角圆形按钮，输入框上方），共 6 档：
+标准 / 中等 / 宽 / 超宽 / 全宽 / 自定义。
 
 ## 为什么需要它
 
-DSH Web 在会话根元素上硬编码了一个阅读宽度
-（`--dsh-chat-content-width: 748px`），消息列——包括里面的所有表格——最大
-只有 **748px**，不管窗口和面板多宽都不变，宽表格只能横向滚动。
+DSH Web 把消息列——包括里面的所有表格——的宽度限制在
+`--dsh-chat-content-width`（0.1.7 默认 `clamp(680px, 列宽 × 0.64, 920px)`），
+不管窗口多宽都不变，宽表格只能横向滚动。
 
-本插件按档位覆盖这个变量：
+本插件通过 0.1.7 的**原生宽度通道**（`--dsh-chat-user-width` +
+`dsh.conversation.contentWidth` 偏好）按档位设定宽度，由应用自身钳制到
+「列宽 − 176px 手柄预留」，因此自带的原生拖拽手柄始终可用：
 
 | 档位 | 内容宽度 | 侧边栏 |
 |---|---|---|
-| 标准 | 748px（应用默认） | 不动 |
+| 标准 | 应用默认 | 不动 |
 | 中等 | 960px | 不动 |
 | 宽 | 1280px | 不动 |
 | 超宽 | 1400px | 不动 |
-| 全宽 | 100%（占满窗口） | 收起为图标轨道 |
+| 全宽 | 列宽减手柄预留（占满可用宽度） | 收起为图标轨道 |
+| 自定义 | 拖拽原生手柄得出，可在菜单回切 | 不动 |
+
+窄窗口下超宽档位会自动被钳到可用宽度，不会溢出被侧栏覆盖。
 
 选择会记住（localStorage），下次打开自动恢复；菜单里当前档位高亮，按钮上
-的五条横条图标也直观显示当前档位。
+的五条横条图标也直观显示当前档位（自定义档全亮）。拖动 0.1.7 自带的
+对话区边缘手柄会自动切到「自定义」档，插件让位于原生拖拽。
 
 ## 安装
 

package/lib/client.js

@@ -9,30 +9,35 @@ window.__ModuleLoader__.load({
 		/**
 		 * dsh-width-tiers — chat content width tiers for the DSH Web GUI.
 		 *
-		 * The app hard-codes a readable content width
-		 * (`--dsh-chat-content-width: 748px` on the conversation root), which
-		 * caps the message column — and every table inside it — at 748px no
-		 * matter how wide the panels are. This plugin overrides that variable
-		 * per tier and adds a floating picker button:
+		 * The app derives the transcript width from
+		 * `--dsh-chat-content-width`, which 0.1.7-alpha.1 resolves 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
+		 * `--dsh-conversation-column-width` / `--dsh-chat-user-width` on the
+		 * body's PARENT and clamp every value to the column minus a 176px
+		 * handle budget. Forcing `--dsh-chat-content-width` with `!important`
+		 * (the 1.0.5 approach) muted those handles and let over-wide
+		 * transcripts overflow under the sidebar/rightbar columns, so this
+		 * version drives the app's own width axis instead — see
+		 * `applyContentWidth`. Other invariants:
 		 *
-		 *   标准 standard  748px  (app default, no override)
+		 *   标准 standard  app default (no override)
 		 *   中等 medium    960px  (sidebar untouched)
 		 *   宽   wide      1280px (sidebar untouched)
 		 *   超宽 ultra     1400px (sidebar untouched)
-		 *   全宽 full      100%   (sidebar collapsed to the icon rail)
+		 *   全宽 full      column max (sidebar collapsed to the icon rail)
+		 *   自定义 custom  user-dragged width (plugin hands width over to
+		 *                  the app's native handles; the dragged value stays
+		 *                  re-selectable from the menu)
 		 *
-		 * Design notes:
-		 *  - The element that defines `--dsh-chat-content-width` is located at
-		 *    runtime (first element whose computed value is non-empty) and the
-		 *    tier is applied as an INLINE override on it — no hashed class
-		 *    names, survives bundle upgrades. Re-detected if it remounts.
 		 *  - 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 details panel (self-heal while
-		 *    active); `standard` leaves everything to the app.
+		 *  - Non-standard tiers close the right panel (rightbar, self-heal
+		 *    while 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
@@ -41,6 +46,14 @@ window.__ModuleLoader__.load({
 		 */
 		const KEY = "dsh.widthTier";
 		const OLD_KEY = "dsh.wide";
+		/** Last user-dragged width (px), backing the `custom` tier. */
+		const CUSTOM_KEY = "dsh.widthTierCustom";
+		/** The app's own transcript width preference (ConversationWidthControls). */
+		const APP_PREF_KEY = "dsh.conversation.contentWidth";
+		/* Mirrors ConversationWidthControls in 0.1.7-alpha.1: clamp floor and
+		 * the horizontal budget both width handles + safe edges reserve. */
+		const CONTENT_MIN_PX = 640;
+		const CONTENT_EDGE_BUDGET_PX = 176;
 		const READY_TIMEOUT_MS = 30000;
 		/* Self-heal cadence: DOM-driven (MutationObserver scheduling on the
 		 * next animation frame — before paint, so the width never flashes
@@ -62,6 +75,7 @@ window.__ModuleLoader__.load({
 			"tier.wide": "宽",
 			"tier.ultra": "超宽",
 			"tier.full": "全宽",
+			"tier.custom": "自定义",
 			"button.aria": "对话区宽度档位：{label}（{value}），点击选择档位",
 			"button.title.summary": "对话区宽度档位：{label}（{value}）",
 			"button.title.hint": "点击选择：{list}"
@@ -73,6 +87,7 @@ window.__ModuleLoader__.load({
 			"tier.wide": "Wide",
 			"tier.ultra": "Ultra",
 			"tier.full": "Full",
+			"tier.custom": "Custom",
 			"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}"
@@ -84,7 +99,10 @@ window.__ModuleLoader__.load({
 			{ 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%" }
+			{ 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 }
 		];
 
 		function tierOf(id) {
@@ -110,6 +128,7 @@ window.__ModuleLoader__.load({
 			"#dsh-width-menu[hidden]{display:none}",
 			"#dsh-width-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:none;border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}",
 			"#dsh-width-menu button:hover{background:var(--dsw-alias-interactive-bg-hover)}",
+			"#dsh-width-menu button.disabled{opacity:.45;cursor:default;pointer-events:none}",
 			"#dsh-width-menu button.selected{background:var(--dsw-alias-interactive-bg-hover-solid);color:var(--dsw-alias-state-business-primary)}",
 			"#dsh-width-menu .dshwm-value{color:var(--dsw-alias-label-tertiary);font-size:12px}",
 			"#dsh-width-menu button.selected .dshwm-value{color:var(--dsw-alias-state-business-primary)}"
@@ -159,15 +178,21 @@ window.__ModuleLoader__.load({
 					return "standard";
 				}
 
-				/* The AppFrame sets data-sidebar-collapsed / data-details-collapsed
-				 * on the frame element after each render — use them as truth. */
+				/* The AppFrame sets data-sidebar-collapsed on the frame element
+				 * (conditionally, only while collapsed) after each render. */
 				function isSidebarCollapsed() {
 					return document.querySelector("[data-sidebar-collapsed]") !== null;
 				}
 
-				function isDetailsOpen() {
-					return document.querySelector("[data-details-collapsed]") === null;
-				}
+				/* NOTE: the 1.0.x "close the right panel on non-standard tiers"
+				 * self-heal is gone on purpose. On 0.1.7 the rightbar panel
+				 * lives in its own seat: closeRightbar() only retracts the
+				 * grid TRACK (rightbarTrack=false) while the seat stays
+				 * expanded, so the panel keeps rendering as an OVERLAY pinned
+				 * to the frame's right edge — hanging over and covering the
+				 * conversation (对话窗口被边侧栏覆盖). The plugin must never
+				 * touch the rightbar; the app's own width axis already yields
+				 * space to the panel. */
 
 				function collapseSidebar() {
 					if (!isSidebarCollapsed()) layout.toggleSidebar();
@@ -177,10 +202,6 @@ window.__ModuleLoader__.load({
 					if (isSidebarCollapsed()) layout.toggleSidebar();
 				}
 
-				function closeDetails() {
-					if (isDetailsOpen()) layout.closeDetails();
-				}
-
 				/* Locate the element that defines --dsh-chat-content-width at
 				 * runtime (first match wins; only one element declares it).
 				 * Cached; the app remounts the chat tree on conversation switch,
@@ -239,22 +260,77 @@ window.__ModuleLoader__.load({
 					return scanWidthRoot();
 				}
 
-				function tierWidth(tier) {
+				/* ---- 0.1.7 native width axis ----
+				 * The conversation body's parent is the element the app's
+				 * ConversationWidthControls publishes
+				 * `--dsh-conversation-column-width` / `--dsh-chat-user-width`
+				 * on. Writing there (never with `!important`) keeps native
+				 * drag handles in charge: during a drag the app rewrites the
+				 * same inline property every frame and wins the cascade. */
+				function widthTarget(root) {
+					return (root && root.parentElement) || root;
+				}
+
+				function readStoredNumber(key) {
+					try {
+						const v = Number(window.localStorage.getItem(key));
+						return Number.isFinite(v) && v > 0 ? v : null;
+					} catch (e) {
+						return null;
+					}
+				}
+
+				/* Resolve a tier to the px the app would clamp it to
+				 * (resolveContentWidth: max = column - handle budget), or
+				 * null when the tier leaves the width to the app. */
+				function tierPx(tier, root) {
+					const cap = Math.max(CONTENT_MIN_PX, root.offsetWidth - CONTENT_EDGE_BUDGET_PX);
 					switch (tier) {
-						case "medium": return "960px";
-						case "wide": return "1280px";
-						case "ultra": return "1400px";
-						case "full": return "100%";
-						default: return null; /* standard: remove the override */
+						case "medium": return Math.min(960, cap);
+						case "wide": return Math.min(1280, cap);
+						case "ultra": return Math.min(1400, cap);
+						case "full": return cap;
+						case "custom": {
+							const dragged = readStoredNumber(CUSTOM_KEY);
+							return dragged === null ? null : Math.min(dragged, cap);
+						}
+						default: return null; /* standard: app default */
 					}
 				}
 
 				function applyContentWidth(tier) {
 					const root = findWidthRoot();
 					if (root === null) return;
-					const w = tierWidth(tier);
-					if (w === null) root.style.removeProperty("--dsh-chat-content-width");
-					else root.style.setProperty("--dsh-chat-content-width", w, "important");
+					const target = widthTarget(root);
+					/* custom before the first drag has no width of its own —
+					 * leave whatever the app last published in place. */
+					if (tier === "custom" && readStoredNumber(CUSTOM_KEY) === null) return;
+					const px = tierPx(tier, root);
+					if (px === null) {
+						if (target.style.getPropertyValue("--dsh-chat-user-width") !== "") {
+							target.style.removeProperty("--dsh-chat-user-width");
+							try {
+								window.localStorage.removeItem(APP_PREF_KEY);
+							} catch (e) {
+								/* ignore */
+							}
+						}
+						return;
+					}
+					/* Mirror into the app's preference so window resizes and
+					 * conversation remounts re-clamp through the app's own
+					 * publish cycle instead of relying on plugin healing. */
+					const next = String(Math.round(px));
+					if (target.style.getPropertyValue("--dsh-chat-user-width") !== next + "px") {
+						target.style.setProperty("--dsh-chat-user-width", next + "px");
+					}
+					try {
+						if (window.localStorage.getItem(APP_PREF_KEY) !== next) {
+							window.localStorage.setItem(APP_PREF_KEY, next);
+						}
+					} catch (e) {
+						/* ignore */
+					}
 				}
 
 				/* true while the CURRENT tier is the one that collapsed the sidebar */
@@ -281,7 +357,6 @@ window.__ModuleLoader__.load({
 					} else {
 						collapsedByTier = false;
 					}
-					if (tier !== "standard") closeDetails();
 					syncButton();
 					syncMenu();
 					pulse();
@@ -308,17 +383,26 @@ 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. */
+				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`;
+				}
+
 				function syncButton() {
 					const tier = currentTier();
 					const def = tierOf(tier);
 					const label = t(def.key);
-					const summary = t("button.title.summary", { label, value: def.value });
+					const value = tierValueText(tier);
+					const summary = t("button.title.summary", { label, value });
 					const hint = t("button.title.hint", {
-						list: TIERS.map((tierDef) => `${t(tierDef.key)} ${tierDef.value}`).join(" / ")
+						list: TIERS.map((tierDef) => `${t(tierDef.key)} ${tierValueText(tierDef.id)}`).join(" / ")
 					});
 					btn.innerHTML = barIcon(tier);
 					btn.classList.toggle("active", tier !== "standard");
-					btn.setAttribute("aria-label", t("button.aria", { label, value: def.value }));
+					btn.setAttribute("aria-label", t("button.aria", { label, value }));
 					btn.title = `${summary}\n${hint}`;
 				}
 
@@ -333,9 +417,10 @@ window.__ModuleLoader__.load({
 					item.type = "button";
 					item.setAttribute("role", "menuitemradio");
 					item.setAttribute("data-tier", def.id);
-					item.innerHTML = `<span class="dshwm-label">${t(def.key)}</span><span class="dshwm-value">${def.value}</span>`;
+					item.innerHTML = `<span class="dshwm-label">${t(def.key)}</span><span class="dshwm-value">${tierValueText(def.id)}</span>`;
 					item.addEventListener("click", (e) => {
 						if (e && e.stopPropagation) e.stopPropagation();
+						if (item.classList.contains("disabled")) return;
 						applyTier(def.id);
 						hideMenu();
 					});
@@ -346,11 +431,18 @@ window.__ModuleLoader__.load({
 					const tier = currentTier();
 					const items = menu.querySelectorAll("button[data-tier]");
 					for (let i = 0; i < items.length; i++) {
-						const on = items[i].getAttribute("data-tier") === tier;
+						const id = items[i].getAttribute("data-tier");
+						const on = id === 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);
+						if (labelEl) labelEl.textContent = t(tierOf(id).key);
+						const valueEl = items[i].querySelector(".dshwm-value");
+						if (valueEl) valueEl.textContent = 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);
+						items[i].setAttribute("aria-disabled", String(disabled));
 					}
 				}
 
@@ -381,6 +473,48 @@ window.__ModuleLoader__.load({
 				document.addEventListener("click", onDocClick);
 				document.addEventListener("keydown", onDocKey);
 
+				/* ---- hand the width over to the app's native drag handles ----
+				 * Pressing a `[data-width-handle]` means the user is taking the
+				 * width over: switch to the `custom` tier so healing stops
+				 * enforcing a preset, and let the app's drag win the cascade
+				 * (it rewrites the same inline property every frame). The
+				 * settled width is recorded on release so it stays
+				 * re-selectable from the menu. */
+				const isHandleEvent = (e) =>
+					e.target instanceof Element && e.target.closest("[data-width-handle]") !== null;
+
+				const onHandlePointerDown = (e) => {
+					if (!isHandleEvent(e) || currentTier() === "custom") return;
+					body().setAttribute("data-dsh-width", "custom");
+					try {
+						window.localStorage.setItem(KEY, "custom");
+					} catch (err) {
+						/* ignore */
+					}
+					collapsedByTier = false;
+					syncButton();
+					syncMenu();
+				};
+
+				const onHandlePointerUp = (e) => {
+					if (!isHandleEvent(e)) return;
+					const root = findWidthRoot();
+					if (root === null) return;
+					const px = Number.parseFloat(
+						widthTarget(root).style.getPropertyValue("--dsh-chat-user-width")
+					);
+					if (!Number.isFinite(px) || px <= 0) return;
+					try {
+						window.localStorage.setItem(CUSTOM_KEY, String(Math.round(px)));
+					} catch (err) {
+						/* ignore */
+					}
+					syncButton();
+					syncMenu();
+				};
+				document.addEventListener("pointerdown", onHandlePointerDown, true);
+				document.addEventListener("pointerup", onHandlePointerUp, true);
+
 				/* ---- feedback ring so every selection is visibly answered ---- */
 				function pulse() {
 					btn.classList.remove("pulse");
@@ -399,9 +533,16 @@ window.__ModuleLoader__.load({
 				/* ---- attach once the app shell has mounted ---- */
 				let attached = false;
 
+				/* The old gate matched [data-sidebar-collapsed] /
+				 * [data-details-collapsed]. 0.1.5-rc.2 renders collapsed
+				 * markers conditionally (`sidebarCollapsed || void 0`) and
+				 * removed data-details-collapsed, so with the sidebar expanded
+				 * nothing ever matched and the button never mounted. Wait for
+				 * the AppFrame overlay layer instead — `data-shell-overlay` is
+				 * rendered unconditionally once the shell exists. */
 				function attach() {
 					if (attached || !body()) return;
-					if (document.querySelector("[data-sidebar-collapsed], [data-details-collapsed]") === null) return;
+					if (document.querySelector("[data-shell-overlay]") === null) return;
 					attached = true;
 					try {
 						window.localStorage.removeItem(OLD_KEY);
@@ -423,16 +564,19 @@ window.__ModuleLoader__.load({
 					attach();
 				}, READY_TIMEOUT_MS);
 
-				/* ---- self-heal: keep the details panel closed for non-standard
-				 * tiers. The sidebar is never managed here — the user may expand
-				 * 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. ---- */
+				/* ---- self-heal: re-apply the width when the chat tree
+				 * remounts (conversation switch). Panels are never managed
+				 * here — the user may expand/collapse either side any time;
+				 * forcing the rightbar closed only retracts the grid track
+				 * while the seat keeps rendering as an overlay that covers
+				 * the conversation. Driven by DOM mutations, scheduled on the
+				 * next animation frame (before the browser paints) instead of
+				 * a fixed hot loop: the width 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;
@@ -469,7 +613,6 @@ window.__ModuleLoader__.load({
 				function heal(fromObserver) {
 					const tier = currentTier();
 					if (tier === "standard") return;
-					closeDetails();
 					const prev = widthRoot;
 					let root;
 					if (rootMissing) {
@@ -493,6 +636,11 @@ window.__ModuleLoader__.load({
 						rootRetryDelay = ROOT_RETRY_MIN_MS;
 					}
 					if (root !== prev) applyContentWidth(tier);
+					/* full tracks the live column: after the sidebar collapse
+					 * animation settles the column widens, and the width must
+					 * follow (applyContentWidth is diff-checked, so steady
+					 * state writes nothing). */
+					if (tier === "full") applyContentWidth("full");
 				}
 
 				function startHealing() {
@@ -508,7 +656,7 @@ window.__ModuleLoader__.load({
 							subtree: true,
 							childList: true,
 							attributes: true,
-							attributeFilter: ["data-details-collapsed", "data-sidebar-collapsed"]
+							attributeFilter: ["data-sidebar-collapsed"]
 						});
 					}
 					/* Low-frequency fallback so self-heal still runs if the
@@ -528,10 +676,18 @@ window.__ModuleLoader__.load({
 					if (observer !== null) observer.disconnect();
 					document.removeEventListener("click", onDocClick);
 					document.removeEventListener("keydown", onDocKey);
+					document.removeEventListener("pointerdown", onHandlePointerDown, true);
+					document.removeEventListener("pointerup", onHandlePointerUp, true);
 					if (btn.parentNode) btn.parentNode.removeChild(btn);
 					if (menu.parentNode) menu.parentNode.removeChild(menu);
 					if (styleTag.parentNode) styleTag.parentNode.removeChild(styleTag);
-					if (widthRoot !== null) widthRoot.style.removeProperty("--dsh-chat-content-width");
+					/* Hand the width back to the app default; the app's own
+					 * preference (which this plugin mirrors) stays so the last
+					 * width survives a plugin reload — matching native-drag
+					 * semantics. */
+					if (widthRoot !== null) {
+						widthTarget(widthRoot).style.removeProperty("--dsh-chat-user-width");
+					}
 					body().removeAttribute("data-dsh-width");
 				};
 			}, "dsh-width-tiers: ui");

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-width-tiers",
-  "version": "1.0.4",
-  "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).",
+  "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).",
   "license": "MIT",
   "author": "aaronlei",
   "publishConfig": {