dsh-width-tiers 1.0.8 → 1.0.9

package/README.md

@@ -1,55 +1,41 @@
-# dsh-width-tiers
+<h1 align="center">dsh-width-tiers</h1>
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+<p align="center">Chat content-width tiers for the DeepSeek Harness Web GUI.</p>
 
-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 / custom).
+<p align="center">
+  <a href="https://www.npmjs.com/package/dsh-width-tiers"><img alt="npm" src="https://img.shields.io/npm/v/dsh-width-tiers?style=flat-square"></a>
+  <a href="https://github.com/aaronlei/dsh-width-tiers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/aaronlei/dsh-width-tiers?style=flat-square"></a>
+  <a href="LICENSE"><img alt="MIT" src="https://img.shields.io/badge/license-MIT-yellow?style=flat-square"></a>
+  <a href="#compatibility"><img alt="DSH 0.1.7+" src="https://img.shields.io/badge/DSH-0.1.7%2B-blue?style=flat-square"></a>
+</p>
 
-## Why
-
-The DSH Web app caps the message column — and every table inside it — at
-`--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 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:
+## Tiers
 
 | Tier | Content width | Sidebar |
-|---|---|---|
-| standard 标准 | app default | 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 show nominal px for the fixed tiers (medium
-1120px, wide 1280px, ultra 1400px). Standard shows the app default px it
-resolves right now (`clamp(680px, column × 0.64, 920px)`, e.g. 710px); full
-shows the live maximum (`column − 176px`, e.g. 934px); custom shows its
-recorded width or "Not set". The app still clamps the applied width to
-"column − 176px"; on a narrow window a higher tier therefore behaves like
-"full".
-
-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 the app's native edge handles
-switches the picker to the custom tier — the plugin stands aside for native
-drags.
-
-Before the first drag, picking custom does not silently keep a width: a guide
-appears at the conversation's right edge and highlights the width handle.
-While dragging, a bubble shows the live transcript width; releasing records it
-as the custom value. Every later handle drag opens the same highlight + live
-readout, no matter which tier was active.
+| --- | --- | --- |
+| Standard 标准 | App default: `max(680px, min(column × 0.64, 920px))` | unchanged |
+| Medium 中等 | 1120px | unchanged |
+| Wide 宽 | 1280px | unchanged |
+| Ultra 超宽 | 1400px | unchanged |
+| Full 全宽 | `max(640px, column − 176px)` | collapsed to icon rail |
+| Custom 自定义 | width recorded from a native drag | unchanged |
+
+Fixed and custom widths are clamped by the app to
+`max(640px, column − 176px)`; the standard tier follows the app default
+(680–920px). On a narrow window a wider fixed tier therefore behaves like
+`full`.
+
+## Features
+
+- Uses the app's native width axis (`--dsh-chat-user-width` and
+  `dsh.conversation.contentWidth`), so the built-in drag handles keep working.
+- Persists the selected tier and restores it on the next visit.
+- Follows **Settings → Language** (中文 / English).
+- Menu supports ArrowUp/Down, Home/End, Escape and Tab, with focus restoration.
+- Tier changes sync across tabs.
+- Respects `prefers-reduced-motion`.
+- Never touches the right panel. Only `full` collapses the left sidebar, and
+  you can expand it again at any time.
 
 ## Install
 
@@ -57,68 +43,57 @@ readout, no matter which tier was active.
 dsh plugin --profile web add dsh-width-tiers
 ```
 
-The bundle patch then inserts the `dsh-width-tiers` loader entry itself — no
-manual `cordis.patch.yml` edits needed.
+Restart `dsh web`, then hard-refresh the page. A six-bar picker appears at the
+bottom-right.
 
-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.
+For a local checkout:
 
-> 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.
+```bash
+dsh plugin --profile web add link:/path/to/dsh-width-tiers
+```
 
 ## Usage
 
-- Click the round button → pick a tier; the current one is highlighted.
-- `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.
-- 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.
+- Click the picker and choose a tier.
+- Picking `Custom` before the first drag opens a guide at the right edge; drag
+  a native handle to record a width.
+- Dragging any native handle switches to `Custom`; the plugin steps aside while
+  you drag.
+- `Standard` clears the width preference and returns to the app default.
+- `Full` collapses the left sidebar; the icon rail stays available.
 
-## Language
+## How it works
 
-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.
+- Locates the conversation body that declares `--dsh-chat-content-width`
+  (prefers `[data-conversation-content]`, skips the right sidebar's embedded
+  conversation), then writes `--dsh-chat-user-width` on its parent.
+- Stores the configured target in the app preference; only the inline width is
+  clamped to `max(640px, column − 176px)`.
+- Watches the column with `ResizeObserver` so `full` follows sidebar, rightbar
+  and window changes.
+- Drives panels through `ctx.layout` and registers copy through `ctx.locale`.
 
-## How it works
+## Compatibility
+
+- DSH Web 0.1.7+ with a `web` profile.
+- Width axis checked against DSH 0.2.1-rc.2: 640px floor, 176px handle budget,
+  `--dsh-chat-*` variables, `data-width-handle`, layout/locale services.
 
-- The element that defines `--dsh-chat-content-width` is **located at
-  runtime** (the first element whose computed value is non-empty) and the
-  tier is applied as an inline override — no hashed class names, so it
-  survives bundle upgrades.
-- Panels are driven through the **layout service** (`ctx.layout`), never by
-  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
-
-- Content width cannot exceed the window: on a narrow window, wider tiers are
-  capped by the available column (the picker keeps showing the nominal value;
-  the live bubble during a drag shows the applied width). 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). Verified on dsh 0.1.7-alpha.1 and 0.2.0-rc.2; the 0.2.1-rc.1
-  width axis matches by bundle diff.
-
-## Uninstall
+## Development
 
 ```bash
-dsh plugin --profile web remove dsh-width-tiers
+npm test
 ```
 
-then restart `dsh web`.
+The test loads the shipped `lib/client.js` bundle through a DOM stub; no live
+DSH instance is required. The package ships prebuilt `lib/` and does not
+include a `src/` tree.
+
+## Notes
+
+- Wider fixed tiers are clamped on narrow windows.
+- A custom width dragged on a narrow window is clamped by the app before it is
+  recorded.
 
 ## License
 

package/README.zh.md

@@ -1,45 +1,38 @@
-# dsh-width-tiers（对话区宽度档位）
+<h1 align="center">dsh-width-tiers</h1>
 
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](LICENSE)
+<p align="center">DeepSeek Harness Web GUI 的对话区内容宽度档位插件。</p>
 
-DeepSeek Harness Web GUI 的客户端插件：给对话区加**内容宽度档位选择器**
-（右下角圆形按钮，输入框上方），共 6 档：
-标准 / 中等 / 宽 / 超宽 / 全宽 / 自定义。
+<p align="center">
+  <a href="https://www.npmjs.com/package/dsh-width-tiers"><img alt="npm" src="https://img.shields.io/npm/v/dsh-width-tiers?style=flat-square"></a>
+  <a href="https://github.com/aaronlei/dsh-width-tiers"><img alt="GitHub stars" src="https://img.shields.io/github/stars/aaronlei/dsh-width-tiers?style=flat-square"></a>
+  <a href="LICENSE"><img alt="MIT" src="https://img.shields.io/badge/license-MIT-yellow?style=flat-square"></a>
+  <a href="#兼容性"><img alt="DSH 0.1.7+" src="https://img.shields.io/badge/DSH-0.1.7%2B-blue?style=flat-square"></a>
+</p>
 
-## 为什么需要它
-
-DSH Web 把消息列——包括里面的所有表格——的宽度限制在
-`--dsh-chat-content-width`（0.1.7–0.2.0 默认
-`clamp(680px, 列宽 × 0.64, 920px)`），不管窗口多宽都不变，宽表格只能横向滚动。
-
-本插件通过应用自身的**原生宽度通道**（`--dsh-chat-user-width` +
-`dsh.conversation.contentWidth` 偏好）按档位设定宽度，由应用自身钳制到
-「列宽 − 176px 手柄预留」，因此自带的原生拖拽手柄始终可用：
+## 档位
 
 | 档位 | 内容宽度 | 侧边栏 |
-|---|---|---|
-| 标准 | 应用默认 | 不动 |
+| --- | --- | --- |
+| 标准 | 应用默认：`max(680px, min(列宽 × 0.64, 920px))` | 不动 |
 | 中等 | 1120px | 不动 |
 | 宽 | 1280px | 不动 |
 | 超宽 | 1400px | 不动 |
-| 全宽 | 列宽减手柄预留（占满可用宽度） | 收起为图标轨道 |
-| 自定义 | 拖拽原生手柄得出，可在菜单回切 | 不动 |
-
-菜单与按钮标题中：中等 / 宽 / 超宽显示**固定标称值**（1120 / 1280 / 1400px），
-标准显示应用当前默认值（`clamp(680px, 列宽 × 0.64, 920px)`，如 710px），全宽
-显示当前列宽下的最大实际值（列宽 − 176px，如 934px），自定义显示已记录的
-宽度或「未设置」。实际生效宽度仍由应用按「列宽 − 176px」钳制；窄窗口下
-选定较高档位时，效果等同于「全宽」。
+| 全宽 | `max(640px, 列宽 − 176px)` | 收起为图标轨道 |
+| 自定义 | 原生拖拽记录的宽度 | 不动 |
 
-窄窗口下超宽档位会自动被钳到可用宽度，不会溢出被侧栏覆盖。
+固定档和自定义宽度会被应用钳制到 `max(640px, 列宽 − 176px)`；标准档
+使用应用默认的 680–920px。窄窗口下较宽的固定档等同「全宽」。
 
-选择会记住（localStorage），下次打开自动恢复；菜单里当前档位高亮，按钮上
-的五条横条图标也直观显示当前档位（自定义档全亮）。拖动应用自带的
-对话区边缘手柄会自动切到「自定义」档，插件让位于原生拖拽。
+## 特性
 
-若从未拖拽过，点击「自定义」不会静默套用某个宽度：右侧对话边缘会出现
-拖拽引导，手柄高亮；拖拽时气泡实时显示对话列宽度，松开后记为该档的值。
-之后每次拖拽手柄（无论从哪个档位开始）都会重新高亮手柄并显示实时宽度。
+- 走应用原生宽度通道（`--dsh-chat-user-width` 与
+  `dsh.conversation.contentWidth`），自带拖拽手柄始终可用。
+- 记住当前档位，下次打开自动恢复。
+- 跟随 **设置 → 语言**（中文 / English）。
+- 菜单支持方向键、Home/End、Esc、Tab，并恢复焦点。
+- 档位选择跨标签页同步。
+- 支持 `prefers-reduced-motion`。
+- 不碰右侧面板；只有「全宽」会收起左侧栏，随时可以再展开。
 
 ## 安装
 
@@ -47,61 +40,51 @@ DSH Web 把消息列——包括里面的所有表格——的宽度限制在
 dsh plugin --profile web add dsh-width-tiers
 ```
 
-bundle patch 会自动插入 `dsh-width-tiers` 加载项——无需手动改
-`cordis.patch.yml`。
+重启 `dsh web` 并硬刷新页面。右下角会出现六条横条的圆形按钮。
 
-**重启 `dsh web`**（插件在启动时加载），再硬刷新页面（Ctrl+Shift+R）。
-右下角会出现五条横条的圆形按钮。
+本地目录：
 
-> 本地目录安装：`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` 并硬刷新。
+```bash
+dsh plugin --profile web add link:/path/to/dsh-width-tiers
+```
 
 ## 使用
 
-- 点圆形按钮 → 选择档位，当前档位高亮。
-- 「全宽」通过应用自己的收起按钮把侧边栏收成图标轨道——**不会被锁死**：
-  随时点轨道图标展开，展开后保持展开。
-- 插件**不碰右侧面板**：右栏的轨道与面板完全由应用管理，展开时对话内容
-  自适应让位；「标准」档完全交给应用。
-
-## 多语言
-
-选择器里的所有文案（档位名、按钮的 `aria-label` 和标题）跟随应用的
-**设置 → 语言**（中文 / English），通过应用自身的 locale 服务实现。切换
-语言后按钮和菜单会立即重渲染；未显式选择语言时，应用会回退到浏览器语言，
-最后兜底中文。无需插件侧单独设置。
+- 点击圆形按钮选择档位。
+- 首次选择「自定义」会在右侧边缘显示引导；拖动原生手柄记录宽度。
+- 拖动任意原生手柄都会切换到「自定义」；拖拽期间插件让位于应用。
+- 「标准」清除宽度偏好，回到应用默认宽度。
+- 「全宽」收起左侧栏，图标轨道仍可随时展开。
 
 ## 原理
 
-- 运行时**自动定位**定义 `--dsh-chat-content-width` 的元素（第一个计算值
-  非空的元素），以行内样式覆盖——**不依赖哈希类名**，dsh 升级后依旧有效。
-- 面板操作走 **layout 服务**（`ctx.layout`），从不模拟点击。
-- 侧边栏只被「全宽」档收起；回到「标准」时，只有本插件自己收起的侧边栏
-  才会被恢复展开（你手动收的不动）。
-- 字典注册到应用的 **locale 服务**（`ctx.locale.register` / `bind`），并
-  订阅其变更事件重渲染，文案始终与应用的当前语言一致。
+- 定位声明 `--dsh-chat-content-width` 的对话 body（优先
+  `[data-conversation-content]`，跳过右侧栏的 embedded 对话），在它的
+  父级写入 `--dsh-chat-user-width`。
+- 应用偏好保存设定值，只有行内宽度按 `max(640px, 列宽 − 176px)` 钳制。
+- 用 `ResizeObserver` 观察列宽，让「全宽」跟随左右栏与窗口变化。
+- 面板操作走 `ctx.layout`，文案注册走 `ctx.locale`。
 
-## 已知限制
+## 兼容性
 
-- 内容宽度不可能超过窗口：窗口窄时，高档位会被可用列宽截断（选择器仍显示
-  标称值，实际宽度以拖拽气泡/窗口效果为准）；想要最大空间请用「全宽」
-  （同时收起侧边栏）。
-- 依赖 DSH Web 客户端插件体系（带 web profile 的 dsh ≥ 0.1.0-rc.x）。
-  已在 dsh 0.1.7-alpha.1、0.2.0-rc.2 上验证；0.2.1-rc.1 的宽度轴经 bundle
-  对比确认一致。
+- DSH Web 0.1.7+，带 `web` profile。
+- 宽度轴已按 DSH 0.2.1-rc.2 对照：640px 下限、176px 手柄预留、
+  `--dsh-chat-*` 变量、`data-width-handle`、layout/locale 服务。
 
-## 卸载
+## 开发
 
 ```bash
-dsh plugin --profile web remove dsh-width-tiers
+npm test
 ```
 
-然后重启 `dsh web`。
+测试通过 DOM stub 加载已发布的 `lib/client.js`，不需要启动真实 DSH。包内
+直接发布预构建的 `lib/`，不包含 `src/`。
+
+## 注意
+
+- 窄窗口下较宽的固定档位会被应用钳制。
+- 窄窗口下拖出的自定义宽度会先被应用钳制，再被记录。
 
 ## 许可证
 
-MIT —— 见 [LICENSE](LICENSE)。Copyright (c) 2026 aaronlei。
+MIT — 见 [LICENSE](LICENSE)。Copyright (c) 2026 aaronlei。

package/lib/client.js

@@ -41,6 +41,15 @@ window.__ModuleLoader__.load({
 		 * opens the live width readout, so repeat drags keep the highlight
 		 * and the px bubble.
 		 *
+		 * The app preference stores the tier's configured target (nominal px,
+		 * the recorded custom width, or the live cap for full); only the
+		 * inline value is clamped. This lets the app restore the target when
+		 * the window widens instead of staying pinned to a narrow clamp.
+		 * The picker icon has one bar per tier (full lights five, custom all
+		 * six), tier changes sync across tabs, the menu supports
+		 * ArrowUp/Down/Home/End/Escape, and the sidebar's embedded
+		 * Conversation is excluded from the width-root lookup.
+		 *
 		 *  - 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
@@ -148,11 +157,13 @@ window.__ModuleLoader__.load({
 			"#dsh-wide-toggle:not(:hover):not(:focus-visible) svg rect{width:6px;x:5px}",
 			"#dsh-wide-toggle.active{background:var(--dsw-alias-state-business-primary);border-color:transparent;color:var(--dsw-static-neutral-00);opacity:1}",
 			"#dsh-wide-toggle.pulse{animation:dsh-wide-pulse .65s ease-out}",
+			"@media (prefers-reduced-motion:reduce){#dsh-wide-toggle{transition:none}#dsh-wide-toggle.pulse{animation:none}}",
 			"@keyframes dsh-wide-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dsw-alias-state-business-primary) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}",
 			"#dsh-width-menu{position:fixed;right:20px;bottom:264px;z-index:1000;min-width:196px;padding:6px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-specific-menu);box-shadow:0 8px 28px rgba(0,0,0,.24);display:flex;flex-direction:column;gap:2px}",
 			"#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:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:-2px}",
 			"#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)}",
@@ -160,8 +171,8 @@ window.__ModuleLoader__.load({
 			"#dsh-width-guide[hidden]{display:none}",
 			"#dsh-width-guide svg{flex:none;color:var(--dsw-alias-state-business-primary)}",
 			"#dsh-width-guide[data-mode=live]{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}",
-			"body[data-dsh-width-guide] [data-width-handle=right]{background:linear-gradient(to bottom,transparent calc(50% - 64px),color-mix(in srgb,var(--dsw-alias-state-business-primary) 18%,transparent) calc(50% - 64px),color-mix(in srgb,var(--dsw-alias-state-business-primary) 18%,transparent) calc(50% + 64px),transparent calc(50% + 64px));border-radius:3px}",
-			"body[data-dsh-width-guide] [data-width-handle=right]::after{opacity:1}"
+			"body[data-dsh-width-guide] [data-width-handle]{background:linear-gradient(to bottom,transparent calc(50% - 64px),color-mix(in srgb,var(--dsw-alias-state-business-primary) 18%,transparent) calc(50% - 64px),color-mix(in srgb,var(--dsw-alias-state-business-primary) 18%,transparent) calc(50% + 64px),transparent calc(50% + 64px));border-radius:3px}",
+			"body[data-dsh-width-guide] [data-width-handle]::after{opacity:1}"
 		].join("");
 		//#endregion
 
@@ -241,6 +252,13 @@ window.__ModuleLoader__.load({
 				let widthRoot = null;
 				let widthPath = null;
 
+				/* Whether this plugin wrote the app's width preference. Native
+				 * drags also write it, so unload only removes a value this
+				 * plugin owns. */
+				let preferenceOwned = false;
+				let preferenceWritten = null;
+				let pulseTimer = null;
+
 				function hasWidthVar(el) {
 					return getComputedStyle(el)
 						.getPropertyValue("--dsh-chat-content-width")
@@ -259,14 +277,35 @@ window.__ModuleLoader__.load({
 					widthPath = path.length > 0 ? path : null;
 				}
 
+				/* Sidebar chat tabs render an embedded Conversation whose
+				 * `--dsh-chat-content-width` is a local min() and never reads
+				 * `--dsh-chat-user-width`. Writing there would be a no-op on
+				 * the visible column and could starve the real transcript. */
+				function isSidebarConversation(el) {
+					return typeof el.closest === "function"
+						&& el.closest("[data-sidebar-chat]") !== null;
+				}
+
+				function firstWidthRoot(list) {
+					for (let i = 0; i < list.length; i++) {
+						const el = list[i];
+						if (isSidebarConversation(el)) continue;
+						if (hasWidthVar(el)) return el;
+					}
+					return null;
+				}
+
 				function scanWidthRoot() {
-					const all = document.querySelectorAll("[class]");
-					for (let i = 0; i < all.length; i++) {
-						if (hasWidthVar(all[i])) {
-							widthRoot = all[i];
-							recordWidthPath(widthRoot);
-							return widthRoot;
-						}
+					/* Prefer the stable Conversation data attribute (one or two
+					 * elements) over every classed node in the document. The
+					 * [class] walk remains the compatibility fallback for older
+					 * clients that do not publish data-conversation-content. */
+					let found = firstWidthRoot(document.querySelectorAll("[data-conversation-content]"));
+					if (found === null) found = firstWidthRoot(document.querySelectorAll("[class]"));
+					if (found !== null) {
+						widthRoot = found;
+						recordWidthPath(widthRoot);
+						return widthRoot;
 					}
 					widthRoot = null;
 					widthPath = null;
@@ -274,14 +313,16 @@ window.__ModuleLoader__.load({
 				}
 
 				function findWidthRoot(allowScan) {
-					if (widthRoot !== null && document.contains(widthRoot)) return widthRoot;
+					if (widthRoot !== null && document.contains(widthRoot)
+						&& !isSidebarConversation(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)) {
+						if (el && el !== widthRoot && document.contains(el)
+							&& !isSidebarConversation(el) && hasWidthVar(el)) {
 							widthRoot = el;
 							return widthRoot;
 						}
@@ -310,25 +351,34 @@ window.__ModuleLoader__.load({
 					}
 				}
 
-				/* 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);
+				/* The tier's configured target, before the app's column clamp.
+				 * This is the value persisted to the app preference: on a
+				 * narrow column the app clamps it for display, and when the
+				 * window widens it restores the configured target instead of
+				 * staying pinned to the old clamp. `full` is inherently the
+				 * live maximum. */
+				function tierTargetPx(tier, root) {
 					switch (tier) {
 						case "medium":
 						case "wide":
 						case "ultra":
-							return Math.min(NOMINAL_WIDTH_PX[tier], cap);
-						case "full": return cap;
-						case "custom": {
-							const dragged = readStoredNumber(CUSTOM_KEY);
-							return dragged === null ? null : Math.min(dragged, cap);
-						}
+							return NOMINAL_WIDTH_PX[tier];
+						case "full":
+							return Math.max(CONTENT_MIN_PX, root.offsetWidth - CONTENT_EDGE_BUDGET_PX);
+						case "custom": return readStoredNumber(CUSTOM_KEY);
 						default: return null; /* standard: app default */
 					}
 				}
 
+				/* The px actually applied to the column (same floor/max as the
+				 * app's resolveContentWidth). */
+				function appliedTierPx(tier, root) {
+					const target = tierTargetPx(tier, root);
+					if (target === null) return null;
+					const cap = Math.max(CONTENT_MIN_PX, root.offsetWidth - CONTENT_EDGE_BUDGET_PX);
+					return Math.min(Math.max(target, CONTENT_MIN_PX), cap);
+				}
+
 				/* The transcript width the app currently resolves for the live
 				 * column (after its own clamp), used by the custom-drag guide.
 				 * During a drag the app writes the clamped px to the target's
@@ -355,28 +405,47 @@ window.__ModuleLoader__.load({
 					/* 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") !== "") {
+					const targetPx = tierTargetPx(tier, root);
+					if (targetPx === null) {
+						/* standard: hand the width back to the app default. The
+						 * app's width preference is cleared as well; standard is
+						 * deliberately the reset to the app's default width. */
+						if (target.style.getPropertyValue("--dsh-chat-user-width") !== "" || preferenceOwned) {
 							target.style.removeProperty("--dsh-chat-user-width");
 							try {
 								window.localStorage.removeItem(APP_PREF_KEY);
 							} catch (e) {
 								/* ignore */
 							}
+							preferenceOwned = false;
+							preferenceWritten = null;
 						}
 						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");
+					const laidOut = root.offsetWidth > 0;
+					/* `full` derives its target from the live column; without a
+					 * layout box it would collapse to the 640px floor and pin a
+					 * narrow width. Wait for the fallback/resize pass. */
+					if (!laidOut && tier === "full") return;
+					if (laidOut) {
+						const px = appliedTierPx(tier, root);
+						if (px !== null) {
+							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");
+							}
+						}
 					}
+					/* Persist the unclamped target even while the root is not
+					 * laid out (fixed tiers / recorded custom width do not
+					 * depend on the column). The app clamps it for display and
+					 * restores it after a resize / remount. */
+					const preference = String(Math.round(targetPx));
 					try {
-						if (window.localStorage.getItem(APP_PREF_KEY) !== next) {
-							window.localStorage.setItem(APP_PREF_KEY, next);
+						if (window.localStorage.getItem(APP_PREF_KEY) !== preference) {
+							window.localStorage.setItem(APP_PREF_KEY, preference);
+							preferenceOwned = true;
+							preferenceWritten = preference;
 						}
 					} catch (e) {
 						/* ignore */
@@ -386,25 +455,30 @@ window.__ModuleLoader__.load({
 				/* true while the CURRENT tier is the one that collapsed the sidebar */
 				let collapsedByTier = false;
 
-				function applyTier(tier) {
+				/* `persist` is false when another tab already wrote the tier:
+				 * adopting it must not write localStorage again. */
+				function applyTier(tier, persist = true) {
 					body().setAttribute("data-dsh-width", tier);
-					try {
-						window.localStorage.setItem(KEY, tier);
-					} catch (e) {
-						/* storage unavailable — state still applies this session */
+					if (persist) {
+						try {
+							window.localStorage.setItem(KEY, tier);
+						} catch (e) {
+							/* storage unavailable — state still applies this session */
+						}
 					}
 					applyContentWidth(tier);
 					if (tier === "full") {
 						if (!isSidebarCollapsed()) {
 							collapseSidebar();
 							collapsedByTier = true;
-						} else {
-							collapsedByTier = false;
 						}
+						/* already collapsed: don't claim ownership we may not have */
 					} else if (tier === "standard") {
 						if (collapsedByTier && isSidebarCollapsed()) expandSidebar();
 						collapsedByTier = false;
-					} else {
+					} else if (!isSidebarCollapsed()) {
+						/* the user (or another panel) expanded it — the plugin no
+						 * longer owns the collapsed state */
 						collapsedByTier = false;
 					}
 					syncButton();
@@ -424,11 +498,13 @@ window.__ModuleLoader__.load({
 					for (let i = 0; i < TIERS.length; i++) {
 						if (TIERS[i].id === tier) idx = i;
 					}
-					const widths = [3.5, 5.5, 7.5, 10, 13];
+					/* One bar per tier so full (5 bars) and custom (6 bars,
+					 * all lit) remain distinguishable. */
+					const widths = [3.5, 5.3, 7.1, 8.9, 10.7, 12.5];
 					let bars = "";
-					for (let b = 0; b < 5; b++) {
-						const y = 0.5 + b * 3;
-						bars += `<rect x="1.5" y="${y}" width="${widths[b]}" height="2" rx="1" fill="currentColor" opacity="${b <= idx ? 1 : 0.3}"/>`;
+					for (let b = 0; b < TIERS.length; b++) {
+						const y = 0.75 + b * 2.55;
+						bars += `<rect x="1.5" y="${y}" width="${widths[b]}" height="1.6" rx="0.8" fill="currentColor" opacity="${b <= idx ? 1 : 0.3}"/>`;
 					}
 					return `<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" focusable="false">${bars}</svg>`;
 				}
@@ -493,6 +569,9 @@ window.__ModuleLoader__.load({
 					item.type = "button";
 					item.setAttribute("role", "menuitemradio");
 					item.setAttribute("data-tier", def.id);
+					/* Roving focus: the menu is opened by focusing one item, and
+					 * ArrowUp/Down/Home/End move between items. */
+					item.tabIndex = -1;
 					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();
@@ -500,12 +579,12 @@ window.__ModuleLoader__.load({
 						 * open the right-edge guide instead of applying a value. */
 						if (def.id === "custom" && readStoredNumber(CUSTOM_KEY) === null) {
 							beginCustomGuide();
-							hideMenu();
+							hideMenu(true);
 							return;
 						}
 						endGuide(false);
 						applyTier(def.id);
-						hideMenu();
+						hideMenu(true);
 					});
 					menu.appendChild(item);
 				}
@@ -532,25 +611,36 @@ window.__ModuleLoader__.load({
 					}
 				}
 
+				function menuItems() {
+					return Array.from(menu.querySelectorAll("button[data-tier]"));
+				}
+
 				function showMenu() {
 					menu.hidden = false;
 					btn.setAttribute("aria-expanded", "true");
 					syncMenu();
+					const items = menuItems();
+					const selected = items.find((item) => item.getAttribute("data-tier") === currentTier()) || items[0];
+					if (selected && typeof selected.focus === "function") selected.focus();
 				}
 
-				function hideMenu() {
+				/* restoreFocus is true for Escape / item selection, false for a
+				 * click-away so the click target keeps focus. */
+				function hideMenu(restoreFocus) {
+					const hadFocus = menu.contains(document.activeElement);
 					menu.hidden = true;
 					btn.setAttribute("aria-expanded", "false");
+					if (restoreFocus && hadFocus && typeof btn.focus === "function") btn.focus();
 				}
 
 				btn.addEventListener("click", (e) => {
 					if (e && e.stopPropagation) e.stopPropagation();
 					if (menu.hidden) showMenu();
-					else hideMenu();
+					else hideMenu(true);
 				});
 
 				const onDocClick = (e) => {
-					if (!menu.hidden && e.target !== btn && !menu.contains(e.target)) hideMenu();
+					if (!menu.hidden && e.target !== btn && !menu.contains(e.target)) hideMenu(false);
 					/* Clicking anywhere but the guide's handle cancels a
 					 * pending custom guide and restores the previous tier. */
 					if (guideActive && !guideDragging && e.target !== btn && !menu.contains(e.target) && !isHandleEvent(e)) {
@@ -558,9 +648,29 @@ window.__ModuleLoader__.load({
 					}
 				};
 				const onDocKey = (e) => {
-					if (e.key !== "Escape") return;
-					if (!menu.hidden) hideMenu();
-					if (guideActive) endGuide(true);
+					if (e.key === "Escape") {
+						if (!menu.hidden) hideMenu(true);
+						if (guideActive) endGuide(true);
+						return;
+					}
+					if (menu.hidden) return;
+					if (e.key === "Tab") {
+						/* Let Tab move on, but do not leave an orphaned menu. */
+						hideMenu(false);
+						return;
+					}
+					const items = menuItems();
+					if (items.length === 0) return;
+					const current = items.indexOf(document.activeElement);
+					let next = -1;
+					if (e.key === "ArrowDown") next = current < 0 ? 0 : (current + 1) % items.length;
+					else if (e.key === "ArrowUp") next = current < 0 ? items.length - 1 : (current - 1 + items.length) % items.length;
+					else if (e.key === "Home") next = 0;
+					else if (e.key === "End") next = items.length - 1;
+					if (next < 0) return;
+					e.preventDefault();
+					const item = items[next];
+					if (typeof item.focus === "function") item.focus();
 				};
 				document.addEventListener("click", onDocClick);
 				document.addEventListener("keydown", onDocKey);
@@ -589,6 +699,7 @@ window.__ModuleLoader__.load({
 				 * open the same bubble but never "cancel" a tier. */
 				let guideFromMenu = false;
 				let guideHideTimer = null;
+				let guideHandle = null;
 				let tierBeforeGuide = "standard";
 
 				/* The px the app currently resolves for the transcript, after
@@ -599,14 +710,17 @@ window.__ModuleLoader__.load({
 					return px === null ? "—" : `${px}px`;
 				}
 
-				/* Keep the bubble beside the right handle (it moves with the
-				 * dragged edge); fall back to the frame's right edge when the
-				 * handle is not mounted yet (hero / settling phase). */
+				/* Keep the bubble beside the handle the user actually grabbed
+				 * (it moves with the dragged edge); fall back to the right
+				 * handle / frame edge when the handle is not mounted yet
+				 * (menu-opened guide, hero or settling phase). */
 				function positionGuide() {
 					if (!guideActive) return;
-					const handle = document.querySelector('[data-width-handle="right"]');
+					const handle = guideHandle !== null && document.contains(guideHandle)
+						? guideHandle
+						: document.querySelector('[data-width-handle="right"]');
 					const viewport = window.innerWidth || 0;
-					if (handle === null || viewport === 0) {
+					if (handle === null || typeof handle.getBoundingClientRect !== "function" || viewport === 0) {
 						guide.style.left = "auto";
 						guide.style.right = "24px";
 						guide.style.top = "50%";
@@ -633,6 +747,7 @@ window.__ModuleLoader__.load({
 					guideFromMenu = true;
 					guideActive = true;
 					guideDragging = false;
+					guideHandle = null;
 					guide.hidden = false;
 					body().setAttribute("data-dsh-width-guide", "custom");
 					setGuideText("hint", t("guide.hint"));
@@ -642,10 +757,11 @@ window.__ModuleLoader__.load({
 				/* Every handle press shows the live readout, not just the first
 				 * guided drag — a repeat custom drag must keep the handle
 				 * highlight and the width bubble. */
-				function startLiveGuide() {
+				function startLiveGuide(handle) {
 					window.clearTimeout(guideHideTimer);
 					guideActive = true;
 					guideDragging = true;
+					guideHandle = handle || null;
 					guide.hidden = false;
 					body().setAttribute("data-dsh-width-guide", "custom");
 					setGuideText("live", guideValueText());
@@ -682,6 +798,7 @@ window.__ModuleLoader__.load({
 					window.clearTimeout(guideHideTimer);
 					guide.hidden = true;
 					guide.dataset.mode = "hint";
+					guideHandle = null;
 					body().removeAttribute("data-dsh-width-guide");
 					const restore = restoreTier && guideFromMenu && readStoredNumber(CUSTOM_KEY) === null;
 					guideFromMenu = false;
@@ -707,7 +824,7 @@ window.__ModuleLoader__.load({
 
 				const onHandlePointerDown = (e) => {
 					if (!isHandleEvent(e)) return;
-					startLiveGuide();
+					startLiveGuide(e.target.closest("[data-width-handle]"));
 					if (currentTier() === "custom") return;
 					body().setAttribute("data-dsh-width", "custom");
 					try {
@@ -715,7 +832,6 @@ window.__ModuleLoader__.load({
 					} catch (err) {
 						/* ignore */
 					}
-					collapsedByTier = false;
 					syncButton();
 					syncMenu();
 				};
@@ -739,15 +855,32 @@ window.__ModuleLoader__.load({
 					syncButton();
 					syncMenu();
 				};
+
+				/* A cancelled drag (touch gesture, window switch) ends without
+				 * pointerup; without this handler the bubble would stay stuck
+				 * in dragging mode and click-away would no longer dismiss it. */
+				const onHandlePointerCancel = () => {
+					/* The cancel target can be the capture element or the
+					 * document; while a drag is active, end it regardless. */
+					if (!guideActive || !guideDragging) return;
+					endGuide(false);
+					syncButton();
+					syncMenu();
+				};
 				document.addEventListener("pointerdown", onHandlePointerDown, true);
 				document.addEventListener("pointerup", onHandlePointerUp, true);
+				document.addEventListener("pointercancel", onHandlePointerCancel, true);
 
 				/* ---- feedback ring so every selection is visibly answered ---- */
 				function pulse() {
 					btn.classList.remove("pulse");
 					void btn.offsetWidth;
 					btn.classList.add("pulse");
-					window.setTimeout(() => btn.classList.remove("pulse"), 700);
+					window.clearTimeout(pulseTimer);
+					pulseTimer = window.setTimeout(() => {
+						btn.classList.remove("pulse");
+						pulseTimer = null;
+					}, 700);
 				}
 
 				/* ---- re-render localized copy when the app language changes ---- */
@@ -762,6 +895,24 @@ window.__ModuleLoader__.load({
 
 				/* ---- attach once the app shell has mounted ---- */
 				let attached = false;
+				let readyTimer = null;
+				let slowTimer = null;
+				let readyTimeout = null;
+
+				function stopWaiting() {
+					if (readyTimer !== null) {
+						clearInterval(readyTimer);
+						readyTimer = null;
+					}
+					if (slowTimer !== null) {
+						clearInterval(slowTimer);
+						slowTimer = null;
+					}
+					if (readyTimeout !== null) {
+						window.clearTimeout(readyTimeout);
+						readyTimeout = null;
+					}
+				}
 
 				/* The old gate matched [data-sidebar-collapsed] /
 				 * [data-details-collapsed]. 0.1.5-rc.2 renders collapsed
@@ -774,6 +925,7 @@ window.__ModuleLoader__.load({
 					if (attached || !body()) return;
 					if (document.querySelector("[data-shell-overlay]") === null) return;
 					attached = true;
+					stopWaiting();
 					try {
 						window.localStorage.removeItem(OLD_KEY);
 					} catch (e) {
@@ -786,14 +938,34 @@ window.__ModuleLoader__.load({
 					const saved = getSavedTier();
 					if (saved !== "standard") applyTier(saved);
 					startHealing();
+					if (widthRoot !== null) observeWidthTarget(widthRoot);
 				}
 
-				const readyTimer = setInterval(attach, 300);
-				window.addEventListener("load", attach);
-				const timeout = window.setTimeout(() => {
+				readyTimer = setInterval(attach, 300);
+				readyTimeout = window.setTimeout(() => {
+					if (attached) return;
 					clearInterval(readyTimer);
-					attach();
+					readyTimer = null;
+					/* A very slow boot should not leave the picker permanently
+					 * unmounted: keep a low-frequency retry instead of giving up. */
+					slowTimer = setInterval(attach, 2000);
 				}, READY_TIMEOUT_MS);
+				window.addEventListener("load", attach);
+
+				/* Tier changes from another tab: adopt the stored tier without
+				 * writing localStorage again (that would loop). */
+				const onStorage = (e) => {
+					if (!e || e.key !== KEY) return;
+					/* No storageArea identity check: spec does not require the
+					 * event object to be the same Storage instance as
+					 * window.localStorage, and dropping the event would break
+					 * cross-tab sync. */
+					const next = e.newValue;
+					if (typeof next !== "string" || !TIERS.some((tier) => tier.id === next)) return;
+					if (currentTier() === next) return;
+					applyTier(next, false);
+				};
+				window.addEventListener("storage", onStorage);
 
 				/* ---- self-heal: re-apply the width when the chat tree
 				 * remounts (conversation switch). Panels are never managed
@@ -812,15 +984,51 @@ window.__ModuleLoader__.load({
 				let rootRetryDelay = ROOT_RETRY_MIN_MS;
 				let rootRetryTimer = null;
 				let healFrame = null;
+				let resizeFrame = null;
 				let observer = null;
 				let fallbackTimer = null;
+				let widthObserver = null;
+				let observedTarget = null;
+
+				/* Return the frame id so heal and resize can be debounced and
+				 * cancelled independently. The old helper always wrote the
+				 * heal slot, so resizeFrame never became non-null and every
+				 * resize event scheduled another frame. */
+				function scheduleFrame(cb) {
+					return typeof requestAnimationFrame === "function"
+						? requestAnimationFrame(cb)
+						: window.setTimeout(cb, 0);
+				}
+				function cancelFrame(id) {
+					if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(id);
+					else window.clearTimeout(id);
+				}
 
-				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);
+				/* Watch the column that sizes the transcript. Sidebar/rightbar
+				 * changes and frame resizes alter it; `full` (and a clamped
+				 * fixed/custom width) must follow without polling every
+				 * mutation. Guarded for browsers/tests without ResizeObserver. */
+				function observeWidthTarget(root) {
+					if (typeof ResizeObserver === "undefined") return;
+					const target = widthTarget(root);
+					if (target === observedTarget && widthObserver !== null) return;
+					if (widthObserver !== null) {
+						widthObserver.disconnect();
+						widthObserver = null;
+					}
+					observedTarget = target;
+					widthObserver = new ResizeObserver(() => {
+						/* Never fight the app's native drag: it owns the width
+						 * while the user is moving a handle. */
+						if (guideActive && guideDragging) return;
+						const tier = currentTier();
+						if (tier === "standard") return;
+						applyContentWidth(tier);
+						syncButton();
+						syncMenu();
+					});
+					widthObserver.observe(target);
+				}
 
 				function scheduleRootRetry() {
 					if (rootRetryTimer !== null) return;
@@ -836,7 +1044,12 @@ window.__ModuleLoader__.load({
 						} else {
 							rootMissing = false;
 							rootRetryDelay = ROOT_RETRY_MIN_MS;
-							if (root !== prev) applyContentWidth(tier);
+							if (root !== prev) {
+								applyContentWidth(tier);
+								syncButton();
+								syncMenu();
+							}
+							observeWidthTarget(root);
 						}
 					}, rootRetryDelay);
 				}
@@ -845,15 +1058,18 @@ window.__ModuleLoader__.load({
 					/* The right handle only mounts in the active phase; keep the
 					 * guide pinned to it once the chat tree settles. */
 					if (guideActive) positionGuide();
+					/* The app's native drag owns the inline width until release;
+					 * a heal must not restore the previous custom value on top. */
+					if (guideActive && guideDragging) return;
 					const tier = currentTier();
 					if (tier === "standard") return;
 					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();
+					if (rootMissing || fromObserver) {
+						/* Mid-remount / mutation churn: walk the recorded path
+						 * only (O(depth)); the backoff retry owns full scans
+						 * until the new root exists. */
+						root = findWidthRoot(false);
 					} else {
 						root = findWidthRoot();
 					}
@@ -861,27 +1077,33 @@ window.__ModuleLoader__.load({
 						if (!rootMissing) {
 							rootMissing = true;
 							rootRetryDelay = ROOT_RETRY_MIN_MS;
-							scheduleRootRetry();
 						}
+						/* Idempotent: keep a backoff retry alive even if the
+						 * previous one ended while this tier was standard. */
+						scheduleRootRetry();
 						return;
 					}
 					if (rootMissing) {
 						rootMissing = false;
 						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");
+					observeWidthTarget(root);
+					if (root !== prev) {
+						applyContentWidth(tier);
+						syncButton();
+						syncMenu();
+					} else if (!fromObserver) {
+						/* Fallback tick: retry an apply that was skipped while
+						 * the root had no layout box. */
+						applyContentWidth(tier);
+					}
 				}
 
 				function startHealing() {
 					if (typeof MutationObserver !== "undefined") {
 						observer = new MutationObserver(() => {
 							if (healFrame !== null) return;
-							scheduleFrame(() => {
+							healFrame = scheduleFrame(() => {
 								healFrame = null;
 								heal(true);
 							});
@@ -894,7 +1116,7 @@ window.__ModuleLoader__.load({
 						});
 					}
 					/* Low-frequency fallback so self-heal still runs if the
-					 * observer misses something — cheap: no scan while the
+					 * observer misses something — cheap: no full scan while the
 					 * cached root is alive. */
 					fallbackTimer = setInterval(() => heal(false), FALLBACK_HEAL_MS);
 				}
@@ -902,12 +1124,14 @@ window.__ModuleLoader__.load({
 				/* ---- keep the picker and the guide aligned with the live
 				 * column. Standard/full re-resolve on resize, and the guide
 				 * must stay beside the handle when the frame resizes. ---- */
-				let resizeFrame = null;
-
 				const onWindowResize = () => {
 					if (resizeFrame !== null) return;
-					scheduleFrame(() => {
+					resizeFrame = scheduleFrame(() => {
 						resizeFrame = null;
+						if (!(guideActive && guideDragging)) {
+							const tier = currentTier();
+							if (tier !== "standard") applyContentWidth(tier);
+						}
 						syncButton();
 						syncMenu();
 						positionGuide();
@@ -915,34 +1139,70 @@ window.__ModuleLoader__.load({
 				};
 				window.addEventListener("resize", onWindowResize);
 
+				/* All healing/observer state is initialized by now; try an
+				 * immediate mount instead of waiting for the first interval. */
+				attach();
+
 				/* ---- disposer ---- */
 				return () => {
 					unsubscribeLocale();
-					clearInterval(readyTimer);
+					stopWaiting();
 					clearInterval(fallbackTimer);
-					clearTimeout(timeout);
 					clearTimeout(rootRetryTimer);
 					clearTimeout(guideHideTimer);
+					clearTimeout(pulseTimer);
 					if (healFrame !== null) cancelFrame(healFrame);
 					if (resizeFrame !== null) cancelFrame(resizeFrame);
+					if (widthObserver !== null) {
+						widthObserver.disconnect();
+						widthObserver = null;
+						observedTarget = null;
+					}
 					window.removeEventListener("resize", onWindowResize);
+					window.removeEventListener("load", attach);
+					window.removeEventListener("storage", onStorage);
 					if (observer !== null) observer.disconnect();
 					document.removeEventListener("click", onDocClick);
 					document.removeEventListener("keydown", onDocKey);
 					document.removeEventListener("pointerdown", onHandlePointerDown, true);
 					document.removeEventListener("pointerup", onHandlePointerUp, true);
+					document.removeEventListener("pointercancel", onHandlePointerCancel, true);
 					document.removeEventListener("pointermove", onGuidePointerMove, true);
 					if (btn.parentNode) btn.parentNode.removeChild(btn);
 					if (menu.parentNode) menu.parentNode.removeChild(menu);
 					if (guide.parentNode) guide.parentNode.removeChild(guide);
 					if (styleTag.parentNode) styleTag.parentNode.removeChild(styleTag);
-					/* 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. */
+					/* Hand the width back to the app default. Only a value this
+					 * plugin wrote is removed, so a native drag preference that
+					 * predates the plugin survives unload. */
 					if (widthRoot !== null) {
 						widthTarget(widthRoot).style.removeProperty("--dsh-chat-user-width");
 					}
+					if (preferenceOwned) {
+						try {
+							/* Only remove the exact value this plugin wrote; a
+							 * native drag since then owns the preference. */
+							if (preferenceWritten !== null
+								&& window.localStorage.getItem(APP_PREF_KEY) === preferenceWritten) {
+								window.localStorage.removeItem(APP_PREF_KEY);
+							}
+						} catch (e) {
+							/* ignore */
+						}
+						preferenceOwned = false;
+						preferenceWritten = null;
+					}
+					/* Undo a collapse this plugin owned; a manual collapse is
+					 * left alone. */
+					if (collapsedByTier) {
+						try {
+							if (isSidebarCollapsed()) layout.toggleSidebar();
+						} catch (e) {
+							/* ignore */
+						}
+						collapsedByTier = false;
+					}
+					guideHandle = null;
 					body().removeAttribute("data-dsh-width");
 					body().removeAttribute("data-dsh-width-guide");
 				};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-width-tiers",
-  "version": "1.0.8",
-  "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+ (0.2.1-rc.1 width axis checked), so the built-in drag handles keep working. UI copy follows the app language (zh / en).",
+  "version": "1.0.9",
+  "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+ (0.2.1-rc.2 width axis checked), so the built-in drag handles keep working. UI copy follows the app language (zh / en).",
   "license": "MIT",
   "author": "aaronlei",
   "publishConfig": {
@@ -48,6 +48,9 @@
     "type": "git",
     "url": "git+https://github.com/aaronlei/dsh-width-tiers.git"
   },
+  "scripts": {
+    "test": "node test.cjs"
+  },
   "engines": {
     "node": ">=18"
   }