dsh-codinput 0.3.7 → 0.3.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-codinput",
-  "version": "0.3.7",
-  "description": "DSH WebUI 插件：把聊天输入框变成代码编辑器一样的输入风格（CodeMirror 6 接管 conversation.composer.bar）。",
+  "version": "0.3.9",
+  "description": "DSH 插件：把聊天输入框变成代码编辑器一样的输入风格（CodeMirror 6 接管 conversation.composer.bar），web 与桌面端通用。",
   "license": "MIT",
   "author": "Witherwithwinter",
   "icon": "./assets/icon.png",

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 (

package/src/client/components/StatsRow.tsx

@@ -1,9 +1,14 @@
 /** 数据行（卡片下方）：官方 composer dock 复刻——两枚胶囊（仪表盘「轮/步 · tok/s」、
  * 数据库「累计 tok · 缓存命中」）+ 上下文小圈（0.1.7-rc.2 起官方把它挪进本行，圈+百分比
- * 药丸），点击弹出官方同构详情面板（会话统计 / Token 用量 / 上下文分段），锚点上方弹出、
- * 点外关闭。 */
+ * 药丸），点击弹出官方同构详情面板（会话统计 / Token 用量 / 上下文分段）。面板照官方
+ * ContextMeter / useStatDialog 机制：portal 到 body + fixed，经 useAnchoredPanel（官方
+ * useAnchoredPosition 插件侧移植）按锚点视口矩形定位（side top / align start、gap 8、
+ * 视口 margin 12 夹取，滚动（捕获）/resize/面板尺寸变化重算）；每枚面板一个
+ * useStatDialogSeat（锚点/面板 ref + 定位 + 点外与 Escape 关闭），三枚共用 StatsRow 的
+ * 单一展开态互斥（与官方 chat StatsPills 的 openPill 同语义）。 */
 
-import { useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { useSessionStats, formatTokens, formatTokensPerSecond, formatCacheHitPercent, formatDuration, type SessionStats } from '../stats';
 import type { UseProjection } from '../host-types';
 import { t } from '../i18n';
@@ -37,16 +42,114 @@ export function DatabaseIcon({ size = 14 }: { size?: number }): JSX.Element {
   );
 }
 
-/** 官方详情面板（bRhRbq：标题行 + 发丝线 + dt/dd 栅格）。 */
+/** 官方 useAnchoredPosition 的插件侧移植（primitives 不可 import）：fixed 面板按锚点
+ * 视口矩形定位（side top / align start：面板左缘对齐锚点左缘、底距锚点顶 gap），
+ * 两侧按 margin 夹取（顶边用官方 overlayTopMargin：帧顶 clearance+20 与 margin 取大），
+ * 滚动（捕获相位）/resize/面板自身尺寸变化重算。返回 null = 尚未量得（面板隐藏）。 */
+function useAnchoredPanel(
+  open: boolean,
+  anchorRef: React.RefObject<HTMLElement | null>,
+  panelRef: React.RefObject<HTMLElement | null>,
+  gap: number,
+  margin: number,
+): { left: number; top: number } | null {
+  const [position, setPosition] = useState<{ left: number; top: number } | null>(null);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPosition(null);
+      return;
+    }
+    // 官方 overlayTopMargin：帧顶 clearance（data-fullscreen 归零）+20，与 margin 取大。
+    const topMargin = (): number => {
+      const clearance = Number.parseFloat(
+        getComputedStyle(document.documentElement).getPropertyValue('--dsh-frame-top-clearance'),
+      );
+      if (Number.isNaN(clearance)) return margin;
+      return Math.max(margin, (document.documentElement.hasAttribute('data-fullscreen') ? 0 : clearance) + 20);
+    };
+    // 与官方 place() 同构：rect 存在就落位，宽/高为 0 时只跳过对应轴的夹取。
+    const place = (): void => {
+      const rect = anchorRef.current?.getBoundingClientRect();
+      if (rect === undefined) return;
+      const panel = panelRef.current;
+      const width = panel?.offsetWidth ?? 0;
+      const height = panel?.offsetHeight ?? 0;
+      let left = rect.left;
+      let top = rect.top - gap - height;
+      if (width > 0) left = Math.min(Math.max(left, margin), window.innerWidth - width - margin);
+      if (height > 0) top = Math.min(Math.max(top, topMargin()), window.innerHeight - height - margin);
+      setPosition((prev) => (prev && prev.left === left && prev.top === top ? prev : { left, top }));
+    };
+    place();
+    window.addEventListener('scroll', place, true);
+    window.addEventListener('resize', place);
+    const panel = panelRef.current;
+    let observer: ResizeObserver | null = null;
+    if (typeof ResizeObserver !== 'undefined' && panel !== null) {
+      observer = new ResizeObserver(place);
+      observer.observe(panel);
+    }
+    return () => {
+      observer?.disconnect();
+      window.removeEventListener('scroll', place, true);
+      window.removeEventListener('resize', place);
+    };
+  }, [open, anchorRef, panelRef, gap, margin]);
+  return position;
+}
+
+/** 官方 useStatDialog 的插件侧等价 seat（primitives/chat 的 useStatDialog 不可 import）：
+ * 每枚面板自持锚点/面板 ref + 定位，并在打开期间挂「点外关闭 + Escape 关闭」（官方语义：
+ * 锚点或 portal 面板内的 pointerdown 算「内」；Escape 走 document 冒泡）。父级用受控
+ * open 维持三枚面板互斥，与官方 chat StatsPills 的 openPill 同构。 */
+interface StatDialogSeat {
+  rootRef: React.MutableRefObject<HTMLSpanElement | null>;
+  panelRef: React.MutableRefObject<HTMLDivElement | null>;
+  position: { left: number; top: number } | null;
+}
+
+function useStatDialogSeat(open: boolean, onClose: () => void): StatDialogSeat {
+  const rootRef = useRef<HTMLSpanElement | null>(null);
+  const panelRef = useRef<HTMLDivElement | null>(null);
+  const position = useAnchoredPanel(open, rootRef, panelRef, 8, 12);
+  useEffect(() => {
+    if (!open) return;
+    const onDown = (event: PointerEvent): void => {
+      if (!(event.target instanceof Node)) return;
+      if (rootRef.current?.contains(event.target) === true) return;
+      if (panelRef.current?.contains(event.target) === true) return;
+      onClose();
+    };
+    const onKeyDown = (event: KeyboardEvent): void => {
+      if (event.key === 'Escape') onClose();
+    };
+    document.addEventListener('pointerdown', onDown);
+    document.addEventListener('keydown', onKeyDown);
+    return () => {
+      document.removeEventListener('pointerdown', onDown);
+      document.removeEventListener('keydown', onKeyDown);
+    };
+  }, [open, onClose]);
+  return { rootRef, panelRef, position };
+}
+
+/** 面板定位样式（未量得前官方同款：隐藏在原点）。 */
+function panelStyle(position: { left: number; top: number } | null): React.CSSProperties {
+  return position ?? { visibility: 'hidden', left: 0, top: 0 };
+}
+
+/** 官方详情面板（bRhRbq：标题行 + 发丝线 + dt/dd 栅格）。portal 到 body，fixed 定位。 */
 function StatPanel(props: {
   label: string;
   icon: JSX.Element;
   titleValue?: string;
   rows: readonly [string, string][];
+  panelRef: React.MutableRefObject<HTMLDivElement | null>;
+  position: { left: number; top: number } | null;
 }): JSX.Element {
-  const { label, icon, titleValue, rows } = props;
-  return (
-    <div className="dci-stat-panel" role="dialog" aria-label={label}>
+  const { label, icon, titleValue, rows, panelRef, position } = props;
+  return createPortal(
+    <div className="dci-stat-panel" role="dialog" aria-label={label} ref={panelRef} style={panelStyle(position)}>
       <div className="dci-stat-panelTitle">
         <span className="dci-stat-panelLabel">
           {icon}
@@ -63,7 +166,8 @@ function StatPanel(props: {
           </div>
         ))}
       </dl>
-    </div>
+    </div>,
+    document.body,
   );
 }
 
@@ -76,8 +180,9 @@ function exactCount(value: number | undefined): string {
 }
 
 /** 官方 TimePill：轮/步 + · tok/s（decodeMs>0 才出），面板 = 模型/工具用时、TTFT 均值、TPS。 */
-function Pill(props: { stats: SessionStats; open: boolean; onToggle(): void }): JSX.Element {
-  const { stats, open, onToggle } = props;
+function Pill(props: { stats: SessionStats; open: boolean; onToggle(): void; onClose(): void }): JSX.Element {
+  const { stats, open, onToggle, onClose } = props;
+  const { rootRef, panelRef, position } = useStatDialogSeat(open, onClose);
   const roundsPart = t('stats.turns', { turns: stats.turns ?? 0, steps: stats.steps ?? 0 });
   const tps =
     (stats.decodeMs ?? 0) > 0 ? formatTokensPerSecond((stats.decodeTokens ?? 0) / ((stats.decodeMs ?? 1) / 1000)) : null;
@@ -97,7 +202,7 @@ function Pill(props: { stats: SessionStats; open: boolean; onToggle(): void }):
   // 官方：无任何计时数据时胶囊不可点（无面板可看）。
   if (!hasTimings) {
     return (
-      <span className="dci-stat-anchor">
+      <span className="dci-stat-anchor" ref={rootRef}>
         <span className="dci-stat-pill">
           <GaugeIcon />
           {label}
@@ -106,7 +211,7 @@ function Pill(props: { stats: SessionStats; open: boolean; onToggle(): void }):
     );
   }
   return (
-    <span className="dci-stat-anchor">
+    <span className="dci-stat-anchor" ref={rootRef}>
       <button
         type="button"
         className="dci-stat-pill"
@@ -122,6 +227,8 @@ function Pill(props: { stats: SessionStats; open: boolean; onToggle(): void }):
         <StatPanel
           label={t("stats.session")}
           icon={<GaugeIcon />}
+          panelRef={panelRef}
+          position={position}
           rows={[
             [t('stats.modelTime'), (stats.llmMs ?? 0) > 0 ? formatDuration(stats.llmMs!) : '—'],
             [t('stats.toolTime'), (stats.toolMs ?? 0) > 0 ? formatDuration(stats.toolMs!) : '—'],
@@ -140,8 +247,9 @@ function Pill(props: { stats: SessionStats; open: boolean; onToggle(): void }):
 }
 
 /** 官方 UsagePill：总量 · 缓存命中（缓存命中用官方百分比精度规则）。 */
-function TokenPill(props: { stats: SessionStats; open: boolean; onToggle(): void }): JSX.Element | null {
-  const { stats, open, onToggle } = props;
+function TokenPill(props: { stats: SessionStats; open: boolean; onToggle(): void; onClose(): void }): JSX.Element | null {
+  const { stats, open, onToggle, onClose } = props;
+  const { rootRef, panelRef, position } = useStatDialogSeat(open, onClose);
   if (stats.totalTokens === undefined) return null;
   const total = stats.totalTokens;
   const cacheHitText =
@@ -151,7 +259,7 @@ function TokenPill(props: { stats: SessionStats; open: boolean; onToggle(): void
       (stats.cacheReadTokens ?? 0) + (stats.cacheWriteTokens ?? 0) + (stats.uncachedInputTokens ?? 0),
     );
   return (
-    <span className="dci-stat-anchor">
+    <span className="dci-stat-anchor" ref={rootRef}>
       <button
         type="button"
         className="dci-stat-pill"
@@ -180,6 +288,8 @@ function TokenPill(props: { stats: SessionStats; open: boolean; onToggle(): void
           label={t("stats.usage")}
           icon={<DatabaseIcon />}
           titleValue={exactCount(total)}
+          panelRef={panelRef}
+          position={position}
           rows={[
             [t('stats.cacheHitLabel'), cacheHitText !== null ? `${cacheHitText}%` : '—'],
             [t('stats.uncached'), exactCount(stats.uncachedInputTokens)],
@@ -198,40 +308,40 @@ function TokenPill(props: { stats: SessionStats; open: boolean; onToggle(): void
 export function StatsRow(props: StatsRowProps): JSX.Element | null {
   const { useProjection, sessionId, chatNodes } = props;
   // 唯一展开：三枚（轮步/用量/上下文小圈）共用一个 open 态——任意一枚展开
-  // 即收起其余（官方语义：详情面板同时只存在一个）。
+  // 即收起其余（官方 chat StatsPills 的 openPill 同语义：详情面板同时只存在一个）。
   const [open, setOpen] = useState<'rounds' | 'tokens' | 'gauge' | null>(null);
-  const rootRef = useRef<HTMLDivElement | null>(null);
+  const close = useCallback(() => setOpen(null), []);
+  const toggle = useCallback((key: 'rounds' | 'tokens' | 'gauge') => {
+    setOpen((current) => (current === key ? null : key));
+  }, []);
   const stats = useSessionStats(useProjection, sessionId, chatNodes);
 
-  // 点外面关闭（面板内/胶囊上不关）。
-  useEffect(() => {
-    if (open === null) return;
-    const onDown = (event: PointerEvent): void => {
-      if (rootRef.current && event.target instanceof Node && rootRef.current.contains(event.target)) return;
-      setOpen(null);
-    };
-    window.addEventListener('pointerdown', onDown, true);
-    return () => window.removeEventListener('pointerdown', onDown, true);
-  }, [open]);
-
   // 官方 rc.2：上下文小圈独立于 stats 胶囊渲染（无 stats 也要出圈）。
   const pressure = useProjection
     ? (useProjection('contextPressure') as PressureSnapshot | undefined)
     : undefined;
   const hasGauge = pressure !== undefined && !!pressure.contextWindow;
+  // 面板打开期间其数据源消失（切换会话 / 投影短暂缺席）时自动收起，避免恢复后「自己重开」。
+  useEffect(() => {
+    if (open === null) return;
+    const valid = open === 'gauge' ? hasGauge : stats !== null && stats !== undefined;
+    if (!valid) setOpen(null);
+  }, [open, hasGauge, stats]);
+
   if (!stats && !hasGauge) return null;
   return (
-    <div className="dci-stat-root" data-composer-stats="codinput" ref={rootRef}>
+    <div className="dci-stat-root" data-composer-stats="codinput">
       {stats ? (
         <>
-          <Pill stats={stats} open={open === 'rounds'} onToggle={() => setOpen(open === 'rounds' ? null : 'rounds')} />
-          <TokenPill stats={stats} open={open === 'tokens'} onToggle={() => setOpen(open === 'tokens' ? null : 'tokens')} />
+          <Pill stats={stats} open={open === 'rounds'} onToggle={() => toggle('rounds')} onClose={close} />
+          <TokenPill stats={stats} open={open === 'tokens'} onToggle={() => toggle('tokens')} onClose={close} />
         </>
       ) : null}
       <ContextGauge
         useProjection={useProjection}
         open={open === 'gauge'}
-        onToggle={() => setOpen(open === 'gauge' ? null : 'gauge')}
+        onToggle={() => toggle('gauge')}
+        onClose={close}
       />
     </div>
   );
@@ -259,14 +369,16 @@ function shortTokens(n: number): string {
 
 /** 上下文占用小圈（官方 JObwrW 复刻）：双环仪表 + 百分比，点击展开分段面板。
  * 0.1.7-rc.2 起官方渲染在 dock 行 stats 胶囊之后（原先在工具行 trailing）。
- * 展开态由 StatsRow 持有（三枚详情面板唯一展开）。 */
+ * 展开态由 StatsRow 持有（三枚详情面板唯一展开）；面板 portal 到 body +
+ * useAnchoredPanel 定位（官方 ContextMeter：side top / align start / gap 8 / margin 12）。 */
 export function ContextGauge(props: {
   useProjection: UseProjection | undefined;
   open: boolean;
   onToggle(): void;
+  onClose(): void;
 }): JSX.Element | null {
-  const { useProjection, open, onToggle } = props;
-  const rootRef = useRef<HTMLSpanElement | null>(null);
+  const { useProjection, open, onToggle, onClose } = props;
+  const { rootRef, panelRef, position } = useStatDialogSeat(open, onClose);
   const pressure = useProjection
     ? (useProjection('contextPressure') as PressureSnapshot | undefined)
     : undefined;
@@ -307,49 +419,58 @@ export function ContextGauge(props: {
         </svg>
         <span>{Math.round(pct)}%</span>
       </button>
-      {open ? (
-        <div className="dci-gauge-panel" role="dialog" aria-label={t("tool.contextTitle")}>
-          <div className="dci-gauge-header">
-            <span className="dci-gauge-headline">{t("tool.contextTitle")}</span>
-            <span className="dci-gauge-percent">{Math.round(pct)}%</span>
-            <span className="dci-gauge-figures">
-              ~{shortTokens(usedTokens)} / {shortTokens(windowTokens)}
-            </span>
-          </div>
-          <div className="dci-gauge-bar">
-            {segments.map(([cls, tokens]) => (
-              <div
-                key={cls}
-                className={`dci-gauge-segment ${cls}`}
-                style={{ width: `${(tokens / windowTokens) * 100}%` }}
-              />
-            ))}
-          </div>
-          <dl className="dci-gauge-rows">
-            <div className="dci-gauge-row">
-              <dt>
-                <span className={`dci-gauge-swatch dci-gauge-colorSystem`} aria-hidden="true" />
-                {t("stats.prompt")}
-              </dt>
-              <dd>~{shortTokens(breakdown?.systemTokens ?? 0)}</dd>
-            </div>
-            <div className="dci-gauge-row">
-              <dt>
-                <span className={`dci-gauge-swatch dci-gauge-colorTools`} aria-hidden="true" />
-                {t("stats.tools")}
-              </dt>
-              <dd>~{shortTokens(breakdown?.toolsTokens ?? 0)}</dd>
-            </div>
-            <div className="dci-gauge-row">
-              <dt>
-                <span className={`dci-gauge-swatch dci-gauge-colorMessages`} aria-hidden="true" />
-                {t("stats.messages")}
-              </dt>
-              <dd>~{shortTokens(breakdown?.messageTokens ?? 0)}</dd>
-            </div>
-          </dl>
-        </div>
-      ) : null}
+      {open
+        ? createPortal(
+            <div
+              className="dci-gauge-panel"
+              role="dialog"
+              aria-label={t("tool.contextTitle")}
+              ref={panelRef}
+              style={panelStyle(position)}
+            >
+              <div className="dci-gauge-header">
+                <span className="dci-gauge-headline">{t("tool.contextTitle")}</span>
+                <span className="dci-gauge-percent">{Math.round(pct)}%</span>
+                <span className="dci-gauge-figures">
+                  ~{shortTokens(usedTokens)} / {shortTokens(windowTokens)}
+                </span>
+              </div>
+              <div className="dci-gauge-bar">
+                {segments.map(([cls, tokens]) => (
+                  <div
+                    key={cls}
+                    className={`dci-gauge-segment ${cls}`}
+                    style={{ width: `${(tokens / windowTokens) * 100}%` }}
+                  />
+                ))}
+              </div>
+              <dl className="dci-gauge-rows">
+                <div className="dci-gauge-row">
+                  <dt>
+                    <span className={`dci-gauge-swatch dci-gauge-colorSystem`} aria-hidden="true" />
+                    {t("stats.prompt")}
+                  </dt>
+                  <dd>~{shortTokens(breakdown?.systemTokens ?? 0)}</dd>
+                </div>
+                <div className="dci-gauge-row">
+                  <dt>
+                    <span className={`dci-gauge-swatch dci-gauge-colorTools`} aria-hidden="true" />
+                    {t("stats.tools")}
+                  </dt>
+                  <dd>~{shortTokens(breakdown?.toolsTokens ?? 0)}</dd>
+                </div>
+                <div className="dci-gauge-row">
+                  <dt>
+                    <span className={`dci-gauge-swatch dci-gauge-colorMessages`} aria-hidden="true" />
+                    {t("stats.messages")}
+                  </dt>
+                  <dd>~{shortTokens(breakdown?.messageTokens ?? 0)}</dd>
+                </div>
+              </dl>
+            </div>,
+            document.body,
+          )
+        : null}
     </span>
   );
 }