dsh-vt-uiux-enhancer 1.0.1 → 1.1.0

package/DESIGN.md

@@ -8,9 +8,13 @@
 
 - 让 Harness 读起来像一份**干净的白纸界面**：纯白画布、暖调中性文字、极浅的边界。
 - **默认只做外观**：颜色、圆角形状、阴影、间距、对齐、字重；不改布局结构、不改交互逻辑、不加功能。
-- 唯一的越界通道是**用入口换空间**：某个低频功能占着常驻空间时，把它的常驻入口收进已有的信息行、
-  把空间还给内容。前提是三条同时成立 —— 入口没有消失（双向可回）、没有新增持久状态、
-  关掉插件后原样回来。目前只有「视图切换入口」走这条路。
+- 越界只有**两处可逆的密度处理**，共同前提是三条同时成立 —— 内容没有消失（双向可回）、
+  没有新增持久状态、关掉插件后原样回来：
+  1. **用入口换空间**：某个低频功能占着常驻空间时，把它的常驻入口收进已有的信息行、把空间还给内容。
+     目前只有「视图切换入口」走这条路。
+  2. **用披露换密度**：内容本身没有变，只是默认不一次性铺满。超长用户消息折叠成 20 行，
+     保留「展开」把全文原位放回来。这一条不是"美化"，是"读得下去"：一条 60 行的粘贴内容会把
+     后面所有轮次推出屏幕，滚动本身就成了任务。
 - **必须可完全撤销**：插件关闭后 Harness 精确回到出厂外观。因此不写死任何 Harness 文件，也不留下
   常驻的定时器、监听器或网络请求。
 
@@ -56,6 +60,7 @@
 | 输入框「+」 | 去掉常驻灰底，默认裸字形，hover 才出底（与麦克风同一个 token）；字形缩到与整行同档；再向审查 chip 拉近 8px（视觉间距 4px） | 一行控件里只有它常驻底色，等于把「可点」画成了「已选」；裸字形之后，原先被底板衬住的 11px 加号成了整行最重的图标；12px 盒间距在「裸字形 + 带内距的 chip」之间会读成约 27px，左簇因此被拉散；拉近到视觉 4px 才读成一簇 |
 | 视图切换入口 | 顶部标签行整条移除，header 从 76px 收到 51px；「轨迹」改为状态行第一项（列表图标 + 视图名），在轨迹页原地变成「对话」 | 只有两个视图时，常驻 36px 的标签行 + 右侧「…」是在为低频功能付固定成本；状态行本来就是本会话读数所在，宽度成本为零。入口做成双向的，是因为移除标签行后不能再有第二个「对话」入口 —— 但也不该为回程新开一条 40px 的 header 行 |
 | 队列消息卡片 | 浅灰 `#f5f5f5`（暗色沿用浮层材质） | 它借的是浮层材质上色，浮层改成近白后它和白画布分不开；但它不是浮层 —— 它在画布上叠一层，该用「比画布深一档」而不是「和浮层一样白」 |
+| 长用户消息折叠 | 20 行（19 行正文 + 独占一行的「…」）+ 气泡内底部「展开／收起」；阈值按渲染行数；展开原位 | 参照本机 Codex：省略号单独占一行、按钮留在气泡填充里，气泡才仍读作**一个对象**（按钮放到气泡外会读成第二个对象、第二条消息）。按行数而不是字数，是因为窄窗口下 600 字只排 9 行、宽窗口下能排 30 行 —— 字数阈值在响应式布局里等于没有阈值。按钮文字用 `label-secondary` 而不是应用 disclosure 行的 `label-tertiary`：它坐在气泡浅蓝填充上，13px 下 tertiary 的对比度不足 4:1 |
 
 ---
 

package/README.md

@@ -1,7 +1,8 @@
 # dsh-vt-uiux-enhancer · VT UI/UX 增强
 
-DeepSeek Harness 的界面改善插件：把外观调成**一张干净的白纸**，只改看得见的样式，
-不改布局结构、不加功能。关闭插件后 Harness 精确回到出厂外观。
+DeepSeek Harness 的界面改善插件：把外观调成**一张干净的白纸**。
+默认只改看得见的样式；唯一越界的是两处**可逆的密度处理**（低频入口收进状态行、超长用户消息折叠成 20 行），
+都不新增持久状态，关闭插件后 Harness 精确回到出厂外观。
 
 ## 它改了什么
 
@@ -12,6 +13,9 @@ DeepSeek Harness 的界面改善插件：把外观调成**一张干净的白纸*
 - **动效**：动画只表达"状态正在变"；轮次跳转条静止为短刻度、靠近指针才长出来。
 - **输入框**：原生 `title` tooltip 换成自绘气泡，沿用应用自己的 tooltip token。
 - **空间回收**：视图切换标签行收进状态行，header 从 76px 收到 51px；入口双向保留。
+- **长消息折叠**：用户自己的消息超过 20 行时，显示 19 行正文 + 一行「…」，气泡内底部出现
+  「展开／收起」+ 原生 chevron；展开后原位显示全文。阈值是**渲染行数**，窗口变窄或字号变大
+  都不会改变折叠点。
 - **细节**：会话边缘上下 24px 渐隐、队列消息卡片用"比画布深一档"的底色。
 
 每条补丁的取值理由写在 `client.js` 的注释里；跨补丁的取舍记在 `DESIGN.md`。
@@ -32,16 +36,16 @@ https://vontean.github.io/vt-dsh-plugin/index.json
 **npm**
 
 ```bash
-dsh plugin --profile <profile> add dsh-vt-uiux-enhancer@1.0.1
+dsh plugin --profile <profile> add dsh-vt-uiux-enhancer@1.1.0
 ```
 
 **Release tarball**
 
 到 [Releases](https://github.com/Vontean/vt-dsh-plugin/releases) 下载
-`dsh-vt-uiux-enhancer-1.0.1.tgz`，然后：
+`dsh-vt-uiux-enhancer-1.1.0.tgz`，然后：
 
 ```bash
-dsh plugin --profile <profile> add /绝对路径/dsh-vt-uiux-enhancer-1.0.1.tgz
+dsh plugin --profile <profile> add /绝对路径/dsh-vt-uiux-enhancer-1.1.0.tgz
 ```
 
 ## 支持的 DSH 版本

package/client.js

@@ -43,7 +43,7 @@ window.__ModuleLoader__.load({
     'use strict';
 
     const PLUGIN_ID = 'dsh-vt-uiux-enhancer';
-    const VERSION = '1.0.1';
+    const VERSION = '1.1.0';
 
     /**
      * DSH ships `:root { --dsw-corner-shape: superellipse(1.5) }` and applies it
@@ -292,6 +292,53 @@ window.__ModuleLoader__.load({
       toConversation: ['M10 4L6.70711 7.29289C6.31658 7.68342 6.31658 8.31658 6.70711 8.70711L10 12'],
     };
 
+    /**
+     * Long user messages in the transcript.
+     *
+     * A pasted stack trace turns one turn into four screenfuls and pushes every
+     * later exchange out of reach. Codex clamps the message and offers a
+     * disclosure; this copies that, with one difference that matters for a
+     * responsive layout: the threshold is RENDERED ROWS, never characters.
+     * Twenty rows means twenty rows at any column width and any content font
+     * size, because the count is measured from the bubble the browser laid out;
+     * a character budget would show 9 lines in a narrow window and 40 in a wide
+     * one, which is exactly the scrolling problem this is meant to solve.
+     *
+     * The reference this was modelled on (Codex) spends all twenty rows: the
+     * nineteenth is the last line of text, the twentieth is a lone "…" that says
+     * "there is more", and the disclosure row sits under it inside the same
+     * fill. Expanded, the text runs to the bottom and only the disclosure row is
+     * left.
+     *
+     * Geometry is expressed against the bubble's own line box
+     * (`line-height: calc(22px + var(--dsh-content-font-delta))` — the second
+     * term is the Appearance content-size preference), so the clamp follows the
+     * font setting through CSS `calc()` and the line count never has to be
+     * recomputed. `padding` mirrors the shipped bubble (`10px 16px`) and
+     * `stackGap` the shipped `.userStack` gap; the two extra rows are a SIBLING
+     * of the bubble, because `overflow: hidden` clips at the padding box
+     * (see trap 10 in DEVELOPMENT.md).
+     */
+    const MESSAGE_CLAMP = {
+      /**
+       * Rows shown while clamped, the "…" marker included. Twenty is where a
+       * message stops reading as a message and starts reading as a document;
+       * below it nothing changes at all.
+       */
+      rows: 20,
+      /** Space between the "…" row and the disclosure row. */
+      rowGap: 8,
+      /** The shipped bubble's bottom/side padding, and the stack gap it sits in. */
+      padding: { bottom: 10, x: 16 },
+      stackGap: 8,
+      /** Gap between the last text line and the disclosure block when expanded. */
+      textGap: 4,
+      /** Chevron: the icon set's own default box; regular stroke is 1 at 16. */
+      glyph: { box: 14, stroke: 1 },
+      /** Icon-to-label gap, the value the app's disclosure titles use. */
+      iconGap: 6,
+    };
+
     /** Codex's spring: linear() with a 0.8% overshoot instead of a bezier. */
     const RAIL_SPRING = 'linear(0, .398 10%, .682 20%, .843 30%, .925 40%, .972 50%, 1.004 60%, 1.008 70%, 1.003 80%, 1)';
 
@@ -1029,6 +1076,106 @@ ${responseLine} {
         fallback: '._6DJyyG_panel',
         rules: (selector) => `[data-queue-dock] ${selector}::before { background: var(--vt-queue-fill) !important; }`,
       },
+      {
+        kind: 'component',
+        id: 'user-bubble',
+        /**
+         * The bubble the user's own message is painted on — the only surface in
+         * the app filled with `--dsw-specific-bubble`, which makes the signature
+         * unambiguous without naming a hashed class.
+         *
+         * This patch owns the clamp, the "…" row and the disclosure block,
+         * because all three are placed against the bubble's own line box.
+         * `data-vt-clamp` is written by the `message-clamp` behaviour.
+         *
+         * The two extra rows are a SIBLING of the bubble, not rows inside it:
+         * `overflow: hidden` clips at the PADDING box, so a reserved
+         * `padding-bottom` would still have text painted over it (trap 10). The
+         * clamp therefore zeroes the bottom padding, which puts the clip edge
+         * exactly on the 19th line's bottom edge, and the block below carries the
+         * same fill plus squared top corners, so both boxes read as one bubble.
+         */
+        signature: ['background:var(--dsw-specific-bubble)'],
+        selectorFilter: '_bubble$',
+        fallback: '.AkCqbG_bubble',
+        rules: (selector) => {
+          const { rows, rowGap, padding, stackGap, textGap, glyph, iconGap } = MESSAGE_CLAMP;
+          return `
+${selector}[data-vt-clamp="clamped"] {
+  max-height: calc(${rows - 1} * (22px + var(--dsh-content-font-delta, 0px))) !important;
+  overflow: hidden !important;
+  padding-bottom: 0 !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+${selector}[data-vt-clamp="expanded"] {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+.vt-msg-clamp-tail {
+  align-self: stretch;
+  display: flex;
+  flex-direction: column;
+  gap: ${rowGap}px;
+  /* Sibling inside .userStack, a flex column with an 8px gap: cancel it so the
+     two filled boxes touch, and restore the bottom corners here. */
+  margin-top: -${stackGap}px;
+  padding: 0 ${padding.x}px ${padding.bottom}px;
+  background: var(--dsw-specific-bubble);
+  border-radius: 0 0 var(--dsw-radius-xl) var(--dsw-radius-xl);
+}
+${selector}[data-vt-clamp="expanded"] + .vt-msg-clamp-tail {
+  padding-top: ${textGap}px;
+}
+.vt-msg-clamp-more {
+  height: calc(22px + var(--dsh-content-font-delta, 0px));
+  line-height: calc(22px + var(--dsh-content-font-delta, 0px));
+  color: var(--dsw-alias-label-primary);
+  user-select: none;
+}
+${selector}[data-vt-clamp="expanded"] + .vt-msg-clamp-tail .vt-msg-clamp-more {
+  display: none !important;
+}
+.vt-msg-clamp-toggle {
+  display: flex;
+  align-items: center;
+  gap: ${iconGap}px;
+  height: calc(22px + var(--dsh-content-font-delta, 0px));
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: var(--dsh-content-font-size-secondary, 13px);
+  line-height: 1;
+  /* label-secondary, not the disclosure rows' label-tertiary: those sit on the
+     white canvas, this one on the tinted fill where tertiary drops under 4:1. */
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  transition: color 0.1s;
+}
+.vt-msg-clamp-toggle:hover {
+  color: var(--dsw-alias-label-primary);
+}
+.vt-msg-clamp-toggle:focus-visible {
+  outline: 1.5px solid var(--dsw-alias-state-business-primary);
+  outline-offset: 2px;
+  border-radius: var(--dsw-radius-sm);
+}
+.vt-msg-clamp-icon {
+  display: inline-flex;
+  flex: none;
+}
+.vt-msg-clamp-icon svg {
+  display: block;
+  width: ${glyph.box}px;
+  height: ${glyph.box}px;
+}
+@media (prefers-reduced-motion: reduce) {
+  .vt-msg-clamp-toggle { transition: none; }
+}`;
+        },
+      },
       {
         kind: 'behavior',
         id: 'view-switch',
@@ -1049,6 +1196,23 @@ ${responseLine} {
         behavior: 'view-switch',
         css: () => '',
       },
+      {
+        kind: 'behavior',
+        id: 'message-clamp',
+        /**
+         * A long user message is clamped to 20 rendered rows, with a disclosure
+         * row inside its own bubble. A behaviour, not a component patch: the
+         * decision ("is this message longer than 20 rows?") needs a layout
+         * measurement, and the toggle has to remember one bit of state per
+         * message. CSS can do neither.
+         *
+         * The style half lives in `user-bubble`, because the geometry has to key
+         * off the discovered bubble class. This entry owns the DOM half: the
+         * state attribute, the sibling disclosure block, the ellipsis row.
+         */
+        behavior: 'message-clamp',
+        css: () => '',
+      },
     ];
 
     // ═══════════════════════════════════════════════════════════════════════
@@ -1122,6 +1286,13 @@ ${responseLine} {
       const disposers = [];
       /** Why a behaviour failed to install; surfaced through diagnostics. */
       const behaviorErrors = [];
+      /**
+       * Measurements a behaviour publishes into the report channel. Behaviours do
+       * not produce `--vt-report-<patch>` tokens (they resolve no selectors), so
+       * without this a behaviour could install successfully and still be
+       * invisible to the one verification channel that works without DevTools.
+       */
+      const behaviorMetrics = {};
       /** Created on first sync, so a document-less host never touches the DOM. */
       let sheet = null;
       const ensureSheet = () => sheet || (sheet = createStyleHost(ctx));
@@ -1273,7 +1444,13 @@ ${responseLine} {
           report[`${id}-radius`] = style.borderRadius;
           report[`${id}-size`] = `${Math.round(rect.width)}x${Math.round(rect.height)}`;
           if (id.includes('row')) report[`${id}-pad`] = style.padding;
+          // The two numbers the long-message clamp derives from: the line box it
+          // counts in, and the box model its max-height is measured against.
+          if (id === 'user-bubble') report[`${id}-box`] = `${style.boxSizing}-${style.lineHeight}`;
         }
+        // Behaviour readings: the only way to see a behaviour work without
+        // DevTools, since behaviours publish no selector report of their own.
+        for (const [key, value] of Object.entries(behaviorMetrics)) report[key] = value;
 
         const tokens = {};
         for (const [key, value] of Object.entries(report)) {
@@ -1759,6 +1936,319 @@ ${responseLine} {
         }, ViewSwitch));
       }
 
+      /**
+       * Clamp a long user message to 20 rendered rows with a disclosure block.
+       *
+       * Three constraints shape this more than the feature itself:
+       *
+       * 1. React owns the bubble's children. Appending leaf nodes is safe as long
+       *    as a re-render that drops them is noticed and they are re-added — that
+       *    is what the sweep does on every structural mutation. Reparenting or
+       *    wrapping React's content would not be safe, so the text is never
+       *    moved: the clamp is `max-height` on the bubble, and the disclosure is
+       *    a SIBLING of it (trap 10 is why it cannot be inside the clipped box).
+       * 2. The decision needs layout, so it is measured, never guessed. An
+       *    unclamped bubble's `scrollHeight` is `paddingTop + rows × lineHeight +
+       *    paddingBottom`, which answers "longer than 20 rows?" in one read. Then
+       *    the clamped bubble is checked against its own overflow: if it does not
+       *    actually hide anything (an inline chip inflated a line, or the estimate
+       *    rounded up), the clamp is released. A measured post-condition beats a
+       *    clever formula.
+       * 3. The transcript re-mounts rows on session switches and compaction, so
+       *    expansion is remembered per flow key, not per node, otherwise the
+       *    message the reader just opened would close again.
+       *
+       * Failure surface: a missing chevron icon module or a missing
+       * `react-dom/client` throws into `installBehaviors`, which reports it as a
+       * failed behaviour instead of leaving half a feature wired.
+       */
+      function installMessageClamp(readSelectors) {
+        const ROW_SELECTOR = '[data-chat-flow-kind="user"],[data-chat-flow-kind="steering"]';
+        const STATE = 'data-vt-clamp';
+        const TOGGLE = 'vt-msg-clamp-toggle';
+        const MORE = 'vt-msg-clamp-more';
+        const TAIL = 'vt-msg-clamp-tail';
+        /** Settle time: the transcript mutates continuously while a turn streams. */
+        const SETTLE_MS = 120;
+        /** Expansion memory is bounded so switching sessions cannot grow it forever. */
+        const MEMORY = 400;
+
+        const React = require('react');
+        const reactDom = require('react-dom/client');
+        const icons = require('@deepseek-ai/dsh-client-ui-primitives');
+        const ChevronDown = icons.IconChevronDownOutlineRegular;
+        const ChevronUp = icons.IconChevronUpOutlineRegular;
+        if (typeof ChevronDown !== 'function' || typeof ChevronUp !== 'function') {
+          throw new Error('chevron icons unavailable in @deepseek-ai/dsh-client-ui-primitives');
+        }
+
+        /** Labels follow the app language instead of shipping an English-only row. */
+        const locale = ctx.get('locale');
+        const translate = (zh, en) => (
+          locale && typeof locale.resolveText === 'function' ? locale.resolveText({ zh, en }) : en
+        );
+        const label = { open: translate('展开', 'Show more'), close: translate('收起', 'Show less') };
+
+        /** Expanded flow keys, so the memory survives the re-mounts. */
+        const open = new Set();
+        /** Live disclosure entries, so dispose removes exactly what we added. */
+        const entries = new Set();
+        /** bubble -> entry; a WeakMap keeps dropped rows collectable. */
+        const wired = new WeakMap();
+        let timer = 0;
+        let published = '';
+        let revoke = null;
+
+        const narrowed = () => {
+          while (open.size > MEMORY) open.delete(open.values().next().value);
+        };
+
+        /** Flow key of the row a bubble sits in — the identity that outlives the node. */
+        const flowKey = (bubble) => {
+          const row = bubble.closest('[data-chat-flow-key]');
+          return row ? (row.getAttribute('data-chat-flow-key') || '') : '';
+        };
+
+        /** The bubble class resolved by the `user-bubble` patch, else its own fallback. */
+        const bubblePatch = patches.components.find((patch) => patch.id === 'user-bubble');
+        const bubbleSelector = () => {
+          const map = (typeof readSelectors === 'function' && readSelectors()) || {};
+          const list = map['user-bubble'];
+          if (list && list.length) return list.join(',');
+          return (bubblePatch && bubblePatch.fallback) || '';
+        };
+
+        /**
+         * Rendered row count of an *unclamped* bubble. `scrollHeight` includes
+         * the padding, so the padding is subtracted before dividing by the line
+         * box — the result is the number of line boxes the browser actually laid
+         * out, which is the unit the 20-row rule is defined in.
+         */
+        const lineCount = (bubble) => {
+          const style = getComputedStyle(bubble);
+          const lineHeight = parseFloat(style.lineHeight);
+          if (!isFinite(lineHeight) || lineHeight <= 0) return 0;
+          const padding = (parseFloat(style.paddingTop) || 0) + (parseFloat(style.paddingBottom) || 0);
+          return Math.round((bubble.scrollHeight - padding) / lineHeight);
+        };
+
+        /** Does the applied clamp actually hide text? */
+        const overflows = (bubble) => bubble.clientHeight > 0 && bubble.scrollHeight > bubble.clientHeight + 1;
+
+        /** One chevron, rendered from the app's own icon component. */
+        const chevron = (expanded) => {
+          const host = document.createElement('span');
+          host.className = 'vt-msg-clamp-icon';
+          const root = reactDom.createRoot(host);
+          const paint = (isOpen) => root.render(React.createElement(isOpen ? ChevronUp : ChevronDown, {
+            size: MESSAGE_CLAMP.glyph.box,
+            strokeWidth: MESSAGE_CLAMP.glyph.stroke,
+          }));
+          paint(expanded);
+          return { host, paint, dispose: () => root.unmount() };
+        };
+
+        /**
+         * The clamp's verification channel. Published here rather than only
+         * through the engine's report: the engine republishes on body mutations
+         * alone, so on an idle page a reading taken right after install would
+         * never reach the token list.
+         */
+        const publish = (rows, bubbles, clamped, expandedCount, first, scan) => {
+          const fields = {
+            messages: `rows-${rows} bubbles-${bubbles} clamped-${clamped} expanded-${expandedCount}`,
+          };
+          if (scan && scan.length) fields['messages-scan'] = scan.join(' ');
+          if (first) {
+            const style = getComputedStyle(first.bubble);
+            fields['messages-first'] = [
+              `lines-${first.lines}`,
+              `max-${style.maxHeight || 'none'}`,
+              `h-${first.bubble.clientHeight}`,
+              `scroll-${first.bubble.scrollHeight}`,
+              `pb-${style.paddingBottom}`,
+              `lh-${style.lineHeight}`,
+              `box-${style.boxSizing}`,
+            ].join('-');
+          }
+          const signature = JSON.stringify(fields);
+          if (signature === published) return;
+          published = signature;
+          const tokens = {};
+          for (const [key, value] of Object.entries(fields)) {
+            tokens[`--vt-report-${sanitize(key)}-${sanitize(value)}`] = { light: '', dark: '' };
+          }
+          try {
+            revoke = ctx.theme.overrideTokens('vt-interface:messages', tokens);
+          } catch (err) { /* diagnostics must never break the visual layer */ }
+        };
+
+        const unwire = (bubble, entry) => {
+          entries.delete(entry);
+          wired.delete(bubble);
+          try { entry.icon.dispose(); } catch (err) { /* already gone */ }
+          entry.tail.remove();
+          bubble.removeAttribute(STATE);
+          bubble.removeAttribute('data-vt-clamp-lines');
+        };
+
+        const wire = (bubble, lines, expanded) => {
+          const key = flowKey(bubble);
+
+          const more = document.createElement('span');
+          more.className = MORE;
+          more.setAttribute('aria-hidden', 'true');
+          more.textContent = '…';
+
+          const toggle = document.createElement('button');
+          toggle.type = 'button';
+          toggle.className = TOGGLE;
+          const caption = document.createElement('span');
+          caption.className = 'vt-msg-clamp-label';
+          const icon = chevron(expanded);
+          toggle.appendChild(caption);
+          toggle.appendChild(icon.host);
+
+          /*
+           * The disclosure is a SIBLING of the bubble, never a child: the clamp
+           * uses `overflow: hidden`, which clips at the padding box, so any row
+           * reserved inside the bubble would still be painted over by the text
+           * that overflows the content box.
+           */
+          const tail = document.createElement('div');
+          tail.className = TAIL;
+          tail.appendChild(more);
+          tail.appendChild(toggle);
+
+          const entry = { bubble, tail, toggle, more, icon, caption, key, lines, expanded };
+
+          const paint = () => {
+            bubble.setAttribute(STATE, entry.expanded ? 'expanded' : 'clamped');
+            bubble.setAttribute('data-vt-clamp-lines', String(entry.lines));
+            toggle.setAttribute('aria-expanded', String(entry.expanded));
+            caption.textContent = entry.expanded ? label.close : label.open;
+            icon.paint(entry.expanded);
+          };
+
+          toggle.addEventListener('click', (event) => {
+            // The transcript row has its own click affordances; a disclosure is
+            // not one of them.
+            event.preventDefault();
+            event.stopPropagation();
+            entry.expanded = !entry.expanded;
+            if (entry.key) {
+              if (entry.expanded) open.add(entry.key);
+              else open.delete(entry.key);
+              narrowed();
+            }
+            paint();
+            schedule();
+          });
+
+          bubble.after(tail);
+          entries.add(entry);
+          wired.set(bubble, entry);
+          paint();
+          return entry;
+        };
+
+        const sweep = () => {
+          timer = 0;
+          // A row that left the document must release its nodes and its React
+          // root instead of waiting for dispose.
+          for (const entry of [...entries]) {
+            if (entry.bubble.isConnected) continue;
+            entries.delete(entry);
+            try { entry.icon.dispose(); } catch (err) { /* already gone */ }
+            entry.tail.remove();
+          }
+
+          const rows = document.querySelectorAll(ROW_SELECTOR);
+          const bubbles = [];
+          for (const row of rows) {
+            let found;
+            try { found = row.querySelectorAll(bubbleSelector()); } catch (err) { found = []; }
+            for (const bubble of found) bubbles.push(bubble);
+          }
+
+          let clamped = 0;
+          let expandedCount = 0;
+          let first = null;
+          const scan = [];
+
+          for (const bubble of bubbles) {
+            let entry = wired.get(bubble) || null;
+            // A re-render can drop our nodes while keeping the bubble: rebuild.
+            if (entry && !entry.tail.isConnected) {
+              unwire(bubble, entry);
+              entry = null;
+            }
+            if (!entry) {
+              if (bubble.getAttribute(STATE) === 'none') continue;
+              const lines = lineCount(bubble);
+              if (scan.length < 4) {
+                scan.push(`${lines}L/${bubble.clientHeight}h/${bubble.scrollHeight}s/${bubble.getAttribute(STATE) || '-'}`);
+              }
+              if (lines <= 0) continue;
+              if (lines <= MESSAGE_CLAMP.rows) {
+                bubble.setAttribute(STATE, 'none');
+                continue;
+              }
+              entry = wire(bubble, lines, open.has(flowKey(bubble)));
+              // Measured post-condition: keep the clamp only if it hides text.
+              if (!entry.expanded && !overflows(bubble)) {
+                unwire(bubble, entry);
+                bubble.setAttribute(STATE, 'none');
+                continue;
+              }
+            }
+            if (entry.expanded) expandedCount += 1;
+            else {
+              clamped += 1;
+              if (!first) first = entry;
+            }
+          }
+
+          publish(rows.length, bubbles.length, clamped, expandedCount, first, scan);
+        };
+
+        const schedule = () => {
+          if (timer) return;
+          timer = setTimeout(sweep, SETTLE_MS);
+        };
+
+        // A language switch relabels every visible disclosure row.
+        const relabel = () => {
+          label.open = translate('展开', 'Show more');
+          label.close = translate('收起', 'Show less');
+          for (const entry of entries) entry.caption.textContent = entry.expanded ? label.close : label.open;
+        };
+        const unsubscribe = locale && typeof locale.subscribe === 'function' ? locale.subscribe(relabel) : null;
+
+        const observer = typeof MutationObserver === 'undefined'
+          ? null
+          : new MutationObserver(schedule);
+        if (observer) observer.observe(document.body, { childList: true, subtree: true });
+
+        sweep();
+
+        return () => {
+          clearTimeout(timer);
+          if (observer) observer.disconnect();
+          if (typeof unsubscribe === 'function') unsubscribe();
+          for (const entry of [...entries]) {
+            entries.delete(entry);
+            try { entry.icon.dispose(); } catch (err) { /* already gone */ }
+            entry.tail.remove();
+          }
+          for (const bubble of document.querySelectorAll(`[${STATE}]`)) bubble.removeAttribute(STATE);
+          for (const bubble of document.querySelectorAll('[data-vt-clamp-lines]')) {
+            bubble.removeAttribute('data-vt-clamp-lines');
+          }
+          if (typeof revoke === 'function') safeCall(revoke);
+        };
+      }
+
       /**
        * Behaviour implementations, keyed by the name a patch declares.
        *
@@ -1771,6 +2261,7 @@ ${responseLine} {
         'native-tooltip': (readSelectors) => installNativeTitleTakeover(readSelectors),
         'scroll-edges': () => installScrollEdgeFade(),
         'view-switch': () => installViewSwitch(ctx),
+        'message-clamp': (readSelectors) => installMessageClamp(readSelectors),
       };
 
       return {
@@ -1809,7 +2300,7 @@ ${responseLine} {
             try {
               const factory = BEHAVIORS[patch.behavior];
               if (typeof factory !== 'function') throw new Error(`unknown behaviour "${patch.behavior}"`);
-              disposers.push(factory(readSelectors));
+              disposers.push(factory(readSelectors, behaviorMetrics));
               installed += 1;
             } catch (err) {
               // A behaviour that throws must not take the visual layer down, but
@@ -1817,6 +2308,10 @@ ${responseLine} {
               behaviorErrors.push(`${patch.id}: ${err && err.message ? err.message : String(err)}`);
             }
           }
+          // Encoded into report tokens, so a failed install is also readable
+          // without DevTools (see the `behaviors` field in docs/VERIFY.md).
+          behaviorMetrics.behaviors = `${installed}-of-${patches.behaviors.length}`;
+          if (behaviorErrors.length > 0) behaviorMetrics['behaviour-errors'] = behaviorErrors.join(' | ');
           return { installed, total: patches.behaviors.length, errors: behaviorErrors };
         },
 
@@ -1825,6 +2320,11 @@ ${responseLine} {
           return [...behaviorErrors];
         },
 
+        /** Live readings a behaviour publishes for the report channel. */
+        behaviorMetrics() {
+          return { ...behaviorMetrics };
+        },
+
         dispose() {
           if (sheet) sheet.dispose();
           for (const d of disposers.reverse()) safeCall(d);
@@ -2218,7 +2718,7 @@ ${responseLine} {
           .filter((node) => String(node.dataset.pluginCss || '').startsWith(`${PLUGIN_ID}/`))
           .map((node) => node.textContent || '')
           .join('\n')
-          .slice(0, 12000);
+          .slice(0, 16000);
       }
       // Resolved selectors and patch states, handed in by the engine: the ground
       // truth for "which element did this patch actually land on".
@@ -2487,6 +2987,9 @@ ${responseLine} {
 
       sync();
       const behaviors = ui.installBehaviors(() => lastSelectors);
+      // The install count is recorded while behaviours install; one more publish
+      // makes it visible without waiting for the next body mutation.
+      sync();
 
       // Plugin stylesheets are injected asynchronously during boot, so the first
       // discovery pass may legitimately find nothing. Re-resolve when style
@@ -2556,6 +3059,14 @@ ${responseLine} {
         behaviors() {
           return { ...behaviors, errors: ui.behaviorErrors() };
         },
+        /**
+         * Live readings published by behaviours: how many user rows the clamp
+         * found, how many are clamped or expanded, and the first clamped
+         * bubble's measured geometry. Same values as its report tokens.
+         */
+        messages() {
+          return ui.behaviorMetrics();
+        },
         /** Resolved selectors per patch, for auditing what each patch targets. */
         selectors() {
           return { ...lastSelectors };

package/docs/VERIFY.md

@@ -41,8 +41,16 @@ cordis_inspect_query(platform="client", provider="Theme", method="listTokens")
 扫 `--vt-report-` 前缀即可。**完成判据**：每个 `component` 补丁都有 `discovered-N`（`fallback` 表示仍在
 兜底工作，可接受但要记录原因），且 `build` 与代码一致。
 
-`behavior` 补丁在这里**不会出现** —— 它不解析选择器。它的判据是
-`__vtInterface.behaviors()` 返回 `installed === total` 且 `errors` 为空，见下一条通道。
+`behavior` 补丁不解析选择器，所以没有 `discovered` 这类 token。它自己额外发两组：
+
+```
+--vt-report-behaviors-<installed>-of-<total>   四个行为是否都装上了；失败时会多一条
+--vt-report-behaviour-errors-<原因>            同 `__vtInterface.behaviors().errors`
+--vt-report-messages-rows-<n>-bubbles-<n>-clamped-<n>-expanded-<n>   长消息折叠的读数
+```
+
+`messages-*` 由 `message-clamp` 自己写入独立主题层（`vt-interface:messages`），不等引擎的重发周期 ——
+页面静止时引擎不会再上报，那个读数就永远不出现（这条踩过）。
 
 这个通道每次 body 变动后 600ms 重发一次，只测「解析到没有 + 首个元素的尺寸/圆角」，
 刻意保持廉价。
@@ -52,6 +60,27 @@ cordis_inspect_query(platform="client", provider="Theme", method="listTokens")
 
 ---
 
+## 长消息折叠：怎么判断生效
+
+折叠只在**超过 20 行的用户消息出现在屏幕上**时才工作，所以先让那条消息进入会话视口，再读 token。
+
+| token | 期望 | 说明 |
+|---|---|---|
+| `--vt-report-user-bubble-discovered-1` | 有 | 气泡类名解析到了（签名是 `--dsw-specific-bubble` 填充，全仓唯一） |
+| `--vt-report-user-bubble-box-content-box-22px` | 有 | 两个前提：`content-box`（Harness 没有全局 `border-box`）+ 行高 22px |
+| `--vt-report-messages-rows-<n>-…-clamped-1` | `clamped` ≥ 1 | 长消息已折叠；`bubbles` 应与 `rows` 同量级 |
+| `--vt-report-messages-first-lines-<n>-max-418px-h-428-scroll-<n>-pb-0px-lh-22px-box-content-box` | 见左 | 14px 字号下：19 行 ≈ 418px 内容盒，气泡实测 428px（+10 上内距），`pb-0px` 是折叠态（内距归零，裁切边缘才对得上第 19 行的底边） |
+
+`clamped-0` 而屏幕上确实有一条长消息时，先看 `--vt-report-messages-scan-<n>L/<高>h/<滚动高>s/<状态>`：
+它是前四个气泡的「行数/高度/滚动高度/状态」快照。
+
+- 行数是 0：气泡还没布局（在隐藏的容器里），等它可见后一次 sweep 会补上。
+- 行数 ≤ 20：判定为「不用折叠」，气泡被标记成 `none` 且不会再量第二次。
+- 行数 > 20 但 `clamped-0`：`overflows` 后置检查把它退了（估算法失手时守法，例如某一行被行内 chip 撑高）。
+
+展开后 token 变成 `clamped-0 expanded-1`，再点一次回来。这两个数值变化只证明**状态**变了；
+「看得见的变化」仍然要肉眼确认一次，因为 `max-height` 与兄弟块的拼接没有计算值可读。
+
 ## 通道 B：探针（按需开启）
 
 回答「这个元素**现在**的计算样式是什么」。默认关闭 —— 发布态不该带定时器和网络请求。
@@ -136,8 +165,9 @@ tail -f /tmp/vt-dump.jsonl | jq -c 'select(.kind=="hover") | .hovered'
 
 ## 复核作用面
 
-探针只打印带 `!important` 的规则，而 Harness 上游不这么写 —— 所以打印出来的就是本插件实际发出的
-**全部** CSS 规则。新增补丁后跑一次 `static` dump，确认规则数量和选择器都在预期内，就能证明没有
-波及到输入框以外的组件。
+`myCss` 打印的是本插件自己那张 `<style>` 的**全文**（按 `data-plugin-css="<插件 id>/…"` 过滤）。
+Harness 上游不写 `!important`，所以带 `!important` 的那部分就是会覆盖上游的作用面；不带
+`!important` 的规则全部落在本插件自己的 `vt-` 类名上（`vt-interface-tip`、`vt-edge-fade`、
+`vt-msg-clamp-*`），作用面同样一眼可数。新增补丁后跑一次 `static` dump，确认规则数与选择器都在预期内。
 
-`myCss` 截断在 12000 字符（当前约 8.7k）。余量过半时先抬高截断值，否则上面那句「全部」就不成立了。
+`myCss` 截断在 16000 字符（当前约 10.5k）。余量过半时先抬高截断值，否则「全文」这个前提就不成立了。

package/locale/en.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "VT UI/UX Enhancer",
-    "description": "UI/UX refinements for DeepSeek Harness: palette, elevation, control shapes and motion unified, plus space reclaimed from low-frequency features. Restores the original interface completely when disabled."
+    "description": "UI/UX refinements for DeepSeek Harness: palette, elevation, control shapes and motion unified, long user messages folded to 20 lines, plus space reclaimed from low-frequency features. Restores the original interface completely when disabled."
   }
 }

package/locale/zh.json

@@ -1,6 +1,6 @@
 {
   "meta": {
     "title": "VT UI/UX 增强",
-    "description": "Harness 的 UI/UX 改善层：配色、层级、控件形状与动效的统一微调，并回收低频功能占用的界面空间。禁用后完全恢复原始界面。"
+    "description": "Harness 的 UI/UX 改善层：配色、层级、控件形状与动效的统一微调，超长用户消息折叠成 20 行，并回收低频功能占用的界面空间。禁用后完全恢复原始界面。"
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-vt-uiux-enhancer",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "type": "module",
   "description": "VT UI/UX Enhancer: reversible UI/UX refinements for DeepSeek Harness — palette, elevation, control shapes and motion shipped as patches over DSH's own tokens, slots and styles. Disabling the plugin restores the shipped interface exactly.",
   "license": "MIT",