dsh-plugin-workbench 0.0.11 → 0.0.13

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [0.0.13] - 2026-08-26
+
+### Fixed
+
+- **预览分栏宽度拖拽：一拖就骤然缩小到最窄，之后无法拖动、无法复原**。根因：
+  拖拽计算"预览最大宽度"时用 `handle.parentElement` 测量中间列宽度，但 slot 系统把
+  slot 内容包在一层 `display: contents` 的包装元素里——该包装层不参与布局，
+  `getBoundingClientRect().width` 恒为 **0**，于是
+  `max = max(240, 0 - 240) = 240`，第一次 `pointermove` 就把宽度钳到最小宽度 240，
+  之后每次移动都被钳在 240，表现为骤然缩小且拖不回来（100% 复现，与窗口/鼠标操作
+  无关）。修复：`laidOutParent()` 跳过所有 `display: contents` 层，取真正参与布局的
+  flex 容器（中间列）再测量；持久化宽度恢复时同样用它校准。
+- 拖拽健壮性（防同类"卡死"）：`setPointerCapture` 保证 `pointerup` 在指针移出窗口后
+  也能派发并清理监听器；监听 `pointercancel`；每次 `pointerdown` 防御性移除上一次
+  残留的监听器；组件卸载时清理窗口监听器；拖拽中每步实时重测中间列宽度。
+
+### Added
+
+- **预览宽度持久化**：拖拽后的分栏宽度写入 localStorage，刷新/重开会话后恢复
+  （自动按当前窗宽 clamp 在有效区间内）。
+
+
+## [0.0.12] - 2026-08-25
+
+- 相关插件段新增 dsh-plugin-windows-guard（Windows 环境防坑守则 skill 插件，互相引流）。
+
+
 本项目所有重要变更都会记录在此文件。
 格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.1.0/)，
 版本号遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/)。

package/README.md

@@ -140,6 +140,7 @@ dsh plugin --profile web remove dsh-plugin-workbench
 | [dsh-plugin-dev-kb](https://www.npmjs.com/package/dsh-plugin-dev-kb) | [GitHub 仓库](https://github.com/Pasumao/dsh-plugin-dev-kb) | 插件开发知识库（官方文档完整镜像 + 技能） |
 | [dsh-plugin-image-tools](https://www.npmjs.com/package/dsh-plugin-image-tools) | [GitHub 仓库](https://github.com/Pasumao/dsh-plugin-image-tools) | 图片选择卡 + 回复内嵌图片 + 盲模型收图 |
 | [dsh-plugin-table-zoom](https://www.npmjs.com/package/dsh-plugin-table-zoom) | [GitHub 仓库](https://github.com/Pasumao/dsh-plugin-table-zoom) | 聊天长表格浮窗查看 + 一键复制 Markdown |
+| [dsh-plugin-windows-guard](https://www.npmjs.com/package/dsh-plugin-windows-guard) | [GitHub 仓库](https://github.com/Pasumao/dsh-plugin-windows-guard) | Windows 环境防坑守则 skill（编码/转义/路径/进程/乱码预防） |
 
 > 本系列其余插件见 [Pasumao · dsh 插件](https://github.com/Pasumao)；觉得好用欢迎到 GitHub 点 ⭐。
 

package/lib/client.js

@@ -859,17 +859,24 @@ window.__ModuleLoader__.load({
 		/**
 		* Composer integration for the workbench file column.
 		*
-		* Two gestures land text in the chat composer without touching the core:
+		* Three gestures land text in the chat composer without touching the core:
 		*
 		* 1. Drag & drop — dragging one or more tree rows and dropping ANYWHERE
 		*    outside the file column (the chat, the composer, the message list)
-		*    inserts the dragged paths into the composer. Dropping INSIDE the file
-		*    column still performs the tree's own move operation — the tree's drop
-		*    handler runs first and stops propagation, so this document-level
-		*    listener never sees those drops.
+		*    inserts the dragged paths into the composer as `@.\` mentions (falling
+		*    back to the absolute path when the file sits outside the workspace).
+		*    Dropping INSIDE the file column still performs the tree's own move
+		*    operation — the tree's drop handler runs first and stops propagation, so
+		*    this document-level listener never sees those drops.
 		*
-		* 2. Context-menu "@引用" — inserts `@<relative-workspace-path>` at the
-		*    composer caret.
+		* 2. Context-menu "@引用" — inserts `@.\<relative-workspace-path>` at the
+		*    composer caret (the `.\` prefix marks the path as workspace-relative; a
+		*    path containing whitespace uses the quoted `@"\.\path with space"` form).
+		*
+		* 3. @-mention resolution — turns a mention token (with or without the `.\`
+		*    prefix, quoted or plain) into an absolute path against the session cwd;
+		*    used by the message linkifier and the composer overlay to open the file
+		*    in the workbench preview.
 		*
 		* The composer is a controlled React textarea, so the value is updated
 		* through the native `value` setter + a bubbling `input` event (the standard
@@ -891,10 +898,21 @@ window.__ModuleLoader__.load({
 			if (dt === null || !dt.types.includes("application/x-dsh-workbench-files")) return;
 			const paths = readDraggedPaths(dt);
 			if (paths.length === 0) return;
-			if (!insertIntoComposer(paths.join("\n"))) return;
+			if (!insertIntoComposer(paths.map(dragMentionText).join("\n"))) return;
 			e.preventDefault();
 			e.stopPropagation();
 		}
+		/**
+		* One dropped path as chat text: an `@.\` mention when it lives under the
+		* workspace, the absolute path otherwise (or when no cwd is known yet).
+		*/
+		function dragMentionText(path) {
+			const { cwd } = getTabsState();
+			if (cwd === void 0) return path;
+			const rel = relPathOf(path, cwd);
+			if (rel.length === 0 || rel === path) return path;
+			return composerMention(rel);
+		}
 		/** Read the JSON paths from the custom type; falls back to raw text. */
 		function readDraggedPaths(dt) {
 			if (dt === null) return [];
@@ -956,17 +974,38 @@ window.__ModuleLoader__.load({
 			return path;
 		}
 		/**
-		* Resolve an @-mention path (workspace-relative or absolute) against the
-		* current workspace cwd; returns the absolute OS path, or undefined when the
-		* mention cannot be resolved (no cwd and the path is not absolute).
+		* Format a workspace-relative path as an `@` mention for the composer: the
+		* `.\` (or `./`) prefix marks the path as relative to the workspace root, and
+		* a path containing whitespace uses the quoted `@"..."` form so it stays one
+		* token in the draft (and one link in the rendered message).
+		*/
+		function composerMention(rel) {
+			const raw = `@.${rel.includes("\\") ? "\\" : "/"}${rel}`;
+			if (/[\s"]/.test(raw)) return `@"${raw}"`;
+			return raw;
+		}
+		/** Strip quote wrapping and a leading `.\` / `./` workspace marker. */
+		function normalizeMention(mention) {
+			let inner = mention;
+			if (inner.startsWith("\"") && inner.endsWith("\"") && inner.length >= 2) inner = inner.slice(1, -1);
+			if (inner.startsWith(".\\") || inner.startsWith("./")) inner = inner.slice(2);
+			return inner;
+		}
+		/**
+		* Resolve an @-mention path (workspace-relative with or without the `.\`
+		* marker, or absolute) against the current workspace cwd; returns the absolute
+		* OS path, or undefined when the mention cannot be resolved (no cwd and the
+		* path is not absolute).
 		*/
 		function resolveMentionPath(mention) {
-			const absolute = /^[A-Za-z]:[\\/]/.test(mention) || mention.startsWith("/") || mention.startsWith("\\");
+			const inner = normalizeMention(mention);
+			if (inner.length === 0) return void 0;
+			const absolute = /^[A-Za-z]:[\\/]/.test(inner) || inner.startsWith("/") || inner.startsWith("\\");
 			const { cwd } = getTabsState();
-			if (absolute) return mention;
+			if (absolute) return inner;
 			if (cwd === void 0) return void 0;
 			const sep = cwd.includes("\\") ? "\\" : "/";
-			return cwd.endsWith("\\") || cwd.endsWith("/") ? cwd + mention : cwd + sep + mention;
+			return cwd.endsWith("\\") || cwd.endsWith("/") ? cwd + inner : cwd + sep + inner;
 		}
 		/** Open an @-mention's file in the workbench preview (used by the linkifier). */
 		function openMention(mention) {
@@ -1811,11 +1850,14 @@ window.__ModuleLoader__.load({
 				expanded,
 				root
 			]);
-			/** Insert `@<relative-workspace-path>` into the composer (Claude Code-style mention). */
+			/**
+			* Insert an `@.\<relative-workspace-path>` mention into the composer (the
+			* `.\` prefix marks the path as workspace-relative; see composerMention).
+			*/
 			const onMention = (0, react.useCallback)((path) => {
 				const mention = relPathOf(path, cwd);
 				if (mention.length === 0) return;
-				insertIntoComposer(`@${mention} `);
+				insertIntoComposer(`${composerMention(mention)} `);
 			}, [cwd]);
 			const onTreeKeyDown = (0, react.useCallback)((e) => {
 				const mod = e.ctrlKey || e.metaKey;
@@ -15282,6 +15324,20 @@ window.__ModuleLoader__.load({
 		const PREVIEW_MIN = 240;
 		const CHAT_MIN = 240;
 		const PREVIEW_TOO_LARGE_LABEL = "512KB";
+		/** Persisted split width (px) — survives reloads so a drag is never lost. */
+		const PREVIEW_WIDTH_KEY = "dsh-plugin-workbench:preview-width";
+		/** Read the persisted preview width; `null` means "use the default 55%". */
+		function storedPreviewWidth() {
+			try {
+				if (typeof window === "undefined") return null;
+				const raw = window.localStorage.getItem(PREVIEW_WIDTH_KEY);
+				if (raw === null) return null;
+				const px = Number(raw);
+				return Number.isFinite(px) && px > 0 ? px : null;
+			} catch {
+				return null;
+			}
+		}
 		/** Same-origin raw-bytes route registered by the host half (see src/index.ts). */
 		const RAW_PREFIX = "/dsh-plugin-files/raw";
 		/** Same-origin SSE endpoint pushed by the host half (see src/index.ts). */
@@ -15343,6 +15399,22 @@ window.__ModuleLoader__.load({
 		function clamp(value, min, max) {
 			return Math.min(max, Math.max(min, value));
 		}
+		/**
+		* Nearest ancestor that actually takes part in layout. The slot system wraps
+		* each slot's content in a `display: contents` element: children still join
+		* the OUTER flex row, but the wrapper itself reports a 0×0 bounding rect.
+		* Measuring that (the old `handle.parentElement`) made `max` collapse to
+		* `PREVIEW_MIN` on the first move — the pane jumped to its minimum width and
+		* could never be dragged back out. Skip every `display: contents` layer.
+		*/
+		function laidOutParent(el) {
+			let node = el?.parentElement ?? null;
+			while (node !== null) {
+				if (getComputedStyle(node).display !== "contents") return node;
+				node = node.parentElement;
+			}
+			return null;
+		}
 		/** Parent directory of a path ('C:/a/b.md' → 'C:/a'; '' when there is none). */
 		function dirnameOf(path) {
 			const idx = Math.max(path.lastIndexOf("/"), path.lastIndexOf("\\"));
@@ -15394,6 +15466,8 @@ window.__ModuleLoader__.load({
 			const highlightRef = (0, react.useRef)(null);
 			const textareaRef = (0, react.useRef)(null);
 			const gutterRef = (0, react.useRef)(null);
+			const dragMoveRef = (0, react.useRef)(() => void 0);
+			const dragUpRef = (0, react.useRef)(() => void 0);
 			const refresh = (0, react.useCallback)(() => bump((v) => v + 1), []);
 			const tabsRef = (0, react.useRef)(tabs);
 			(0, react.useEffect)(() => {
@@ -15583,26 +15657,72 @@ window.__ModuleLoader__.load({
 					document.body.style.removeProperty("--dsh-preview-width");
 				};
 			}, [isOpen]);
+			(0, react.useEffect)(() => {
+				const saved = storedPreviewWidth();
+				if (saved === null) return;
+				const preview = previewRef.current;
+				const center = laidOutParent(preview);
+				if (preview === null || preview === void 0 || center === null || center === void 0) return;
+				const centerWidth = center.getBoundingClientRect().width;
+				const max = Math.max(PREVIEW_MIN, centerWidth - CHAT_MIN);
+				setPreviewWidth(clamp(saved, PREVIEW_MIN, max));
+			}, [isOpen]);
+			(0, react.useEffect)(() => () => {
+				window.removeEventListener("pointermove", dragMoveRef.current);
+				window.removeEventListener("pointerup", dragUpRef.current);
+				window.removeEventListener("pointercancel", dragUpRef.current);
+			}, []);
+			/**
+			* Start a split-width drag. Robustness notes (the "pane suddenly shrinks
+			* and freezes" bug class):
+			*
+			* - Pointer capture reroutes every later pointer event to the handle, so
+			*   `pointerup` fires EVEN when the mouse is released outside the window.
+			*   Without it the up event is lost, `onUp` never runs, and the leftover
+			*   `onMove` keeps rewriting the width from its stale baseline on every
+			*   mouse move anywhere on the page — that is the "cannot drag / cannot
+			*   restore" state.
+			* - `pointercancel` is cleaned up too (browser steals the pointer, e.g. a
+			*   tablet palm or an OS gesture).
+			* - Pointerdown defensively removes any previous listeners first, so even a
+			*   capture-less leftover cannot survive into a second drag.
+			* - The max is re-measured every move: the chat minimum is relative to the
+			*   CURRENT center column, which can change while the drag is in flight.
+			*/
 			const onHandleDown = (0, react.useCallback)((e) => {
 				e.preventDefault();
 				const handle = handleRef.current;
 				const preview = previewRef.current;
 				if (handle === null || preview === null) return;
-				const center = handle.parentElement;
+				const center = laidOutParent(handle);
 				if (center === null) return;
 				const startX = e.clientX;
 				const startWidth = preview.getBoundingClientRect().width;
-				const centerWidth = center.getBoundingClientRect().width;
-				const max = Math.max(PREVIEW_MIN, centerWidth - CHAT_MIN);
 				const onMove = (ev) => {
-					setPreviewWidth(clamp(startWidth + ev.clientX - startX, PREVIEW_MIN, max));
+					const centerWidth = center.getBoundingClientRect().width;
+					const max = Math.max(PREVIEW_MIN, centerWidth - CHAT_MIN);
+					const width = clamp(startWidth + ev.clientX - startX, PREVIEW_MIN, max);
+					setPreviewWidth(width);
+					try {
+						window.localStorage.setItem(PREVIEW_WIDTH_KEY, String(width));
+					} catch {}
 				};
 				const onUp = () => {
-					window.removeEventListener("pointermove", onMove);
-					window.removeEventListener("pointerup", onUp);
+					window.removeEventListener("pointermove", dragMoveRef.current);
+					window.removeEventListener("pointerup", dragUpRef.current);
+					window.removeEventListener("pointercancel", dragUpRef.current);
 				};
+				window.removeEventListener("pointermove", dragMoveRef.current);
+				window.removeEventListener("pointerup", dragUpRef.current);
+				window.removeEventListener("pointercancel", dragUpRef.current);
+				dragMoveRef.current = onMove;
+				dragUpRef.current = onUp;
 				window.addEventListener("pointermove", onMove);
 				window.addEventListener("pointerup", onUp);
+				window.addEventListener("pointercancel", onUp);
+				try {
+					handle.setPointerCapture(e.pointerId);
+				} catch {}
 			}, []);
 			const onSave = (0, react.useCallback)(async () => {
 				if (active === void 0) return;
@@ -15890,7 +16010,7 @@ window.__ModuleLoader__.load({
 			"tab.expand": "弹出文件详情",
 			"tab.diskChanged": "文件已在磁盘上被修改，点击重新加载（会放弃未保存的编辑）",
 			"menu.open": "打开预览",
-			"menu.atFile": "@ 在消息中引用",
+			"menu.atFile": "@. 在消息中引用",
 			"menu.newFile": "新建文件",
 			"menu.newFolder": "新建文件夹",
 			"menu.rename": "重命名",
@@ -15948,7 +16068,7 @@ window.__ModuleLoader__.load({
 			"tab.expand": "Expand file details",
 			"tab.diskChanged": "File changed on disk — click to reload (discards unsaved edits)",
 			"menu.open": "Open preview",
-			"menu.atFile": "@ Mention in message",
+			"menu.atFile": "@. Mention in message",
 			"menu.newFile": "New File",
 			"menu.newFolder": "New Folder",
 			"menu.rename": "Rename",
@@ -15995,11 +16115,11 @@ window.__ModuleLoader__.load({
 		/**
 		* @-mention linkifier for the conversation.
 		*
-		* The workbench inserts `@<relative-workspace-path>` into the composer (menu
-		* gesture "在消息中引用"), and this module makes the mention VISIBLE as a
-		* hyperlink once the message is rendered: any `@` followed by a token that
-		* matches the mention grammar is wrapped in an anchor, and clicking it opens
-		* the file in the workbench preview.
+		* The workbench inserts `@.\<relative-workspace-path>` into the composer (menu
+		* gesture "在消息中引用"; the `.\` prefix marks a workspace-relative path), and
+		* this module makes the mention VISIBLE as a hyperlink once the message is
+		* rendered: any `@`-prefixed token that matches the mention grammar is wrapped
+		* in an anchor, and clicking it opens the file in the workbench preview.
 		*
 		* Grammar (anything else stays plain text with no special meaning):
 		*   - `@` must sit at a token boundary (start of text, whitespace, or
@@ -16008,8 +16128,12 @@ window.__ModuleLoader__.load({
 		*   - the token is the longest run of non-whitespace, non-`@` characters,
 		*     with trailing sentence punctuation trimmed (`.。 ,， ;； :： !！ ?？ )）`…);
 		*   - the remaining token must be a RELATIVE path (never drive-absolute or
-		*     leading-slash), and path-shaped: either contains a `/` or `\` directory
-		*     separator, or is a single segment ending in a file extension.
+		*     leading-slash) — optionally prefixed with a `.\` or `./` workspace
+		*     marker — and path-shaped: either contains a `/` or `\` directory
+		*     separator, or is a single segment ending in a file extension;
+		*   - a path containing whitespace may instead use the quoted `@"token"` form
+		*     (the workbench writes it when the rel path has spaces, e.g.
+		*     `@"\.\my plan.md"`).
 		*
 		* Scanning mirrors the table-zoom enhancer: a MutationObserver on
 		* `document.body`, rAF-coalesced, walks the text nodes of every
@@ -16019,6 +16143,8 @@ window.__ModuleLoader__.load({
 		*/
 		/** Mention pattern: `@` + token (no whitespace, no embedded `@`). */
 		const MENTION_RE = /@([^\s@]+)/g;
+		/** Quoted mention pattern: `@"token"` — used when the path contains whitespace. */
+		const QUOTED_MENTION_RE = /@"([^"@]+)"/g;
 		/** Trailing characters trimmed from a mention token before validation. */
 		const TRAILING = /* @__PURE__ */ new Set([
 			".",
@@ -16057,7 +16183,7 @@ window.__ModuleLoader__.load({
 			if (token.startsWith("/") || token.startsWith("\\")) return false;
 			if (token.startsWith("..")) return false;
 			if (token.includes("/") || token.includes("\\")) return true;
-			return /^[^\\/]+\.[A-Za-z0-9_][A-Za-z0-9._~+-]*$/.test(token);
+			return /^[^\\/]+\.[A-Za-z0-9_][A-Za-z0-9._~+ -]*$/.test(token);
 		}
 		/** Trim trailing sentence punctuation from a raw mention token. */
 		function trimMentionToken(raw) {
@@ -16068,7 +16194,9 @@ window.__ModuleLoader__.load({
 		/**
 		* Extract every valid mention from `text` as [start, end, mention] ranges.
 		* `end` covers `@` + the TRIMMED token (trailing punctuation stays outside the
-		* link). Pure and testable: the DOM walk uses it and then splits the text node.
+		* link). For the quoted `@"..."` form the span covers `@"..."` including both
+		* quotes, while `mention` carries the inner path (used for resolution).
+		* Pure and testable: the DOM walk uses it and then splits the text node.
 		*/
 		function findMentions(text) {
 			const hits = [];
@@ -16086,7 +16214,31 @@ window.__ModuleLoader__.load({
 					mention: token
 				});
 			}
-			return hits;
+			QUOTED_MENTION_RE.lastIndex = 0;
+			let quoted;
+			while ((quoted = QUOTED_MENTION_RE.exec(text)) !== null) {
+				const at = quoted.index;
+				const inner = quoted[1];
+				if (!isBoundaryBefore(at > 0 ? text[at - 1] : void 0)) continue;
+				if (!isMentionToken(inner)) continue;
+				hits.push({
+					start: at,
+					end: at + inner.length + 3,
+					mention: inner
+				});
+			}
+			hits.sort((a, b) => a.start - b.start || a.end - b.end);
+			const merged = [];
+			for (const hit of hits) {
+				const prev = merged[merged.length - 1];
+				if (prev !== void 0 && hit.start === prev.start) {
+					merged[merged.length - 1] = hit;
+					continue;
+				}
+				if (prev !== void 0 && hit.start < prev.end) continue;
+				merged.push(hit);
+			}
+			return merged;
 		}
 		/** Containers whose text is never linkified (code, existing links, overlays). */
 		const SKIP_SELECTOR = [
@@ -16138,11 +16290,11 @@ window.__ModuleLoader__.load({
 			return true;
 		}
 		/** Style tag guard (the bundle may re-apply on HMR). */
-		let styleInstalled = false;
+		let styleInstalled$1 = false;
 		const MENTION_CSS = [".dswb-mention{color:var(--dsw-alias-state-business-primary);text-decoration:underline;text-underline-offset:2px;cursor:pointer;border-radius:4px;padding:0 1px}", ".dswb-mention:hover{background:var(--dsw-alias-interactive-bg-hover)}"].join("");
-		function installStyle() {
-			if (styleInstalled || typeof document === "undefined") return;
-			styleInstalled = true;
+		function installStyle$1() {
+			if (styleInstalled$1 || typeof document === "undefined") return;
+			styleInstalled$1 = true;
 			const tagId = "dsh-plugin-workbench/mention.module.css";
 			if (document.querySelector(`style[data-plugin-css=${JSON.stringify(tagId)}]`) === null) {
 				const tag = document.createElement("style");
@@ -16153,7 +16305,7 @@ window.__ModuleLoader__.load({
 			}
 		}
 		/** Click handler: open the mentioned file in the workbench preview. */
-		function onDocumentClick(e) {
+		function onDocumentClick$1(e) {
 			const target = e.target;
 			if (!(target instanceof Element)) return;
 			const anchor = target.closest("a.dswb-mention");
@@ -16171,12 +16323,164 @@ window.__ModuleLoader__.load({
 			if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => void 0;
 			if (linkifierInstalled) return () => void 0;
 			linkifierInstalled = true;
+			installStyle$1();
+			document.addEventListener("click", onDocumentClick$1);
+			let pending = false;
+			const scan = () => {
+				pending = false;
+				for (const root of document.querySelectorAll("[data-conversation-scroll]")) linkifyRoot(root);
+			};
+			const observer = new MutationObserver(() => {
+				if (pending) return;
+				pending = true;
+				requestAnimationFrame(scan);
+			});
+			observer.observe(document.body, {
+				childList: true,
+				subtree: true,
+				characterData: true
+			});
+			scan();
+			return () => {
+				observer.disconnect();
+				document.removeEventListener("click", onDocumentClick$1);
+				linkifierInstalled = false;
+			};
+		}
+		//#endregion
+		//#region src/client/composerMentions.ts
+		/**
+		* Composer @-mention hyperlink enhancement.
+		*
+		* The composer's visible text lives in a core-rendered backdrop (`textarea`
+		* text is transparent) that React re-renders on every keystroke, so plugin
+		* code must not mutate it. Instead this module renders its OWN overlay — an
+		* absolutely-positioned copy of the draft, in the same font/padding/wrap
+		* metrics as the textarea (copied from the core `.input,.mirror,.backdrop`
+		* rule), with every `@.\`-style mention drawn in the link color and
+		* underlined. The overlay's plain text is fully transparent, so the visible
+		* glyphs still come from the core backdrop; mention spans paint on top at the
+		* identical position (same metrics => same layout), which shows the mention as
+		* a real hyperlink inside the chat input.
+		*
+		* The overlay is appended directly to the core `.grow` container (a sibling
+		* of the backdrop/mirror) — React never manages nodes it did not create, and
+		* the overlay is `position:absolute;inset:0` so it always tracks the input
+		* box, including scroll inside `[data-input-scroll]`. It re-syncs whenever the
+		* core `[data-input-mirror]` text changes (a React-written text node, so it
+		* updates for typing AND programmatic inserts such as the core `@` menu or
+		* this plugin's own insertIntoComposer).
+		*
+		* Interaction: Ctrl/Cmd+click inside the composer textarea opens the mention
+		* under the caret in the workbench preview (the visible link is a decoration;
+		* the real input gains the click), mirroring the rendered-message linkifier.
+		*/
+		/** One-time install guard (the client bundle re-applies on HMR). */
+		let installed = false;
+		/** Style-tag guard (the bundle may re-apply on HMR). */
+		let styleInstalled = false;
+		const OVERLAY_CSS = [
+			"[data-wb-composer-mention-overlay]{position:absolute;inset:0;overflow:hidden;pointer-events:none;box-sizing:border-box;font-family:var(--dsw-font-family);font-size:inherit;line-height:inherit;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;padding:4px 12px 0 16px;color:transparent}",
+			"[data-wb-composer-mention-overlay][hidden]{display:none}",
+			".dswb-composer-mention{color:var(--dsw-alias-state-business-primary);-webkit-text-fill-color:var(--dsw-alias-state-business-primary);text-decoration:underline;text-underline-offset:2px}"
+		].join("");
+		function installStyle() {
+			if (styleInstalled || typeof document === "undefined") return;
+			styleInstalled = true;
+			const tagId = "dsh-plugin-workbench/composer-mention.module.css";
+			if (document.querySelector(`style[data-plugin-css=${JSON.stringify(tagId)}]`) === null) {
+				const tag = document.createElement("style");
+				tag.dataset.plugin = "dsh-plugin-workbench";
+				tag.dataset.pluginCss = tagId;
+				tag.textContent = OVERLAY_CSS;
+				document.head.appendChild(tag);
+			}
+		}
+		/** The overlay element for the currently visible composer, or null. */
+		let overlayEl = null;
+		/** Last draft rendered into the overlay (avoids re-rendering on own mutations). */
+		let lastDraft = null;
+		/** Create (once per composer instance) and return the overlay inside `.grow`. */
+		function ensureOverlay() {
+			const seat = document.querySelector("[data-composer-seat]");
+			if (seat === null) return null;
+			const grow = seat.querySelector("[data-input-mirror]")?.parentElement;
+			if (grow === null || grow === void 0) return null;
+			let overlay = grow.querySelector("[data-wb-composer-mention-overlay]");
+			if (overlay === null) {
+				overlay = document.createElement("div");
+				overlay.dataset.wbComposerMentionOverlay = "";
+				overlay.setAttribute("aria-hidden", "true");
+				grow.appendChild(overlay);
+			}
+			if (overlayEl !== overlay) {
+				overlayEl = overlay;
+				lastDraft = null;
+			}
+			return overlay;
+		}
+		/** Render the (transparent) draft with mention spans into the overlay. */
+		function render(overlay, draft) {
+			const hits = findMentions(draft);
+			if (hits.length === 0) {
+				overlay.hidden = true;
+				return;
+			}
+			overlay.hidden = false;
+			const frag = document.createDocumentFragment();
+			let cursor = 0;
+			for (const hit of hits) {
+				if (hit.start > cursor) frag.appendChild(document.createTextNode(draft.slice(cursor, hit.start)));
+				const span = document.createElement("span");
+				span.className = "dswb-composer-mention";
+				span.dataset.wbMention = hit.mention;
+				span.textContent = draft.slice(hit.start, hit.end);
+				frag.appendChild(span);
+				cursor = hit.end;
+			}
+			if (cursor < draft.length) frag.appendChild(document.createTextNode(draft.slice(cursor)));
+			overlay.replaceChildren(frag);
+		}
+		/** Re-sync the overlay with the composer draft (cheap no-op when unchanged). */
+		function sync() {
+			const seat = document.querySelector("[data-composer-seat]");
+			if (seat === null) return;
+			if (seat.querySelector("textarea:not([disabled]):not([readonly])") === null) return;
+			const mirror = seat.querySelector("[data-input-mirror]");
+			const overlay = ensureOverlay();
+			if (mirror === null || overlay === null) return;
+			const draft = (mirror.textContent ?? "").replace(/\n$/, "");
+			if (draft === lastDraft) return;
+			lastDraft = draft;
+			render(overlay, draft);
+		}
+		/** Ctrl/Cmd+click on the composer: open the mention under the caret. */
+		function onDocumentClick(e) {
+			if (!(e.ctrlKey || e.metaKey)) return;
+			const target = e.target;
+			if (!(target instanceof HTMLTextAreaElement)) return;
+			if (target.closest("[data-composer-seat]") === null) return;
+			const pos = target.selectionStart;
+			const draft = target.value;
+			const hits = findMentions(draft);
+			let hit = hits.find((h) => pos >= h.start && pos <= h.end);
+			if (hit === void 0) hit = hits.find((h) => pos - 1 >= h.start && pos - 1 < h.end);
+			if (hit === void 0) return;
+			e.preventDefault();
+			e.stopPropagation();
+			openMention(hit.mention);
+		}
+		/** Start the composer mention overlay + Ctrl+click opener (idempotent). */
+		function installComposerMentions() {
+			if (typeof document === "undefined" || typeof MutationObserver === "undefined") return () => void 0;
+			if (installed) return () => void 0;
+			installed = true;
 			installStyle();
 			document.addEventListener("click", onDocumentClick);
 			let pending = false;
 			const scan = () => {
 				pending = false;
-				for (const root of document.querySelectorAll("[data-conversation-scroll]")) linkifyRoot(root);
+				sync();
 			};
 			const observer = new MutationObserver(() => {
 				if (pending) return;
@@ -16192,7 +16496,7 @@ window.__ModuleLoader__.load({
 			return () => {
 				observer.disconnect();
 				document.removeEventListener("click", onDocumentClick);
-				linkifierInstalled = false;
+				installed = false;
 			};
 		}
 		//#endregion
@@ -16212,6 +16516,7 @@ window.__ModuleLoader__.load({
 				en
 			}), "files-explorer: dictionaries");
 			installComposerDrops();
+			installComposerMentions();
 			ctx.effect(() => installMentionLinkifier(), "files-explorer: @mention linkifier");
 			const listDir = (path, signal) => unwrap(ctx.connection.rpc.call(CHANNEL, "list", { path }, signal));
 			const readFile = (path, signal) => unwrap(ctx.connection.rpc.call(CHANNEL, "read", { path }, signal));