dsh-codinput 0.3.7 → 0.3.8

package/src/client/components/UserMessageMarkdown.tsx

@@ -20,12 +20,12 @@
  * 出极简 JSON 块（官方 JsonBlock 的降级形态）。
  */
 
-import { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Fragment, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Marked, type MarkedExtension } from 'marked';
 import * as DOMPurifyModule from 'dompurify';
 import type { SlotRegisterOptions } from '../host-types';
 import { diagError } from '../diag';
-import { bindForeign, t, type TranslateParams } from '../i18n';
+import { bindForeign, t, useT, type TranslateParams } from '../i18n';
 import { FileGlyph, fileExtension, fileSizeText } from './AttachmentRail';
 
 /* ---------- 注册 ---------- */
@@ -75,7 +75,9 @@ export interface UserMessageMarkdownProps {
 
 interface ContentParts {
   text: string;
-  attachments: ({ type: 'image'; image: unknown } | { type: 'file'; file: { name?: string; bytes?: number } })[];
+  /** 图片：官方 contentParts 把它包成 { attachment: ImageAttachmentRef }——官方 ImageGallery
+   * 的 React key 读 image.attachment.attachmentId；裸 ref 会让 key 计算访问 preview.url 崩。 */
+  attachments: ({ type: 'image'; image: { attachment: unknown } } | { type: 'file'; file: { name?: string; bytes?: number } })[];
   rest: unknown[];
 }
 
@@ -87,7 +89,7 @@ function contentParts(content: readonly unknown[] | undefined): ContentParts {
   for (const block of content) {
     const b = block as Partial<TextBlock> | Partial<ImageBlock> | Partial<FileBlock> | null;
     if (b && b.type === 'text' && typeof b.text === 'string') texts.push(b.text);
-    else if (b && b.type === 'image' && b.attachment !== undefined) parts.attachments.push({ type: 'image', image: b.attachment });
+    else if (b && b.type === 'image' && b.attachment !== undefined) parts.attachments.push({ type: 'image', image: { attachment: b.attachment } });
     else if (b && b.type === 'file' && b.attachment !== undefined) parts.attachments.push({ type: 'file', file: (b.attachment ?? {}) as { name?: string; bytes?: number } });
     else parts.rest.push(block);
   }
@@ -99,7 +101,24 @@ function contentParts(content: readonly unknown[] | undefined): ContentParts {
 
 /** dompurify 的导出形状随打包条件漂移：默认导出与命名空间都兼容。 */
 const DOMPurify = ((DOMPurifyModule as unknown as { default?: unknown }).default ??
-  DOMPurifyModule) as unknown as { sanitize(html: string): string };
+  DOMPurifyModule) as unknown as { sanitize(html: string, options?: Record<string, unknown>): string };
+
+/** 用户消息是「不可信 Markdown」面：marked 会原样透传原始 HTML，官方 MarkdownText 则是
+ * mdast→React 逐节点渲染且链接/图片只放行 http(s)/mailto。这里用 DOMPurify 白名单收敛到
+ * Markdown 产出面——禁 style/form/控件/媒体等原始 HTML（<style> 一旦进 DOM 会全局生效），
+ * URI 只留 http(s)/mailto，行内 style 一律去掉。 */
+const SANITIZE_OPTIONS = {
+  ALLOWED_TAGS: [
+    'p', 'br', 'strong', 'em', 'del', 'code', 'pre', 'blockquote', 'ul', 'ol', 'li', 'a', 'img',
+    'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'hr', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'input', 'span',
+  ],
+  ALLOWED_ATTR: [
+    'href', 'src', 'alt', 'title', 'target', 'rel', 'type', 'checked', 'disabled', 'start',
+    'colspan', 'rowspan', 'align', 'data-dci-wire',
+  ],
+  ALLOWED_URI_REGEXP: /^(?:https?:|mailto:)/i,
+  FORBID_ATTR: ['style'],
+};
 
 function escapeHtml(text: string): string {
   return text.replace(
@@ -135,7 +154,7 @@ const mdParser = new Marked({ gfm: true, breaks: true, extensions: [sessionWireE
 
 function renderMarkdown(text: string): string {
   try {
-    return DOMPurify.sanitize(mdParser.parse(text) as string);
+    return DOMPurify.sanitize(mdParser.parse(text) as string, SANITIZE_OPTIONS);
   } catch (error) {
     diagError('umsg.markdown', error);
     return `<p>${escapeHtml(text).replace(/\n/g, '<br>')}</p>`;
@@ -284,12 +303,15 @@ function chipClickGuard(event: MouseEvent): boolean {
   return false;
 }
 
-function chipElement(range: ChipRange, actions: ChipActions): HTMLElement {
+function chipElement(range: ChipRange, actionsRef: React.MutableRefObject<ChipActions>): HTMLElement {
+  const actions = actionsRef.current;
+  // 官方 projectUserText：只有 file 与 /skill 可点（folder / session 是纯 span）；
+  // 点击时读 actionsRef.current，回调后到时无需重新装饰 DOM。
   const clickable =
     range.clickable &&
-    (range.kind === 'file' || range.kind === 'folder'
+    (range.kind === 'file'
       ? typeof actions.openFile === 'function'
-      : typeof actions.openSkill === 'function');
+      : range.kind === 'slash' && typeof actions.openSkill === 'function');
   const chip = document.createElement(clickable ? 'button' : 'span');
   if (clickable) chip.setAttribute('type', 'button');
   chip.className = 'dci-umsg-chip';
@@ -301,8 +323,9 @@ function chipElement(range: ChipRange, actions: ChipActions): HTMLElement {
   if (clickable) {
     chip.addEventListener('click', (event: Event) => {
       if (chipClickGuard(event as MouseEvent)) return;
-      if (range.kind === 'file' || range.kind === 'folder') actions.openFile?.(range.label.slice(1).replace(/^"|"$/gu, ''));
-      else actions.openSkill?.(range.display.slice(1));
+      const live = actionsRef.current;
+      if (range.kind === 'slash') live.openSkill?.(range.display.slice(1));
+      else live.openFile?.(range.label.slice(1).replace(/^"|"$/gu, ''));
     });
   }
   return chip;
@@ -314,19 +337,19 @@ function rangeRank(range: ChipRange): number {
 }
 
 /** 把一段文本按 ranges 切开，plain 部分留原文本节点，token 位换成 chip 元素。 */
-function splitTextNode(node: Text, ranges: ChipRange[], actions: ChipActions): void {
+function splitTextNode(node: Text, ranges: ChipRange[], actionsRef: React.MutableRefObject<ChipActions>): void {
   const fragment = document.createDocumentFragment();
   let cursor = 0;
   for (const range of ranges) {
     if (range.start > cursor) fragment.appendChild(document.createTextNode(node.data.slice(cursor, range.start)));
-    fragment.appendChild(chipElement(range, actions));
+    fragment.appendChild(chipElement(range, actionsRef));
     cursor = range.end;
   }
   if (cursor < node.data.length) fragment.appendChild(document.createTextNode(node.data.slice(cursor)));
   node.parentNode?.replaceChild(fragment, node);
 }
 
-function chipTextNodes(root: HTMLElement, actions: ChipActions): void {
+function chipTextNodes(root: HTMLElement, actionsRef: React.MutableRefObject<ChipActions>): void {
   const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
     acceptNode(node: Node): number {
       const parent = (node as Text).parentElement;
@@ -342,11 +365,12 @@ function chipTextNodes(root: HTMLElement, actions: ChipActions): void {
     nodes.push(current as Text);
     current = walker.nextNode();
   }
+  const { skillNames, referenceLabels } = actionsRef.current;
   for (const node of nodes) {
     const ranges = [
       ...sessionWireRanges(node.data),
-      ...sessionLabelRanges(node.data, actions.referenceLabels),
-      ...genericTokenRanges(node.data, actions.skillNames),
+      ...sessionLabelRanges(node.data, referenceLabels),
+      ...genericTokenRanges(node.data, skillNames),
     ];
     if (ranges.length === 0) continue;
     ranges.sort((a, b) => a.start - b.start || rangeRank(a) - rangeRank(b) || b.end - a.end);
@@ -358,19 +382,43 @@ function chipTextNodes(root: HTMLElement, actions: ChipActions): void {
       cursor = range.end;
     }
     if (picked.length === 0) continue;
-    splitTextNode(node, picked, actions);
+    splitTextNode(node, picked, actionsRef);
   }
 }
 
 /** innerHTML 落地后的整备：链接新开页、表格出滚动壳、线格式与 @/// token 换 chip。 */
-function decorateMarkdownRoot(root: HTMLElement | null, actions: ChipActions): void {
+function decorateMarkdownRoot(root: HTMLElement | null, actionsRef: React.MutableRefObject<ChipActions>): void {
   if (!root) return;
   try {
-    for (const anchor of Array.from(root.querySelectorAll('a[href]'))) {
+    // 官方 sanitizeUrl 只放行 http(s)/mailto：其余链接（含 DOMPurify 已剥掉 href 的残链）
+    // 没有可点面，拆回纯文本；http(s) 统一新开页。
+    for (const anchor of Array.from(root.querySelectorAll('a'))) {
       const href = anchor.getAttribute('href') ?? '';
-      if (!/^https?:/i.test(href)) continue;
-      anchor.setAttribute('target', '_blank');
-      anchor.setAttribute('rel', 'noreferrer noopener');
+      if (/^https?:/i.test(href)) {
+        anchor.setAttribute('target', '_blank');
+        anchor.setAttribute('rel', 'noreferrer noopener');
+        continue;
+      }
+      if (/^mailto:/i.test(href)) {
+        anchor.setAttribute('rel', 'noreferrer noopener');
+        continue;
+      }
+      anchor.replaceWith(...Array.from(anchor.childNodes));
+    }
+    // 官方 remoteImageUrl 只放行 http(s)；相对/data: 图片降级成 alt 文本，不留破图。
+    for (const img of Array.from(root.querySelectorAll('img'))) {
+      if (/^https?:/i.test(img.getAttribute('src') ?? '')) continue;
+      img.replaceWith(document.createTextNode(img.getAttribute('alt') ?? ''));
+    }
+    // 只保留 GFM 任务清单的只读复选框（marked 产出 checked/disabled，type 可能被
+    // sanitize 剥掉），其余 <input> 一律移除——不让用户消息里出现可编辑表单控件。
+    for (const input of Array.from(root.querySelectorAll('input'))) {
+      if (!input.hasAttribute('disabled')) {
+        input.remove();
+        continue;
+      }
+      input.setAttribute('type', 'checkbox');
+      input.setAttribute('disabled', '');
     }
     for (const table of Array.from(root.querySelectorAll('table'))) {
       const parent = table.parentElement;
@@ -382,9 +430,9 @@ function decorateMarkdownRoot(root: HTMLElement | null, actions: ChipActions): v
     }
     for (const placeholder of Array.from(root.querySelectorAll('span[data-dci-wire]'))) {
       const label = placeholder.getAttribute('data-dci-wire') ?? '';
-      placeholder.replaceWith(chipElement({ start: 0, end: 0, kind: 'session', label, display: label, clickable: false }, actions));
+      placeholder.replaceWith(chipElement({ start: 0, end: 0, kind: 'session', label, display: label, clickable: false }, actionsRef));
     }
-    chipTextNodes(root, actions);
+    chipTextNodes(root, actionsRef);
   } catch (error) {
     diagError('umsg.decorate', error);
   }
@@ -487,7 +535,7 @@ function CheckGlyph(): JSX.Element {
 function MessageFileCard({ file }: { file: { name?: string; bytes?: number } }): JSX.Element {
   const name = typeof file.name === 'string' ? file.name : '';
   const bytes = typeof file.bytes === 'number' ? file.bytes : 0;
-  const meta = [fileExtension(name).toUpperCase().slice(0, 8), bytes > 0 ? fileSizeText(bytes) : ''].filter(Boolean).join(' ');
+  const meta = [fileExtension(name).toUpperCase().slice(0, 8), fileSizeText(bytes)].filter(Boolean).join(' ');
   return (
     <span className="dci-umsg-file" title={name}>
       <span className="dci-umsg-fileglyph">
@@ -501,8 +549,29 @@ function MessageFileCard({ file }: { file: { name?: string; bytes?: number } }):
   );
 }
 
-export function UserMessageMarkdown(props: UserMessageMarkdownProps): JSX.Element | null {
+/** 旧/异形宿主缺 renderMessageImages 座位 prop 时的图片降级卡（不静默丢内容）。 */
+function MessageImageFallback({ image }: { image: { attachment: unknown } }): JSX.Element {
+  const att = (image.attachment ?? {}) as { name?: unknown; mediaType?: unknown; bytes?: unknown };
+  const name = typeof att.name === 'string' && att.name !== '' ? att.name : t('umsg.image');
+  const media = typeof att.mediaType === 'string' ? att.mediaType.replace(/^image\//i, '').toUpperCase() : '';
+  const meta = [media, typeof att.bytes === 'number' ? fileSizeText(att.bytes) : ''].filter(Boolean).join(' ');
+  return (
+    <span className="dci-umsg-file" data-image-fallback="true" title={name}>
+      <span className="dci-umsg-fileglyph">
+        <FileGlyph />
+      </span>
+      <span className="dci-umsg-filecontent">
+        <span className="dci-umsg-filename">{name}</span>
+        <span className="dci-umsg-filemeta">{meta}</span>
+      </span>
+    </span>
+  );
+}
+
+function UserMessageMarkdownView(props: UserMessageMarkdownProps): JSX.Element | null {
   const { node, renderMessageImages, openFile, openSkill } = props;
+  // 订阅宿主 locale 快照：语言切换时复制钮/引用摘要等文案即时刷新（其它组件同款）。
+  useT();
   const data = (node?.data ?? {}) as UserMessageData;
   const content = data.content;
   const referenceLabels = useMemo(() => (Array.isArray(data.referenceLabels) ? data.referenceLabels : []), [data.referenceLabels]);
@@ -515,17 +584,30 @@ export function UserMessageMarkdown(props: UserMessageMarkdownProps): JSX.Elemen
   const bodyRef = useRef<HTMLDivElement | null>(null);
   const actionsRef = useRef<ChipActions>({ openFile, openSkill, skillNames, referenceLabels });
   actionsRef.current = { openFile, openSkill, skillNames, referenceLabels };
+  // 引用标签 / 技能名单后到（投影刷新）时重跑装饰，补齐 @引用与 /技能 chip。
   useEffect(() => {
-    decorateMarkdownRoot(bodyRef.current, actionsRef.current);
-  }, [html]);
+    decorateMarkdownRoot(bodyRef.current, actionsRef);
+  }, [html, referenceLabels, skillNames]);
 
   const [copied, setCopied] = useState(false);
+  const copyTimer = useRef<number | null>(null);
+  // 卸载时清掉「已复制」回退定时器，避免卸载后的 setState。
+  useEffect(
+    () => () => {
+      if (copyTimer.current !== null) window.clearTimeout(copyTimer.current);
+    },
+    [],
+  );
   const onCopy = useCallback(() => {
     if (copied || text === '') return;
     void writeClipboard(text).then((ok) => {
       if (!ok) return;
       setCopied(true);
-      window.setTimeout(() => setCopied(false), 1000);
+      if (copyTimer.current !== null) window.clearTimeout(copyTimer.current);
+      copyTimer.current = window.setTimeout(() => {
+        copyTimer.current = null;
+        setCopied(false);
+      }, 1000);
     });
   }, [copied, text]);
 
@@ -544,7 +626,7 @@ export function UserMessageMarkdown(props: UserMessageMarkdownProps): JSX.Elemen
                 <Fragment key={`image:${index}`}>
                   {renderMessageImages
                     ? renderMessageImages({ images: [att.image], align: 'end', compact: compactImages })
-                    : null}
+                    : <MessageImageFallback image={att.image} />}
                 </Fragment>
               ) : (
                 <MessageFileCard key={`file:${index}`} file={att.file} />
@@ -589,3 +671,6 @@ export function UserMessageMarkdown(props: UserMessageMarkdownProps): JSX.Elemen
     </div>
   );
 }
+
+/** 与官方 UserMessageNodeView 一致用 memo 包裹：历史节点快照重建时不连坐重渲染。 */
+export const UserMessageMarkdown = memo(UserMessageMarkdownView);

package/src/client/i18n.ts

@@ -100,6 +100,7 @@ const ZH: Dict = {
   'umsg.clock.md': '{m}月{d}日',
   'umsg.clock.ymd': '{y}年{m}月{d}日',
   'umsg.extraBlock': '额外内容块',
+  'umsg.image': '图片',
   'set.lineNumbers': '显示行号',
   'set.lineNumbersDesc': '当前行与行号高亮常开',
   'set.font': '编辑器字体',
@@ -212,6 +213,7 @@ const EN: Dict = {
   'umsg.clock.md': '{m}/{d}',
   'umsg.clock.ymd': '{y}/{m}/{d}',
   'umsg.extraBlock': 'Extra content block',
+  'umsg.image': 'Image',
   'set.lineNumbers': 'Show line numbers',
   'set.lineNumbersDesc': 'The current line and its gutter number stay highlighted',
   'set.font': 'Editor font',
@@ -307,16 +309,18 @@ export function installI18n(locale: unknown): void {
  * 的翻译函数；宿主 face 未就绪或 bind 失败返回 null。结果按 ns 缓存。
  */
 export function bindForeign(ns: string): ((key: string, params?: TranslateParams) => string) | null {
-  if (!foreignBinds.has(ns)) {
-    let bound: ((key: string, params?: TranslateParams) => string) | null = null;
-    try {
-      bound = hostFace?.bind?.(ns) ?? null;
-    } catch {
-      bound = null;
-    }
-    foreignBinds.set(ns, bound);
+  const cached = foreignBinds.get(ns);
+  if (cached) return cached;
+  // 只缓存成功的绑定：宿主 locale 服务可能晚于首次调用就绪，null 缓存会让
+  // 之后所有文案永远拿不到官方词典。
+  let bound: ((key: string, params?: TranslateParams) => string) | null = null;
+  try {
+    bound = hostFace?.bind?.(ns) ?? null;
+  } catch {
+    bound = null;
   }
-  return foreignBinds.get(ns) ?? null;
+  if (bound) foreignBinds.set(ns, bound);
+  return bound;
 }
 
 export function subscribeI18n(fn: () => void): () => void {

package/src/client/index.tsx

@@ -56,7 +56,12 @@ export function apply(ctx: ClientContext): void {
       const orig = w.console.error.bind(w.console);
       w.console.error = (...args: unknown[]): void => {
         const first = args.find((a) => a instanceof Error);
-        if (first) (w.__dshCodinputErrs as unknown as Error[]).push(first as Error);
+        if (first) {
+          // 与 diagError 同口径限长：长会话里 console.error 不应无界堆积。
+          const errs = w.__dshCodinputErrs as unknown as unknown[];
+          errs.push(first);
+          if (errs.length > 200) errs.splice(0, errs.length - 200);
+        }
         orig(...args);
       };
     }

package/src/client/styles.ts

@@ -412,13 +412,19 @@ button.dci-attach-body { color: inherit; font: inherit; text-align: left; backgr
   height: 36px; color: var(--dsw-alias-label-primary, inherit); border: none; border-radius: 18px; outline: none;
   padding: 0 14px; font-size: 13px; min-width: 260px; max-width: 320px; }
 .dci-set-input:focus { outline: 2px solid var(--dsw-alias-border-l3, transparent); }
+/* 开关：官方 primitives Switch 逐值（Switch.module.css）。ON 轨道走
+   --dsw-alias-brand-primary——该 token 自 0.2.0-rc.2 起浅色主题即近黑（#0f1115）、
+   深色主题近白（#f9fafb），桌面 rc.3 同款；同 token 跟随宿主主题，就是官方样式的来源。 */
 .dci-switch { box-sizing: border-box; position: relative; flex: none; width: 36px; height: 20px; padding: 2px;
-  border: 0; border-radius: 10px; background: var(--dsw-alias-border-l3, color-mix(in srgb, currentColor 30%, transparent));
+  border: 0; border-radius: 999px; corner-shape: round;
+  background: var(--dsw-alias-border-l3, color-mix(in srgb, currentColor 30%, transparent));
   cursor: pointer; }
 .dci-switch[aria-checked="true"] { background: var(--dsw-alias-brand-primary, color-mix(in srgb, currentColor 70%, transparent)); }
-.dci-switch:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, currentColor); outline-offset: 2px; }
-.dci-switch::after { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%;
+.dci-switch:disabled { cursor: default; opacity: 0.5; }
+.dci-switch:focus-visible { outline: var(--dsw-focus-ring-width, 2px) solid var(--dsw-focus-ring-color, var(--dsw-alias-state-business-primary, currentColor)); outline-offset: 2px; }
+.dci-switch::after { content: ''; display: block; width: 16px; height: 16px; border-radius: 50%; corner-shape: round;
   background: var(--dsw-alias-label-primary-foreground, #fff); transition: transform 120ms ease; }
+.dci-switch[aria-checked="false"]::after { background: var(--dsw-alias-switch-thumb, #fff); }
 .dci-switch[aria-checked="true"]::after { transform: translateX(16px); }
 
 
@@ -440,15 +446,17 @@ button.dci-attach-body { color: inherit; font: inherit; text-align: left; backgr
   padding: 4px 0 0; font-size: calc(var(--dsh-content-font-size-secondary, 13px) - 1px);
   line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));
   justify-content: center; gap: 12px; display: flex; }
-.dci-stat-anchor { min-width: 0; display: inline-flex; position: relative; }
+.dci-stat-anchor { min-width: 0; display: inline-flex; }
 
-/* 数据行详情面板（官方 bRhRbq 复刻：锚点上方弹出） */
-.dci-stat-panel { z-index: 1100; box-sizing: border-box; background: var(--dsw-menu-surface-fill, var(--dsw-specific-menu, rgba(30, 30, 34, 0.98)));
+/* 数据行详情面板（官方 bRhRbq 复刻：portal 到 body、fixed、锚点上方弹出）。
+   背景与圆角逐值同官方：--dsw-specific-menu 优先（macOS 桌面上官方把它覆写成不透明），
+   旧宿主/皮肤缺该 token 时回退 --dsw-menu-surface-fill 链，不落到硬编码深色。 */
+.dci-stat-panel { z-index: 1100; box-sizing: border-box; background: var(--dsw-specific-menu, var(--dsw-menu-surface-fill, rgba(30, 30, 34, 0.98)));
   backdrop-filter: var(--dsw-menu-backdrop-filter, none);
   color: var(--dsw-alias-label-secondary, inherit); --dsw-elevation-stroke-color: var(--dsw-alias-border-l1, transparent);
   width: max-content; min-width: min(300px, 100vw - 24px); max-width: min(440px, 100vw - 24px); text-align: left;
   box-shadow: var(--dsw-elevation-prominent, 0 10px 34px rgba(0, 0, 0, 0.35)); cursor: default; border: 0;
-  border-radius: 12px; padding: 16px; font-size: 12px; line-height: 18px; position: absolute; bottom: calc(100% + 8px); left: 0; }
+  border-radius: var(--dsw-radius-lg, 12px); padding: 16px; font-size: 12px; line-height: 18px; position: fixed; }
 .dci-stat-panelTitle { color: var(--dsw-alias-label-primary, inherit); justify-content: space-between; gap: 16px;
   margin-bottom: 8px; font-weight: 500; display: flex; }
 .dci-stat-panelLabel { align-items: center; gap: 6px; min-width: 0; display: inline-flex; }
@@ -460,36 +468,40 @@ button.dci-attach-body { color: inherit; font: inherit; text-align: left; backgr
 .dci-stat-details dt, .dci-stat-details dd { min-width: 0; margin: 0; }
 .dci-stat-details dd { color: var(--dsw-alias-label-secondary, inherit); font-variant-numeric: tabular-nums; text-align: right; }
 .dci-stat-pill { font: inherit; box-sizing: border-box; max-width: 100%; color: var(--dsw-alias-label-tertiary, currentColor);
-  white-space: nowrap; background: transparent; border: none; border-radius: 24px; align-items: center; gap: 6px;
+  white-space: nowrap; background: transparent; border: none; border-radius: 999px; corner-shape: round;
+  line-height: inherit; align-items: center; gap: 6px;
   padding: 1px 8px; display: inline-flex; cursor: pointer; font-variant-numeric: tabular-nums; }
 .dci-stat-pill svg { flex: none; width: 14px; height: 14px; }
-.dci-stat-pill:hover { background: var(--dsw-alias-interactive-bg-hover, color-mix(in srgb, currentColor 8%, transparent));
+.dci-stat-pill:hover, .dci-stat-pill[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-hover, color-mix(in srgb, currentColor 8%, transparent));
   color: var(--dsw-alias-label-secondary, inherit); }
 .dci-stat-label { text-overflow: ellipsis; min-width: 0; overflow: hidden; }
 .dci-stat-sep { color: var(--dsw-alias-separator-primary, currentColor); margin: 0 6px; }
 
 /* ===== 上下文小圈（官方 JObwrW 复刻：双环仪表 + 分段面板）
    0.1.7-rc.2 起官方把它挪进卡片下方 dock 行（stats 胶囊之后），trigger 变为「圈+百分比」药丸 ===== */
-.dci-gauge-root { flex: none; display: inline-flex; position: relative; }
+.dci-gauge-root { flex: none; display: inline-flex; }
 .dci-gauge-trigger { border-radius: var(--dsw-radius-sm, 8px); color: var(--dsw-alias-label-tertiary, currentColor);
-  font-family: inherit; font-size: 13px; font-variant-numeric: tabular-nums; line-height: 20px; white-space: nowrap;
+  font-family: inherit; font-size: var(--dsh-content-font-size-secondary, 13px); font-variant-numeric: tabular-nums;
+  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px)); white-space: nowrap;
   cursor: pointer; background: transparent; border: none; flex: none; align-items: center; gap: 6px; padding: 1px 8px; display: inline-flex; }
 .dci-gauge-trigger:hover, .dci-gauge-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-hover, color-mix(in srgb, currentColor 8%, transparent));
   color: var(--dsw-alias-label-secondary, inherit); }
 .dci-gauge-track { fill: none; stroke: var(--dsw-alias-border-l3, currentColor); stroke-width: 2px; }
 .dci-gauge-fill { fill: none; stroke: var(--dsw-alias-label-tertiary, currentColor); stroke-width: 2px; stroke-linecap: round; }
-.dci-gauge-panel { z-index: 1100; box-sizing: border-box; background: var(--dsw-menu-surface-fill, var(--dsw-specific-menu, rgba(30, 30, 34, 0.98)));
+/* 面板 portal 到 body + fixed，left/top 由 useAnchoredPanel（官方 useAnchoredPosition
+   移植：面板左缘对齐锚点左缘、面板底距锚点顶 8px、视口 margin 12 夹取）下发。 */
+.dci-gauge-panel { z-index: 1100; box-sizing: border-box; background: var(--dsw-specific-menu, var(--dsw-menu-surface-fill, rgba(30, 30, 34, 0.98)));
   backdrop-filter: var(--dsw-menu-backdrop-filter, none);
   --dsw-elevation-stroke-color: var(--dsw-alias-border-l1, transparent); width: min(264px, 100vw - 24px);
   box-shadow: var(--dsw-elevation-prominent, 0 10px 34px rgba(0, 0, 0, 0.35));
   color: var(--dsw-alias-label-secondary, inherit); cursor: default; border: 0; border-radius: var(--dsw-radius-lg, 12px); padding: 12px;
-  font-size: 12px; line-height: 20px; position: absolute; bottom: calc(100% + 8px); right: 0; }
+  font-size: 12px; line-height: 20px; position: fixed; }
 .dci-gauge-header { align-items: center; gap: 6px; display: flex; }
 .dci-gauge-figures { font-variant-numeric: tabular-nums; color: var(--dsw-alias-label-primary, inherit); margin-left: auto; font-weight: 500; }
 .dci-gauge-percent { color: var(--dsw-alias-label-primary, inherit); font-weight: 500; }
 .dci-gauge-headline { color: var(--dsw-alias-label-tertiary, currentColor); }
 .dci-gauge-bar { background: var(--dsw-alias-interactive-bg-hover, color-mix(in srgb, currentColor 8%, transparent));
-  border-radius: 999px; gap: 1px; height: 4px; margin: 10px 0 12px; display: flex; overflow: hidden; }
+  border-radius: 999px; corner-shape: round; gap: 1px; height: 4px; margin: 10px 0 12px; display: flex; overflow: hidden; }
 .dci-gauge-segment { background: var(--meter-tint, var(--dsw-alias-label-tertiary, currentColor)); border-radius: 1px;
   flex: 0 0 auto; min-width: 2px; height: 100%; }
 .dci-gauge-swatch { background: var(--meter-tint, currentColor); vertical-align: baseline; border-radius: 2px;
@@ -569,13 +581,11 @@ button.dci-attach-body { color: inherit; font: inherit; text-align: left; backgr
   border: none; justify-content: center; align-items: center; padding: 6px; display: inline-flex; }
 .dci-umsg-action svg { width: calc(15px + var(--dsh-content-font-delta, 0px)); height: calc(15px + var(--dsh-content-font-delta, 0px)); }
 .dci-umsg-action:hover { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-secondary); }
-/* 悬停显形（官方同款 data 属性面：chat 根的 data-actions-reveal 与 flowItem 的
-   data-chat-flow-kind 都在宿主 DOM 上，这里只换目标类）。 */
+/* 悬停显形（官方 MessageItem.module.css 同款）：data-actions-reveal 挂在 assistant 的
+   turn-tail 根上、不在用户消息的祖先链里，用户消息的实际驱动只有 flowItem 的
+   data-chat-flow-kind 兄弟关系（后一条 user/steering 存在即隐藏，悬停/聚焦显形）。 */
 @media (hover: hover) {
-  [data-actions-reveal="hover"] .dci-umsg-actions,
   :is([data-chat-flow-kind="user"], [data-chat-flow-kind="steering"]):has(~ :is([data-chat-flow-kind="user"], [data-chat-flow-kind="steering"])) .dci-umsg-actions { opacity: 0; transition: opacity 80ms; }
-  [data-actions-reveal="hover"]:hover .dci-umsg-actions,
-  [data-actions-reveal="hover"]:focus-within .dci-umsg-actions,
   :is([data-chat-flow-kind="user"], [data-chat-flow-kind="steering"]):hover .dci-umsg-actions,
   :is([data-chat-flow-kind="user"], [data-chat-flow-kind="steering"]):focus-within .dci-umsg-actions { opacity: 1; }
 }
@@ -658,9 +668,15 @@ button.dci-umsg-chip:focus-visible { box-shadow: 0 0 0 2px var(--dsw-focus-ring-
 `;
 
 export function injectStyles(): void {
-  if (document.getElementById(STYLE_ID)) return;
-  const el = document.createElement('style');
-  el.id = STYLE_ID;
-  el.textContent = CSS;
-  document.head.appendChild(el);
+  const el = document.getElementById(STYLE_ID);
+  // 已有本插件样式（宿主热替换/原地更新插件后重 apply）时按内容原位刷新：
+  // 旧 <style> 还挂着会让新版新增的类（如 dci-umsg-*）永远注入不进去。
+  if (el) {
+    if (el.textContent !== CSS) el.textContent = CSS;
+    return;
+  }
+  const tag = document.createElement('style');
+  tag.id = STYLE_ID;
+  tag.textContent = CSS;
+  document.head.appendChild(tag);
 }