dsh-markdown-bubble 0.1.4 → 0.2.0

package/README.md

@@ -33,9 +33,9 @@ DSH 的用户消息气泡按原样显示你输入的文字（`white-space: pre-w
 
 - **官方座位替换** —— 经 `ctx.slots` 在 `conversation.chat.node` 的 `user` / `steering` 两个 keyed 座位上以 `priority: -1` 遮蔽宿主渲染器；停用/卸载即恢复宿主自己的气泡，不改源码、不动日志
 - **宿主同款渲染** —— 不自己造 Markdown 管线，直接调用 `@deepseek-ai/dsh-client-ui-primitives` 的 `MarkdownText`：与助手回复同一套解析、高亮、表格、公式与代码卡
-- **引用 chip 保留** —— 宿主投影函数 `projectUserText` 照常调用，返回的片段按 chip / 纯文本拆分：chip 仍是可点击的文件 / 技能 chip，纯文本段逐个进 Markdown
+- **引用 chip 保留** —— 调用宿主自己的文本工厂槽 `conversation.user.text`（0.2.1 起投影就住在那里），返回的片段按 chip / 纯文本拆分：chip 仍是可点击的文件 / 技能 chip，纯文本段逐个进 Markdown
 - **操作条与三方插件兼容** —— 时间 + 复制按钮用官方 primitives 重建，操作条保留 `_actions` / `_action` 类名后缀与 `data-clock` 锚点；dsh-edit-turn、dsh-delete-turn、dsh-rerun-turn 的按钮注入照常工作
-- **附件与补充块** —— 图片走官方 `conversation.message.images` 座位（`renderMessageImages`），文件卡、引用摘要、`JsonBlock` 补充块与宿主同款
+- **附件与补充块** —— 图片走官方的图片画廊工厂槽 `conversation.images.content`，文件卡、引用摘要、`JsonBlock` 补充块与宿主同款
 - **软换行保留** —— 仅对围栏代码之外的续行补 GFM 两空格硬换行；代码块一个字节不动，缩进代码与表格行不误伤
 - **出错兜底** —— 单条消息的渲染错误被错误边界接住，回退为宿主的原始投影，不会连累整条座位被槽位机制摘除
 - **中英双语** 随系统语言切换（代码卡文案复用宿主 `chat` 字典）
@@ -89,12 +89,30 @@ const a = 1
 
 ### 兼容性
 
-- 实测 DSH `0.2.0-rc.1`（web profile，Chromium）。依赖：keyed 槽位 `conversation.chat.node`、行锚点 `data-chat-flow-kind` / `data-pending-steering` / `data-submission-echo`、primitives 导出的 `MarkdownText` / `projectUserText` / `writeClipboard`。
+- 实测 DSH `0.2.1-rc.2`（web profile，Chromium）。依赖：keyed 槽位 `conversation.chat.node`（`user` / `steering`）、座位上的 `renderFactorySlot` 绑定、行锚点 `data-chat-flow-kind` / `data-pending-steering` / `data-submission-echo`、primitives 导出的 `MarkdownText` / `writeClipboard`。
+- **0.2.1 把扩展点往里挪了**，本插件 0.1.5 已按新契约移植（旧契约的三样东西都不在了）：`primitives.projectUserText` 被删除 → 改调文本工厂槽 `conversation.user.text`；座位 props 从 `{ node, renderMessageImages, openFile, openSkill, t }` 变成 `{ node, renderFactorySlot, loadImage, t }` → 图片改调图片画廊工厂槽 `conversation.images.content`。
+- **为什么不能去换内容工厂槽**：`conversation.chat.user.content` 由宿主注册，插件再注册同名工厂会让**宿主自己的聊天插件启动失败**（实测 `web boot: 1 entry did not activate @deepseek-ai/dsh-client-ui-chat: failed`），所以「只换气泡内部」这条路走不通；同理，`conversation.chat.user.images` 这个子槽也不能由插件声明（实测 `slot "conversation.chat.user.images" is already declared (by factory "conversation.chat.user.content")`）。座位替换 + 两个工厂槽调用是当前版本唯一可行且不伤宿主的组合。
 - 与 `dsh-edit-turn`、`dsh-delete-turn`、`dsh-rerun-turn` 协同：三者的按钮注入基于 `[class*="_actions"]` / `[class*="_action"]`，本插件保留该契约；被 dsh-edit-turn 改写（rollback）的消息显示其自己的改写气泡，与本插件无关。
 - 宿主半区为惰性入口（无运行时行为），全部逻辑在 `./client` 浏览器半区；不修改官方源码，不写私有事件类型。
 
+### 为什么现在不能换成「替换内容工厂」（B 方案）
+
+理想做法是替换宿主的内容工厂槽 `conversation.chat.user.content`：气泡内部（附件 + 气泡 + 引用摘要）全部交回宿主，本插件只换掉正文那一段。这样能删掉自建的行外壳、时间/复制操作条与相关样式约 200 行，也不再依赖座位 props 的形状。**现在做不了，卡在下面三条**（都在 DSH `0.2.1-rc.2` 上实测过；等哪天宿主放开了任意一条，就可以改成 B）：
+
+| 缺什么 | 实测结果 | 放开之后 |
+|---|---|---|
+| 工厂槽能被插件**遮蔽/替换** | 注册同名工厂不是遮蔽而是硬错误，且会让**宿主自己的聊天插件启动失败**：`web boot: 1 entry did not activate @deepseek-ai/dsh-client-ui-chat: failed` | 直接换成注册 `conversation.chat.user.content`，删掉自建行外壳与操作条 |
+| 子槽能由**多个**声明方共享 | 想让座位条目自己声明 `conversation.chat.user.images` 以拿到 `renderSlot`，被拒：`slot "conversation.chat.user.images" is already declared (by factory "conversation.chat.user.content")`，且整条注册一起失败 | 图片可以用官方的座位/子槽渲染，不必绕工厂槽 |
+| 有一个**公开的**「渲染一条用户消息」入口 | 0.2.1 删掉了 `primitives.projectUserText`，投影只存在于工厂槽内部（现在只能调 `conversation.user.text` / `conversation.images.content` 这两个工厂槽） | 插件插入的气泡（例如 dsh-edit-turn 改写后的提示词）也能走同一条管线，见 [deepseek-harness#10704](https://github.com/deepseek-ai/deepseek-harness/discussions/10704) |
+
+也就是说：**座位替换（A）+ 调两个工厂槽**是当前版本唯一不伤宿主的组合；上面三条任意一条放开，都可以迁到 B。
+
 ### 修复记录
 
+- **0.1.5** —— 按 DSH `0.2.1-rc.2` 的新契约移植，并把 `engines.dsh` 从开口的 `>=0.2.0-rc.1` 收成 `>=0.2.1-rc.2`（旧区间会让它在 0.2.1 上照样安装、只静默降级）。
+  - **引用 chip 回来了**：`primitives.projectUserText` 在 0.2.1 被删除（真机报 `TypeError: primitives.projectUserText is not a function`），投影改成调用宿主的文本工厂槽 `conversation.user.text`（`facts.sessionLabels` / `facts.skillNames` + `interactive`），chip 拆分逻辑不变。真机复验：控制台里那条降级告警不再出现（0 条），25/25 条用户气泡仍由本插件渲染。
+  - **图片附件回来了**：座位 props 里的 `renderMessageImages` 已不存在，改调图片画廊工厂槽 `conversation.images.content`（附件插件自己注册的那个；它的 `MessageImages` 也只是这一步调用）。三条看起来更顺的路都被堵着，README 的「兼容性」一节记了实测报错原文。
+  - **性能**：降级投影从「每帧算两次」改成只算一次（`MarkdownBoundary` 的 fallback 改成惰性 thunk，只有真失败时才构造）；`toMarkdown()` 加 64 条 LRU 缓存（流式期间同一条消息会被反复重排，而准备源码是 split/join + 逐行正则）；传给 `MarkdownText` 的 labels 对象按 `t` 记忆化（宿主自己的 `ReasoningContent` 正是这么做的，每次新建对象会让下游 memo 失效）。
 - **0.1.4** —— 按评审意见把降级路径**合成一个函数**：此前「合成失败」「宿主投影抛错」「最后兜底」各自写了一份降级逻辑（一份调宿主投影、一份内联拼裸文本），三处要人工保持同步。现在只有 `degradedBody()` 一处：先试宿主自己的投影（保住引用 chip 等宿主渲染），投影也抛才退到裸文本；三条降级路径全部走它。内容优先这一点写进函数契约：裸文本是最后一步，只有宿主自己拒绝投影时才到。新增回归：断言 `projectUserText` 全仓只有一次调用、裸文本 span 只有一处构造、降级调用方都走同一函数（再造一份降级该测试转红）。
 - **0.1.3** —— 把「座位 render 绝不抛」这条不变式补完：0.1.2 守住了合成与文案查询，但仍有形状会在**座位自己的渲染里**抛错（`node` 缺失 → `node.data`、`props` 缺失 → 解构本身、`new Date(time)` 遇到 Symbol / BigInt / 抛错的 valueOf、宿主图片渲染器抛错）。这些同样冒泡到槽位机制、退掉整条条目，症状与 0.1.2 修的完全一样。现在三层兜底：座位本体一层 try 并把 `node` / `data` 的取用改成防御式；时钟与附件卡在各自调用点兜底；最后一层 `renderPlainRow` 保证最坏情况只是这一行退回纯文本，而操作条与兄弟插件锚点仍在。新增回归：21 种恶意宿主形状逐一断言不抛、且行与操作条都在。
 - **0.1.2** — 座位组件不再可能因渲染期异常被槽位机制摘除：`composeUserMarkdown` / `buildMarkdownLabels` 在座位渲染过程中运行，抛错不会被错误边界接住（错误边界只能接住其后代，接不住创建它的那次渲染），会冒泡到槽位机制并把该条目整条退掉——屏幕上就是气泡交还给宿主、Markdown 变回源码。现在合成与所有文案查询都在座位内部兜底：任何宿主形状不符（节点结构异常、投影返回不可识别、locale 席位不可调用）都退回宿主原始投影，气泡外壳、操作条与兄弟插件锚点全部保留。`data.content` 非数组、`t` 不可调用等情形一并加进回归测试。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-markdown-bubble",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "description": "Markdown rendering for DeepSeek Harness sent user messages: every message bubble renders lists, code, tables, quotes and inline formatting through the host's own Markdown pipeline, while queues, previews and the composer keep their plain projection.",
   "type": "module",
   "main": "src/index.js",
@@ -48,7 +48,7 @@
       ]
     },
     "engines": {
-      "dsh": ">=0.2.0-rc.1"
+      "dsh": ">=0.2.1-rc.2"
     }
   }
 }

package/src/client.js

@@ -49,7 +49,7 @@ window.__ModuleLoader__.load({
     const NS = 'dsh-markdown-bubble'
 
     /** Keep in sync with package.json and src/index.js. */
-    const PLUGIN_VERSION = '0.1.4'
+    const PLUGIN_VERSION = '0.2.0'
 
     /** Presence marker the live verifier reads. */
     const DEBUG_KEY = '__DSH_MARKDOWN_BUBBLE__'
@@ -58,6 +58,159 @@ window.__ModuleLoader__.load({
     const CSS_TAG = NS + '/markdown-bubble.css'
 
     /** Chat-node seats this renderer replaces; the host serves both with one view. */
+    /**
+     * 外观（layout）覆盖。
+     *
+     * 默认（`bubble`）一条规则都不命中，现有的气泡外观分毫不变；只有页面被
+     * 标记成 `full` 时才换成长条记录式：铺满对话列、去掉气泡底色、下方一条
+     * 细分隔线。规则只碰本插件自己的类名，绝不改宿主命名的节点。
+     */
+    const LAYOUT_CSS = `
+/* Pro（模仿 Google AI Studio）：整条用户消息是一个和输入框同宽的圆角框——
+   细边框、透明底，框内第一行是「User · 时:分」，正文在下面。 */
+html[data-dshmb-layout="full"] .dshmb-stack{max-width:100%!important;width:100%!important;align-items:stretch!important}
+html[data-dshmb-layout="full"] .dshmb-bubble{
+  display:block!important;
+  width:100%!important;max-width:100%!important;
+  box-sizing:border-box;
+  background:transparent!important;
+  /* 静默态：只有顶上一条横线，没有框。 */
+  border:0!important;
+  /* 静默态也有 1px 的边框，只是颜色透明——这样悬浮时只过渡颜色，
+     不会出现「先黑后灰」的闪色，也不会因为突然多出 1px 而跳动。 */
+  border:1px solid transparent!important;
+  border-radius:var(--dsw-radius-xl,16px)!important;
+  position:relative;
+  padding:12px 16px!important;
+  text-align:left!important;
+  transition:border-color .12s ease, border-radius .12s ease, box-shadow .12s ease;
+}
+
+/* 刚发出、还没落盘的那一帧由宿主自己的 UserMessageBubble 画（data-message-bubble），
+   它没有 .dshmb-* 类。这里把它也按 Pro 的样子铺开，避免「先闪一下右侧气泡」。 */
+html[data-dshmb-layout="full"] [data-chat-flow-kind="user"] [data-message-bubble],
+html[data-dshmb-layout="full"] [data-chat-flow-kind="steering"] [data-message-bubble]{
+  width:100%!important;max-width:100%!important;
+  box-sizing:border-box;
+  background:transparent!important;
+  border:1px solid transparent!important;
+  border-radius:var(--dsw-radius-xl,16px)!important;
+  padding:12px 16px!important;
+  text-align:left!important;
+}
+html[data-dshmb-layout="full"] [data-chat-flow-kind="user"] [data-message-bubble]::before,
+html[data-dshmb-layout="full"] [data-chat-flow-kind="steering"] [data-message-bubble]::before{
+  content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
+  background:var(--dsw-alias-border-l2,rgba(16,24,40,.16));
+}
+html[data-dshmb-layout="full"] [data-chat-flow-kind="user"] [data-message-bubble]{position:relative}
+
+/* 一轮结束后的动作条与下一轮之间的呼吸：宿主默认只留 4px，太挤。 */
+html[data-dshmb-layout="full"] [data-chat-flow-kind="turn-tail"]{margin-bottom:16px!important}
+
+/* 静默顶线：两端内收一个圆角半径，长度 == 悬浮框顶边的直线段。 */
+html[data-dshmb-layout="full"] .dshmb-bubble::before{
+  content:"";position:absolute;left:16px;right:16px;top:0;height:1px;
+  background:var(--dsw-alias-border-l2,rgba(16,24,40,.16));
+  transition:opacity .12s ease;
+}
+html[data-dshmb-layout="full"] [data-chat-flow-kind="user"]:hover .dshmb-bubble::before,
+html[data-dshmb-layout="full"] [data-chat-flow-kind="steering"]:hover .dshmb-bubble::before,
+html[data-dshmb-layout="full"] .dshmb-bubble:hover::before{opacity:0}
+
+/* 悬浮态：整框出现（四边 + 圆角），移开又只剩顶线。 */
+html[data-dshmb-layout="full"] [data-chat-flow-kind="user"]:hover .dshmb-bubble,
+html[data-dshmb-layout="full"] [data-chat-flow-kind="steering"]:hover .dshmb-bubble,
+html[data-dshmb-layout="full"] .dshmb-bubble:hover{
+  border-color:var(--dsw-alias-border-l2,rgba(16,24,40,.16))!important;
+  border-radius:var(--dsw-radius-xl,16px)!important;
+}
+html[data-dshmb-layout="full"] .dshmb-md{text-align:left!important}
+/* 框要「高」一点：正文照常排版，框底多留 20px 呼吸空间。 */
+html[data-dshmb-layout="full"] .dshmb-bubble{padding-bottom:20px!important}
+html[data-dshmb-layout="full"] .dshmb-attachments{justify-content:flex-start!important}
+/* 抬头：User · 03:06 */
+.dshmb-pro-head{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;line-height:18px;color:var(--dsw-alias-label-tertiary,#81858c);margin:0 0 6px}
+.dshmb-pro-head b{font-weight:500;color:var(--dsw-alias-label-secondary,#4b5872)}
+`
+
+    /**
+     * Pro 的抬头：`User · 03:06`。
+     *
+     * 时间不自己算——宿主把消息时间写在时钟元素的 `data-clock` 上；拷贝它，
+     * 就不会和官方的显示口径（今天/月日/年月日）分叉。
+     *
+     * @param {Element} row - 消息行。
+     */
+    function decorateProHeader(row) {
+      if (typeof document === 'undefined' || !document.body) return
+      const full = document.body.dataset.dshmbLayout === 'full'
+      const bubble = row.querySelector('.dshmb-bubble')
+      if (!bubble) return
+      const existing = bubble.querySelector(':scope > .dshmb-pro-head')
+      if (!full) {
+        if (existing) existing.remove()
+        return
+      }
+      if (existing) return
+      const head = document.createElement('div')
+      head.className = 'dshmb-pro-head'
+      const who = document.createElement('b')
+      who.textContent = row.getAttribute('data-chat-flow-kind') === 'steering' ? 'You' : 'User'
+      head.appendChild(who)
+      // 本行的动作入口（编辑 / 重跑 / 删除）搬进抬头行右侧——只搬本行自己的，
+      // 绝不跨行，否则会像之前那样把上一行的删除按钮吸过来。
+      bubble.insertBefore(head, bubble.firstChild)
+    }
+
+    /** 扫一遍所有用户行，补/撤 Pro 抬头。 */
+    function decorateAllRows() {
+      if (typeof document === 'undefined') return
+      for (const row of document.querySelectorAll('[data-chat-flow-kind="user"], [data-chat-flow-kind="steering"]')) {
+        decorateProHeader(row)
+      }
+    }
+
+    /** 本地缓存键：让下一帧之前就能知道外观，避免新消息先画成气泡再跳变。 */
+    const LAYOUT_CACHE_KEY = 'dsh-markdown-bubble:layout'
+
+    /**
+     * 同步地把外观标记打到 `<html>` 上。
+     *
+     * 宿主配置是异步读的（一次 fetch），但新消息到来的第一帧必须已经是正确的
+     * 外观，否则会「先画成右边的气泡，闪一下才变成 Pro」。所以真实来源仍是宿主
+     * 配置，这里只用一个本地缓存做首帧的提前量，读到配置后再校正。
+     *
+     * @param {'bubble' | 'full' | null} [value] - 要写入的外观；省略则读缓存。
+     */
+    function markLayout(value) {
+      if (typeof document === 'undefined') return
+      try {
+        const layout = value ?? (typeof localStorage !== 'undefined' ? localStorage.getItem(LAYOUT_CACHE_KEY) : null)
+        if (layout === 'full') document.documentElement.dataset.dshmbLayout = 'full'
+        else if (layout === 'bubble') document.documentElement.dataset.dshmbLayout = 'bubble'
+      } catch {
+        /* 没有 document/localStorage 就交给宿主 */
+      }
+    }
+
+    // 模块加载即执行：赶在第一帧之前。
+    markLayout()
+
+    /**
+     * 读宿主记住的外观；失败一律当默认（气泡）。
+     * @returns {Promise<'bubble' | 'full'>} 外观。
+     */
+    async function readLayout() {
+      try {
+        const response = await fetch('/api/dsh-markdown-bubble/config', { headers: { accept: 'application/json' } })
+        const data = await response.json()
+        return data && data.layout === 'full' ? 'full' : 'bubble'
+      } catch {
+        return 'bubble'
+      }
+    }
+
     const SEATS = ['user', 'steering']
 
     // Seat priority: the host's default is 0, the plugin sits below it, and it
@@ -189,7 +342,27 @@ window.__ModuleLoader__.load({
      * @param text - raw logged message text.
      * @returns markdown source for the renderer.
      */
+    // Prepared markdown source, keyed by the raw text. A bubble repaints on
+    // every transcript update (a streaming turn re-renders constantly) and the
+    // preparation is a split/join plus a regex per line, so the same message was
+    // re-walked dozens of times while an unrelated row streamed. Cleared whole
+    // when it grows past the cap: the entries are strings, and a long transcript
+    // has far fewer distinct message texts than it has repaints.
+    const markdownSourceCache = new Map()
+    const MARKDOWN_CACHE_LIMIT = 64
+
     function toMarkdown(text) {
+      const key = typeof text === 'string' ? text : ''
+      const cached = markdownSourceCache.get(key)
+      if (cached !== undefined) return cached
+      const source = prepareMarkdown(key)
+      if (markdownSourceCache.size >= MARKDOWN_CACHE_LIMIT) markdownSourceCache.clear()
+      markdownSourceCache.set(key, source)
+      return source
+    }
+
+    /** The uncached preparation: CRLF, session wire links, soft breaks. */
+    function prepareMarkdown(text) {
       const normalized = text.replace(/\r\n?/gu, '\n')
       return walkOutsideFences(normalized, (line, next) => hardBreakLine(line.replace(SESSION_WIRE_RE, '$1'), next))
     }
@@ -267,12 +440,24 @@ window.__ModuleLoader__.load({
      * @param text - the message text.
      * @param referenceLabels - session recall labels.
      * @param skillNames - skill names.
-     * @param references - file/skill open callbacks.
+     * @param renderFactorySlot - the seat's Factory binding (chips + plain runs).
      * @returns the degraded body, never null and never a throw.
      */
-    function degradedBody(text, referenceLabels, skillNames, references) {
+    function degradedBody(text, referenceLabels, skillNames, renderFactorySlot) {
       try {
-        return primitives.projectUserText(text, referenceLabels, skillNames, 'skill', references)
+        if (typeof renderFactorySlot !== 'function') throw new Error('the seat handed over no renderFactorySlot')
+        // The projection moved into the host's own Factory in 0.2.1-rc.2
+        // (`conversation.user.text`, registered by dsh-client-ui-conversation;
+        // it owns the keyed child slot that renders a reference chip). The old
+        // public primitive `primitives.projectUserText` was REMOVED in the same
+        // release, which is why this call used to throw and chips degraded to
+        // plain text.
+        return renderFactorySlot('conversation.user.text', {
+          text,
+          facts: { sessionLabels: referenceLabels, skillNames },
+          interactive: true,
+          ellipsis: false,
+        })
       } catch (error) {
         warnOnce('the host user-text projection failed; showing raw text', error)
         return h('span', { className: 'dshmb-plain' }, text)
@@ -296,13 +481,12 @@ window.__ModuleLoader__.load({
      * @param t - the injected chat translator.
      * @param referenceLabels - session recall labels.
      * @param skillNames - skill names.
-     * @param references - file/skill open callbacks.
+     * @param renderFactorySlot - the seat's Factory binding.
      * @returns the composed body, or null when markdown cannot be produced.
      */
-    function safeMarkdownBody(text, t, referenceLabels, skillNames, references) {
+    function safeMarkdownBody(text, t, referenceLabels, skillNames, renderFactorySlot, labels) {
       try {
-        const labels = buildMarkdownLabels(t)
-        return composeUserMarkdown(text, labels, referenceLabels, skillNames, references)
+        return composeUserMarkdown(text, labels, referenceLabels, skillNames, renderFactorySlot)
       } catch (error) {
         warnOnce('markdown composition failed; showing the degraded projection', error)
         return null
@@ -341,14 +525,14 @@ window.__ModuleLoader__.load({
      * @param labels - markdown chrome labels.
      * @param referenceLabels - session recall labels the host associates with the message.
      * @param skillNames - skill names the host loaded for the message.
-     * @param references - file/skill open callbacks for clickable chips.
+     * @param renderFactorySlot - the seat's Factory binding.
      * @returns the composed body, or null for empty text.
      */
-    function composeUserMarkdown(text, labels, referenceLabels, skillNames, references) {
+    function composeUserMarkdown(text, labels, referenceLabels, skillNames, renderFactorySlot) {
       if (typeof text !== 'string' || text === '') return null
       // The same single degraded projection, so a projection that throws inside
       // composition degrades exactly as one that throws on the healthy path.
-      const projected = degradedBody(text, referenceLabels, skillNames, references)
+      const projected = degradedBody(text, referenceLabels, skillNames, renderFactorySlot)
       const pieces =
         react.isValidElement(projected) && projected.type === Fragment && Array.isArray(projected.props.children)
           ? projected.props.children
@@ -525,7 +709,12 @@ window.__ModuleLoader__.load({
       }
 
       render() {
-        return this.state.failed ? this.props.fallback : this.props.children
+        if (!this.state.failed) return this.props.children
+        const { fallback } = this.props
+        // A thunk is called only when it is actually needed: building the
+        // degraded projection on every healthy render is wasted work (and, on a
+        // host whose projection is gone, a caught throw every time).
+        return typeof fallback === 'function' ? fallback() : fallback
       }
     }
 
@@ -615,9 +804,24 @@ window.__ModuleLoader__.load({
       }
     }
 
-    function renderAttachmentEntry({ attachment, renderMessageImages, compactImages }) {
+    function renderAttachmentEntry({ attachment, renderFactorySlot, loadImage, compactImages }) {
       if (attachment.type === 'image') {
-        return h(Fragment, null, renderMessageImages({ images: [attachment.image], align: 'end', compact: compactImages }))
+        // The host's image gallery, through the SAME Factory seam as the text
+        // projection. The three routes that look obvious are all closed on
+        // 0.2.1-rc.2: the `renderMessageImages` seat prop is gone, the child
+        // slot `conversation.chat.user.images` cannot be declared by a plugin
+        // ("already declared (by factory conversation.chat.user.content)",
+        // verified live), and `@deepseek-ai/dsh-client-ui-attachment` exports
+        // only apply/inject. The gallery Factory is the one that works: the
+        // attachment plugin registers `conversation.images.content` at root
+        // scope and its own `MessageImages` is nothing but a call to it.
+        if (typeof renderFactorySlot !== 'function') throw new Error('the seat handed over no renderFactorySlot')
+        return h(Fragment, null, renderFactorySlot('conversation.images.content', {
+          images: [attachment.image],
+          loadImage,
+          align: 'end',
+          compact: compactImages,
+        }))
       }
       const file = attachment.file ?? {}
       const name = typeof file.name === 'string' ? file.name : ''
@@ -668,23 +872,31 @@ window.__ModuleLoader__.load({
     function renderMarkdownBubble(props) {
       const safeProps = props !== null && typeof props === 'object' ? props : {}
       const node = safeProps.node !== null && typeof safeProps.node === 'object' ? safeProps.node : {}
-      const renderMessageImages = safeProps.renderMessageImages
-      const openFile = safeProps.openFile
-      const openSkill = safeProps.openSkill
+      // The seat's props on 0.2.1-rc.2: the two renderer bindings and the image
+      // loader. The old `renderMessageImages` / `openFile` / `openSkill` pair is
+      // gone; images now go through the declared child slot and reference chips
+      // through the `conversation.user.text` Factory.
+      const renderFactorySlot = safeProps.renderFactorySlot
+      const renderSlot = safeProps.renderSlot
+      const loadImage = safeProps.loadImage
       const t = safeProps.t
       const data = node.data !== null && typeof node.data === 'object' ? node.data : {}
       const { text, attachments, rest } = contentParts(Array.isArray(data.content) ? data.content : [])
       const referenceLabels = Array.isArray(data.referenceLabels) ? data.referenceLabels : []
       const skillNames = Array.isArray(data.skillNames) ? data.skillNames : []
-      const references = react.useMemo(() => ({ openFile, openSkill }), [openFile, openSkill])
       const compactImages = attachments.length > 1
       const showBubble = text !== '' || rest.length > 0
+      // The host memoizes its own label object before handing it to MarkdownText
+      // (`ReasoningContent` does exactly this); a fresh object every render
+      // defeats that memoization and re-renders the whole markdown tree.
+      const labels = react.useMemo(() => buildMarkdownLabels(t), [t])
 
       // Never let composition throw out of this render — see safeMarkdownBody.
-      // One degraded body per render, shared by the composition guard and the
-      // boundary's own fallback; the last-resort net calls it too.
-      const body = safeMarkdownBody(text, t, referenceLabels, skillNames, references)
-      const degraded = degradedBody(text, referenceLabels, skillNames, references)
+      // ONE degraded body per render: it is the composition guard's projection
+      // and the boundary's fallback, so building it eagerly (as this used to)
+      // ran the projection twice per render and, on 0.2.1-rc.2, threw twice.
+      const body = safeMarkdownBody(text, t, referenceLabels, skillNames, renderFactorySlot, labels)
+      const degraded = () => degradedBody(text, referenceLabels, skillNames, renderFactorySlot)
 
       // The action strip leads the row in DOM order and is pushed below the
       // bubble by flex `order`. Sibling plugins pick their bar with
@@ -708,7 +920,8 @@ window.__ModuleLoader__.load({
                 h(AttachmentEntry, {
                   key: `${attachment.type}:${index}`,
                   attachment,
-                  renderMessageImages,
+                  renderFactorySlot,
+                  loadImage,
                   compactImages,
                 }),
               ),
@@ -717,7 +930,7 @@ window.__ModuleLoader__.load({
             h(
               'div',
               { className: 'dshmb-bubble' },
-              h(MarkdownBoundary, { key: text, fallback: degraded }, body === null ? degraded : body),
+              h(MarkdownBoundary, { key: text, fallback: degraded }, body === null ? degraded() : body),
               rest.map((block, index) =>
                 h(primitives.JsonBlock, {
                   key: 'rest' + index,
@@ -762,7 +975,7 @@ window.__ModuleLoader__.load({
         text,
         Array.isArray(data.referenceLabels) ? data.referenceLabels : [],
         Array.isArray(data.skillNames) ? data.skillNames : [],
-        { openFile: safeProps.openFile, openSkill: safeProps.openSkill },
+        safeProps.renderFactorySlot,
       )
       return h(
         'div',
@@ -842,7 +1055,7 @@ window.__ModuleLoader__.load({
       const tag = document.createElement('style')
       tag.dataset.plugin = NS
       tag.dataset.pluginCss = CSS_TAG
-      tag.textContent = CSS
+      tag.textContent = CSS + LAYOUT_CSS
       document.head.appendChild(tag)
     }
 
@@ -863,6 +1076,37 @@ window.__ModuleLoader__.load({
      */
     function apply(ctx) {
       injectStyles()
+      // 外观由宿主记住（跨窗口、跨重启一致）；读到之前先按默认气泡渲染，
+      // 读到了再切换，避免闪一下错的样子。
+      void readLayout().then((layout) => {
+        try {
+          if (typeof localStorage !== 'undefined') localStorage.setItem(LAYOUT_CACHE_KEY, layout)
+        } catch {
+          /* 存不进去也没关系 */
+        }
+        markLayout(layout)
+        decorateAllRows()
+      })
+      // 消息行会随时重渲染：轻量地补抬头，不监听整棵文档的文本变化。
+      let scheduled = false
+      const schedule = () => {
+        if (scheduled) return
+        scheduled = true
+        const run = () => {
+          scheduled = false
+          decorateAllRows()
+        }
+        if (typeof requestAnimationFrame === 'function') requestAnimationFrame(run)
+        else setTimeout(run, 16)
+      }
+      const observer = typeof MutationObserver === 'function' ? new MutationObserver(schedule) : null
+      if (observer !== null) observer.observe(document.body, { childList: true, subtree: true })
+      ctx.effect(
+        () => () => {
+          if (observer !== null) observer.disconnect()
+        },
+        NS + ': pro header observer',
+      )
       for (const key of SEATS) {
         ctx.slots.inject('conversation.chat.node', () =>
           ctx.slots.register(
@@ -877,6 +1121,17 @@ window.__ModuleLoader__.load({
         )
       }
 
+      // 独立安装时也要有设置卡：插件页的 `plugins.bundle.config`，
+      // key 用包名，和 dsh-context 等插件同一约定。
+      if (ctx.slots !== null && ctx.slots !== undefined && typeof ctx.slots.inject === 'function') {
+        ctx.slots.inject('plugins.bundle.config', () =>
+          ctx.slots.register(
+            { name: 'plugins.bundle.config', key: 'dsh-markdown-bubble', locale: NS },
+            ConfigCard,
+          ),
+        )
+      }
+
       globalThis[DEBUG_KEY] = { version: PLUGIN_VERSION, seats: SEATS.slice() }
 
       ctx.effect(
@@ -888,7 +1143,79 @@ window.__ModuleLoader__.load({
       )
     }
 
+    /**
+     * 设置卡：选择气泡外观。
+     *
+     * 写入宿主配置（跨窗口、跨重启），并立刻改页面标记——两种外观都是同一份
+     * 渲染管线，切换不需要重载。
+     *
+     * @returns {object} React 元素。
+     */
+    function ConfigCard() {
+      const [layout, setLayout] = react.useState(null)
+      const [error, setError] = react.useState('')
+      react.useEffect(() => {
+        void readLayout().then(setLayout)
+      }, [])
+      const choose = (next) => {
+        fetch('/api/dsh-markdown-bubble/config', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ layout: next }),
+        })
+          .then(async (response) => {
+            const data = await response.json().catch(() => ({}))
+            if (!response.ok || data.ok !== true) throw new Error(data.error ? String(data.error) : `HTTP ${response.status}`)
+            const nextLayout = data.layout === 'full' ? 'full' : 'bubble'
+            setLayout(nextLayout)
+            setError('')
+            try {
+              if (typeof localStorage !== 'undefined') localStorage.setItem(LAYOUT_CACHE_KEY, nextLayout)
+            } catch {
+              /* 存不进去也没关系 */
+            }
+            markLayout(nextLayout)
+          })
+          .catch((failure) => setError(String(failure && failure.message ? failure.message : failure)))
+      }
+      const option = (value, title, hint) =>
+        react.createElement(
+          'button',
+          {
+            key: value,
+            type: 'button',
+            onClick: () => choose(value),
+            style: {
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'flex-start',
+              gap: 2,
+              padding: '8px 12px',
+              borderRadius: 8,
+              cursor: 'pointer',
+              textAlign: 'left',
+              border: '1px solid ' + (layout === value ? 'var(--dsw-alias-button-primary-fill,#4d6bfe)' : 'var(--dsw-alias-border-l2,rgba(16,24,40,.16))'),
+              background: layout === value ? 'var(--dsw-alias-bg-layer-2,transparent)' : 'transparent',
+              color: 'inherit',
+            },
+          },
+          [
+            react.createElement('span', { key: 't', style: { fontSize: 13, fontWeight: 600 } }, title),
+            react.createElement('span', { key: 'h', style: { fontSize: 12, opacity: 0.7 } }, hint),
+          ],
+        )
+      return react.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } }, [
+        react.createElement('div', { key: 'title', style: { fontSize: 13, fontWeight: 600 } }, '气泡外观'),
+        react.createElement('div', { key: 'options', style: { display: 'flex', gap: 8, flexWrap: 'wrap' } }, [
+          option('bubble', '气泡 Lite', '右对齐气泡，宽度约对话列的 70%'),
+          option('full', '气泡 Pro', '铺满对话列、与输入框同宽，无气泡底色'),
+        ]),
+        error === '' ? null : react.createElement('p', { key: 'err', style: { fontSize: 12, color: 'var(--dsw-alias-state-error-primary,#c93a31)', margin: 0 } }, `保存失败：${error}`),
+      ])
+    }
+
     exports.apply = apply
+    exports.ConfigCard = ConfigCard
     exports.inject = ['slots', 'locale']
     exports.PLUGIN_VERSION = PLUGIN_VERSION
     exports.SEATS = SEATS

package/src/index.js

@@ -1,30 +1,121 @@
 /**
- * dsh-markdown-bubble — host half.
+ * dsh-markdown-bubble —— 宿主半部。
  *
- * The plugin has no host-side behavior: a sent message's bubble is drawn by
- * the browser's chat view, and how it renders is a client-side projection of
- * the same text the drawer already receives. The host row exists so the
- * package is mounted by the Loader — the client-module scanner scans Loader
- * entries for packages declaring `dsh.client` — and so the bundle patch has a
- * row id to insert.
+ * 渲染本身完全在浏览器半部；宿主这边只负责一件事：**记住用户选的外观**
+ * （`layout: 'bubble' | 'full'`），并通过一条只读本机路由把它交给页面。
+ *
+ * 为什么需要它：外观是客户端的事，但「用户选了什么」必须跨重启、跨窗口一致，
+ * 不能存在某个 tab 的 localStorage 里。配置文件放在
+ * `~/.dsh/dsh-markdown-bubble/config.json`，坏了就当默认值，不影响渲染。
  *
  * @module dsh-markdown-bubble
  */
+import fs from 'node:fs'
+import os from 'node:os'
+import path from 'node:path'
 
-/** Stable plugin id (matches the bundle patch's insert id and the client module id). */
+/** 稳定插件 id（与 bundle patch、client 模块 id 一致）。 */
 export const PLUGIN_ID = 'dsh-markdown-bubble'
 
-/** Keep in sync with package.json and src/client.js. */
-export const PLUGIN_VERSION = '0.1.4'
+/** 与 package.json / src/client.js 保持同步。 */
+export const PLUGIN_VERSION = '0.2.0'
 
-/** Cordis plugin name; the bundle patch resolves the package by this row. */
+/** Cordis 插件名；bundle patch 用这个名字解析包。 */
 export const name = PLUGIN_ID
 
-/** Services the inert entry needs: none. */
-export const inject = []
+/** 需要 webServer 注册配置路由。 */
+export const inject = ['webServer']
+
+/** 路由前缀。 */
+const ROUTE_PREFIX = '/api/dsh-markdown-bubble'
+
+/** 合法外观。 */
+const LAYOUTS = new Set(['bubble', 'full'])
+
+/** 配置路径。 */
+export function configPath(home = os.homedir()) {
+  return path.join(home, '.dsh', 'dsh-markdown-bubble', 'config.json')
+}
+
+/**
+ * 读配置；缺失或损坏回默认值。
+ * @param {string} [home] - 家目录（测试用）。
+ * @returns {{ layout: 'bubble' | 'full' }} 配置。
+ */
+export function readConfig(home = os.homedir()) {
+  try {
+    const parsed = JSON.parse(fs.readFileSync(configPath(home), 'utf8'))
+    const layout = typeof parsed?.layout === 'string' ? parsed.layout : ''
+    return { layout: LAYOUTS.has(layout) ? layout : 'bubble' }
+  } catch {
+    return { layout: 'bubble' }
+  }
+}
+
+/**
+ * 写配置（先临时文件再改名）。
+ * @param {{ layout: string }} next - 新配置。
+ * @param {string} [home] - 家目录（测试用）。
+ * @returns {{ layout: 'bubble' | 'full' }} 落盘后的配置。
+ */
+export function writeConfig(next, home = os.homedir()) {
+  const layout = LAYOUTS.has(next?.layout) ? next.layout : 'bubble'
+  const file = configPath(home)
+  try {
+    fs.mkdirSync(path.dirname(file), { recursive: true })
+    fs.writeFileSync(file + '.tmp', JSON.stringify({ layout }))
+    fs.renameSync(file + '.tmp', file)
+  } catch {
+    // 写不进去就用内存里的值，界面不必因此报错。
+  }
+  return { layout }
+}
+
+/** 只放行本机请求。 */
+function isLoopback(req) {
+  const address = req.socket?.remoteAddress ?? ''
+  return address === '127.0.0.1' || address === '::1' || address === '::ffff:127.0.0.1'
+}
+
+/** 发送 JSON。 */
+function sendJson(res, status, payload) {
+  res.statusCode = status
+  res.setHeader('content-type', 'application/json; charset=utf-8')
+  res.end(JSON.stringify(payload))
+}
 
 /**
- * Inert apply: the browser half owns every behavior.
- * @param {import('@deepseek-ai/cordis').Context} _ctx - owning context.
+ * 挂载配置路由。
+ * @param {object} ctx - cordis 上下文。
  */
-export function apply(_ctx) {}
+export function apply(ctx) {
+  const webServer = ctx.get('webServer')
+  const register = (server, fiber) => {
+    fiber.effect(() =>
+      server.register({
+        kind: 'exact',
+        path: `${ROUTE_PREFIX}/config`,
+        handler: (req, res) => {
+          if (!isLoopback(req)) return sendJson(res, 403, { ok: false, error: 'loopback only' })
+          if (req.method === 'GET') return sendJson(res, 200, { ok: true, ...readConfig() })
+          if (req.method !== 'POST') return sendJson(res, 405, { ok: false, error: 'GET or POST' })
+          let raw = ''
+          req.on('data', (chunk) => {
+            raw += chunk
+            if (raw.length > 4096) req.destroy()
+          })
+          req.on('end', () => {
+            try {
+              const body = raw === '' ? {} : JSON.parse(raw)
+              sendJson(res, 200, { ok: true, ...writeConfig(body) })
+            } catch {
+              sendJson(res, 400, { ok: false, error: 'malformed JSON body' })
+            }
+          })
+        },
+      }),
+    )
+  }
+  if (webServer) register(webServer, ctx)
+  else if (typeof ctx.inject === 'function') ctx.inject(['webServer'], (sub) => register(sub.webServer, sub))
+}