@seed-ship/mcp-ui-solid 5.6.0 → 5.7.0

package/CHANGELOG.md

@@ -5,6 +5,45 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.7.0] - 2026-05-02
+
+### Added — citation chips inside table cells (opt-in)
+
+Implements `mcp-ui-solid/docs/briefs/BRIEF-citations-in-table-cells.md`. Lifts the chip-rendering responsibility out of consumer apps (deposium had a server-side bridge in `deposium_MCPs` commit `7df433ae` that this obsoletes) so any host stops mirroring chip HTML byte-for-byte.
+
+- **`TableComponentParams.citationMap`** (optional, JSON-serializable) — `Record<string|number, { page, file?, file_id? }>`. When present, `<TableRenderer>` walks each cell string and replaces LLM `[N]` / `Citation [N]` / `[CITATION N]` / `[📄 CITATION N]` markers with chip HTML carrying `data-citation-page` + `data-citation-doc` + `data-citation-verified` attrs. Hosts can route clicks via `target.closest('[data-citation-page]')` delegation — same path as inline-markdown chips.
+- **`TableComponentParams.citationRender`** (optional, function — NOT JSON-serializable, consumer-wired) — override returning sanitized chip HTML for one marker. Wins over the default chip shape.
+- **`renderCellValue(value, citationCtx?)`** — new optional 2nd arg. Standalone use (outside `<TableRenderer>`) supported : same opt-in behavior, same DOMPurify whitelist guarantees.
+- **`CitationCtx`** + **`CitationEntry`** types exported from the package root.
+- **`defaultCitationChip()`** uses neutral Tailwind classes (`bg-gray-800 text-gray-500 border-gray-600 hover:border-teal-500`) layered with the `.citation-ref` CSS class — hosts already styling `.citation-ref` for their inline chips get visual consistency for free, no per-table override needed.
+
+Markdown composition : cells like `**MSP** [1]` produce `<strong>MSP</strong>` AND a chip in the same cell. The hasMarkdown / hasHtml branches in `renderCellValue` were re-ordered + DOMPurify whitelists extended so chip HTML survives both paths.
+
+Resolution rules :
+- Resolved id (in map) → default chip shape `[file - page]` + button with citation attrs.
+- Unresolved id with **non-empty** map → marker dropped silently (likely LLM hallucination, mirrors typical host behavior).
+- Unresolved id with **empty** map → human-visible `[réf. N]` placeholder.
+- `[p.5]` page form → preserved (negative lookbehind).
+- `[text](url)` markdown link → preserved (existing branch runs first).
+
+CSV export of cells with citations : raw markers (`[1]`) flow through unchanged. The chip HTML is only injected at render time; the CSV path uses the original `row[key]` value, which is the right choice for re-importable exports.
+
+### Changed
+
+- Dep bump : `@seed-ship/mcp-ui-spec` `^5.0.2` → `^5.0.3` (adds `CitationEntrySchema` + `TableComponentParamsSchema.citationMap` for cross-stack type safety).
+
+### Tests
+
+- `src/components/TableRenderer.citation.test.tsx` — **+15 tests** covering : no-ctx regression, single + multi chip emission, unresolved id (non-empty + empty map paths), `citationRender` override, `[p.5]` skip, markdown-link skip, mixed `**bold** [1]` compose, canonical marker shortcut, DOMPurify attr survival, button element check, plus 3 integration tests on a real `<UIResourceRenderer>` mount (no map → plain text, with map → chips in DOM, render override → custom chips).
+- Existing 545/545 tests untouched, all still pass.
+- Total solid suite : **560/560 tests pass** (vs 545 on v5.6.0, +15 net).
+
+### Migration
+
+- 100% backward compatible. `citationMap` not set → cells render exactly as before.
+- Hosts opt in by adding `citationMap: gaResult.citation_map` to their table params.
+- deposium_MCPs can now revert commit `7df433ae` (server-side `renderCitationChipHTML` + `replaceCitationsInCellHTML` helpers) and emit raw `[📄 CITATION N]` markers in cells with `params.citationMap` set — chip rendering happens client-side.
+
 ## [5.6.0] - 2026-04-27
 
 Closes B.1 migration (14/17 ComponentTypes spec-driven) AND ships B.5 — UI

package/dist/components/UIResourceRenderer.cjs

@@ -221,7 +221,27 @@ function highlightQuery(html, query) {
     return text.replace(regex, '<mark class="bg-yellow-200 dark:bg-[#222F49] text-inherit rounded px-0.5">$1</mark>');
   });
 }
-function renderCellValue(value) {
+function defaultCitationChip(pageNum, fileName, verified = true) {
+  const safeDocName = encodeURIComponent(fileName || "");
+  const label = fileName ? `${fileName} - ${pageNum}` : `${pageNum}`;
+  if (!verified) {
+    return `<span class="citation-ref inline-flex items-center gap-0.5 align-middle opacity-60"><span class="text-gray-500 line-through">[${label}]</span></span>`;
+  }
+  return ['<span class="citation-ref inline-flex items-center gap-0.5 align-middle">', `<span class="text-gray-500">[${label}]</span>`, '<button class="inline-flex items-center ml-0.5 px-1 py-0.5 text-xs bg-gray-800 hover:bg-gray-700 border border-gray-600 hover:border-teal-500 rounded cursor-pointer transition-colors align-middle"', ` data-citation-page="${pageNum}"`, ` data-citation-doc="${safeDocName}"`, ' data-citation-verified="true"', ` title="View source - ${label}">`, '<svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>', "</button>", "</span>"].join("");
+}
+function transformCellCitations(text, ctx) {
+  let out = text.replace(new RegExp("(?<![p.])\\[(\\d{1,2})\\](?!\\()", "g"), "[📄 CITATION $1]");
+  out = out.replace(/\bCitations?\s*\[(\d+)\]/gi, "[📄 CITATION $1]");
+  out = out.replace(/\[CITATION\s+(\d+)\]/gi, "[📄 CITATION $1]");
+  return out.replace(/[【[]\s*📄\s*CITATION\s*(\d+)\s*[】\]]/gi, (_m, idStr) => {
+    const id = parseInt(idStr, 10);
+    const mapping = ctx.map[id] ?? ctx.map[String(id)];
+    if (ctx.render) return ctx.render(id, mapping);
+    if (mapping) return defaultCitationChip(mapping.page, mapping.file ?? "", true);
+    return Object.keys(ctx.map).length > 0 ? "" : `[réf. ${id}]`;
+  });
+}
+function renderCellValue(value, citationCtx) {
   if (value === null || value === void 0) {
     return "-";
   }
@@ -257,20 +277,25 @@ function renderCellValue(value) {
       ADD_ATTR: ["target", "rel"]
     });
   }
-  const hasHtml = /<[a-z][\s\S]*>/i.test(strValue);
-  if (hasHtml) {
-    return purify_es.sanitize(strValue, {
-      ALLOWED_TAGS: ["a", "strong", "em", "b", "i", "code", "span", "br", "button", "svg", "path"],
-      ALLOWED_ATTR: ["href", "target", "rel", "class", "data-citation-page", "data-citation-source", "data-citation-doc", "data-citation-verified", "title", "fill", "stroke", "viewBox", "stroke-linecap", "stroke-linejoin", "stroke-width", "d"],
-      ADD_ATTR: ["target", "rel"]
-    });
+  if (citationCtx) {
+    strValue = transformCellCitations(strValue, citationCtx);
   }
-  const hasMarkdown = /[*_`[\]#]/.test(strValue);
+  const hasMarkdown = /[*_`#]/.test(strValue);
   if (hasMarkdown) {
     const parsed = marked_esm.marked.parse(strValue, {
       async: false
     });
     return purify_es.sanitize(parsed, {
+      ALLOWED_TAGS: ["a", "strong", "em", "b", "i", "code", "span", "br", "button", "svg", "path", "p", "ul", "ol", "li", "pre", "blockquote", "h1", "h2", "h3", "h4", "h5", "h6"],
+      ALLOWED_ATTR: ["href", "target", "rel", "class", "data-citation-page", "data-citation-source", "data-citation-doc", "data-citation-verified", "title", "fill", "stroke", "viewBox", "stroke-linecap", "stroke-linejoin", "stroke-width", "d"],
+      ADD_ATTR: ["target", "rel"]
+    });
+  }
+  const hasHtml = /<[a-z][\s\S]*>/i.test(strValue);
+  if (hasHtml) {
+    return purify_es.sanitize(strValue, {
+      ALLOWED_TAGS: ["a", "strong", "em", "b", "i", "code", "span", "br", "button", "svg", "path"],
+      ALLOWED_ATTR: ["href", "target", "rel", "class", "data-citation-page", "data-citation-source", "data-citation-doc", "data-citation-verified", "title", "fill", "stroke", "viewBox", "stroke-linecap", "stroke-linejoin", "stroke-width", "d"],
       ADD_ATTR: ["target", "rel"]
     });
   }
@@ -279,6 +304,10 @@ function renderCellValue(value) {
 function TableRenderer(props) {
   const tableParams = props.component.params;
   let scrollContainerRef;
+  const citationCtx = tableParams.citationMap ? {
+    map: tableParams.citationMap,
+    render: tableParams.citationRender
+  } : void 0;
   const allRows = () => tableParams.rows || [];
   const columns = () => tableParams.columns || [];
   const [sortKey, setSortKey] = solidJs.createSignal(null);
@@ -519,7 +548,7 @@ ${dataRows}`;
           },
           children: (column) => (() => {
             var _el$23 = web.getNextElement(_tmpl$10), _el$24 = _el$23.firstChild;
-            web.effect(() => web.setProperty(_el$24, "innerHTML", highlightQuery(renderCellValue(row[column.key]), debouncedQuery())));
+            web.effect(() => web.setProperty(_el$24, "innerHTML", highlightQuery(renderCellValue(row[column.key], citationCtx), debouncedQuery())));
             return _el$23;
           })()
         }));
@@ -552,7 +581,7 @@ ${dataRows}`;
               },
               children: (column) => (() => {
                 var _el$27 = web.getNextElement(_tmpl$10), _el$28 = _el$27.firstChild;
-                web.effect(() => web.setProperty(_el$28, "innerHTML", highlightQuery(renderCellValue(row[column.key]), debouncedQuery())));
+                web.effect(() => web.setProperty(_el$28, "innerHTML", highlightQuery(renderCellValue(row[column.key], citationCtx), debouncedQuery())));
                 return _el$27;
               })()
             }));