dsh-taskboard 0.6.0 → 0.6.1

package/README.md

@@ -215,13 +215,17 @@ pnpm 的构建授权——按报错把 key 加进 profile 的 `pnpm-workspace.ya
 git clone https://github.com/cloader/dsh-taskboard.git
 cd dsh-taskboard
 npm install && npm run build    # host ESM + client CJS 双构建
-npm test                        # vitest 全量（232 项）
+npm test                        # vitest 全量（233 项）
 node tests/manual-git-e2e.mjs   # 真 git 端到端手测（worktree 全链路 + 续跑 + diff 查看器）
 node scripts/screenshot.mjs     # 重新生成 img/ 截图（需本机 Edge）
 ```
 
 ## 升级日志
 
+### 0.6.1
+
+- **修复：`/` 快捷补全弹层被任务弹窗滚动容器裁剪**：弹层 portal 到 document.body 并 fixed 锚定输入框，不再被表单滚动容器裁剪；上方空间不足自动下翻、贴边收拢，并随滚动/缩放实时跟随
+- **修复：键盘 ↑/↓ 选择补全项时列表不滚动**：高亮项自动滚入视野（含 wrap-around），直调列表 scrollTop 避免连带滚动模态表体
 ### 0.6.0
 
 - **任务弹窗左右双栏宽屏布局、输入框 / 快捷补全与执行权限选择： [@jw5555555555](https://github.com/jw5555555555)（[#14](https://github.com/cloader/dsh-taskboard/pull/14)）**

package/lib/client.js

@@ -8,6 +8,7 @@ window.__ModuleLoader__.load({
 		let react = require("react");
 		let react_dom_client = require("react-dom/client");
 		let react_jsx_runtime = require("react/jsx-runtime");
+		let react_dom = require("react-dom");
 
 		//#region src/client/api.ts
 		/** Unwrap the envelope or throw a readable error. */
@@ -2857,9 +2858,11 @@ window.__ModuleLoader__.load({
 		  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary, #1f2328) 18%, transparent);
 		}
 
-		/* Slash Autocomplete Popup */
+		/* Slash Autocomplete Popup. Fixed positioning (left/top/width/maxHeight/z-index)
+		 * is set INLINE by SlashPromptInput: the popup is portaled to document.body and
+		 * anchored to the textarea's viewport rect, so the scrollable modal body can no
+		 * longer clip its top (0.6.0 field report). Only the visual shell lives here. */
 		.dsh-atb-slash-popup {
-		  position: absolute; left: 0; bottom: calc(100% + 6px); width: 100%; max-height: 240px; z-index: 100;
 		  display: flex; flex-direction: column; overflow: hidden; border-radius: 10px;
 		  background: var(--dsw-alias-bg-overlay, #fff); color: var(--dsw-alias-label-primary, inherit);
 		  border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.28));
@@ -3190,7 +3193,7 @@ window.__ModuleLoader__.load({
 		* @module dsh-taskboard/shared/version
 		*/
 		/** The package version (must equal package.json "version"). */
-		const PLUGIN_VERSION = "0.6.0";
+		const PLUGIN_VERSION = "0.6.1";
 
 		//#endregion
 		//#region src/client/board/labels.ts
@@ -4750,6 +4753,9 @@ window.__ModuleLoader__.load({
 		function SlashPromptInput({ value, onChange, controller, placeholder, rows = 4, maxLength = 8e3, disabled = false, autoFocus = false, className, ariaLabel }) {
 			const t = useT();
 			const textareaRef = (0, react.useRef)(null);
+			const popupRef = (0, react.useRef)(null);
+			const listRef = (0, react.useRef)(null);
+			const [popupStyle, setPopupStyle] = (0, react.useState)({});
 			const [hostCompletions, setHostCompletions] = (0, react.useState)(void 0);
 			const completions = (0, react.useMemo)(() => {
 				const merge = (defaults, host) => {
@@ -4796,6 +4802,20 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				if (selectedIndex >= filteredItems.length) setSelectedIndex(Math.max(0, filteredItems.length - 1));
 			}, [filteredItems.length, selectedIndex]);
+			(0, react.useLayoutEffect)(() => {
+				if (!popupOpen) return;
+				const list = listRef.current;
+				const active = list?.children[selectedIndex];
+				if (list === null || !(active instanceof HTMLElement)) return;
+				const listRect = list.getBoundingClientRect();
+				const itemRect = active.getBoundingClientRect();
+				if (itemRect.top < listRect.top) list.scrollTop -= listRect.top - itemRect.top;
+				else if (itemRect.bottom > listRect.bottom) list.scrollTop += itemRect.bottom - listRect.bottom;
+			}, [
+				popupOpen,
+				selectedIndex,
+				filteredItems
+			]);
 			const checkSlashTrigger = () => {
 				const el = textareaRef.current;
 				if (el === null) return;
@@ -4860,6 +4880,42 @@ window.__ModuleLoader__.load({
 					}
 				}
 			};
+			const positionPopup = (0, react.useCallback)(() => {
+				const anchor = textareaRef.current;
+				if (anchor === null) return;
+				const rect = anchor.getBoundingClientRect();
+				const gap = 6;
+				const margin = 8;
+				const vh = window.innerHeight;
+				const measured = popupRef.current?.offsetHeight ?? 0;
+				const natural = measured > 0 ? measured : 240;
+				const roomAbove = rect.top - gap - margin;
+				const roomBelow = vh - margin - (rect.bottom + gap);
+				const openBelow = roomBelow > roomAbove;
+				const height = Math.min(natural, Math.max(openBelow ? roomBelow : roomAbove, 120));
+				const top = openBelow ? rect.bottom + gap : rect.top - gap - height;
+				setPopupStyle((prev) => prev.left === rect.left && prev.top === top && prev.width === rect.width && prev.maxHeight === height ? prev : {
+					position: "fixed",
+					left: rect.left,
+					top,
+					width: rect.width,
+					maxHeight: height,
+					zIndex: 100
+				});
+			}, []);
+			(0, react.useLayoutEffect)(() => {
+				if (!popupOpen) return;
+				positionPopup();
+			});
+			(0, react.useEffect)(() => {
+				if (!popupOpen) return;
+				window.addEventListener("scroll", positionPopup, true);
+				window.addEventListener("resize", positionPopup);
+				return () => {
+					window.removeEventListener("scroll", positionPopup, true);
+					window.removeEventListener("resize", positionPopup);
+				};
+			}, [popupOpen, positionPopup]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: `dsh-atb-prompt-wrap ${className ?? ""}`,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4881,8 +4937,10 @@ window.__ModuleLoader__.load({
 						onKeyUp: checkSlashTrigger,
 						onClick: checkSlashTrigger,
 						onKeyDown: handleKeyDown
-					}), popupOpen && filteredItems.length > 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					}), popupOpen && filteredItems.length > 0 && (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: popupRef,
 						className: "dsh-atb-slash-popup",
+						style: popupStyle,
 						role: "listbox",
 						"aria-label": t("slash.aria"),
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -4895,6 +4953,7 @@ window.__ModuleLoader__.load({
 								children: t("slash.hint")
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							ref: listRef,
 							className: "dsh-atb-slash-list",
 							children: filteredItems.map((item, idx) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								role: "option",
@@ -4925,7 +4984,7 @@ window.__ModuleLoader__.load({
 								]
 							}, `${item.kind}-${item.name}`))
 						})]
-					})]
+					}), document.body)]
 				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "dsh-atb-prompt-foot",
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-taskboard",
   "description": "Agent-first task board for the DSH web GUI: host-authoritative task ledger with taskboard_* agent tools, project (= workspace) claim boundaries, per-task model execution in fresh sessions, optional per-task git-worktree isolation (dedicated task branches, commit evidence, one-click merge), host-side cron scheduling, and a live SSE kanban view. Mounts via the official dsh plugin system — no DSH source changes.",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "type": "module",
   "main": "lib/index.js",
   "exports": {

package/src/client/board/SlashPromptInput.tsx

@@ -6,7 +6,8 @@
  *
  * @module dsh-taskboard/client/board/SlashPromptInput
  */
-import { useEffect, useMemo, useRef, useState, type ChangeEvent, type KeyboardEvent } from 'react'
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ChangeEvent, type CSSProperties, type KeyboardEvent } from 'react'
+import { createPortal } from 'react-dom'
 import type { BoardController } from '../controller.ts'
 import type { PromptCompletionItem } from '../../shared/api.ts'
 import { useT, type Translate } from '../i18n/runtime.ts'
@@ -83,6 +84,10 @@ export function SlashPromptInput({
 }: SlashPromptInputProps) {
   const t = useT()
   const textareaRef = useRef<HTMLTextAreaElement>(null)
+  const popupRef = useRef<HTMLDivElement>(null)
+  const listRef = useRef<HTMLDivElement>(null)
+  // Inline fixed-position style for the portaled popup (set by positionPopup).
+  const [popupStyle, setPopupStyle] = useState<CSSProperties>({})
 
   // Autocomplete state: only HOST-provided items are stateful; the built-in
   // defaults are re-derived per render so their descriptions follow the
@@ -131,6 +136,22 @@ export function SlashPromptInput({
     }
   }, [filteredItems.length, selectedIndex])
 
+  // Keep the keyboard-highlighted option visible inside the scrolling list:
+  // mouse hovering only ever targets rendered rows, but ArrowUp/ArrowDown can
+  // move the highlight past the clipped edge. Adjust the list's scrollTop
+  // directly from rect deltas — NOT scrollIntoView, which would also scroll
+  // ancestor containers (the modal body behind the portaled popup).
+  useLayoutEffect(() => {
+    if (!popupOpen) return
+    const list = listRef.current
+    const active = list?.children[selectedIndex]
+    if (list === null || !(active instanceof HTMLElement)) return
+    const listRect = list.getBoundingClientRect()
+    const itemRect = active.getBoundingClientRect()
+    if (itemRect.top < listRect.top) list.scrollTop -= listRect.top - itemRect.top
+    else if (itemRect.bottom > listRect.bottom) list.scrollTop += itemRect.bottom - listRect.bottom
+  }, [popupOpen, selectedIndex, filteredItems])
+
   // Detect slash typing on cursor movement or text change
   const checkSlashTrigger = (): void => {
     const el = textareaRef.current
@@ -207,6 +228,51 @@ export function SlashPromptInput({
     }
   }
 
+  // The popup is portaled to document.body and fixed-positioned from the
+  // textarea's viewport rect: an absolute popup inside the scrollable modal
+  // body was clipped at the container's top edge (0.6.0 field report).
+  // Opens above by preference, flips below when the top is tight, and clamps
+  // to the viewport (maxHeight shrinks; the list scrolls internally).
+  const positionPopup = useCallback((): void => {
+    const anchor = textareaRef.current
+    if (anchor === null) return
+    const rect = anchor.getBoundingClientRect()
+    const gap = 6
+    const margin = 8
+    const vh = window.innerHeight
+    const measured = popupRef.current?.offsetHeight ?? 0
+    const natural = measured > 0 ? measured : 240
+    const roomAbove = rect.top - gap - margin
+    const roomBelow = vh - margin - (rect.bottom + gap)
+    const openBelow = roomBelow > roomAbove
+    const height = Math.min(natural, Math.max(openBelow ? roomBelow : roomAbove, 120))
+    const top = openBelow ? rect.bottom + gap : rect.top - gap - height
+    // Bail out (return prev) when unchanged: the layout effect below runs on
+    // every open render, and a fresh object here would re-render forever.
+    setPopupStyle(prev => (prev.left === rect.left && prev.top === top && prev.width === rect.width && prev.maxHeight === height
+      ? prev
+      : { position: 'fixed', left: rect.left, top, width: rect.width, maxHeight: height, zIndex: 100 }))
+  }, [])
+
+  // Reposition on every open render: the popup height follows the filtered
+  // item count, so typing changes the geometry too.
+  useLayoutEffect(() => {
+    if (!popupOpen) return
+    positionPopup()
+  })
+
+  // Follow scrolling and viewport resizes while open (capture phase: the
+  // modal body scrolls, the window itself does not).
+  useEffect(() => {
+    if (!popupOpen) return
+    window.addEventListener('scroll', positionPopup, true)
+    window.addEventListener('resize', positionPopup)
+    return () => {
+      window.removeEventListener('scroll', positionPopup, true)
+      window.removeEventListener('resize', positionPopup)
+    }
+  }, [popupOpen, positionPopup])
+
   return (
     <div className={`dsh-atb-prompt-wrap ${className ?? ''}`}>
       <div className="dsh-atb-prompt-inner">
@@ -229,14 +295,15 @@ export function SlashPromptInput({
           onKeyDown={handleKeyDown}
         />
 
-        {/* Slash Autocomplete Popup */}
-        {popupOpen && filteredItems.length > 0 && (
-          <div className="dsh-atb-slash-popup" role="listbox" aria-label={t('slash.aria')}>
+        {/* Slash Autocomplete Popup — portaled to document.body so the
+            scrollable modal body can never clip it (see positionPopup). */}
+        {popupOpen && filteredItems.length > 0 && createPortal(
+          <div ref={popupRef} className="dsh-atb-slash-popup" style={popupStyle} role="listbox" aria-label={t('slash.aria')}>
             <div className="dsh-atb-slash-head">
               <span className="dsh-atb-slash-title">{t('slash.title')}</span>
               <span className="dsh-atb-slash-hint">{t('slash.hint')}</span>
             </div>
-            <div className="dsh-atb-slash-list">
+            <div ref={listRef} className="dsh-atb-slash-list">
               {filteredItems.map((item, idx) => (
                 <div
                   key={`${item.kind}-${item.name}`}
@@ -257,7 +324,8 @@ export function SlashPromptInput({
                 </div>
               ))}
             </div>
-          </div>
+          </div>,
+          document.body,
         )}
       </div>
 

package/src/client/styles.ts

@@ -868,9 +868,11 @@ button.dsh-atb-chip2.dsh-atb-chip-btn:hover {
   box-shadow: 0 0 0 3px color-mix(in srgb, var(--dsw-alias-brand-primary, #1f2328) 18%, transparent);
 }
 
-/* Slash Autocomplete Popup */
+/* Slash Autocomplete Popup. Fixed positioning (left/top/width/maxHeight/z-index)
+ * is set INLINE by SlashPromptInput: the popup is portaled to document.body and
+ * anchored to the textarea's viewport rect, so the scrollable modal body can no
+ * longer clip its top (0.6.0 field report). Only the visual shell lives here. */
 .dsh-atb-slash-popup {
-  position: absolute; left: 0; bottom: calc(100% + 6px); width: 100%; max-height: 240px; z-index: 100;
   display: flex; flex-direction: column; overflow: hidden; border-radius: 10px;
   background: var(--dsw-alias-bg-overlay, #fff); color: var(--dsw-alias-label-primary, inherit);
   border: 1px solid var(--dsw-alias-border-l2, rgba(128,128,128,.28));

package/src/shared/version.ts

@@ -6,4 +6,4 @@
  */
 
 /** The package version (must equal package.json "version"). */
-export const PLUGIN_VERSION = '0.6.0'
+export const PLUGIN_VERSION = '0.6.1'