dsh-codinput 0.3.8 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-codinput",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "DSH 插件：把聊天输入框变成代码编辑器一样的输入风格（CodeMirror 6 接管 conversation.composer.bar），web 与桌面端通用。",
   "license": "MIT",
   "author": "Witherwithwinter",
@@ -66,7 +66,10 @@
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.36.0",
     "dompurify": "^3.2.4",
-    "marked": "^15.0.6"
+    "highlight.js": "^11.12.0",
+    "katex": "^0.18.0",
+    "marked": "^15.0.6",
+    "mermaid": "^12.3.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.18",

package/src/client/cm.ts

@@ -139,6 +139,19 @@ export function subscribeEditorPrefs(view: EditorView, placeholder: string, edit
   });
 }
 
+/**
+ * 永远按字面字符渲染：同时关掉 `liga` / `calt`。
+ *
+ * 连字会把 `->`、`//` 等替换成合并字形，视觉上像「字符消失」；更关键的是
+ * DSH 桌面 0.2.2 内置的 Chromium 152 在「`calt` 连字 + 后续任意字符」时会把
+ * 连字字形第一格画空（宿主 shaping bug，CSS 层面无法稳定规避）。故本插件不做
+ * 连字：编辑器所见即所存，也与预览 / 消息区的纯文本渲染保持一致。
+ */
+const LITERAL_TEXT_STYLES = {
+  fontVariantLigatures: 'none',
+  fontFeatureSettings: '"liga" 0, "calt" 0',
+} as const;
+
 function baseTheme(fontFamily: string): Extension {
   return EditorView.theme({
     '&': { fontSize: '13px', height: '100%' },
@@ -147,8 +160,13 @@ function baseTheme(fontFamily: string): Extension {
       fontFamily,
       lineHeight: '1.6',
       overflow: 'auto',
+      ...LITERAL_TEXT_STYLES,
+    },
+    '.cm-content': {
+      caretColor: 'var(--dsw-alias-state-business-primary, currentColor)',
+      paddingBottom: '8px',
+      ...LITERAL_TEXT_STYLES,
     },
-    '.cm-content': { caretColor: 'var(--dsw-alias-state-business-primary, currentColor)', paddingBottom: '8px' },
     '.cm-line': { padding: '0 8px' },
     // CodeMirror 自绘光标（drawSelection）默认黑色，深色主题下不可见——
     // 显式对齐官方输入框的 caret 颜色（品牌强调色）。

package/src/client/command.ts

@@ -3,9 +3,10 @@
  * 贡献。
  *
  * /codinput：输入回车即切换接管（进入/退出），菜单描述随当前状态变化；接管
- * 关闭（官方输入框）时输入同样生效——贡献注册是全局生命周期。菜单拾取路径
- * 会把 "/codinput" 插进草稿而不提交，切换后需清空当前草稿。侧栏里发起的退
- * 出会经总线请求 body 关掉自己的标签（见 sideinput）。
+ * 关闭（官方输入框）时输入同样生效——贡献注册是全局生命周期。命令 token 由
+ * 宿主 consume-token 通道消费；插件只在残留时兜底剥离 token 本身，绝不整体
+ * 清空草稿（否则「先有草稿再 /codinput 退出」会丢草稿）。侧栏里发起的退出会
+ * 经总线请求 body 关掉自己的标签（见 sideinput）。
  *
  */
 
@@ -17,13 +18,40 @@ import { t } from './i18n';
 import { IconCodinputCommand16 } from './icons';
 import { diagWindow, runGuarded } from './diag';
 
-function clearDraftOf(sessionId: string | undefined): void {
+/** `/codinput` 命令 token 的规范拼写（宿主命令名即 `codinput`）。 */
+const COMMAND_TOKEN = '/codinput';
+
+/**
+ * 清理 `/codinput` 命令 token 的残留，**只剥 token，不碰草稿其余内容**。
+ *
+ * 官方命令通道在调用 `ui.run` 之前会先派发 `slash/input-consume-token`
+ * （菜单拾取 = exact span，裸命令回车 = bare-token），正常路径此时草稿里
+ * 已经没有 token。但「工具行指令按钮程序化唤起菜单」等路径的 span 消费
+ * 可能落空，草稿里会残留 "/codinput" 前缀。旧实现无条件 `setDraft('')`
+ * 把草稿整体清空——用户先有草稿、再输入 `/codinput` 退出接管时，宿主只
+ * 消费掉命令 token，剩下的用户草稿随后被这段无条件清空吞掉（普通/悬浮
+ * 形态都中招，退出后内置输入框变空）。
+ *
+ * 这里沿用宿主 bare-token guard 的判据：只有「token 本身」或「token 后跟
+ * 空白」才当作命令 token 处理；"/codinputX" 这类真的用户文本不动。清理后
+ * 余下的用户内容原样保留。
+ */
+function stripCommandToken(sessionId: string | undefined): void {
   if (!sessionId) return;
   try {
     const actx = stash.sessions?.scope(sessionId);
-    if (actx && stash.conversation) stash.conversation.input.for(actx).setDraft('');
+    if (!actx || !stash.conversation) return;
+    const input = stash.conversation.input.for(actx);
+    const draft = input.state?.getSnapshot?.().draft ?? '';
+    const leading = draft.replace(/^\s+/, '');
+    if (!leading.toLowerCase().startsWith(COMMAND_TOKEN)) return;
+    const rest = leading.slice(COMMAND_TOKEN.length);
+    // 宿主命令 token 语法：token 必须以行尾/空白收尾。
+    if (rest !== '' && !/^\s/.test(rest)) return;
+    const next = rest.replace(/^\s+/, '');
+    if (next !== draft) input.setDraft(next);
   } catch {
-    /* 会话作用域不可达时忽略（提交路径本就会清空草稿） */
+    /* 会话作用域不可达时忽略（退出接管本身不受影响） */
   }
 }
 
@@ -97,8 +125,12 @@ export function registerCodinputCommand(ctx: ClientContext): void {
             ui: {
               kind: 'action',
               run: () => {
-                // 卸载会清掉诊断 sessionId，先捕获再延迟清草稿。
+                // 卸载会清掉诊断 sessionId，先捕获（清理必须在卸载前做完，
+                // 否则官方输入框挂载时就会带上残留 token）。
                 const sessionId = diagWindow().__dshCodinputSessionId ?? undefined;
+                // 只剥离命令 token：宿主已派发 consume-token，这里兜住
+                // 「程序化唤起菜单导致 span 消费落空」的残留；用户草稿保留。
+                stripCommandToken(sessionId);
                 savePrefs({ enabled: !loadPrefs().enabled });
                 // 侧栏里发起的退出：关掉承载会话的 Codinput 标签（body 经
                 // tab 域 actions.close 关闭、卸载撤销承载），主输入回到官方
@@ -106,7 +138,6 @@ export function registerCodinputCommand(ctx: ClientContext): void {
                 if (!loadPrefs().enabled) {
                   for (const carried of carriedSessionIds()) requestSidebarTabClose(carried);
                 }
-                setTimeout(() => clearDraftOf(sessionId), 80);
               },
             },
           }),

package/src/client/components/CodinputSurface.tsx

@@ -6,8 +6,6 @@
 
 import { useEffect, useMemo, useRef, useState } from 'react';
 import type { EditorView } from '@codemirror/view';
-import { marked } from 'marked';
-import * as DOMPurifyModule from 'dompurify';
 import type {
   ComposerKeyboard,
   InputActions,
@@ -16,15 +14,22 @@ import type {
   UseProjection,
 } from '../host-types';
 import { stash } from '../services';
-import { loadPrefs, savePrefs } from '../prefs';
+import { loadPrefs, savePrefs, subscribePrefs } from '../prefs';
 import { addFilesToDraft, bindSessionFilePicker, dragHasFiles } from '../attachments';
 import { diagError, diagSession, diagWindow } from '../diag';
 import { IconEdit, IconEye } from '../icons';
 import { t, useT } from '../i18n';
+import {
+  activateMarkdown,
+  handleMarkdownClick,
+  renderMarkdown,
+  type MarkdownImageTarget,
+} from '../markdown';
 import { EditorPane } from './EditorPane';
 import { SlashMenu } from './SlashMenu';
 import { PopupSelectView } from './PopupSelectView';
 import { AttachmentRail } from './AttachmentRail';
+import { ImageLightbox } from './ImageLightbox';
 import { Toolbar } from './Toolbar';
 import { StatsRow } from './StatsRow';
 
@@ -59,12 +64,6 @@ export interface CodinputSurfaceProps {
   onDragZonePointerDown?: (event: React.PointerEvent<HTMLDivElement>) => void;
 }
 
-marked.setOptions({ gfm: true, breaks: true });
-
-/** dompurify 的导出形状随打包条件漂移：默认导出与命名空间都兼容。 */
-const DOMPurify = ((DOMPurifyModule as unknown as { default?: unknown }).default ??
-  DOMPurifyModule) as unknown as { sanitize(html: string): string };
-
 export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
   const { sessionId, state, actions, useProjection, inputStandard, placeholder, disabled, blocked, running, side, hero, chatNodes, float, onDragZonePointerDown } = props;
   // 语言切换时整棵表面重渲染（文案都走 i18n 的 t()）。
@@ -73,12 +72,22 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
   const [editOn, setEditOn] = useState<boolean>(() => loadPrefs().defaultEdit);
   const [previewOn, setPreviewOn] = useState<boolean>(() => loadPrefs().defaultPreview);
   const [bodyHeight, setBodyHeight] = useState<number | null>(() => loadPrefs().composerBodyHeight);
+  /** Markdown 正文等宽连字（设置 → Markdown 等宽连字）：即时跟随 prefs 变化。 */
+  const [markdownMono, setMarkdownMono] = useState<boolean>(() => loadPrefs().markdownMono);
+  useEffect(() => subscribePrefs(() => setMarkdownMono(loadPrefs().markdownMono)), []);
   /** 拖文件悬停卡片时的落区提示（松手即入草稿附件）。 */
   const [dropActive, setDropActive] = useState(false);
   const cardRef = useRef<HTMLDivElement | null>(null);
   const viewRef = useRef<EditorView | null>(null);
   const caretRef = useRef<number | null>(null);
   const previewRef = useRef<HTMLDivElement | null>(null);
+  /** 预览 Markdown 根（图片点灯箱 / 扩展渲染 扩展激活的挂点）。 */
+  const previewBodyRef = useRef<HTMLDivElement | null>(null);
+  /** Markdown 内 http(s) 图片点击后的大图灯箱。 */
+  const [lightbox, setLightbox] = useState<MarkdownImageTarget | null>(null);
+  const onPreviewClick = (event: React.MouseEvent<HTMLDivElement>): void => {
+    handleMarkdownClick(event, { onImage: setLightbox });
+  };
 
   // 高度调节：仅顶边把手，1:1 跟手（顶边上移多少、编辑区就高多少），松手持久化。
   // 宽度不做自有调节——沿用官方聊天宽度调节器（wSkVaW_widthHandle）：
@@ -233,23 +242,38 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
     actions.submit();
   };
 
-  // 官方同语义：草稿与附件皆空时发送禁用（空草稿手势仍可经键盘 Steer）。
+  // 官方同语义（0.2.2 InputBar）：empty = 草稿与附件皆空；machineBusy = 输入机
+  // 三个 busy 阶段（adjudicating / submitting / sending）——编辑器软锁、主按钮
+  // 不再可提交；sending 时主按钮转 spinner，停止由独立停止钮（interruptible）承接。
   const inert = disabled === true || blocked === true;
   const draftEmpty = (state?.draft ?? '').trim() === '';
   const noAttachments = (state?.attachmentIds.length ?? 0) === 0;
-  // 官方 primaryStops：运行中且草稿与附件皆空 → 主按钮变停止；停止形态不随
-  // 禁用锁死（官方 primaryDisabled 在 stops 分支只看 stop 是否可用）。
-  const primaryStops = running === true && draftEmpty && noAttachments;
-  const sendDisabled =
-    inert ||
-    actions === undefined ||
-    (state !== undefined && state.phase === 'submitting') ||
-    (draftEmpty && noAttachments);
-
+  const empty = draftEmpty && noAttachments;
+  const phase = state?.phase;
+  const sending = phase === 'sending';
+  const machineBusy = phase === 'adjudicating' || phase === 'submitting' || sending;
+  // 官方 primaryStops = running && subagent===null && !sending && (empty || blocked)。
+  // （插件侧无 subagent；blocked 走 bar owner props。）
+  // 停止形态不随禁用锁死：官方 primaryDisabled 在停止分支只看 stop 是否可用。
+  const primaryStops = running === true && !sending && (empty || blocked === true);
+  // 官方 primaryDisabled 的非停止分支：empty || disabled || machineBusy || uploadsPending
+  // （插件侧草稿附件即传即用，无 uploadsPending；!live 等价于 actions 缺席）。
+  const sendDisabled = primaryStops ? false : empty || inert || machineBusy || actions === undefined;
+
+  // 统一 Markdown 管线（与用户消息同一函数）：同步渲染，draft 变更即重算。
   const html = useMemo(
-    () => DOMPurify.sanitize(marked.parse(state?.draft ?? '') as string),
+    () => renderMarkdown(state?.draft ?? '', { surface: 'preview' }),
     [state?.draft, previewOn],
   );
+  // 扩展渲染 扩展（代码高亮 / KaTeX / Mermaid）的 DOM 激活口；无注册扩展时 no-op。
+  // 依赖必须含 previewOn：预览是条件渲染，「先粘贴、后开预览」时 html 没变、根节点
+  // 却从 null 变成新挂载节点，只靠 [html] 会跳过激活（late-mount 路径：KaTeX 停在
+  // 占位、Mermaid 一直 pending、代码块复制按钮无事件）。previewOn 切换时 React 会
+  // 先跑上一次 cleanup，再对新根重新激活；side/float 与 normal 共用本效果。
+  useEffect(() => {
+    if (!previewOn) return undefined;
+    return activateMarkdown(previewBodyRef.current, 'preview');
+  }, [html, previewOn]);
 
   // ---- 分屏同步滚动：两侧按滚动比例互随（内容高度不同，比例映射） ----
   // scroll 不冒泡但走捕获相位，挂在 body 上的 onScrollCapture 能收到两栏的
@@ -380,15 +404,27 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
               placeholder={placeholderText}
               viewRef={viewRef}
               onCaretMoved={caretMoved}
-              disabled={inert}
+              // 官方 busy 软锁：adjudicating / submitting / sending 三阶段编辑器只读
+              //（EditorPane 内部已覆盖前两者，sending 由这里并入 disabled）。
+              disabled={inert || sending}
               autoFocus={true}
               solo={!previewOn}
               stateKey={sessionId ?? 'hero'}
             />
           ) : null}
           {previewOn ? (
-            <div className="dci-preview" data-solo={!editOn} ref={previewRef}>
-              {html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : <span style={{ opacity: 0.4 }}>{t("preview.empty")}</span>}
+            <div className="dci-preview" data-solo={!editOn} ref={previewRef} onClick={onPreviewClick}>
+              {html ? (
+                <div
+                  className="dci-md"
+                  data-dci-md="preview"
+                  data-mono={markdownMono ? 'true' : undefined}
+                  ref={previewBodyRef}
+                  dangerouslySetInnerHTML={{ __html: html }}
+                />
+              ) : (
+                <span style={{ opacity: 0.4 }}>{t("preview.empty")}</span>
+              )}
             </div>
           ) : null}
         </div>
@@ -400,7 +436,11 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
           triggers={triggers}
           caretRef={caretRef}
           useProjection={useProjection}
-          disabled={inert}
+          // 官方两个 owner 信号分开下发：inert（disabled）与 blocked。
+          // locked = inert || blocked；modelSeatLocked = inert || !live（不含 blocked）。
+          disabled={disabled === true}
+          blocked={blocked === true}
+          running={running === true}
           primaryStops={primaryStops}
           onStop={onStop}
           onNotify={notifyFor(sessionId)}
@@ -414,9 +454,12 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
           <StatsRow useProjection={useProjection} sessionId={sessionId} chatNodes={chatNodes} />
         ) : null}
 
-        {/* 官方 MenuView 锚定：主模式以卡片顶上方弹出；侧栏/悬浮形态由
-            SlashMenu 按 dropdown 改为头部行下方向下弹出（不被面板/视口裁剪） */}
-        {triggers ? <SlashMenu triggers={triggers} dropdown={side === true || float === true} /> : null}
+        {/* 官方 MenuView 锚定：normal 形态仍以卡片顶上方 absolute 浮层弹出（几何不变）；
+            side/float 形态由 SlashMenu portal 到 body，按卡片四周空位做自适应 fixed
+            浮层（不遮编辑区、不挤压卡片布局）。 */}
+        {triggers ? (
+          <SlashMenu triggers={triggers} dropdown={side === true || float === true} anchorRef={cardRef} />
+        ) : null}
       </div>
 
       {/* 数据行：主输入/侧栏渲染在卡片下方（官方 hero 新会话态无 stats）。 */}
@@ -425,6 +468,16 @@ export function CodinputSurface(props: CodinputSurfaceProps): JSX.Element {
       ) : null}
 
       {popup ? <PopupSelectView popup={popup} /> : null}
+
+      {/* Markdown 图片大图灯箱（用户消息侧同组件同行为）。 */}
+      {lightbox ? (
+        <ImageLightbox
+          src={lightbox.src}
+          alt={lightbox.alt}
+          labels={{ dialog: t('image.preview'), close: t('image.closePreview') }}
+          onClose={() => setLightbox(null)}
+        />
+      ) : null}
     </div>
   );
 }

package/src/client/components/EditorPane.tsx

@@ -102,7 +102,9 @@ export function EditorPane(props: EditorPaneProps): JSX.Element {
         }
         if (matchEvent(prefsNow.lineBreakHotkey, event) && prefsNow.lineBreakHotkey !== 'enter') {
           event.preventDefault();
-          view.dispatch({ changes: { from: view.state.selection.main.head, insert: '\n' } });
+          const head = view.state.selection.main.head;
+          // 显式插入换行后必须把光标放到插入点之后，否则 CodeMirror 会把光标留在插入点之前，后续输入落回上一行（B1 行为层：Shift+Enter「看起来没换行」）；普通 Enter 走 CM 默认 keymap，无此问题。
+          view.dispatch({ changes: { from: head, insert: '\n' }, selection: { anchor: head + 1 }, scrollIntoView: true });
           return true;
         }
         return false;

package/src/client/components/InputSlotSeat.tsx

@@ -26,7 +26,15 @@
  */
 
 import { useMemo } from 'react';
-import { entryId, listRows, renderSlotEntry, useSlotEntries } from './slotEntry';
+import type { ReactNode } from 'react';
+import {
+  entryId,
+  entryInjectFailed,
+  firstComponentEntry,
+  listRows,
+  renderSlotEntry,
+  useSlotEntries,
+} from './slotEntry';
 
 export interface InputSlotSeatProps {
   /** 官方子槽位全名（如 conversation.input.left）。 */
@@ -47,3 +55,50 @@ export function InputSlotSeat(props: InputSlotSeatProps): JSX.Element | null {
 
   return <>{rows.map((entry, index) => renderSlotEntry(entry, entryId(entry, index), { sessionId, standard }))}</>;
 }
+
+export interface InputSingleSlotProps {
+  /** 官方单值子槽位全名（如 conversation.input.permission / .plan）。 */
+  slot: string;
+  sessionId: string | undefined;
+  /** 宿主下发给本插件条目的 standard props 原样面。 */
+  standard: Record<string, unknown> | undefined;
+  /** 官方 renderSlot 第二参数的 owner props（如 { locked }）。 */
+  ownerProps?: Record<string, unknown> | undefined;
+  /**
+   * 兜底渲染（可选）：
+   * - 条目 inject 面在插件 fiber 里不可复现（依赖宿主服务面的 inject 会抛
+   *   `without inject`，见 slotEntry.boundInject）→ 渲染 fallback；
+   * - 条目组件自身崩溃 → EntryBoundary 回退 fallback。
+   * 缺省 null（槽位有占用者但无法镜像时按官方「画不出来」处理）。
+   */
+  fallback?: ReactNode;
+}
+
+/**
+ * 单值槽位镜像（0.2.2 的 `conversation.input.permission` / `.plan` 用）。
+ *
+ * 官方口径（InputBar.tsx）：`renderSlot("conversation.input.permission", { locked })`
+ * 与 `renderSlot("conversation.input.plan", { locked })` 位于 `.tools` 内
+ * `.modes` 容器（permission 在前）。**槽位已声明但无占用者 = 官方留空**，
+ * 因此这里对「已声明 + 空」返回 null，绝不回退自绘控件；「未声明」由调用方
+ * 用 `useSlotDeclaration` 区分后决定回退（旧宿主才回退 PermissionMenu）。
+ */
+export function InputSingleSlot(props: InputSingleSlotProps): JSX.Element | null {
+  const { slot, sessionId, standard, ownerProps, fallback } = props;
+  const entries = useSlotEntries(slot);
+  const occupant = useMemo(() => firstComponentEntry(entries), [entries]);
+
+  // 官方门槛：无会话不画该座位（InputBar 的 sessionId 三元）。
+  if (sessionId === undefined || occupant === null) return null;
+
+  // 让位可行性：inject 面必须在宿主 fiber 上下文里才算数（见 slotEntry）。
+  // 不可复现时回退调用方给的兜底（permission 用自绘菜单保住旧功能）。
+  if (entryInjectFailed(occupant, sessionId)) return <>{fallback ?? null}</>;
+
+  return renderSlotEntry(occupant, `single:${entryId(occupant, 0)}`, {
+    sessionId,
+    standard,
+    ownerProps,
+    fallback,
+  });
+}

package/src/client/components/MenuSurface.tsx

@@ -9,6 +9,11 @@
  * 更长的子页（模型/推理强度列表）时卡片保持小菜单的 top 向下生长，
  * 表现为「向下弹出」且列表伸出视口外够不着。
  *
+ * 锚点按元素实时读取：早期实现把 getBoundingClientRect 快照塞进 state，
+ * 重算时读同一份快照，scroll/resize 监听等于空转——布局一变菜单就停在打开
+ * 瞬间的位置（表现为「菜单飘到屏幕角落」）。现在每次 place 都读实时 rect，
+ * 并在打开期间逐帧比对锚点位置，兜住「不触发 scroll/resize 的重排」。
+ *
  * 滚动复刻官方两级结构：卡片 overflow:hidden +
  * max-height: min(360px, 100vh - 96px)，列表在 .dci-viewport 内滚，
  * 细滚动条由卡片注入的 --dsh-scrollbar-thumb(l2) 变量着色（官方
@@ -16,10 +21,17 @@
  */
 
 import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 
 export interface MenuSurfaceProps {
-  /** 触发器矩形（getBoundingClientRect 快照）。 */
-  anchor: { left: number; top: number; right: number; bottom: number };
+  /** 触发器元素：每次重算都读实时 rect，锚点移动后菜单跟随。 */
+  anchor: HTMLElement | null;
+  /**
+   * 打开瞬间的锚点矩形。点击本身可能触发布局变化（输入框失焦、卡片换型），
+   * layout effect 时读到的 rect 已不是用户点下去时看到的那个——首次定位优先
+   * 用它，保证菜单位置与点击时的按钮重合。
+   */
+  initialRect?: { left: number; top: number; right: number; bottom: number } | null;
   onClose(): void;
   children: ReactNode;
   /** 右对齐锚点（trailing 控件用）。 */
@@ -32,23 +44,32 @@ export interface MenuSurfaceProps {
 /** 官方 place() 的视口留距。 */
 const MARGIN = 12;
 
+/** 锚点位移阈值（px）：小于它视为亚像素抖动，不重排菜单。 */
+const SHIFT_THRESHOLD = 1;
+
 export function MenuSurface(props: MenuSurfaceProps): JSX.Element {
-  const { anchor, onClose, children, alignEnd, minWidth = 218, side = 'top' } = props;
+  const { anchor, initialRect, onClose, children, alignEnd, minWidth = 218, side = 'top' } = props;
+  const firstPlaceRef = useRef(true);
   const ref = useRef<HTMLDivElement | null>(null);
   const [pos, setPos] = useState<{ left: number; top: number } | null>(null);
 
   useLayoutEffect(() => {
     const el = ref.current;
-    if (!el) return;
+    if (!el || !anchor) return;
     const place = (): void => {
       // 尺寸取 offset*（官方同款）：不受自身 top/left 变更反馈影响。
       const w = el.offsetWidth;
       const h = el.offsetHeight;
-      let x = alignEnd ? anchor.right - w : anchor.left;
-      let y = side === 'top' ? anchor.top - 8 - h : anchor.bottom + 4;
-      if (w > 0) x = Math.min(Math.max(x, MARGIN), window.innerWidth - w - MARGIN);
-      if (h > 0) y = Math.min(Math.max(y, MARGIN), window.innerHeight - h - MARGIN);
-      setPos((prev) => (prev && prev.left === x && prev.top === y ? prev : { left: x, top: y }));
+      // 锚点尚未布局（或被隐藏）时不落位：宁可保持隐藏，也不写进一组
+      // 没有视口约束的坐标（否则菜单会停在视口外，看起来「飘走」）。
+      const rect = (firstPlaceRef.current && initialRect) || anchor.getBoundingClientRect();
+      if (rect.right - rect.left === 0 || rect.bottom - rect.top === 0 || w === 0 || h === 0) return;
+      firstPlaceRef.current = false;
+      let x = alignEnd ? rect.right - w : rect.left;
+      let y = side === 'top' ? rect.top - 8 - h : rect.bottom + 4;
+      x = Math.min(Math.max(x, MARGIN), window.innerWidth - w - MARGIN);
+      y = Math.min(Math.max(y, MARGIN), window.innerHeight - h - MARGIN);
+      setPos((prev) => (prev && Math.abs(prev.left - x) < 0.5 && Math.abs(prev.top - y) < 0.5 ? prev : { left: x, top: y }));
     };
     place();
     // 内容换页/目录热更/滚动/视口变化都重定位——官方 place 的三路监听。
@@ -56,7 +77,29 @@ export function MenuSurface(props: MenuSurfaceProps): JSX.Element {
     window.addEventListener('resize', place);
     const observer = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(place) : null;
     observer?.observe(el);
+    observer?.observe(anchor);
+
+    // 布局重排可能既不产生 scroll 也不改窗口尺寸（输入框换型、分屏切换、
+    // 会话区从空到有内容），上面的监听全都收不到信号。用低频轮询兜住这类
+    // 变化：只有锚点位移超过阈值才重排——布局微抖时不跟随，否则菜单会跟着
+    // 一帧帧地跳（表现为「来回跳」）。
+    const start = anchor.getBoundingClientRect();
+    let lastLeft = start.left;
+    let lastTop = start.top;
+    let raf = 0;
+    const tick = (): void => {
+      const r = anchor.getBoundingClientRect();
+      if (Math.abs(r.left - lastLeft) > SHIFT_THRESHOLD || Math.abs(r.top - lastTop) > SHIFT_THRESHOLD) {
+        lastLeft = r.left;
+        lastTop = r.top;
+        place();
+      }
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+
     return () => {
+      cancelAnimationFrame(raf);
       observer?.disconnect();
       window.removeEventListener('scroll', place, true);
       window.removeEventListener('resize', place);
@@ -66,15 +109,23 @@ export function MenuSurface(props: MenuSurfaceProps): JSX.Element {
   useEffect(() => {
     const onDown = (event: PointerEvent): void => {
       if (ref.current && event.target instanceof Node && ref.current.contains(event.target)) return;
+      // 落在触发器上时不要在这里关：pointerdown 先于 click，先关掉会让触发器
+      // 自己的 onClick 读到 open=false 又开回来，表现为「点一次收不起来」。
+      // 开合交给触发器的 onClick 统一 toggle。
+      if (anchor && event.target instanceof Node && anchor.contains(event.target)) return;
       onClose();
     };
     window.addEventListener('pointerdown', onDown, true);
     return () => window.removeEventListener('pointerdown', onDown, true);
-  }, [onClose]);
+  }, [anchor, onClose]);
 
   // 未定位的首帧隐藏但仍参与布局（官方 unplaced card 同款）——place() 在
   // layout effect 里同步测得尺寸后即落位，无闪烁。
-  return (
+  // 必须 portal 到 body：祖先链上的 transform / filter / backdrop-filter /
+  // contain 会把 position:fixed 的包含块从视口换成该祖先，left/top 便按它的
+  // 坐标系解释，菜单整体偏移到别处（实测能偏出 400px+，看起来「飘到角落」）。
+  // 官方数据行面板同样走 createPortal(document.body)。
+  return createPortal(
     <div
       ref={ref}
       className="dci-menu"
@@ -88,7 +139,8 @@ export function MenuSurface(props: MenuSurfaceProps): JSX.Element {
       }}
     >
       <div className="dci-viewport">{children}</div>
-    </div>
+    </div>,
+    document.body,
   );
 }
 

package/src/client/components/ModelMenu.tsx

@@ -76,7 +76,8 @@ export function ModelMenu(props: ModelMenuProps): JSX.Element {
   const [open, setOpen] = useState(false);
   const [view, setView] = useState<MenuView>('root');
   const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const [anchor, setAnchor] = useState<{ left: number; top: number; right: number; bottom: number } | null>(null);
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const [anchorRect, setAnchorRect] = useState<{ left: number; top: number; right: number; bottom: number } | null>(null);
 
   // 服务缺席（installServices 未注入到）时禁用；svcEpoch 轮询兜底见 CodinputSurface。
   const directory = getSessionDirectory(sessionId);
@@ -89,23 +90,13 @@ export function ModelMenu(props: ModelMenuProps): JSX.Element {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
 
-  useEffect(() => {
-    if (!open) return;
-    const onDown = (event: PointerEvent): void => {
-      if (refContains(rootMenuRef.current, event.target)) return;
-      close();
-    };
-    window.addEventListener('pointerdown', onDown, true);
-    return () => window.removeEventListener('pointerdown', onDown, true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
-
   const rootMenuRef = useRef<HTMLDivElement | null>(null);
 
   const openMenu = (): void => {
     const el = triggerRef.current;
     if (!el) return;
-    setAnchor(el.getBoundingClientRect());
+    setAnchor(el);
+    setAnchorRect(el.getBoundingClientRect());
     setView('root');
     setOpen(true);
   };
@@ -150,9 +141,6 @@ export function ModelMenu(props: ModelMenuProps): JSX.Element {
     }
   };
 
-  const refContains = (el: Element | null, target: EventTarget | null): boolean =>
-    !!el && target instanceof Node && el.contains(target);
-
   return (
     <div style={{ position: 'relative', minWidth: 0 }}>
       <button
@@ -179,7 +167,7 @@ export function ModelMenu(props: ModelMenuProps): JSX.Element {
 
       {open && anchor ? (
         <div ref={rootMenuRef}>
-          <MenuSurface anchor={anchor} onClose={close} alignEnd={true} minWidth={240}>
+          <MenuSurface anchor={anchor} initialRect={anchorRect} onClose={close} alignEnd={true} minWidth={240}>
             {view === 'root' ? (
               <>
                 <button type="button" className="dci-cell" onClick={() => setView('models')}>

package/src/client/components/PermissionMenu.tsx

@@ -58,7 +58,8 @@ export function PermissionMenu(props: PermissionMenuProps): JSX.Element | null {
   const [confirmation, setConfirmation] = useState<string | null>(null);
   const [acknowledged, setAcknowledged] = useState(false);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const [anchor, setAnchor] = useState<{ left: number; top: number; right: number; bottom: number } | null>(null);
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const [anchorRect, setAnchorRect] = useState<{ left: number; top: number; right: number; bottom: number } | null>(null);
 
   // locked/无值时收起（官方 useEffect 同语义）。
   useEffect(() => {
@@ -130,7 +131,11 @@ export function PermissionMenu(props: PermissionMenuProps): JSX.Element | null {
         disabled={disabled || busy}
         onMouseDown={(e) => e.preventDefault()}
         onClick={() => {
-          if (!open) setAnchor(triggerRef.current?.getBoundingClientRect() ?? null);
+          if (!open) {
+            const el = triggerRef.current ?? null;
+            setAnchor(el);
+            setAnchorRect(el ? el.getBoundingClientRect() : null);
+          }
           setOpen(!open);
         }}
       >
@@ -146,7 +151,7 @@ export function PermissionMenu(props: PermissionMenuProps): JSX.Element | null {
       </button>
 
       {open && anchor ? (
-        <MenuSurface anchor={anchor} onClose={close}>
+        <MenuSurface anchor={anchor} initialRect={anchorRect} onClose={close}>
           {items.map((item) => {
             const active = item.id === currentValue;
             return (