dsh-mosaic 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -4,6 +4,27 @@
 > 兼容性分两处表达：`package.json` 的 `engines.dsh` 给机器可读的范围，README「安装」一节给「插件版本 ↔ 实测 Harness 版本」对照表；每次在真实 Harness 上验证后更新这两处。
 > `0.2.1` 及各 `0.2.1-<标签>` 是改规则前的历史版本，保留用于追溯。
 
+## 1.1.2
+
+### 修复
+
+- 示意图标签里的 `(`、`)`、`[`、`]`、`{`、`}`、`|` 会让 Mermaid 提前结束标签，`get_current_lock_id()` 这类标签直接解析失败。流程图节点与边标签现在统一加引号；`state`、`er` 等已加引号的语法不受影响。
+- 标签里的双引号原本转义成 `#quot;`，但 Mermaid 12 不解析该实体，会原样显示成 `&quot;`；改为单引号，正常显示。
+- `gantt` 的任务名与分组名遇到 `:` 会被当作标签分隔符，静默丢掉后半段；现在换成全角 `：`。
+- `warnings=` 补上 flowchart 的边数与 sequence 的消息数检查——README 与 SKILL 早就写了这两个预算，代码此前只检查节点和生命线。
+
+### 清理
+
+- 删除 `validate.js` 里两个无人调用的函数（`looksLikeSpec`、`takeString`）。
+- 删除三条没有任何组件使用的 CSS（`.mosaic-chart-title`、`.mosaic-donut-label`、`.mosaic-error`）。
+- 测试面收窄到测试真正用到的导出。
+
+## 1.1.1
+
+发布流程修正，运行时代码与 `1.1.0` 相同。
+
+- `release.yml` 去掉了 `actions/setup-node@v4` 不认识的 `package-manager-cache` 输入。该行此前被忽略，每次发布都会打一条 unexpected-input 警告；缓存本就默认关闭，而这个 job 不安装任何依赖，因此直接删除并注明原因。
+
 ## 1.1.0
 
 ### 示意图

package/README.md

@@ -89,7 +89,7 @@ $DSH_HOME/logs/dsh-mosaic/YYYY-MM-DD.jsonl   # 未设置 DSH_HOME 时是 ~/.dsh/
 ```
 
 - 一行一个 JSON 对象，字段固定：`ts`、`level`（debug/info/warn/error）、`event`，其余按事件附带（如 `tool`、`ms`、`status`、`route`、`source`、`reason`）。
-- 记录什么：激活/停用、Prompt 的读取与保存（来源、字符数、是否落盘）、工具执行（名称、结果状态、耗时）、路由请求（方法、状态码、耗时）、技能被读取、以及浏览器侧上报的失败（`client.` 前缀：围栏解析失败、Mermaid 失败、Prompt 读写失败、Widget 动作被限流/超限丢弃）。
+- 记录什么：激活/停用、Prompt 的读取与保存（来源、字符数、是否落盘）、工具执行（名称、结果状态、耗时）、路由请求（方法、状态码、耗时）、技能被读取、以及浏览器侧上报的失败（`client.` 前缀：围栏解析失败、Mermaid 失败、示意图导出失败、Prompt 读写失败、Widget 动作被限流/超限丢弃）。
 - 不记录什么：Prompt 正文、组件 JSON、任何文本字段的内容。字段名为 `prompt`/`text`/`code`/`content`/`secret`/`token`/`password`/`apiKey` 时只写字符数；其它字符串超过 300 字符会被截断。
 - 体积：单文件超过 2 MB 滚动为 `<日期>.1.jsonl`；超过 7 天的文件在下次启动时删除；文件权限 `0600`。写不进去时不会影响插件，只在宿主日志里告警一次。
 - 浏览器侧的失败通过同源 `POST /dsh-mosaic/log` 上报（请求体上限 4 KB，非本机权威或跨站一律 403，客户端每分钟最多 20 条）；接口在日志落盘之后才回 204，看到成功就是真的写进去了。
@@ -108,7 +108,7 @@ grep -c '"event":"tool.failed"' "$DSH_HOME"/logs/dsh-mosaic/*.jsonl
 
 ## 已知边界
 
-- 本插件的 npm 版本独立递增（当前 `1.0.0`），不再与 Harness 版本号对齐；兼容范围由 `package.json` 的 `engines.dsh` 声明，最近一次实测的 Harness 版本见「安装」一节。
+- 本插件的 npm 版本独立递增（当前 `1.1.2`），不再与 Harness 版本号对齐；兼容范围由 `package.json` 的 `engines.dsh` 声明，最近一次实测的 Harness 版本见「安装」一节。
 - 围栏渲染靠扫描页面里的代码块实现：0.2.1 全系列（实测 rc.3 与 rc.5，master 同样）都没有给插件开放「渲染 fenced code block」的扩展点。工具通道 `render_view` + `tool.call.toolview` 是原生做法，围栏是它的补充。
 - 从 0.2.1 起代码块由 Shiki 渲染，`<code>` 上**没有** `language-*` 类；识别靠「代码块位于 assistant 行内 + 正文能解析成合法视图 spec」这条路径，用户消息、工具结果、推理块里的代码块都被排除。
 - `diagram` 与 `chart` 自带缩放/平移：卡片右上角有 `−`/`+`/`⟲`/`⤢`，放大后按住图面拖动即可平移，`Ctrl/⌘ + 滚轮`缩放，双击复位；示意图按原始尺寸渲染，不会被压缩到卡片宽度。触屏上图表区域只拦横向拖动（`touch-action: pan-y`），手指上下划仍然滚动聊天页面。
@@ -154,10 +154,13 @@ dsh plugin --profile desktop add link:/absolute/path/to/dsh-mosaic
 
 安装后重启或刷新 DSH Web，新会话即可使用。bundle patch 只插入本插件一行，不会关闭或覆盖别人的插件。
 
-**兼容性**：npm 版本独立于 DeepSeek Harness 版本，`1.0.x` 对应下方实测的 Harness 范围；声明式范围见 `package.json` 的 `engines.dsh`（当前 `>=0.2.1-rc.1 <0.3.0-0`）。
+**兼容性**：npm 版本独立于 DeepSeek Harness 版本，`1.1.x` 对应下方实测的 Harness 范围；声明式范围见 `package.json` 的 `engines.dsh`（当前 `>=0.2.1-rc.1 <0.3.0-0`）。
 
 | 插件版本 | 实测通过的 DeepSeek Harness | 说明 |
 | --- | --- | --- |
+| `1.1.2` | `0.2.1-rc.5` | 修复示意图标签里的括号/方括号/花括号导致解析失败；补上边与消息的可读预算 |
+| `1.1.1` | `0.2.1-rc.5` | 运行时代码与 `1.1.0` 相同；仅修正发布工作流的无效输入 |
+| `1.1.0` | `0.2.1-rc.5` | 13 种示意图、PNG/SVG 导出、`warnings=` 可读规模提示、布局修正 |
 | `1.0.0` | `0.2.1-rc.5`（同时复核 rc.3 行为） | 首个稳定版；含 Widget 沙箱、路由权威、Prompt 并发等修正 |
 | `0.2.1` | `0.2.1-rc.3`、`0.2.1-rc.5` | 上一版，npm 上的历史发布 |
 

package/SKILL.md

@@ -117,7 +117,7 @@ A single `diagram` node fragment (this is not a complete fence; wrap it in `{"it
 ],"legend":[{"label":"命中路径","tone":"accent"}]}
 ```
 
-`flowchart`, `sequence`, `state`, `er`, `gantt`, and `mindmap` render through a lazy-loaded Mermaid engine; `timeline`, `layers`, `quadrant`, `tree`, `funnel`, `venn`, and `swimlane` are drawn by Mosaic itself. Every diagram card has `svg`, `png`, and `drawio` export buttons in its header.
+`flowchart`, `sequence`, `state`, `er`, `gantt`, and `mindmap` render through a lazy-loaded Mermaid engine; `timeline`, `layers`, `quadrant`, `tree`, `funnel`, `venn`, and `swimlane` are drawn by Mosaic itself. Every diagram card exports `svg` and `png` from its header; `drawio` appears for the kinds it can express as vertices and edges (`flowchart`, `sequence`, `timeline`, `layers`, `state`).
 
 ### Media and links
 

package/lib/client.js

@@ -340,14 +340,12 @@ window.__ModuleLoader__.load({
 .mosaic-diff-new{background:color-mix(in srgb,var(--m-success) 7%,var(--m-bg))}
 .mosaic-chart{width:100%;height:auto;display:block;overflow:visible}
 .mosaic-chart text{font-size:10px;fill:var(--m-muted)}
-.mosaic-chart .mosaic-chart-title{font-size:12px;font-weight:600;fill:var(--m-text)}
 .mosaic-chart .mosaic-axis{stroke:var(--m-border);stroke-width:1}
 .mosaic-chart .mosaic-axis-label{font-size:9px;fill:var(--m-muted);font-variant-numeric:tabular-nums}
 .mosaic-chart .mosaic-grid-line{stroke:var(--m-border);stroke-width:1;opacity:.45}
 .mosaic-chart .mosaic-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
 .mosaic-chart .mosaic-dot{stroke:var(--m-bg);stroke-width:1.5}
 .mosaic-chart .mosaic-bar{shape-rendering:geometricPrecision}
-.mosaic-chart .mosaic-donut-label{font-size:11px;fill:var(--m-text)}
 .mosaic-diagram-wrap{max-width:100%;overflow:hidden;padding-bottom:2px}
 .mosaic-diagram{display:block;width:auto;max-width:none;height:auto;margin:0 auto;overflow:visible}
 .mosaic-mermaid{max-width:100%;padding:2px 0}
@@ -482,7 +480,6 @@ window.__ModuleLoader__.load({
 .mosaic-overlay-body[data-figure="true"]{width:min(1440px,97vw);overflow:hidden}
 .mosaic-overlay-image{display:block;max-width:100%;max-height:76vh;margin:0 auto;border-radius:10px;object-fit:contain}
 .mosaic-diagnostic{margin:0 0 6px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--m-danger) 40%,transparent);border-radius:7px;background:color-mix(in srgb,var(--m-danger) 10%,transparent);color:var(--m-danger);font-size:12px;line-height:1.5;white-space:pre-wrap}
-.mosaic-error{margin:8px 0;padding:8px 10px;border:1px solid color-mix(in srgb,var(--m-danger) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--m-danger) 8%,var(--m-bg));color:var(--m-danger);font-size:12px}
 .mosaic-skeleton{display:flex;flex-direction:column;gap:8px;padding:10px 0}
 .mosaic-skeleton span{display:block;height:10px;border-radius:5px;background:var(--m-bg2);animation:mosaic-pulse 1.2s ease-in-out infinite}
 .mosaic-skeleton span:nth-child(2){width:70%}
@@ -1528,7 +1525,9 @@ window.__ModuleLoader__.load({
 
     function SpacerNode() {
       return h('div', { className: 'mosaic-spacer' })
-    }function numberValue(value) {
+    }
+
+    function numberValue(value) {
       if (typeof value === 'number' && Number.isFinite(value)) return value
       const text = String(value ?? '').trim().replace(/[,$£€¥%]/g, '')
       if (text === '') return null
@@ -2480,11 +2479,19 @@ window.__ModuleLoader__.load({
     function mermaidLabel(value) {
       return String(value ?? '')
         .replace(/\s+/g, ' ')
-        .replace(/"/g, '#quot;')
-        .replace(/\|/g, '#124;')
+        .replace(/"/g, "'")
         .trim()
     }
 
+    /**
+     * A quoted Mermaid label. Unquoted labels end at `()`, `[]`, `{}` or `|`,
+     * so a label like `get_current_lock_id()` fails to parse; quoting is the
+     * only form that survives them.
+     */
+    function mermaidQuoted(value) {
+      return `"${mermaidLabel(value)}"`
+    }
+
     /** Parse a token colour into `[r, g, b]`; `undefined` when it is not a plain colour. */
     function parseColor(value) {
       const text = String(value ?? '').trim()
@@ -2601,6 +2608,11 @@ window.__ModuleLoader__.load({
       return lines.join('\n')
     }
 
+    /** A gantt name ends at the first `:`, so a literal one would truncate it. */
+    function ganttLabel(value) {
+      return mermaidLabel(value).replace(/:/g, '\uff1a')
+    }
+
     function ganttMermaid(node) {
       const lines = ['gantt', '  dateFormat YYYY-MM-DD', '  axisFormat %m-%d']
       let section
@@ -2608,10 +2620,10 @@ window.__ModuleLoader__.load({
       for (const task of Array.isArray(node.tasks) ? node.tasks : []) {
         if (task.section && task.section !== section) {
           section = task.section
-          lines.push(`  section ${mermaidLabel(section)}`)
+          lines.push(`  section ${ganttLabel(section)}`)
         }
         index += 1
-        lines.push(`  ${mermaidLabel(task.name)} :t${index}, ${task.start}, ${task.end}`)
+        lines.push(`  ${ganttLabel(task.name)} :t${index}, ${task.start}, ${task.end}`)
       }
       return lines.join('\n')
     }
@@ -2659,8 +2671,7 @@ window.__ModuleLoader__.load({
       const usedTones = new Set()
       const lines = [`flowchart ${node.direction === 'LR' ? 'LR' : 'TB'}`]
       nodes.forEach((entry) => {
-        const label = mermaidLabel(entry.label)
-        const withSub = entry.sub ? `${label}<br/>${mermaidLabel(entry.sub)}` : label
+        const withSub = mermaidQuoted(entry.sub ? `${entry.label}<br/>${entry.sub}` : entry.label)
         const id = idOf.get(entry.id)
         if (entry.shape === 'diamond') lines.push(`  ${id}{${withSub}}`)
         else if (entry.shape === 'round') lines.push(`  ${id}(${withSub})`)
@@ -2676,7 +2687,7 @@ window.__ModuleLoader__.load({
         const to = idOf.get(edge.to)
         if (!from || !to) return
         const arrow = edge.kind === 'dashed' ? '-.->' : edge.kind === 'accent' ? '==>' : '-->'
-        const label = edge.label ? `|${mermaidLabel(edge.label)}|` : ''
+        const label = edge.label ? `|${mermaidQuoted(edge.label)}|` : ''
         lines.push(`  ${from} ${arrow}${label} ${to}`)
       })
       if (baseStyle !== undefined) lines.push(`  classDef mosaic_base ${baseStyle}`)
@@ -4386,7 +4397,6 @@ window.__ModuleLoader__.load({
     // `inject`, so this extra key is inert at runtime.
     const __test = {
       widgetDocument,
-      widgetParts,
       WIDGET_CSP,
       widgetBridge,
       textWidth,
@@ -4397,8 +4407,6 @@ window.__ModuleLoader__.load({
       layoutVenn,
       layoutSwimlane,
       toMermaid,
-      diagrams: { QuadrantDiagram, TreeDiagram, FunnelDiagram, VennDiagram, SwimlaneDiagram, DiagramLegend },
-      inlineSvgMarkup,
       parseView,
     }
 

package/lib/validate.js

@@ -74,10 +74,6 @@ function asBoolean(value) {
   return typeof value === 'boolean' ? value : undefined
 }
 
-function looksLikeSpec(value) {
-  return isRecord(value) && Array.isArray(value.items)
-}
-
 function looksLikeNode(value) {
   return isRecord(value) && typeof value.type === 'string'
 }
@@ -103,12 +99,6 @@ function fail(state, path, message) {
   state.errors.push(`${path}: ${message}`)
 }
 
-function takeString(state, path, value, cap = LIMITS.maxString) {
-  const result = asString(value, cap)
-  if (result === undefined) fail(state, path, 'must be a string')
-  return result
-}
-
 function takeOptionalNumber(state, path, value, min, max) {
   if (value === undefined) return undefined
   const result = asNumber(value, min, max)
@@ -1362,13 +1352,19 @@ const READABLE = {
 
 /** Counts per diagram kind that a reader can take in without a guide. */
 const DIAGRAM_READABLE = {
-  flowchart: { limit: 9, count: (node) => node.nodes.length, noun: 'nodes' },
-  state: { limit: 9, count: (node) => node.nodes.length, noun: 'states' },
-  sequence: { limit: 5, count: (node) => node.participants.length, noun: 'lifelines' },
-  timeline: { limit: 7, count: (node) => node.items.length, noun: 'items' },
-  layers: { limit: 6, count: (node) => node.layers.length, noun: 'layers' },
-  funnel: { limit: 6, count: (node) => node.items.length, noun: 'steps' },
-  swimlane: { limit: 6, count: (node) => node.steps.length, noun: 'steps' },
+  flowchart: [
+    { limit: 9, count: (node) => node.nodes.length, noun: 'nodes' },
+    { limit: 12, count: (node) => node.edges.length, noun: 'edges' },
+  ],
+  state: [{ limit: 9, count: (node) => node.nodes.length, noun: 'states' }],
+  sequence: [
+    { limit: 5, count: (node) => node.participants.length, noun: 'lifelines' },
+    { limit: 12, count: (node) => node.messages.length, noun: 'messages' },
+  ],
+  timeline: [{ limit: 7, count: (node) => node.items.length, noun: 'items' }],
+  layers: [{ limit: 6, count: (node) => node.layers.length, noun: 'layers' }],
+  funnel: [{ limit: 6, count: (node) => node.items.length, noun: 'steps' }],
+  swimlane: [{ limit: 6, count: (node) => node.steps.length, noun: 'steps' }],
 }
 
 const REMOTE_ASSET_RE = /<(?:script|img|iframe|link|video|audio|source)[^>]+(?:src|href)\s*=\s*["']?(?:https?:)?\/\//iu
@@ -1421,8 +1417,7 @@ export function lintView(spec) {
       if (Array.isArray(node.nodes)) {
         accents += node.nodes.filter((entry) => entry?.tone === 'accent').length
       }
-      const budget = DIAGRAM_READABLE[node.kind]
-      if (budget !== undefined) {
+      for (const budget of DIAGRAM_READABLE[node.kind] ?? []) {
         const count = budget.count(node)
         if (count > budget.limit) {
           add(`${path}: ${count} ${budget.noun}; keep ${budget.limit} or fewer, or split`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-mosaic",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "type": "module",
   "description": "Lightweight visual answers for DeepSeek Harness: one compact visual style, an editable model prompt, dsh-view components, Mermaid diagrams, a sandboxed HTML/JS escape hatch, local-first interactions, and link-only media cards.",
   "author": "imwhatiam",