dsh-markdown-bubble 0.1.5 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-markdown-bubble",
-  "version": "0.1.5",
+  "version": "0.2.1",
   "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",

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.5'
+    const PLUGIN_VERSION = '0.2.1'
 
     /** 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
@@ -902,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)
     }
 
@@ -923,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(
@@ -937,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(
@@ -948,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.5'
+/** 与 package.json / src/client.js 保持同步。 */
+export const PLUGIN_VERSION = '0.2.1'
 
-/** 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))
+}